🍃このブログは移転しました。
3秒後、自動的に移動します・・・。

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

Web

なんか他のカンファレンスとか勉強会と違って、BGM流れてたりライティングがなんかしゃれおつな空間でした・・！
同時通訳の機械みたいなのも全席にあったりいつもと違った雰囲気。

客層もオジサンばっかりじゃなくて女の人も多かった気がする。
スタッフに学生さん？っぽい人もいたりとか、これがMozillaの力か！

さてさて。

Keynote

流し聞きだったのでだいぶざっくり。

鉄腕アニメーション！ / Brian Birtles

ネイティブアプリだとアニメーションするのに、Webだとアニメーションしないサイト多いのなんで問題について。

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

TV Optimized Web App / Luke Chang

  • TV向けアプリは勝手がぜんぜん違う
  • B2G desktop or Add-onのシミュレータで開発する
  • FireFoxならWebIDEってのもある

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のライブラリでどうにかしようとしたのは、今のところそうするしかなかったからで、仕様化したいと思ってはいるけどまだ時間はかかりそうとのこと。

Porting C/C++ code to Web / 加藤 誠

知らないこと多すぎてメモがメモになってない可能性あり


似たような試みはいままでもあった。

  • NetscapePlugin API
  • ActiveX Control
  • PNaCL / PPAPI
  • Addons / Extensions

ChromeではNPAPIはサポート終了されてるけど、

などの種類がある。

FlashやSilverlightのためにDRMってのがあるが、新たにEncryptedMediaExtensionsって仕様が策定中。

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)
Minumum Viable Product
  • Module
  • AST
  • バイナリフォーマット
  • テキストフォーマット
  • ブラウザ / 非ブラウザでの実装
  • Polyfill

最低限これを決めないといけないリストのこと。

ほかにasm.js -> wasmの仕組みとして、binaryanってのがある。

The Web for Everyone - Let's fix it! / Karl Dubost

  • 日本のWebSiteの20％くらいはFireFoxで動かない


ほかにも問題は巷にあふれている！

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

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

ほかにもある問題たち

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

なので

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

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

Web 技術の今日とこれから：View Source Conference レポート / 矢倉 眞隆

きゃー、@myakura さーん！

オレゴン州はポートランドから、ViewSource Conferenceのレポート。
世間話から入るあたり手馴れてる感がありますね！19歳(疑惑)やのに！

写真としゃべりがおもしろくてへぇーって言ってたら終わってた。
まぁ行ってよかったということでメモなし。

おわりに

特にこれが聞きたい！っていう感じで行ったわけではなかったけど、多種多様な話をいろいろ聞けてよかったなーという感想。

今年はこれで勉強会ラッシュはもう終わりかな？
おつかれさまでしたー。