会社メンバーとhackday2017に参加した話し。 Image Recognition (failure) Specialist at Studio Arcana

1. 勝見 幸弘
Image Recognition (failure) Specialist at Studio Arcana
に会社のメンバーと参加して来ました

2. HackDay

3. HackDayとは
• Yahoo!JAPAN主催の日本最大級ハッカソンイベント
• 開発テーマはフリー、24時間ぶっ通しで開発！
24時間（開発時間）＋ 作品発表時間や表彰式なども
あるので、ほぼ丸二日間のイベント
• 今年はハッカソン以外にも謎解きやライトニングけ
ん玉なる体験コンテンツもあったみたいですよ。

4. HackDayとは
• Yahoo!JAPAN主催の日本最大級ハッカソンイベント
• 開発テーマはフリー、24時間ぶっ通しで開発！
24時間（開発時間）＋ 作品発表時間や表彰式なども
あるので、ほぼ丸二日間のイベント
• 今年はハッカソン以外にも謎解きやライトニングけ
ん玉なる体験コンテンツもあったみたいですよ。

5. HackDayとは
• Yahoo!JAPAN主催の日本最大級ハッカソンイベント
• 開発テーマはフリー、24時間ぶっ通しで開発！
24時間（開発時間）＋ 作品発表時間や表彰式なども
あるので、ほぼ丸二日間のイベント
• 今年はハッカソン以外にも謎解きやライトニングけ
ん玉なる体験コンテンツもあったみたいですよ。
超大変なイベント

6. 参加の経緯

7. 参加の経緯
一昨年から参加していて今年も出るよね？
みたいな空気があったから

8. 参加の経緯
一昨年から参加していて今年も出るよね？
みたいな空気があったから
半強制イベント

9. メンバーと役割

10. メンバーと役割
• 代表・工作・プレゼン担当：ふかさわ
• 発案・設計・実装担当：よしだ
• 実装担当：かつみ
• 実装担当：えんどう

11. メンバーと役割
• 代表・工作・プレゼン担当：ふかさわ
• 発案・設計・実装担当：よしだ
• 実装担当：かつみ
• 実装担当：えんどう 奴隷
王

12. 作品について

13. レゴの迷路をVRで体験

14. 作品の経緯

15. 作品の経緯
• 北海道ではとうもろこし畑で迷路をやる

16. 作品の経緯
• 北海道ではとうもろこし畑で迷路をやる
北海道すげー！

17. 作品の経緯
• 北海道ではとうもろこし畑で迷路をやる
みたいな適当なノリで決定！

18. 嘘でした

19. 作品の経緯（本当は）
• よしださんのお子さんが迷路大好き
• いつからかお子さんがレゴで迷路を作り始めた
• ゴール直前お子さんがレゴへダイレクトアタック！

20. 作品の経緯（本当は）
• よしださんのお子さんが迷路大好き
• いつからかお子さんがレゴで迷路を作り始めた
• ゴール直前お子さんがレゴへダイレクトアタック！
VRと合わせたら面白いんじゃない？！

21. 作品の経緯（本当は）
• よしださんのお子さんが迷路大好き
• いつからかお子さんがレゴで迷路を作り始めた
• ゴール直前お子さんがレゴへダイレクトアタック！
割とちゃんとした理由！
VRと合わせたら面白いんじゃない？！

22. イベント前日

23. イベント前日
• 代表・工作・プレゼン担当：ふかさわ
• 発案・設計・実装担当：よしだ
• 実装担当：かつみ
• 実装担当：えんどう 奴隷
王

24. • 代表・工作・プレゼン担当：ふかさわ
• 発案・設計・実装担当：よしだ
• 実装担当：かつみ
• 実装担当：えんどう 風邪
健康
イベント前日

25. • 代表・工作・プレゼン担当：ふかさわ
• 発案・設計・実装担当：よしだ
• 実装担当：かつみ
• 実装担当：えんどう 風邪
健康
貧富の差
イベント前日

26. • 代表・工作・プレゼン担当：ふかさわ
• 発案・設計・実装担当：よしだ
• 実装担当：かつみ
• 実装担当：えんどう 風邪
健康
幸先の悪いスタート
イベント前日

27. イベント当日
• 代表・工作・プレゼン担当：ふかさわ
• 発案・設計・実装担当：よしだ
• 実装担当：かつみ
• 実装担当：えんどう
時間通り昼に到着

28. イベント当日
• 代表・工作・プレゼン担当：ふかさわ
• 発案・設計・実装担当：よしだ
• 実装担当：かつみ
• 実装担当：えんどう
夕方到着
時間通り昼に到着

29. イベント当日
• 代表・工作・プレゼン担当：ふかさわ
• 発案・設計・実装担当：よしだ
• 実装担当：かつみ
• 実装担当：えんどう
夕方到着
ハイパー重役出勤！
時間通り昼に到着

30. イベント当日
• 代表・工作・プレゼン担当：ふかさわ
• 発案・設計・実装担当：よしだ
• 実装担当：かつみ
• 実装担当：えんどう
病院寄ってから参加！
夕方到着
時間通り昼に到着

31. イベント当日
• 代表・工作・プレゼン担当：ふかさわ
• 発案・設計・実装担当：よしだ
• 実装担当：かつみ
• 実装担当：えんどう
よくがんばったね！
夕方到着
時間通り昼に到着

32. 開発スタート

33. 作業分担
よしだ
1-1. 通信データ構造の設計
1-2. サーバーサイドの実装
1-3. コントローラーの実装
かつみ
2-1. レゴブロックの画像解析実装
えんどー
3-1. VRプログラムの実装
ひかる
4-1. レゴ撮影用の環境作り
4-2. プレゼン資料の作成

34. システム全体図

35. レゴブロック
レゴ作って

36. レゴブロック
サーバに送信

37. コントローラ
押したボタンを判別

38. コントローラ
ボタンに応じたイベントを送信

39. サーバサイド
迷路とかボタン
イベントを受け取る

40. サーバサイド
迷路とかボタン
イベントをVRに送信

41. WebVR
迷路を更新、ユーザの位置情報更新
、VRをレンダリング

42. WebVR
ユーザの位置情報を送信

43. 仕様言語等
• 大体
-javascript
• サーバーサイド
socket.io + express
• 通信
-websocket (コントローラはbluetooth)
• WebVR
-A-Frame

44. 開発中

45. 順調に開発が進む
• よしだ
1-1. 通信データ構造の設計
1-2. サーバーサイドの実装
1-3. コントローラーの実装
• えんどー
3-1. VRプログラムの実装

46. 順調に開発が進む
• えんどー
3-1. VRプログラムの実装
余裕があったから

47. 順調に開発が進む
• えんどー
3-1. VRプログラムの実装
予定になかったものを
ついでに組み込む

48. 順調に開発が進む
• えんどー
3-1. VRプログラムの実装
さすが重役出勤！

49. 順調に進む中

50. 作業分担
よしだ
1-1. 通信データ構造の設計
1-2. サーバーサイドの実装
1-3. コントローラーの実装
かつみ
2-1. レゴブロックの画像解析実装
えんどー
3-1. VRプログラムの実装
ひかる
4-1. レゴ撮影用の環境作り
4-2. プレゼン資料の作成

51. あきらかに進んでいなかった
かつみ
2-1. レゴブロックの画像解析実装

52. やばいやばい

53. 急遽仕様変更

54. 変わるシステム全体図
あ
い
ぱ
っ
ど
／ ＼
／ ＼
（ﾟ）（ﾟ）ミ
丿 ミ
つ （
） （

55. 増える負担
よしだ
1-1. 通信データ構造の設計
1-2. サーバーサイドの実装
1-3. コントローラーの実装
1-4. 迷路デバッガの実装
かつみ
2-1. レゴブロックの画像解析実装
えんどー
3-1. VRプログラムの実装
ひかる
4-1. レゴ撮影用の環境作り
4-2. プレゼン資料の作成
ねじ込まれる

56. みんな仮眠する中一人で開発
よしだ
1-1. 通信データ構造の設計
1-2. サーバーサイドの実装
1-3. コントローラーの実装
1-4. 迷路デバッガの実装
かつみ
2-1. レゴブロックの画像解析実装
えんどー
3-1. VRプログラムの実装
ひかる
4-1. レゴ撮影用の環境作り
4-2. プレゼン資料の作成

57. が

58. 結局終わらず！
よしだ
1-1. 通信データ構造の設計
1-2. サーバーサイドの実装
1-3. コントローラーの実装
1-4. 迷路デバッガの実装
かつみ
2-1. レゴブロックの画像解析実装
えんどー
3-1. VRプログラムの実装
ひかる
4-1. レゴ撮影用の環境作り
4-2. プレゼン資料の作成

59. 他は順調に開発完了
よしだ
1-1. 通信データ構造の設計
1-2. サーバーサイドの実装
1-3. コントローラーの実装
1-4. 迷路デバッガの実装
かつみ
2-1. レゴブロックの画像解析実装
えんどー
3-1. VRプログラムの実装
ひかる
4-1. レゴ撮影用の環境作り
4-2. プレゼン資料の作成

60. よしだ
1-1. 通信データ構造の設計
1-2. サーバーサイドの実装
1-3. コントローラーの実装
1-4. 迷路デバッガの実装
かつみ
2-1. レゴブロックの画像解析実装
えんどー
3-1. VRプログラムの実装
ひかる
4-1. レゴ撮影用の環境作り
4-2. プレゼン資料の作成
さすが！
他は順調に開発完了

61. で

62. プレゼン

63. よしだ
1-1. 通信データ構造の設計
1-2. サーバーサイドの実装
1-3. コントローラーの実装
1-4. 迷路デバッガの実装
かつみ
2-1. レゴブロックの画像解析実装
えんどー
3-1. VRプログラムの実装
ひかる
4-1. レゴ撮影用の環境作り
4-2. プレゼン資料の作成
見せ場！！
プレゼン

64. プレゼン

65. プレゼン

66. プレゼン

67. プレゼン
王様は伊達じゃない！

68. 作品展示

69. 作品展示

70. 作品展示

71. 結果発表

73. まよい最優秀賞

74. えっ？

75. まじ？！

76. うわ〜
呼ばれてる！

77. 最優秀賞

78. 最優秀賞

79. 最優秀賞

80. 最優秀賞

81. 最優秀賞

82. 最優秀賞
パネル強奪

83. 優秀賞の商品！！

84. 優秀賞の商品！！
シリコンバレーツアー！

85. 優秀賞の商品！！
行ってきます！

86. 感想

87. 感想
• 疲れた

88. おわり

89. 個人的感想
• 意識低い系の俺でも、ものが完成したときは結構テ
ンション上がる

90. 個人的感想
• 意識低い系の俺でも、ものが完成したときは結構テ
ンション上がる
• 表彰式の後にインタビューされたけど、あれどこで
使われたんだろう？

91. 個人的感想
• 意識低い系の俺でも、ものが完成したときは結構テ
ンション上がる
• 表彰式の後にインタビューされたけど、あれどこで
使われたんだろう？
• 後日「レゴ完成させるんだよね？」みたいなプレッ
シャーを受け続け、完成させるまで残業することに
なった

92. この資料は
• http://www.s-arcana.co.jp/blog/2017/02/17/3452
@ふかさわ
• http://www.s-arcana.co.jp/blog/2017/02/23/3472
@よしだ
をまとめたものです。みんなの感想とかこっちにちゃ
んと書いてあるよ！

93. 本当におわり