メニューとコンテンツの完全2分割になってます。

それでは本題。

今回は、テーマのfuction.phpに書いたいろんなソースを忘れないようにメモエントリーします。

余計なヘッダ要素を消す。

<?php
remove_action( 'wp_head', 'feed_links_extra', 3 );
remove_action( 'wp_head', 'feed_links', 2 );
remove_action( 'wp_head', 'rsd_link' );
remove_action( 'wp_head', 'wlwmanifest_link' );
remove_action( 'wp_head', 'index_rel_link' );
remove_action( 'wp_head', 'parent_post_rel_link', 10, 0 );
remove_action( 'wp_head', 'start_post_rel_link', 10, 0 );
remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0 );
remove_action( 'wp_head', 'wp_generator' );
?>

このフィルターは、wp-includes/default-filters.phpの202行目あたりにあるので用途に応じて取捨選択します。

remove_actionとは

ベースURLを定義する

<?php
function baseurl($baseurl = 'http://samplehogehoge.com/' ) {
	return "$baseurl";
}
?>
// 使用例
<img src="<?php echo baseurl(); ?>shared/images/logo.gif" alt="ロゴ" />

記事内のテキストを置換

ローカル環境の画像パスとWP上のパスが違うときに使ってます。便利です。

<?php
function replace_text_wps($text){
    $replace = array(
        // '元の単語' => '置換する単語'
        '"../shared/' => '"http://samplehogehoge.com/hoge/shared/',
    );
    $text = str_replace(array_keys($replace), $replace, $text);
    return $text;
}
add_filter('the_content', 'replace_text_wps');
?>

ブログIDで条件分岐

<?php
// ブログIDの取得
global $blog_id;

if ( $blog_id == 1 ){
?>
ブログIDが「1」のときに表示させるもの。
<?php
} else {
?>
「1」ではないとき。
<?php
}
?>

否定のみ。

<?php
if ( $blog_id != 1 ){
?>
「1」ではないとき。
<?php
}
?>

ページスラッグを取得

// 変数名は自由
<?php
$pagename = get_page_uri($post->ID);
?>
// 出力
<?php echo $pagename; ?>

親のページスラッグを取得

// 変数名は自由
<?php
global $wp_query;
if( empty($wp_query->post->post_parent) ) {
	$parent = $wp_query->post->ID;}
else {
	$parent = $wp_query->post->post_parent;
}
	$parent = wp_get_single_post($parent);
?>
// 出力
<?php echo $parent->post_name; ?>

去る2011年6月18日、HTML5-WEST.jpの村岡正和氏が主催されている「第7回HTML5読書会」に参加してきました。第1回に参加してから実に6回ぶり。羽田野太巳氏の「徹底解説HTML5」を読み進める会です。色々と興味深い内容がありましたが、figure要素からの話の流れで、altコンテンツ属性（以下alt属性）について重要な議論がありました。今後のマークアップの考え方にも重要な意味があると思い、読書会と本の内容を踏まえつつ、独自に復習してみました。
※alt属性を指定すると、画像がリンク切れなどで表示されない場合は代替テキストが表示されます。また、スクリーンリーダーはaltタグの文章を読み上げます。
以下のような画面のコーディングを考えてみましょう。

これまでのコーディング

alt属性はHTML4では、画像の代替テキストとして使用されます。なので「ラベンダー畑の画像」などの文章を入れていました。

altに与えられた新しい役割

HTML4ではイメージを簡単に説明する代替テキストで良かったので、上記のような表記で良かったのですが、HTML5からは「フォールバック」という役割が与えられることになります。

もしイメージが表示されなかったとしても、ドキュメントの意味を損なわず、イメージの代役を果たすことが求められるのです。

イメージの代役を果たすというのは、イメージの前後の文章と、altコンテンツ属性のテキストをつなげて読み上げたときに、違和感なくユーザーに伝わることなのです。

引用元：「徹底解説HTML5」羽田野太巳著

「徹底解説HTML5」の中では、電話越しにイメージを説明することを想定して考えると良いとあります。
なるほど。なるほど。

これまでもalt属性はアクセシビリティのために使用されていましたが、さらに厳密にアクセシビリティに配慮して使用していく必要性が出てきたということですね。

では今回のケースでは具体的にどのように設定すべきか考えてみましょう。

イメージのタイトルをalt属性に入れない

alt属性に「爽やかな青空の下で一面に広がる鮮やかな紫色のラベンダー畑」と入れてみました。

一見、画像の情報は伝わりますし、良さそうなのですが、画像を詳しく説明していたとしても、alt属性に画像のタイトルとなるような文字を入れてはいけないようです。

このような書き方の場合は、イメージのタイトルとしての情報になりますので、alt属性ではなく、title属性で指定する形が正しいようです。

フォールバック的な設定

画像をテキストに代えて読んでも、スクリーンリーダーで順番に読み上げられても、イメージが表示されているのと同じ内容が違和感なく伝わらなければいけません。

なので、alt属性に「爽やかな青空の下で鮮やかな紫色のラベンダーが一面に広がっています。」と指定しました。

これであれば、全てテキストで表示された際も、
「この季節、北海道ではラベンダーが見どころの一つです。爽やかな青空の下で鮮やかな紫色のラベンダーが一面に広がっています。壮大な景観に感動」
と内容に繋がりを持たせつつ、情報を伝えることができているのではないでしょうか。

上記は使い方のほんの一例で、HTML5ではalt属性の使い方がかなり細かく規定されているようです。title属性とalt属性の使い分けや考え方は、実務の中でも今から慣れていく必要がありますね。次回以降の読書会でalt属性が記述されている個所がでてくるので、それまでに事前に勉強しておこうと思います。

京都GTUG（http://www.kyoto-gtug.org/home/）
HTML5-WEST.jp（http://www.html5-west.jp/）

まず、携帯版はPHP5以降じゃないと動きません。

携帯版はページの一番最後に1×1pxの画像を出してごにょごにょするのですが、
その画像のパスが切れてて「×」マークが出ている場合はPHPのバージョンを疑ってみてください。

バージョンが分からない場合は、

<?php phpinfo(); ?>

と記述してphpinfo.phpと名前をつけて、サーバにアップします。

そこにアクセスするとPHP情報がずらり。
バージョンも書いてあります。
確認した後は削除しましょう。

※このphpファイル、後で使います。

一番楽な方法は
「php.iniなどでPHPのバージョンを最新に変えてやる」

ですが、今回はPHP4の環境でないと不都合が生じたため、
無理くりアナリティクスをPHP4にねじ込みました。

やることはざっと以下のとおりです。

アナリティクスが使っている、PHP5からしか使えない関数を
PHP4でも使えるように（も）できるライブラリ（PEAR※）をインストールする。
↓

ga.php（アナリティクス）からそのライブラリの必要な部分だけを読みに行かせる。
↓

結果:既存のシステムを弄らずに（PHPの環境を変えずに）
アナリティクスが入ってみんな幸せ。

※PEAR：PHP Extension and Application Repositoryの略で「ペア」と発音するそうです。

1．go-pear.phpをダウンロード

PEARをブラウザ上で管理できるツールを入れます。

http://pear.php.net/go-pearの全文をコピペ（もしくは右クリして名前をつけて保存）
してgo-pear.phpという名前をつけて保存。

2．サーバにアップロード

携帯サイトのディレクトリに「pear」というディレクトリを作って、その中にアップします。
できればbasic認証をかけておくと安全ですね。

3．ブラウザでgo-pear.phpにアクセスする

go-pear.phpフォルダまでのアドレスを叩きます。
例）http://www.samplehogehoge.com/m/pear/go-pear.php

4．インストール画面があらわれた。たたかいますか？

→たたかう
にげる

勇者はNext >>　をクリック。

特にどこも変更せず、Installボタンをクリック。

4-1．（番外編）！！！エラーを吐き出した！！！

同じようなエラーが出たら、この章を読んでください。
スムーズにいけたら5へワープ。

なぞのじゅもん

Parse error: syntax error, unexpected ‘(‘, expecting ‘}’ in (インストール先のパス)/temp/PEAR/Installer.php on line 811

だめだ負けそう。

たたかう
にげる
ぼうぎょ
→どうぐ

やくそう・・じゃなくて

この原因が分からずにドツボにはまっちゃいました。
大元が構文エラーってどうゆうことやねん!!

いろいろ調べてみても同じ症例は見つからず・・・

小一、二時間苦悶した結果、ﾋﾟﾗﾒｷｰﾉ☆

原因はPHP4の環境でインストールしてるから

でした。

では、一時的にPHP5で動く環境にします。
（サーバのコントロールパネルなどで設定できない場合は）
以下のどうぐを装備しましょう。

php.ini
.htaccess

PHP5にするためのphp.iniの情報はサーバのコンパネなどで参照できると思います。

.htaccessには、

AddHandler x-httpd-php528 .php
（改行）

と記述しておきます。

最後の行は必ず改行を入れましょうね。
.htaccessのルールらしいです。

そして、2つをgo-pear.phpを入れたディレクトリにアップします。

以上でOKです。
※この2つのファイルは最後に削除します。

もう一度、最初からインストールしましょう。

5．インストール完了。・・？

これでPEARが仲間になりましたね。

キラキラ☆

管理画面のURLを叩きまｓ・・

http://www.samplehogehoge.com/m/pear/

！！！まさかの不意打ち！！！

Fatal error: No PEAR.php in supplied PEAR directory: @pear_dir@ in (PEARまでのパス) on line 24

次につまづくのがここです。

6．index.phpを書き換える

pearディレクトリにindex.phpというファイルが出来ているので、
それを一旦ローカルに落とします。

8行目に

$pear_dir = '@pear_dir@'; // default of install

という記述があります。
これを自分の環境に合わせて書き換える必要があります。

インストール後に生成された「PEAR」ディレクトリまでのパスを入れます。

パスがよく分からない場合は、
一番最初に作ったphpinfo.phpを「PEAR」ディレクトリにアップします。

画面下の方にある「Environment」の「SCRIPT_FILENAME」欄に
phpinfo.phpまでのパスが書いてありますので、そこを参照してください。

$pear_dir = '～～～～/pear/PEAR'; // default of install

index.phpを書き換えたら同じ場所へアップします。

7．PHP_Compatをインストール

管理画面にもう一度アクセスして、

画面一番下の「Quick-install a package」に

PHP_Compat-1.6.0a3

と入力してInstallボタンをクリック。

今度はすんなりインストールできましたね。

ここまできたら、先程のphp.iniと.htaccessのPHPバージョンの記述を削除してPHP4の環境に戻しましょう。
（.htaccess本体はbasic認証かけてる場合は削除しちゃったらだめです）

と、今回はここまで（汗）

次回はいよいよアナリティクスを入れます!!

ではまた☆

epubを勉強している過程でaudio要素を使う機会があったので、試してみたところ「楽」の一言につきましたので、ネタ的には今さら的な感じがしますが備忘録を兼ね紹介しようと思います。

動画や音楽ファイルをWeb上で扱う場合は、FlashなりMediaPlayerなりの準備をする必要があるのですが、HTML５ではファイルをaudio要素（もしくはvideo要素）で指定するだけ。超かんたん。

<audio src="hoge/hoge.mp3" autoplay="" controls="" loop=""></audio>

• autoplay属性⇒ autoplay  もしくは autoplay=”" で自動再生を設定
• controls属性⇒ controls もしくは controls=”" で制御用のプレイヤーを表示
• loop属性⇒ loop もしくは loop=”" でループ再生を設定

（video要素も同様です。）

control属性を指定するとこんなプレイヤーが表示されます。画像はGoogle Chrome のものです。

プレイヤーはブラウザによって表示が異なるのが少し難儀ですよね。でもJavaScriptを使えば簡単な数行のコードでオリジナルのプレイヤーも実装できます。今回は再生と停止ボタンを実装してみます。

まずはHTMLの設定。定義リストを使って設定してみました。

<dl>
<dt>BGM</dt>
<dd><audio src="hoge/hoge.mp3" autoplay="" controls="" loop="" id="audio"></audio></dd>
<dd><button id="play"><img src="hoge/hoge/hoge.gif" alt="再生" /></button></dd>
<dd><button id="pause"><img src="hoge/hoge/hoge.gif" alt="停止" /></button></dd>
</dl>

オリジナルデザインにするのでcontrol属性は指定していません。JavaScriptの判別用にaudio要素とbutton要素にそれぞれidを設定します。

JavaScriptのコードは以下を記述（外部ファイルでも直接でも可）します。

(function () {
	var audio = null;
	window.addEventListener("load",function() {
		audio = document.getElementById("audio");

		/* 再生 */
		document.getElementById("play").addEventListener("click", playAudio, false);

		/* 停止 */
		document.getElementById("pause").addEventListener("click", pauseAudio, false);

		},false);

	/* 再生 */
	function playAudio(evt) {
		evt.target.disabled = true;
		document.getElementById("pause").disabled = false;
		audio.play();
	}

	/* 停止 */
	function pauseAudio(evt) {
		evt.target.disabled = true;
		document.getElementById("play").disabled = false;
		audio.pause();
	}

})();

id=”audio”を取得し、id=”play”・id=”pause”を振られた要素をクリックすると、playAudioもしくはpauseAudioが実行される仕組みです。すると下記のようなプレイヤーが使えるようになります。（epub縦書き用のプレイヤーだったので縦並びのボタンになりました。）

再生・停止だけではなく、音量表示・音量の上げ下げ・ミュートや再生秒数などもJavaScriptで設定できます。video要素もほとんど同じように実装できるので、プレイヤーのソーステンプレートを用意しておくと効率的になりそうです。

参考：
徹底解説HTML5マークアップガイドブック（羽田野 太巳 著）

長いです!!

STEP1　インストールしよう

1.最新版のwordpress（以下WP）をダウンロードし、解凍
http://ja.wordpress.org/

2.FTPでアップロード

ルートディレクトリに、wordpressフォルダをまるっとアップします。（※）
（個人的にフォルダ名を「wp」とするのが好きです。http://samplehogehoge.com/wp/となるように）

※注意
パーミッション（属性）の設定は以下のとおりにします。

フォルダ･･･755
PHPファイル･･･644

その他のファイルはデフォルトでOK。

アップロード時に設定したパーミッションに自動変換する方法はこちらを参照

●NextFTP
http://www.toxsoft.com/nextftp/manual/uploadattrib.html
●FFFTP
http://www.rururubu.com/info/frsoft/ffftp/003/index.htm#04

3.インストール

http://samplehogehoge.com/wp/（WPをインストールしたディレクトリ）へアクセスします。

「設定ファイルを作成する」ボタンをクリック。
（直接wp-config.phpに書き込む方法もありますが、自動で作ってもらいましょう。
そのほうが早いです。）

データベース名・・・・お客様ID（もしくは自分で作ったDBの名前）
ユーザー名・・・・お客様ID
パスワード・・・・PHPMyAdminやコンパネにログインするときのパスワード
データベースのホスト名・・・・ hostname:3307　※
テーブル接頭辞・・・・ wp_（任意）

※hostnameには、CPIコントロールパネルの、
お客様情報 ＞ プログラムのパスとサーバの情報の「データベース情報」
MySQL 5.0.45 のhostnameが入ります。

その次に、サイト名やログインIDやパスワードを入力して指示通りインストール。

インストール、ログイン成功!!

やった!!と思った貴方。

適当にブログ記事を日本語で投稿して保存か公開してみてください。

・・・

白紙に戻ってますよねーorz

日本語は保存されないんです。

STEP2　php.iniと.htaccessを入れよう

ここがポイントとなります!!
CPIサーバで一番厄介でつまづくところ。

1.php.iniを準備

元となる記述は、CPIコントロールパネルの、
お客様情報 ＞ プログラムのパスとサーバの情報
「PHP iniの設定情報」から最新の（2011.05.06時点）
PHP 5.2.8へ。

リンク先の「PHP 5.2.8の設定情報」のテキスト全文をコピーして、
テキストエディタにペーストします。

2.php.iniを編集

さっき、なぜ日本語が保存されなかったかというと
デフォルトのままだと文字コードの不一致を起しているからなんです。
（WPはUTF-8、CPIのデフォルトのphp.iniはEUC-JPとなっています。）

そこで以下の2箇所を変更します。

mbstring.internal_encoding = EUC-JP
→mbstring.internal_encoding = UTF-8

mbstring.encoding_translation = On
→mbstring.encoding_translation = Off

ローカルのwpフォルダ直下にphp.iniと名前をつけ保存。（sjisでOK）

3. .htaccessを準備

以下の記述をした、.htaccessを作ります。（sjisでOK）

AddHandler x-httpd-php528 .php
suPHP_ConfigPath /usr/home/お客様ID/html/wp/
Options +FollowSymLinks

※「x-httpd-php528」の数字はバージョンによって変わります。
今回はPHP 5.2.8なので528

※suPHP_ConfigPath /usr/home/お客様ID/html/wp/
は、php.iniを置く場所です。

※Options +FollowSymLinks
は、mod_rewriteをする際に必要な記述

4.php.iniと.htaccessをアップロード

FTP上のwpフォルダ直下にアップロードします。（※）

※注意
.htaccessのパーミッションは「666」にします。
（パーマリンク設定の際に自動的に書き込まれるようにするためです。
この設定が済んだら、「644」に変更することをおすすめします。）

以上!!

これで無事WPが使える環境が整いました。
めでたしめでたし♪

次は、WPのインストールディレクトリとは別の階層に公開ディレクトリを作る方法をまとめたいと思います。
お楽しみにー

今回は、wordpressのデフォルトのウィジェットを使わずに最新記事（最近の投稿）を表示させるウィジェットを作ろうの巻です。←長い

さらに＋αで
カテゴリのスラッグを出力する方法をご紹介します。

デフォルトの最新記事のウィジェットって
タイトルと表示する投稿数しか融通きかないので、
ユーザー名も表示させたい!!ってとき困りますよね。

用意するもの
・ウィジェットでPHPが使えるようにするプラグイン
今回は「PHP Widgetify」
を使用しました。

ソースはこちら。

<ul>
<!--?php query_posts('orderby=modified&post_type=post&posts_per_page=3'); ?-->
<!--?php while (have_posts()) : the_post(); ?-->
	<li>
<span><a href="<?php echo get_author_posts_url($author); ?>/<?php the_author_login(); ?>"><!--?php the_author(); ?--></a>さん</span>
<a href="<?php the_permalink() ?>"><!--?php the_title(); ?--></a></li>
<!--?php endwhile; ?-->
<!--?php wp_reset_query();?--></ul>

ここで、表示する投稿数を決めます。

※2011.5.12修正

orderby=modified（変更順）・・・過去の記事を編集したら最新記事に上がってしまう。
↓
orderby=date（日付順）

<ul>
<!--?php query_posts('orderby=date&post_type=post&posts_per_page=3'); ?-->
<!--?php while (have_posts()) : the_post(); ?-->
 <li>
<span><a href="<?php echo get_author_posts_url($author); ?>/<?php the_author_login(); ?>"><!--?php the_author(); ?--></a>さん</span>
<a href="<?php the_permalink() ?>"><!--?php the_title(); ?--></a></li>
<!--?php endwhile; ?-->
<!--?php wp_reset_query();?--></ul>

posts_per_page=3

投稿者＋投稿者別アーカイブへのリンクの出力

<span><a href="<?php echo get_author_posts_url($author); ?>/
<?php the_author_login(); ?>"><?php the_author(); ?></a>さん</span>

※アーカイブへのリンクのソースはパーマリンク設定によってそのまま使えない場合があります。

さらに。

記事のカテゴリごとに色やアイコンを変えたいという場合もあると思います。

そういうときは、カテゴリのスラッグ（=フォルダ名??）を出力してクラスをあててやりましょう。

ソースはこちら。
liにクラスをふるのを想定してます。

<li class="<?php
    $cat = get_the_category();
    $catslug = $cat[0]->category_nicename;
    echo $catslug;
?>">

お試しあれ～♪

よちよち歩きPHPerのおはぎでした。

worpressっていいものですね･･･

ということで今回は、javascript関連の記事を書きます。
ブログの新着情報をトップページに表示したい！！という時ってよくありますよね———————。

Google AJAX Feed APIを使うと簡単にできます。

Google AJAX Feed APIとはatomやRSS を取得して表示するためのJavaScript APIです。

Google Feed API JavaScript reference

google.feeds.Feedクラスのloadメソッドを使うと簡単にＲＳＳを取得できます。

以下は、取得したＲＳＳを「タイトル（日付）」で一覧表示するサンプルです。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript"><!--
google.load("feeds", "1");
function initialize() {
var feedurl = "取得したいＲＳＳのＵＲＬ";
var feed = new google.feeds.Feed(feedurl);
feed.setNumEntries(20);
feed.load(dispfeed);
function dispfeed(result){
if (!result.error){
var container = document.getElementById("feed");
var htmlstr = "";
htmlstr += "<dl>";
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
htmlstr += "<dt>"
htmlstr += '<a href="' + entry.link + '" target="blank">' + entry.title + '</a>';
htmlstr += "</dt>"
htmlstr += "<dd>"
var strdate = createDateString(entry.publishedDate);
htmlstr += "  " + strdate + "";
htmlstr += "</dd>"
}
htmlstr += "</dl>";
container.innerHTML = htmlstr;
}else{
alert(result.error.code + ":" + result.error.message);
}
}
}
function createDateString(publishedDate){
var pdate = new Date(publishedDate);
var pday = pdate.getDate();
if(pday<10){pday="0"+pday;}
var pmonth = pdate.getMonth() + 1;
if(pmonth<10){pmonth="0"+pmonth;}
var pyear = pdate.getFullYear();
var phour = pdate.getHours();
var pminute = pdate.getMinutes();
var psecond = pdate.getSeconds();
var strdate = "(" + pyear + "年" + pmonth + "月" + pday + "日)";
return strdate;
}
google.setOnLoadCallback(initialize);
// --></script>
<div id="feed"></div>

の今日は、三宮、吹雪いてました。寒い・・・

今回は前回の続きで、Zen codingのデフォルトのインデントを消す方法を説明します。

ドアズは、基本的にノーインデントという方針上このデフォルトの設定が邪魔なのです。

Zen codingはDWにインストール済みですね？
初めて使うという方は、こちらの記事をどうぞ。

まずは、Zen codingの設定類が入っているフォルダを開きます。

Windows7の場合はここ↓
C:\Users\コンピュータ名\AppData\Roaming\Adobe\Dreamweaver 9\Configuration\Commands\ZenCoding

その他OSの方は、とりあえずAdobeのフォルダ＞DWのフォルダを探し当ててください（人任せ）

その中から、zen_editor.jsというファイルを開きます。

この関数の中の記述をこう変えます。

var zen_editor = (function(){
（「var zen_editor = (function(){」で文字列検索してください）

【変更前】

indent_size = 1;
indent_tabs = 'TRUE',

【変更後】

indent_size = 0,
indent_tabs = 'FALSE',

それから、ここの記述をこう変えます。

var indent_str = zen_coding.repeatString(

【変更前】

dw_use_tabs.toUpperCase() == 'TRUE'? '\t' : ' ',

【変更後】

dw_use_tabs.toUpperCase() == 'TRUE'? '\t' : '',

以上！！

このZen coding、一番使ってるのが、ul+とdl+です。
地味に便利ですよコレ。

雑談：

今朝、未明に女の人の叫び声で目が覚めて、119しようか本気で迷いました。
帰り道が恐ろしい今日このごろ。

自宅のドアを開けたらメッタ刺しな世の中ですものね。
うちにはお金はありませんので、来ないでください。

今回はたまには使うことがあるかもしれない？？twitter OAuth認証について書きます。

twitter側の手順

• twitterアカウント作成します。
• アプリを登録　　https://twitter.com/apps
• Consumer key :  　例99kmIfzxxxxxxxxxxxx
  Consumer secret:　例f1q0l7OAIxMD4xxxxxxxxxxxxxxxxxxxxx
  を取得します。

PHPライブラリ
↓はtwitter OAuth認証を簡単に設置できるPHPライブラリです。
abraham-twitteroauth

PHPライブラリ側の手順
config.phpに「Consumer key」「Consumer secret」「OAUTH_CALLBACK」を記入

example
index.php内に/* Some example calls */という項目があります。
そこを確認すると大体どのように使えるのかがあわかります。
試しに書いてみました。
$connection->post(‘statuses/update’, array(‘status’ => ‘oauthテストー！’));
↑は、oauth認証すると、と「oauthテストー！」と勝手にツイートするサンプルコードです。

twitter　APIについては、ここで確認
http://watcher.moe-nifty.com/memo/docs/twitterAPI.txt

2011年初エントリー。
今回はZen Codingについてご紹介します。
Zen Cording（ゼンコーディング）とは、HTMLやCSSでマークアップをする際の簡潔な記述法で、
慣れればコーディングスピードがウン十倍にもなるとかならないとか。

私はDreamWeaverの入力補助機能で十分じゃないのー？という感じだったんですが、
物は試しで、ついに導入してみました。

DreamWeaver用はこちら。

（現時点での最新版はVer.0.7.1ですが、私が入れたのはVer.0.7です。）
http://code.google.com/p/zen-coding/downloads/detail?name=Zen.Coding-Dreamweaver.v0.7.1.zip&can=2&q=

解凍して、mxpファイルを開くとDWの拡張機能のウィンドウが開くので、
「承諾する」を選んで、インストール。

そしてDW再起動。

導入は以上。カンタン★

Zen Codingはこんな感じで入力します。
CSSのセレクタを書く感覚に似ていますね。

#header+#main+#footer

一行書いたら、Ctrl+,で展開!!
▼展開後

<div id="header"></div>
<div id="main"></div>
<div id="footer"></div>

#header>ul.menu>li*3>a

一行書いたら、Ctrl+,で展開!!
▼展開後

<div id="header">
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>

おおおおおおおおお（驚）
liの掛け算便利!!

基本的なルールは・・・

+ はタグを繋げる
> は入れ子
* はタグを繰り返す
# はid（divはタグを省略可）
. はclass（divはタグを省略可）

という風になっています。
Ctrl+,で展開と書きましたが、Tabでもいけます。

（インデントなし派の方は、Tabを使うと他の場面で不都合が出てきちゃうのでCtrl+,で。
次回紹介しますね。）

お、この機能も素敵。
子要素を包括している系のタグ、dlやul、ol、tableなどは
お尻に「+」をつけると

dl+
（Ctrl+,で展開!!）

<dl>
<dt></dt>
<dd></dd>
</dl>

一発でドン!!
早いーーー!!

すごい気持ちいいサンプル

div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer.

展開してみてください（笑）
数学の式のようですね。

実際にはここまでできません自分。

コマンドのチートシートはこちら。
http://code.google.com/p/zen-coding/downloads/detail?name=ZenCodingCheatSheet.pdf

デモでZen Codingを体感できます。
http://techblog.yahoo.co.jp/cat207/web_1/_zencoding/

あと、地味に便利だったのが、Alt+右矢印、Alt+左矢印です。

タグ同士の間や、タグ内の「”"」といった、テキストを入れるべき場所だけにカーソルをちょんちょんと移動させられるんです。

と、なかなかの好感触だったので、早く慣れて実務でガシガシ書きたいなーー!!

次回は、Zen Cordingのデフォルトのインデントを消す方法を紹介しますね。