#D22 Webサイト構築の概要

DrupalでWEBサイトを構築

DrupalでCivicThemeを使いWEBサイトを構築していく記事をまとめていきます。当WEBサイトを題材に記事を書いていくのですが、実際にはすでに構築されていて、現状様子を見ながら記事を追加したり、機能の追加など少しずつ手直しをしている状況ですので、記事との内容のギャップが出てしまうかもしれません。

WEBサイトを構築していく記事を書くとなると、WEBサイトを構築するDrupalの機能面の説明や、構成はどう行ったかの説明、構築順序や、公開する情報をまとめる概念的な説明など、内容が散見しやすく、どこまでを記事にまとめるかと考えた場合、見てくれた方が書かれた記事をどう理解し参考となるかを考える必要があります。

当WEBサイトの目的の一つが、私自身がDrupalを使いながら習得する事があり、基本的に用意されたAdmin Menu内で出来る範囲を基本として使い、WEBサイトを構築し運用していく事があります。必要あらば、コードを書きカスタマイズする事も考えていますが、これはまだ先の話になります。

記事を書くにあたって

記事の趣旨としては、プログラミングの知識を意識せずWEBサイトを作る選択種として、CMSの利用を考えていて、一つの選択種としてDrupalに興味があるような方がご覧になった場合の参考となるような記事にしていければと考えています。知識のあるエンジニアの方でも知識のない方でも参考になれば幸いです。

私自身が無理をして、使い方のチュートリアル的な記事内容にするのではなく、実際にWEBサイトを構築していく過程で選択した機能や、それを選択するために得た知識など、実際にDrupalでWEBサイトを構築する際に生ずる、疑問や問題点、解決策、解決すると大したことではないが、知らないと進まない問題などをまとめていければと考えています。

内容が漠然としていますが、まず当WEBサイトの構成を簡単にまとめてみます。この構成を整理しないと、以降、どの部分を、どう構成しているかの説明が、ご覧になった方に伝わり難いのではと考えています。

簡単な構成図を書くと以下のような形になっています。

※長いコードデータになってしまうのでアコーディオンメニューにまとめています。

当サイトの構成

https://drupal.hooked-on01.comの構成
|- [1]Top
|
|- [2]Drupal
|
|---- [2.1]全ての記事
|
|-------- [2.1.1]実際の記事
|
|---- [2.2]環境構築
|
|-------- [2.2.1]実際の記事
|
|---- [2.3]Civic Themeの記事
|
|-------- [2.3.1]実際の記事
|
|---- [2.4]Word Pressの記事
|
|-------- [2.4.1]実際の記事
|
|---- [2.5]雑感
|
|-------- [2.5.1]実際の記事
|
|- [3]LifeStyle
|
|---- [3.1]全ての記事
|
|-------- [3.1.1]実際の記事
|
|---- [3.2]古着の記事
|
|-------- [3.2.1]実際の記事
|
|---- [3.3]Fashionの記事
|
|-------- [3.3.1]実際の記事
|
|---- [3.4]時計の記事
|
|-------- [3.4.1]実際の記事
|
|---- [3.5]写真に関する記事
|
|-------- [3.5.1]実際の記事
|
|- [4]Recommend
|
|---- [4.1]実際の記事
|
|- [5]Search
|
|- [6]Contact

非常にオーソドックスなWEBサイトの構成としています。

|- [1]Top
|
|- [2]Drupal
|
|---- [2.1]全ての記事
|
|-------- [2.1.1]実際の記事
|
|---- [2.2]環境構築
|
|-------- [2.2.1]実際の記事

と、階層で言えば3階層で構成されています。ページの構成は実際には2階層ですが別項で説明するメニュー構成を説明しないとわかり難くなるので3階層としています。

[2]Drupal = [2.1] 全ての記事
// 上記は同じページで、メニューの構成上階層が分かれています。
[2.1]全ての記事 = [2.2]環境構築
// は同じ階層

ページ構成は

[0]ページ構成
|
|- [1]ヘッダー
|- [2]Body
|- [3]サイドメニューLeft
|- [4]サイドメニューRight ※未使用
|- [5]フッター
|
// Bodyを上下左右のナビゲーションで囲むオーソドックスな構成

となっています。実際の構成レイアウトは

[1]ヘッダー
|
|- [1.1]ヘッダーTop
|
|---- [1.1.1]ヘッダーTop Left
|
|---- [1.1.2]ヘッダーTop Middle
|
|---- [1.1.3]ヘッダーTop Right
|
|- [1.2]ヘッダーMiddle
|
|---- [1.2.1]ヘッダーMiddle Left
|
// 以下省略
|

のように、各ナビゲーション内の構成も細かく設定を行えるようになっています。

WEBサイトのページを構成する要素

[0]ページ構成

において、実際のページ内容である

[2]Body

は管理画面 ※ 通称Admin Menuとも言われています。のメニューで

[1] コンテンツの機能を使いページを作成して行きます。

Bodyを上下左右で取り囲むナビゲーションメニューであるヘッダーやフッター、サイドメニューは、どこに配置をして何をメニューに入れるかなどを設定していく必要があります。この設定は

[2] サイト構築の機能を使い設定して行きます。

上記の[1]コンテンツ、[2] サイト構築、の項目の各機能を使いページを作り、必要な項目を追加してWEBサイトを構築して行きます。

ここで、各機能を説明するために、Admin Menuの各項目のメニューを整理します。

[0]Admin Menu
|
|- [1]コンテンツ
|- [2]サイト構築
|- [3]テーマ
|- [4]機能拡張
|- [5]環境設定
|- [6]ユーザー
|- [7]レポート
|- [8]ヘルプ
|
// Drupal Admin Menuの各項目

各機能のメニュー項目は長くなるので、アコーディオンメニューでまとめて行きます。

各機能のメニュー項目

コンテンツ
|
|- [1]コンテンツ
|
|---- [1.1]コンテンツ追加
// 新規のコンテンツを追加
|
|---- [1.2]フィルター
// 条件で記事をフィルタリング
|
|---- [1.3]コンテンツ一覧
// 作成したコンテンツが表示
|
|---- [1.4]アクション
// 一覧のコンテンツにチェックを入れ所定のアクションを適用
|
|
|- [2]ブロック
|
|---- [2.1]コンテンツブロックを追加
// 新規のコンテンツブロックを追加
|
|---- [2.2]適用
// 指定のブロックにブロックタイプを適用
|
|---- [2.3]コンテンツブロック一覧
// コンテンツブロックを選択して編集
|
|
|- [3]コメント
|
|---- [3.1]掲載中、承認待ちコメントの選択
// 記事のコメントの状況確認
|
|---- [3.2]フィルター
// 記事のコメントの条件検索
|
|---- [3.3]コメント一覧
// 記事のコメントの一覧
|
|- [4]ファイル
|
|---- [4.1]ファイルの検索
// ファイルのフィルタリング
|
|---- [4.2]ファイルの一覧
// サイト内のファイルの一覧
|
|
|- [5]メディア
|
|---- [5.1]メディアファイルの追加
// サイト内にメディアファイルを追加
|
|---- [5.2]メディアファイルのフィルター
// サイト内メディアファイルを検索
|
|---- [5.3]メディアファイル一覧
// サイト内メディアファイル一覧
|
|- [5]メディア ※重複表示：恐らくバグ

サイト構築
|
|- [1]ウェブフォーム > ウェブフォームの作成や管理を行います。
|
|- [2]コメントタイプ > コメントのフォームとディスプレイの設定を行います。
|
|- [3]コンタクトフォーム > コンタクトフォームの作成や管理を行います。
|
|- [4]コンテンツタイプ > コンテンツのフィールドとフォーム、表示設定の作成と管理。
|
|- [5]タクソノミー > コンテンツのタグ付けや分類を管理します。
|
|- [6]ディスプレイモード > コンテンツとフォームに対してどの表示が利用できるかを設定します。
|
|- [7]パラグラフタイプ > パラグラフタイプの作成と編集を行います。
|
|- [8]ビュー > コンテンツのカスタマイズされたリストを管理します。
|
|- [9]ブロックタイプ > コンテンツブロックのフィールド、フォーム、表示設定を作成、管理します。
|
|- [10]ブロックレイアウト > サイトのサイドバーや他のリージョンに表示されるブロックコンテンツを設定します。
|
|- [11]メディアタイプ > メディアタイプを編集します。
|
|- [12]メニュー > メニューリンクとメニューの管理。

テーマ
|
|- [1]リスト
|
|---- [1.1]インストール済みテーマ
|
|-------- [1.1.1]CivicTheme 1.8.1 (デフォルトテーマ)
|
|-------- [1.1.2]Claro 10.3.3 (管理用テーマ)
|
|-------- [1.1.3]Olivero 10.3.3
|
|---- [1.2]アンインストール済みテーマ
|
|-------- [1.2.1]Stark 10.3.3
|
|---- [1.3]管理用テーマ
|
|-------- [1.3.1]Claro > コンテンツの作成・編集時に管理テーマを利用する
|
|- [2]更新
|
|---- [2.1]管理用テーマ前回の確認: 3 hours 22 minutes前 (手動で確認) 全てのプロジェクトは最新です。
|
|- [3]設定
|
|---- [3.1]共通の設定
|
|---- [3.2]Claro
|
|---- [3.3]Olivero
|
|---- [3.4]Civic Theme

機能拡張
// インストールされているモジュールが一覧で表示
// 拡張などで、可能なものも表示されているので、必要あらばインストールします。
|
|- [1]リスト
|
|---- [1.1]コア
|
|-------- [1.1.1]Automated Cron > サーバーレスポンスの最後に cron を実行する形で cron ジョブを自動的に実行する方法を提供します。
|-------- [1.1.2]BigPipe > BigPipe 技術を使用してページを送信します。ブラウザでのページ表示が速くなります。
---------以下省略---------
|
|---- [1.6]ウェブサービス
|
|---- [1.7]パラグラフ
|
|---- [1.8]フィールド
---------以下省略---------
|
|---- [1.15]検索
|
|
|- [2]更新
|
|---- [2.1]管理用テーマ前回の確認: 3 hours 22 minutes前 (手動で確認) 全てのプロジェクトは最新です。
|
|- [3]アンインストール
|
|---- [3.1]アンインストールプロセスはモジュールに関連したすべてのデータを削除します。
|
|-------- [3.1.1]Automated Cron
|
|-------- [3.1.2]BigPipe
---------以下省略---------
|
|-------- [3.1.61]Workflows

環境設定
|
|- [1]システム
|
|---- [1.1]サイトの基本構成
// サイト名やメールアドレス、スローガン、デフォルトのフロントページ、エラーページを変更します。
|
|---- [1.2]Cron
// 自動的なサイトのメンテナンス作業を管理します。
|
|---- [1.3]参照されていない複合的なエンティティを削除
// エンティティ参照リビジョンフィールドで使用されなくなったエンティティのリビジョンを削除する。
|
|
|
|- [2]ユーザー
|
|---- [2.1]アカウントの設定
// ユーザーアカウントのデフォルト設定、フィールド、登録条件、eメールのメッセージを構成。
|
|---- [2.2]CAPTCHAの設定
// Administer CAPTCHA settings
|
|
|
|- [3]ユーザーインターフェース
|
|---- [3.1]ショートカット
// ショートカットセットの追加や変更を行います。
|
|
|
|- [4]コンテンツ作成
|
|---- [4.1]Layout Builder Restrictions
// Manage which Layout Builder Restrictions plugins run, and in which order.
|
|---- [4.2]Linkit
// Manage Linkit profiles.
|
|---- [4.3]テキストフォーマットとエディター
// テキストエディターとコンテンツが表示されるときにどうフィルターされるかの選択と設定を行います。
|
|---- [4.4]パラグラフの設定
|
|
|
|- [5]検索とメタデータ
|
|---- [5.1]URL エイリアス
// 既存のパスにカスタムURLを追加。
|
|---- [5.2]Search API
// Create and configure search indexes and servers.
|
|---- [5.3]URL リダイレクト
// あるURLから別のURLへユーザーをリダイレクトします。
|
|---- [5.4]メタタグ
// デフォルトのメタタグを設定します。
|
|
|
|- [6]メディア
|
|---- [6.1]Crop types
// Manage crop types.
|
|---- [6.2]ファイル システム
// アップロードされたファイルの場所とアクセス方法の設定。
|
|---- [6.3]メディアライブラリーの設定
// メディアライブラリーの設定を管理します。
|
|---- [6.4]メディア設定
// メディアの設定を編集します。
|
|---- [6.5]画像スタイル
// 画像のリサイズや表示域に適合させるために利用できるスタイルを設定。
|
|---- [6.6]画像ツールキット
// 任意のツールキットをインストールした場合、利用する画像ツールキットを選択します。
|
|
|
|- [7]地域と言語
|
|---- [7.1]地域の設定
// 場所とタイムゾーンの設定。
|
|---- [7.2]日付と時間のフォーマット
// 日付と時刻の表示方法を設定。
|
|---- [7.3]言語
// コンテンツの言語とインターフェイスの設定。
|
|---- [7.4]コンテンツの言語と翻訳
// コンテンツの言語と翻訳のサポートの設定を行います。
|
|---- [7.5]ユーザーインタフェースの翻訳
// 翻訳ファイルのインポートの構成、翻訳インターフェイスの追加またはカスタマイズ。
|
|---- [7.6]構成の翻訳
// 構成を翻訳します。
|
|
|
|- [8]開発
|
|---- [8.1]パフォーマンス
// キャッシュと帯域幅を最適化する設定を行ないます。
|
|---- [8.2]開発設定
// テーマ開発設定の設定
|
|---- [8.3]ログとエラーメッセージ
// エラーメッセージやデータベースロギングの表示方法を設定します。
|
|---- [8.4]メンテナンスモード
// アップデートとその他のメンテナンス作業をするためにサイトをオフラインにします。
|
|---- [8.5]構成の同期
// 構成のインポートとエクスポート。
|
|
|
|- [9]ワークフロー
|
|---- [9.1]ワークフロー
// ワークフローを設定します。
|
|
|
|- [10]ウェブサービス
|
|---- [10.1]Google Tag
// Configure the website integration with Google Tag and Google Tag Manager.
|
|---- [10.2]RSS 配信
// サイトの説明やフィードごとのアイテムの数、フィードをタイトル・ティーザー・フルテキストのどれにするかを設定します。
|
|---- [10.3]Menu Linkset Settings
// Enable or disable the menu linkset endpoint

ユーザー
|
|- [1]ユーザー
|
|- [1]リスト
// ユーザーの設定メールアドレスやパスワード権限などの役割を設定
|
|- [2]権限
// ユーザー権限の設定、管理者、認証ユーザー、匿名ユーザー、Auther、Approver、Administrator、editorの6つの権限で各機能やページの閲覧やアクセス、オペレーションの可否を細く設定可能
|
|- [3]役割
// 役割は特定の権利を持つユーザーのグループを定義します。ここで権限で設定した役割を実際のユーザーに割り振るグループとして登録します。新しく権限を限定した管理者やAutherを定義し、ユーザーに振り分けていきます。権限がマスターで、マスターを元に実運用時の権限を決定しユーザーに与える為の設定をここで行います。
|
|- [4]役割の設定
// 権限や役割で設定した項目を、各権限に対し実行します。

レポート
|
|- [1]レポート
|
|---- [1.1]サイトの状態
// サイトの稼働状態をレポートします。
|
|---- [1.2]利用可能なアップデート
// インストールされているモジュールやテーマに対して、最新アップデートが存在するかを確認します。
|
|---- [1.3]最近のログメッセージ
// 最近記録されたイベントを表示します。
|
|---- [1.4]Metatag plugins
// Overview of plugins used in metatag.
|
|---- [1.5]Views プラグイン
// すべてのビューで使用されているプラグイン一覧。
|
|---- [1.6]Webform プラグイン
// Webformモジュールにで使用されているプラグインの概要です。
|
|---- [1.7]「アクセスは拒否されました」エラーの上位
// 「アクセスは拒否されました」エラー (403) を表示します。
|
|---- [1.8]「ページが見つかりません」エラーの上位
// 「ページが見つかりません」エラー (404) を表示します。
|
|---- [1.9]フィールド一覧
// 全エンティティータイプに設定されているフィールドの概要です。
|
|---- [1.10]利用可能な翻訳の更新
// インストールしているモジュールやテーマに利用可能なインターフェースの翻訳に関するステータスレポートを取得。
サイトの稼働状態をレポートします。

ヘルプ
|
|- [1]初めに
// ウェブサイトを設定して利用を開始するために、次の手順を実行してください。
// 説明があります。
|
|- [2]トピック
// トピックはモジュールまたはテーマによって提供されます。あなたのサイトのトップレベルのヘルプトピック：
|
|---- [2.1]Changing basic site settings
// サイトの基本的な設定を行います。
// 以下省略
|
|- [3]モジュールの概要
// 各モジュールでモジュールの概要が提供されています。インストールされているモジュールで提供されている概要:
|
|---- [3.1]Block
// Block モジュールによって、インストール済みテーマのリージョンにブロックを配置し、ブロックを設定できるようになります。より詳しい情報は、Block モジュールのオンラインドキュメント
// 以下省略

実際の構築手順

サイトの構成とDrupalのサイト構築機能の概要説明が長くなってしまいましたが、実際の構築手順は以下のような形で進めて行きます。以下の順序で記事を書いて行きながら必要な機能などを都度記事に載せる形がわかりやすいのではと考えています。

ページを用意
タクソノミーでカテゴリーの仕分け
複数ページをカテゴリーでまとめる
サイトレイアウトの確認
ヘッダーとナビゲーションメニューの構成
フッターの構成
サイドメニューの構成
テーマの基本設定
コンタクトフォームの設定

作業途中で、ブロックの設定やタクソノミーの階層化、メニューの追加、レイアウトの変更など出て来ますが、各作業を進めていく記事の中で説明していければと考えています。

テーマの基本設定は本来、一番最初に行うべきなのですが、必要なページと構成をある程度作成してから設定を見た方が理解しやすいので8番目としています。デフォルトでCivicThemeと表示されたままとなりますが、セキュリティーや見た目も優れているので問題なく、私自身が進めた順序なので、同様にサイト構成をある程度形にした以降に設定を行います。

当記事の目的が、WEBサイトを構築する上で、必要な概要をまとめています。各メニュー項目などは、今回だけでなく、今後、実際に該当する機能を使用する際、視覚的に理解しやすいと思いますので都度登場します。

長い記事となりますが、この記事で具体的に何かを覚えてしまうというより、概要と必要なものがこんな感じというくらいに書いた記事ですので、軽く目を通していただけていれば十分な内容となっています。ご覧になった方もおそらくそのような形で購読いただけていると思います。

次項より、具体的にページを作成する例を題材に記事をまとめて行きます。

実際のページ作成

当記事で、当WEBサイトの簡単な構成や、DrupalのAdmin Menu内の項目の説明、ページやナビゲーションをどの機能を使って作成していくかの事前知識をまとめてみました。私の悪い癖で、文章や項目が多くなり、伝えたい事がぼやけてしまう記事になり反省しています。次項から実際にコンテンツの機能を使いページを作成していく記事をまとめて行きます。

Drupalの記事

関連するDrupalでWEBサイトを構築する為の環境構築の記事やDrupalについて書いた記事になります。

記事は全てナンバリングしています。Drupalを初めて使う為の準備から始まる最初の記事から読む事もできます。

最初の記事から購読

最新の記事

Drupalについて書いた最新の記事になります。

Life Styleの記事

Drupalとは関係ないのですがLife Styleの記事も書いていますのでよろしければ購読ください。

2024/09/07(土) - 12:00

Hooked-on Drupal.

For non-Japanese speakers

実際のページ作成