生でTextMate×Zen-Codingをやってみた

先日の告知通り、昨晩22時から「Zen-Codingを使うとコーディングがどうなるか」的なものをUStreamを使ってやってみました。事前に多くの方がご紹介くださったり、途中元祖ダダ漏れなそらのさんが登場するなどの効果もあってか、Max時は180名超の皆様の目の前で「打ち間違いの多いコーディング」を披露してしまうこととなりました(笑)。

当日ご覧くださった皆様、Twitterなどでご紹介くださった皆様ありがとうございました。まずは、この場を借りてお礼を。

生コーディングの現場で起きていたこと

今回のあのネタは事前に予行練習なんかせず、頭の中である程度構造を作っておいてほぼぶっつけ本番でやってみました。昨晩はTextMateを使っていましたが、他の環境でも同じようになるように「Zen-Codingでできること」だけで作業をしました。

ある程度入力内容が見えるように文字サイズを大きくしたりで作業が若干しにくいとかもありましたが、「こういう書き方もできるし、こういう書き方もできる」みたいなことをやりつつも、大体40分ほどで終わったんじゃないかと。最後におまけでGoogleのPage Speedを使ったCSSのMinify化の手順なんかも入れて。実際はリンク先を入れたり微調整もあったりするので、あのぐらいの内容で1時間程度でしょうか。

実際ボクがコーディングする時の手順は、先にHTMLの情報構造をマークアップしてからdiv要素でラップしていくんですが、今回はZen-Codingの機能がわかりやすいように先にdiv要素でブロックの構造を作ってから中に個々の要素を入れていますので、その辺を踏まえて録画ファイルはご覧ください。

それよりも昨晩我が家の室内温度が低く、寒くてガクブルしながらのコーディングだったことをお知らせしておきたい(笑)。

録画ファイルはいくつかありますので…

で、今回その様子をまるっと録画をするつもりでいたのですが、HTMLを書き終える頃に「ハッ!録画してないじゃん!」ということを思い出してしまいました…。つまり、最初の録画分はCSS編だけ…。Zen-Codingの凄いとこは略語ベースの入力もそうですが、どちらかと言えば特定の記述で構造を展開できるHTML書くときの方だろうということで、HTML編だけ再録がてら後からアゲイン(笑)。

昨晩の生放送の時は、途中「画像はドラッグできないの?」とか質問を頂いていたので、今朝あらためてTextMateの機能もフルに使いながらで「完全版(約40分)」を再録しています。それと、構造を書きながらコピペじゃなく、普通のテキスト書類に対してタグを付けていくというスタイルのも録画しておきました(こちらは約10分)。

最後に。これを見て「なんだHTMLとCSSでWebサイト作るのってこんな簡単なんだ」とは思わないでくださいね(特に依頼される立場の方は 笑)。最近のWebサイト制作では、IAやUX的な部分、SEO的な部分をはじめとして成果をあげるために考えることが多く、実装作業以前の段階でかなり頭と時間を使います。この作業だけを見てしまうと簡単そうに思えるかも知れませんが、これも事前に頭の中でどうしようかな?って考えているからできることですので、そこのところよろしくお願いいたします。

#あ、そうだ。Zen-Codingのチートシートはここにあります。

Tags: , ,

   

Comments are closed.


Performance Optimization WordPress Plugins by W3 EDGE