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
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
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
IFSによる形状設計/デモシーンの魅力 @ 慶應大学SFC
gam0022
1
310
CSC307 Lecture 06
javiergs
PRO
0
690
Vibe Coding - AI 驅動的軟體開發
mickyp100
0
180
CSC307 Lecture 01
javiergs
PRO
0
690
Apache Iceberg V3 and migration to V3
tomtanaka
0
170
なぜSQLはAIぽく見えるのか/why does SQL look AI like
florets1
0
480
CSC307 Lecture 03
javiergs
PRO
1
490
CSC307 Lecture 10
javiergs
PRO
1
660
高速開発のためのコード整理術
sutetotanuki
1
410
KIKI_MBSD Cybersecurity Challenges 2025
ikema
0
1.3k
24時間止められないシステムを守る-医療ITにおけるランサムウェア対策の実際
koukimiura
1
120
それ、本当に安全? ファイルアップロードで見落としがちなセキュリティリスクと対策
penpeen
7
3.9k
Featured
See All Featured
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
mfonobong
2
280
The Pragmatic Product Professional
lauravandoore
37
7.1k
Heart Work Chapter 1 - Part 1
lfama
PRO
5
35k
Google's AI Overviews - The New Search
badams
0
910
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
helenjbeal
1
130
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Exploring anti-patterns in Rails
aemeredith
2
250
A better future with KSS
kneath
240
18k
Leading Effective Engineering Teams in the AI Era
addyosmani
9
1.6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.4k
Stewardship and Sustainability of Urban and Community Forests
pwiseman
0
110
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
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
以上です!