Technote

by sizuhiko

htmldayのイベントに参加してきた

htmldayとは、日本全国でWebに関する多数のイベントを同じ日(6/13)に開催することで、日本のWebを一層盛り上げようという「お祭り」です。(毎年6月の第2土曜日に開催しています。)

ということで、以下のイベントに参加してきました。

当日の講演資料

まとめサイト ができました。ありがたやー。

サービスワーカーが今後のフロントエンドを支える

Google I/Oからの流れもあると思うのですが、サービスワーカー(ServiceWorker)に関連する発表が3連続になったりと、これから取り組まないといけない技術だと思います。 SafariとIEのサポートがまだなのですが、IEに関してはEdgeがChrome相当なので、MSではそちらに期待し、Appleはそのうち対応してくれるのではないかと期待しています。

サービスワーカーとはブラウザにインストールできるタスクで、アプリケーションのバックグラウンドで動作するもので、例えばPush通知とかキャッシュとかオフラインモードの実装なんかをするのに、とても役立つ技術です。

サービスワーカーに関しての詳しい内容はググるとたくさん出てくるので、それらを参照してください。

気になるキーワード

発表の中で気になったキーワードと、関連URLを紹介します。

  • Cache API
    • サービスワーカーの紹介記事の中で「Service Worker のインストール」以降にキャッシュを使う例が出ています
  • Fetch API
  • Push API
  • Lovefield
    • Indexed Databaseに対してSQLライクにアクセスできるようにしたライブラリ、Googleが開発した
  • Babel
    • ES6のコードをES5形式にコンパイルしてクロスブラウザで動作できるようにする
    • gulpとの相性が良いので便利
  • VORLON.JS
    • ブラウザをリモートでバッグするツール。マイクロソフトが開発している
    • スマートフォンのエミュレータを使ったときDOMやJavaScriptのデバッグが難しいが、それをリモートデバッグできるようにする(昔も似た技術はあった気がする)
  • manifoldjs
    • HTML5アプリケーションを各プラットフォーム用のアプリケーションに変換するツール
    • Windowsストアアプリ、Androidアプリ、iOSアプリ、Chromeアプリ、FirefoxOSアプリに変換できる

Polymer1.0がキタ

そしてPolymerな訳です。私はPolymer大好きで0.5をけっこう弄っていたのですが、1.0は互換性ないということで、個人的な利用にとどめておいて良かったと思っています。

PolymerはWebコンポーネントを実装するための仕組みにフォーカスしているので、いわゆるMVCフレームワークとは違います。 今流行のReact.jsとはかぶる部分が多いと思っています。

Polymerが適用されている実例としては

  • Atavist
  • salesforce
  • vaadin
  • youtube

そして今回のGoogle I/Oサイトということだそうです。

で、Polymerを簡単に始めるためにはPolymer Starter Kitというものがあります。 これを使うと、ブラウザで簡単にPolymerを使ったサイトのディレクトリ構成やファイルの配置、gulpのビルドファイルなどを初期構築できます。 Yeoman的な役割ですね。

Googleが提唱するMaterial designをベースにPolymerでサイトを作ると、あらゆるデバイスに最適なGoogle I/Oのようなサイトを作れるので、サイトを例としてPolymerを使ってみるのが良さそうです。

Polymerの注意点としては、ShadowDOMの実装がアレということで、Polymer1.0ではShady DOMという疑似ShadowDOMを実装しています。ShadowDOMと思ってるとそうではないのです。

最後に

ServiceWorker、ES6、Polymerあたりの技術は今後重要になってくると思っているので、何か作りたいなーと思う収穫多きイベントでした。

あと懇親会が2度(イベントが午後の部と、夜の部にわかれていたので)あって、おいしいお酒とたくさんのビールに囲まれて幸せでした。 スポンサー様、協賛ありがとうございました!

htmlday 2015 のイベントTシャツをジャンケン大会、最後の最後、ほんとの最後の1枚でGETしました!ありがたやー。早速着てこのBlogを書いています。