Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
PWA implementation of technology novice
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
kokiokazawa
December 21, 2018
Programming
0
940
PWA implementation of technology novice
「技術初心者なりのPWA実装」のスライドです。
kokiokazawa
December 21, 2018
Tweet
Share
Other Decks in Programming
See All in Programming
[KNOTS 2026登壇資料]AIで拡張‧交差する プロダクト開発のプロセス および携わるメンバーの役割
hisatake
0
290
そのAIレビュー、レビューしてますか? / Are you reviewing those AI reviews?
rkaga
6
4.6k
OSSとなったswift-buildで Xcodeのビルドを差し替えられるため 自分でXcodeを直せる時代になっている ダイアモンド問題編
yimajo
3
620
dchart: charts from deck markup
ajstarks
3
1k
QAフローを最適化し、品質水準を満たしながらリリースまでの期間を最短化する #RSGT2026
shibayu36
2
4.4k
AI時代のキャリアプラン「技術の引力」からの脱出と「問い」へのいざない / tech-gravity
minodriven
21
7.4k
CSC307 Lecture 09
javiergs
PRO
1
840
MDN Web Docs に日本語翻訳でコントリビュート
ohmori_yusuke
0
650
それ、本当に安全? ファイルアップロードで見落としがちなセキュリティリスクと対策
penpeen
7
3.9k
生成AIを使ったコードレビューで定性的に品質カバー
chiilog
1
270
ノイジーネイバー問題を解決する 公平なキューイング
occhi
0
110
16年目のピクシブ百科事典を支える最新の技術基盤 / The Modern Tech Stack Powering Pixiv Encyclopedia in its 16th Year
ahuglajbclajep
5
1k
Featured
See All Featured
Color Theory Basics | Prateek | Gurzu
gurzu
0
200
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.8k
Statistics for Hackers
jakevdp
799
230k
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
Marketing Yourself as an Engineer | Alaka | Gurzu
gurzu
0
130
Unlocking the hidden potential of vector embeddings in international SEO
frankvandijk
0
170
Become a Pro
speakerdeck
PRO
31
5.8k
Accessibility Awareness
sabderemane
0
56
KATA
mclloyd
PRO
34
15k
How Software Deployment tools have changed in the past 20 years
geshan
0
32k
Information Architects: The Missing Link in Design Systems
soysaucechin
0
780
Navigating Weather and Climate Data
rabernat
0
110
Transcript
技術初心者なりの PWA実装 岡澤 昂輝
自己紹介 岡澤 昂輝(おかざわ こうき) 言語:Java(6ヵ月),PHP(1ヵ月),Go(1ヵ月未満) 趣味:音楽,ゲーム,食事
PWA 技術初心者なりの 実装
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になっているサービスの例
PWAってなに? アプリアイコン設置 SSL or ローカルのみ プッシュ通知 表示方法の設定 キャッシュする ストアを通さなくても良い 安全
ネイティブアプリっぽく オフラインで起動 通信量の節約 ページの高速化
なんかすごそう! ・UNITY ・Live2D
今回作ったもの (https://kokiokazawa.github.io/PWA-samp/) ブラウザで 見た時 アプリとして 起動した時 条件 ・2回目以降 ・5分以上間隔をあける キャラクターはLive2D公式
サンプルモデルキャラクター を使用 (参考文献にURLあり)
Live2D & Unity
ざっと説明 原画を動かすことができる 2Dのモーフィング技術を使ったソフトウェア ゲーム,Vtuber 3DCGの扱いが得意 ゲームエンジン シミュレータ UNITY
ざっと工程 UNITYインストール Live2Dモデルを入手 (Live2D公式サイトの サンプル素材を採用) Live2D公式サイトで (UNITY用)Live2D SDK を入手 Live2Dの公式サイト見て作る
WebGLで書き出し (WevAssembly)
PWA
PWAの実装 Index.html manifest.json service_worker.js その他データ
工程1 (manifest.json) ホーム画面から起動するために必要 見え方の種類 回転の制御 アイコンの設定 簡単に作ることが出来るサイト Web App Manifest
Generator
工程2 (service_worker.js) Webページの裏側で動く もう1つのJavaScript環境 ・データをダウンロード ・プッシュ通知の設定 最低限「install」と「fetch」があれば オフライン機能が使える
(service_worker.js) ライフサイクル 初回アクセス時 それ以降のアクセス時 parsed installing installed activating activated redundant
工程3 (index.html) service_worker.jsの登録 manifest.jsonの登録 準備が出来たらサーバアップ(github)
結果
結果 Lighthouseの診断 27%足りない
結果 ページが重い WebGLが重い? サンプル作って 動かしてみよう
結果 Lighthouseの診断(vue.jsのサンプルコードの場合) PWAになっている
結果:PWAになっている
まとめ 実装するのに時間かかった WebGLが重い(UNITY側) 描画範囲の指定が難しい(UNITY側) AppShellモデルというものがあるらしい できるとやっぱり面白い AMPとかVue.jsとか勉強したい
参考文献 ・現在の普及状況(サービスワーカー) 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/
参考文献 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
以上です!