DAY29の内容は「実店舗のLP制作を進めよう！」になります。
DAY22〜25は実店舗のLP制作を進めながら課題に取り組んできましたが、DAY26は実店舗のLPをできる限り進めて完成を目指します。
完成したと思ったあとに発覚した問題
自分はDAY25の段階で「完成した」と思ってましたが、友人にURLを送付する前に念の為に動作確認してたら、ハンバーガーメニューをタップ(クリック)してもメニューが展開されないという問題を発見してしまいました。
レスポンシブ対応する前はちゃんと展開されていたはずなのに・・・。
何か対応した結果、他のところに問題がでるっていうのはプログラミングのあるあるですね。今回の問題はもろにレスポンシブ対応の影響を受ける場所だったので、ほんと単純にテスト不足です。反省。
原因はタブレット幅の時にグローバルメニュー(navbar)がロゴ(nab-bland)の下に潜り込むような感じになったのを回避しようと、「display: none;」をつけてしまっていたためで、それを削除したら問題は解消されました。
この原因を突き止めるのに1時間ぐらいかかったかな・・・。
レスポンシブ対応では主にCSSを触ったので、CSSに原因がある可能性が高かったのですが、CSSに問題があることを特定するために以下のようなことを試しました。
- 修正していないテンプレートに自分のグローバルメニューのソースをコピーして動作確認
- 自分のソースに修正していないテンプレートのグローバルメニューのソースをコピーして動作確認
これで1つめの確認でハンバーガーメニューが展開されて、2つめの確認で展開されなかったら、修正していないテンプレートではハンバーガーメニューは表示されるという前提があるので、HTMLは問題なくCSSが問題があるということになります。
あとはnavbar周りのスタイルを1つずつコメントにしていって、ハンバーガーメニューが表示されるようになれば、そのコメントしたスタイルが犯人ということになります。
ソースコードやデベロッパーツールを見て原因の特定ができるのが理想ですが、それができない場合は上記のように正常に動作しているプログラムと自分のプログラムを入れ替えての動作確認や、1つずつ修正した内容をロールバック(戻していく)と原因までたどり着くことができます。
それより納品直前に問題が発覚しないようにしっかりと設計・コーディング・テストをしておかないといけないんですけどね。
納品した結果
問題を解決していざ友人にURLを送付。これが今回の納品ということになります。
めちゃくちゃ緊張しました。でもその中にもどんな評価をもらえるかというワクワク感も入り混じってましたね。
友人からの感想は「すっきりして、見やすくて、良い感じとのこと。
一応自分の身内にも見せて感想を聞きましたが、友人と同じような評価をもらえました。
友人、身内補正が入っているかもしれませんが、良い評価をもらえて本当に嬉しいですね。
本当は今すぐにでもURLを貼りたいんですが、友人が親御さんと一緒にやってるお店なので、公開するのは友人が親御さんに承認を得てからになります。
納品環境
今回は実際に公開できるか分からなかったので、無料のレンタルサーバーXFREEのHTMLサーバー機能を契約し、その初期ドメインを使って公開してます。
まだ非公開の状態なので「noindex」をつけてますけどね。
XFREEは自分がこのブログやポートフォリオの公開で契約しているXSERVERの無料版になります。
無料なので容量は1GBで独自SSLは使用できない等とありますが、お試しには十分だと思います。
感想・まとめ
今回はテンプレートにCanvasを使用しましたが、BootstrapというCSSフレームワークの上にCanvasというCSSフレームワークが乗っかっているので、個人的にはすごくやりにくさを感じました。
例えばグリッドのカラムに指定するクラスはBootstrapでは「col-9」などのように指定しますが、Canvasでは「col_one_third」のように指定するなどにめちゃくちゃ戸惑いました。Bootstrapの指定の方法でもOKだったりするし。
特に思い描いているレイアウトがテンプレートになかった日には結局どのクラスを使えば良いねん！！ってなります。
もちろんCanvasのドキュメントもありますが、これで全部か？ってぐらいしか書かれてないですし・・・。自分のドキュメントの見方が悪いだけかもしれませんけど。そもそもHTMLテンプレートにあるやつでレイアウト組んでねってことなんでしょうね。
あとは今回はアニメーションを極力使いたくなかったんですが、どれもこれもいちいちアニメーションがついてるので外すのが面倒でした。
またそのアニメーションのせいか、１発目の読み込みがめちゃ遅い。これは自分のソースコードのせいかもしれんけど。
という感じでCanvasというかHTMLテンプレートには思うところはありますが、テンプレートの内容をきちんと把握して、テンプレートから外れないようにレイアウトを考えればめちゃくちゃサクサク作れるとは思いますよ。
今回自分が作成した「The・日本」的なお店にはCanvasは合っていないとは思いますけど。
次はCanvasは使わずにBootstrapだけでやってみたいと思います。
いつかは今回作成した友人のお店のWebサイトを作りたいと思ってましたが、本格的にWeb制作について学習を始めてからこんなに早く作れるとは思ってませんでしたね。
30DAYSトライアルをやってなかったら、今もなんとな〜く模写コーディングやってふわふわしてたんじゃないかと思うと、独学の人たちに無料で道しるべを作ってくれている30DAYSトライアルは素晴らしいと思います。
まだDAY27〜30までを残してますし、2nd、3rdもあるみたいなので、できるだけペースを上げて突き進んで行きたいと思います。
