logo

パレット - カラフルに🎨

Palette — ビジュアルページビルダー、デザインの専門知識は不要です。

ライブデモ パレットをダウンロード

Scroll
  1. ホーム
  2. JSON Drop APIドキュメント
  3. JSON:APIバックエンド

Drupal 11 で Webform REST モジュールを使用する方法：実践ガイド

09/04/2025, by Ivan
Download JSON Drop API

JSON Drop API Documentation

絶えず進化するウェブ開発の分野において、Drupal 11 は、動的なウェブサイトやアプリケーションを構築するための最も堅牢で柔軟なプラットフォームの1つとして際立っています。そのモジュール式アーキテクチャにより、開発者は幅広いプロジェクトのニーズを満たすために中核的な機能を調整・拡張できます。

そのような拡張機能の1つが Webform REST モジュールです。これは、RESTful API を介して Drupal と外部アプリケーションのシームレスな統合を可能にする強力なツールです。このガイドでは、Webform REST モジュールを Drupal 11 で使用するための実践的な入門を提供し、そのセットアップと設定を順を追って説明し、効果的な操作方法をデモンストレーションします。

この記事で学べること

この記事では以下のトピックを説明します：

  • Webform REST モジュールの概要

  • 必要なモジュールと依存関係

  • Webform REST と REST UI のインストール

  • Webform REST モジュールの設定

  • CORS への対処

  • API リクエストの実行

  • リクエストとレスポンスのペイロードの理解

モジュールの概要：Webform REST

Webform REST モジュールは、RESTful エンドポイントを介してフォーム関連の機能を公開することで、Drupal の Webform 機能を拡張します。これを使用すると、ウェブフォームの作成、表示、更新、削除、および HTTP リクエストによるフォームデータの送信と取得などの操作を実行できます。

このモジュールは、Drupal を以下のような外部プラットフォームと統合する場合に特に役立ちます：

  • CRM システム

  • メールマーケティングツール

  • モバイルアプリケーション

  • サードパーティサービス

これらの統合を有効にすることで、ワークフローを合理化してデータ収集を一元化でき、アプリケーションの全体的な効率を大幅に向上させることができます。

前提条件

Webform REST を始めるには、以下のモジュールがインストールされていることを確認してください：

  • Webform – ウェブフォームの構築と管理用

  • REST UI – RESTful エンドポイントと権限の設定用

  • Webform REST – API 機能を提供するメインモジュール

Webform REST と依存関係のインストール

このガイドでは、ローカル開発環境の管理に Docker と Lando を使用し、依存関係の管理に Composer を使用しています。

Webform REST モジュールをインストールするには、以下のコマンドを実行します：

$ lando composer require 'drupal/webform_rest:^4.0'

モジュールを有効にするには：

$ lando drush en webform_rest

さらに、管理インターフェースで REST エンドポイントを設定できる REST UI モジュールを有効にします：

$ lando drush en restui

または、管理インターフェースからこれらのモジュールを有効にできます：
/admin/modules

Webform REST モジュールの設定

必要なモジュールを有効にしたら、REST 設定ページに移動します：

パス： /admin/config/services/rest

以下の REST リソースを有効にします：

  • Webform Submission

  • Webform Elements

  • Webform Submit

これらのリソースは、REST を介してフォームとそのデータを操作するための主要なエンドポイントを提供します。

REST リソースの更新

少なくとも1つの認証方法を選択する必要があります。ここでは「cookie」を選択します。

POST 設定を送信

未認証ユーザーがウェブフォームを介してリクエストを送信できるようにするには、匿名（Anonymous）ユーザーロールに適切な権限を付与する必要があります。具体的には、Webform Submit REST リソースへの POST リクエストを許可します。

この権限は、以下の場所に移動して設定できます：
/admin/people/permissions

[RESTful Web Services] セクションで、匿名ユーザーに対して [Webform Submit リソースへの POST アクセス] のチェックボックスをオンにします。これにより、認証されていない外部ユーザーまたはシステムが、Webform REST API を通じて Drupal サイトにデータを正常に送信できるようになります。

権限ページ

CORS についての一言

アプリケーションのインストール先とは異なるドメインからリクエストを行う場合は、以下のような CORS の問題に遭遇するでしょう：

CORS エラー

Drupal 11 で CORS を理解して設定する

CORS（Cross-Origin Resource Sharing、クロスオリジンリソース共有）は、異なるオリジン間でリソースがどのようにアクセスされるかを制御するためにウェブブラウザによって実装される重要なセキュリティメカニズムです。ここで オリジン は、ドメイン、プロトコル、ポートの組み合わせとして定義されます。

簡単に言えば、CORS を使用すると、サーバーはブラウザベースのリクエストを介して特定のリソースへのアクセスを許可する外部ドメインを指定できます。CORS ポリシーが正しく設定されていない場合、ブラウザは 同一オリジンポリシー（Same-Origin Policy） にフォールバックし、ウェブページを提供したオリジン以外のオリジンからのリソースへのアクセスをブロックします。

Drupal 11 での CORS の設定

Drupal 11 は services.yml ファイル、具体的には cors.config セクションで CORS 設定を管理します。デフォルトではこの設定は無効になっており、明示的に許可されない限りクロスオリジンリクエストはブロックされます。

JavaScript フロントエンドやモバイルアプリなどの外部クライアントに対して CORS を有効にするには、services.yml ファイルの設定を変更する必要があります。開発またはテスト目的のための緩い設定の例を次に示します：

cors.config:
    enabled: true
    allowedHeaders: ['x-csrf-token','authorization','content-type','accept','origin','x-requested-with', 'access-control-allow-origin','x-allowed-header','*']
    allowedMethods: ['*']
    allowedOrigins: ['*']
    exposedHeaders: false
    maxAge: false
    supportsCredentials: true

ローカル開発での services.local.yml の設定

ほとんどの Drupal ローカル開発環境では、services.local.yml という名前のファイルがあります。このファイルは、メインの services.yml の設定をオーバーライドすることを特に目的としています。したがって、services.local.yml に競合する設定や不完全な設定が存在する場合、services.yml に加えた変更は無視される可能性があります。

CORS 設定が正しく適用されるように、services.local.yml の設定を適宜コピーまたは変更してください。

設定後にキャッシュをクリアする

YAML 設定ファイルを更新したら、変更を適用するために Drupal のキャッシュをクリアします：

$ lando drush cr

YAML のインデントが重要

YAML のインデントには細心の注意を払ってください。設定の問題の一般的な原因となるためです。1つのスペースやタブの位置がずれているだけでも、設定が無視され、数時間の不要なデバッグにつながる可能性があります。変更が反映されない場合は、まずインデントを再確認してください。

Webform REST モジュールの使用

すべての設定が完了したら、REST を介してフォームの送信を開始できます。このプロセスでは、必要なヘッダーとペイロードとともに POST リクエスト を Webform REST エンドポイントに送信します。

エンドポイント

POST /webform_rest/submit

必要なヘッダー

Content-Type: application/json

例：Axios を使用したフォームの送信

JavaScript でフォームデータを送信するためのサンプル Axios リクエストを次に示します：

 const response = await axios.post('http://yoursite.lndo.site/webform_rest/submit', {
    "webform_id": "some_rest_form",
    "name": "Ivan Abramenko",
    "email": "levmyshkin89@gmail.com",
  }, {
    headers: {
    "Content-Type": 'application/json',
    },
  });

この例では Axios を使用して POST リクエストを実行する方法を示していますが、他の HTTP ライブラリやフレームワークを使用してリクエストを実行することもできます。

リクエストペイロードは、主に、対象のフォームのマシン名である webform_id と、登録されたフィールドで構成されます。

{
   "webform_id": "some_rest_form",
   "name": "Ivan Abramenko",
   "email": "levmyshkin89@gmail.com"
}

正常に送信された場合のレスポンスペイロードは、以下のフィールドで構成されます：

  • sid、記録された送信の一意の識別子
  • confirmation_url、送信の確認 URL
  • confirmation_message、確認メッセージ
  • confirmation_title、確認メッセージのタイトル
{
   "sid": "ae8c3bd4-91a2-5c17-a264-59c86157457b",
   "confirmation_type": "inline",
   "confirmation_url": "",
   "confirmation_message": "Just a confirmation message",
   "confirmation_title": "A confirmation title"
}

さらに、Webform 自体によって生成された検証メッセージにもアクセスできます。たとえば、必須フィールドが送信されない場合、以下のようなレスポンスを受け取ります：

{
   "message": "Submitted Data contains validation errors.",
   "error": {
       "email": "The email field is mandatory."
   }
}

API レスポンスの処理

API から返されたレスポンスデータを使用して、成功確認、検証エラー、送信の失敗などのフィードバックをプログラムによってユーザーに提供できます。これらのレスポンスを調整することで、ユーザーエクスペリエンスが向上し、操作プロセス中の明確さが確保されます。

フォームをフロントエンドフレームワークまたはモバイルアプリと統合する場合でも、API レスポンスを効果的に管理することが、スムーズで直感的なエクスペリエンスを提供する鍵となります。

まとめ

Drupal 11 用の Webform REST モジュール は、RESTful API を介してウェブフォームを操作するための強力で柔軟なソリューションを提供します。外部アプリケーションがフォームデータを送信・操作できるようにすることで、Drupal の統合機能を大幅に拡張し、デカップリング（分離）またはヘッドレスアプローチに依存する最新のウェブアーキテクチャに最適です。

この記事では、以下について説明しました：

  • Webform REST モジュールの紹介

  • 段階的なインストールと設定

  • 実践的な例を使用した API によるデータ送信方法

このガイドは フォームの送信に焦点を当てていますが、Webform REST モジュールはここでは取り上げなかった追加の操作もサポートしています。その内容は次のとおりです：

  • 既存の送信を更新する PATCH リクエスト

  • 送信データを取得したりフォームフィールドを一覧表示したりする GET リクエスト

  • 認証とアクセス制御のための追加のカスタマイズ

これらの高度な使用例は、今後のチュートリアルで説明します。