PWA implementation of technology novice

「技術初心者なりのPWA実装」のスライドです。

Transcript

1. 技術初心者なりの PWA実装 岡澤 昂輝
2. 自己紹介 岡澤 昂輝（おかざわ こうき） 言語：Java(6ヵ月),PHP（1ヵ月）,Go(1ヵ月未満) 趣味：音楽,ゲーム,食事
3. PWA 技術初心者なりの 実装
4. PWAってなに？ 日経電子版 https://www.nikkei.com/ Twitter Lite https://play.google.com/store/apps/details?id=com.twitter.android.lite Instagram https://www.instagram.com/ アイドルマスターシャイニーカラーズ https://shinycolors.idolmaster.jp/ 「ネイティブアプリのような動作をするWebアプリを構築するための技術の総称」 現在PWAになっているサービスの例
5. PWAってなに？ アプリアイコン設置 SSL or ローカルのみ プッシュ通知 表示方法の設定 キャッシュする ストアを通さなくても良い 安全 ネイティブアプリっぽく オフラインで起動 通信量の節約 ページの高速化
6. なんかすごそう！ ・UNITY ・Live2D
7. 今回作ったもの (https://kokiokazawa.github.io/PWA-samp/) ブラウザで 見た時 アプリとして 起動した時 条件 ・２回目以降 ・５分以上間隔をあける キャラクターはLive2D公式 サンプルモデルキャラクター を使用 （参考文献にURLあり）
8. Live2D & Unity
9. ざっと説明 原画を動かすことができる 2Dのモーフィング技術を使ったソフトウェア ゲーム,Vtuber 3DCGの扱いが得意 ゲームエンジン シミュレータ UNITY
10. ざっと工程 UNITYインストール Live2Dモデルを入手 （Live2D公式サイトの サンプル素材を採用） Live2D公式サイトで (UNITY用)Live2D SDK を入手 Live2Dの公式サイト見て作る WebGLで書き出し (WevAssembly)
11. PWA
12. PWAの実装 Index.html manifest.json service_worker.js その他データ
13. 工程１ (manifest.json) ホーム画面から起動するために必要 見え方の種類 回転の制御 アイコンの設定 簡単に作ることが出来るサイト Web App Manifest Generator
14. 工程２ (service_worker.js) Webページの裏側で動く もう1つのJavaScript環境 ・データをダウンロード ・プッシュ通知の設定 最低限「install」と「fetch」があれば オフライン機能が使える
15. (service_worker.js) ライフサイクル 初回アクセス時 それ以降のアクセス時 parsed installing installed activating activated redundant
16. 工程３ (index.html) service_worker.jsの登録 manifest.jsonの登録 準備が出来たらサーバアップ（github）
17. 結果
18. 結果 Lighthouseの診断 27%足りない
19. 結果 ページが重い WebGLが重い？ サンプル作って 動かしてみよう
20. 結果 Lighthouseの診断（vue.jsのサンプルコードの場合） PWAになっている
21. 結果：PWAになっている
22. まとめ 実装するのに時間かかった WebGLが重い（UNITY側） 描画範囲の指定が難しい（UNITY側） AppShellモデルというものがあるらしい できるとやっぱり面白い AMPとかVue.jsとか勉強したい
23. 参考文献 ・現在の普及状況（サービスワーカー） https://caniuse.com/#search=service%20worker ・Live2D http://www.live2d.com/ja/ ・UNITY https://unity3d.com/jp ・Live2D SDKの公式マニュアル https://docs.live2d.com/cubism-sdk-tutorials/getting-started/?locale=ja ・Live2Dサンプルモデル集 https://docs.live2d.com/cubism-editor-manual/sample-model/
24. 参考文献 https://qiita.com/poster-keisuke/items/6651140fa20c7aa18474 https://qiita.com/MizoTake/items/7089494d7bd3e700e34b https://qiita.com/kazaoki/items/e93b88556fcd05d28ddc https://murashun.jp/blog/20171210-01.html https://magnets.jp/web_design/9341/ https://www.webprofessional.jp/retrofit-your-website-as-a-progressive-web-app/ https://app.codegrid.net/entry/2016-service-worker-1 https://qiita.com/mao_/items/6bdd988b10f2754a6d56 http://tsubakit1.hateblo.jp/entry/2017/03/31/235900
25. 以上です！