CodeKitの新機能「Kit Language」

Macの神アプリ「CodeKit」がバージョンアップして「Kit Language」という新しい機能が追加されました。

これはHTMLにライブラリ機能を提供する機能です。Dremweaverのライブラリ機能や、CMSの共通パーツを外部ファイルにしたりするやつのイメージです。

たとえば次のように色々なHTMLで使い回す共通パーツがあったとします。

<!DOCTYPE HTML>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>CodeKit</title>
</head>
<body>
	(中略)
	<!--共通ナビ-->
	<ul>
		<li><a href="foo.html">list1</a></li>
		<li><a href="foo.html">list2</a></li>
		<li><a href="foo.html">list3</a></li>
		<li><a href="foo.html">list4</a></li>
		<li><a href="foo.html">list5</a></li>
	</ul>
	<!--/共通ナビ-->
	(中略)
</body>
</html>

拡張子をindex.htmlからindex.kitに変更して内容を次のように変更します。

<!DOCTYPE HTML>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	(中略)
	<!-- @include "navi.kit" -->
	(中略)
</body>
</html>

さらに、navi.kitというファイルを作成し次のような内容にします。

	<!--共通ナビ-->
	<ul>
		<li><a href="foo.html">list1</a></li>
		<li><a href="foo.html">list2</a></li>
		<li><a href="foo.html">list3</a></li>
		<li><a href="foo.html">list4</a></li>
		<li><a href="foo.html">list5</a></li>
	</ul>
	<!--/共通ナビ-->

こうすることで、navi.kitもしくはindex.kitを編集することで最初のHTMLがindex.htmlとして書き出されます。便利ですね。

若干使いにくいのは階層によるパスの自動補完がされない所。「./index.html」と「./bar/index.html」で共通パーツを使い回そうとすると共通パーツ内のリンクのパスなどは変えなくてはいけないのですが、それは補完されません。

そこで登場するのが次の変数機能です。

変数機能

変数機能では以下のような構文で変数が定義でき、

<!-- $width = 40px -->

以下のような構文で変数を利用できます。

<div style="width: <!--$width-->;"> Stuff </div>

この構文で出力されるのは以下のHTML

<div style="width: 40px;"> Stuff </div>

これはライブラリ機能と併用できますので、共通パーツをインクルードする際に「./index.html」では次のように設定します。

<!-- $path = ./ -->
<!-- @include "navi.kit" -->

「./bar/index.html」では次のように設定します。

<!-- $path = ../ -->
<!-- @include "navi.kit" -->

navi.kitを次のようにしておくと「./index.html」でも「./bar/index.html」でも共通のファイルへのパスが記述されます。

	<!--共通ナビ-->
	<ul>
		<li><a href="<!--$path-->foo.html">list1</a></li>
		<li><a href="<!--$path-->foo.html">list2</a></li>
		<li><a href="<!--$path-->foo.html">list3</a></li>
		<li><a href="<!--$path-->foo.html">list4</a></li>
		<li><a href="<!--$path-->foo.html">list5</a></li>
	</ul>
	<!--/共通ナビ-->

まだ、発展途上の感は否めませんがHTMLのコーディングに一つのムーブメントを起こしそうな技術ですのでチェックしてみてはいかがでしょうか?

関連エントリー

CodeKitで簡単にCSS Preprocessorを利用する!
MacのCodeKitでCompassを使う
Stylus入門
CompassでデータURI スキーム
CompassでCSSスプライト

スポンサードリンク

«iPhoneでlabel要素を動作させる方法 | メイン | jQueryオブジェクトとは?»