PR
この連載が書籍になりました! Drupal 8初の日本語解説書『Drupal 8 スタートブック』好評発売中です。

【Drupal 8入門】ブロックレイアウトとコンタクトフォーム作成

2016年9月8日(木)
ANNAI株式会社

今回はコンタクトフォーム(お問い合わせフォーム)を作成し、ブロックを配置しながらサイトを仕上げていきます。ブロックの配置が終わると、サイトはTheming(デザイン適用)を除いて機能的にはひとまず完成となります。ブロックによるレイアウトとレイアウトに関わる便利な拡張モジュールをいくつかご紹介しましょう。

コンタクトフォームの作成

Drupalは標準でシンプルなコンタクトフォームを実装しています。複数のフォームを作成することはもちろん、独自のフィールドを設定することも可能で、目的に合わせたフォームを設置できます。今回は標準のコンタクトフォームをサイトのお問い合わせフォームとして利用します。


1.ログアウトした状態で「/contact」にアクセスします。

image alt text


2.以下の「ウェブサイトフィードバック」のページは、Drupalインストール時にすでに作成されているコンタクトフォームです。今回はこのフォームの名称を「お問い合わせ」に変更し、「メインナビゲーション」に登録します。

image alt text


3.「管理者メニュー」から 「サイト構築」をクリックして「サイト構築」画面を開き、「メニュー」をクリックします。「メニュー」画面の「メインナビゲーション」の「メニューの編集」ボタンをクリックして、「リンクの追加」ボタンから新しく「/contact」を「お問い合わせ」としてメニューに登録し、以下の順番に並び替えます。

image alt text


4.「お問い合わせ」が「メインナビゲーション」に表示されました。

image alt text


5.次に「ウェブサイトフィードバック」というフォームの名称を「お問い合わせ」に変更します。

「管理メニュー」>「サイト構築」>「コンタクトフォーム」をクリックします。

image alt text


6.「コンタクトフォーム」画面で、「ウェブサイトフィードバック」の「編集」をクリックします。

image alt text


7.「コンタクトフォームを編集」画面で「ラベル」に「お問い合わせ」、「受信者」に問い合わせを受信するメールアドレスを入力して「保存」ボタンをクリックします。

image alt text


8.フォームのタイトルが「お問い合わせ」に変更されました。

image alt text

※今回はDrupalに標準のコンタクトフォームを利用しましたが、コンタクトフォームを新規に作成することも可能です。コンテンツタイプを作成した時のように、任意の「フィールド」を追加し独自のフォームを作成することもできます。

「Contact strage」モジュールを使うと、コアのContactモジュールの機能が拡張され、問い合わせフォームの回答をentityとして保存できます。entityとして保存することで、回答データをDrupal上で再利用できるようになるなどさまざまなメリットがあります。

また、Drupal 8でより高度な問い合わせフォームを作りたい場合、現時点では「YAML Form」モジュールが有望な選択肢となるでしょう。

ブロックレイアウトの基礎知識

これまで、ブロックレイアウトについて詳しくは触れませんでしたが、Viewsで作成したブロックを配置するなど基本的なブロックの操作は行ってきました。そのためDrupalのブロックレイアウトについてはある程度は理解できているかもしれません。今回はDrupalに標準のブロックレイアウトを使って、サイト上のさまざまな場所に要素を配置していきます。 Drupalにはブロックを利用する以外にも、拡張モジュールを利用したレイアウト方法がいくつかあります。これらの方法もご紹介しましょう。

ブロックリージョンとテーマの関係

Drupalにおいて、「ブロック」は「ブロックリージョン」と呼ばれる領域に配置できます。この「ブロックリージョン」のレイアウトは「テーマ」によって異なります。まずは、今サイトにインストールされている「テーマ」の「ブロックリージョン」を確認してみましょう。


1,「管理メニュー」>「サイト構築」>「ブロックレイアウト」から「ブロックリージョンを仮表示する」をクリックします。この時、「Paxton」が選択されているのを確認してください。

image alt text


2.「Paxton」テーマの「ブロックリージョン」が表示されました。黄色い領域が「ブロックリージョン」です。「ブロックリージョンの表示を終了する」をクリックします。

image alt text


3.次に「Bartik」テーマをクリックして「ブロックリージョンを仮表示する」をクリックします。

image alt text


4.「Bartik」テーマのリージョンが表示されました。

image alt text


2つのテーマを比べてみると一目瞭然ですが、明らかに「ブロックリージョン」の配置が異なります。

ここから分かるように、「ブロックリージョン」のレイアウトはテーマ毎に異なることを理解しておいてください。

image alt text


これから配置するブロックの確認

「ブロック」を配置する前に各リージョンに配置するブロックの要件を確認します。各ブロックの配置リージョンと表示ページは以下の通りです。表に記載がないリージョンについては、今回はブロックを配置しません。

リージョン名 ブロック名 表示ページ ブロックタイトルの表示
ヘッダー サイトブランディング すべてのページ 表示しない
Primary Menu メインナビゲーション すべてのページ 表示しない
Page Title ページのタイトル すべてのページ 表示しない
パンくず パンくず トップページ以外 表示しない
content 新着情報: 新着情報ブロック(トップ) トップページ 表示しない
製品紹介: 製品紹介ブロック(トップ) トップページ 表示しない
メインページコンテンツ すべてのページ 表示しない
Left Sidebar 製品検索 製品紹介(/product) 表示する
外部設置フォーム: product-page_1 製品紹介(/product) 表示しない
Right Sidebar 当社のご紹介 製品紹介(/product)以外 表示する
アクセス 製品紹介(/product)以外 表示する
Fooder Bottom Powered by Drupal すべてのページ 表示しない

ANNAIは、2009年からDrupal専門のWebシステム開発会社として、世界規模で展開するグローバル企業や大学・自治体を中心に数多くのWebソリューションを提供。
CoreやModuleのコントリビューターなど、Drupalエキスパートが多数在籍。国内ユーザーコミュニティへも積極的にコミットし、定期的なセミナーの等の開催を通じて、オープンソース技術の普及や海外コミュニティとの緊密な連携を図っている。
Webシステムの企画・開発〜デザイン、クラウド運用までをワンストップで提供する他、Drupalのコーディングを評価する"Audit業務"や最適なモジュールの調査・選定等、幅広いコンサルティングを行っている。Drupalアソシエーション公式パートナー。
https://annai.co.jp

連載バックナンバー

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています