STACKSTOCK

日々の出来事や感じた事、学んだ事を蓄積(STOCK)して積み上げ(STACK)てます

CodeKitの隠れた秀才「Kit Language」で効率化を図る

2013年03月27日

CSSメタ言語が一般的になってきた（よね？）昨今ですが、そろそろhtmlも生成するようになるんじゃないかなぁと思ってたんですが今のところそうでもないみたいですね。

たしかJekyllもhtmlを生成するタイプだった気がするけど、あれって普通に受託案件で使えるのかな？まだ使ったことないや。誰かご存じありませんかね。

という感じの僕ですが、CodeKitにその機能がある事を知って色々と試しに使ってみたので、以後の受託案件では何となくこんな感じで使ってみようかなぁな結果をお届けしたいと思います。

Kit Language とは

MacにはCodeKitというアプリがありましてね、そのアプリはCSSメタ言語のコンパイルとかJSの構文チェック（あってる？）とかminify化してくれたり、おまけにブラウザのオートリロードしてくれるステキアプリで、僕にとってはもはや欠かせないアプリになんですが、そのアプリについていた機能です。

で、Kit Languageとは、htmlにライブラリ機能を追加する仕組みです。例えば、共通で使う単語とかパーツとかを変数にしたり別ファイルにして読み込んだりできます。Dreamweaverにあるテンプレート機能（であってる？）と似たようなことができるはずです。

使い方

プロジェクトの準備

  1. CodeKitにプロジェクトフォルダをドロップ

完了！！

Kitの準備

  1. ファイル名を「〜.html」から「〜.kit」に変更

完了！

共通ファイルのインクルード

  1. 共通して表示する部分をカット
  2. 共通化部分を新規ファイルにペースト
  3. 「〜.kit」で保存
  4. カットした場所に「<!– @import “ファイルパス” –>」を記述
  5. ファイルを保存
  6. 「〜.html」が生成される！！

読みこむ先のファイルの拡張子は「.html」でも「.txt」でも良い。ただし読みこみ先で変数を使う場合は「.kit」

変数の利用

  1. 変数にしたい部分(何度も同じ記述をするような箇所)を変数に変える
    <!– $name = muyuu –>
  2. 作った変数を入力したい箇所にタグを記述
    <!– $name –>

これだけ！！

では、これをどんな用途で使えるのかを判断するために色々と実験をしてみます。

変数の実験1
他のファイルで宣言した変数は使用できる？

■index.kit
<!-- $sitename = サイト名 -->

■header.kit
<!-- $sitename -->

コンパイルOK！！

この実験で分かったこと

ページ自体のファイルに変数を定義しておけば@importしたファイルで変数が使える

変数の実験2
変数を宣言してるけど使われないのはOK?

<!-- $sitename = サイト名 -->

html内にはその変数はどこにも参照されていないとする

コンパイルOK！！

この実験で分かったこと

各ページに変数をガンガン宣言するのはとりあえずOK。ページ単位で使い回しそうなものは変数化できる

変数の実験3
変数を参照してるけど宣言していないのはOK?

各ページの判別用に、bodyにclassを付与したいです。WordPressのbody_class() 的な使い方。

header.kitを作って、<body class=”<!– body_class –>”>とかしたいけど、必ずしも値を入れるのは面倒だから、入れなくても問題なければ良いなぁと思います。

<!-- $name -->

その変数はどこにも定義されていないとする

もちろんコンパイルエラー！！

例えば各ページを判別するためにbodyにclassをつける用途でKitを使う場合は、全ページにページclassを記述する必要がある。

変数の実験4
変数を上書き

変数の上書きが出来るとすれば、最初にデフォルト変数定義用のファイルを作って全ファイルでインクルードすればいいんじゃないかと思いました。

たとえば、$name という変数にデフォルトでmuyuuと入れておき、このページだけannticyborgとしたい

<!-- $name = muyuu -->
<!-- $name = anticyborg -->

実際のファイルに記述するならこんな感じ

index.html (ページ自体のファイル)
<!-- @import "./inc/read.kit" --> (デフォルトの変数を記述)
<!-- $name = anticyborg --> (上ファイルに書かれている変数を上書き)
<!-- @import "./inc/header.kit" --> (ヘッダーを記述)
<div class="container">

コンパイルエラー！！

変数は定数的な扱いで、上書き不可。

デフォルト変数記述ファイルの設置もダメ

変数の実験5
日本語は使えるの?

今までの記述には日本語は書かれてなかったけど日本語は使える？プログラム的な感じでダブルクオート「”」で囲めば使えるかな？

<!-- $name = むゆう -->
<!-- $jp_name = "むゆう" -->

$name = むゆう :

$jp_name = “むゆう” :

日本語を変数に入れる場合でも「”」で囲まずそのまま書けば良い。というかむしろ「”」で囲むと「”」まで表示される。

今までの実験を踏まえたKitの有効活用

各ページで違う要素はもう全部各ページで定義するようにしてしまった方が楽かなぁと思います。大体メタタグとかOGPとかSEO的なヤツとかですかね。こんな感じでどうでしょう。

■index.html (ページ自体のファイル)
<!-- $path = ../ --> (ドキュメントルートからのパス)
<!-- $body_class = top -->
<!-- $title = ページタイトル| --> (パイプまで書きましょうか)
<!-- $keywords = キーワード1,キーワード2 --> (共通で使うキーワードはheader.kitに書く)
<!-- $description = 文言を記入しましょうね -->
<!-- $ogp_desc = OGP用の概要文 --> (OGPはちゃんとそれ用の文章を書きたいよね)
<!-- @import "./inc/header.kit" -->
<div class="container">

■header.kit(全ページ共通の変数を記述)
<!-- $sitename = サイト名 --> (何かしょっちゅう使いそうだから)

どうです？あんまりスマートじゃないですが、現時点ではこれが限界なのかなぁと思います。こうすれば結構汎用性の高い感じで使えませんかね。

ちなみに $path という変数を記述してますが、これは西畑さん(@kazumaNishihata)が書いて頂いてた記事があったのでパク参考にさせてもらいました。

僕は割とルート相対パスでhrefを記述する派なんですが、そうもいかない事もありますもんね。

というかですね、実はKit Language 自体もこの記事で教わりました。先人はすげーぜおい。

CodeKitの新機能「Kit Language」[to-R]

おわりに

CodeKitはCSSメタ言語のコンパイル機能がフィーチャーされがちですけど、The Kit Launguageを使えば数百ページの静的htmlファイル納品案件でも怖くないですね。…多分。

今後もこの機能は洗練されていくと良いなぁな期待を込めて、今後はガンガン使っていこうと思います。

おまけ：これさえあればなー

  • 変数の上書き可
  • if文での条件分岐
  • for文での繰り返し

まぁ、これができたらそれはもうテンプレートエンジンだよね。

他にこんな事も書いてます

この記事の分類

種類: mac, Web制作
ジャンル:

FBでコメント

3個のコメント

  1. むゆう (@anticyborg) says:
    2013年3月27日 at 18:43

    CSSプリプロセッサ関連の機能が話題に上がりがちなCodeKitですが、独自テンプレート機能のKitは静的ページ大量系案件にはかなり有効だと思います SS | CodeKitの隠れた秀才「Kit Language」で効率化を図る http://t.co/dfx86AVeQl

    Reply
  2. Toro_Unit (@Toro_Unit) says:
    2013年3月27日 at 23:55

    “SS | CodeKitの隠れた秀才「Kit Language」で効率化を図る” http://t.co/BkZ1eeXWHV

    Reply
  3. @noboo says:
    2013年4月29日 at 16:32

    SS | CodeKitの隠れた秀才「Kit Language」で効率化を図る http://t.co/da8cxmGwMg @anticyborgさんから

    Reply

トラックバック/ピンバックはありません。