見出し画像

アップロード雑感。

naolin@Webデザイン勉強中

ポートフォリオサイトがいよいよ完成し、アップロードする運びとなりました。結果的にアップロードはできたのですが、いざアップしようとする段階でいろいろな問題に直面しまして。。。反省も踏まえて、アップロードまでの道のりを綴っていきたいと思います。

まず、我がポートフォリオサイト…当初のページ数より大幅に増えまして、結構ボリューミーな内容となったのです。これまで「すずらん整骨院」のアップロードには、無料のレンタルサーバーを契約して、お気楽にアップしていたのですが、うーむ、今回は何度アップしてもエラーメッセージが続出。「きっと師走でサーバーが混んでいるのだろう」と素人考えで日を改めてみても、やはりエラー連発。。。画像のファイルサイズを落としてみても、ファイル名が規定に準拠しているか、何度チェックしてもやはりダメでした。

何のことはない、結局はファイルサイズが無料の域を超えていただけだったのですね。。。これに気付くのに１日半費やしました。おまけに、ファイルが重すぎたのか、途中までアップしたものが削除できなくなったりして、にっちもさっちも。ちょうどクリスマスイブのディナーの準備をしながら、お鍋を火にかけてはＰＣ、オーブンの様子を見てはＰＣ…と、キッチンとＰＣの間を何往復したことか。子供たちも楽しみにしている一大イベントの日なのに、準備は気もそぞろ…。結局ファイル削除は、クリスマス当日の朝に無事にできたのでした。

原因が分かれば後は解決するのみ。先生も「お試しなら無料サーバーでもいいですが、ちゃんとサイトを運営していくのであれば有料サーバーを！」とおっしゃっていたので、思い切って有料サーバーを契約してみました。ちょうどキャンペーンで、初期費用が無料の期間だったので即決。いざアップロードしてみると、するする問題なくアップできるではありませんか！あー、こんなことなら、はじめから有料サーバーを契約しておくんだった！でも、苦労したことで、有料サーバーの快適さを身をもって実感できたから、よしとするか。

クリスマスも終わり、無事にアップロードができて、ひとり悦に入っていたところ、、、ふと、「あ、いつもChrome使っているけど、そういえばFireFoxではどうやって見えるんだろ」と、気になって、何気なく開いてみました。すると、、、世にもおぞましい光景が。。。。TOPページのグリッド表示部分がすべて縦並び！自己紹介ページの画像も、大きさがチグハグ、わぁぁぁ、なんてこった！同じコーディングだし、違うブラウザでも同じように見えるものだと信じて疑わなかったのですが、まさかこんなにデザインが崩れているとは。
とりあえず、アップロードしたファイルをいったん削除して、検証してみることに。。。
ここで私は学びました！これまでBracketsからのライブビューは、Chromeでしか見れないものとばかり思っていたのですが、Firefoxを既定ブラウザに選択すると、Firefoxでも見れるようになるのですね。規定ブラウザの設定方法も今回初めて知ることができました。

Firefox上での検証ツールは初めてだったのですが、見よう見真似でカチカチ触っていったところ…どうやら、デザイン崩れを起こしているのは、すべてwidthを計算式（calc）で設定していた箇所ばかり！計算式の書き方がまずかったのか、はたまた、Firefoxと計算式自体の相性が悪いのか、、、そのあたりは分かりませんが、計算式をすべて％に直してみたら、崩れはわりとすぐに直りました。

Firefoxでひととおりデザイン崩れが落ち着いたので、再度Chromeを既定ブラウザにしてチェックしてみることに。すると、今度はTOPページのグリッドレイアウトが微妙にずれているではありませんか。一難去ってまた一難。もともとcalcで設定していた画像幅を%にした影響でしょうか。これも、ひとつひとつ直していかないと。。。と思い、画像のサイズなどを再確認。すると、画像の書き出しの際に、若干のサイズの差異が生じていることが分かりました。FireFoxで実機確認するまでは気づかなかった微妙なズレ。。。ブラウザをまたいで確認したことによって、あぶり出されたミス。
原因が分かったので、該当の画像を再度書き出して画像を交換したところ、微妙なズレ問題も解消されました。

というわけで、山あり谷ありでしたが、何とかひととおり修正が終わったところです。
今回アップした後にミスを見つけたのでヒヤッとしましたが、前向きに考えると、色々なことに気づかされました。
まず、ブラウザをまたいでの実機確認をすること！おかげでBracketsから他のブラウザの確認方法も覚えることができました。

今回の失敗は、「コードが同じなのだから、他のブラウザでも同じように見えるだろう」という、勝手な思い込みから発生したものです。こういう思い込みがいちばん怖い！
先生のお言葉を借りて言えば、ブラウザ間での崩れは、実機で検証しつつ潰していくしか方法がなく、これがWeb最大の悩みとのこと。なるほど、なるほど。
アップロードする前の十分なチェックを肝に銘じて、Firefox以外のブラウザも含め、もう一度最初から実機確認をしていこうと思います。師走の夜はこうして更けていく…。