Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
SPA で作る とこれからのWEB体験の話 2021/04/20 Wed. @TAMTO ゲーム制作と技術選定 サガワフミヤ
Slide 2
Slide 2 text
サガワフミヤ/佐川史弥 @fumi_sagawa フロントエンドエンジニア Occupation Company 🏢TAM東京 ゲーム好きです🎮 最近エルデンリングをクリアしました ⼀⽅で積もるBacklogのToDoチケット 僕にゴールデンウィークは訪れるのか アトリエシリーズはいいぞ。
Slide 3
Slide 3 text
ある⽇…
Slide 4
Slide 4 text
👨 TAM⾓⾕さん なんかノベルゲーム作るらしい! ミーティング参加してみて! すごい頼れる
Slide 5
Slide 5 text
🤔 サガワ 診断コンテンツ的なやつか?
Slide 6
Slide 6 text
TAM村松さん 99部屋 ⾃由に⾃由に⾏き来する ノベルゲームをやります! ⾳声付き を すごい良いデザインする
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
『HOTELブルーローズ99の部屋』とは 仕様と技術選定 使⽤ライブラリと実装 振り返りとこれからのWeb表現について 1 2 3 4 ⽬次
Slide 9
Slide 9 text
⽬次 『HOTELブルーローズ99の部屋』とは 仕様と技術選定 使⽤ライブラリと実装 振り返りとこれからのWeb表現について 1 2 3 4
Slide 10
Slide 10 text
『HOTELブルーローズ99の部屋』とは ブラウザでプレイできる サスペンスノベルゲーム
Slide 11
Slide 11 text
『HOTELブルーローズ99の部屋』とは ブラウザでプレイできる サスペンスノベルゲーム リアル脱出ゲームで有名な SCRAPさん作
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
企画 デザイン 実装 本⽇の内容
Slide 14
Slide 14 text
企画 デザイン 実装 尺がないので 今⽇はこちらだけ 本⽇の内容
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
⽬次 『HOTELブルーローズ99の部屋』とは 仕様と技術選定 使⽤ライブラリと実装 振り返りとこれからのWeb表現について 1 2 3 4
Slide 18
Slide 18 text
TAM村松さん 99部屋 ⾃由に⾃由に⾏き来する ノベルゲームをやります! ⾳声付き を すごい良いデザインする
Slide 19
Slide 19 text
いただいた仕様 ブラウザで動作する プレイ判定API連携がある SNSシェアがある オートセーブ機能がある BGMを常時再⽣する ストーリー分岐がある ギミックがある(パスワードなど) SE(効果⾳)がなる
Slide 20
Slide 20 text
UI(3種類) 基本画⾯
Slide 21
Slide 21 text
結論
Slide 22
Slide 22 text
SPA Local Storage で⾏こう!! 技術選定
Slide 23
Slide 23 text
で解決できる仕様 SPA ブラウザで動作する プレイ判定API連携がある SNSシェアがある オートセーブ機能がある BGMを常時再⽣する ストーリー分岐がある ギミックがある(パスワードなど) SE(効果⾳)がなる
Slide 24
Slide 24 text
で解決できる仕様 Local Storage ブラウザで動作する プレイ判定API連携がある SNSシェアがある オートセーブ機能がある BGMを常時再⽣する ストーリー分岐がある ギミックがある(パスワードなど) SE(効果⾳)がなる
Slide 25
Slide 25 text
BGMを常時再⽣する SE(効果⾳)がなる WEB上における メディア取り扱いは難しい…
Slide 26
Slide 26 text
で解決 SPA ブラウザで動作する プレイ判定API連携がある SNSシェアがある オートセーブ機能がある BGMを常時再⽣する ストーリー分岐がある ギミックがある(パスワードなど) SE(効果⾳)がなる
Slide 27
Slide 27 text
⽬次 『HOTELブルーローズ99の部屋』とは 仕様と技術選定 使⽤ライブラリと実装 振り返りとこれからのWeb表現について 1 2 3 4
Slide 28
Slide 28 text
主要ライブラリ Vue 3 Pinia VueUse
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
script setup構⽂ composition関数(ほぼHooks) CSSそのまま書ける Vue3の紹介
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
script setup構⽂ composition関数(ほぼHooks) CSSそのまま書ける Vue3の良いところ シンプル…
Slide 33
Slide 33 text
script setup構⽂ composition関数(ほぼHooks) CSSそのまま書ける Vue3の良いところ 責務の分離、 再利⽤性の向上
Slide 34
Slide 34 text
script setup構⽂ composition関数(ほぼHooks) CSSそのまま書ける Vue3の良いところ Web系コーダーとの 分担がしやすい
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
ただのグローバルなState Piniaの紹介 Reactだと Recoilが近い
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
呼び出したら ただのState
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
ユーティリティ関数のパッケージ VueUse 今回はlocalstorage連携 で使いました
Slide 41
Slide 41 text
refの代わりに 呼ぶだけ
Slide 42
Slide 42 text
呼び出したら ただのState
Slide 43
Slide 43 text
で解決 SPA ブラウザで動作する プレイ判定API連携がある SNSシェアがある オートセーブ機能がある BGMを常時再⽣する ストーリー分岐がある ギミックがある(パスワードなど) SE(効果⾳)がなる
Slide 44
Slide 44 text
Room302 Room301 App
Slide 45
Slide 45 text
Room302 Room301 App Navigation いつものアプリのように UIを載せる
Slide 46
Slide 46 text
Room302 Room301 App Navigation 再描画されない 部分にaudioタグを追加 Audio
Slide 47
Slide 47 text
SPAは⾳声コンテンツとの 相性が良い グローバルなStateと Hooks(Composable)で再⽣/停⽌が可能 副作⽤(useEffect/watchEffect)を利⽤して メディアの操作が可能 「許可した⾳声エレメント」を保持可能 Room301 App Navigation Audio SPAは⾳声コンテンツとの 相性が良い
Slide 48
Slide 48 text
Room301 App Navigation プレイ開始API Audio プレイAPIと繋いで ゲーム完成 チケットを買ったらtoken付きURLを発⾏ 初期描画時にプレイ可能かを判定
Slide 49
Slide 49 text
⽬次 『HOTELブルーローズ99の部屋』とは 仕様と技術選定 使⽤ライブラリと実装 振り返りとこれからのWeb表現について 1 2 3 4
Slide 50
Slide 50 text
振り返り 無数に現れるバグ ゲームづくりってたいへん!
Slide 51
Slide 51 text
振り返り 無数に現れるバグ 無数に現れるバグ ゲームづくりってたいへん!
Slide 52
Slide 52 text
振り返り 無数に現れるバグ 無数に現れるバグ ゲームづくりってたいへん! E2Eテストが 書きにくい うおォン 俺はまるで⼈間バグ⽣成所だ
Slide 53
Slide 53 text
Web表現を考え直すきっかけをもらった
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
コスト 納期 品質
Slide 56
Slide 56 text
アクセシビリティ・より良い体験のために SPA(SSR含む)はもっと活⽤できるのではないか? PWAと合わせて 低コストに⾼クオリティ なプロダクトを!
Slide 57
Slide 57 text
TAMに興味が湧いた⽅はぜひお気軽にご連絡ください! メッセージ待ってまーす!!