備忘録

本日の講義では、最終講評を控えた最後の演習として、ブラウザのJavaScript機能を活用した「元のページに戻る」ボタンの実装課題が提示され、これまでのモジュール検証レポートの最終確認が行われた。

これを受けて、これまでに構築した韓国旅行ガイドサイトのモジュール検証レポートを完成させた。特に、日本語タイトルが冗長なローマ字URLに自動変換される課題に対しては、Pathautoモジュールのグローバルパターン設定をノードの識別番号を呼び出す規則に変更し、「trip/31」のような簡潔な短縮URLへと最適化を行った。また、ブラウザタブに表示されるサイトタイトルの誤入力を修正し、デフォルトのファビコンを独自のデザインへと変更した。

さらに、プロフィールページのHTML内に提供されたJavaScriptコードを組み込み、「元のページに戻る」ボタンを追加した。サイト全体のテーマカラーである紫色（#c681e0）に調和するスタイリッシュなCSSデザインを適用し、ホバー時の視覚効果や角丸のスタイリングを施した。その際、ブラウザのキャッシュによりデザイン変更が反映されない問題が発生したが、CSSの呼び出しパスにクエリパラメータ（style.css?v=1.2）を付与するキャッシュバースト手法を用いることで、即時反映および正常動作を確立した。

本日の講義で提示されたサイト充実度チェックリストの全15項目について、総合的な検証と修正作業を実施した。まず、基本表示とレイアウト面においては、管理画面からログアウトした一般の視点で表示崩れがないかを検証し、テーマ既定のロゴを排除して独自のサイト名「KOREA TRIP'S」をヘッダーに正確に反映させた。ユーザビリティを考慮し、最上部にサイト名、その直後にメインコンテンツが配置される構造を担保している。また、過去の備忘録が右側サイドバーにインデックスとして網羅的にリスト化されていることや、独自記事がカテゴリごとに適切にまとめられていること、メニューの「ホーム」リンクが最も左側に配置されていることを確認した。ロゴ画像も全体のデザインスケールに適合するサイズへ微調整し、外部連携やテーマ固有の画像・SNSリンクを独自のものに差し替えてデッドリンクがない状態を構築した。

1. 講義・実習内容

• 本日の第11回講義は、予定通りZoomによる遠隔授業で実施された。
• 配布された資料「Drupal11-テーマのカスタマイズ-CSS編.pdf」を参考に、導入したテーマを自分の好みに合わせてカスタマイズする実習を行った。テーマによっては資料の通りにいかない場合もあるため、仕様に合わせて柔軟に対応していく必要があることを学んだ。

2. フィードバック

今回は先々週から作ったサイトをファイルマネージャーにアップロードし、profile.html へアクセスはメニューからリンクする方法を選択した。そのほうが自分のサイトと似合う選択肢だと考えた。また、先生が記事されてとおりcd public_html composer update --no-blockingこの命令コードを使ってアップデートした。

Tourist Attractionにも毎回自分のサイトにあう記事を作成していている。毎回韓国の観光地をおすすめするためちょっと調べることがあるが毎回こんなどころもあるかと思っている。

また、今日はPathautoというモジュールをダウンロードした。これはURLを自動にわかりやすくにしてくれるとても優しいモジュールだと言える。これでモジュールをどんどん増えて自分のサイトが良くなるのが見えるからいいと思う。

1. 本日の講義内容のまとめ 本日の講義は事前の予告通り、Zoom を通じたオンライン形式で実施された。先週に引き続き、Drupal を用いたサイト構築において、HTML と CSS の調整を行いながらデザインの完成度を高める作業を進めた。また、今後の重要なミッションとして、複数のモジュールを実際に導入・運用し、その使い心地や効果を検証する「モジュール検証レポート」についての説明があった。サイトのコンテンツに加え、エラーに備えたこまめなバックアップの作成がいかに重要であるかを改めて認識した。

2. 実習内容と具体的な取り組み 本日の演習では、サイトの機能充実を目的として、今まで3つのモジュールのダウンロードとインストールを行った。

Captcha モジュール : サイトのセキュリティ向上とスパム対策のために導入した。ログイン画面やフォームの安全性を高めるための必須機能として、今後の検証が楽しみである。

Metatag モジュール : 構築中の Web サイトが検索エンジンに適切に最適化されるよう、メタデータを管理するために導入した。

1. 実習の目的 
単なるマークアップ言語の演習にとどまらず、Web標準に準拠した構造化と、CSSによるデザインモジュール検証を目的としてプロフィールページを制作した。

2. 私の失敗と解決過程

6月3日の第7回講義では、まずDrupalサイトを安全に管理するための重要なポイントを学んだよ。新しい未知のモジュールをインストールする前には、万が一のトラブルに備えて必ずデータベースのバックアップを取る習慣をつけることが大切だと知った。また、著作権表示をしっかりしておくことで、周囲との不要な誤解を避けて安全にサイトを運営できるということも深く理解できた。

次に、Webの基本であるHTMLマークアップとテキストエディタの活用について勉強したよ。DrupalはPHPで作られているけれど、ブラウザに表示されるときは最終的にHTMLになるから、直接コードを扱うスキルが欠かせないんだ。VS Codeエディタを使いこなして、自分に合ったプラグイン環境を整えるのが開発者としての第一歩だと感じた。

最後に、実際にエディタを使って「profile.html」というファイルをローカル環境で作成する実習を行った。表組みを作るための主要な5つのタグの役割を学び、講義の必須条件である血液型を含めた5つの項目を自分の情報に置き換えて正しくマークアップしたよ。今回は静的な骨組みを作っただけだから、次回の講義でCSSを使ってこのファイルにデザインや装飾を加えていくのに期待している。

1. 本日の演習内容と気づき 

先週に続き、データベースのバックアップの重要性について再確認した。新しい作業やモジュール・テーマの追加を行う前には、元の状態に戻せるよう必ずバックアップを取る習慣を徹底したい。 また、サイトのテーマを変更した際、テーマ固有のデフォルトロゴに上書きされてしまう問題を確認した。申請した正しいサイト名が表示されているか再度チェックし、修正を行った。あわせて、ユーザーにとって見やすいサイトにするため、デッドリンクとなっている不要なSNSリンクなどの削除と整理を進めた。

2. トラブルとエラーへの備え 

今後、新しいモジュールやテーマの導入によってサイトに不具合が生じた際の具体的な対処法を学んだ。

「update.php」を実行してDrupalのリフレッシュを行うこと。

その後、キャッシュ削除とページの更新をセットで行うこと。

まず、サイト管理の効率化に向けて、VirtualminのターミナルからComposerを活用してAdmin Toolbarモジュールを導入し、管理メニューを直感的なドロップダウン形式へと刷新した。続いて、外観メニューからモダンなテーマを適用し、設定画面から独自の画像をアップロードすることで、ヘッダーへの独自ロゴ反映とCMSのフロントエンド構造の理解を深めた。

さらに、Drupalの強みである動的制御を検証するため、タクソナミーとビューズを連携させた。備忘録タグを持つ記事のみを抽出する動的ブロックを生成し、メインナビゲーションに紐付けることで、記事の投稿に伴い自動更新される備忘録INDEXをサイドバーに構築した。

最後に、データの保全性を確保するため、phpMyAdminから圧縮形式をgzip形式に指定してデータベースをエクスポートした。検証のために既存テーブルを一度削除して空にする緊張を伴う操作を行ったが、インポートによりすべての構造とデータが完全に復元されることを確認し、最後にDrupal側ですべてのキャッシュをクリアーを実行して同期を完了させた。

ファイルのパーミッションエラーが一番難しかった。settings.phpファイルを編集して保存しようとした際、Permission deniedというエラーが発生して最初は原因がわからなかった。調べてみると、Drupalがセキュリティのために該当ファイルを「読み取り専用（444）」にロックしていることが原因だった。Virtualminのファイルマネージャーで権限を一時的に「644（書き込み可能）」に変更してコードを保存し、その後再びセキュリティのために「444」に戻すという一連の流れを理解することが重要だった。ウェブ技術論において、なぜファイルの権限管理が重要なのかを身をもって体感できた部分である。またドメインを指定する際、正規表現（^test\.bbjstudio\.x1st\.momousa\.net$）を使用するが、ドットの前にバックスラッシュを付けてエスケープしなければならない点を見落としやすいと感じた。特に日本のキーボード環境では、バックスラッシュが¥マークとして表示されるため、入力する際に混乱する可能性があり、注意が必要だと感じた。