DrupalサイトへのDXPR Builderのインストール.

DXPR Builderを学ぶここから始めるインストールと更新

運用中のDrupalサイトにDXPR Builderをインストールし、プロダクトキーを追加して1つのコンテンツタイプをビルダーに切り替えます。終わる頃にはビルダー表示の保存ページができ、最初のエレメントの準備が整います。新規サイトの立ち上げには、代わりにDXPR CMSのインストールでビルダー、テーマ、コンテンツタイプをまとめて設定します。

手順の動画は既存コンテンツタイプへのインストールにあり、このページ末尾のチェックの手順2から8を説明します。

始める前に

  • Drupal 11を含むDrupal 10.2以降、PHP 8.1以降。その他は動作要件をご覧ください。
  • プロジェクトにComposerとDrush。
  • プロダクトキー。DXPR Builderの動作に必要です。dxpr.com/getting-startedで確認します。

モジュールのインストール

  1. DXPR Builder 3.xをComposerでダウンロードします。バージョン3はベータリリースのため、ベータを許可します。

    composer require 'drupal/dxpr_builder:^3.0@beta'

    通常のcomposer require drupal/dxpr_builderでは、代わりに安定版の2.x系列がインストールされます。

  2. モジュールを有効化します。

    drush en dxpr_builder

    DrushはKeyモジュールとDXPR Builderに必要なコアモジュール（Field、Field UI、Views、Image、Block）も有効化します。

プロダクトキーの追加

  1. 開くのはDXPR Studio > DXPR Builder > General Settings（/admin/dxpr_studio/dxpr_builder/settings）です。
  2. 場所はLicenseセクションで、Storage methodを選びます。
  3. 対象はConfiguration storageで、キーをProduct keyに貼り付けます。Key moduleではKeyで自分のキーを選びます。
  4. クリックするのはSave settingsです。

Configuration storageではキーがサイト設定に保存されるため、設定エクスポートに含まれます。Key moduleでは、先に/admin/config/system/keysで作成したキーから読みます。そのキーにFileまたはEnvironmentプロバイダーを付ければ、エクスポートからも外れます。

プロダクトキー設定のあるDXPR BuilderのGeneral Settingsページ

サブモジュールの追加（任意）

DXPR Builderには3つのサブモジュールが付属します。drush enと名前で有効化します。

サブモジュール 追加内容 必要なモジュール
dxpr_builder_page ビルダー設定済みのDrag and drop Pageコンテンツタイプ 使うのはモジュールField Groupです
dxpr_builder_block ブロック領域向けビルダーコンテンツのDrag and Drop Blockブロックタイプ 先に有効化したコアのBlock Contentモジュール
dxpr_builder_media Entity Browserベースの旧メディアブラウザー。Extendページでは非表示 Entity BrowserとInline Entity Form

ほとんどのサイトにメディアサブモジュールは不要です。インストール時にコアのMedia Libraryが有効なら、ビルダーはそれを使います。それ以外は後から設定ページのMedia > Browser typeで選びます。詳細はサブモジュールアーキテクチャをご覧ください。

AI機能の有効化（任意）

AIページ作成、AIテキスト、AI画像はAIモジュールとDXPR AI Provider経由で動作します。

  1. 両モジュールをダウンロードします。

    composer require drupal/ai drupal/ai_provider_dxpr

  2. 有効化します。

    drush en ai ai_provider_dxpr

  3. 開くのは/admin/config/ai/providers/dxprで、DXPR API Keyでプロダクトキーを持つキーを選んで保存します。

  4. 開くのは/admin/dxpr_studio/dxpr_builder/ai_settingsです。AI Featuresでは初期値で3つのボックスすべてにチェックが付いています。不要な機能のチェックを外します。

各設定の説明はAI機能ガイドをご覧ください。

インストールの確認

ビルダーは、テキストフィールドがDXPR Builderフォーマッターを使うコンテンツに表示されます。以下の手順ではBodyフィールドを持つコンテンツタイプに設定します。Drag and drop Pageタイプはdxpr_builder_page由来で設定済みのため、手順2から5は飛ばせます。

  1. 開くのはDXPR Studio > DXPR Builder > General Settingsで、Licenseセクションでプロダクトキーを確認します。
  2. 開くのはStructure > Content typesです。Bodyフィールドを持つコンテンツタイプ横のメニューを開き、Manage displayをクリックします。
  3. 表示モードの一覧が開いたら、DefaultのManageをクリックします。
  4. BodyのFormatをDXPR Builderに変えます。
  5. クリックするのはSaveです。
  6. そのタイプのコンテンツを作成し、Titleを入力します。
  7. クリックするのはSaveです。
  8. コンテンツエリアにカーソルを合わせます。DXPR Builderツールバーが表示されます。

表示内容

保存したページには、本文テキストの代わりに空のビルダーが表示されます。AIプロンプト（AI設定まではグレーアウト）、Choose a template、Add Elementsがあります。Add Elementsをクリックすると、LayoutタブとContentタブを持つエレメントピッカーが開きます。DXPR Builderは動作しています。

ビルダーが表示されない場合

  • ページに本文テキストは出るがビルダーがない。 フィールドが他のフォーマッターのままです。Structure > Content types > Manage displayでDefault表示モードのFormatをDXPR Builderにします。
  • 編集フォームがプレーンテキスト領域になっている。 DXPR Builderは編集フォームではなく保存ページ上で動作します。コンテンツを保存してページを開きます。
  • ビルダーが管理者にしか表示されない。 他のロールにEdit with DXPR Builder権限がありません。People > Permissions（/admin/people/permissions）で付与します。
  • 2人目の編集者に「Only one account can use DXPR Builder on the DXPR Free tier」と出る。 無料ティアはエディター1人です。有料サブスクリプションのプロダクトキーをLicenseに入力します。
  • 「Your product key is not valid」エラーが出る。 DXPR CDNがキーを拒否しました。Licenseに/admin/dxpr_studio/dxpr_builder/settingsで完全なキーを貼り付け直します。
  • 「DXPR Builder cloud assets could not be loaded」エラーが出る。 ブラウザーがcdn2.dxpr.comやcdn.dxpr.comに届いていません。ファイアウォールとデータレジデンシーの説明どおり両ホストを許可します。
  • AIプロンプトに「AI features require the AI module」と出る。 AIモジュールが未設定です。AI機能の有効化の手順を使うか、AI Featuresで/admin/dxpr_studio/dxpr_builder/ai_settingsの機能のチェックを外します。
  • Save settingsで「Invalid product key」と出る。 貼り付けたテキストがキー全体でないか、DXPR Builder 1.x用のキーです。現在のキーを半角スペースや改行なしでコピーし直します。

エディターが表示されない場合では他の原因も説明します。

次のステップ