Webform 8.x-5.x の新機能を 9 つピックアップして紹介

こんにちは。プログラマの山中です。 今回は Drupal 8 版の Webform の気になる新機能を独断でピックアップして紹介する記事となります。

Drupal 7 の Webform 7.x-4.x に比べて Webform 8.x-5.x は機能が増え、できることがたくさん増えました。 機能が多すぎて Drupal の中で もうひとつ別の CMS を操作しているような感覚になるほどです。早速ご紹介していきましょう。

なお、 Drupal 7 版の Webform では 「フィールド(Field)」と呼んでいた要素が「エレメント(Element)」の一部の要素になっていますので、この記事でもそれに合わせて「エレメント」と呼んでいくことにします。

1. Webform という「エンティティ」

Webform 自体がエンティティ化されました。これにより、Node から完全に切り離されて別物として管理することができるようになりました。 なお、 Webform モジュールに同梱されている Webform Node モジュールを有効化すれば、これまで通り Node でも Webform を使用することができます。

2. ライブラリ・アドオン

ライブラリは Webform の UI を良くするための JavaScript のライブラリのことを指します。デフォルトの状態では外部の CDN で配信されている各ライブラリを読み込みに行っているのですが、自分の Drupal のライブラリのディレクトリに入れておくことがおすすめされているのでライブラリはダウンロードしておきましょう。 drush コマンドがセットアップされた環境で、ターミナルなどで drush webform-libraries-download コマンドを打てば Webform モジュールに入っている webform.libraries.make.yml の中身を読み込んで自動的にインストールしてくれます。

アドオンは Webform をより便利にしたり(Token や Clientside Validation等)、スパム対策をしたりする(Honeypot や CAPTCHA等)ようなモジュールやツール(CLI ツールなど)などの総称で、 Webform の機能の拡張パックといったところでしょうか。こちらは自分の手で選択して導入していく必要があります。

ちなみに、もともと Drupal 7 でも Webform を便利にするために拡張するモジュールはいくつか存在していましたが、Webform 8.x-5.x ではなんと、ご丁寧に管理画面上にアドオン一覧ページを用意してくれています。

アドオン一覧ページは下記にあります。

サイト構築 » ウェブフォーム » アドオン
パス: admin/structure/webform/addons

参考リンク:

• Webform Libraries | Drupal.org
• Webform Add-Ons | Drupal.org

エレメント関連

3. エレメントの設定の YML 化

Webform UI モジュールをインストールすれば従来の Webform と同じように管理画面上の GUI を使ってエレメントの作成・編集ができるのですが、 Webform 8.x-5.x では YML 形式でエレメントの情報が保存され、 また、 YML 形式でエレメントを作成・編集することができるようになりました。 もともと YML form で実装されていた機能ですが、ある時期に Webform 8.x-5.x に吸収合併のように取り込まれた機能です。(現在 YML form のページ では Webform を使用するようにと促してる)

テキストデータなのでコピーして別の Webform にペーストしてエレメントの移行をしたり、 エレメント全体をテキストファイルに保存してバックアップにする、なども気軽に行うことができちゃいますね。 YML はモジュールやテーマの設定ファイルやルーティング用のファイルにも使われてますので、エンジニアもとっつきやすいんじゃないでしょうか？

4. Form API が使える

YML 設定フォームで設定できる項目は Drupal の Form API の項目をそのまま使用できるようになりました。 Form API はモジュール内の PHP コードでフォームを作成するときに使用する API です。

参考リンク:

• Drupal 8 Form API 概観 | Drupal
• Introduction to Form API | Drupal.org

書き方は簡単で、PHP 上での書き方と比べると下記のような形になります。

Webform で Form API を使った PHP サンプル

<?php
$form['title'] = array(
  '#type' => 'textfield', 
  '#title' => t('Name'), 
  '#default_value' => $user->name, 
  '#size' => 60, 
  '#maxlength' => 128, 
  '#required' => TRUE,
);

Webform で Form API を使った YML サンプル

name:
  '#type': textfield
  '#title': 'Name'
  '#default_value': '[current-user:account-name]'
  '#size': '60'
  '#maxlength': '128'
  '#required': true

5. エレメントの種類

これまでの Webform で使用できたフィールドに加えて、たくさんのエレメントが使用できるようになりました。 今回追加され、デフォルトで使用可能なエレメントは HTML5 のフォーム要素(Email、日付、時間等)、色、エンティティリファレンス、住所(デフォルトは海外仕様)、星によるレート、 Flexbox レイアウト(コンテナなどの一種)、 リッカート尺度(非常に同意できる、どちらかと言えば同意できる、どちらともいえない、どちらかと言えば同意できない、まったく同意できない...の選択肢から選ぶ、心理的な調査のあれです) ...など Webform をいろんな用途に使用できそうなエレメントがたくさん増えました。

すべてのエレメントを確認したい場合は実際に Webform モジュールをさわってみるか、下記 Web ページをご参照ください。

参考リンク:

• Webform Elements | Drupal.org

6. 管理画面上から JavaScript/CSS が設定できる

各 Webform ごとに JavaScript や CSS を設定することができます。 テーマファイルはさわらずに、自分の手である程度のスタイル調整はしたいという要望があればこれで安心ですね。

7. 個別にアクセス制限がかけられる

Webform ごとにアクセス制限がかけられるだけでも驚きなんですが、エレメントごとにアクセス制限を書けることもできます。 それぞれ役割ごとに権限設定できるのはもちろんのこと、ユーザーごとに設定することも可能です。

8. 選択リスト・チェックボックス・ラジオボタンなどのデータのテンプレート

選択リスト(セレクトボックス)・チェックボックス・ラジオボタンなどの複数の項目から選択するタイプのエレメントのデータは、性別や都道府県のような決まったものを使用することがありますよね。 この決まったデータをテンプレートとして使用したり、作成・保存したりすることができます。

Webform 7.x-4.x にもこっそり(?)テンプレートの機能はありましたが、管理画面上からテンプレートの作成が作成できなくて、テンプレートを追加するにはカスタムモジュールを作る必要がありました。 Webform 8.x-5.x からは管理画面上からテンプレートが作成できますのでとても使いやすくなりました。

このテンプレートの確認・作成については下記のページから行えます。

サイト構築 » ウェブフォーム » 設定 » オプション
パス: admin/structure/webform/settings/options/manage

なお、デフォルトで曜日、国名、性別、Yes/No、言語、タイムゾーン、雇用形態...などなど全部で30個ほどのテンプレートが用意されています。

9. テスト機能

Webform の送信・受信後の確認などのテスト用に Webform の投稿データを自動生成してくれます。 Webform のページを開いて、「テスト」タブをクリックすると入力フォームに適当な値が入力された状態の Webform を読み込みます。

ここで入力される値はエレメントごとに決まっているのですが、 この値は Webform 全般の設定ページの 「TEST の設定」 で編集することができます。

サイト構築 » ウェブフォーム » 設定 » オプション
パス: admin/structure/webform/settings

おわりに

いかがでしたでしょうか？この他にも「Webform が書き込み途中でユーザーがページを離れるときにポップアップで『このページを離れても良いのか？』と警告するオプション」が付けられたり、E-mail 送信設定が更に便利になっていたり(CC や BCC を UI で選択できるようになってます) 、細かい部分でも新しい機能が付け加えられています。 2017年7月現在、まだ Beta 版ではありますが Drupal 7 時代の Webform に比べより使いやすくなっていますので、(バグなどに注意しつつも)ぜひ使ってみてください。