Webデザインの提出にかかる手間を少なくする方法
ゴールデンウィーク真っ只中ですが、いかがお過ごしでしょうか。
僕は仕事と、子供たちの世話や遊び相手に追われる日々です…。
Webデザイン・デザインカンプの提出をほんの少し楽にする方法
さて、以前に上記のような記事を書きました。
こちらの提出プログラムの最新版を作成しましたので、ご紹介したいと思います。
前回は、画像のファイル名とHTMLのファイル名一致させることで、HTML内を触らず表示を可能としていましたが、それすらも面倒だということで、
単一のHTMLでURLのパラメータを変更するのみで画像を表示させる方法を考えました。
実際使ってもらえるとわかりやすいかなと思います。
サンプルURLはこちら
ダウンロードはこちら
特徴をご紹介
・単一のHTMLで済むので、準備するのはデザインした画像のみで、HTMLをいちいち増やしたり修正する必要が無い
・パラメータの先頭2文字を「sp」とすることで、viewportをスマホ用に自動的に切り替えることができる。また、画像を100％表示にできる
・指定した画像がみつからない場合は「デザインが見つかりません」と表示します
・もしJavascriptが使えない環境の場合、「Javascriptを有効にしてください」のメッセージを表示します
また、検索エンジンにインデックスされることがないよう、NOINDEX・NOFOLLOWの設定や、ブラウザのキャッシュが残らないような設定をMETA内に記述してます。
デザインを修正して提出したのに、クライアントの「以前と変わってません」が防げるというわけです。完璧ではないかもしれませんが。。
使い方は簡単です
1.画像を用意してjpgで保存します。
ファイル名はなんでも構いません。
「sp.jpg」など「sp」とつけることでスマホ用の画像と認識します。
「images」内に格納します。
2.ファイルをサーバーにアップします。
index.htmlと画像をサーバーにアップします。
例：http://hogehoge.com/design/ ←ここにアップ
3.HTMLにアクセスします。
画像名が「pc.jpg」の場合
例：http://hogehoge.com/design/index.html?p=pc
画像名が「sp.jpg」の場合
例：http://hogehoge.com/design/index.html?p=sp
※インデックスは省いてもOKです。（例：/?p=pc ）
※画像名が「pc01.jpg」なら「?p=pc01」で表示されます。
以上です。
作成するページ数が多いと、提出時の手間や管理も大変かと思います。
この方法なら、画像の作成に集中できて、URLはパラメーターを変更するだけなので管理もしやすいと思います。
時間の短縮など、お役にたてば幸いです。
自分の使いやすいように改造してくださっても結構です。
終わり
Follow me!
