console.blog(self);

技術、読んだ本、いろいろ。

36歳になった

35歳になった直後から、想像もしていなかったことが次々と起きて、けっこう大変だった。とはいえなんとか乗り越えた。

51%のメリットと49%のデメリットがあるような判断を、立て続けにしなくてはならなかった。どちらを選んでも同じくらい大変だったりするけど、最善だと思う決断を行っていかなくてはならなかった。どちらを選んでもデメリットがあるしストレスフルだけど、それでもできるかぎり考えて、ひとつひとつをちゃんと選んできた。でも判断は手段であって目的ではない。成果をださなくてはいけない。

そんな環境に身を置いて、学ぶことがたくさんあった。ただ去年やりたかったことがあまりできず、図らずも35歳は守りの1年になってしまった。レイモンド・チャンドラーのプレイバックの一節が印象的(多くの人にとって印象的だろうけど)で、よく思い出す。

If I wasn’t hard, I wouldn’t be alive. If I couldn’t ever be gentle, I wouldn’t deserve to be alive.

Playback - Raymond Chandler

36歳はもっと攻めていきたい。とはいえ、また瀬戸内行ってゆっくりしたいな、とも思う。ちゃんとバランスとりながら、よい選択をしていきたい。

エンジニアの評価制度について

Goodpatch Advent Calendar 2016 25日目の記事です。

「エンジニア向け評価制度」とは、技術やスキルなどの側面を評価するための制度という意味合い。いまエンジニア向けの評価制度を作っていて、いろいろな会社のエンジニア向け評価制度について調べてみた。

大別すると、こんな感じ。

  • そもそも評価制度がない
  • エンジニア向け評価制度がない
  • エンジニア向け評価制度がある

そもそも評価制度がない

時雨堂やソニックガーデンには評価制度がない。

こういった考え方は、たしかになーと思う。

良い悪いを短期的に見ないからです。短期的に評価すると、短期的な視線で仕事をしちゃうじゃないですか? 一番イヤなのは、チームで助け合って働くのが大事なのに、“自分の評価を考えると、この人を助けている場合じゃない”となってしまうこと。そうなるとチームワークが崩壊します。だから短期的な評価はやめました。

スペシャリストな人が多くて、社員を増やす予定がなければ、こういったやり方がよさそう。ある程度以上の規模になると、評価制度を導入するメリットもありそう。

エンジニア向け評価制度がない

エンジニア向け評価制度がない会社もたくさんあると思うけど、明示的に持たない会社ってけっこう珍しい気がする。

― そんな理想の像がある中で、エンジニアの評価軸はどのように定めてらっしゃるんですか。

特別、エンジニアだけの評価軸って明文化されてないんですよ。エンジニアも、デザイナーも、皆「いい人をつくる」という経営理念で評価されます。エンジニアである前に、スタートトゥデイのメンバーだから、いい人をつくれると判断された人がステップアップしていくんです。

エンジニア向け評価制度がある

いろんな会社で導入されていて、参考になる。特にVoyageとペパボはいろいろな情報が公開されている。

Voyage

VOYAGE GROUPのエンジニア評価あれこれ。

こういった軸の話しとか、とても参考になる。

  1. サービスや事業を理解しているか(そもそもサービスや事業への理解が浅いと見当違いのものを作ってしまう)
  2. プロジェクトの要件や制約条件を理解しているか(プロジェクトには要件や制約条件がつきもの。これを明確に定義して作ることも欠かせない)
  3. 可用性(24時間365日動くシステムを作るために単一障害点をなくしているか,障害が起こったときに復旧・検知しやすいようになっているか)
  4. 性能(きちんと性能が出る設計か,どこかで詰まるような設計になっていないか)
  5. セキュリティ(セキュリティは堅牢か,昨今サービス提供する上では欠かせない指標)
  6. 変更容易性(作ったものは1回出して終わりではない,フィードバックを受けてどんどん改善していけるよう変更容易な設計・実装になっているか)
  7. テスト容易性(プロジェクトの制約によっては品質に時間をかけるのが難しいことも。テストが簡単にでき,プロデューサー含め専門職以外も実施しやすいよう配慮されているか)

第6回 VOYAGE GROUP執行役員CTO小賀昌法氏に訊く(後編)―クリエイティブ職向けに考え抜かれた育成・評価の仕組み:Webクリエイティブ職の学び場研究|gihyo.jp … 技術評論社

ペパボ

ペパボのエンジニア評価あれこれ。評価者側、被評価者側のエントリがあって参考になる。

こういう傾向もすごく参考になる

評価全体を見渡してみると、評価の高い人には、以下の傾向が見られます。(一人がすべてを満たしている、というわけではないです。)

  • 開発手法、開発フローに対するきちんとした理解と実践
  • 開発もインフラもできるオールラウンドな能力
  • 常に新しい技術情報を追いかけ、それを仕事にも取り込み活かしている
  • 現状これでやれてるから、とそこに留まらずに常に改善していこうとしている
  • 一部の技術ではずば抜けていて、社内で他にできる人が少ない、あるいはいない
  • いかに自動化して楽をするか、ということを常に考え実践している
  • アウトプットがすごい

Paperboy's engineer evaluation system - Gosuke Miyashita

クックパッド

その他

いまやっていること

いろいろ調べたことをまとめて評価制度の叩き台を作って、社内の全エンジニアと評価制度について1 on 1形式でヒアリングをさせてもらっている。実際にヒアリングしてみると、本当にいろいろな考え方の人がいて興味深い。多様性はあると感じた。制度設計は難しいけど。

まとめてみると、細かいところは違えど以下の観点で仕組みを作っている気がした。

  • 自社のエンジニアとして意識してほしいこと
  • 事業的な視点
  • 技術的な視点

事業的な視点と技術的な視点という分け方をしている企業が多いような印象だった。これと自社の企業理念や行動規範とのバランスが、企業ごとにちょっとずつ違う。このバランスの取り方が、大事なんだろうなと、感じている。

流行りにのるわけではないけど、評価の軸をSystem of RecordとSystem of Engagementの視点で分けつつ、バイモーダルを意識した形で選択できるように分類したらどうかな、と思っている。キーワードをそのまま使うわけではないけど、分類するための視点としてはよいと感じた。これは自分で思いついたわけではなく、ヒアリングの過程でアイディアをもらった。

WEB+DB Pressにもnaoyaさんが記事を書いていた。

WEB+DB PRESS Vol.96

評価制度の内容以外で共通しているのは、そのプロセスにしっかりと時間を掛けていることだった。評価面談の前、評価面談、その後のフィードバック面談が、しっかりと設計されていた。評価制度の内容ではなく、大切なのはどうやって相互に納得感を醸成するのかだと思う。

そこを前提として、どんなバランスがよいのか考えている。ヒアリングをしていくことで、評価制度について興味を持ってくれる人が増えたし、よい意見ももらえた。

CTOになって、ちょうど1年になる。ピーターの法則をかなり意識する。エンジニアが気持ちよく働けるような制度をしっかりと考えて、よいものを作りたい。頑張らなくては。

Variable Fontについて

f:id:sadah:20161207123013p:plain

Goodpatch Advent Calendar 2016の7日目!

フォントもくもく会 #5でVariable Fontについて調べてみた。2016年9月にVariable Fontというものが発表された。ひとつのフォントファイルで、さまざまなウェイトで表示ができる。

ワルシャワで開催中のATypIカンファレンスにて、バリアブルフォントと呼ばれる新しいタイプのフォントが世界に紹介されました。AppleGoogleMicrosoft、およびアドビが共同で開発したバリアブルフォントは、ジョン ハドソン(John Hudson)の言葉を借りれば「ひとつのファイルでありながら複数のフォントのように動作する」フォントです。ひとつのフォントファイルを使い、ファイルサイズを拡大することなくウェイト(太さ)や幅やその他の属性を無限に変更することができたらどうなるか、またデザインにおいてそれがどのような意味を持つかを想像してみてください。

原文はこちら。

Typekit BlogにVariable Fontのページができている。

Variable Fontの概要はこんな感じ。

「何百年もの間、わたしたちがつくってきた活字というものは、固定的で、動かないものでした」とアドビのTypekitとTypeのフォントデザインを監修したティム・ブラウンは言う。「いま、わたしたちがつくらなければならないのは、さまざまな状況に対応し、なおかつ美しい表示を保つ、書体デザイナーのマインドをもった製品です」

<中略>

ヴァリアブルフォントとは基本的に、フォント系をひとつのファイルに納めたものだ。いわゆる「デザインスペース」(これは専門用語だ、失礼)に1本もしくは複数の軸を置き、それを使ってフォントスタイルがどう変わるかを定義する。あるデザイナーがゴッサム体(オバマ大統領の選挙戦で使われた書体である)を使っていて、太さを変えたいと思ったとしよう。軸の一端に極細のゴッサム体、もう一端には極太のゴッサム体があり、その間にあるあらゆる太さが選択可能だ。ひとつのファイル内に、ほとんど無限の選択肢があることになる。

詳しいことはここに書いてあるけど、詳しすぎて理解できなかった。

MicrosoftGoogleも記事をあげている。

Variable FontはOpenType 1.8の仕様で定義されている。

ぜんぜんちゃんと読んでいないけど、画像だけでなんとなく雰囲気がわかる。気がする。

Variable Fontを確認する

Variable Fontを確認したい。サンプルのフォントファイルをAdobeが公開してくれている。

ビルドされたOTFがここにあるのでダウンロードする。

フォントを表示するViewerをGoogleが公開してくれている。

readmeにある通りビルドする。時間が掛かる。

$ git clone --recursive https://github.com/googlei18n/fontview.git
$ cd fontview
$ python2.7 build.py && ./build/FontView.app/Contents/MacOS/fontview

自動で立ち上がらなかったら fontview/build/FontView.app をダブルクリックして立ち上げる。

頑張ってビルドしたけど、ここにビルド済みのものがあった…。ちゃんと動いた。

さっそくAdobe Variable Font Prototypeを表示してみる。感動する。

f:id:sadah:20161207093239g:plain

Contrastを変えても変化がないなーと思っていたら、かなり細かい部分の変化だったので気付かなかった。フォントサイズを大きくしたらわかった。

f:id:sadah:20161207093300g:plain

Safari Technology PreviewでVariable Fontを試す

Safari Technology PreviewでVariable Fontがちょっとだけ試せる。すばらしい。

さっそくSafariをインストールして、文中にあったサンプルを表示する。あたりまえだけど、Chromeとかではちゃんと表示されない。

こんな感じで表示できた。うれしい。

f:id:sadah:20161207131525g:plain

サンプルのコードをみると、どうやらSan FranciscoがVariable Fontになっているみたい。ファイルを探してみるとこれっぽい。

/System/Library/Fonts/SFNSDisplay.ttf

FontViewでもちゃんと表示できた。

f:id:sadah:20161207105304g:plain

Adobe Variable Font PrototypeをWebFontとしてSafariで表示させようとしてみたけどうまくいかなかった。ざんねん。

font-variation-settings

ブラウザでVariable Fontを利用すると、font-weight / font-stretch / font-style / font-sizeあたりのプロパティが影響を受ける。こんな感じのことができるようになる。

font-weight: 791; /* Intermediate value between 700 and 800. */

またVariable Fontに関する低レベルのプロパティがCSS Fonts Module Level 4で定義されている。現在の最新版はEditor’s Draft, 6 December 2016だった。

プロパティの中身はこんな感じになっている。

f:id:sadah:20161207112851p:plain

こんな感じで指定するみたい。ただこのXHGTという文字列がなんのしていなのかわからない…。

大文字の軸名は、そのフォントの作者が独自に定義した名前(privately-defined axis tag)です。この例の XHGT はたぶん x-height の略でしょう。

[追記] id:mashabow さんがコメントで教えてくださった。ありがとうございます。

font-variation-settings: "XHGT" 0.7;

<string>にはOpenTypeまたはTrueType Variationのバリエーションの軸名(Axis Name)を指定する。これはOpenType / TrueTypeの仕様で定義されているみたい。たぶんこのあたり。

もともとAppleが作成していたTrueType GXの仕様はこれみたい。

The Font Variations Tableではこんな感じの定義がされている。

Tag Name Description Scale “Normal” value
'ital' Italic Used to vary between non-italic and italic. Values must be in the range 0 to 1. A value of 0 can be interpreted as “Roman” (non-italic); a value of 1 can be interpreted as (fully) italic.
'opsz' Optical size Used to vary design to suit different text sizes. Values can be interpreted as text size, in points. (Text size can be as determined in an application and is not necessarily physical size on a display surface.) Values must be strictly greater than zero. 12
'slnt' Slant Used to vary between upright and slanted text. Values can be interpreted as the angle, in counter-clockwise degrees, of oblique slant from whatever the designer considers to be upright for that font design. Values must be greater than -90 and less than +90.
'wdth' Width Used to vary width of text from narrower to wider. Values can be interpreted as a percentage of whatever the font designer considers “normal” for that font design. Values must be strictly greater than zero. 100
'wght' Weight Used to vary stroke thicknesses to give variation from lighter to blacker. Values must be in the range 1 to 1000. Values can be interpreted in direct comparison to values for usWeightClass(in the 'OS/2' table), or the CSS font-weight property — see the note below. 400

AppleTrueType Reference Manualだとこんな感じ。

Tag Name Default Description
'wght' Weight 1 Used for making a font range from light to black.
'wdth' Width 1 Used for fonts ranging from narrow to wide.
'slnt' Slant Specifies the angle (in degrees) of italic slant.
'opsz' Optical Size 12 Specifies the optical point size.

またfont-variation-settingsもtransformなどのCSSアニメーションをサポートしている。

Appleのページで紹介されていたコードを見直してみる。アニメーションするやつはこんな感じ。 @keyframesfont-variation-settings の値を変化させている。

div {
  font: 70px -apple-system;
  animation-name: 'doughnuts';
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes doughnuts {
    from {
        font-variation-settings: "wght" 1;
    }
    to {
        font-variation-settings: "wght" 1.98;
    }
}

いろんな種類が表示されていたやつはこんな感じ。 wghtwdth が使われている。

div {
  font: 60px 'Skia';
}

#light {
  font-variation-settings: 'wght' 0.8;
}

#heavy {
  font-variation-settings: 'wght' 1.2;
}

#condensed {
  font-variation-settings: 'wdth' 0.8;
}

#expanded {
  font-variation-settings: 'wdth' 1.2;
}

#lightexpanded {
  font-variation-settings: 'wght' 0.8, 'wdth' 1.2;
}

#heavycondensed {
  font-variation-settings: 'wght' 1.2, 'wdth' 0.8;
}

いろんなパターンを試してみたけど、うまく動作しないものも多かった。今後に期待する。

まとめ

Variable Fontを利用すると、フォントファイルのサイズを削減できるかもしれない。1つのウェイトのフォントファイルよりは大きくなるけど、複数のウェイトのフォントを利用するなら、ファイルを複数読み込む必要がなくなる。どの程度削減できるか調べてみたけど、情報があまりないみたいで見つけられなかった。

Type Projectさんではフィットフォントという製品があってデモが楽しい。このページでのウェイトの変化はSVGで実装されている。

これまでフォントの多くは、利用するウェイトが増えると価格が高くなることが多かった。Variable Fontになると、1つのフォントファイルでさまざまなウェイトやコントラストがカバーできるようになる。そうするとフォントの価格ってどうなるんだろう、と思った。すでにTP明朝ではコントラストという概念もあるし。

Variable Fontの普及やフォントファイル側の対応にはまだ時間が掛かるだろうけど、これまでにできなかった表現ができるようなるのがとてもたのしみ。