概要 私たちは今回、福岡で開催された 技育CAMPキャラバン ハッカソン に参加してきました！ ハッカソンとは短期間で集中して開発を行うイベントで、今回はオフラインで開催され、はるばる博多まで行きました（とても大変だった…） 制作したアプリは当日非常によい反応を頂いて最優秀賞をいただくことができました！！ まさか初めてのハッカソンで、B1だけで、最優秀賞を取れるなんて…とてもいい経験になりました。 そんなハッカソンでの制作物について説明したいと思います 紙を破る風神 制作物について 今回制作したものは かみあぷり というものです。 このアプリでは 紙を破く という動作を認知し、スライドを移動する・プレゼンを開始/終了する、そしてソースコードを全て消す といった操作ができます。 以下の画像は実際のアプリの画面です。 紙を破いたと判断されると 付箋 に書かれている内容が実行され、ログが追加されます。また右側の2本の棒で認識状況がわかるようになっています。 実行内容は 付箋 をクリックすることで変更できます。 技術スタックについて フロントエンドは HTML/CSS と Vanilla JSを、音の認識には TensorFlow.js を使用しています。 Vanilla JS は高速で軽量な素晴らしいクロスプラットフォームのフレームワークです 本当は React.js を使用する予定でしたが、TensorFlow.js との兼ね合いがうまくいかず、諦めました。 他にもアニメーションをつけるために jQuery を使っているらしいです。(私は知らない) GUIフレームワークとして Tauri を使用しています。 とりあえず新しいものを使っとけの精神で選びました。 他にも AppleScript や Python を活用しています。 紙を丸める雷神 努力ポイント 続いて製作中に苦労したポイントなどです Tnsorflow.js ライブラリの読み込み TensorFlow.js は npm からインストールすることができます。 インポートして開発環境でテスト…無事できた！！ しかしビルドするとERROR… とても頑張りました、しかし私には分かりません。 どうしようか… そこで思いついた解決方法はデモ用の speech-commands.min.js をダウンロードする！ tf.min.js もダウンロードする！ついでに jquery-3.