【開発秘話】Xで流行った「罫線数字」をGeminiとCanvasで爆速ツール化してみた

年末年始あたりに、X（旧Twitter）のタイムラインで流行っていたアレ、見かけませんでしたか？

そう、「太い罫線（┏ ━ ┛）を組み合わせた数字」です。

あれ、デジタル時計みたいでカッコいいですよね。

こういうやつです↓

┏━━┓┏━━┓┏━━┓┏━━┓
┗━┓┃┃┏┓┃┗━┓┃┃┏━┛
┏━┛┃┃┃┃┃┏━┛┃┃┗━┓
┃┏━┛┃┃┃┃┃┏━┛┃┏┓┃
┃┗━┓┃┗┛┃┃┗━┓┃┗┛┃
┗━━┛┗━━┛┗━━┛┗━━┛

「自分もやってみたい！」と思ってスマホでポチポチ入力しようとしたんですが…

これが想像以上に地味に面倒くさい作業でした。

「┏」を出して…
「━」を出して…
改行してズレて…

「あーーーもう！」ってなりませんか？
私はなりました（笑）

「こんな単純作業、ツール化したら一瞬なのに…」

そう思ったのが、今回の「罫線数字メーカー」を作ったきっかけです。

とはいえ、ゼロからコードを書くのも大変です。
そこで今回は、GoogleのAI「Gemini」に開発を手伝ってもらうことにしました。

やったことはシンプル。Geminiにこんな風に「仕様」を渡しただけです。

「入力された数字（0-9）を、太い罫線文字（Unicode）の組み合わせに変換するJavaScriptを作って。0のパターンはこれ、1のパターンはこれ…」

すると、一瞬でベースとなるコードが生成されました。

今回特に感動したのが、Geminiの「Canvas」という機能です。

これを使うと、生成されたコードのプレビュー画面を横に表示しながら、チャットで指示出しができるんです。

「ここの余白をもっと詰めて」
「フォントを大きくして」

こう指示するだけで、リアルタイムに見た目が変わっていきます。

このサイクルが爆速で回せるので、あっという間にツールが完成しました。
人間がやったのは「アイデア出し」と「微調整の指示」だけ。本当に便利な時代になりましたね。

そんな経緯で爆誕したのが、こちらのツールです。

手動でポチポチしていたあの時間は何だったのか…と思うほど一瞬で変換できます。
Xへの投稿ボタンもつけたので、記念日やカウントダウンなどでぜひ使ってみてください！