ばんぶーのひとりごと

ばんぶーが、好きなことをおしゃべりします。

技育CAMP ハッカソン vol.9 参加記

2022年12月10, 11日に技育CAMPというサポーターズさん主催の勉強会の一貫として行われているハッカソンに、参加してきました！

ということで、今回もハッカソンの参加記を書いていきます。

作品の概要

今回は、Chrome拡張を作りました。

作品のデモや発表スライドはこちらから見てください。

Webサイト上で押せるボタンが虹色に光るChrome拡張です。

光らせる色を虹色以外に選ぶこともできます。また、光らせるタグを指定することもできます。

ソースコードはこちらから。

今後は、光らせる色をユーザがRGBで指定したり、Chrome拡張のストアに申請したりするつもりです。

キックオフ〜本番まで

今回も、JPHACKSに参加した時と同じメンバー(2人きりですが)で参加しました。

別のハッカソンのアイディア出しで、「Webサイトで押せるボタンが分かりにくくて困ることない？」みたいな問題があがっていました。

そこで、今回はボタンを光らせようというアイディアになりました。

せっかく光らせるし、しかも技育展で無駄開発という部門を用意するようなサポーターズさんの主催なので、ふざけても許されそうみたいな気持ちがあり、ゲーミングっぽい感じで光らせることにしました。

なんか、エンジニアってゲーミングカラー好きじゃないですか(偏見)。

Chrome拡張を作るのは初めてだったのですが、Hello Worldは間単にできました！

なんせ、Chrome拡張のハロワの記事はいっぱい転がってるので。

ということで、ハッカソン当日までにやったこととしては、以下の通りです。

いつもはcanvaでアイコンを作成することが多いのですが、今回はグラデーションを使いたかったので、Figmaを使いました。

Figmaでグラデーションを作るには、uiGradientsというプラグインが便利でした。

めっちゃ最小限のMVP（Chrome拡張をONにすると、各種ボタンが虹色に光る)はこの時点で完成していたので、ユーザが光らせる色やタグを自由に選べるようにしようと考えました。

XDでプロトタイプを作ってみたところ、「結構UIにこだわりたいね〜」という話になり、「複雑なUIをCSSで書きたくない！！！」という意見になりました。

プロトタイプ

相方さんがFlutterオタクなので「FlutterでChrome拡張を作る！」と言い出し、相方さんがFlutterでChrome拡張のHello Worldまで作ってくれました。

(Flutterで作ったChrome拡張のテストですが、UIだけならHot Reloadで見れるのですが、Chrome拡張の機能自体は、毎回ビルドしてChromeで読み込まないと確認できません。面倒です・・・。ここも自動化したいんですが、ハッカソン期間中はその余裕がありませんでした。いつか自動化したい)

あと、相方さんにHTMLタグの名前とか色の名前の定義を、Enumでするように言われました。

私は基本的にPythonの経験しかないので、Enum知らなかったんですが、どうやら型を定義できるもののようです(Pythonでも普通にEnum使いますか？💦)

いまいち使い方がわからなくて、私が書いたJSプログラムでは、結局const型のリストで用意しました。

Enumをお勉強しないとです。

本番1日目(朝〜夜)

1日目は相方さんがバイトで終日いないらしいので、1人で頑張ってました🔥

前日までにJavaScriptでバックエンドは完成させていたので、この日はどのようにFlutterで受け取ったフロントエンドのボタンの値をJSに渡すかだけを考えていました。

結果的に、上記の方針だとうまくいかなさそうだったので、JSのプログラムを関数にして、その関数をDartで呼び出すことにしました。

DartでJSを呼び出すライブラリは色々ありました(例えば、jsとか)。

この日は1人で行き詰まってつらすぎたので、今回のハッカソン用のSlackで学生メンターの方々に質問しまくってました。

同じ学生とは思えないくらい、お二人ともレスが早くて、いろんな角度からアドバイスをいただけて、助かりました。

本番1日目夜〜本番2日目早朝

相方さんが、バイトから帰ってきました(やったー🙌🏻)

ということで、その時までの進捗とうまくいかない部分を共有しました。

本当はさっさとJSとDartを繋ぎ込んで、相方さん担当予定だったFlutterでのフロントエンドの実装を奪いたかったんですが、JSとDartの繋ぎ込みができなさすぎて、人の仕事奪う余裕なんてありませんでした😢

JSとDartの繋ぎ込みには成功したんですが、値の変更のタイミングとかが難しくて、相方さんに相談しまくってました。

相方さんに、「フロントから受け取った値をchrome.storage APIに保存したら？」と言われて、そんな感じで実装しました。

今回も、私が好き勝手開発して、わからないところを全部相方さんに任せてたので、申し訳ないです🙇‍♀️

バックエンドが一通り完成した後は、フロントエンドのお手伝いに励みます。

朝の6時ごろ？まで開発して、寝ました。

こんなことを言ってますが、結局自力で起きてます(えらい！)。

本番2日目起床後

11時に朝会があったので、11時前に起きました。

私は相方さんよりFlutterできないので、フロントエンドでできることがなくなってきたら、発表資料作成やREADME作成に尽力することにしました。

どちらも一通り終わったので、XDで作ったプロトタイプと違うところをチマチマ直してました。

FutterのUI作るだけなら、ちょっと慣れてきたぞ〜みたいな気持ちになってました(思ってるだけ)。

確か、この辺りで相方さんが起きてきた気がします。

フロントエンドでいじったところを伝えたり、READMEと発表資料の確認をお願いしたりしました。

その後、自分じゃできなかった相方さんに作ってほしい部分をお願いして、私は発表練習をしていました。

マージ作業はコードフリーズギリギリになりました💦

コンフリクト辛い😢

発表

いよいよ発表です！

参加者全体が２グループに分かれて、2分の発表を行いました。

各グループから数チームずつが選抜され、決勝的な場で全員の前でもう1度プレゼンをします。

毎回サポーターズのイベントで発表すると、「元気なプレゼン」と言われている気がします笑

発表後は、他の参加者の学生からコメントをいただけて嬉しかったです。

いただいたコメントの一部

いつもは手元のiPadで投影している発表資料の次のページを見ているのですが、今回は2分しかないし発表資料覚えてるからいらないだろ〜とか高を括っていたら、普通にスライドを1枚飛ばしました・・・。

横着はダメですね🥺

スライドを1枚飛ばしたにも関わらず、決勝(?)に出られることになりました！

この時点で努力賞は確定らしいです、やったー！

決勝では、スライドを飛ばさずに話せていた気がします(正直あんまり覚えてないけど)。

結果は、優秀賞や最優秀賞は取れませんでした😭

でも、決勝に出てた他のチームすごい〜〜〜！！！って楽しかったのでヨシ！

TwitterのFFの方のチームもいくつか決勝にいて、ワクワクしてました。

発表後の交流会は、妹の一人暮らし先に遊びに行っていた両親が帰ってきたため参加できなかったです、参加したかった😢

でも、優勝チームのうちの2人とは、今度お話ししよ〜〜ってリプできたので、楽しみ！

今後…

  • 今後は、光らせる色をユーザが自由に選べるようにしたい
  • 余裕があれば、ストアに申請もしたい
  • JPHACKSで作ったしらべるんもメンテナンス中なので、早くなんとかしたい

やることがいっぱいありますね。卒研をさっさとやっつけて、開発がしたいです。

技術的に学んだことまとめ

最後に、今回技術的にまなんだことをまとめておきます。

  • 〇〇から△△に変数の値を渡したいけど難しい→△△で引数を取る関数を定義して、〇〇で呼び出す
  • Chrome拡張でデータを保存しておきたい場合は、chrome.storage APIを使用
  • Enumっていうオリジナルの型を作れるものがある
  • フロントエンドを作る時に、よく使う色のカラーコードは変数として保存しておく Flutterだと、Primery Colorとかに登録してもいいのかも？