AIを活用してUnicode検索ツールを作る方法
生成AIがブームとなっていますが、当ホームページでもAIとPythonを活用してWeb関連のお役立ちツールを作成してみました。
今回作成したのは、以下の「Unicode検索ツール」と「Unicodeヒートマップ描画ツール」です。
■Unicode検索ツール
文字やコードポイントなどから文字情報を検索するツールです。
→ 特殊文字・特殊記号の一覧（※ページ下部に設置）
■Unicodeヒートマップ描画ツール
日本語圏に関連するコードポイントの範囲をヒートマップ形式で描画するツールです。
→ 日本語圏Unicodeコードポイントの範囲
この二つは2週間程度で完成しましたが、Geminiによると、もしこれらをWeb制作業者に依頼した場合、費用の相場は30～80万円程度、納期は約1ヵ月～1.5ヶ月かかるとのことです。
| 方法 | 費用 | 期間 |
|---|---|---|
| 自分で生成AIを活用 | 無料 | 約2週間 |
| Web制作業者に依頼 | 30～80万円 | 約1ヵ月～1.5ヶ月 |
この業者に依頼した際に期間が長くなる理由については、打ち合わせや設計、テスト、出来栄えの確認などで時間がかかるためと思います。その一方、生成AIなら平日、休日を問わず、24時間無料で対応してくれますし、その場で一緒に作業をすすめられるため、上記のような工程にかかる時間を一瞬で済ませることができます。
最近では、AIの台頭によるSaaS再編の危機などといわれてますが、AIを活用して自分で作る流れは、上記のようなツール作成においても当てはまるものと思います。
ただ、HTMLやCSS、JavaScriptなどの知識が全くない状態では、プログラミングコードを渡されても何をどうすればいいのか分からないため、必ずしも誰でも簡単に作成できるわけではない印象を感じています。
その点、これまで自分でホームページを運営してきた方にとっては、ある程度の知識はあるはずなので、生成AIを活用して自分で作成していくことをおすすめします。
AIにプログラミングコードを書いてもらう際のコツ
実際にUnicode検索ツールを作成してみた印象では、よく言われているようなブロンプトの細かい設定は特に必要ありませんでした。
単純に、「生成AIにコードを書いてもらう」→「サイトに設定して動かす」→「動かない」→「AIにコードを貼り付けて動かないと言う」→「修正したコードをもらう」→「サイトに設定して動かす」…の繰り返しで最終的にはうまくいくと思います。
■console.logの活用
その際、コードのどの段階まで動くのか、あるいはどこから動かないのかをチェックするために、ログ（console.log）を設定しておくと便利です。
console.logを設定しておくと、Chromeデベロッパーツールのコンソール画面にログが表示されますので、そのログをAIに教えてあげれば、ドツボにはまることは回避できると思います。
console.log("文字列", 変数);これを設定しておくかどうかで、作業効率はかなり違ってくるはずです。そのほか、console.error()などもありますが、AIにコードの作成を頼む際には、ログを適当な場所に入れておいてもらうとよいでしょう。
■生成AIはGeminiが快適
生成AIには、ChatGPTやCopilot（コパイロット）、Claude（クロード）などいろいろありますが、個人的にはGeminiが便利と感じています。他の生成AIの場合、時間帯によってはかなり重くなるケースもありますが、Geminiは常にサクサク動くわりにコードの精度も高いと感じました。
また、質問する際のちょっとした間違いからあらぬ方向へ回答が進んでしまった際、それを修正するのは大変ですが、Geminiには元に戻って分岐できる機能があるため、途中からやり直すこともできます。
有料版についてはいずれも使ったことがないため、もしかしますと、次元の違う性能なのかもしれませんが、個人でツールを作成する分には無料版でも十分に機能するかと思います。
PythonでUnicodeを分割してjsonに記載
上記のUnicode検索ツールの実際の作り方についてですが、まず、公式サイトからUnicodeData.txtをパソコンにダウンロードしておきます。
このテキストファイルには、コードポイント順に文字情報が記載されおり、この情報を元に、サイト上でも文字情報が表示されるようにJavaScriptで設定します。
■UnicodeData.txtの内容
ただ、膨大な量がある漢字の範囲については、unihanなど別の箇所でまとめてデータ化されているため、UnicodeData.txtにすべての文字情報が記載されているわけではありません。およそ4万文字程度かと思いますが、日常的に使う分にはUnicodeData.txtのみでも十分かと思います。
この.txtファイルをそのままホームページにアップロードしても、ファイルサイズが大きい上に、データが構造化されていないため、JavaScriptでは扱いづらいです。
そのため、UnicodeData.txtから名前やカテゴリなど、必要な項目のみを取り出した上で、厳密なデータ形式のjsonに変換して記載していきます。
■jsonに変換
当サイト運営者はjson1枚目（0000～0FFF）、json2枚目（1000～1FFF）といった形で、コードポイントの範囲ごとに細かく分割してファイルサイズを軽くしました。
これにより、U+1234などと検索された際、JavaScriptのfetchで2枚目のjsonを参照しつつ、該当するコードポイントの文字情報を表示することができます。
このUnicodeData.txtの内容を数十個のjsonファイルに分割する際、手動では大変なため、Pythonで自動化するコードを生成AIに書いてもらうと便利です。
つまり、jsonをAIに直接出力してもらうのではなく、AIにjson変換用のコードをPythonで作成してもらい、そちらを使ってパソコン上で間接的にjsonファイルを作成することをおすすめします。
AIにJavaScriptを書いてもらい検索ツールが完成
数十個のjsonファイルが完成したら、それらをホームページにアップロードしておきます。jsなどの名前でスクリプト専用のフォルダを作成し、そちらにまとめておくことをおすすめします。
次に、そのjsonの数行分程度をAIに知らせた上で、実際にホームページ上に設置する検索ツールのJavaScriptを作成してもらいます。
Pythonについては、データ加工で使用したとしても、サイトに記載することはありませんが、このJavaScriptはサイト上に記載することになります。
その際、HTML側には、idを付与したボタンタグを<button id="example">検索</button>のような形で設置します。一方、JavaScript側では、そのボタンをgetElementByIdで捉え、そのボタンがクリックされたら検索機能が発動するようにaddEventListenerを設定しておきます。
肝心のその検索機能はfunctionで定義する形になりますが、そのあたりのコードは、すべて生成AIが一瞬で書いてくれます。
ヒートマップの描画ツールについても、ホームページにアップロードしたjsonをそのまま流用すれば、それほど時間をかけなくても完成するはずです。
上記のうち、当サイト運営者は、以下の二つがネックになってツールの作成は困難な状態でしたが、生成AIの登場により、この部分でのハードルがかなり低くなりました。
- Pythonでのjsonファイル作成
- JavaScriptの作成
費用をかけてWeb制作業者に依頼しなくても、個人でも十分に対応できるようになってきたため、個人サイト運営者にとっては生成AIの恩恵が非常に大きいと思います。
生成AIの活用方法といえば、文章や画像作成の方に目がいきがちですが、プログラミングコードにも注目して、便利なツールを作成してみることをおすすめします。