DrupalのWebサイト構築

これまでの記事(#C12から#C22)では、Drupalを使ったWebサイト構築に必要な各機能の用途や設定について解説してきました。しかし、個別の機能説明だけでは、具体的にどのようにサイトを構築すればよいか分かりにくい場合があります。そこで、これらの内容を一度まとめ、全体像を整理してみたいと思います。

『目次』

  1. Top --- Drupal機能について書いた記事をまとめています。Webサイトを作るには、Drupalの構造理解からという必然について説明しています。
  2. #01 Article creation. --- 記事作成をするために必要なプロセスをまとめています。
  3. #02 Creating a category list. --- 記事を探すためのカテゴリーについてまとめています。
  4. #03 Creating a navigation menu. --- サイト内巡回の基点になるナビゲーションメニューについて。
  5. #04 Creating a Layout. --- ページ構成のレイアウトを自由に設定できるレイアウトビルダーについて。
  6. #05 Contact form. --- 問い合わせに使用するコンタクトフォームについて。

ページ下部の簡易ナビゲーションバーの番号をクリックすると記事内を移動出来ます。記事の読み返しなどにご利用ください。

Concept of Drupal.

Drupalで記事やページを作成し、ナビゲーションメニューやサイドメニュー、フッター、リストページなどのWebサイトに必要な機能を構築・レイアウトするためには、Drupal Coreに用意されている各機能の基本設定を行う必要があります。これらの機能は相互に関連しているため、複数の機能を組み合わせて設定しなければ、目的とする形でWebサイトを構築することはできません。

このように、複数の機能を連携させる必要があるのは、Drupalの概念とルールによるものです。これらを理解し、各機能の用途と設定を把握することで、目的に沿ったWebサイトを構築できるようになります。

Beginner's Guide.

この記事を書いている背景には、Drupalに限らず、プログラム関連のチュートリアルが機能面からの説明に偏りがちで、初めて利用する方には何から手をつければよいか理解しにくいという問題があります。機能面のチュートリアルは、実際に使用してから読むことで理解できますが、使用前に読んでも何をすればよいか分からず、利用を諦めてしまうケースも多いでしょう。そこで、具体的な使用例から逆引きするチュートリアルがあれば、初めて利用する方でも理解しやすいのではないかと考えています。

例えば、Drupalで記事やページを作成し、カテゴリー別にリストページを作る手順を機能ごとに説明すると、以下のようになります。

  1. コンテンツメニュー: 記事やページを作成できます。
  2. タクソノミー: ボキャブラリーを作成し、タームを設定します。
  3. コンテンツタイプの設定: タクソノミーをフィールドに設定します。
  4. ビュー: 条件を指定して記事やページをリスト化し、ページやブロックで公開できます。

しかし、このような各機能の説明だけでは、具体的な手順を理解するのは難しいかもしれません。

目的とするページ作成やサイト構築に必要な機能や設定を整理しDrupalでWebサイト構築をする説明の例

具体的なサイト構築の例

例えば、料理のブログを始めたいと考えた場合、以下のような手順になります。

  1. レシピの記事を書く: 中華、洋食、和食など、さまざまなレシピの記事を作成します。
  2. カテゴリー別にリストページを作成する: 料理のカテゴリーごとに記事をまとめたリストページを作成します。
  3. ナビゲーションメニューに配置する: 作成したリストページを階層付きでナビゲーションメニューに配置します。

これをDrupalでゼロから行う場合、以下の手順となります。

  1. コンテンツタイプ「レシピ」を作成する。
  2. タクソノミーで「レシピ」というボキャブラリーを作成し、「中華」「洋食」「和食」などのタームを設定する。
  3. コンテンツタイプのフィールドにタクソノミーを設定し、ボキャブラリーを「レシピ」とする。
  4. 作成した「レシピ」のコンテンツタイプで記事を書く。
  5. カテゴリー別のリストを作成するためにビューを設定する。
    •    表示方法: タイトル、写真、記事の要約、投稿日、レシピのタームをグリッド形式で1カラムにリスト化。
    •    フィルタリング: 「レシピ」のボキャブラリーで行う。
    •    表示順序: 新しい順。
    •    1ページに10記事を表示。
  6. ビューで作成したリストページをメニューに登録する。
        •    タイトルにSVGを使う場合、テーマのタイトル設定を行う。
  7. ブロックレイアウトで表示位置を確認する。

しかし、このような解説はあまり見かけません。

Googleなどで検索すると、Drupalの各機能ごとの説明は非常に丁寧に解説されていますが、上記のブログを作成するために、コンテンツタイプにタクソノミーを割り当て、ビューでフィルタリングしてリストページを作成するという設定の流れを、Drupalの知識がない方が想像するのは難しいのではないかと考えています。

1. 背景

Drupalには各機能(コンテンツタイプ、タクソノミー、ビューなど)の説明が非常に丁寧に提供されています。これらの情報は、経験者にとっては有益ですが、初心者には難解に感じられる場合があります。

2. 問題点

具体的な例として、ブログサイトを作成する際の以下の流れがあります:
    •    コンテンツタイプにタクソノミーを割り当てる
    •    ビューでフィルタリングしてリストページを作成する

この一連の設定を初心者が直感的に理解するのは難しいのではないかと考えられます。

3. 解決策

このギャップを埋めるためには、「構築したい目的」から逆引きで解説を行うアプローチが有効です。
具体的な目標に基づき、必要な機能と設定を段階的に説明することで、初めてDrupalを触れる方や個人利用者でも理解しやすくなります。

4. 記事の目的

本サイトの記事は、このような逆引きアプローチを用いて、Drupal初心者が具体的な構築目標を達成できるようにガイドすることを目的としています。

Article purpose.

私はDrupalを使い始めたばかりで知識が不足しており、この記事の内容も分かりにくい部分があるかもしれません。それでも、初めてDrupalを利用する方が、単にインストールだけで終わらず、実際にサイトを構築し、Drupalを使ったサイト運営にたどり着けるようなガイドを提供したいと考えています。

Drupalは主に企業で利用されることが多く、サイト構築においてDrupalを触るのは開発者やベンダーの方々が中心です。そのため、個人ユーザーを前提とした初歩的なチュートリアルの必要性が低く、結果として初心者向けのチュートリアルがほとんど存在しないのではないかと考えています。

私自身、Drupalを使い始めて情報を調べる中で、インストールまでの手順に関する情報は豊富にある一方、実際のサイト構築や運営に関する情報が非常に少ないことに気づきました。また、Drupalを使って個人でサイト運営をしている人が少ないと感じています。この記事は、そうした課題に対する解決策を提示するためのものです。

Introduction.

当サイトは、DrupalにBootstrap5のテーマをインストールし、用意されている基本設定を活用して構築しています。非常にシンプルな構成で作られていますが、それでもサイト構築の過程では多くの設定を行いました。これらの設定はサイト構築の基盤となるものであり、これらを理解しないとサイト構築は成立しません。

私がよく口にする「Drupalの概念とルールの理解」とは、このことを指します。Drupalが初心者に向かないと言われる理由の一つとして、サイト構築においてDrupal Coreに備わっている機能の用途と設定を理解する必要があることが挙げられます。この設定の必要性を理解することが、Drupalを使いこなすための第一歩です。

この記事が、これからDrupalを使おうとしている方や、インストールは済ませたもののその先の利用に踏み出せていない方にとって、有益な参考資料となれば幸いです。

Overview of settings.

当サイトを構築する上で、何をおこなっているかを書き出してみます。

1.Article creation.

記事を作成する為に何をおこなったかを書き出してみます。

1. 記事やページの作成

    1.    コンテンツタイプを選択して作成
       •    「Home > 管理 > コンテンツ」で、コンテンツタイプを選択し、記事またはページを作成します。
       •    コンテンツタイプとは、記事やページを作成する際のテンプレートです。
    2.    コンテンツタイプの設定
       •    設定は「Home > 管理 > サイト構築 > コンテンツタイプ」で行います。
       •    ページで公開される要素(タイトル、本文、画像など)は「フィールド」と呼ばれ、この設定も同じ場所で行います。

2. ページの分類とリスト化

    1.    タクソノミーの設定
       •    「Home > 管理 > サイト構築 > タクソノミー」で、ボキャブラリーとタームを設定します。
       •    タクソノミーを使用することで、ページをカテゴリー分けし、リスト化が可能になります。
    2.    タクソノミーをフィールドに設定
       •    「Home > 管理 > サイト構築 > コンテンツタイプ」で、タクソノミーをフィールドに追加します。
    3.    記事やページの作成と分類
       •    必要な設定を行った後、「Home > 管理 > コンテンツ」で記事やページを作成し、カテゴリー分けを行います。

3. 設定の重要性

Drupalで記事を書く基本は「Home > 管理 > コンテンツ」にありますが、記事やページを目的に応じて作成するためには、以下の設定が必要です:
       •    コンテンツタイプの設定(記事テンプレートの作成)
       •    タクソノミーの設定(記事の分類とリスト化)

これにより、初期設定の記事のフォーマットから独自の記事のフォーマットに変更し、目的に応じた記事を作成することが可能になります。また、記事作成後に仕分けやリスト化を行うため、タクソノミーの設定が必須です。

関連する記事

#C12 Drupal Admin Console.

•    DrupalのAdminメニューの概要を説明。
•    必要な設定を行う場所を理解するためのガイド。

#C13 Drupal > Content.

•    コンテンツメニューの概要を説明。
•    記事を書くための設定や基本的な使い方を解説。

#C14 Drupal > Structure.

•    サイト構築メニューの概要を説明。
•    コンテンツタイプの設定を中心に、サイト構築メニューの構成を解説。

#C15 Content and Structure.

•    当サイトで公開している記事を例に、設定項目を具体的に説明。

#C16 Basics of creating page.

•    記事を作成するための手順を要約して解説。

2.Creating a category list.

書いた記事をまとめカテゴリーリストを作成するために何をおこなったかを書き出してみます。

記事の数が増えてくると、カテゴリー分けをして整理する必要があります。この作業を効率的に行うために、Drupalではビュー機能を使用します。
•    ビュー機能の概要:
    •    非常に柔軟で自由度の高い機能です。
    •    全体像を理解するのは難しい部分もありますが、シンプルな設定に絞れば比較的容易に活用できます。
•    手順のポイント:
    1.    記事にタクソノミーを設定する。
    2.    タクソノミーを基準にビュー機能を使って記事を整理する。

これにより、カテゴリーリストページのような整理された形で記事をまとめることが可能になります。ビュー機能を使用するためには、事前にタクソノミーを設定し、それを記事に割り振る必要があります。この記事では、それらの手順についてもまとめています。

関連する記事

#C18 Taxonomy-1

•    Drupalのタクソノミーの基本について解説した記事です。

#C19 Taxonomy-2

•    タクソノミーの具体的な使用例として、当サイトでのタクソノミーの設定や利用方法を紹介しています。

#C20 Views-1 Page

•    ビューを使って記事をまとめる基準としてタクソノミーを指定する方法を解説。
•    タクソノミーを設定し、ビュー機能を用いてカテゴリーリストページを作成する手順を詳しく説明しています。

#C21 Views-2 Block

•    ビューを使ってページだけでなく、ブロックを作成する方法を紹介。
•    タクソノミーで設定した関連キーワードを活用し、関連記事をまとめたブロックを作成し、各記事に配置する具体例を解説しています。

3.Creating a navigation menu.

カテゴリーリストを配置するメニューを作成するために何をおこなったかを書き出してみます。

1.メニューの作成

    1.    メニューの種類
       •    ナビゲーションメニュー、サイドメニュー、フッターはデフォルトのものを使用しても問題ありませんが、必要に応じて新しいメニューを作成します。
    2.    メニューの設定場所
       •    ナビゲーションメニューやサイドメニュー、フッターは「Home > 管理 > コンテンツ > ブロック」で作成します。
    3.    ブロックの設定
       •    ブロックもコンテンツと同様に、表示するフィールドの設定が必要です。
       •    フィールドの設定は「Home > 管理 > サイト構築 > ブロックタイプ」で行います。

2. ナビゲーションメニューのリンク配置

    1.    メニューへのリンク追加
       •    記事やカテゴリーリストの作成が完了したら、ナビゲーションメニューにリンクを追加します。これにより、サイト内を巡回しやすい構成が作れます。
    2.    ブロックとしてメニューを作成
       •    過去に作成した記事に記載したメニューの作成はコンテンツブロックを使用して行っています。

3. メニューの配置

    1.    ブロックレイアウトで配置
       •    作成したナビゲーションメニューやサイドメニュー、フッターを、Drupalの「ブロックレイアウト」機能を使ってサイト内に配置します。
       •    記事の内容や言語ごとにメニューの配置を自由に変更可能です。
    2.    必要なメニュー項目を配置
       •    記事や単独ページに必要なメニュー項目を配置し、サイト全体をより使いやすい構造にします。

関連する記事

#C13 Drupal > Content.

•    コンテンツメニューの概要説明です。
•    記事の作成だけでなく、ブロックの作成もこのメニューで行います。
•    (注)メニュー項目の作成については、コンテンツ > ブロックで行う内容を補足として記載しています。

#C22 Block Layout

•    ブロックレイアウト機能についてまとめた記事です。
•    ナビゲーションメニュー、サイドメニュー、フッターなどのメニュー配置の設定方法を解説しています。
•    記事に配置するパンくずリストや関連記事のブロックを、記事内容に応じて自由にカスタマイズする手順も含まれています。

4.Creating a Layout.

サイトのレイアウトを決め各機能の配置をするために何をおこなったかを書き出してみます。

1.    基本的な配置
    •    サイトレイアウト(ナビゲーションメニュー、サイドメニュー、フッター)の配置は、以下の手順で設定します:
「Home > 管理 > サイト構築 > ブロックレイアウト」
2.    条件に応じたメニュー変更
    •    記事内容やカテゴリーに応じてメニューを動的に変化させるには、以下の設定が必要です:
    •    言語
    •    コンテンツタイプ
    •    タクソノミー
    •    URLエイリアスのルール化
3.    レイアウトの公開準備
    •    これまで作成した記事やカテゴリーリストページに対応するメニュー項目を追加し、サイトとして公開するためのレイアウト設定を行います。
    •    ブロックレイアウト機能を使用することで、条件指定に基づく表示・非表示の設定が可能になります。言語やタクソノミー、URLエイリアスを組み合わせることで、柔軟なサイト構成を実現します。

関連する記事

#C22 Block Layout

ナビゲーションメニュー、サイドメニュー、フッターなどのメニュー配置について解説。さらに、記事に合わせたパンくずリストや関連記事のブロック設定についてもまとめています。

5.Contact form.

コンタクトフォームを作成し配置をするために何をおこなったかを書き出してみます。

1. 基本設定

    1.    デフォルトのフォームを活用
       •    Drupalのデフォルト機能として提供されているコンタクトフォームを使用します。
       •    必要に応じて補足説明を追加します。
    2.    補足文の追加手順
       •    「Home > 管理 > コンテンツ > ブロック」でブロックを作成。
       •    「Home > 管理 > サイト構築 > ブロックレイアウト」で配置。

2. スパム対策

    1.    Google reCaptchaの設定
       •    コンフィギュレーションエラーが発生した場合、原因の特定と対処方法をまとめています。
    2.    セキュリティの強化
       •    Botによるスパムやウイルス送信のリスクを軽減するために、Google reCaptchaを設定します。

関連する記事

#C08 Contact Form and SES.

•    Google reCaptchaの設定方法を含むコンタクトフォームの設定ガイド。
•    メール設定ミスによるエラーの原因究明とAWS SESの設定方法も詳細に説明。
•    コンテンツが多いため、記事が長くなっていますが、Drupalでのコンタクトフォーム設置に必要な内容が網羅されています。

#C13 Drupal > Content.

•    コンテンツメニューの概要を解説。記事作成だけでなく、メニュー項目やブロックの作成手順も含まれています。

#C22 Block Layout

•    ブロックレイアウト機能の詳細解説。メニュー配置、パンくずリスト、関連記事ブロックの設定方法を中心にまとめています。

Conclude.

記事の目的

今回の記事では、Drupalを使用して記事を作成し、それを整理・まとめ、Webサイトとして構成して公開するために必要な機能や設定についてまとめています。私自身、Drupalを使い始めて間もなく、十分な知識を持ち合わせていませんが、試行錯誤しながらWebサイトを構築し、公開しています。

Drupalの難しさと可能性

Drupalは「初学者には敷居が高い」と言われることが多く、この意見には確かに一理あります。しかし、WordPressなどの他のCMSに比べて基本設定の必要があるという理由だけで、単に個人がDrupalを使うのは難しいと言われるのは正しいとは思いません。実際、Drupalを活用することで、個人でも柔軟で高度なWebサイトを構築することが可能です。

初学者が感じる課題

Drupalが初心者にとって難しいとされる主な理由の一つは、各機能に触れるきっかけを見つけにくいことにあると考えています。たとえば、以下のようなケースが挙げられます:
    •    記事を書いてタグを追加し、それを基に記事を整理する。
    •    タグを使って記事をリスト化し、リストページをカスタマイズしたデザインで作成する。

これらの操作を行う方法が明確でない場合、次のような状況に陥ることがあります:
    1.    Drupalの各機能に触れる機会が得られない。
    2.    実際に機能を試すことができず、チュートリアルを見ても理解できない。
    3.    サイト構築が停滞してしまう。

記事の目指すもの

このような課題を解消するために、初心者が「きっかけ」を見つけられるような記事を提供したいと考えています。Drupalを使い始めた方が、どの機能をどのように使えばよいのかを理解しやすいガイドとなる記事を作成することで、Drupalの可能性をより多くの人に伝えたいと思います。

CivicThemeとの出会い

私が初めてDrupalを使ったのは2024年7月、MacBookにローカル環境を構築してDrupalをインストールしたときでした。理解しやすいテーマを探した結果、選んだのは「CivicTheme」です。CivicThemeは、オーストラリアのサルサデジタル社が開発したテーマで、大学や教育機関、さらにオーストラリアやアメリカの政府機関で実際に使用されています。

CivicThemeの特徴

ディストリビューションに近い発想
•    CivicThemeはDrupalの「テーマ」でありながら、ディストリビューションに近い設計がされています。これにより、Webサイト構築の手間が大幅に削減されています。

発展版のGovCMS
•    政府機関向けの「GovCMS」という拡張版も用意されており、CivicThemeは公共機関や大企業での利用を想定した非常に厳密なルールに基づいて設計されています。

使用例
•    NASAの公式WebサイトもCivicThemeを使用して構築されています。これにより、Drupalが公共性の高い大規模なWebサイトに採用される理由が分かりやすく示されています。

CivicThemeを使ったDrupalの学習

CivicThemeは、Drupalの概念やルールを深く理解しなくてもWebサイトの構築を進められる特徴があります。テーマをインストールするだけで、Drupalの機能を設定しなくてもサイトが完成する仕組みが整っています。この点で、CivicThemeはWordPressのテーマに似た発想を取り入れており、初心者でもスムーズに利用できます。

drupal.org >  Civic Theme

CivicThemeを使うことで、DrupalのAdminコンソールに触れる機会が増え、自然とその理解が進むため、初心者にとっても実践的な学習手段となります。

Xserverでの公開

私自身、すでにWordPressを利用してWebサイトを構築・公開しており、現在はXserverのビジネススタンダードを利用しています。この環境にDrupalをインストールし、CivicThemeを適用してWebサイトを公開しています。

Xserverビジネススタンダードの特徴と課題

コストパフォーマンス
•    価格設定が良心的で、リーズナブルに利用可能です。

共用サーバーの制限
1.    MariaDBのバージョン制約
   •    現在のMariaDB 10.5.xではDrupal 11.xのインストールがサポートされていません。
2.    Node.jsのバージョン制約
   •    利用可能なNode.jsが17.xまでであり、CivicThemeが推奨するサブテーマ機能や、Figmaを利用したデザインのフィードバック機能(Node.js 18.xが必要)が使用できません。

これらの制限により、CivicThemeの一部の機能を活用することが難しい状況にあります。現在、CivicThemeの使用を一時保留し、次のステップを検討しています。

Xserver Business

CivicThemeの魅力と課題

CivicThemeは、これからDrupalを利用してみたいと考えている方におすすめのテーマです。しかし、その解説はすべて英文で提供されており、インストールには以下のような技術的なハードルがあります:
•    パッチを適用する必要がある。
•    安定版(Stable)ではなく、開発版(Dev)のモジュールを使用しているため、composer.jsonの設定を書き換える必要がある。

※ 2024年9月時点CivicTheme 1.8x時点の状況です。2024年12月に1.9xがリリースされましたがパッチは必要です。

これらの理由から、初期のインストールは敷居が高く感じられるかもしれません。しかし、インストールが完了し実際に使用してみると、スケーリングや膨大な情報の整理機能など、Drupalの利点を存分に体感できる優れたテーマであることがわかります。私自身も機会があれば再度利用し、このテーマでWebサイトを構築したいと考えています。

Bootstrap5テーマへの移行

CivicThemeを使用するために必要なインフラの整備を踏まえ、当サイトでは別の選択肢としてBootstrap5のテーマを採用しました。このテーマは必要最低限の設定のみで使用できますが、デザインを含め、目的に応じたWebサイトを構築するにはさまざまなカスタマイズが必要です。

私は、このテーマを利用して行った設定をまとめ、Drupalを使ったWebサイト構築の過程を記事にしています。この記録が、同じようにDrupalを利用したい方にとって参考になれば幸いです。

Drupal初心者へのメッセージ

私がDrupalに触れ、その利便性を実感するきっかけとなったのはCivicThemeでした。この経験を基に、Drupalを利用したいと考えているものの、何から始めればよいかわからない方や、サイト構築途中で挫折してしまった方が一歩先に進むための「きっかけ」となる記事を作成したいと考えています。

Next article.
Short break

Drupalの機能についてのルールや概念の記事を書いて来ましたが一旦リセットして次の展開を考えてみます。頭の切り替えにDrupalの更新やモジュールの更新状況をまとめています。

Last update
Contributor
S.Takeda
Article

Powered by Drupal 11.4.4 and Bootstrap5 4.0.8

Published AWS Jamstack by Drupal