Firefox Developers Conference 2015 in Tokyo に行ってきたメモ #fxdevcon

1: Webは文字メインという概念があったから？

そうだとしても！

• アニメーションを言語として使う(変化を表現するもの)
• 画面と画面を紐付けて関係を明確に表すこともできる

ので、積極的にアニメーションさせていきたい。

2: アニメーションはつくるのむずかしいから？

そんなことないよ！

• CSS Transitionがいちばん簡単
• CSS Animation(一方通行でいいものはTransition)
• SVG Siml(Chromeから消えたのでなくなるかも・・)
• JavaScriptでやる(VelocityとかSnap.svgとか)
• Web Animations

3: パフォーマンスつらいから？

アニメの作成手法に学ぼう！

• パラパラ漫画ではなくセル画のイメージで差分だけ描画するほうが軽い
• transform / opacityだけ使うなら、コンポジター任せにできるので軽い
• jsでやる場合予測できないからダメ・・

コンポジターは別にFireFoxだけの話じゃなくて、いわゆるGPUに処理させるやつのことかなーと。
レイアウト関係なくペインティングだけで済ませて最適化するとかなんとかいうアレ。

FireFoxのDevToolsも進化してるので、アニメーションの開発も今なら楽だよ！って言ってたけど、だいたいのことはとうの昔にChromeでできたりする・・。

参考: DevTools Challenger

Wep / TVの開発の違い

• 解像度が違う(4kまである)
• 距離がある(手元で使わない)
• リモコンで動かす
• `focus`できる要素が重要

これ、もしかしてガラケー時代のノウハウが活かせるのでは！とか思いつつはじまり。

focusするということ

• form系の要素はfocusable
• tabindexを振る(-1がおすすめ)ことでもfocusableに
• tabindexを1以上にすると、PCで見たときにformじゃないのにTabが効いてしまう
• outlineのスタイルは別途用意すべし
• リモコンは矢印キーしかない
• ライブラリつくった -> luke-chang/js-spatial-navigation · GitHub

なんかこのライブラリの使い方の説明にほぼ時間割かれて、他にTVでWebやるのはどう違うのかの説明がなく＼(^o^)／

Mozillaの人でありながらエンジンレベルではなくjsのライブラリでどうにかしようとしたのは、今のところそうするしかなかったからで、仕様化したいと思ってはいるけどまだ時間はかかりそうとのこと。

emscripten

• jsを生成するC/C++コンパイラ・ライブラリ
• clang/LLVMベース
• emsdkってのを使ってインストールできる
• コマンドでソースをビルドして、jsから呼び出して使う
• 型はvoid / number / string
• そもそもゲームを速くしたいので生まれた
• inlineでjs書けたりする(EM_ASM)
• JITされやすいコードになってる、TypedArray使ってたり

asm.js

• angrybotsのデモ
• ファイルサイズがデカくなる
• テキストなので構文解析も遅い

Web Assembly(wasm)

• バイナリフォーマット(テキストもあるよ)
• 型(i32 / i64 / f32 / f64)

UAで処理判定しちゃう問題

• Yahoo!JapanはOperaでもUA偽装しても動く！
• これはサーバーでUAみてリダイレクトかけてるから
• ただUAで処理を分けるのはよろしくない・・
• ヘタすると無限リダイレクトループとかになるし

ほかにもある問題たち

• Androidのバージョン判定つらい問題
• 背景画像のサイズ指定うまくいってない問題
• グラデーションの指定がずれて文字色白とかぶってみえない問題
• max-widthの仕様があいまい問題
• flexboxの古い仕様しか対応してない問題

なので

• ユーザーのために、対応してこ
• ちゃんと色んなブラウザで見よ
• https://webcompat.com/ バグ報告してこ

ってもOperaもFireFoxもほとんどアクセスないし、それわざわざ時間かけて対応する必要あんの問題との兼ね合いになるよねー・・。