アイマスハッカソン2024参加してきた

2024年10月14日

会場写真

こんにちは、.ごっちです。

去る 2024/10/12にアイマスハッカソン2024が開催され、そこにスタッフ兼参加者として参加しましたので、その参加記録です。

成果

https://hatsuboshi-logo.pages.dev/

成果・rust webpack 初星学園ロゴ

学園アイドルマスターに登場する初星学園のロゴの再現になります。

学園アイドルマスターのWebのスクリーンショット

学園アイドルマスターのブランドロゴやサービスロゴと比べ直線パーツが多いので手を出しやすいと感じたのと、ここ最近がっつりプロデュースしているということもあって これにしたという次第です。

再現度としては、中らずと雖も遠からずといった具合です。下に本物と重ねたときの画像を載せておきます。

本物との差分
  • 黒色が今回つくったもの
  • 灰色が重なったもの（本物に不透明度50％重ねたもの）
  • 白色が本物

見よう見まねで作ったわりには再現度高くできたと思ってます。しっかり再現させるためにはSVGを読み解く必要があります。

仕組み

使用した技術は以下の通りです。

  • Rust + wasm
  • Cloudflare Pages

ちょうど去年に WebAssembly の勉強を始め どこかで使いたいという気持ちがあったので、今しかない！というくらいの温度感で選定しました。

実際のコードをGitHubで公開しているので見れば察することができるのですが、canvasタグ内に愚直に線を描いているだけの内容になっています。

仕込み

裏話的に書くと、ハッカソン中だけで実装したわけではなく事前のもくもく会で事前準備をしていました。

当日にすべてをやろうとすると環境構築に失敗したり披露する用の環境が用意できなかったりとそれなりのリスクがあるので、ここで最低限の成果を見せられるようにしたいという考えです。真のハッカソンではそのようなことをしてはいけないと思うので、微妙なところではあります。

感想・今後

オフラインでのアイマスハッカソンが久々の開催、そして久々の参加ということもあり非常に楽しく過ごせました！この辺りは絶やさずもくもく会を続けてきたおかげもあるかと思います。継続は大事！

この再現物の再現度を上げるために座標を調整したり右上の HATSUBOSHI GAKUEN も描いたりSVGを解析したりしようと考えてます。また、親愛度10のコミュの後に流れる特別な演出であるアニメーションの再現もしたいと思ってます。これは次回のハッカソンネタまで先延ばしになりそうな予感がします。

キャンパスモード

一定の進捗が出次第またブログに残そうと思います。ありがとう、アイマス。ありがとう。

ProfilePicture

Yuta Goto

フリーランスのソフトウェアエンジニアです。現在はReact.jsを使用したWebフロントエンドの開発やRuby on Railsを使用したサーバサイドの開発を行っています。

Share for Bluesky