» 第5回 HTML5minutes!! 〜triton-js〜 イベントレポート

Webクリエイターのシゴトに役立つ勉強会@晴海トリトン

11月25日に”第5回 HTML5minutes!! 〜triton-js〜”が開催されました!

 
こんにちは、Triton Creators Lab編集部のもんたです。
今回はなんと14人の方に登壇していただき、参加者数も過去最大級!
そんな中で気になった,

「Webは今まさに面白い(オフライン編)」
登壇者:宗定洋平氏(株式会社サイバーエージェント)

について少しまとめました!
 

「Webは今まさに面白い(オフライン編)」 登壇者:宗定洋平氏(株式会社サイバーエージェント)

LTでは現在のWebの問題点をいくつか挙げていただきました。
その中でもWebアプリがネイティブアプリよりも遅いことに今回は注目していました。
なぜWebは遅いかというとファイルからデータを取得する場合、多数の行程を経て実行されているからです。

そこで、オフライン機能を使うと、その行程を圧縮できるので、処理速度が早くなります。
機能として現在使われているのは、HTML5 App Cashe、LocalStorage/SessionStorage、Navigator.onLineなどなど。

特にHTML5 App Casheはマニフェストファイルさえ書けば使えるので簡単。
ただ、HTML5 App Casheには問題点も多数。

そこを解決するのに出てきたのがServiceWorkerです。
ServiceWorkerについてコードも示しつつ、ご紹介いただきました。

最後に宗定氏は他にもWebの問題点を挙げ、そこを解消する技術をいくつかピックアップし、
「Webは今まさに進化していて面白い!」という形で締めくくりました。

今回のLTを聞いてHTML5の適応できる領域が常に広がっていると感じました。
ServiceWorkerが実装されれば、アプリ開発の言語も広がって、
より多くの人がアプリ開発に携われるのではとワクワクしますね。
 

HTML5 App CasheとServiceWorkerについて

本イベントでHTML5 App CasheとServiceWorkerについて出てきたので、少し紹介したいと思います。

▼HTML5 App Cashe

HTML5 App Casheについての紹介はLTでもあったと思うので、問題点を少し詳しく書いてみました。

・キャッシュを行う際にすべてのファイルに対して処理してしまう
・キャッシュのクリアが困難
・Web上の動的な部分はすべてJavaScriptで構築するため、
 サーバーサイドで動的コンテンツを生成している場合、導入するのに障害になる
など

このような問題点の数々から「設計に失敗したAPI」とも呼ばれているほど。
その解決策としてServiceWorkerが出てきました。

▼ServiceWorker

ServiceWorkerの特徴として

・JavaScriptを用いたキャッシュコントロール
・Webページにアクセスするたびに更新の確認ができる
・インストールの処理はバックグラウンドで行われる

が挙げられます。

下記では、ServiceWorkerのコードと流れを挙げています。

Register(登録)

まず、ServiceWorkerとして動作させたい処理を登録。

 

リソースのCache

オフラインでも動作させるためには、キャッシュを利用するためのコードの準備。

 

Fetch(リソースの取得)

これでServiceWorkerのコーディングは完了です。
 

まとめ

現状ではまだブラウザの実装も進んでいないことからわかるように、最先端のWeb技術の一つです。
今後、ServiceWorkerはオフラインWebAppのコア技術になると予想されています。

宗定氏もおしゃっていたように、
ServiceWorkerなどの新しい技術が出てきて、Webがより進化しているのが見て取れますね。

これからもイベントがあるごとにレポートを載せていくので、
ぜひよろしくお願いいたします。
 

Page Top