[デイトラ 2nd]参加レポート 最終課題

プログラミング

こんにちは、フレッシュマンSRです。

東京フリーランスさんが提供している学習プログラム「30DAYSトライアル 2nd」に挑戦していましたが、ついに完遂することができました。

DAY16までのレポートはこちら

DAY17からDAY26までのレポートはこちら

この記事では、僕が実際に30DAYSトライアル 2nd(以下デイトラ)に挑戦してみた簡単な感想、そして難易度について書いていきます。

30DAYSトライアルの始め方!|東京フリーランス

最終課題の進め方

今までの課題は、自分のペースで行うことができました。 

絶対に30日で終わらせなければいけないわけではないので、余裕があるなら1日で2, 3日分の課題をこなしたり、逆に難しい課題は2, 3日かけてやったりすることもできます。

しかし、最終課題は実際に案件を受けた時を想定して作られた課題なので、3日間で完成させるよう指示が出ています。

僕は以下のようなスケジュールで、最終課題をこなしました。

  • 1日目(金曜日):PCサイト静的コーディング(3時間30分)
  • 2日目(土曜日):レスポンシブ対応・jQuery実装(6時間47分)
  • 3日目(日曜日):PerfectPixelを使って修正・テスト(6時間30分)

トータルで完成までに17時間弱かかりました。

よほどコーディングの早い人でもない限り、完成までに10時間以上はかかると思うので、休日に取り組むのが良いと思います。

ちなみに、テスト作業は指示されていませんが、本番の案件を想定するならば可能な限りやっておくほうが良いと思います。

特に重要なのはPerfectPixel。 デザインカンプと自分が作ったページのずれがよく分かります。

1日目

とにかく初日は、レスポンシブやjQueryは後回しにして、PC版の見た目を最後まで作ることに集中しました。

とにかく今までデイトラで学んできたことが活きました。

なんといっても、多くの部分でコードの使いまわしがききます。

今まで課題に取り組む中で作ってきたコードスニペットが無かったら、1日でここまでサイトを作ることはできなかったです。

ちなみに、1日目終了時点で未実装の要素は以下の通りです。

  • ホバー時の処理
  • スライダー
  • アコーディオン
  • Googleマップの埋め込み

2日目

2日目はレスポンシブ対応がメインの作業。

ホバー時の処理やフォームのデザイン、アコーディオンなど、1日目では実装しきれなかった要素もこの2日目で整えました。

ちなみに、フォームのテキストエリアのデザインは、以前やった課題とは異なります。

このサイトが参考になります。

コピペでできる!cssとhtmlのみでフォームのテキストエリアをわかりやすくするデザイン15選

また、フォームのカスタマイズなど、課題をクリアするには疑似要素の理解が不可欠です。

基本的なことかもしれませんが、content: ‘ ‘;絶対省略しないように。

これを忘れると何も表示されなくなります。 現に僕はこれに最終日まで気づきませんでした。

参考になるのはこちらの記事。

【CSS】疑似要素の画像サイズを変更する方法

2日目終了時点で未実装の要素は以下の通りです。

  • ドロワーメニュー
  • スライダー

3日目

ついに最終日に突入。 この日で完成させなければいけません。

まず最初の課題はドロワーの作成。

今回はメインコンテンツもスライドさせる必要があります。

以下のサイトは以前も紹介したサイトですが、「メインコンテンツもスライド」の部分が今回の課題とほぼ同じ形なので、参考にしました。

【jQuery】ドロワーメニュー 横からスライド表示するメニュー

次の課題はスライダーですが、レスポンシブ対応をJavaScript内でする必要があります。

こちらのサイトの「画面幅によってレイアウトを変える」で分かりやすく解説されています。

サンプル付き!簡単にスライドを作れるライブラリSwiper.js超解説(基礎編)

 

見た目は完成しましたが、実務を想定するなら、大切なのはここからです。

実務では、納品前のテストが欠かせません。

PerfectPixel用の画像がデイトラサイトに用意されているので、完成したらチェックしてみるとそのずれっぷりに気づくはずです。

決してデザインカンプの作者さんを悪く言うつもりはないのですが、はっきり言ってデザインカンプのデータ値はあまり参考になりません

フッターの「HANIWAMAN Corp.」の部分は、XDのカンプではフォントに「Berlin Sans FB」というフォントが設定されていましたが、実際はカンプ上でも画像でも、完全に「Montserrat」(標準で使うよう指示されたフォント)でした。

1px単位で完璧にそろえる必要はないと思いますが、大きくずれているところは調整すべきです。

 

他に僕がやったテストは以下の通り。 DAY19の課題でやったものです。

W3Cチェック

HTMLおよびCSSの細かい間違いをチェックできるW3Cチェック。

僕はCSSで「0」(ゼロ)と「o」(小文字のオー)の間違いを指摘されました。

こういう細かい間違いは自分では気づけないので、作業完成後はW3Cチェックを習慣づけるとよいのかなと思っています。

見出し構造が不自然ではないか

サルワカさんの記事をもとに、見出しタグを設定しました。

【HTML】見出しタグの使い方:h1〜h6はどう使い分ける?

こんな感じでいいと思います。

altが正しく設定されているか

画像ALTチェッカーは使いませんでした。

imgタグで埋め込んだ画像は数枚程度なので、目視で確認できる範疇だと思います。

閉じタグの確認

閉じタグがない場合、W3Cチェックでエラーが発生します

W3Cチェックでエラーが無ければ、タグについても問題ないと思います。

水平スクロールしないか

前回は苦労した部分ですが、今回は全く悩まされず終えることができました。

基本的にレスポンシブ時は、widthを100%にするのが基本です。

左右に余白が開いているときは、calcを使うと便利です。

width: calc(100% - 32px); // 画面幅に応じて幅を決める(左右16pxの余白分短くする)

margin: 0 auto; // 左右のmarginをautoにすることで、32px / 2 = 16px分の余白を左右に付けることができる

IEチェック

WindowsなのでSafariは省略しました。

Chromeで開発していれば、Firefoxは問題ないんじゃないかと思います。

問題はEdge。そしてIEです。

EdgeとIEでは、外見上2つの問題点がありました。

・アコーディオンを開いた際、質問部と回答部の間に細い線が出てしまう。

これは、「border-radius」を設定した要素を隣接させていると、要素間に細い線が出てしまうというEdge、IE特有の不具合のようです。

border-radius設定時、IE11だと隣接要素との間に薄く線が入る(隙間ができる)

・ドロップダウンメニューの矢印アイコン(SVG)が表示されない

SVGを背景画像に設定したとき、設定次第では、EdgeとIEでうまく表示されなくなります。

以下のサイトを参考にSVGファイルを直接いじったりしてみたけれどダメでした。

[Web][Microsoft Edge]CSS内でSVGを背景画像に指定した際にEdgeで表示されない問題(viewBoxっぽい)

以上2つはビジュアルだけの問題なので、最悪「仕様です」の一言で押し切ることも可能です。

 

本当の問題はここからです。

IEでは一部JavaScriptが全く動きません。

Swiperもこのザマです。 全く使えません。

本当は可能な限り修正したかったのですが、時間がぎりぎりだったのと、テストが課題に含まれていなかったことから断念しました。

しかし、これはIE使用者にとって致命的な不具合なので、実際の案件であれば、修正に応じなければいけません。

IEでは一部JavaScriptの関数が使用できないようになっているので、動的サイトをIE向けに出すならば、その処理がIEで動くか、逐一確認しなければいけません。

IE非対応のJavascriptをまとめてみた

「IEチェックしている」と言うと、これらのチェックをし、IEで動くよう、JavaScriptを書き換えたり使えないプラグインやライブラリの代用を探す必要があるということを肝に銘じておいてください。

まとめ

駆け足になりましたが、最終課題のレポートは以上です。

最終課題はそれなりに難しいですし、3日で終わらせなければいけないというプレッシャーもありますが、できると自分に自信がつきます。

今後の課題は製作途中でほったらかしになっているポートフォリオサイトの改修、および公開です。 デイトラ1stの記事を参考にする予定です。

デイトラのWebアプリも3月以降リニューアルするそうなので、4月になったら、WordPressを学べる上級(現在の3rdと同等)にチャレンジするつもりです。

デイトラに参加されている皆さん、これからもお互い頑張りましょう!

コメント

タイトルとURLをコピーしました