DOC 04 / Self-Made Tools

自分でも作れる
小さなツール

DOC 01〜03はチームで保守していく「ちゃんとしたソフトウェア」の話だった。 このガイドはその対極——自分だけが使う、壊れたら作り直せばいい、使い捨てに近いツールをAIで作る方法だ。 プログラムの知識がなくても、対話しながら育てれば作れる。

01 使い捨てツールの考え方

プログラムには2種類ある。チームで開発し、保守し、引き継いでいく「ちゃんとしたソフトウェア」と、自分だけが使う、壊れたら作り直せばいい「使い捨てに近いツール」だ。

DOC 01〜03で扱ってきたのは前者の話だ。命名規則、ファイル構成、セキュリティ、レビュー工程——これらはすべて「長く使い続けるソフトウェア」を前提にしている。しかし後者には、そのルールの大半は不要だ。

// このカテゴリの条件
自分1人(または身内数人)しか使わない
ファイル数枚で完結する
サーバー・インストール・アカウント登録が不要
壊れたら再生成すればいい
ドキュメントも引き継ぎも不要
身近な例:毎月使う計算の自動化、ファイルの一括整理、自分だけのメモ帳、大切なものの写真と保管場所の記録——これらはExcelでもスマホアプリでもなく、「自分好みのブラウザツール」として作るのが一番自由度が高い。そしてAIがいれば、プログラムの知識がなくても作れる段階に来ている。
最初に必要なのはこれだけ
// プロンプトに含める最低限の情報
何を作りたいか(1〜3行)
どこで動かすか(Windows・Chromeで、など)
出力形式(HTMLファイル1枚で、など)

細かい仕様は、動くものを見てから「ここを直したい」「この機能も欲しい」と対話しながら育てればいい。最初から完璧なプロンプトを書こうとしなくていい。

「file://で動く」とはどういう意味か

「ブラウザで動くツール」と聞くと、サーバーが必要と思うかもしれない。しかし今回作るものは違う。HTMLファイルをダブルクリックしてChromeで開くだけで動く。インターネット接続も不要で、データはすべて自分のPC内に保存される。

HTMLファイルをダブルクリック
Chromeで開く
そのまま使える
Cloudflareへの公開も、Node.jsのインストールも必要ない。WindowsのChromeまたはEdgeで動くことを条件にすれば十分だ。
// 核心的な考え方

プログラムは使い捨て。データが資産だ。

「大事なデータが消えたら困る」という心配は正しい。しかしそれはエクスポート機能で解決できる。ツール自体が壊れても、データさえ書き出しておけば、新しく作り直したツールに読み込める。この割り切りができると、「完璧なプログラムを作らなければ」というプレッシャーから解放される。

02 実際に作ってみる — 思い出の品・収納場所記録ツール

「思い出の品や大切なものを、写真と保管場所をセットで記録しておきたい」——これを例に、AIとの対話で育てていく流れを見ていく。

STEP 01 ざっくり伝える
最初は細かいことを考えなくていい。作りたいものを1〜3行で伝えるだけだ。
// プロンプト例
ブラウザで動くツールを作ってください。 HTMLファイル1枚で完結し、 WindowsのChromeまたはEdgeでfile://で開いて使えること。 思い出の品や大切なものの収納場所を 写真付きで記録・検索できるツールです。 データは外部に送信せず、PC内に保存してください。
この時点では保存方法も画像形式も指定しない。AIが提案してくるか、動くものを見てから次の対話が始まる。
STEP 02 保存方法を相談する
写真をブラウザに保存できるのか——これは素人が詰まるポイントだ。わからなければそのままAIに聞けばいい。
// プロンプト例
写真も一緒に保存したいのですが、 ブラウザだけで写真データを保存する方法はありますか? 100枚くらい保存することを想定しています。 方法をいくつか教えてください。 メリット・デメリットも添えてください。
// AIはおそらくこう返す
localStorage
手軽だが容量が5MB程度。写真の保存には向かない
IndexedDB ← これを選ぶ
ブラウザ内で大容量のデータを扱える。100枚でも十分対応できる
ファイルシステムAPI
PCのフォルダに直接保存できるが、毎回許可が必要
// 返す言葉はこれだけ
②のIndexedDBで作ってください。 画像は容量を抑えるために圧縮して保存してください。
STEP 03 HEIC問題を相談する
iPhoneで撮った写真はHEICという形式で、Windowsのブラウザでは読めないことがある。これも素人が詰まるポイントだ。
// プロンプト例
iPhoneで撮った写真を登録したいのですが、 HEICという形式で読み込めないことがあります。 ブラウザだけで解決する方法を教えてください。 外部サーバーへの送信は不要です。 方法をいくつか教えてください。 メリット・デメリットも添えてください。
// AIはおそらくこう返す
canvasで変換する
追加ライブラリ不要だが、ChromeはHEICデコード非対応のため単独では動かない
heic2anyライブラリを使う ← これを選ぶ
HEIC→JPEG→canvas→WebPの順で変換。WindowsのChromeでも動作する
サーバーで変換する
外部送信が発生するため今回は不可
HEICを対象外にする
最もシンプルだがiPhoneユーザーには不便
// 返す言葉はこれだけ
②のheic2anyを使ってください。 ライブラリのコードはHTMLファイルの中に直接埋め込んでください。 CDNは使わないでください。
STEP 04 決まった仕様でまとめて作らせる
Step 1〜3の対話で決まった内容をまとめて渡す。これが最終的なプロンプトになる。最初からこれを書こうとしなくていい、というのがこのセクションで伝えたいことでもある。
// 最終プロンプト
ここまでの会話で決まった仕様で、 最終的なHTMLファイルを1枚作ってください。 【動作環境】 WindowsのChromeまたはEdgeで動作すること。 file://で開くだけで使えること。 サーバー・インストール・アカウント登録は不要。 【保存】 ・IndexedDBに保存する ・画像は1024px・品質70%のWebPに変換してから保存する ・登録時にランダム6文字のIDを生成してDBに持たせる ・フィールドはid・品名・場所・画像・登録日 【画像入力】 ・対応形式:JPEG・PNG・HEIC・WebP ・入力方法:ファイル選択・ドラッグ&ドロップ・Ctrl+V貼り付け ・いずれの方法でも保存前に1024px・70%WebPに変換する 【画面】 ・背景色:#f5f0e8、文字色:#2d2a24、アクセント:#6b8f6b ・フォントサイズは本文16px以上 ・グリッドレイアウトで写真を主役に、品名と場所をその下に表示 ・検索ボックスで品名・場所をリアルタイム絞り込み 【操作】 ・登録:写真+品名+場所を入力して保存 ・削除:確認ダイアログあり ・書き出し:JSZipでZIP出力(index.json+photos/フォルダ) ・読み込み:ZIPからインポート、IDで重複チェック 【エクスポートZIPの構造】 index.json:[{ id, name, location, filename, created }] photos/item_XXXXXX.webp 【外部ライブラリ】 以下2つのコードをHTMLファイル内に直接埋め込むこと。 CDNは使用しない。 ・JSZip:ZIPの書き出し・読み込みに使用 ・heic2any:HEICのデコードに使用
STEP 05 動かして確認・微調整
生成されたHTMLファイルを保存して、ダブルクリックしてChromeで開く。この時点で細部を気にしない。
// 最初の30秒で確認すること
画面が開くか
写真を登録できるか
登録した写真が一覧に出るか
検索で絞り込めるか
気になる点が出たらその場でAIに伝える。エラーメッセージが出た場合はそのままコピーして貼り付けるだけでいい。原因の分析はAIがやってくれる。
「動く」と「完璧」は別物だ。文字の大きさが少し違う、余白が微妙にズレている——これらは気にしない。使っていて不便を感じたときにAIに言えばいい。使いながら育てるのがこのカテゴリのツールだ。
STEP 06 READMEを出力してもらう
ツールが完成したら、最後にAIにREADMEを作らせる。これが最も重要なステップだ。
// プロンプト例
このツールのREADMEをMarkdown形式で作成してください。 以下の内容を含めてください。 ・このツールの概要(1〜2行) ・動作環境(ブラウザ・OS) ・使い方(起動方法・基本操作) ・エクスポートファイルの形式 - ZIPの構造 - index.jsonのフィールド定義 - 画像ファイルの命名規則 ・インポート方法と注意事項 - 重複チェックの仕組み ・現在の仕様をそのままプロンプトとして再利用できる形で記載 (将来再生成するときにそのままAIに貼り付けられるように)
// なぜREADMEが重要なのか
「データは資産、プログラムは使い捨て」を完結させる最後のピース

プログラムはいつか壊れる。アップデートで動かなくなることもある。AIに修正させようとして、余計に壊れることもある。

しかしREADMEがあれば、プログラムの知識がなくても自力で復旧できる。

READMEの中に「現在の仕様をそのままプロンプトとして再利用できる形」で書いておく。これがあれば:

// ツールが壊れたときの復旧手順
1ZIPでエクスポートしておいたデータを確認する
2READMEを開き、「仕様プロンプト」のセクションをコピーする
3AIに貼り付けて「このプロンプトでHTMLを再生成してください」と伝える
4生成されたHTMLにZIPをインポートする
5元通りになる

この仕組みが完成して初めて「プログラムは使い捨て、データは資産」が本当の意味で実現する。READMEはツールの説明書ではなく、データを守るための保険だ。

最初から完璧なプロンプトを書く必要はない。
対話しながら育て、データを守り、壊れたら作り直す。

「動けばいい」という割り切りが、作ることへの敷居を下げる。