How Come? - Development Blog

仕事のメモなど

一週間でDrupalを使ったサイトを作る

 

0. 作ったサイト 

https://howcome.dev/germany-walk-drupal/

 

1. ガント・企画・ペルソナ

1-1. おおまかな予定と実際

■ガント

8月26日(水)企画(テーマ決め・ガント・ペルソナ)

8月27日(木)環境構築ローカルでテーマ作成

8月28日(金)テキスト流し込み

8月29日(土)ページ作成

8月30日(日)ページ作成

8月31日(月)ページ作成

9月1日(火)調整・予備日

9月2日(水)公開

 

■実際

8月26日(水)企画・ローカル環境をDockerで構築、Drupalローカルにインストール

8月27日(木)ローカルと本番で元のコードを反映し始める

8月28日(金)テーマの適用でエラーが起こりサイトにアクセスできなくなる

8月29日(土)テーマをnews_zymphonies_themeに設定して記事流し込み

8月30日(日)CSS編集、インスタグラムを反映

8月31日(月)CSS編集

9月1日(火)CSS編集、作った感想・所感まとめ

9月2日(水)作った感想・所感まとめ、調整

 

1-2 企画 どんなサイトを作るか

  • Germany Walkをそのまま活用する
  • 多言語機能活用できそう

 

1-3 ペルソナ 趣味のサイトを将来的に大規模化したいクライアントと仮定

  • 既存サイト構築済み・大型ポータルサイトにしたいクライアント
  • ドイツの観光・語学案内サイト
  • HTML・CSSで静的に構築したあと、PHPでインクルードした。
  • Drupalに組み込みたい。

 

2. 制作の流れ

1日目

  1. Drupal9を導入
  2. ローカル環境構築
  3. Drupalインストール、Dockerインストール、ローカルにDrupalインストール

■不明点

  • Drupalをローカル環境でlocalhostで見られるようになったが、localhostの場所がわからない。
  • テーマを既存テーマカスタムするか、静的に作ったものを独自テーマとして作っていくか。
  • 既存テーマカスタムで進めてみる。
  • Dockerで構築。
  • 独自テーマならlocalhostの場所がわからないと動かせない。
  • ローカル環境 Dockerを使ってDrupalをローカルで動かそうとしたが、わからない。Dockerのコンテナの理解が浅い。

drupal-navi.jp

qiita.com

qiita.com

www.microstone.info

 

2日目

  • ローカル環境は放置で、直接本番を動かす。
  • 自分で構築したかった。実務でいつも苦労するところだから。しかし、この状況では非効率的かつ、今やっている作業をチームでもやっているとはかぎらないので、本番環境で進めることに。
    今は見られるサイトを作ることを優先!

 

■不明点

  •  DockerによるDrupal8開発環境の構築 ちょっと理解できなさすぎた。
  • これってローカルと本番両方用意できたってこと?
  • ローカルはPCのどこにあるの?Dockerが謎。

www.870labo.com

 

Drupal

hub.docker.com

My SQL

hub.docker.com

 

ディレクトリを開くと
https://howcome.dev/germany-walk-drupal/ 

このページへ飛ばされエラー。
https://howcome.dev/germany-walk-drupal/core/install.php

 

Drupal9に対応してなかった?

Additional uncaught exception thrown while handling exception. Original Drupal\Core\Extension\InfoParserException: 'core: 9.x' is not supported. Use 'core_version_requirement' to specify core compatibility. Only 'core: 8.x' is supported to provide backwards compatibility for Drupal 8 when needed in themes/custom/germanywalk/germanywalk.info.yml in Drupal\Core\Extension\InfoParserDynamic->parse() (line 100 of /home/users/1/main.jp-73558350f3dcccaf/web/howcome/germany-walk-drupal/core/lib/Drupal/Core/Extension/InfoParserDynamic.php).

 

Drupalナビを頼りに。

drupal-navi.jp

 

lolipop.jp

 

3日目

  • index.php そのままフロントページ
  • about.php ブログ化(noteの投稿を流し込みたい。)
  • event.php イベントカレンダー
  • list.php インスタを流し込み
  • 問題:インクルードしている構造はどのように反映するものか。

■不明点

  • テーマを適用。キャッシュクリアがサイトの説明通りにできない。サーバー上のファイルを変えられない。
  • Drupalナビに書かれているpage.tpl.phpなどのファイルがどこにあるのか分からなかった。既存テーマをカスタマイズしていく方法を知る。一番シンプルでサイトに合いそうなZenを使うことに。

 

 CSSが適用されないと思ったら単純なファイル名ミスだった。

knowledge.sakura.ad.jp

 

www.cms-solution.jp

 

SCSS使おうかちょっと悩む。が、この動画見たらとりあえずCSSでいこうと決める。

youtu.be

 

■エラー発生

1. Zenをインストールして適用後、500エラー。

対処しようとしてできなかったこと

どこにどうやってコマンド打てばいいのか分からなかった。

magnet88jp.hateblo.jp

drupal.stackexchange.com

 

テーマファイルを削除することしかできなかった。

blog.livedoor.jp

 

2. .htaccessを修正したら404エラー。

サイトにアクセスできないとエラーログも見られないと知る。

concrete5-japan.org

 

3. Adaptive Themeは適用できるが反映されない謎。

Bootstrapなら適用できた。時間かかってしまった(涙)

 

4日目

  1. Bootstrapのファイル構造がDrupalナビの説明と違う.twigファイルになっていて戸惑い。分からない。パニック。
  2. 一個ずつテーマを探して適用できるものを適用してみた。news_zymphonies_themeを適用。
  3. とりあえず既存のhtmlを流し込めるだけ流し込む。見られるサイトにしていくことから始める。
  4. ブログを設置したい。8からコアモジュールから外れたらしくインストールしないといけないらしい。インストールの仕方は分からなかったが、core/moduleの中に入れたら反映された。
  5. サイト構築→メニュー→ブログをMAIN NAVIGATIONに変更したら出てきた。
  6. ブログのタイトルが「マイブログ」だったのでblogディレクトリの中のblog.links.menu.ymlのtitleを変えたら変更できた。
  7. news_zymphonies_themeにしたら「コンテンツを追加」がなくなった。四苦八苦した挙句、テーマを一度別のにしたらいいかと気づき変えたら出てきた。
  8. ブログ部分をnoteからテキストだけ流し込み完了。

 

5日目

CSSを徐々に反映。フォントはタイトルだけなぜか反映されない。

newtonorange.com

インスタグラムを表示させてみたい。

www.e-pokke.com

 

6日目

  • インスタとYouTubeを同じ拡張機能で載せられた。
  • よく分からないままブログを投稿したら他の「記事」の投稿と混ざって表示される。コンテンツタイプの変更方法が分からない。仕方なく再度投稿し直す。

github.com

 

■不明点

  1. メルマガのリンクボタンがメルマガページにしか表示されない。
  2. フッターに新しいメニューを追加できない。力技で反映させる。

 

7日目

カスタマイズ方法が本当にわからない。