で、あれも欲しいこれも欲しいなんて思いながらウロウロしたあげく、1冊だけ本を購入しました。それがピエ・ブックスから出ている「禅語 zengo」。

ボクには38年ぐらい前に曹洞宗の寺にもらわれて育てられたというバックボーンがあるからか、どうしてもこの類の本にも興味があります（宗教どうこうではなく人生哲学的な部分で）。これまで何冊かの禅や禅語に関する本を買ってますが、このてのものは禅語とその解説、書などを並べて構成されてまして、解説自体は平易に書かれているといってもその道のプロというか僧侶や研究者が書いてることが多いものです。

今回買ったこちらの「禅語」は、禅語とその解説、内容にあう写真をあわせて展開するというピエ・ブックスのシリーズのひとつです。本文執筆は、占いなどをされている石井ゆかりさんによるものです。お仕事柄だと思われますが、自分の経験や周囲の状況をまじえた柔らかい文章で書かれていて、非常に読みやすいものになっています。

毎日気を張って生きていくのも大変ですから、たまにはこんな本でも読んで心に安らぎでも与えてみてはどうですか？ 難しいことは何も書かれていませんから。

→ 禅語（Amazon.co.jp）

サッカーの日本代表が勝てないのも技術どうこうというより、実はその辺に問題があるからではないかということが指摘された（今はそういった研修がおこなわれているらしい）、といった内容でした。

言語力とは、物事を論理的に考え、それを書いたり話したりする力を指す。この検定が始まった背景には、今教育現場や企業など様々な現場で「話し言葉をそのまま作文に書く中学生」、「面接で想定外の質問をされると答えられない学生」、「営業報告書がまともに書けない若手社員」が相次ぎ、言語力の低下が進んでいることがある。
http://www.nhk.or.jp/tsuiseki/file/list/100130.html

ボクのことを知ってる方は「好きそうねえ…」って言いそうですが、人間とか思考とかその辺が大好きなボクはどうしても気になるので、例によってAmazonさんでいろいろ本を物色するという行動に出るわけですね。

と、そんな前振りから始めて、今回は最近買った本の紹介を。

こもりは2冊の本に出会った〜（ウルルン風で）

「言語力」をキーワードに検索してみると、昨年から始まった「言語力検定」の対策テキスト、小中学校の教員用のテキストなどが出てきました。といっても、それを買ってもなんなので、それから繋がっていく本をパラパラとチェックしていくとある2冊の本に出会いました。

ひとつは「自分を育てるのは自分」、もうひとつは「教え上手」という本です。

10代の君たちへ　自分を育てるのは自分（東井義雄）

「10代の君たちへ」というサブタイトルがついているように、この本は「教育界の国宝」とか「伝説の教師」と言われている東井義雄先生の講演をまとめたものになります。ボクは東井さんを存じ上げなかったわけですが、子供たちにむけて語られるその話は大人が聞いてもためになるというか、すっかり忘れていたことを思い出させてくれるかもしれません。

東井先生は「バカにはなるな」と子供たちに説くわけですが、その「バカ」とは決して勉強の出来不出来ではありません。当たり前の話です。学校の勉強ができるできないなんてどうでもいいことで、「自分を大事にしない人がバカ」ということです。

道にいい道、悪い道というのがあるのではない。
その道をどんな風に生きるかという、その生きざまによって、良く見える道も悪くなったり、悪く見える道も良くなったりするんですね。
自分を育てるのは自分（東井義雄）

仰るとおりでございます（笑）。
よく「自分は不幸だ」とか「何をやってもうまくいかない」なんて嘆いてる人がいますが、そもそもそうなってしまったのはこれまでの自分のやってきた結果であることの方が多いわけです。しかし、残念ながら大人であってもそれに気付けず、周りのせいにしたりする人も思いの外多い。

周りを変えられないのなら、自分が変わればいいだけです。いろいろな人がいてくれるおかげで自分が生きていられるということをちゃんと認識しましょう。

風邪をひきたくなければ、ひかないように日頃から注意したり予防線をはるような努力はできます。将来太りたくなければ、日頃から太らないように気をつけていればよいだけの話。酒で失敗したくなければ飲み過ぎないように自制しないと。良くするのも悪くするのも自分なんです。

自分が自分の主人公。
自分を立派に育てていく責任者。
自分を育てるのは自分（東井義雄）

また、この本に書かれていることなんですが、人生を72年として自分の歳を3で割る。これを1日24時間にあてはめると36歳でお昼12時。

ボクはそろそろ38だから3で割ると12と2余ります。余りの2は1時間の2/3で40分となり、そろそろ12時40分です。こう考えるとのんびりはしてられません、がんばらないと日が暮れてしまう…。24歳なら朝の8時。寝て起きて朝の準備時間が終わった頃でしょうか。これから素敵な1日のはじまりですね。

とまぁ、大人であってもあらためて気付かされることがあるでしょう。ボーッと今をなんとなく生きてることが恥ずかしく感じられるようなエピソードもいっぱいです。お子さんがいらっしゃる方にも話のネタとしてオススメしたい一冊です。

→自分を育てるのは自分—10代の君たちへ（Amazon.co.jp）

教え上手（有田和正）

こちらは「教育界のカリスマ」という有田和正さんの本です。

教えたいことがたくさんあるとき、初対面の相手に教えないといけないとき、どうしても叱らなければならないとき、何をどの順番で教えるか悩んだとき、——あなたの力量が、そこにあらわれる。
教え上手（有田和正）

ボク自身もここ数年セミナーや講師として人前で話す機会が増えてきました。会社員だった頃は、後輩に何かを教えるのにどうすればいいか、なんてことも考えてたわけですが、人前で話すことはおろか「教える」といったことを習ったことはありません。それでも自分なりに試行錯誤しながらやってきたことは果たして良かったのか、って思いながらこの本を買ってみたというわけです。

このブログなんかでもそうなんですが、ボクは「すべてを教えない」傾向にあります。時としてそれは「中途半端」だの言われたりもしますが、すべてを手取り足取り教えるよりはヒントを与え、あとは自分自身の力で調べるなりやってみて欲しいからそうしています。実際、教えるどころかイラッとするようなことをわざと言ったりもするので（笑）、「むかつく」「くそー！」って思ってる人も多いんじゃないかと（もちろん人によって使ったり使わなかったりですが）。

いまどきはネットで検索すれば答えを見つけることもできます。しかし、「答えが見つかりませんでした」という人の多くは検索するという行為は知っていても、「どのような言葉を組み合わせれば求めるものが見つかるか」「書く人の立場になったら、どういう言い回しにするか」という風に思考を発展させることができてないようです。何かを知りたければ、その答えが見つかるように問わないと。

答えばかりたくさん教わってる人に、問う力を備えることはできません。
教え上手（有田和正）

つまり、答えだけを教わったとしても、そこに至るまでの過程がわからなければ応用には結びつきません。何事も基本をしっかり身につけて、自分の頭で考えて試してみることが大事なんです。

答えをすぐには教えず、自分の頭で考えさせる。結論を急がず、即答を要求せず、ゆっくり考えさせる。あえて大事なポイントを隠してヒントだけ与える。わざとあいまいなことや間違ったことを提示して、固定観念や既成概念にゆさぶりをかける。
教え上手（有田和正）

なんとなく後押しされてる気がします（笑）。

残念ながらボクの置かれている今の状況は、腰を据えて誰かを教え込むというより、限られた数時間の中でできるかぎり多くのことを伝えるという形になってしまうので「教え惜しみ」みたいなことはできないんですけどね…。

こちらの本、「教え上手」という人はどういう人をさすのか、といったことにはじまって人間性やらまでに話は及びます。「自ら考え、行動する人材をいかに育てるか」といった悩みを解決する手助けにもなってくれるでしょう。

教えることは人生のいろいろな場面で出てきます。学校教育だけでなく、社会人教育の場でもあてはまることが多く書かれていますが、決してそのような教える技術だけを解説した本ではありません。人を惹きつけるにはどうしたらいいか、そういった内容が多く含まれています。教える側はもちろん、教わる側の人にも読んで欲しいかな。こちらもいろいろな方にオススメします。

→教え上手（Amazon.co.jp）

と、言語力の話はどこ行ったんだろう？って感じですが、どちらにも言語力が含まれていることだからいいですかね（笑）。

よく見るといろいろ変わっているようです（※クリックで拡大）。

年末のエントリーでは表示パフォーマンスが大事かとか簡単な使い方程度しか書いてないので、今回は気が向いたのでPage Speed 1.6βをベースにそこに挙げられている項目をひとつひとつ取り上げてみようかと思います。

長いので気合いを入れてください（笑）。

Page Speed 1.6β、それぞれの項目はこんな感じですよ

細かい改善手法についてまでは解説しませんが、Yahoo!さんのYSlow!同様日本語化されてるわけではないので、それぞれの項目がどういうことを言ってるのかぐらいがわかる程度の簡単なもので（笑）。

ちなみにうちのこのブログを使って検証した結果をもとに上の図にある順番になっています。これはサイト毎に全然変わった結果になると思いますので、ご自身のサイトで赤いエクスクラメーションマークがついてるとこを重点的に読んでみてくださいね。

Minimize request size

バージョン1.6βから新たに登場した「Minimize request size」は、HTTPリクエスト時のデータサイズを抑えようみたいなことでしょうか。これが大きい場合は遅延が起きてしまうみたいな話かと。解決方法としては、クッキーのサイズを少なくするとか、画像なんかはクッキーのつかないドメインから送るとかですね。

Combine external JavaScript

外部から読み込んでる複数のJavaScriptは、できれば結合しましょうってことです。ブラウザによっては、JavaScriptの並行ダウンロードができなかったりするので、複数のJavaScriptを読み込んでいる場合は速度低下を引き起こします（30個とか読んでたらそりゃ遅いっすよ、どことは言いませんけど 笑）。結合できるものはできるだけ結合した方が良いってことですね。数は少ない方が理想的です。

Minimize DNS lookups

DNSの参照を減らしましょうってこと。いまどきのWebサイトは自分とこのサーバ以外の外部サーバからいろいろなデータを取得していることもあるでしょう（バナーだったり）。外部のサーバへのリクエストが増えた場合は、どうしても接続時にそのサーバのDNSの問い合わせが発生しますから、これが結果的に遅延に繋がるということになります（※GoogleさんのPublic DNSは表向きこの遅延解消が目的のようです）。

Use efficient CSS selectors

効率的なCSSのセレクタを使いましょうってことです。簡単に言えば、冗長なというか長ったらしいCSSのセレクタはやめましょうって話。だらだら長い子孫セレクタとかね。CSSの継承とかclassをうまく使ってシンプルに。「ul#nav li.listitems（要素名+id 要素名.class）」のような書き方しないで「.listitems」でいいんじゃない？みたいな感じです。

Leverage browser caching

ブラウザのキャッシュが有効になるようにしようってことです。もちろん普通一度見たデータはローカルにキャッシュされますけど、他のサイトをみたら順繰りに入れ替わります（キャッシュの容量で）。画像などの更新頻度が少ないファイルに有効期限などを設定しておけば、再閲覧時にHTTPリクエストがきても「304 Not Modified」が返されてローカルのファイルが利用されると。ヘッダのやりとりだけで終われば、余計な転送もいらなくなって表示が速くなるわけです。有効期限の設定は、Apacheの場合は「mod_expire」なんかで設定できます（参考程度の設定例）。

Leverage proxy caching

プロキシ経由の接続もあるので、ブラウザ同様にキャッシュが効くようにしておきましょうねってことです。「Cache-control」ヘッダをくっつけておこう的な話です。ただこれに関しては、条件次第ではCache-controlの値に注意が必要のようです。詳しくはマニュアルを参照で。

Minify HTML

「Minify」とは、余分な空白やコメントなどを除去することです。そうすることでデータの転送量を減らすことが可能です（Gzip圧縮がかけられるんだったら別にそこまでって気もしますが）。HTMLには、空白やいらない改行、コメントなども腐るほど入ってるでしょうから、その辺のゴミは取った方が転送データ量を減らすことができるってわけです（チリも積もればなんとやら 笑）。

Minify CSS

こちらもHTML同様です。チーム単位での作業などではCSSに成形のためのインデントなんかが含まれますね。そのようないらないスペースやセレクタに含まれる余分な空白（値の中も）は取っ払いましょうということです。ちなみにPage Speedでは、自動的にMinify化されたCSSが保存されてますので、それを見ればどういうことかわかるでしょうし、場合によってはそれを使えば話は早いです（笑）。

Minify JavaScript

こちらも同じですね。JavaScriptのコードもできたらMinify化しましょうねと。

Remove unused CSS

使ってないCSSは取り除きましょう。付け足し付け足ししてるといつの間にか使わなくなったスタイル指示なんかがゴミになってるはずです。

Avoid bad requests

いらないリクエストをなくそうということです。簡単に言えば、404なんかのことです。ファイルへのリンクがはずれてるにもかかわらずリクエストを送るのは無駄ってことです。いろんなWebサイトでたまに見かけます（笑）。

Combine external CSS

外部のCSSファイルを結合しましょうということです。JavaScriptとはちょっと話が違いますが、@importを使って多段階でCSSを読ませたりするとブラウザによっては遅くなります（IE6とか）。そんなことしてたらHTTPリクエストが何回も発生するわけで、いくら並行ダウンロードができるといっても遅くなるのは当然です（笑）。できるだけ読み込むCSSの数は減らしましょう。

Enable compression

可能であれば、HTMLやCSS、JavaScriptといったテキストベースのファイルはサーバ側でGzip圧縮をかけましょうということ。既に圧縮されている画像以外はまとめてどーんと。これはApacheだと「mod_gzip」や「mod_deflate」で設定すれば可能です。圧縮率にもよりますが、転送データ量は大体1/3ぐらいになるかなと。古い携帯電話とかだとGzipに対応してないのに対応してるヘッダを送ったりすることがあるようなので、そのような対象の場合は注意が必要です。

Minimize redirects

そのまんまでリダイレクトを減らしましょう。コンテンツが移動したりするとHTMLのヘッダとかで別ページに飛ばしたりしてるとこもあるようですが、サーバ側でリライトをかけてリダイレクトするとかした方が良いってことです。

Optimize images

画像を最適化しましょうということです。PhotoshopとかFireworksで書き出しただけのデータは、そのままではいらんもんがついていたりしてなにげにでかいのです。同じ画像でもGIFよりもPNGの方が最終的には軽くなります。Pagespeedでも自動的に最適化した画像が保存されます。それ以前に最初から最適化するなら、そのためのツールやオンラインサービス（Smush.it™やpunypng）があるので利用してみましょう。

Optimize the order of styles and scripts

HTMLの<head>の中のCSSとJavaScriptの順番にも注意しましょう。外部JavaScriptの読み込み指示がある場合は、そこで一旦並行ダウンロードが止まります。ソースを直接書いてる場合は、できることならCSSの読み込みの前にあった方が良いです。「<link>→<script>→<script>→<link>」みたいになってたらどういうことが起こるか想像できますね。ページの描画に直接関係のないJavaScriptなどは、</body>の前で読ませると良いですね。そうしておけば、JavaScriptが読めないブラウザがみても困ることはありません（笑）。

Put CSS in the document head

CSSは<head>の中に。style要素にしてもlink要素の読み込みにしても。

Serve resources from consistent URL

「consistent」は「一貫した」とかそんな意味です。Webサイト中のいろんなページから参照するCSSだったりJSなんかは、バラバラとおかないで同じものを利用しましょうってことでしょうか。同じものを別場所からダウンロードさせるほどアホなことはありません。

Serve scaled images

実際の使用サイズの画像を使いましょうってことでしょうか。大きめの画像をHTML側でリサイズしたりするのはやめましょうってことです。画像データはテキストなんかに比べて大きいですから、実際の使用サイズできちんと貼っておいた方が良いのは当たり前ですね。

Specify a character set early

文字コードの指定は冒頭の方でってことでしょう。新しく追加された内容でヘルプもないようです（笑）。

Specify image dimensions

img要素には幅と高さを入れておきましょうということです。HTMLとCSSがダウンロードされれば、Webページは画像データのダウンロードが終わらなくてもページのレイアウトは可能です。その際、あらかじめ画像の大きさがわかっていた方がリフローなんかが起きないと。回線が速いとわかりにくいかもしれませんが、遅いとよくわかるんじゃないかなぁ。

Avoid CSS expressions

IEの7までで使える「CSS expressions」を使うのはやめましょうということです。

Defer loading of JavaScript

ページのロード時に呼び出されないJavaScriptのファンクションなどは後からロードしようってことでしょうかね。

Parallelize downloads accross hostnames

複数のホストを使って並行ダウンロードをしましょうってことですね。DNSの参照と相反する感じですが、ブラウザは1ホストあたりの並行ダウンロード数が決まっています（2だったり、4だったり、6だったり）。例えば大きめの画像は回線の速いサーバからダウンロードさせるとか、その並行ダウンロードの特徴を使えば工夫次第で速くなるってわけです。

Serve static content from a cookieless domain

静的なコンテンツといっていいかわかりませんが、画像やCSSのようなファイルはできるだけクッキーがくっつかないドメインから送りましょうと。冒頭のリクエストサイズに絡んだ話になってきますかね。うちも昨日からテンプレートで使い回すような画像はクッキーのないところから送るように変更しました。

といった感じで、うちもできることはやってます

といった感じでいかがでしょうか。真面目に翻訳するというよりは何となく意味が理解してもらいやすいように書いたつもりですが。

以前も書きましたが、必ずしもテストして点数が良ければいいってわけでもないです。自分たちでできることできないこと、やったほうがいいことそうでないことを見極めて最適化を図ってみてください。閲覧デバイスも多様化してきますし、回線品質が貧弱な環境はいっぱいありますよ、世の中には。

うちも最近は画像を大きめにしてるので、ファイルの配信構成などを見直しました（テンプレートの画像はクッキーのない別ホストから送るとかいろいろ）。今回紹介したPage Speedだけでなく、YSlow!でもどうぞご自由にお試しください（やれることはやってるつもりなので）。

Webサイトの表示パフォーマンスアップはどうすればいいのかとかのお悩み相談も承りますよ（笑）。

内容は、Webサイトの企画立案的なことから制作や開発、公開後の話にいたるまで、いまどきのWeb制作において「これぐらいは知っておきたい」といったことを総合的にまとめた教科書とでもいいましょうか。今回は「これを覚えるならこういった本を読むといいかも」といった感じで参考書籍の紹介もしっかり入れてます。

発売されたらまた改めて取り上げたいと思いますが、情報が公開されていたので取り急ぎお知らせまで。インプレスダイレクトやAmazonなどで予約受付中です。

標準ウェブ制作完全ガイド 〜プランニングからデザイン、そしてシステム構築まで。Webの「仕事」がトータルに理解できるプロフェッショナル養成講座

著者: 松岡清一 監修／MdN編集部 編　ページ数: 344p

→ 標準ウェブ制作完全ガイド（impress Direct: 見本・目次あり）
→ 標準ウェブ制作完全ガイド（Amazon.co.jp）

でも、Zen-CodingをTextMate以外で使おうとするとグッと選択肢が減ります。Mac使いの皆さんがお使いのエディタといえば、CodaやskEdit、miあたりが有名どころです。良かった！Codaならコマンドの違いはありますが、その恩恵にあずかれますよ（笑）。

（追記）Zen-CodingのDreamweaver用のMXP（ダウンロードはこの辺で）でも、以下の操作と同じショートカットで略語や構造の展開はできるみたいです。

Codaでやるなら「TEA for Coda」をインストール

前々回のエントリーにも書いておきましたが、現在Coda用のプラグインは「TEA for Coda」という名前で公開されていますので、とりあえず公開されているファイルをダウンロードしてダブルクリックなりでインストールしましょう。

このTEA for Codaは、もともとはテキストエディタのアクション集でZen-Codingも使えるようにしてるって感じなんでしょうか。細かい操作方法についてはマニュアルを読んでいただくとして、TextMate用のZen-Codingとは、ショートカットキーなどが若干違うとこがありますのでその辺のフォローをしてみましょう。

展開のショートカットは、「Ctrl+,（カンマ）」

一番最後に用意したデモの冒頭ではわざとらしく略語ベースのスニペットを展開できないフリを入れてしまってますが、CodaでZen-Codingの略語を展開するには「TAB」や「Cmd+E」ではなく「Ctrl+,（カンマ）」を入力します。

たとえば、link要素でCSSの参照を指定したければ、「link:css」と書いて「Ctrl+,」を入力すれば展開されます。それ以外の略語ベースの展開もこのショートカットを使います。「div」を展開すれば「<div></div>」が入るってわけです。

前のエントリーで紹介したHTMLの文書構造を書いてそれを展開する方法も同様です。記述さえ合っていればちゃんと展開されますので、オフィシャルサイトのマニュアル（そもそものZen-Codingのも）を参照してください。

では、最後におまけでCodaでやってるとこを。
※フルスクリーンにしてScalingをOFFにすると見やすいですよ

Coda with TEA for Coda from komori, masaaki on Vimeo.

＃余談ですが、TextMateのそれと違って、Coda版の略語や展開されるコードはプラグインのファイルの中に格納されてます。.pyになってるのでPythonでどうこうしないと書き換えられないかもしれませんね。

HTMLのストラクチャ的なものがわかっていれば、特定の記述をして展開すると一気にコードが書けちゃったりします（どちらかと言えば、こっちが本当のZen-Codingなんでしょう）。

ということで、今回はその特定の記述とやらの話をしてみましょう。ここまで使えるようになってくると実に速い…（はず 笑）。

文書構造がわかってれば、1行書いて一気に展開できる

Zen-Codingは、前回紹介したような登録された略語を使ってHTMLとCSSのコードを展開する使い方だけでなく、特定の記述を使って構造を書き上げて一気に展開することができます。TextMateを使っている方はこちらのリストにある「Zen.Coding-TextMate.v0.5.zip」も忘れずに入れておきましょう。

たとえば、上図の中段下あたりにある

div#coding>h1#textmate-with-zen+p.tagline

を入力して、「Cmd+E（Coda版とDWのMXP版は、Ctrl+,）」で展開すると下記のコードがどーんと入ります。

<div id="coding">
 <h1 id="textmate-with-zen"></h1>
 <p class="tagline"></p>
</div>

この書式を見てすぐ気付く方もいると思いますが、まるでCSSのセレクタを書くかのように、「#」でid属性、「.」でclass属性、「>」で階層、「+」で隣接している要素を繋げられます。つまり、HTMLの文書構造が明確で頭の中で書くことが決まっている場合は、1行で書いて展開した方が圧倒的に速いってわけです。
※idは「Cmd+3」、classは「Cmd+2」のショートカットもある。

同じ事の繰り返しは「*」、数字を付けるなら「$」

構造がわかっていればこのように簡単に展開できますが、HTML文書というのは同じ要素の繰り返しというのも結構な確率で登場します。たとえば、ナビゲーションのli要素だったり、定型のdivとhとpの繰り返しだったり。

そんな時は「*繰り返す回数」を付け加えればオッケイ。

ul#nav>li*3>a

と書いて展開すれば、

<ul id="nav">
 <li><a href=""></a></li>
 <li><a href=""></a></li>
 <li><a href=""></a></li>
</ul>

こんな感じでコードが展開されます。TABキー（Shift+TAB）で、それぞれのhref属性とa要素の中身を移動できるので入力もスムーズィー。楽勝です（笑）。

まだあります。時には、連続する同じ要素にidやclass属性を割り当てて、それぞれの属性値に連番を付与しておきたい、といったことも考えられます。そんな時は変数的な意味の「$」を付ければ、自動的に番号が振られます。素敵ですね。

もろもろを組み合わせるとこんな感じになります。

div#box$*3>h3+p*2

と書いて展開すれば、

<div id="box1">
 <h3></h3>
 <p></p>
</div>
<div id="box2">
 <h3></h3>
 <p></p>
</div>
<div id="box3">
 <h3></h3>
 <p></p>
</div>


ほーら、使いたくなってきたでしょー（笑）。

というわけで、前回エントリーの続きということで、単純な略語ベースの展開だけではなくZen-Codingをさらに使いこなすためのいくつかの書式の紹介でした。ほかの記述についてはこちらで確認してみてください。

※一応今回もまた簡単なデモをアップしておきました（どう書こうかなって思いながらなので、なかなか指が進んでませんが 笑）。

Zen-Coding Ext. from komori, masaaki on Vimeo.

Zen-CodingとはもともとTextMateとNetBeans用に書かれたプラグインのことです。HTMLとCSSのコーディング作業をより高速におこなうための機能追加をしてくれるものですね。前述の2つ以外に、AptanaやCoda、Espressoといったエディタ、最近ではDreamweaverのMXPファイルもダウンロードできるようになってます（*1）。

というわけで、今回はボクが普段使っている「TextMate」とZen-Codingの組み合わせでコーディングがどう変わるのかをご紹介しようかと。タイトルに超速とか書いてますけど、まぁどうでしょうかね。

TextMateって何よ

Zen-Codingの話の前に「TextMateがなんぞや」ってところから話しておきますか。TextMateは、欧米のプログラマさんやエンジニアの方の間では超有名なというか大好きな方が多いテキストエディタです（よくビデオのデモなんかでも登場します）。

単純に入力補完ができるぐらいならDreamweaverや他のエディタでも十分なわけですが、このTextMateはあらかじめ登録された略語（といっても頭文字的な）を入力してタブキーで展開することで、必要なコードを一瞬で書ける素敵なエディタなんです。要は最初からマクロだスニペットだが入ってると。もちろん自分の登録したコードに書き換えることもできます。

もちろんHTMLとCSSだけではなく、PHP、JavaScript、Ruby、Pythonなどをはじめ数え切れないほどの言語に対応してます。それぞれの言語毎にバンドル（プラグインみたいなもの）が公開されてるので、新規で追加したりアップデートすればどんどん拡張していくことができるのも特徴のひとつでしょうか。ちなみにこの方法を模したWindowsのエディタに「InType」ってのがあります。

ただ残念なことにこのTextMate、現在のバージョンでは日本語の取り扱いが下手でして…（*2）。それをどうにかするには、SafariStandなどでも有名なhetima.comさんで公開されているプラグイン「CJK-Input.tmplugin」を導入してどうにか…なんですね。実際、骨組みだけ作る段階ではあんまり関係ないんですけどね、日本語。

とまぁ、そんなエディタです。

TextMateの基本的な使い方

このTextMateを使ってコーディングするとこういう風になります。

例えば、「doctype」と入力してTABキーをポチッと、

こんな感じで展開されます。ここまではDreamweaverなんかでも見慣れた感じではないでしょうか。で、このリストから目当てのものを選択すると、

こうなっちゃうんですね。

他にも、h1 → TABキーで「<h1 id=”"></h1>」が入力され、カーソルは開始タグと終了タグの間に移動します。その状態で文字列をちょちょっと入力すると自動的にid属性にも同じ内容が入っていくと。複数の属性間の移動もTABキーです。

このような略語ベースの入力以外に、選択範囲を作って後から任意の要素でラップしたり、終了タグやコメントを挿入したりはショートカットでできます。できることを挙げ始めればキリがないぐらい。もちろんこれがHTMLやCSSだけじゃなくて、PHPやJavaScriptでも同様に動作します（*3）。

特定の要素を入れることでそれに適用できる属性が補完され、その中から選択して入力して〜みたいな流れよりは、おそらく数段早いかなぁと。Dreamweaverのスニペットをショートカットなどで反映させるのともちょっと違いますね。

そんなわけでボクは辞書登録（*4）もしてないし使い回しできるコードみたいなのも何も用意してません（作るモノは全部違うしね）。TextMateさまさまです（笑）。

さらにZen-Codingを追加すると…

TextMateにはもともとHTMLとCSSのバンドルがありますが、Zen-Codingはさらにそれらを拡張したものです。冒頭でも書いたようにプラグインの形で公開されているので、ファイルをダウンロードしてダブルクリックすれば自動的にインストールされます（TextMateでもCodaでも）。

では、拡張されてる例を。「html:4t」を展開すると、

こんな感じ。HTML 4.01のTransitionalの文書型からはじまる一連のコードが入ります。これを「html:5」とするとHTML 5のコードがどーんと入力されます（※軽くHTML5のコードも入ってる）。

この「略語:ほげほげ」の記述が良い働きをします。TextMateの標準バンドルでは「html」だけだと開始タグと終了タグしか入りません。「:ほげほげ」は言ってしまえばオプション指定。例えば「link:css」だとスタイルシート、「link:rss」だとRSSのコードが自動的に展開されます。

同じ要領でCSSのスタイル指定もちゃっちゃっと書いていけちゃいます。

他にも標準のバンドルに足りない部分とかも補足されて至れり尽くせり。もう素敵すぎザマス。こういうものを公開してくださって誠にありがとうございます（多謝）。

と、こればっかりは使ってみるか目の前で実演でもされない限り、いまいちわかりにくいんですよね…。ってことで超簡単でのんびりですが4分弱のビデオを撮ってみましたのでそれでもご覧ください（コントローラーで大きくした方がわかりやすいかな）。

TextMate-and-ZenCoding on Vimeo.

最後に。TextMateはOS Xのみですし有償です（トライアルはあり）。Windowsの皆さんはZen-Codingは使えないけどTextMateと同じスタイルで書けるInTypeなど（もう一個あるんだけど失念…）を使ってみると良いかも。

＃InTypeは今月発売のWeb creatorsにちろっと書いておきました。

*1: Codaのプラグインは現在「TEA for Coda」としてメンテされてるのかな？、フルサポートとされてますがTextMateで使うのとは操作が異なります。MXPの方は一部サポートってことですが、正直なところあんまり…（笑）略語から展開する、構造を展開するなどの機能は実装されているようです（うちのCS3ではもっさり動いてます 笑）

*2: 次期バージョンで2バイト文字にも対応するといった感じでしたが、残念ながらいつリリースされるかわかりません…

*3: PHPはSmarty、JavaScriptはjQueryやPrototype、YUIなど用のバンドルも公開されています。バンドルの追加やアップデートはSubversionでやると簡単です

*4: IMEへの単語登録とかは文字数制限とかがあるのでコードをまるっと全部入れることができなかったりします。OS Xな方は「TextExpander（日本語化済）」というユーティリティを使えば、任意の略語を展開してカーソルを移動するといったことが可能です。オフィシャルで公開されているHTMLやCSSのスニペットファイルもあるので、これをベースに改良を加えればTextMateとZen-Codingライクなコーディングが可能かな？、たぶん