パンダからの脱却

赴くままに

Women Techmakers主催のIWD 2016 Tokyoに参加してきました

IWD 2016 Tokyo に参加してきましたのでこちらにレポートします。司会はGoogleIwao Harukaさんがされていました。

f:id:hiro004:20160320103520j:plain


本イベントのスケジュールは、下記になります。
1. キーノートセッション
2. パネルセッション
3. ワークショップ(コードラボ or デザインスプリント)
4. 懇親会

 

ワークショップはコードラボかデザインスプリントが選べたので、私はコードラボへ参加してきました!この記事ではコードラボについてお話しますので、キーノートやパネルセッションの内容はTwitterハッシュタグ#WTM16」で見れますのでご確認ください。


では、コードラボコンテンツにてお話します。Googleのえーじさんが登壇されていましたのでそれにならい進めますね。サポートとしてえーじさんの他に、きぬこさん(Service WorkerのTechリード)、ほろさん(Service Workerのエンジニア)がいらっしゃいました。

 

WEB vs ネイティブ

サービスの多くはWEBサイトとネイティブアプリを用意しています。では、どちらの方が利用者のシェアが多いのでしょうか?えーじさんがクックパッドで公開している情報をもとに説明してくれました。下記リンク先にある棒グラフをみてください。

info.cookpad.com

上記の棒グラフを見ると、スマホWEBのシェアの1/3がネイティブアプリになりスマホWEBの方が多いですね。ネイティブだと起動がすぐにでき使えるのになぜスマホWEBの方が多いのしょうか?それは、検索からの流入が圧倒的に多いことが要因の一つになります。しかし、ネイティブはプッシュ通知が送れたり、アイコンタップですぐに起動したりと利便性があります。では、どちらのプラットフォームがいいのでしょうか?

 

f:id:hiro004:20160320000938p:plain

ちょっと荒れちゃっててすみません。。。

 

上記の表のようにネイティブそれぞれの良さがあり、どちらとは言い難いですよね。そこで生まれたのがApp IndexingやProgressice Web Appsなどのサービスになります。「WEBとネイティブのそれぞれの良いところを取り入れよう」としているサービスですね。今回のコードラボでは、Progressice Web Appsの一つであるService Worker機能について、実際に動作するまでを実装しました。

 

Service Worker

Service Workerの機能には、「Offline Cache」「Add to Home」「Chrome Push」の3つの機能があります。これら機能を利用すると、オフラインでもWEBページが見れたり、ブラウザを起動しなくてもWEBサイトに訪れただけでユーザーへプッシュ通知を送ることができます。便利な機能ですよね!

 

コードラボ

はじめに、Android端末があるとService Workerの良さがより伝わるので準備をお願いします。コードラボのすべてのコンテンツは下記リンク先に用意されていますので、この教材をたどっていってただければ作れるようになっています。

はじめてのプログレッシブ ウェブアプリ

 

以下、①〜⑨を進めてみて個人的につまづいた点を書いておきます。

Service Workerの確認方法(⑥)

⑥のテスト項目に「Wervice Workerが適切に登録されされ正しいリソースがキャッシュされているか確認する」とあります。これは、まず Chrome DevTools → Resources → Service Workers があることを確認します。

f:id:hiro004:20160320002441p:plain

このとき、「Worker」項目をみてstoppedとなってたらrunningへ変更します。runningにするとService Workerが動作するのでリロードしましょう。ちゃんと読み込まれると、Chrome DevTools → Resources → Cache Storage に ```service-worker.js``` で指定したキャッシュ名前「weatherPWA-step-6-1」が作られているはずですので確認しましょう。これらテストがしっかりできていれば、サーバーを切った後にブラウザをリロードしても指定ページが表示できます。

 

Android端末の準備(⑧)

ワーク8を進める前に、予めPC内に立てたサーバをAndroidでも利用できるようにします。

  1. Android端末のUSBデバックモードをオンへ変更
  2. Android端末とPCをUSB接続した状態で http://chrome://inspect/#devices を表示
  3. フォワードさせるために、「Port forwarding」ボタンをタップし表示されたダイアログにlocalhostを設定

    f:id:hiro004:20160320002608p:plain

上記が設定できたらAndroid端末のChromeブラウザにて指定ページが表示できるか確認してみてください。また、Service Workerのコードを変更した場合はAndroidChromeキャッシュを削除してから再度リロードしてください。

f:id:hiro004:20160320002722p:plain

 

manifest.json追加でURLバーをなくす(⑧)

スマホのWEBサイトは、ブラウザの上部に常にURLバーが表示されていますよね。Service Workerでは、このURLバーをなくすことでネイティブさを出すことができます!本番運用する場合は前提としてChorme機能にあるサイトに何度も訪問されたユーザーに対して「ホーム画面追加しませんか?」動線が出てくるがこれはSSL対応が必須となりますので、気をつけて下さい。実際にやってみると、、、このようにホーム画面のアイコンタップ時にフルスクリーン表示の完成!manifest.jsonを追加していればフルスクリーン対応できるんですねー。

 

f:id:hiro004:20160320003026p:plain


あとはモクモクと作業し、コンテンツ内容を読み込むだけ。


懇親会

f:id:hiro004:20160319154955j:plain

イベントのラストは懇親会。なんと十四代などの日本酒が!乾杯が日本酒でできるのはテンションが上がりました。笑 他にもお寿司や和菓子など色んな食事が用意されていました!参加費ただなのに凄いです!

 

以上、レポートでした。