恥ずかしいけど僕流コーディングのワークフローを公開しちゃいます

Pocket
[`evernote` not found]

Advent Calendar in 信州の第一回目です。
これから毎日松本界隈のクリエーターやwebに関わる方が「WEB」をテーマにブログを更新します。

今日は塩原が担当します。
WEB制作の基本ということで、実際に僕が実務の中で行なっているコーディングのワークフローを公開したいと思います。
(大変恥ずかしいですけど・・・)

せっかくなので、実際にコーディングをしてみましょう。
今回は、http://freephotoshopdownload.netからデザインをお借りしました。

1.切り出し

まず、上がってきたデザインを元にコーディングに移るための切り出し作業を行います。
なにげにこれが一番めんどくさいです。

基本的にサーバーへのリクエスト数を減らすために、できる限り一つの画像にまとめてCSS spriteを利用するようにしています。
本文などのイメージ画像、バナーなどの頻繁に更新されるであろうパーツは、単体の画像として用意しています。
(この辺のさじ加減がむずかしい場合もあります。)

ボクはphotoshop派なので作業はもっぱらphotoshopで行なっています。
自分でデザインする場合は、レイヤー効果を多用していますので、レイヤーを保持したまま画像を切り出すと悲惨な事になってしまいます。そんな理由からいつもとりあえず、pngに書き出してから作業をするようにしています。
その時、ロールオーバー画像があったりしたら、その状態のものも書き出します。
最終的に必要な画像が切り出せればいいんですが、ロールオーバー時などでずれると困るので、デフォルト/ロールオーバーと2枚を重ねた状態にしてから作業開始です。
(あとデザインに合わせて、必要な状態で書き出します。)

ここからは、効率よく切り出していけばいいんですが、何かいい方法ありませんかw
結構、人海戦術的行なっている作業です。
僕の場合、簡単なパーツは選択してコピー→sprite用のファイルにペースト
メニューなどスライスした方が早いものは、スライス→sprite用のファイルにペースト
という感じでやっています。

この画像をまとめる作業ですが、オンラインのジェネレータやsassなどを使うと一発できてたりします。
これはすごく便利で、切り出した画像(名前も適当でOK)をアップロードするとまとめられた画像とcssが吐き出されるというものです。すごく便利なんですが、後々のメンテナンス性が悪いかな・・・と。
あとで修正するときに元のファイルがあったほうが良いかと思っています。そんな訳で、面倒でもsprite用の画像は手作業で作るようにしています。

2.HTMLコーディング

画像の用意ができたら、コーディング開始です。
以前、ブログにも書きましたが、特に制約がない場合を除き最近はSumlime Text2でコーディングしています。簡単なzen-cordingができれば、どのエディタでもいいんですけど、やはりレスポンスの良さやjava scriptの補完機能などを考えると、これが一番かと思っています。

コーディングはCMSとスタティックなhtmlとで若干違うのですが、基本的には上の方(デザインの上の方)から大ざっぱなレイアウトを書いて、ページ全体のフレームを組んでから、細かいパーツを作り込んでいます。
途中までですが、HTMLコーディングの様子を動画に撮ってみました。一発撮りなんで細かいところはご愛敬ということでw 10分弱です。掻い摘んでご覧ください。

動画の中でも書いていますが、css spriteは特定のクラスを用意して、そのclassを読み込むとsprite用の画像とaタグであれば、display:blockが指定されるようにしておきます。

.sprite {
     background: url(images/sprite.png) no-repeat 0 0;
     display:block;
}

html側ではこの.spriteと固有のクラスを指定します。

<div class="sprite menuBtn"></div>

後はsprite画像への意味付けとして、この画像を説明する文言をいれますが、僕の場合、1pxの透明gif画像を入れて、そのalt属性に文言を入れるようにしています。
たしか、youtuneなどで用いられている手法だったと思います。

<div class="sprite menuBtn"><img src="images/pix.gif" alt="この画像の説明文" /></div>

text-indent:-9999pxを使ったり、display:noneを使う手法もあります。
どれが良いとかではありませんが、cssで行なうと何かの拍子にうまく文字が消えなかったりetcと気を使う場合もあります。上記の1pxの透明gif画像ですとそういった事はありませんので、その分楽ですね。

アクセシビリティ的にも画像のalt属性は読み上げられるので問題ないかと思います。
富士通ウェブ・アクセシビリティ指針

最後に、この固有のクラスに対して、画像のサイズとsprite画像の座標情報を定義します。

ここで登場するのが、Sprite Cowです。
最近知ったツールなのですが、ボク的にかなり「神」ツールです。この牛そんじょそこらの牛とはわけが違います。
sprite画像(png限定)をアップロードして、座標を取得したい画像をクリックするとその画像のサイズと座標情報を表示してくれます。

あとはこのソースをコピペするだけ。
楽ちんです。

デザインにもよりますが、おおまかなレイアウトとcss spriteの画像がうまく表示されれば、あとは微調整だけです。

3.微調整

微調整は、だいたいcssの調整になりますので、ブラウザで行なう事が多いです。
※ドリームウィーバーなどを使っている方はデザインビューで行なっているかもしれませんね。
ただ、CMSでの制作ですと、サーバに反映させなければならないので、その手間を省くという意味でブラウザでの微調整を行なっています。

chromeなどのブラウザ、ディベロッパーツールで問題がある要素を追っていき、そのまま、ブラウザ上でcssの値を調整して確認します。
そして調整ができたら、元のcssを書き直すという感じです。
chromeで調整したcssをそのまま保存してくれるという裏技もあるようですが・・・僕はまだ試していません。

4.ブラウザチェック

コーディングができたら、最後にブラウザチェックという最後の審判が待ち受けています。
といっても、もっぱらIEですが。
本来ならばIE7以降の環境を用意しておくべきなんでしょうが、なかなかそうゆう訳にもいかないので、
まずは、IE9の開発ツールで表示バージョンを下げて、確認しています。
だいたい、これで確認しておけば、ネイティブ環境と同じような表示になっています。

ちなみに、この表示バージョンの変更ですが、うっかり下げたままにしておくとgoogleのサービスが使えない事があります。そうgoogleもこの擬似表示にだまされているんです。

あとは、あまり好きではありませんが、定番のIETesterで最終チェックですかね。

完成したもの

だいたいこんな手順で作業をしています。
zen-cordingとsprite関係の処理ができるようになってだいぶ効率がよくなりました。
日々新しいテクニックや技術が開発されていますので、規定概念に捕われずに楽できると事はとことん楽をして、業務のフロー改善をしていきたいです。

皆さんもここをこうした方がいいよ!なんてアドバイスがあったらぜひお願いします。

Follow me!

Pocket
[`evernote` not found]

コメントは受け付けていません。