
オフライン対応の軽量なチャット履歴管理ツール:AIチャットアーカイブ
先日、チャット履歴を検索できるWebアプリを作るかもしれない、とお伝えしましたが、結局作ってみました。AI(Claude)に頼って開発したので、約2時間ほどで完成しました。思ったよりサクサク、手軽にできたので、その過程も簡単にご紹介します。
さて、完成後にふと「これ、別にEvernoteとかのメモアプリでもよくない?」と考えました。確かにその通りです。ただ、このアプリにはいくつかのメリットがあります。例えば、ローカルストレージに保存する仕様のため、データが外部に送信される心配がありません。また、比較的軽量な設計なのでスマホでも快適に使えます。
以下がアプリ本体とサンプルファイル(json)です。
Webブラウザ上で動作し、外部ライブラリを使用しているものの、データを外部に送信する仕組みは一切ありません。
改行が反映されないバグなどあったので、修正して差し替えました。(2024/12/05)
サンプルファイルをインポートすることで、軽い動作確認が可能です。
余談ですが、先日公開したWEBアプリをベースにしようと考えましたが、面倒だなと思い、イチから作成にしました。そのうち、気が向いたらマージするかも🙄
使い方
「必要十分な機能」と「シンプルさ」にこだわった設計です。以下が主な特徴です。
カードビュー対応
各チャットログがカード形式で表示されます。カードサイズはスライダーまたはボタンで調整可能です。(下記画像の青枠)※縦スマホだとうまく機能しません。画面サイズにもよりますが、拡大率を変えることで機能します。ローカルストレージ保存
データはローカルストレージに保存され、標準の上限である5MB以内で容量を可視化できます(画像中の緑枠)。ただし、ローカルストレージは一時的な保存領域なので、定期的にエクスポートしてバックアップすることをお勧めします。柔軟なソート機能
お気に入り、星評価(0~5段階)、作成日時などで並び替えが可能です(画像中のオレンジ枠)。新規作成・編集・削除
新規作成ボタンで簡単にログを追加可能。追加後は編集アイコンから内容を再編集できます。不要になったログはゴミ箱アイコンで削除してください。即時検索機能
入力すると、そのまま即時検索され、絞り込まれます。

ちょっと工夫した点として、どのようにインポートするかを選べるようにしました。基本的に「全てを追加」は無いと思いますが、一応選択肢に入れました。(「全てを追加」を押すと、後ろに同じデータが増えるだけ。)

作り方のポイント
以下は、実際に作成した手順をまとめたものです。短時間でWEBアプリを作るための参考になれば幸いです。(思考停止でいけます。めっちゃ手抜き。)
機能を思いつく限りAIに追加させる
あれこれと機能をAIに指示して追加します。この段階では動作しますが、コードは散らかった状態になります。いわば「保守性ゼロ」の状態です。バグが潜んだ化け物です。仕様をAIに書き起こさせる
現在の動作をもとに、日本語で仕様をまとめてもらいます。この仕様を整理することで、次のステップで役立ちます。(下の画像参照)新しいチャットに仕様を引き継いで再構築
整理した仕様を基に、きれいで保守性の高いコードをAIに書いてもらいます。必要に応じてここから追加の機能を指示して実装を進めます。(下の画像参照)


これだけで約2時間ほどで、今回のレベル程度のWEBアプリが完成します。もちろん、ここからサーバーサイドと連携させたり、商用レベルに仕上げるのは人間の手が必要ですが、AIのサポートを活用すれば効率的に進められるでしょう。
言い訳ですが、上記手順の3.からどんどん機能を実装したので、本記事で公開しているものは結構汚いです。
まとめ
今回、思い立って軽量なチャット履歴管理ツールを作成してみました。AIを活用するノウハウが少しずつ溜まってきたこともあり、以前よりWEBアプリの開発が格段にやりやすくなった印象です。ポイントは、変に人間のエゴを持ち込まず、AIに任せる部分を増やすこと。これにより、よりスムーズに完成まで持っていくことができるでしょう。
余談
個人でローカル環境で自由に使う分には、今回のような簡易的なアプリでも十分ですが、これを商用レベルでサーバーサイドと連携させるとなると、話は別です。開発速度が遅いからといって一概に批判できないのは、最終的に重要なのは品質だからです。
特に、バグだらけの状態でリリースしてしまうと、最悪の場合、LINEのように個人情報や機微な情報が流出してしまうような事態を招きかねません。データの安全性や信頼性を守ることが、商用アプリでは最優先されるべきだと感じます。
そのため、AIを使った開発やコーディングが便利だからといって、人的資産を軽視するのは避けるべきだと思います。具体的には、「AIを導入したから単価の高い人材を削減しよう」とか、「コストを抑えるために経験の浅いメンバー(単価の安い人材)だけでチームを構成しよう」といった考え方は非常に危険です。
誤解のないように申し上げると、現時点で問題を起こしている企業がこうした手法を採用していると言いたいわけではありません。ただ、AIの技術(コーディング力)が急速に進化するこの時代だからこそ、人間とAIの役割を適切に見極めて、バランスを取ることがますます重要だと強く感じます。