備忘録

Webformモジュールの検証

1. 検証の背景と目的

今回作成しているゲームブログでは、これまで管理者側が記事を投稿するだけの一方向的な情報発信が中心であった。しかし、読者から意見やリクエストを集めることができれば、サイトの内容をより充実させられると考えた。

そこで、DrupalのWebformモジュールを導入し、フォーム作成機能の利用方法や送信されたデータの管理方法について検証を行った。また、実際にフォームを作成して動作確認を行い、サイト運用にどのように活用できるかを考察した。

2. モジュールの導入および検証環境

導入したモジュール

• Webform
• Webform UI
• Webform Submission Log
• Webform Node

作成したフォーム

「【読者アンケート】おすすめのゲーム」

設定した項目

① レビューしてほしい、自分のおすすめのゲームのタイトル

• 1行テキスト入力
• 必須入力

② 遊んでいるゲーム機（ハード）

• ラジオボタン形式
• PS5
• Nintendo Switch
• PC
• その他
• 必須入力

3. 検証結果

Webformモジュールを導入することで、プログラムを記述することなく入力フォームを作成することができた。

フォーム作成画面では、入力欄や選択肢を追加するだけで簡単にフォームを構築できた。また、必須入力の設定もチェックボックスで行うことができ、利用者が未入力のまま送信できないように設定できた。

作成したフォームを公開後、実際にテスト送信を行ったところ、入力したゲームタイトルやゲーム機の情報が管理画面の「Results」に記録されていることを確認できた。送信日時も含めて一覧表示されていたため、読者から集めた情報を後から確認しやすいと感じた。

このことから、Webformモジュールを利用することで、利用者からの情報を効率よく収集・管理できることが分かった。

4. Webformモジュールの利点と活用方法

（1）読者の意見を集めやすい

記事を読むだけでなく、読者がフォームを通して参加できるようになるため、サイト運営者と読者の距離を縮めることができる。

今回作成したフォームでは、レビューしてほしいゲームを募集できるため、今後の記事作成の参考資料として活用できると考えられる。

（2）集まったデータを分析できる

送信されたデータは一覧で管理できるため、どのゲーム機を利用している人が多いのかなどを把握しやすい。

例えばNintendo Switchの利用者が多い場合は、Switch向けゲームの記事を増やすなど、読者層に合わせた運営が可能になると考えられる。

（3）フォーム作成が簡単である

通常であれば入力フォームの作成にはプログラムの記述が必要になるが、Webformでは管理画面から設定するだけでフォームを作成できた。

そのため、専門的な知識が少なくても機能を追加しやすい点が大きな利点だと感じた。

5. 結論と考察

今回の検証を通して、Webformモジュールを利用することで、利用者からの情報収集機能を簡単にサイトへ追加できることが分かった。

実際にフォームを作成して送信テストを行った結果、入力データが正しく保存されることを確認できた。また、プログラムを書かなくても比較的短時間でフォームを作成できたため、Drupalのモジュールの便利さを実感した。

今後はアンケートだけでなく、お問い合わせフォームやイベント参加申込フォームなどにも応用できると考えられる。Webformはサイト運営を支援する便利なモジュールであり、利用者とのコミュニケーションを広げるために有効な機能であると感じた。

7/1

今日は、DrupalのテーマのCSSを使ってタイトルの色を変更する作業を行った。

まず最初に、ブラウザの「検証」機能を使い、対象となるタイトル部分（h1.page-title）を特定した。検証画面では実際に色を変更して確認できたが、この変更は一時的なものであり、保存されないことに注意が必要だった。

その後、実際のCSSファイルを編集するためにVirtualminのファイルマネージャーからテーマフォルダを開いた。しかし、どのCSSファイルを編集すればいいのか分からず、baseフォルダやcomponentsフォルダなど複数のCSSを確認する必要があった。この過程で、テーマによってCSSの構造が異なり、どのファイルが反映されているか分かりにくい点が難しかった。

最初は以下のように書いたが、色は反映されなかった。

CSS

.node-19 h1.page-title {

color: #00e0ff;

}

この原因は、テーマ側のCSSのほうが優先度（強さ）が高く、書いたCSSが上書きされてしまっていたためである。

最終的に、セレクタを強くし、さらに !important を付けることで解決した。

CSS

html body h1.page-title {

color: #00e5ff !important;

}

CSSでは「どのスタイルが適用されるか」は
①後から書かれたもの
②より具体的な指定
③!important
によって決まることが分かった。

また、変更が反映されない原因として「キャッシュ」もあった。CSSを保存してもすぐに変わらない場合は、ブラウザの更新（Ctrl + F5）やDrupalのキャッシュクリアが必要だった。

色については、最初は水色系を使用したが、明るすぎると見づらいと感じたため、最終的に少し落ち着いた色（#00e5ff）に調整した。また、text-shadowを使うことで見た目を少し良くできることもわかった。

今回の作業を通して、単にCSSを書くのではなく、「どのCSSが有効か」「なぜ反映されないのか」を考えることが重要だと感じた。

また、CSSファイルを直接編集していたが、後からDXPR Themeの設定画面内に「Custom CSS & JS」があることを発見した。

この機能を利用すると、ファイルマネージャーでCSSファイルを探して編集しなくても、管理画面から直接CSSを追加できるため非常に便利だった。

例えば以下のCSSを入力するだけでページタイトルの色を変更できた。

一方で、特定ページのみ変更しようとして

CSS

.node-19 h1.page-title

を使用したが反映されなかったため、テーマによっては想定どおりのクラス名が付与されていない場合があることも学んだ。

また、記事本文内の特定の文字だけを装飾する方法についても学んだ。

当初はCSSだけで「APEX」という文字列のみ色を変更できると考えていたが、CSSは文章中の特定の単語を直接指定することはできないことが分かった。そのため、HTML内で対象の文字にクラスを付与し、そのクラスに対してCSSを適用する方法を利用した。

この方法によって、「APEX」という文字だけ色や装飾を変更することができた。初めはCSSの記述ミスにより反映されなかったが、コード内に誤って不要な数字が入っていたことが原因だった。CSSはわずかな記述ミスでも正常に動作しないため、入力内容をよく確認することの重要性を実感した。

今回の作業を通して、HTMLとCSSを組み合わせることでページ内の特定の部分だけを細かく装飾できることが分かった。今後はゲームタイトルや重要なキーワードなど、目立たせたい文字にクラスを設定し、CSSを活用してサイト全体のデザイン性や見やすさを向上させていきたい。

6/17, 6/24

今回は、zoomで授業を行い自分のプロフィールのcss をもっと充実させる内容だった。CSSの編集では、最初は色やデザインを変更するだけだったが、途中からゲームサイトのようなデザインを目指した。背景を黒にし、青色を基調とした発光表現やグリッド模様を追加した。また、名前をエメラルド色に変更したり、背景に光のエフェクトを加えたりして見栄えを改善した。しかし、光の輪を大きくしすぎて画面全体が派手になりすぎたため、サイズや透明度を調整して自然に見えるように修正した。この作業を通して、デザインは単に要素を増やせばよいわけではなく、全体のバランスが重要であると感じた。

さらに、画像の配置や表のレイアウトにも苦労した。画像の大きさや表とのバランスによって見た目が大きく変化するため、何度も調整を行った。特にCSSを変更しても画面に反映されないことがあり、アップロードしたファイルと手元のファイルの違いを確認しながら作業を進めた。

また、来週にもう一度説明して、プロフィールを完成させ、サイトにも反映させるらしいが、いち早くやってみたくて、プロフィールページをサーバーへアップロードし、Drupalのメニューに「プロフィール」という項目を追加した。メニューからプロフィールページへ移動できるようになり、一連の流れを確認することができた。

あと、ウェブフォームというモジュールを追加して、読者アンケートを作成した。

6/10

今回の演習では、HTMLで作成したプロフィールページにCSSで装飾を加えた。

まず、profディレクトリの中にprofile.html、imgディレクトリ、cssディレクトリを作成する作業があったが、最初はこの構造が理解しづらかった。資料には「prof」や「profile.html」と書かれていたため、VS Codeで新しいHTMLファイルを作成するのかと思い混乱した。また、ディレクトリとフォルダの違いもよく分かっておらず、何をどこに配置すればよいのか理解するまで時間がかかった。しかし実際にフォルダを作成し、その中にHTMLや画像、CSSファイルを整理して配置してみると、Webサイトのファイル構成について理解を深めることができた。

特に混乱したのは、profディレクトリ内のprofile.htmlを開いても編集した内容が反映されていなかったことである。確認してみると、別の場所にもう一つprofile.htmlが作成されており、そちらに編集内容が保存されていた。原因は完全には理解できていないが、資料で説明されていた絶対パス（フルパス）と相対パスの考え方が関係しているのではないかと思った。最初はCSSのリンクを「prof/css/～」のように記述していたが、これでは参照先がおかしくなっていたようで、後から「./css/～」という相対パスに修正したところ正常に表示されるようになった。今回の作業を通して、相対パスは現在のファイルを基準として目的のファイルを探すための記述方法であることを理解できた。

また、CSSの記述も難しく感じた。例えばbody要素の色を変更するとページ全体の文字色や背景色が変わることが分かり、特定の部分だけを変更するには別の指定方法が必要なのだと気付いた。さらに、画像を挿入する位置によって表内での表示位置が変化することも分かり、HTMLの構造を意識してコードを書く重要性を学んだ。

今回はHTMLだけでなく、CSSやディレクトリ構成、相対パスなど新しい内容が多く、理解するまで苦労した。しかし実際に試行錯誤しながら作業することで、Webページがどのような仕組みで構成されているのかを少し理解できたため、とても勉強になった。

6/3

　テキストエディタ( VS code)を用いて自己紹介の表を作成した。表を作成するにあたり、<table>, <tbody>, <tr>, <th>, <td> という多重の入れ子構造を正確に記述する点が難しい。タグの閉じ忘れや行（<tr>)とセル(<th>/<td>)の階層関係を正しく保つために、インデントを意識してコードの視認性を高めることが大事だと感じた。多分次回にこれにCSSを適応して装飾を学ぶとのことなので、今回作成したファイルがどんな感じにサイトに反映されるのか楽しみ。

　また、今回は私が使用しているテーマのDXPRにはAI module （他もあるかも）というのがあり、それをターミナルで呼び込みインストールしてみた。

5/27

一応バックアップを取っておいた。

サイトを良くするには、まずテーマの設定から色や配置などを変えたり、ブロックレイアウトから配置変えたりしてより良くできる。

テーマにしたDXPRにはとても期待大。ホームページにでかい写真を貼ることができ(Hero Region)、ばっさーの日記とかの記事に飛んだ時、その写真が見えないようにできたり、設定し放題なのでいろいろと使っていきたい。説明が英語なのでそれが難点。

左右に散らばっていた「備忘録」と「ばっさーの日記」のブロックを片側にまとめ、DXPRを使って枠の角を丸くし、色もピンクにしてゲームっぽい良い感じにした。さらに、記事を開いたときにタイトルが下からふわっと出てくる「フェードインアップ」の動きを付けた。この動き気に入った。

でっかい写真を貼って、スライドショーみたくしたくいろいろと工夫してやろうとしたが、難しかった。コンテンツタイプでスライドショーっていう箱を作り、viewでブロック配置すればいい感じになるかなと思ったらいかなかった。自分がしたいことをまずどうやればいいか分からないことが多い。

また、記事が増えてきたら「タクソノミー」機能を使ってカテゴリー分けみたいなこともしていきたい。

あと、ゲームの記事にそれぞれ公式ホームページに飛べるようにURLを貼ろうとした。編集でリンクを貼り、ホームページに飛ばせることは成功した。その後、リンクに飛んだ時自分のサイトがそのまま移行しちゃうのはめんどうだなと思い、どうにかして新しいタブで開けるようにした。（編集のソースから、htmlに「target="_blank"」を足すといけた。また、ベーシックhtmlからフル

htmlにしないとだめ。）

5/20

PhpMyadminに入るにはバーチャルミンのドメインに/pmadを付けると入れる。

バックアップの時は、出力の圧縮をgzip形式にする。（一番圧縮率が高いから。）

バックアップは常々やった方がいい。データベース名が自分のものになっているか確認。

Drupalのモジュール設定はサイトの拡張機能からいける。

ビューズでINDEX作成は、サイトのタイトルとかタグとかを見やすくするために行う。

　ここからやっと自分のサイト作りが始まったような感じがする！まず、自分はサイト構築としてDXPR Studio を使用しようと思う。設定で、ロゴ変更やサイトの色、場所変更、、楽しい。⇒いろいろ設定した後「環境設定」いってキャッシュのクリアをした方がいいなと感じた。

　使いたいテーマがあったらcomposerしてインストールすればいいのだが、これやっぱ違うなってなってインストールしたものを削除したいときはどこでやればいいのだろう。public_htmlから削除するのだろうか、ターミナルで削除コマンドとかあるのだろうか。

　色変更の際に、リンクの色や背景の色など気を付けないと、同じ色でかぶさって見えなくなると思った。

　また、DXPR ではサイドバーの設定ができなく、他の方法でできないか考え中。

5/13

Drupalのインストールをした。

composerコマンドでアップデートした。（cd ~ を使い指定ルートへ移動させることができる。）

データベース設定、サイト(Drupal)を作成した。

自分のサイト開いた際に、毎回「レポート」から「サイトの状態」を確認する。

setting.php は、Drupalの設定を管理する大切なファイル。

アクセス許可の変更では、「0644」にすると、オーナーに書き込みの許可を与えることができ、「0444」だと、他人からのアクセスを拒否する設定にできる。（編集した後は、0444に変化をすることを忘れない。

ヴァーチャルミンに入るとき、学校外であればVPNを用いないと無理。

　次回から本格的になってくるともうので、設定しかり理解して楽しんでいきたい。