クエスト

概要

Quests ブロックは、ウェブショップでクエストをカードとして表示します。各カードには次が表示されます：

• クエスト画像
• クエスト名
• 説明
• 報酬
• ボタン

ユーザーはクエスト条件を達成すると報酬を受け取ります。クエスト条件はゲーム内イベントに基づきます。つまり、ゲーム内でのプレイヤーの行動（例：特定レベルへの到達、一定数の勝利など）をクエストプラットフォームへ送信します。

このブロックはAI ツールキット経由、またはサイトビルダーで手動で追加できます。クエストの作成と編集はエクソーラ AI ツールキットからのみ行えます。

メリット

Quests ブロックのメリット：

• エンゲージメント：クエストが目標を与え、ユーザーがウェブショップやゲームに戻る動機になります。

• コーディング不要：サイトビルダーでブロックを追加・設定するか、AI ツールキットで AI エージェントに任せられます。

• 表示内容のコントロール：表示するクエスト、順序、件数を選べます。

• カスタマイズ：カードのテキスト、画像、レイアウトを編集し、ウェブショップのデザインに合わせられます。

要件

Quests ブロックを使用するには、次を確認してください：

• エクソーラサイトビルダーでウェブショップを作成している
• サイトでエクソーラログインを設定している
• エクソーラ AI ツールキットでプロジェクト用のクエストを作成している（ブロックには既存のクエストのみが表示されます）

ユーザーフロー

1. ユーザーがウェブショップを開くと、クエストカードを含む Quests ブロックが表示されます。
2. クエストカードのボタンをクリックし、未ログインの場合はエクソーラログインでログインします。
3. クエスト条件を達成します。
4. 進捗に応じてクエストカードの状態が更新されます。
5. クエスト完了時に報酬を受け取ります。

AI ツールキットでクエストを設定

クエストの作成と変更はエクソーラ AI ツールキットからのみ可能です。これは Claude Code、OpenAI Codex、Gemini CLI などの AI コーディングツールと連携します。AI エージェントに Quests ブロックの追加や更新を任せることもできます。

AI ツールキットでクエストとブロックを設定するには：

1. AI エージェントでクエストを作成または変更します。
2. AI エージェントに Quests ブロックをサイトへ追加または更新するよう依頼します。エージェントが作成・変更したブロックは下書きとして保存されます。
3. サイトビルダーで下書きを確認します。
4. サイトを公開して変更を反映します。

サイトビルダーで Quests ブロックを設定

Quests ブロックを追加するには：

3. サイトに複数のページがある場合は、ビルダー上部のドロップダウンリストから必要なページを選択します。
4. Add block をクリックし、Quests を選択します。
5. ブロックをクリックして設定パネルを開き、設定を行います。
6. ブロックのテキストを編集します。
7. 右上の Preview をクリックして変更を確認します。
8. サイトを公開します：
   1. サイトビルダーの右上で Publish をクリックします。
   2. 公開するページのチェックボックスをオンにします。
   3. Publish をクリックします。

ブロック設定

設定パネルには、Quests、Layout、Preview state の各設定グループがあります。

Quests

Quests グループでは、ブロックに表示するクエストとその表示順を設定します：

• Selected quests — AI ツールキットでこのプロジェクト向けに作成されたクエストです。クエストを検索するには、検索フィールドに名前を入力します。各クエストで次の操作ができます：
  • トグルをオンにしてブロックに表示します。トグルがオフのクエストは表示されません。
  • ハンドルで上下にドラッグして順序を変更します。一番上のクエストが左から先に表示されます。
  • クエストを展開して、カードに表示する画像をアップロードします。報酬画像やクエストをテーマにしたイラストなど、任意の画像を使用できます。
• Maximum quests shown — ブロックに表示するクエストカードの最大数です。

Layout

Layout グループでは、ブロックとカードの見た目を設定します：

• Show heading — ブロックタイトルを表示または非表示にします。
• Show card descriptions — 各カードのクエスト説明を表示または非表示にします。
• Show card images — 各カードの画像を表示または非表示にします。
• Image fit — 画像がカードの画像エリアをどのように満たすか：
  • Fill image area — 画像が領域全体を覆い、一部がトリミングされる場合があります。
  • Fit whole image — 画像全体をトリミングせずに表示します。
• Card text alignment — カード内テキストの配置（左/中央/右）。
• Button style — 各カードのボタンスタイル。サイトのテーマから継承します：Primary、Secondary、Tertiary、または Theme default。
• Block background — すべてのカード背面の背景：Transparent、またはサイトのテーマの Primary / Secondary 色。
• Card background — 各カードの背景：Transparent、またはサイトのテーマの Primary / Secondary 色。

Preview state

Preview state グループでは、サイトビルダーでのクエストカードの表示方法を選択します：

• Editor simulation — カードのさまざまな状態でブロックの見た目を確認できます。エディターではカード上のシミュレーション操作は無効です。
• Live — 実データを表示します。

ブロックのテキストを編集

サイトビルダーでは、次のテキストをブロック上で直接編集できます：

• ブロックタイトル
• クエスト名
• クエストの説明
• ボタンのテキスト

テキストを編集するには：

1. 変更したいテキストをクリックします。
2. 新しいテキストを入力します。
3. ツールバーで必要に応じて書式設定します。テキストスタイルの変更、番号付き/箇条書きリストの作成、太字/斜体/下線の適用、配置の設定、リンクの追加、テキスト色の変更ができます。