来年以降の人たちの参考のために。

1. 未来創造展2015

2. 作ったもの

4. GASSEN
合戦をもとにした全方位スポーツ
多人数で体を動かそう
コンセプト

5. GASSEN
兜や武器などは、AR (拡張現実) に映し出す
IT要素

6. 企画を作る
わたしの
担当範囲
1 2

7. 企画を作る
未来の世界を
かんがえる
当日までにつくるものを
かんがえる

8. 企画を作る
未来の世界を
かんがえる

9. 未来の世界をかんがえる
未来の世界で、テーマにそったものが有ったら?
当日までにつくるものはかんがえない

12. 企画を作る
当日までにつくるものを
かんがえる

13. 当日までにつくるものをかんがえる
かんがえたコンセプトを、観客に説得する。
コンセプトはあくまで遠い導き。囚われすぎない。チー
ムメンバーを見渡して、作れるものをつくる。
「いちばんプログラミングができる者」、「いちばん工作
ができる者」、「いちばんメンバーを管理できる者」の3
人をみつける。

14. リーダーはプログラミングや工作をしている
暇はありません。

15. わたしの担当範囲
ゲームのアニメーション
ゲームのランキングのサーバー
ランキングの表示UI

16. ゲームのアニメーション
Androidアプリのカメラで読み取る、ARマーカーを表示する

17. ゲームのアニメーション
App
Scene
Bgm
BgmPlayer
Bg
ObjFactory
Obj
ObjLow ObjMiddle ObjHigh
DOM
Scene
animate()
animate()
createRandom()
new()
継承
animate()
play()

18. Gassen Animation Demo (CSS+JavaScript)
http://jsdo.it/ne_sachirou/7wwz
ゲームのアニメーション
シーンを中心とした普通のゲームプログラミン
グです。
JavaScriptで実装しました。アニメーションは
CSS3 AnimationとrequestAnimationFrame
(VSYNCのようなもの)。音はHTML Audio要
素。
jQueryを使う人はもういませんよね?

19. ゲームのランキングのサーバー
Androidアプリから送られてくる点数を管理する

20. ゲームのランキングのサーバー
ユーザー名
点数
ランキングRDB
Web, APIサーバー
更新データー
更新データー

21. ゲームのランキングのサーバー
https://bitbucket.org/ne_sachirou/mst-gassen-api
RabbitMQやQ4MやNATSやRedis Pub/Subのように
サーバーをたてません。分散キューには使えませんが、
一対一なら充分なメッセージキューです。HTTPサーバー
からWSサーバーにランキングの更新を伝えます。
PHP 5.6
Ratchetを使いWebSocketサーバーをPHPで作りました。
Reactという非同期IOライブラリが基礎になっています。
WAFにはフルスタックのLaravelを使いました。Web
Socketサーバーとはモデルを共有しています。Artisan
コマンドでWSサーバーを起こせるようにしました。

22. ランキングの表示UI
プレイしたランキングを表示する
リアルタイムに表示を更新する

23. ランキングの表示UI
Ranking update Animation demo
http://jsdo.it/ne_sachirou/ApPS
アニメーションは、こだわりの逸品。
CSSはBEMで構造化。JSからMedia Queryを
あつかい、スマートフォンの画面にも対応した。
音はSynth1 VSTで自作。
初回表示時には、現状のランキングをページに
埋め込んでページがダウンロードされるので、表
示が遅延しません。その後は2分に一回Ajaxでラ
ンキングを問い合わせ。またリアルタイムにWeb
Socketでランキングデータが知らされるので、そ
れを基に表示を更新します。
正しいJSを書きましょう。HTML Template要素
は助かります。React.jsのJSXは好きません。せ
めてE4Xがあれば…。
非同期APIはPromise functorで。
細部、細部、細部…

24. Appendix

25. Sean MacEntee "presentation outline" CC by 2.0 2011-05-05 https://www.flickr.com/photos/smemon/5690542503
vassilis galopoulos "thinking?" CC by-nc-nd 2.0 2005-03-19 https://www.flickr.com/photos/galopoulos/567890941
Matt Jacoby "Sound Baffle Tab Slots" CC by-nc 2.0 2006-08-30 https://www.flickr.com/photos/msjacoby/229587978
reynermedia "server room" CC by 2.0 2010-02-22 https://www.flickr.com/photos/89228431@N06/11285592553
My Online Estate Agent "Zoopla property search on a Samsung Galaxy " CC by 2.0 2014-12-15
https://www.flickr.com/photos/129146418@N05/15419766384
DevCom 'server_vista' from "DevCom Network" Freeware need links. http://findicons.com/icon/61657/server_vista?id=61684
Chris Messina "Most downloaded services in the last 7 days – Opera Unite Services" CC by-nc-sa 2.0 2009-06-17
https://www.flickr.com/photos/factoryjoe/3633281756
Barry Mieny "Database" CC by-nc-sa http://findicons.com/icon/64433/database_1?id=64461
luigi alesi "dream" CC by-nc 2.0 2008-06-25 https://www.flickr.com/photos/gigi62/3029974414
Ramona Forcella "Japan Dream Kenjin" CC by 2.0 2009-04-27 https://www.flickr.com/photos/ramona538/3476332639
Guillaume Speurt "Tallinn's weathercock" CC by-sa 2.0 2013-09-21 https://www.flickr.com/photos/guillaumespeurt/12247835313
Photos