富士ヒル（Mt.富士ヒルクライム）の決意表明ジェネレーター作った
日本でロードバイクに乗っている人なら、一度は耳にしたことがあるであろうイベント、「富士ヒル」！私も2024年に参加して、無事完走しましたよー！今日はそんな富士ヒル参加者が使える決意表明のためのツールを作ったお話です。
こんなの作ったよ！
富士ヒルって？
「富士ヒル」とは、Mt.富士ヒルクライムのこと。毎年たくさんのサイクリストが富士山五合目を目指して、全長約24km、標高差約1,255mのコースを駆け上がる、日本最大級のヒルクライムレースです。
このレースの面白いところは、完走タイムによってもらえる「フィニッシャーリング」の色が変わること！ ブロンズ、シルバー、ゴールド、そしてプラチナと、まるでオリンピックのメダルのように、目標タイムをクリアするとその色のリングがもらえるんです。ガチ勢の方々は、このリングの色を目標に日々トレーニングに励んでいます。
それから、スタートするときの「ウェーブ」もポイント。申告タイム順にいくつかのグループに分かれてスタートするんですが、同じウェーブの人たちとは、レース中に自然と「トレイン」（集団走行）を組んで、お互いに風よけになったり、励まし合ったりしながら一緒に目標タイムを目指すことができるんです。
SNSで共有しやすい画像を作りたい！
さて、この富士ヒル。スタートウェーブと狙っているリング（目標タイム）が同じなら、一緒に走った方が絶対に効率がいい！
でも、「一緒に走ってくれる仲間がいない…」って方もいるはず。 そんなとき、SNSで「〇〇ウェーブスタートで、△△リング目指してます！一緒に走りませんか？」って募集しているのをよく見かけます。
これを見て、「テキストだけの募集もいいけど、パッと見て分かりやすい画像があったら、もっと仲間が見つかりやすくなるんじゃないかな？」って思い、 「それなら作ってみよう！」というノリで、今回の画像生成ツール開発がスタートしました！
使い方
使い方はとっても簡単！
- 「スタート」のウェーブを選択
- 「目標」を選択
- 「画像を作る」ボタンをクリック
これだけで、決意表明画像がドーンと表示されます。 あとは、生成された画像を長押し（スマホの場合）するか右クリック（PCの場合）して保存して、SNSでシェアしちゃいましょう！
さらに「Xに投稿する」ボタンもつけました。クリックすると、選択したスタートウェーブと目標が反映されたテキストが自動で入力された状態で、X（旧Twitter）の投稿画面が開きます。あとは、先ほど保存した画像を添付して投稿するだけ！ぜひ活用してくださいね。
作り方
ChatGPT PlusとGemini Proの比較検討も兼ねて、AIを使ったコーディングの差を見比べながらHTML/CSS/JSで作成しました。
Canvas API
今回の画像生成の心臓部とも言えるのが、「Canvas API」です。 これは、Webページ上に図形を描画したり、画像を操作したりできるJavaScriptの機能。 背景画像の上に、ユーザーが選んだテキスト（スタートウェーブや目標）を描画して、オリジナルの決意表明画像を生成しています。 テキストの位置やサイズ、色などを細かく調整できるので、思い通りのデザインに仕上げることができました。
Google Fonts
今回は、決意表明という熱い気持ちを優しく包み込むような、柔らかい印象にしたかったので、「Zen Maru Gothic」というGoogle Fontsのフォントを選びました。
ただ、フォントをCanvasで描画した画像に反映させるのがなかなかうまくいかず…。 いろいろ試行錯誤した結果、フォントの読み込みタイミングを待つ処理を入れつついじくりまわし、無事に「Zen Maru Gothic」のかわいい文字で画像が作れるようになりました！GitHubにコードを公開しているので、試行錯誤の片鱗が見えるかもしれませんね…！
GitHub Pages で公開
あとは「GitHub Pages」で公開するだけ。 GitHubで専用のリポジトリを作ってプッシュするだけで公開完了。サクッと作ったツールやLPなんかはGitHub Pagesを使うことも多々あります。とっても便利！
ちょっとしたこだわり
このツールを作る上で、いくつか「ちょっとしたこだわり」を込めてみました。
富士ヒルって、目標タイムをクリアするために、大会が近づくにつれてみんな結構ピリピリしがちなんですよね。それはそれで熱くてカッコいいんですが、もっと気軽に、いろんな人が楽しめる雰囲気も大切にしたいなと。
なので、背景画像の色味やフォントを全体的に柔らかい感じにまとめました。 それから、セレクトボックスの「目標」を選ぶとき、一番最初に「完走」が表示されるようにしました。 ブロンズやシルバーといった目標タイムに向かってトレーニングを重ねて頑張るのも、もちろん素晴らしいこと。でも、タイムは気にせず、自分のペースでゆっくりでもいいから「完走」を目指して頑張る人だって、たくさんいるはずなんです。私自身、2024年に初めて富士ヒルに参加したときは、タイムは全然でしたが、無事に完走できたときの達成感は本当に最高でした！
余談ですが、2024年に初参加したときは無謀にもブロンズリング（90分以内にゴール）を目指してスタートしたんですが、そろそろ一合目かしら？とサイコンを見たところ「800m」と表示されていて心が折れ、タイムではなく完走を目指したのでした。
画像のサイズも、Instagramのストーリー（縦長）でシェアしやすいサイズにしつつ、X（旧Twitter）で投稿したときにも画像が見切れてしまわないように、プレビューで確認しながら、ちょうどいい大きさに調整しました。
富士ヒルに参加する人、楽しんでくださいね！
ここまで作って、ブログまで書いておいて何なんですが、実は私、今年の富士ヒルには不参加なんですよねw でも、私の周りには富士ヒルに参加する友達がたくさんいて、みんな本当に楽しそうに準備しているのを見ているうちに、「何か応援できることはないかな？」って考えていたら、気づいたらこんなツールが爆誕していました。
昨年、私が参加したときの思い出といえば…ゴールするまでの道のりよりも、実はゴールした後の「下山」の方が大変だった印象が強いです。標高が高いので気温も低く、あっという間に体が冷えてしまって。気づいたら低体温症で動けなくなり、救護の方に助けていただくという経験をしました（その節は本当にありがとうございました…！）。
なんとか富士ヒル完走ー！腰も腿も足先も死にかけたし、ハンガーノックなるし、下山は寒すぎて低体温症になるし大変だったわ🥹でも無事完走できてよかった！ pic.twitter.com/bZbVg2e9Lu
— Mana (@chibimana) June 2, 2024
なので、これから富士ヒルに参加されるみなさんには、ゴールまでの安全はもちろんのこと、ゴールした後も怪我なく、事故なく、そして低体温症にもならないよう、万全の準備で挑んでほしいと心から願っています！
このツールが、みなさんの富士ヒルへのモチベーションアップや、仲間探しの一助になれば嬉しいです。 頑張ってください！そして、めいっぱい楽しんできてくださいね！