��Craftで夢日記を構築する

Craftで想像する

夢日記

夢を捉え、その隠された意味を解き明かしましょう。カスタムWebアプリで各夢を記録し、ChatGPTやClaudeを使って、夢に込められた象徴や感情を解釈しましょう。

夢日記

夢日記

ライブデモ

この実際の例は、CraftドキュメントとLovableアプリの外観を示しています。

このデモでは書き込み操作が無効になっています

Craft, LovableとChatGPT または Claudeで構築

自分で構築する

この例では、Craftを使用して個人の夢日記を管理します。夢を記録し、その後ChatGPTやClaudeに各夢の解釈を追加してもらうための小さなウェブアプリを構築します。

ステップ1 — ドキュメントを作成

夢日記の書き方はとてもシンプルです。新しい夢を毎回一番上に追加し、日付をタイトルにして、その下に追加情報を記入するだけです。

テンプレートを使用して、夢日記用の新しい文書を作成しましょう。

夢日記

夢日記

テンプレートをプレビューこのテンプレートを使用する

ステップ2 — APIアクセスを有効にする

ドキュメントのAPIアクセスを有効化すると、一意のURLが取得できます。このURLを使用すると、例えば以下で構築するWebアプリからドキュメントの読み取りや追加が可能です。

ステップ1

「イマジン」タブを開きます。

ステップ2

「最初のAPI接続を追加」をクリックします。

ステップ3

API 接続の名前を設定してください。このプロジェクトでは、API はドキュメントへの書き込みのみが必要です。API の権限を「書き込み」のみに設定してください。

ステップ4

「ドキュメントを追加」をクリックして、Dream Journal ドキュメントを選択してください。

ステップ5

ドキュメントとのやり取りに使用する API URL が、上部に表示されるようになりました。

ステップ6

「AIバンドルをダウンロード」ボタンをクリックしてください。これにより、API ドキュメントとドキュメントの内容が含まれたフォルダがダウンロードされます。

ステップ3 — Lovableで構築

それでは、Lovable上でダッシュボードの実際のウェブサイトを構築していきましょう。上記のサンプルサイトでは、以下のプロンプトを使用しました：

夢日記を作成し、夢を記録・分析しています。

情報はCraftに保存されています。現在のCraftドキュメントの状態例と、夢を保存する際に使用するAPIに関する情報は添付ファイルをご確認ください。

夢と睡眠の質を記録するための入力フォームを表示するウェブサイトを作成してください。

サイトの中心には、睡眠の質（非常に悪い～非常に良い）をスライダーで選択できるフォームを表示してください。スライダーの上部には各品質レベルに対応する絵文字を配置し、スライダー操作に合わせて更新されるようにします。下部には夢の内容を入力するテキストフィールドを配置してください。

デザインは落ち着いた柔らかい印象にしてください。落ち着いた色調と丸みを帯びた形状を使用し、背景には柔らかなグラデーションを施してください。

Lovable にアクセスし、プロンプトをプロンプトボックスに貼り付けてください。先ほどダウンロードしたドキュメント用の AI バンドルを必ず添付してください。

Lovableは作業を開始し、バンドルの内容を分析してドキュメント構造とAPIの使用方法を理解します。その後、入力したプロンプトに従ってウェブサイトの構築を開始します。

これで、夢日記に夢を追加できる素敵なサイトができました！お好みで、このウェブアプリをホーム画面に保存しておけば、毎朝すぐにアクセスできます。

ステップ4 — MCPアクセスを有効にする

あなたのドキュメントに対してMCPアクセスを有効にすると、AIクライアントがそのドキュメントを読み取ったり、追記したりできる一意のURLが取得できます。

ステップ1

「イマジン」タブを開いてください。

ステップ2

「最初のMCP接続を作成」をクリックしてください。

ステップ3

MCP 接続の名前を設定してください。

ステップ4

「ドキュメントを追加」をクリックして、Dream Journal ドキュメントを選択してください。

ステップ5

ドキュメントとの連携に使われるMCPのURLが、上部に表示されます。

ステップ5 — MCP接続を設定する

クライアントからドキュメントに接続するために MCP URL を使いましょう。

カスタムコネクタを追加するには、Claude Pro または Max のサブスクリプションが必要です。

ステップ1

設定へ移動

ステップ2

「コネクター」セクションを選択し、「カスタムコネクターの追加」ボタンをクリックします。

ステップ3

コネクタにわかりやすい名前を付け、MCP URLを貼り付けます。詳細設定のOAuthクライアントIDとクライアントシークレットフィールドは空のままにしてください。Claudeは必要に応じて自動的に認証を処理します。

ステップ4

確認後、コネクタがセットアップされ、チャットで使用できるようになります。

詳しくは、Claudeのドキュメントをご覧ください：「Getting Started with Custom Connectors Using Remote MCP」。

ステップ6 — ドキュメントの操作を始める

Claude を使って、夢日記の最新の夢に解釈を追加してもらいましょう。

サンプルをクリックすると、プロンプトがクリップボードにコピーされます。

あなたにおすすめのアイデア

ギャラリーに戻る

パーソナルブログ

パーソナルブログ

パーソナルブログ

Craftドキュメントを活用したパーソナルブログを構築しましょう。APIを通じてコンテンツが自動同期され、ノートアプリから直接投稿できます。

詳細を見る

読書記録

読書記録

ClaudeまたはChatGPTをMCP経由で使用して、本を記録し引用を保存できます。

詳細を見る

プラントダッシュボード

プラントダッシュボード

プラントダッシュボード

Lovableで構築されたリアルタイムの植物管理ダッシュボードです。Craftドキュメントから水やりスケジュールや管理のヒントを取得できます。

詳細を見る

��