C0de ハッカソン with Pixiv 参加記（せんとー視点）
名古屋工業大学のプログラミング団体C0de内で行われた、Pixiv協賛部内ハッカソンの参加記。 「身体でプログラミング」開発チームのせんとーです。この記事はせんとー視点ですので、 もしかしたら間違っている内容とかもあるかもしれません。
チーム
簡単なチーム紹介です。
- mzn：つよつよな先輩。今回の開発のチームリーダー。Brainf*ckのインタプリタなどの処理系を主に担当していただきました。 「身体でプログラミング」自体この方のアイデアです。
- きーご：つよつよな先輩②。UIを担当していただきました。 React関連の処理は全てこの方が書いているはずです。
- せんとー：私です。主に姿勢検出・判定の処理を担当しました。
参加前
前提として、ハッカソン参加前の私の知識レベルはこんなもんです。
git
- チーム開発の経験はほぼ無し
- pushやcommitをかろうじて触ったことがある
- コミットメッセージの書き方に30分悩む
JavaScript (Typescript)
- 入門記事を一周くらい読んだことがある
- 開発経験無し
- なんすか？DOMって
一方でチームメンバーの先輩二人は開発経験豊富なので、 足を引っ張らないよう最初は必死で勉強してました。 ハッカソンに参加した理由もチーム開発の経験を積みたいからなので、 先輩に囲まれて開発できるのは楽しかったです。 結局足は引っ張ったけど。 その分いっぱい学ばせてもらいました。
アプリの概要
「身体でプログラミング」という方針のもと、 WebアプリPhysi-Codeを作成しました。 基本的な仕様としては
- カメラからユーザの姿勢を読み取る
- 姿勢に対応する文字を画面に出力
- 出力された文字列をBrainf*ckのソースコードとして実行
といった感じです。
上に示したのが実際の文字入力画面です。 カメラ画面は9個に分割されており、各エリアに手や足を入れることで反応します。 特定の姿勢を取ることで、画面右に文字が出力され、プログラミングをすることが出来ます。
例えば'+'を出力したければ、足を開いて左下、右下のエリアに入れた状態で、画面右側に向かって正拳突きをすることで出力できます。 簡単ですね。
使用技術
簡単に使用技術をまとめておきます。
- Typescript
- Next.js
- React
- tensorflow.js
React関連の 姿勢検知にはtensorflow.jsを使用しました。 tensorflow.jsはGoogleが提供しているオープンソースの機械学習ライブラリです。
初動
ここから実際のアプリ開発の流れを追って書いていきます。
ハッカソン開始当初、決まっていた内容としては 「姿勢検知を使って身体でプログラミングをする」、 「特定の姿勢をbrainf*ckとかにマッピングすればいいんじゃない？」 くらいだったと思います。
文字入力の方法も最初は考え方が違って、「ジャンプ」や「スクワット」などの 動作を文字入力のトリガーとする予定でしたが、これは流石に難易度が高いという理由から 現在の"判定エリア"を使う入力方式を使うことが決まりました。
この辺から私も「あれ、もしかしてこのアプリ、めっちゃ面白いんじゃね･･･？」 と気付き始めます。そもそもエンジニアなんて机の前から動かない人に、 カメラの前で運動させる発想が面白いんですよね。本当にmzn先輩の アイデアは凄いです。別に媚売ってるわけじゃないですよ。
中盤
開発中盤の流れです。とは言っても私は 他の人がこの時何をしていたか殆ど知らないので、 基本的に自分のことだけ書こうと思います。 （多分mznさんはbrainf*ckの処理系、きーごさんはUI作成に取り掛かってた。）
私はとりあえずtensorflow.jsを触ってみることから始めました。 tensorflow.jsを使えば、カメラの映像を関数にぶち込むだけで姿勢検知をしてくれます。 私はこの時点でかなり感動してました。こんな便利なOSSが無料で使えるとは･･･。
そして判定エリアを作るところまで、割と早い段階で進められたと思います。 この時点ではまだ姿勢の判定は出来ず、あくまでエリア内に身体が入っているかを検知する機能の実装です。 姿勢検知の結果は、身体の各部位を座標で取得する事ができるので、ここまではめちゃめちゃ簡単でした。
勘の良い読者は既にお気付きかもしれませんが、上の写真の私が着てるのはパジャマです。
終盤
以降私は姿勢判定・文字入力の機能の作成をしました。 シンプルにJSの勉強が苦しかった。非同期処理のこととか、Promiseのこととか。 今までC++やJavaのようなオブジェクト指向プログラミングを主に進めていた私にとっては、 JSは思ったとおりに書くことが出来ず悩んだことが多かったです。 とはいえ年始は暇だったので、姿勢判定の機能は割と早く完成した気がします。
最終発表直前は、主にきーご先輩が死にかけていました。私が書いた判定機能や、mzn先輩が書いた 処理系のReactへの統合もおそらく全てきーごさんがやってくれているはずです。 ほとんど寝てないそうでとても心配でした。 一方私は起きていても手伝えることがあんまりなかったので、 最終日は結構ぐっすり寝ました。ごめんなさい。
結果
結果として、我々「身体でプログラミング」班はなんと最優秀賞を受賞することができました。 決め手となったのは"アイデア"と”発表"だったと思います。
アイデアを出したのはmznさんで、めちゃくちゃ面白い発表をしてくれたのはきーごさんなので、 私は見事に勝ち馬に乗ることが出来ました。やったね。
完走した感想
今回のハッカソンは先輩からすごい色々学ばせてもらいました。 gitやGitHubの使い方は特に、知っている人に聞かないと 自分では学ばないような機能が多いので、めちゃくちゃ勉強になりました。
その他だと、開発の流れがスムーズなので少し感動しました。 最初の会議でもmzn先輩が企画書をしっかりまとめてくれていて話し合いが無駄なく進みました。 チームリーダーってこーゆー能力が求められるんですね。
ほとんど知識がない状態からでも、それなりに開発に貢献する事ができて楽しかったです。 またこういう機会があればいいな。 ありがとうございました。
