Drupal Meetup 梅田 #4 での発表時に使用したスライドです。

1. Webform の活用
スタジオ・ウミ 山中

2. ● Drupal 歴5年
● 最近はテーマ作成などフロントエンド中心
● モジュール作成したり顧客対応したりDrupalの保守したりもします
● 趣味はアニメを見たりゲームをしたりライブに行ったり楽器(クラリネット)を吹くこと
自己紹介- 山中 麻千子

3. 自己紹介- スタジオ・ウミについて
● Drupal での開発経験は10年以上
● ディレクション、要件定義、デザイン、開発、
保守運用、Drupal導入サポート等
● Web サイト: https://www.studio-umi.jp/
● Drupal Dawn: https://drupaldawn.jp/
○ 国内の Drupal サイトを集めたギャラリーサイト

4. ● Webform の特徴
● Webform の機能
● Webform の活用法
● デモ(時間があれば)
● Webform の事例紹介
内容

5. Webform の特徴

6. Webform の紹介・特徴
● Drupal の寄与モジュールで Drupal4 時代からある老舗モジュール
● その名の通りお問い合わせフォームなどの Webform を実装する
● 機能が多い
● 使用できる要素(フィールド)が豊富
● アクセス制限が細かく設定できる(D8)
● 送信データがWebサイト上での確認が可能・
任意のメールアドレスに送信可能
● フィールドの検証設定が可能

7. Webform の機能

8. 豊富な要素(Element)
テキストエリアや選択系フィールドやフィールドセットなどのHTMLのフォーム要素がある
のはもちろん、他にもこんなフィールドがあります。(一部抜粋)
● 規約と同意のチェックボックス
● レーティング
● HTML
● ファイルアップロード
● CAPTCHA認証
● Drupal の Entity 参照フィールド(Node やユーザーが)
● CodeMirror(コードがハイライト付きで書き込めるフィールド )

9. 送信結果確認
送信結果は Web 上で確認
(送信結果一覧上で閲覧したい項目だけを絞り込み可能)
CSV等でのダウンロードも可能
特定のアドレス宛にメール送信も可能
(メールの文面などは自由にカスタマイズできる)

10. 下記の項目の単位で役割・ユーザー・権限別にアクセス制御が可能
● Webform 全体
○ Webform の送信・送信結果の閲覧・編集・削除 ・Webformの管理
● Webform 単体
○ Webform の送信・送信結果の閲覧・編集・削除 ・Webformの管理
● Element 単位
○ 要素( Element )の表示と送信・送信結果の表示・更新
アクセス制限

11. ● 条件一覧
○ 空・入力済
○ チェック済・未チェック
○ 展開・圧縮
○ イコール・ノットイコール
○ パターン・パターンではない
○ 小なり・大なり(数値の比較)
● 状態一覧
○ 表示・非表示
○ 有効・無効
○ 必須・任意
○ チェック済・未チェック
検証機能
「条件」と「状態」の組み合わせによりフィールドごとに
「特定のフィールドにチェックが入っていれば表示する」などの条件設定が可能

12. その他細かい機能
● ウィザードとプログレスバー
● フォームのテンプレート化機能
● 最大送信回数・ユーザーごとの最大送信回数の設定
● フォーム有効化・無効化の期日予約機能
● プレビュー機能
● フォーム送信後ページの設定
● フォームごとに JS/CSS の設定が可能

13. Webform の活用法

14. アンケート機能
長いアンケートでもページ機能を使って、1画面上の
フィールド項目を抑えることができる
Webform の機能でチェックボックスやラジオボタンはも
ちろん、多段階評価(リッカート尺度など)のフィールドも設
定可能

15. eラーニング
テストや問題出しに使用
大問ごとにページ分け
小問の文章はHTMLフィールドで記述
問題の回答はラジオボタン、テキストフィールド、テキス
トエリア等で実装

16. イベント参加フォーム
セミナーや勉強会等のイベントの参加者の管理に使
用
Webform の機能で最大人数の設定やフォームの期
限の設定が可能
メールアドレスと名前のフィールドを作成し自動配信
メールで参加券として使用したり

17. コンテンツのレビュー・感想の送信
Webform Node モジュールをインストールしてコンテ
ンツはNodeで投稿
Webform のレーティング要素とテキストエリアで
フォーム作成

18. Webform を使えば
今紹介した機能すべて
コードを書かずに実現可能

19. デモ

20. Webform の事例紹介

21. BeDiet- http://www.bediet.jp
セミナー＆イベント情報ページ
http://www.bediet.jp/seminar
● セミナーやイベントの参加者の管理
● Webform で参加登録した人に自動配信したメールをイベント
の参加券として使用
● Webform の機能で定員設定、フォームの締切が設定可能

22. 大津赤十字看護専門学校 - https://www.otsu-sn.jrc.or.jp/
お問い合わせページ
https://www.otsu-sn.jrc.or.jp/contact
● いつもは通常のお問い合わせフォーム
● オープンキャンパスの応募時期にはお問い合わせの種類に「オープ
ンキャンパス」の項目が増える
● お問い合わせの種類の「オープンキャンパス」選ぶとオープンキャン
パスの日時が選択できるラジオボタンフィールドが出現
● フィールドの項目のアクセス制限・増減・調整は Webform の機能で
手動で対応

23. アンケートページ
(閉じてしまったためURL なし)
● Web サイトに関するアンケートに答えた人に対してAmazon
ギフト券をプレゼントするキャンペーン
● Amazon ギフト券の送付は手作業でメールで送信
● アンケートのフィールド項目をセクションごとにページで分割し
て表示
スタジオ・ウミ- http://www.studio-umi.jp/

24. ありがとうございました。