卒業制作の企画と作品

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

Transcript

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