ぱすたけ日記

日記っぽいのを書きます。

YAPC::Fukuoka 2017 HAKATAにトークプロポーサル出した

トーク出した。

とのこと。各位やっていきましょう。

トークプロポーサルはこういう感じです。

ブラウザ拡張のクロスブラウザ対応についてどう向き合っているか 2017

フロントエンド界ではもう10年以上に渡って話され、最近ではBabelの登場などにより枯れてきつつあるクロスブラウザという話題ですが、皆さんブラウザ拡張開発もクロスブラウザ対応をやっていく時代になってきたのを知っていますか?

数年前まではChromeFirefoxSafari…とそれぞれ独自のAPIや機構を有していましたが、数年前からFirefoxChromeAPIをベースにしたWebExtensionを導入し、今年の12月にStable Release予定のFirefox v57で従来のAPIは全て廃止され、WebExtensionに一本化されることになっています。MicrosoftのEdgeもブラウザ拡張に対応しており、そのAPIChromeAPIを踏襲したものになっています。またこれらの動きに伴ってW3CでBrowser Extensions APIの標準化に向けた作業も始まっています。

そのような現状についての簡単な紹介を行った後に、私が実際にブラウザ拡張を開発している中で直面したクロスブラウジングに関する話題について実例を交えて紹介を行います。具体的には以下のような話題について触れる予定です。

  • クロスブラウザ対応のための開発ツールについて
    • webpackやその他私がクロスブラウザ対応のために開発したり利用しているツールについて
      • webpackを例にどのようなbuildアプローチを取ることで複数ブラウザに対応したコードを生成できるのか
      • manifest.jsonを生成するための pastak/wemf について
      • ブラウザAPIを提供するトップレベルオブジェクト名の差異を吸収する pastak/chrome-browser-object-polyfill について
  • ブラウザ間の実装差異を如何に吸収するかというテクニックについて
    • Chrome Extensionから他のブラウザでも動くソースコードに変更するための方法について
    • 現状、どのような差異・問題がブラウザ間に存在しているのか
    • ブラウザ間の差異を吸収するために現状取ることの出来るアプローチ、または発見するためのデバッグ手法、または"勘"について

東京行った

週末東京行ったので、その日記。

主目的はやぱちー。今年もスタッフとして行ったけど、特に何かをしたとかなくて準備と片付けを手伝ったのとあとはHDMI<->Type-Cの純正を提供したくらいだった。

ついでにバイト先の会社のサービスのドリンクアップを企画した。

どちらも多くの人に来ていただいて盛り上がって良かった。

Scrapbox Drinkupはまた8月くらいにやろうという雰囲気なので、もし会場をお貸しいただけるとかありましたらお知らせください。

今回の旅行はその2つがメインだったのだけど、それ以外の時間はほぼずっと飲んでいて過酷だった。

Scrapbox Drinkup中に缶ビールをすでに4本くらい飲んでいたのが、その後打ち上げで海老バルなるとこに会社の人々と行ってビールを飲んだ。

渋谷で生誕祭なるイベントが開催されているという情報を得たので、東京駅から終電で渋谷へ向かう。

向かっていたときの状態。

『歩道橋渡ってドーン』ってなんやねんと思ったけど、本当に歩道橋渡ってドーンだった。助かった。

生誕祭にはインターネットの人々が居た。色んな出来事があったような気がするが、ハイライトとしては深夜の東京渋谷のライブハウスで聞くsuchmosはエモいということ。

イベントが5時すぎまであり、その後富士そばへ。

翌朝は9時からやぱちーの準備だったので、6時くらいにネットカフェに突入して寝。

やぱちーは起床成功したが、終始二日酔いで眠かったのでテンションが低かったが、懇親会前くらいから元気になって、懇親会でまたビールを飲むという展開だった。

懇親会のあとはmoznionや数人とビアパブみたいなのに入る。日付変わるくらいで渋谷を飛び出して新宿へ。インターネットっぽい人々と合流してビールを飲む。その後、まだまだやっていくぞということで『めだか』という新宿の荒れた店に入る。『やたいや』の椅子を丁寧にした感じの店。

その後はまぁ紆余曲折あり『カウボーイビバップ』を見始めたがすぐに寝た。

翌日日曜日は新幹線で帰って、その後今週末のイベントに向けてDJ練習会に参加して、他の人のプレイの様子を見たり知見を吸引した。

博多行きで緊張感マックス

DJ練習会も打ち上げしたが、疲れがMAXだったので、ウーロン茶で過ごした。丁寧。

というわけで皆さん今週末来てください。僕は大森靖子神聖かまってちゃんなどを流す予定です。

『Webフロントエンド ハイパフォーマンス チューニング』をざっと読んだ

Webフロントエンド ハイパフォーマンス チューニング

Webフロントエンド ハイパフォーマンス チューニング

が発売されていたので買って読んだ。

この辺のブラウザのパフォーマンスチューニングに関する分野は昨年から今年の春にかけての強い関心事でした*1

昨年中は主に <canvas>を利用したお絵かきツールの話の作業において非常に知見がたまったので、今年の頭にかけて2つのスライドで知見を共有しました。

1つ目はブラウザをレンダリングエンジンの振る舞いという観点で理解をするというスライド。

知っておきたいブラウザについての基礎入門 // Speaker Deck

2つ目は↑で理解したレンダリングエンジンの振る舞いのフローに対して、どのような検証やアプローチをするとパフォーマンスに影響を与えることが出来るのかということについて書いたやつです。

Webアプリケーションで 60fpsを(極力)目指す // Speaker Deck

この本Webフロントエンド ハイパフォーマンス チューニングを読んだ感想としては、これらのスライドを作る前に是非読みたかったなぁというのが正直な感想。さらに言うと、この本があったら、上の2つのスライドは作ってなかっただろうなと思った。結構スライドに入れたいけど、時間や発表時の対象者などの制約から省いたことが数多く書かれていた。

『Webフロントエンド ハイパフォーマンス チューニング』はブラウザに起きるパフォーマンスに関係するあらゆ出来事が網羅されていた。序盤ではネットワークについても書かれていたし、後半では大部分を割いてレンダリングの最適化について書かれていた。それぞれについて、計測の方法や指標と出来ること、どのようなアプローチが取れるのかについて書かれていて、それがブラウザ内部で起きるイベントの順番に書かれていて、それぞれのチャプター冒頭部分に、今はブラウザのどの処理についての記述なのかが図で描かれていたので分かりやすくて良いなと思った。

内容としては、突飛なテクニックを使うということはほとんどなくて、とにかくブラウザのパフォーマンスチューニングについて勘所と基本的なアプローチをまずは抑えるという感じだった。なので、アプローチに関しても飛び道具的なハッキーなコードを書くとかはなくて、CSSの機能をどう使うかとか、JSでのDOM操作の工夫とかが書かれてる感じ。

個人的には上記のスライドを作る時に色々関係資料を読んだので、それらと結構重複していて、あまり目新しい知見というのはなかったが、知識の再確認をざっと出来たのは良かった。

ここからはダメ出しのような感じになってしまうのだけど、内容は終始Googleの関連トークや文書などで語られているチューニングの話がベースになっている感じで、紹介されているツールもGoogle ChromeのDevToolsだけだったので、もう少し踏み込んで、実際のアプリケーションでどのような問題とアプローチとして活かされているかとかも知りたいと思った。

何より本文内で紹介されているチューニング手法について、その手法が直感的に有効そうなのは理解できるが、コラムで否定されている『小さな最適化』になりそうなテクニックもいくつかあって、それぞれのアプローチがどのような成果をもたらすのかについて具体的な計測であるとか実例であるとかが盛り込まれていると、より紹介されているテクニックを適用する際の指標が増えて良さそうだと思った。これに関しては「何事も『推測するな、計測せよ』」なのだという著者からの勝手なメッセージなのだと信じることにした。(結局どのアプローチが良いかというのはケースに依存するのであるケースではピーキーに効くものがある似たようなケースでも大した差が出ないこともある。それに対して無闇矢鱈と指標を与えるのは良くないので、本書はそういうのを止めて、事象の理解と取りうるアプローチのパターンを読者に提供するのだと思うと腑に落ちた)

という感じでした。ブラウザのレンダリングと具体的なアプローチについて、ブラウザの処理の流れやイベントに沿って、検証方法や改善方法をシンプルにまとまっている本はなかなか巡り会えずに春前くらいに色んな資料を横断した記憶があるので、個人的には感激しました。紹介したスライドを見て、へーと思ったり興味を持った人は読んで損はないと思います。日本語でここまで凝縮されていてページ数も300ページくらいなので、ざっと読むとか出来るのでおすすめです。

Webフロントエンド ハイパフォーマンス チューニング

Webフロントエンド ハイパフォーマンス チューニング

azuさんがTwitter#Webフロントエンドハイパフォーマンスチューニングで関連情報を書かれていたので、こちらも読むと良いと思います。

*1:今の主な関心事はブラウザ拡張の相互互換性問題に移り変わっている季節

昨日の夜のビール

昨日の夜はワンツーチーに行った後に、6周年記念ウィークリー期間中の麦潤へ。

大山Gビール 大山ゴールド20143年熟成のゴールドエール。カラメルみたいな感じでまろやかで後味も甘い

エールスミス .394ペールエール

米国 エイブリーのメフィストフェレス。アルコール度数14.6%でめちゃくちゃ重厚でヤバい。日本輸入が10樽しかないらしい。

京都醸造 夏の気まぐれ〜6周年スペシャル。 京都醸造の夏の気まぐれをシムコーでドライホッピングした特別版とのこと。 後味の苦味がいつもより舌に残る気がする

どれもめちゃくちゃ良かった。

ハイライト情報

木曜日〜日曜日の出来事をハイライトでお伝えします

木曜日

ワンツーチーで汁なし担々麺を見に行った。麻婆豆腐も食べたが両方辛く、唯一辛くない餃子をデザートと呼んでいた。実際に皮が甘かった。辛いものをいっぱい食べたので、その後から翌日までお腹を下した。

汁なし担々麺見

金曜日

暑すぎてビールを飲みたいということで久しぶりに地球屋に行った。

地球屋は四条河原町にある居酒屋。中は百万遍感がある。3人で4500円くらいだった。格安。皿うどんが巨大で美味い。

2次会として、すぐ近くのレボリューションブックスへ。辛奴が美味しかった。常連の方に1杯奢って頂いた。

土曜日

サークルの新歓コンパ。1次会はDENENだった。

DENENのあとはみんなで鴨川に行った。目を離したスキに人々がすしてつに向かったという情報が入ったので、後を追ったところ、我々は入店できたが、中に人々はいなかった。後から聞いたのだけど、すしてつに入れずにDENENに行ったとのことだった。

我々は運良く入店できたので、芽ネギを見た。

そのあとはDENENに合流し、タワービールを注文。

東京から京都にやってきている人がいたので、一緒にOTAKU Bar iSMに。

最近のアニメ観れてないので、唯一観ているリトルウィッチアカデミアから『アッコ』を注文する。

その後はシエスタでやってた2年ぶりのプログラマーズナイトに顔を出し、4時過ぎに解散。お疲れ様でした。