CodaのZen-CodingをHTML5 Boilerplate的なアレで

普段コーディングで使っているエディタがCoda(Mac専用)なのですが、
プラグインのTEA for Codaを入れるとZen-Codingが使えるようになります。
(もしかしたらVer.古いかもしれません

Zen-Codingとはなんぞやというところで、


div#container>div.logo+ul#nav>li.navList0$*5>a

でこれを解釈というか展開というかおまじないをすると

<div id="container"></div>

こんな感じに展開してくれます。
サイトの骨組みを作る時に非常に助かっています。
これ以外にも様々なテンプレートのようなものが存在し、自分でも作ることが可能です。

よく使う一例として


html:5

を展開すると


 

と展開できます。

と思いきや、lang=”en”になってたりしませんか?
きっと日本語圏の人は「lang=”ja”になって欲しい!」と勝手に解釈して無理矢理進めます!

ということで変更してみましょう!

変更するファイルは
/User/hogehoge/Library/Application Support/Coda/Plug-ins/TEA for Coda.codaplugin

これでパッケージの内容を表示から開くとFinderで開くと思いますので
Support/Library/zencoding/zen_settings.py
を開きます。

そうすると10行目あたりに

'variables': {
'lang': 'en',
'locale': 'en',
'charset': 'UTF-8',
'profile': 'xhtml',

というのがあるので変更して保存します。
保存後は一度Codaを再起動しないと反映されませんのでご注意を。

これで基本的なhtmlができるので


div#container>div#header+div#content+div#footer
<div id="container"></div>

こんな風に展開していって構築していきます。

HTML5 Boilerplateを組み込んでみました!
というところで長くなりすぎてしまったため

まずZen-Codingの話をしなくてはならないというところで力尽きました
説明しようとすると割と内容が多いことに気づいたので
次回に・・・
持ち越し・・・
たいな・・・

Music Boxel : Naked-eye 3D Display and Web Socket based multi user interaction

aircord社との協同プロジェクト Music Boxel のデモムービー(1分34秒)です。

Music Boxel from aircord on Vimeo.

関連記事
2011年1月17日 Music Boxel (裸眼3Dディスプレイ x WebSocketインターフェイス)
2011年2月7日 Music Boxel Prototype (Processing+PeasyCam)
2011年2月8日 Music Boxel@CreativeApplications.Net

Naked-eye 3D Display and Web Socket based multi user interaction.
Adding a voxel to make a trigger on roop timeline of virtual music box.

Display/Audio-Visual Program by aircord inc. made with : openFrameworks, SuperCollider
Server/Mobile Interface by Uniba Inc. made with : node.js, CSS3/HTML5

aircord.co.jp/​
aircord.co.jp/​labo
uniba.jp/​

Music Boxel@CreativeApplications.Net

CreativeApplications.Net 14879 February 7, 2011
Music Boxel [iPhone, iPad, openFrameworks]
http://www.creativeapplications.net/iphone/music-boxel-iphone-ipad/

取り上げていただきました!
ありがとございます!

Music Boxel (裸眼3Dディスプレイ x WebSocketインターフェイス)

aircord社とユニバの協同プロジェクト「Music Boxel」のご紹介です。

MusicBoxelは、aircord社が開発したN-3Dという裸眼立体視ディスプレイと、スマートフォン・携帯電話用のリアルタイム通信を組み合わせた、実験プロジェクトです。手元のモバイル端末から、ウェブページ経由でディスプレイの中を回転する「オルゴール(Music Box)」の音を増やしたり、減らしたりするリアルタイム操作を実現しています。

紹介ムービーを準備しているのですが、そちらは近日公開予定。
また、各パートを担当したスタッフから技術紹介の記事をアップしていきます。

Music Boxel
Music Boxel
Music Boxel

Music Boxel

Naked-eye 3D Display and Web Socket based multi user interaction.
Adding a voxel to make a trigger on roop timeline of virtual music box.

Display/Audio-Visual Program by aircord inc. made with : openFrameworks, SuperCollider
Server/Mobile Interface by Uniba Inc. made with : node.js, CSS3/HTML5

preload preload preload