卒業制作の企画と作品

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

Transcript

1. 未来創造展2015
   

   View Slide

2. 作ったもの
   

   View Slide

3. View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

10. View Slide

11. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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サーバーを起こせるようにしました。
    

    View Slide

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

    View Slide

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で。
    細部、細部、細部…
    

    View Slide

24. Appendix
    

    View Slide

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
    

    View Slide