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

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

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

channel amplifizr(チャンネル アンプリファイザー)が面白い件

岡山で活躍されているクリエイターさん(?)@maeponさんと@ohtsuki2843のUSTREAM番組です。
ちなみに、このお二人はCSS NITE岡山などを主催されている有名な方で、今日配信された長谷川さんのAutomagicにもご出演されてました。
一回目の放送を偶然ツイッターか何かで見つけて、なんとなくアフター配信まで聞いてしまいました。

USTのページには「岡山を拠点にWeb制作に携わっている中年親父2人が、Web全般に関する話題を適当に見繕って適当に盛り上がる、適当な番組です。」なんて書いてありますが、かなりWEBに関する深いところを突いていてとても面白かったです。なんか、会社でエンジニア同士がだべってる感じ?大変失礼な表現です。
というか岡山熱いですね。ちょっとうらやましい。

本日、そんなchannel amplifizrの2回目の放送があるようなので、シェアします。

配信は23:00~なので、ちょっと遅めですが、良かったらご覧ください。
僕も、家でブログのメンテナンスをしながら聞く予定。それまでに仕事をorz

channel amplifizr(チャンネル アンプリファイザー)

web制作の効率を高めてくれると思う5つのツール

web制作を行なっている人の多くが納期やら急な対応やらに追われてギリギリ状態であると思います。
(それが楽しくてやってる部分も多いんですが)
「クオリティを保ったまま、楽をしたい」というのは誰もが思う事じゃないでしょうか。
僕も日々制作をする中で、できるだけ楽をしたいと思っています。
今日は、実際に制作を行なう中で使っているツールをご紹介します。

1.リネームツール

もはや手放せません。特定の命名規則に基づいてファイル名を変換してくれるツール。
会社ではwinなので「Flexible Renamer」を使っています。
Flexible Renamerは、とても高性能で「文字列+連番」とか「大文字→小文字」といった変換や「頭から◯文字を削除」といった事もできるので、提供画像が「画像1.JPG」みたいにどうしようもない場合でも一発で変換できてしまいます。

インターフェースが少しマニアックなのが玉に瑕ですけど・・・慣れれば平気です。

2.クリップボード拡張ツール

コーディングをしている時に、よく使う文字列や使いまわす文字列などをクリップボードに入れておきコマンド一つで呼び出せるようになります。これも鉄板です。
win環境では「clibor」を使っています。
cliborは、過去24個の履歴と「定型文」として事前に登録しておいた文字列を呼び出せます。

3.zen-cording

言わずと知れたコーディング補助機能です。それほどゴリゴリとHTMLを書かないのですが、

<ul class="hoge">
     <li class="list01"><a href="#"></a></li>
     <li class="list02"><a href="#"></a></li>
     <li class="list03"><a href="#"></a></li>
     <li class="list04"><a href="#"></a></li>
     <li class="list05"><a href="#"></a></li>
     <li class="list06"><a href="#"></a></li>
     <li class="list07"><a href="#"></a></li>
     <li class="list08"><a href="#"></a></li>
     <li class="list09"><a href="#"></a></li>
</ul>

こんなのを書く時にコピペを多用して書いてもいいんですが、zen-cordingなら
ul.hoge>li.list0$*9>a
とたった一行でかけてしまいます。常にzen-cordingで書くという訳ではありませんが、
上記のようなルーチン的な構造の場合は使うようにしています。

4.css spriteジェネレータ

初めて使ったときはまさに青天の霹靂でした。
web制作をする際には、できるだけspriteにして画像をまとめるようにしています。
以前は、デザインから切り出し→パーツをphotoshopでsprite画像にまとめる→cssを全て自分で書く
という完全手作業で行なっていたんですが(慣れてたので割と早く作れたと思っていますが・・・)
ジェネレータを使えば切り出し以後の処理を自動で行なってくれます。
僕は、Stitches An HTML5 sprite sheet generatorというサービスを使っていますが、生成されたsprite画像とcssをダウンロードして画像は、状況に応じてjpgに変換、cssはクラス名のみ手作業で書き換えて使っています。
正確には全自動ではないのですが、かなり作業効率が上がりましたし、この作業を行なうときの「さてやるぞ」という気合いも不要でsprite画像の処理ができるようになったのはとても大きいです!

5.SNSをオフにする精神力

実はこれが一番大切なのかもしれません。そして、残念ながら僕は持ち合わせておりませんorz

これが全てではありませんが、なるべく効率的に作業を行って、限られた時間を有効に使いたいものですね。皆さんが使ってるツールなどあれば、ぜひ教えてください!