【デイトラ】実案件チャレンジ第三回反省会【WEB制作コース】

当記事はデイトラでWEB制作コースを受講して39週間、どんな状況でどんな勉強をしているのかまとめています

未経験、プログラミングの事は全く分からない私が、デイトラで学んだらプログラミングができるようになるのか？という趣旨で発信しています。

未経験でもできるの？
他の人がどんな風に勉強しているのか知りたい。
どれくらい時間がかかるもの？

そんな方の判断材料になれば幸いです！

なるべくコードや専門用語を使わないように書いているので気楽に見てくださいね。

と言いたいのですが、今回はガッツリコード書いています！

ばく

デイトラ実案件チャレンジ第三回に参加した反省会を行います！

この記事では以下のことが書かれています。

デイトラ実案件チャレンジでの実装内容、時間、順番
実装までに気をつけたこと

現在学習時間は1143Hほど。ひたすらコードを書いている一週間でした。

＼デイトラを受けるならここから／

デイトラ実案件チャレンジでの実装
実装までに気をつけたこと
- 本番環境にアップしてからおきたトラブル
実案件チャレンジ第三回反省会 |まとめ

デイトラ実案件チャレンジでの実装

デイトラ実案件第三回ではトップ１ページ下層５ページを2週間の期限付きで行うものです。

デイトラ受講されている方がたくさん挑戦されていました！

そんな中、なんとか提出までにこぎつけた内訳を出していきます。

実案件チャレンジかかった時間

期間:8/19~8/30

トータル:62.5H

静的コーディング:22H

動的コーディング:35.5H

確認、テスト:5H

ばく

確認、テストにもっと時間を取りたかったです。

実案件チャレンジ取り掛かった順番

以下の順番で作業しました。

デザインカンプ確認、ルール、サイトマップ確認
グーグルフォント取得、トップページからHTML制作
トップページ終了後、wordpress化、下層ページは手を付けず
トップページを動的コーディング、パーツテンプレート化
とりあえずのsingle,category,tag,404ページ作ってリンク作成
トップページから各リンクへ飛ぶことを確認
各ページ作り込み
ピクセルパーフェクトで調整
本番環境に移行
確認、テスト

ばく

ピクパを後回しにしがちなので、ズレが発生してしまいます…

実案件チャレンジ実装内容

トップ

ヘッダー、スライダー２箇所、共通カード複数箇所、ページ内タブ切り替え表示

記事一覧(全記事、カテゴリ、タグ)

タブ切り替えと同じ表現で、カテゴリによる出し分け

記事詳細

投稿日時、タイトル、サムネイル、目次、本文、スライダー、関連タグ一覧

４０４

トップへ戻るボタン

ばく

トップの内容の使い回しが多い印象でした

学びになったこと

今回の実案件チャレンジで初めて実装したもの、学びになったことをコード付きで記録しておきます。

HTMLがメインですがPHPも保存したいところ。

ヘッダーをスクロールしたら一部だけが変更される

ヘッダー全体ではなく、一部が切り替わります。

See the Pen Untitled by かかみがはら_バク (@qqvkfphs-the-vuer) on CodePen.

クラス名、タグのスラッグはChatGPTに任せる

deepLで翻訳してタグのスラッグ名を決めることで悩む時間を減らすよう心がけました

DeepL

スライダーの中央を浮かせるのにマージントップだけでできる

マージントップを設定しておき、センターに来たら(swiper-slide-activeクラスがついたら)トップ0にするとふわっと上がります

See the Pen Untitled by かかみがはら_バク (@qqvkfphs-the-vuer) on CodePen.

カテゴリ記事一覧は固定ページ作って対応する

カテゴリー一覧のページは、category.phpでは作れなかったので固定ページを編集して作りました。

page.phpの中にカテゴリーを全部読み込むコードを入れて出力しました。

スライダー右側だけはみ出すのは親要素にhidden、swiper-wrapperにvisbleをつける

このサイトを参考に右側だけ要素を突き抜けて表示しました

カテゴリの色を管理画面で変更して、それを反映して表示させる

HPcode｜カテゴリーの色を管理画面から指定してラベルの背景色とするWordPressカスタマイズ

サイトのとおりに設定していくと投稿→カテゴリーの欄に色を編集という選択肢が出ます。

そこで指定した色を投稿に反映させられるようになります。

タブメニューの切り替えはaタグでできる

See the Pen Untitled by かかみがはら_バク (@qqvkfphs-the-vuer) on CodePen.

aタグで各コンテンツにリンクを繋げ、普段はdisplay:none;で隠しておきます。

aタグをクリックすることで、対応するコンテンツがdisplay:gridがつき、表示されるようになります。

ウィンドウサイズでの出し分けは@media (min-widht: ◯◯px)と書きます

グリッド３分割を１つにまとめるには 1 / -1と書くとコンテンツ幅を全部使った表示になります。

.container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;

  @media (min-width: 750px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media (min-width: 950px) {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }

  .no-img-container {
    grid-column: 1 / -1;
  }
}

wordpressの絶対パスの書き方は

background: url("<https://サイトURL/wp-content/themes/アップロードファイル名/img/画像ファイル名.webp>") center center/cover;

httpで書くと保護されないのでURLに警告が出てしまいます

できるネット｜【セキュリティ】Google Chromeに表示される「保護されていません」警告の意味は？

スワイパーの矢印の端っこに行くと.swiper-button-disabledというクラスがつくから、そこに変化時のプロパティを当てます。

スワイパーの端っこ矢印のホバー変化させたくない場合は

.swiper-button-disabled.swiper-button-next:hover {
  background-image: url("swiper-button-nextと同じ画像");
}

とすることで、変化を見えなくすることができます。

実装までに気をつけたこと

２週間という期限付きの中、難しい実装を行うのに優先順位を付けました。

第一に納期
第二にサイトとしての機能
第三にデザインの整合性

ばく

間に合わせるためにピクセルパーフェクトのズレは諦めました…

自分の実力から時間を逆算し、本番環境にアップしてからトラブルは必ず起こるものと考えて半日~１日は時間が欲しいと出しました。
そうなると前日までにサイト全体を完成させる必要がある。
ピクパを合わせるのに1~2日かかると考え、
それまでにサイト全体を機能させる必要がある
ならばワードプレス化を行いリンクや動的な動きを10日前後で終わらせる必要がある。
ワードプレス化は3~4日は欲しい。
1週間で静的コーディングを終わらせたい。
難しそうな実装のポイントは？最初の3日でトップの半分いかなかったら諦めよう。

とかなんとか考えていました。

ばく

周りの方を見ていると、静的コーディングをガッツリ全部行い、ピクセルパーフェクトをしっかりあわせてからwordpress化している方が多い印象です。

本番環境にアップしてからおきたトラブル

あまりに余裕がなかったのでスクリーンショットも取っていませんが、いくつもトラブルが起きました

本番環境でおきたトラブル

設定した背景画像、SVGが全部消えている
フッターメニューのリンクが動いていない
アニメーション実装忘れ
ドロワーメニューのリンクが動かない
safariでの表示崩れ

直している時間もないので直接テーマファイルエディターからcssを編集し、手作業で一つ一つ画像パスやリンクを直しています。

二度とないようにしたいですね。

もっとスマートに作業できるようにしたいです…。

実案件チャレンジ第三回反省会 |まとめ

ばく

一人反省会＆学びをまとめました！

　2週間でボリュームのある実装を行った実案件チャレンジでしたが、前回が全く間に合ってないので今回こそはと頑張りました。

時間を逆算して、かかる時間を考えて

不慣れな実装、不明な動きはAIにきいて

起きている時間はひたすらコードを書いていました。

2週間で下層ページ含む6ページをコーディング

トータル62.5H

学びになったこと

ヘッダー変化の追加
タグ名はサイトに丸投げ
スライダーを浮かせるのはmarginでできる
カテゴリ、タグはphp一つで出しわけられる
カテゴリ一覧は固定ページから作る
タブメニューの切り替えはaタグで行える
カテゴリの色を設定できる
grid-column:1 / -1;で幅全体を使える
絶対パスの書き方はbackground: url("https://サイトURL/wp-content/themes/アップロードファイル名/img/画像ファイル名.webp");