コーディングが爆速に!手放せなくなるZen-Codingの魅力と使い方

コーディングが爆速に!手放せなくなるZen-Codingの魅力と使い方


ホームページを作成する際、納期と戦う必要があります。余裕がある納期であればコーディングにかける時間はある程度確保できたりしますが、前の工程が押し気味である場合、しわ寄せはコーディングに来ます。

普通に書いていたのでは時間のかかるコーディングもできることなら時間短縮しようと様々な工夫がなされたりします。例えば、あらかじめタグを辞書登録しておくというのもその方法の一つです。

しかし、それには限界もありもっとスピードが上がればとかんがえる人もいらっしゃいます。

数年前から話題になっているZEN-Codingを利用することで、コーディングスピードが爆速になり、使いこなせば手放せなくなるツールです。

Zen-Codingってなに?

Zen-CodingはHTML/CSSにおけるコードをショートカット+スニペットで簡略化しながら書くことができるライブラリです。

既存のエディタにプラグインとして導入するライブラリなので、書き慣れた作業環境を崩さず導入できるのがとてもいいことです。

Zen-Codingは以下よりダウンロード出来ます。

Downloads – zen-coding – Project Hosting on Google Code

Zen-Coding

こちらを見てみると色んなテキストエディタやオーサリングツールなどに対応しています。
自分の作業環境にあったファイルをダウンロードしてください。

Zen-Codingを導入してみよう!

今回は、Dreamweaver用のプラグインをダウンロードし導入してみました。

ダウンロードしたファイル

Zen Coding v.0.7.5.mxpをダウンロードし、起動するとADOBE EXTENSION MANAGERが立ち上がります。

Zen-Codingの拡張機能を読み込んだ後、拡張機能に関する免責の画面が表示されるので、こちらを”承諾する”を選択。

Zen-Coding

インストールが完了すると、拡張機能が追加されたことがわかります。

免責事項

どれくらいコーディングが早くなる?

Zen-Codingの使い方ですが、

Zen-Codingで規定されている一文を記述し、文末で”Expand Abbreviation(Ctrl+,)”を入力すると、コーディングに展開されるというものです。

以下の画像をご覧ください。

image04

例として、このように記述しました。

image05

そして、Zen-CodingのメニューからExpand Abbreviationのショートカットキーを押すと最終的に書きたいコードが展開されます。

image06

このようにZen-Codingで規定されている展開前のコードを書き、展開し最終的にパラメータを入力していけば完成します。

全部コードを記述するよりだいぶショートカットになります。

大掛かりなものであればあるほど楽になります。

環境によって、ショートカットコマンドが違いますのでプラグインを入れた後に確認してみてくださいね。Dreamweaverでは、ショートカットも自分好みにカスタマイズ可能ですのでやってみてください。

また、Zen-Codingのサイトから、各タグにおけるチートシートが用意されていますので、そちらを見ると、コマンド一覧が載っていますので参考にしてみてください。

まとめ

短縮できる作業は短縮するに越したことないですが、リアルに作業時間を短縮するのは至難の業です。しかし、Zen-Codingを導入し、使い方をしっかりマスターすれば、思い描いた通りのコーディングが可能になります。

コードをすべて書いていた方、別の方法で作業量短縮を行っていた方は、最初は戸惑うかもしれませんが、マスターしてみて損はないでしょう。

おそらく2,3日Zen-Coding漬けの生活を行えば、難なく習得していると思いますので、ぜひマスターしてみてくださいね。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Articleあたたかな雰囲気のテイストに仕上がる!水彩画テクスチャ30選