0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Obsidian開くまでもない時:「AIプロンプト検索ツール」(html)を作りました

0
Last updated at Posted at 2026-02-06

Gemini_Generated_Image_ytz3fhytz3fhytz3.jpg

AIプロンプト検索ツール - マークダウンからプロンプトを簡単検索&コピー

はじめに

AI画像生成(Stable Diffusion、Midjourney、DALL-E など)を使っていると、プロンプトがどんどん増えていきますよね。

「あの時使ったプロンプト、どこに保存したっけ...」
「似たようなプロンプトを探したいけど、ファイルを開いて一つずつ確認するのは面倒...」

そんな悩みを解決するために、マークダウンファイルからプロンプトを検索・コピーできるツールを作りました。

機能紹介

主な機能

  • 📁 ドラッグ&ドロップ対応: マークダウンファイルをドロップするだけで読み込み
  • 🔍 キーワード検索: 英語・日本語どちらでも検索可能
  • 📂 カテゴリ・ファイルフィルタ: プロンプトを絞り込んで表示
  • 📋 ワンクリックコピー: プロンプト全体またはNarrativeのみをコピー
  • 🌙 ダークモードUI: 目に優しいデザイン
  • 📱 レスポンシブ対応: PC・タブレット・スマホで利用可能

スクリーンショット

image.png
(スクリーンショット画像をここに挿入)

使い方

1. HTMLファイルをダウンロード

下記のNote記事からHTMLファイルをダウンロードしてください。

2. プロンプト用マークダウンファイルを準備

以下の形式でマークダウンファイルを作成します。

# プロンプト集

## カテゴリ名

### プロンプトタイトル

\`\`\`prompt
masterpiece, best quality, high resolution,
beautiful sunset over the ocean, golden hour lighting,
dramatic sky with orange and pink clouds
Narrative: 黄金色に染まる夕暮れの海岸の風景。
\`\`\`

ポイント:

  • ## カテゴリ名 でカテゴリを定義
  • ### タイトル でプロンプトのタイトルを設定
  • コードブロック(```prompt)内にプロンプトを記述
  • Narrative: で日本語の説明を追加(任意)

3. ファイルを読み込む

  1. prompt-search-public.html をブラウザで開く
  2. マークダウンファイルをドラッグ&ドロップ(または「クリックして選択」)
  3. 複数ファイルの同時読み込みも可能

4. 検索&コピー

  • 検索ボックスにキーワードを入力して検索
  • カテゴリやファイルでフィルタリング
  • 「プロンプトをコピー」ボタンでクリップボードにコピー

対応フォーマット

基本形式

### プロンプト名

\`\`\`prompt
プロンプト内容
\`\`\`

カテゴリ付き

## 風景

### 夕焼けの海

\`\`\`prompt
beautiful sunset, ocean view, dramatic sky
\`\`\`

## 動物

### 森の鹿

\`\`\`prompt
deer in forest, wildlife photography
\`\`\`

Narrative付き

### 幻想的な風景

\`\`\`prompt
fantasy landscape, magical forest, ethereal light
Narrative: 魔法のような光に包まれた幻想的な森の風景。
\`\`\`

技術仕様

  • 動作環境: 最新のWebブラウザ(Chrome、Firefox、Edge、Safari)
  • サーバー不要: ローカルのHTMLファイルとして動作
  • プライバシー: ファイルはブラウザ内で処理され、外部に送信されません
  • ファイル形式: .md.txt に対応

カスタマイズ

カラーテーマの変更

CSSの:rootセクションで色を変更できます。

:root {
    --bg-primary: #1a1a2e;    /* 背景色 */
    --accent: #e94560;         /* アクセントカラー */
    --text-primary: #eee;      /* テキスト色 */
}

プロンプト認識条件の追加

JavaScriptのparseMarkdown関数内で認識条件を追加できます。

const isPrompt = (
    codeBlockType === 'prompt' ||
    currentTitle ||
    contentTrimmed.indexOf('masterpiece') !== -1 ||
    // 追加の条件をここに記述
);

ライセンス

MIT License

更新履歴

  • v1.0.0 - 初回リリース

おわりに

このツールが皆さんのAI画像生成ワークフローの改善に役立てば幸いです。

バグ報告や機能リクエストがあれば、コメントでお知らせください。


いいねストックしていただけると励みになります!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?