真夏の自由研究〜AIを使って雑にアプリを作ろう！〜

はじめまして、24卒として新卒で入社したエンジニアのkochanです。これからから2週間にわたって真夏のアドベントカレンダー企画をスタートします！テーマはAIを使って雑にアプリを作ることです。それぞれの記事でどんなアプリを作ったのか、どういう風にAIを活用したのかを紹介します。

業務をAIに任せようと思うと様々な障壁がありますが、簡単なアプリを作るぐらいならシュッと出来るのがAIを利用する楽しい部分だと思います。 AIを活用して作りたいものをシュッと作る楽しさを届けられると良いなと思います。

日付	メンバー	タイトル
8/18	kochan	ハイフンっぽい文字の識別眼を鍛えるアプリ
8/19	min	インフラエンジニアだけどClaude Codeでポートフォリオサイトを簡単に作れた - freee Developers Hub
8/20	rol	画像にモザイクをかけるだけの雑アプリ - freee Developers Hub
8/21	yone	童謡の歌詞で神経衰弱ゲームを作ってみた - freee Developers Hub
8/22	bucyou	日誌などに利用できる体調の表現などを行う Chrome Extension + LLM成果物を公開するときのライセンスはどうするか - freee Developers Hub
8/25	massu	AI全任せで作る！某スイカゲームのパロディ制作秘話 - freee Developers Hub
8/26	yag13s	AIエージェントに丸投げして雑ランキングAPIを構築 - freee Developers Hub
8/27	jaxx	ターミナルエミュレータを自作してみた - freee Developers Hub
8/28	shiro	Mac のキーボードを楽にカスタムするアプリを作りたかった - freee Developers Hub
8/29	him0	真夏の自由研究 - Agentic Coding まずは体験してみることが大事 - freee Developers Hub

はじめに

真夏の自由研究〜AIを使って雑にアプリを作ろう！〜 1日目はkochanが担当します。

私はAIを利用してASCIIハイフンマイナスっぽい文字を見分ける識別眼を鍛える雑アプリを作成しました。

作成したアプリはGitHub Pagesで公開しています。

ハイフン探しゲーム

動機

普段の業務でお問い合わせの対応をしている中で、ASCIIハイフンマイナス「-」(U+002D)に似たASCIIハイフンマイナスじゃない文字が原因で意図した挙動になっていないことがしばしばあります。例えば、半角カタカナの長音記号「ｰ」(U+FF70)はASCIIハイフンマイナスとよく似ていますが意味が全く異なる文字のため、NFKC正規化をしてもASCIIハイフンマイナスとは一致しません。これによって、検索できないなどのお問い合わせに繋がることもあります。

こういったお問い合わせの調査の際には、エンジニアでも文字の違いに気づけず、原因の究明に時間がかかることがあります。

もしASCIIハイフンマイナスっぽい文字を一瞬で見分けることができれば、ASCIIハイフンマイナスっぽい文字が原因のお問い合わせに対して、迅速に異なる文字を利用している旨の回答ができます。

そこで、識別眼を鍛えるためにASCIIハイフンマイナスっぽい文字の中からASCIIハイフンマイナスを探すゲームを作成することにしました。

作成したアプリの概要

最初にゲームを開始するためのボタンが表示されます。

ハイフン探しゲームというタイトルとゲーム開始のボタンが画面中央に表示されている — ハイフン探しゲームのトップ画面

ゲームを開始すると10*10の計100個の文字が表示されます。この中に１つだけASCIIハイフンマイナスがあり、それ以外の文字はハイフンっぽい文字をランダムに表示しています。

縦10マス、横10マスの計100個のハイフンっぽい文字が並んでいる。１つだけ本物のASCIIハイフンマイナスが存在する。 — ハイフン探しゲームのゲーム画面

ASCIIハイフンマイナスではない文字を選択した場合には、選択した文字のUnicodeコードポイントを表示します。

ハイフンではない文字を選択すると残念U+2212ですのようにUnicodeコードポイントが表示される。 — ハイフンではない文字を選択するとUnicodeコードポイントが表示される

ASCIIハイフンマイナスを選択するとクリアと表示され、ゲーム開始ボタンを押してからASCIIハイフンマイナスを選択するまでにかかった時間を表示します。

ASCIIハイフンマイナスを選択すると、クリアと表示され選択するまでにかかった時間が表示される。 — ASCIIハイフンマイナスを選択するとクリアまでにかかった時間が表示される

私はこのハイフン探しゲームを何度かプレイして識別眼を鍛えた結果、約3秒でASCIIハイフンマイナスを選択できるようになりました。今後、ハイフンっぽい文字が原因のお問い合わせに対して、迅速にASCIIハイフン以外の文字を利用していることを特定できます。

AIの利用方法

ツールとしてはGeminiを利用しました。方針だけGeminiと壁打ちして実装はClineに任せようと考えていたのですが、この程度の簡単なアプリであればGeminiが一発で作ってくれました。

利用したプロンプトも紹介しておきます。必要以上にリッチなものを作らないように技術スタックや動作環境を制限することを意識してプロンプトを書きました。

ハイフンっぽい文字の中からハイフンを探し出すゲームを作りたいと思っています

使う技術スタック

- 単一のHTMLで完結させます。HTMLの中にJSとCSSを記述して動作や見た目を作りましょう

動作環境

- 一旦はローカルのHTMLファイルをChromeで開いて動作させることにします



仕様

開始ボタンを押すと3秒のカウントダウンをします。

カウントダウン後に画面に文字が10*10の合計100個表示されます。

文字の中に一つだけハイフン（U+002D）があり、それをクリックするとクリアです。

ハイフン以外の文字としては、（U+23BB, U+0335, U+02D7, U+2012, U+2212, U+FF70)をランダムに表示します。

ハイフン（U+002D）をクリックしたらクリアタイムを表示しましょう。

ハイフン以外の文字をクリックしたら文字コードを表示して間違えていることをユーザーに見せつつ、ゲームを続行します