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
kokiokazawa
December 21, 2018
Programming
0
750
PWA implementation of technology novice
「技術初心者なりのPWA実装」のスライドです。
kokiokazawa
December 21, 2018
Tweet
Share
Other Decks in Programming
See All in Programming
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
190
Folding Cheat Sheet #2
philipschwarz
PRO
0
110
Git Rebase
bkuhlmann
11
1.6k
Hanami and htmx
bkuhlmann
0
190
[SF Ruby, March 2024] Rails on Wasm
palkan
0
370
AWS Application Composerで始める、 サーバーレスなデータ基盤構築 / 20240406-jawsug-hokuriku-shinkansen
kasacchiful
1
250
せっかくモデル図描くのなら、嬉しいことが多い方がいいよね!
kuboaki
1
3.1k
入門 AWS Amplify Gen2 / Introduction to AWS Amplify Gen2
genkiogasawara
1
310
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
360
CircleCIを活用して AWSへの継続的デリバリーを 実践する
coconala_engineer
1
230
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
330
Site Reliability Engineering for GMO
pyama86
6
890
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
225
51k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Fontdeck: Realign not Redesign
paulrobertlloyd
75
4.9k
GraphQLの誤解/rethinking-graphql
sonatard
49
9.2k
Code Reviewing Like a Champion
maltzj
513
39k
Bootstrapping a Software Product
garrettdimon
PRO
301
110k
How To Stay Up To Date on Web Technology
chriscoyier
781
250k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
8
8.3k
Making Projects Easy
brettharned
107
5.5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.3k
GitHub's CSS Performance
jonrohan
1023
450k
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
以上です!