Download

使い方

なんだか、テンプレートを書いたりしてる人に説明不要な感がありまくりますが、一応……

1. ダウンロードしたファイルをサーバーにアップする

「/MTが入ってるディレクトリ/themes/」に解凍したテーマファイルをアップロードします。

2. テーマを適用する

すでに、MTがインストール済みの場合、「デザイン>テーマ」に行くと、下記のような画面になってるはずです（Blankというテーマが表示されていない場合、アップロードした場所が間違ってるかも）。

「適用」をクリックすると、テーマが切り替わります。

テーマ選択画面

（試してませんが）インストール（または、新規ブログ作成）する時に選ぶ事も出来ると思います。

3. テンプレートを確認する

テーマを適用すると、以下の画像のように、各テンプレートがカラになっているはずー。

テンプレート一覧画面

まとめ

• とりあえず、まっさらな状態から書きたいぜ！という人向け（かも）
• 全部、カスタムテンプレートになっちゃうので、注意が必要
• ローカルである程度書いてから、確認したい人は、最初からオリジナルのテーマを書いちゃった方が早い（と思う）

という訳で、いまひとつメリットの薄い感が否めないテーマですが、誰かのお役に立てば幸いです……

本当は、ちゃんと（？）したテーマも書いているのですが、「自分のブログをこのテーマに置き換えるには結構作業が必要で、その内、仕事が忙しくなって触れなくて……」という感じになる事を恐れてのポストだという事は内緒です（汗

追記：「なんと！」あの人気ブログの著者が似たような（？）発想のテンプレートを配布していました。「みんな、同じような事考えてたんだなー（しみじみ）」。

尚、上記のテーマ『MT underHat テーマ 003 - ニューマ』は、mt.jsとatom.xmlは残してあり、他のテンプレートも各ページのものが白紙の状態で用意してあるようです（モジュールやウィジェットは無い）。
「書き直すには書き直すけど、コメントとか使うしmt.jsは必要だなー」とかいう場合は『MT underHat テーマ 003 - ニューマ』がとても便利だと思います（追記：2010年09月01日）。

で、（実はまだ使ってないけど）良さげなプラグインをご紹介したいと思います。

プラグインは、

MTAppjQuery | かたつむりくんのWWW

です。

基本的な機能としては、プラグインの設定画面で

• 管理画面で使いたいJSを書ける
• ユーザーとかブログによって処理を分けられる
• 外部スクリプトを管理画面に読み込ませることが出来る（scriptタグ書ける）

など、やりそうな事はだいたい出来るようです。

その他、

• テキストボックスとかを複数チェックボックスに変換
• フィールドのソート
• フィールドのラベルをリネーム

といった機能も備えているようです。

自分で書いちゃった方がラクな場合もあると思いますが、後で、「そんなに色々分からないです」という人に引き継ぐ場合もあると思うので、そういう時は、こういった、公開・配布されているプラグインはとても便利！
感謝です。

このあと1カ月くらいはMTのお仕事がチョコチョコ続く予定なので、この間に試せたら、またアイディアを出したいと思います。

トラッキングコードの設定 | Google Analyticsヘルプ

で、（主に国内の）検索エンジンを追加するメモ。
* 検証がいいかげんなので、自己責任でお願いします。メモです！メモ！

デフォルトの検索エンジン

• Google
• Yahoo
• MSN
• Lycos
• Ask
• Altavista
• Netscape
• CNN
• Looksmart
• About
• Mamma
• Alltheweb
• Gigablast
• Voila
• Virgilio
• Live
• Baidu
• Alice
• Yandex
• Najdi
• AOL
• Club-internet
• Mama
• Seznam
• Search
• Wp
• Onet
• Netsprint
• Google.interia
• Szukacz
• Yam
• Pchome

と、あります（Google Analytics はどのような検索エンジンを認識しますか。 | Google Analyticsヘルプ）。

（主に国内の）検索エンジンを追加する

<script type="text/javascript">
//<![CDATA[
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXX-x']);
_gaq.push(['_addOrganic','images.google','q']);
_gaq.push(['_addOrganic','biglobe','q',true]);
_gaq.push(['_addOrganic','nifty','q',true]);
_gaq.push(['_addOrganic','azby.search.nifty','q',true]);
_gaq.push(['_addOrganic','infoseek','qt']);
_gaq.push(['_addOrganic','rakuten','qt']);
_gaq.push(['_addOrganic','livedoor','q',true]);
_gaq.push(['_addOrganic','so-net','query']);
_gaq.push(['_addOrganic','fresheye','kw']);
_gaq.push(['_addOrganic','auone','q',true]);
_gaq.push(['_addOrganic','ocnsearch','MT']);
_gaq.push(['_addOrganic','hi-ho','MT']);
_gaq.push(['_addOrganic','odn','search']);
_gaq.push(['_addOrganic','eonet','search']);
_gaq.push(['_addOrganic','goo','MT']);
_gaq.push(['_addOrganic','excite','search']);
_gaq.push(['_addOrganic','asahi','Keywords']);
_gaq.push(['_addOrganic','luna','q']);
_gaq.push(['_addOrganic','lunascape','p']);
_gaq.push(['_addOrganic','hatena','word']);
_gaq.push(['_addOrganic','ecnavi','Keywords']);
_gaq.push(['_addOrganic','mixi','keyword']);
_gaq.push(['_addOrganic','twitter','q',true]);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
//]]>
</script>

_gaq.push(['_setAccount', 'UA-XXXXXXX-x']);
の部分は、都度、使用する環境に書き換える感じです。

（以降、2010年6月23日13:21 追記）その他、Google Analyticsで本当の直帰率を調べる方法2【非同期トラッキングコード 編】というのも、今、試しています。 自分のブログのアクセス数とか結構どうでもイイのですが、実験には最高ですな。

ヨモツネットさんは、以前から『XPではClearTypeが（デフォルトだと）有効じゃないので、せっかく@font-faceしても、いまひとつ恩恵を受けられない』的なお話をブログやイベントされており、各所で似たようなお話を見聞きしていた事もあり、その事自体は把握しておりました。

ただ、実際に試した事がなかったので、これを機に試してみる事にしました。
『そもそも、あまりフォントとかいじらないで見せるべき』とか、そういう話は今回、気にしないでください。

実際には紹介されていたフォントを全て試したのですが、スペースの関係（謎）で、下記の3つに絞って結果を掲載しておきます。

• VL ゴシック
• IPA P Gothic / IPA P Mincho（IPAフォントライセンスの各事項にご同意して、ページ一番下の「同意する」をクリックで先に進む）

IPAフォントに関しては、IPAex系を使っても、同様の結果が得られると思います。

IE用にttfをeotに変換

試すには、まず、テスト用のファイルを作らんと。　という事で、ヨモツネットさんが紹介されていたフォントを一通りダウンロードして、ttfをeotに変換します。
ttf → eotの変換は色々な方法があると思いますが、今回は、ttf2eotを使わせていただきました。

順番に@font-face

今回は実戦を伴わないテストなので、プラットフォーム互換などは考えず、順に試しますので、IE用とそれ以外でだけ分ければOK。

VL ゴシックの場合

<style type='text/css' media='all'>
@font-face{
font-family:'VLPGothic';
src:url('/VL-Gothic-Regular.eot'); /* IE */
src: local('hide from IE'),url('/VL-Gothic-Regular.ttf') format('truetype'); /* Not IE */
}
body{
font-family:'VLPGothic',sans-serif;
line-height:1.5;
}
</style>

IPA P ゴシックの場合

<style type='text/css' media='all'>
@font-face{
font-family:'IPAPGothc';
src:url('/ipagp.eot'); /* IE */
src: local('hide from IE'),url('/ipagp.ttf') format('truetype'); /* Not IE */
}
body{
font-family:'IPAPGothc',sans-serif;
line-height:1.5;
}
</style>

IPA P 明朝の場合

<style type='text/css' media='all'>
@font-face{
font-family:'IPAPMincho';
src:url('/ipamp.eot'); /* IE */
src: local('hide from IE'),url('/ipamp.ttf') format('truetype'); /* Not IE */
}
body{
font-family:'IPAPMincho',sans-serif;
line-height:1.5;
}
</style>

と、まあ、こんな感じです。

htmlのソースは割愛しますが、font-sizeとかcolorはインラインで書いて、font-sizeはpx単位にしてあります。
あと、strongとemを使っています。

スクリーンショット

テストにしか使ってないので、問題なくデフォルトの状態だろうと思いつつ、念のため確認しましたが、『画面のプロパティ→デザイン→効果→次の方法でスクリーン フォントの縁を滑らかにする』は、「標準」になっていました。

では、順番に。

VL ゴシック

Chrome

Firefox

IE7

IE6

読めなくはないけど、濃淡というか明るさで強弱付けるのは無理っぽいですね。#666程度までならアリっちゃあアリかもしれませんが、環境によっても見え方が変わると思うので、お勧めは出来ませんねぇ。 ただ、IE7に関しては、いける気がします。

IPA P ゴシック

Chrome

Firefox

IE7

IE6

ダメですね。 ただ、これもIE7に関しては、いける気がします。

IPA P 明朝

Chrome

Firefox

IE7

IE6

これもダメですね。 ただ、これもIE7に関しては、アリと言えなくもないかな。フォントサイズ大きめのトコで、かつ、（引用など）部分的に使うとかであれば。

結果

事実に関しては、ご覧の通りなので、それぞれのプロジェクトで相応の立場の方がご判断されれば良いと思いますが、「使うとしたらXPかつIE7以上」みたいになんらかの方法で分けて使う感じですかね。 ↓ごくいい加減なサンプルで申し訳ございません。

<?php
if (preg_match("/Windows NT 5/",$_SERVER['HTTP_USER_AGENT'])) {
echo "<!--[if gte IE 7]><style type='text/css' media='all'>@font-face{font-family:'IPAPGothic';src:url('/ipagp.eot');}body{font-family:'IPAPGothic','Verdana','MS PGothic',sans-serif;}</style><![endif]-->";
}
?>

Vista以降は、デフォルトだとClearTypeが有効になっているので、（Windows7で見た限り）今回試したフォントは、そこそこ見れる感じでした。
ただ、Meiryoではなく、あえてWebFontsを使うにはちょっと根拠が足りない気もします。

という訳で、XPのサポートが終了する日を待ち望みつつ、「IE9でせっかくフォントまわりの表示をキレイにするんだから、いい感じのフォントを追加してくれよ。せめて日本語がまっとうに表示される明朝体をひとつだけでも」みたいな嘆願をMSさんに出してみるとか？

また、最後になりましたが、日本語対応フォントの制作ってめちゃくちゃ大変で、そんな大変なものを無償で提供されている方々には本当に頭が下がります。
AXIS Basicが9,354文字とかだったので、毎日（365日）欠かさず10字作っても、2年とか3年とか、かかるの計算に……

今回のテストに関しては、クライアントさんから「HG丸ゴシックとか使ってよ」などと言われてしまう、たまにあるパターンでも「こういう事情で現実的じゃないッスね」という資料にするとか、何かに役立つと幸いです。

あ、そういえば、JimdoのBusinessプランではモリサワが使えるらしいですね（本文などで使えるようになるのは近日予定）。  * 「使える」ってのがどういう意味なのか、どこに書いてあるか分かりませんでした（汗

しかしながら、そのまま使うと、書き出されるソースに「インデント」「開始タグの後に改行」が入ってしまって、「まあ、MTタグで正規表現などを使って置換しても良いのだけれど……なんだかなぁ」とか思ってました。

で、今まで放置してた訳ですが、さすがにそろそろ調べてみようという事で、自分用のメモを晒しておきます。

CKEditorには便利なボタンがたくさん用意されているので、基本的にはカスタム設定で減らしていく事の方が多いと思いますが、とりあえず「こんなの無いかなぁ」って時に探す場所とか、過去に使ったプラグインをメモ。

CKEditor関連の情報を探す時に見る

• CKSourceのフォーラム
• CKEditor 3.x/Developers Guide
• ToI（CKEditor for Movable Type とは）

HTMLソースを挿入するプラグイン

YouTubeとかGoogleマップとか「ソースを貼り付け」がしたい時に使えます。
あと、HTMLを書けるけどソースを表示するボタンを使ってないみたいな時とかも……ないか（汗

Inserthtmlプラグイン（Google Code）

お仕事で使う場合は、langの中にja.jsを作ってあげると良いかもしれません。

1. lang/en.jsをコピーしてja.jsに
2. plugin.jsの13行目くらいにあるlangをjaにする
3. 作ったja.jsの1行目のenをjaにする
4. ja.jsを日本語にする（titleがダイアログのタイトル / HelpInfoがテキストエリアの上の説明）

インストールの方法はreadmeに書いてあります。
まあ、pluginsに入れて、ボタンを設定のトコにinserthtmlを追加するだけです。

imgとかaとかのパスを書き換えるプラグイン

まあ、これはMT側で一括置換しちゃうと思いますが、データが書き換えられてた方が、後でラクな気がしますので、使った方が良いと個人的には考えています。

Rewrite - CKEditor Japan Wiki - SourceForge.JP

プラグインそのものは、最新のCKEditor for Movable Typeに同梱されているはずなので、上記のリンクで設定方法等をご覧いただくとよろしいかと。

毎回やりそうな設定

個人的なメモですが。。。

ボタンの画像を変更

個人的には、FCKEditorの頃のが好きなので、いつも変えてます。
場所は「CKEditor/ckeditor/skins/movabletype/icons.png」。 movabletype以外のスキンを使う予定がないので、他のは削除。

スタイルの設定

場所は「CKEditor/style/config.js」
ほとんど、テンプレートで挿入するようにしているので、ここで使うのは、太い赤字とか小さいグレーの字とかデフォルトで入ってるqやciteくらいですかねぇ。

テンプレートの設定

場所は「CKEditor/template/config.js」
よくあるパターンとしては、キャプション付きの画像を左右にfloatとか、定型の連絡先とか……lightbox的な事などにもイイ気がします。

ソースコードの整形

今回、探してたのはココなんですが、「Developers Guide」にありました。
詳細はリンク先をご覧いただければわかると思いますが、使いそうなのは……

1. 「CKEditor/ckeditor/ckeditor.js」を開く
2. indentationCharsを検索して'\t'を「''」に修正（タブインデントしない）
3. breakAfterOpenを検索してtrueを「false」に（開始タグの後で改行しない）

って感じです。

これで、

<p>
\tほげほげほげほげほげ</p>
<p>
\tほげほげほげほげほげ</p>

とか整形されてたのを

<p>ほげほげほげほげほげ</p>
<p>ほげほげほげほげほげ</p>

に出来るはず。
リンク先にも書いてありますが、configでも出来るので、元のソースをいじるのはやめといた方がいいかもですね。

この記事は、他になんか思いついたら、書き足していきたいと思います。

まあ、絶対載せてくれる訳ではないのですが、今後、microdataとかは需要が出てきそうではあります。
特に、CMS使う前提だったりすると、こういう提案もアリかな？と思います。
あと、SEOについては大概、何かしら言われますもんね。

運良く食いついていただけると、下落が止まらない単価にも多少のストップがかかるかも？

という訳で、microformatsとかは、ちゃんと覚え直して、出来るだけ使っていきたいと思いました。

とりあえず、PSDとHTMLが↓

Download

環境は以下の通りです。

Mac OS X(10.6)

• Safari4.0.6
• Chrome5.0.307.11 beta
• Firefox3.6
• Opera10.10

Windows7(VM WARE上)

• Internet Explorer8
• Internet Explorer9 Preview
• Firefox3.6
• Chrome4.0.249.89

WindowsXP(VM WARE上)

• Internet Explorer6(MultipleIE)
• Internet Explorer7
• Firefox3.6
• Chrome4.0.249.89

font-sizeとline-heightはpxで絶対値にして、font-familyは都度書き換えました。
WinのOperaで撮るの忘れました（汗

それぞれ、OSとfont-familyごとにグループを分けてあります。
Textというグループには、各フォントサイズ＋行送りでのテキストレイヤーが入っています（ヒラギノ+Lucida Grandeのみ）。

fontが違えば幅が違う

PSDをダウンロードして、レイヤーをチコチコいじってるとわかると思うのですが、まず目につくのは幅の違いだと思います。

これは、状況によって改行位置に影響を与えます。
また、それに付随して、テキスト部分の高さも変わったりする事がままあります。

また、あまり今回のテーマと関係ないですが、英文の場合は切れる箇所が少ない（って微妙な表現）ので、長い単語が入っただけで改行しちゃったりします。
サーバサイドとかで文字数区切ったりしたとしても、注意が必要です。

なので、高さの揃え方ってのは結構ゆるくしておかないとデザイナーさんの意図通りに表示されない事が多いと思います。

フォントの種類とサイズでクセみたいのがあります

これも見比べるとすぐわかる事ですが、フォントの種類によってブラウザ間の差が大きい事があります。
また、特定のフォントサイズ（＋行間）の時に差が出る事があります。

あと、メイリオはでかいですね。

詳しい説明は、後日書くか参考サイトをご紹介したいと思いますが、普段、CSSを書かないデザイナーさんの場合は仕様を覚えるより「この条件だと危ない」みたいな事を事前に試して知っておく方がラクかもしれません。

なんで行間に差が出るか

line-heightの事を、普段CSSを書かないデザイナーさんがちゃんと理解するのは結構大変だと思いますが、根本的な違いがあるって事は押えておかないと、指示があいまいになったり、「なんで出来ないのさ！」とストレスを抱える原因になると思うので、基礎中の基礎だけ書いておきます。

まあ、正直言って、CSSを書く人は、スケジュールが厳しい時などに「わかってないクセにガタガタうるせーな」とか思ってしまいがちなので、お互い楽しく仕事をする為に、また、イイものが作れるように、覚えておいて欲しいって思いがあったりします。

グラフィック系のアプリ基準で考えると「テキストのプロパティ」だけど、コーディングしてる人にとっては「視覚整形モデル（幅とか高さあたりと同じカテゴリ）」として扱ってるあたり、そもそも違う訳ですが、

グラフィック系のアプリの場合は「行送り」

line-height（グラフィック系アプリの場合）

CSSの場合「行間」

line-height（CSSの場合）

という違いが、話をややこしくしている原因な気がします（参考：組版 - Wikipedia）。
* 図は、12px/14pxの場合です。比率とかは合わせてないので悪しからず。
* 欧文ルールだとベースラインからベースラインまでが行間だけど、和文にはベースラインという考え方がない！みたいな違いもあるらしいです。

で、もうちょっと突っ込んだ話をすると、表示をする仕組み上は「あくまで、行ボックスの高さを算出するものであって、行間ではない」というのがポイントです。
また、決められるのは「最小の高さ」です。

しかも、算出方法を簡単にしたかったのか、欧文と和文（などのルールが違う文字）の差を埋めたかったのか「行の先頭であっても、最後であっても、上下均等にスペースが割り当て」られてしまいます。
* font-size:12px / line-height:14px;の場合、14 - 12 = 2が余白とされ、これらが、上1px + 下1pxと均等に割り当てられます。

環境によっては、「フォントの種類」「文章が欧文からスタートしているか」「和文まじりか」などでもズレが生じてしまうようです。

そんなわけで、この話をちゃんと展開するには、和文組版ルールと欧文組版ルールの両方を区分して説明し、さらにそのギャップをどう埋めるか...と、長々と説明しなければならないので、多少語弊がある表現でも気にせず、詳細は省略します。

画像とかはまた扱いが違うので

CSSでは、画像などの置換要素と呼ばれる要素では、また扱いが異なります。

たとえば、画像の場合はheight属性値（または、heightプロパティ。または、画像のもともとのサイズ）が行ボックスの高さを決めますし、inputやselectなどフォームに使う要素では、ブラウザが決めたサイズが高さを決めます。

これらの高さが、line-heightで決めた、行の（最小の）高さを上回る場合、（最小の）高さは破棄され置換要素の高さが行の高さになります。

今ってどうしてるか

ここからは推測にすぎませんが、多くのコーダーさんとかは「デザイナーさんはline-heightの事が解ってないだろうという前提」で

• 「PSDの通り」と言われたら、数値ではなく見た目に合わせる
• ブラウザによって差が出てしまう部分は、可能な限り近づける
• 無理な部分はブラウザシェアの高いものとかを優先する
• これらを、スケジュールなどと天秤にかけて、どこまでデザインに近づけられるかはりきる

という感じで進めているんじゃないかと思います。
なので、作業的にはCSSを書いてる時間よりも、「Photoshopとかでググっと拡大して、計って、計算して」とかしてる時間の方が圧倒的に長いですよね＜（誰に？

ですから、デザイナーさんがこのあたりの知識をちゃんと持っていて、「font-size:12px;line-height:1.5;で上下の余白は1emくらい空けといてくれればイイから。あっ、見出しに隣接する場合は上の余白を0にしておいてね」みたいな資料（謎）を別途くれたりすると、かなりスピードアップにつながります。

また、デザイナーさんの作業的にも、都度デザインするより、予め良く登場する要素とそれらの組み合わせに対してルールを決めておいた方が、ブレないデザインに出来るのではないでしょうか？（知らんけども）

たぶん、多くのコーダーさんは、

1. 最初に登場するであろうデザインの断片を全てコーディングする
2. その後は、「ここが見出し」「ここが本文」「ここはリンク」みたいなのが分かるようになってるワード（テキストでもイイ）とかのドキュメントを元に量産
3. どうしても、特別扱いな表現が出てきたら、その部分のスタイルを追加

みたいに進められるとすげー早いと思ってるはず。
たぶん、こんな風にルールがちゃんと決められてるとコードの量も減るだろうし、色々なトコにメリットが出てくると思うなぁ。

で、何が言いたかったかと言うと

結局のところ、お互いの理解が足りない事で余計な作業が発生したりするのはもったいないので

• コーディングする人は、ある程度デザイナーさんの意図を汲み取れるくらいの、デザイン知識が必要
• デザイナーさんとかチェックする人は、CSSの仕様とか環境による差異なんかに対する知識が必要
• 「ココはビシっと揃えたい」みたいなトコロはちゃんと意思疎通をはかる
• 更新の事とか考えて「公開したあとはどんどんクオリティが下がるだけ」みたいにならない、無理のないデザインにする
• 色々なコストとかクオリティとかの優先順位の付け方なんかを案件毎にちゃんと考える

とか、そんな事をちゃんと考えながら仕事しましょう。
反省したり勉強したりしないと、毎回「いや〜大変だったね」で終わってたら良くないよね。

という、意見でした。
「みんなどうしてるのかな？」とか思ったりもしました。

で、「勉強が足りないなぁ」と反省しました。
たぶん、コーディングとかしてる仕事なので、バックエンドの人が感じている「こういう感じのHTMLが欲しい」「こんなコメントが入ってると泣いて喜ぶ」みたいなのも知っておくべきですよね。

ただ、いずれにしてもTextExpanderを使っている人だったらスニペットを作っておけば、アプリケーションに依存せずzen-codingの手癖のまま書けるので、便利だと思います。

正直「これ（当分）使わんだろ」とか「コレ使うときは、これもまとめて」みたいなのが多いので、今までは独自のを使ってましたが、Codaのクリップと違って一括登録が簡単なので、作ってみました。

ただし、Tea for Codaのzen_settings.pyを参考に作ったので、オリジナルと比べたら一部不足していたりすると思います。

Download

特に使い方っていうのもありませんが、展開方式はTextExpanderの設定依存ですので、zen-codingのつもりで展開しようとしても当然、何も起こりません。

私の場合はTABにしていますが「区切りなし」で展開する設定になっていると、「m」と入力した時点で「margin:;」とか展開されてしまうので、区切りの設定はした方が良いと思います。

また、通常、コーディングに使っているエディタ以外で使う事が無い場合は、アプリケーションを限定する事も出来ます。

省略形はzen-codingのZenCSSPropertiesを
設定やインストールに関してはTextExpanderを参考にしてください。

その他

微妙に、独自のものを追加してあります。

独自のものは、省略形の先頭に「,」が入っていますので、検索して編集・削除などして使ってください。

追加してあるやつ

,bdrz ... bdrzでborder-radiusですが、先頭に「,」を追加すると-moz-のと-webkit-のが一緒に展開されます。

,cl ... シンプルなclearfixが出力されます。　ネスケとかに対応する場合は編集してください。

,d:ib ... inline-blockの他に-moz-inline-boxとか、IE用に/display:inline;/zoom:1;とかが展開されます。

,m:0a ... m:autoみたいなもんですが、margin:0 auto;が展開されます。

,op ... opacityにプラスして、-ms-filter...と/filter...を展開。

以上です。

↓は今回作ったサンプルです。

Download

• 複数行を一行に（PSDとかPPTとかで変な改行入ってるのをまとめるなど）
• HTMLタグを削除
• 全角英数を半角に
• 全角カタカナを半角に（携帯サイトとか）
• 半角カタカナを全角に（携帯サイトのを戻すとか）
• Uppercaseする（使わなそう）
• Lowercaseする
• Capitalizeする（PSDとかで全部大文字になってた時とか）
• 日付を挿入する（CSSとかJSの更新日を入れるなど）

を、一つのプラグインにまとめてみます。

はじめに

いくつかのスクリプトは、Panicさんが公開しているSample pluginそのままです。
特にライセンスの事とか書いてませんでしたが、問題あったらご指摘ください。すぐに配布を止めます。

半角-全角プラグインについては、以前、配布されていたConvertKanaというプラグインのソースを「こんな感じだったかね？」と思い出しつつ書きました。ですので、配布を中止されている理由をご確認の上、状況によっては文字化けなどが発生するのを踏まえてご利用ください。* いい方法があったら是非教えてください

という訳で、プラグインの配布ではなく、作り方として読んで欲しいです。はい。

プラグインで使う色々なスクリプトファイルを作る

まずは、プラグインで使うスクリプトを書きます。
個々の説明はしません（ｷﾘｯ だって、自信ないし。。。クドイようですが、突っ込み大歓迎！

今回はPHPで書いてますが、PerlとかRubyとかPythonでもMacOSXで使えるものならOKです。

複数行を一行に

これは、サンプルプラグインのをそのまま使います。

#!/usr/bin/php
<?php
$input = "";
$fp = fopen("php://stdin", "r");
while ( $line = fgets($fp, 1024) )
	$input .= $line;
fclose($fp);
$input = rtrim($input);
$input = preg_replace("/[\r\n]/", "", $input);
echo $input . "\n";
?>

こんな感じ。適当にjoinlines.phpとでも名付けてデスクトップとかに保存しておきます。

HTMLタグを削除

これも、サンプルプラグインのをそのまま使います。

#!/usr/bin/php
<?php
$input = "";
$fp = fopen("php://stdin", "r");
while ( $line = fgets($fp, 1024) )
	$input .= $line;
print strip_tags($input);
fclose($fp);
?>

striptags.phpとでも名付けてデスクトップとかに保存しておきます。

全角英数を半角に変換

これは、ConertKanaを思い出しながら書いてみました

#!/usr/bin/php
<?php
mb_language("Japanese");
mb_internal_encoding("UTF-8");
echo mb_convert_kana(mb_convert_encoding($_ENV["CODA_SELECTED_TEXT"], "UTF-8"),"a","UTF-8");
?>

convert_a.phpとでも名付けてデスクトップとかに保存しておきます。

全角カタカナを半角カタカナに変換

これも、ConertKanaより。

#!/usr/bin/php
<?php
mb_language("Japanese");
mb_internal_encoding("UTF-8");
echo mb_convert_kana(mb_convert_encoding($_ENV["CODA_SELECTED_TEXT"], "UTF-8"),"kV","UTF-8");
?>

convert_hk.phpとでも名付けてデスクトップとかに保存しておきます。
「kV」なのか「Vk」なのか良く分からなかったんですが、同じ？

半角カタカナを全角カタカナに変換

これも、ConertKanaより。

#!/usr/bin/php
<?php
mb_language("Japanese");
mb_internal_encoding("UTF-8");
echo mb_convert_kana(mb_convert_encoding($_ENV["CODA_SELECTED_TEXT"], "UTF-8"),"KV","UTF-8");
?>

convert_zK.phpとでも名付けてデスクトップとかに保存しておきます。

Uppercaseする

これも、サンプルプラグインより。

#!/usr/bin/php
<?php
$fp = fopen('php://stdin', 'r');
while ( $line = fgets($fp, 4096) )
	echo strtoupper($line); 
fclose($fp);
?>

uppercase.phpとでも名付けてデスクトップとかに保存しておきます。

Lowercaseする

これも、サンプルプラグインより。

#!/usr/bin/php
<?php
$fp = fopen('php://stdin', 'r');
while ( $line = fgets($fp, 4096) )
	echo strtoupper($line); 
fclose($fp);
?>

lowercase.phpとでも名付けてデスクトップとかに保存しておきます。

Capitalizeする

これは、サンプルプラグインを参考にしつつ。

#!/usr/bin/php
<?php
$fp = fopen('php://stdin', 'r');
while ( $line = fgets($fp, 4096) )
	echo ucwords(strtolower($line)); 
fclose($fp);
?>

cpitalize.phpとでも名付けてデスクトップとかに保存しておきます。

日付を挿入する

こんなものは、他にも実現方法がいくらでもあると思いますが、あくまで「作り方」サンプルなので（汗
最近はCSSとかに入れる日付を「Mar 09, 2009」とかしてるので下記の通り「M d, Y」です。 PHPのマニュアルなどを見ながらお好みで。

#!/usr/bin/php
<?php
date_default_timezone_set('Asia/Tokyo');
print date("M d, Y");
?>

insertdate.phpとでも名付けてデスクトップとかに保存しておきます。

ここまででとりあえず準備OK。

スクリプトファイルをプラグイン化する

やっと本題です。

Plug-in Creatorを起動

Plug-in Creatorを起動します（まだ持ってない人はダウンロードしてきてください）。
で、「名前を付けて保存」してください。　仮に「TextFormat.codaplugin」とします。

コマンドを追加

メニューバー（？）にある、「コマンドを追加」をクリックして、コマンドの名前を入力します。日本語でもOK。
ショートカットを追加する場合は、「ショートカット」の下をダブルクリックして、使いたいショートカットを実際に押します。　その時、他のプラグインとかぶってたら、そのように表示されますので、安心です（といっても他のアプリケーションとのコンフリまでは見てないと思います）。

スクリプトを追加

スクリプト・フィールドに、対象ファイルをドラッグするだけでOK。
今回のサンプルでは、実行時も成功時も「何もしない」にしていますが、必要であれば設定を。

入出力の設定

今回のサンプルでは、下記の通り設定していますが、作るプラグインに併せて設定してください。

また、今回はサポートファイルを使いません。

その他

上記までを参考に、今回作りたいと思ったスクリプトを全部登録したのが↓のような感じ。

順番を変えたい場合は、コマンド名をドラッグすればOKです。
ここまで、出来たら保存しておきましょう。

また、後で編集したい時は、「編集」ボタンをクリックすると、スクリプトのソースを開いてくれますので、たとえば、今回のサンプルファイルを一部修正したい場合などは、

「ダウンロードしたプラグインをPlug-in Creatorで開く→編集したいコマンドを選択→編集をクリック→編集・保存→プラグインを名前を付けて保存→CodaにインストールしてCodaを再起動」

という手順を踏めば、修正出来ます。

作ったプラグインをCodaに

説明不要な気がしますが、保存したプラグインをDocのCodaアイコンにドラッグすればプラグインがインストールされます。　↓のようにメニューが表示されればOK。

PHP・Perlなどのリファレンスに掲載されているサンプルレベルでも応用すれば色々なプラグインを作れると思うので、案件毎に「やたらこの処理が多いなぁ」ってのがあったら、プラグインを作ってみてはいかがでしょうか？

使い終わったら、普段はどこかに片づけておいてもイイですからね。

サンプルとか

無駄にスクリーンキャスト的なもの（QuickTime）もアップしてみました。

↓は今回作ったサンプルです。

Download

* 動画もプラグインも特に制限なく使っていただいて問題ありませんが、Panicさんが公開しているサンプルが含まれるので、何かまずかったらすぐ取り下げます。

とりあえずサンプルをチェックしてみてください。

View Demo Download

* 早速、ご指摘をいただいた点を修正しました（Mar 05, 2010）。
あっ。サンプルではIE5.5以下にCSS読ませないようにしてます。

すでに、色々なところで紹介されているので、説明不要な気もしますが、一応。

This value causes an element to generate a block box, which itself is flowed as a single inline box, similar to a replaced element. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an inline replaced element.

W3C

という訳で、インラインの置換要素っぽい感じでフォーマットしますとの事。

基本的な使い方

これも、かなり既に色々なところで見る事が出来ますが、一応、まとめだけ。

div.inline-block {
    display: inline-block;
}

IE5からIE7に対応するには

div.inline-block {
    display: inline;
    zoom: 1;
}

Firefox2以前に対応するには

div.inline-block {
    display: -moz-inline-box;
}
div.inline-block > div {
    display: block;
}

上記をまとめたら

div.inline-block {
    /* 実際にはwidthとか入る */
    display: -moz-inline-box;
    display: inline-block;
    /display: inline;
    /zoom: 1;
}
div.inline-block > div {
    display: block;
}

といった感じで利用出来ます。
このブログにはウソが多い（汗）ので、ご利用の際はちゃんと調べてください。。。

参考サイト（概要から使い方の例まで）

• 書籍などに紹介されていない display:inline-blockについて
• ページ送りのサンプル｜CSS Happylife
• inline-blockで横並びボックスの高さ揃え的レイアウト（謎
• ↓は「隙間が空いちゃうから困るよね」という話
  CSS の inline-block を使って、リストの要素を1列に表示させる

どんな場面で使いたいか

結構、色々あると思うのですが、例として以下を挙げてみます。
前項の参考サイトの方が具体的だし、説明も分かりやすいと思います。

• 小さいブロック要素とかを横並びにさせたいとき
• 横並びにした要素を縦中央とか下とかに揃えたいとき
• 横並びにした要素ををtext-alignでセンタリングしたいとき
• floatだと、要素の高さが変わっちゃうと崩れるなぁというとき
• ...

inline-blockを使いたいけどmarginとかをちゃんとしたい場合に困ること

で、ここから本題です。

White Space Nodeの扱いがブラウザによって違うためにゴニョゴニョとがんばるか、要素間の改行をなくしたり、コメント入れたりとかの対処法が使われていると思います。

こんな感じ

<ul>
    <li>
    Lorem ipsum dolor sit amet.
    </li><li>
    Lorem ipsum dolor sit amet.
    </li>
</ul>

とか、こんな感じ

<ul>
    <li>
    Lorem ipsum dolor sit amet.
    </li
    ><li>
    Lorem ipsum dolor sit amet.
    </li>
</ul>

とか、こんな感じ

<ul>
    <li>
    Lorem ipsum dolor sit amet.
    </li><!--
    --><li>
    Lorem ipsum dolor sit amet.
    </li>
</ul>

です。

でも、これって、「納品後は別の会社とかお客さんが管理」とか「CMSとかの都合でガッツリ改行入るよ」とかいう場合は使えないので、CSSだけでがんばる必要がある場合が殆どかと。
そして、それってめんどい！ですよね。。。

解決方法を考えてみた

「結局のところ、White Space Nodeの問題だったら、フォント関連でなんとかなるんじゃ？」という訳で試してみたのがコレ（↓）です。

ul.inline-block-parent {
    display: block;
    font-size: 1px;
    letter-spacing: -1px;
}
li.inline-block-parent {
    display: -moz-inline-box;
    display: inline-block;
    /* 実際にはwidthとか入る */
    font-size: small;
    letter-spacing: normal;
    /display: inline;
    /zoom: 1;
}

「おっ！上手くいったぽい！」と思ったら、Chromeでは効果がありませんでした。。。

で、試しにネガティブletter-spacing（謎）をいじっていたら。。。

ul.inline-block-parent {
    display: block;
    letter-spacing: -1em; /* ここがキモ */
}
li.inline-block-parent {
    display: -moz-inline-box;
    display: inline-block;
    /* 実際にはwidthとか入る */
    font-size: small;
    letter-spacing: normal;
    /display: inline;
    /zoom: 1;
}

これでいけそうです。

ちなみに、Chrome 5.0.307.11 beta（for Mac）と、Win7 Chrome（本日の時点で最新の）では、空き方が違いました。
* この点に関して、@neotag さんから、それって、最小フォントサイズの設定かもしれんから-4pxに根拠ないっぽいです的な（？）アドバイスをいただきました。
が、結局のトコロいまひとつはっきりしていません（Chromeの使い方がわかってない）。
が、font-sizeの事を意識するのであれば。。。という事で、親要素でfont-sizeをいじくるのをやめて、letter-spacing:-1emで実現しています。 サンプルなども修正しました（Mar 05, 2010）。

試したのは、下記の環境です。

• MacOSX Safari 4
• MacOSX Firefox 3.6
• MacOSX Firefox 2
• MacOSX Opera 10
• MacOSX Chrome 5
• WinXP IE6(MultipleIE)
• WinXP IE7
• WinXP Firefox3.6
• Win7 IE8
• Win7 Firefox3.6
• Win7 Chrome

以下にもう一度サンプルを

View Demo Download

「このブラウザだとダメだった」とか「余白のサイズ変えたらダメだった」とか情報がありましたら、ご一報いただけるととても喜びます。

また、@yomotsuさんのスライドにもありましたが、ご利用は計画的に。

先に書いておくと、「どんな案件でも全部これを使うって感じではない」「むしろ、どういう場合に有効か。。。」「コンパイルした後で再フォーマットしないとちょっと」という感想です。　今のところ。

参考サイト

• 本家
• extends CSS ? LESS - Learner CSS（の和訳）|kmxslog
• Write Better CSS with Less | sitepoint（ポップアップ出るかも）

使い方については、参考サイトをご覧ください。

LESS - Leaner CSS

• 「レス？ リーナーCSSだし、リース？」といきなり名前がわからな。。。
• Sass(Syntactically Awesome Stylesheets)と似てます。 SaaS(Software as a Service)ではない
• LESSをCSSにコンパイルするのにgemが必要
• rubyやruby-gemsのある環境で
• Macだとアプリを使って簡単にコンパイル出来ます
• 変数、ネスト、ミックスイン、演算が使えます

ネストで書ける

とりあえず、コレが一番わかりやすいトコロだと思います。

#header {
    width: 960px;
    overflow: hidden;
    .navigation {
        float: right;
        width: 698px;
        overlow: hidden;
        
        li {
            float: left;
            width: 116px;
            
            a {
                display: block;
                width: 116px;
                height: 24px;
            }
        }
    }
    .logo {
        float: left;
        width: 214px;
    }
}

とか書いたものをコンパイルすると

#header {
    width: 960px;
    overflow: hidden;
}
#header .navigation {
    float: right;
    width: 698px;
    overlow: hidden;
}
#header .navigation li {
    float: left;
    width: 116px;
}
#header .navigation li a {
    display: block;
    width: 116px;
    height: 24px;
}
#header .logo {
    float: left;
    width: 214px;
}

とか、してくれます。

ミックスイン出来る

これは、ちょっと内容を変えながら、何度も使うようなスタイルを、classなどにまとめておいて、プロパティのように使えちゃう機能です。

こんな感じで、角丸とか作ったものを

/* こんな感じで、角丸とかを用意して */
.round_corner {
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}
/* こんな風に持ってきて */
.button {
    background:#a1a1a1;
    border:1px solid #ccc;
    .round_corner; /* 先に作っておいた角丸のclass */
}

コンパイルするとこんな感じ

.button {
    background:#a1a1a1;
    border:1px solid #cccccc; /* 省略してたトコは4桁になるみたい */
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}

変数を使える

これも文字通り。

/* 変数は「@」で。 */
@red: #c00;
@blue: #069;
.border {
    border: 1px solid @blue;
}
.error .border {
    border: 1px solid @red;
}

とか書いたものをコンパイルすると

.border {
    border: 1px solid #cc0000;
}
.error .border {
    border: 1px solid #006699;
}

といった感じ。
で、こんな使い方も出来ます。

.round_corner (@radius:5px) {
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
    border-radius: @radius;
}
.primary_button{
    background:#069;
    border:1px solid #ccc;
    .round_corner(10px);/* 持ってきたスタイルを一部変えたり */
}

とか書いたものをコンパイルすると

.primary_button{
    background:#006699;
    border:1px solid #cccccc;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

演算が出来ます

まあ、これもそのままっちゃ、そのままです。 JSっぽい感覚というか。。。

/* 変数 */
@gutter_width: 12px;
@primary_width: 708px;
@secondary_width: 204px;
/* 変数同士の計算 */
@row_width: @primary_width + @gutter_width;
/* 割ったり引いたり */
@half_width:   (@row_width / 2)  - @gutter_width;
@third_width:  (@row_width / 3)  - @gutter_width;
@fourth_width: (@row_width / 4)  - @gutter_width;
@fifth_width:  (@row_width / 5)  - @gutter_width;
@sixth_width:  (@row_width / 6)  - @gutter_width;
@tenth_width:  (@row_width / 10) - @gutter_width;
/* 出力フォーマット */
.prepend,.append,.col{margin-right:@gutter_width;}
.primary        {width:@primary_width;}
.primary .row   {width:@row_width;}
.secondary      {width:@secondary_width;}
.secondary .row {width:@secondary_width + @gutter_width;}
.half  {width:@half_width;}
.third {width:@third_width;}
.fourth{width:@fourth_width;}
.fifth {width:@fifth_width;}
.sixth {width:@sixth_width;}
.tenth {width:@tenth_width;}

とかすると

.prepend, .append, .col { margin-right: 12px; }
.primary { width: 708px; }
.primary .row { width: 720px; }
.secondary { width: 204px; }
.secondary .row { width: 216px; }
.half { width: 348px; }
.third { width: 228px; }
.fourth { width: 168px; }
.fifth { width: 132px; }
.sixth { width: 108px; }
.tenth { width: 60px; }

こんな感じ。

先に、変数同士で演算した方も、フォーマットする時に演算した方も動いてるみたいですね。

これは、一回書いて持っておいたら、グリッドがしっかり効いたデザインの時は使い回せる気がします。

使うかどうか謎ですが

.color{color:#c00 + 111;}

こんな事も出来るみたいです。

その他

LESSファイルを「@import」みたいな感じで読み込めるみたいです。

@import "style";

これの状態でコンパイルすると、複数ファイルに「いつも使うやつ色々」「フォームとか」「タイポグラフィ関連」「色とか背景とかspriteとか」「言語違い」みたいに分けたファイルを一気に読み込んで、一枚にまとめちゃったりも出来ます。

ここまで試してみての感想

「テンプレート的なものを設計して、バックエンドの人とかに渡すんだけど、CSSが結構複雑だったりすると、修正が。。。」みたいな時はイイかもしれないです。

個人的に気になったのは、ネストした時の動作で、

.editable {
    h1,h2,h3,h4,h5,h6{color:#000;font-weight:bold;}
}

とか書いたものをコンパイルすると

.editable h1 {
    color: #000000;
    font-weight: bold;
}
.editable h2 {
    color: #000000;
    font-weight: bold;
}
.editable h3 {
    color: #000000;
    font-weight: bold;
}
.editable h4 {
    color: #000000;
    font-weight: bold;
}
.editable h5 {
    color: #000000;
    font-weight: bold;
}
.editable h6 {
    color: #000000;
    font-weight: bold;
}

こんな感じになっちゃうんだけど

.editable h1, .editable h2, .editable h3, .editable h4, .editable h5, .editable h6 {
    color: #000000;
    font-weight: bold;
}

こんな感じにして欲しいと思いました。
パフォーマンスの事とか考えたら、少しでもファイルサイズ落としたいですし。。。（まあ、コンパイル後にフォーマットすればイイけど）

「960とかBlueprintみたいのを自作して、書き始めの時だけ使いたい」みたいな用途には使えるかもな。。。でも、全体的には、現状、それほど便利には思えませんでした。　すげーボリュームだったらスピード上がるかなぁ？

という訳で、「こんな使い方をしたら早いと思う」みたいのがあったら教えてください。

* 追記：コーディングに使ってるアプリによっては、プラグインがあるみたいです（例：Coda）

MITだったから多分大丈夫だと思うけど、後で取り下げたりしたらすみません。

スクリプトの入手

Codaのプラグインを探していたら、hail2u.netさんにすてきなPerlスクリプトがあったので、それに適当な名前をつけて、デスクトップなどに保存します。
* もう、本当にそのままコピペでOK。

CSSのプロパティをソートするPerlスクリプト（via @hail2u.net）

Coda Plug-In Creatorでプラグインを書き出す

Coda Plug-In Creatorを起動します（持ってない場合は、Panicからダウンロードして下さい）。

とりあえず、画面左側「コマンド」のところに適当なコマンド名（今回はSortPropertiesとした）を入力し、さっき保存したスクリプトをドラッグします。
* ショートカットを利用したい場合は、この時にコマンド名横の「ショートカット」をアクティブにして、使いたいショートカットを押すと、設定出来ます。

たぶん、自動的に保存されると余計なお世話なので、実行時の動作は「なし（デフォルト）」のまま。
入力タイプを「書類」。　出力タイプを「現在の書類と置換」に変更。

あとは、名前（今回はSortPropertiesとした）をつけて保存するだけ。

保存場所は、Plug-Insが候補として出ると思います。
普段はそのまま、そこに置いちゃってOK。　どっか、別に保存したい場合は、適当に選ぶと「拡張子codaplugin」で保存されます。

以上です。

使い方

今までの流れでプラグインを作った場合、適当なファイルを開くとプラグインメニューに「SortProperties」という項目が追加されますので、実行すれば、ソートされます。

ソートの規則はCSS のプロパティをソートするPerlスクリプト（via @hail2u.net）に準じますが、独自の並び順を使いたい場合は、スクリプト内でプロパティがズラっと並んでいる部分を書き換えればいけます。

ちなみに、シングルラインで書いていた場合、「{」の後と「}」の前に改行が入っちゃうので、プロパティを並び替えた後に最適化系のプラグインなどを使うと幸せになれるかもしれません。

/* ここで言うトコロの「シングルライン」てのは */
.selector1 {property:value;property:value;property:value;}
.selector2 {property:value;property:value;property:value;}
.selector3 {property:value;property:value;property:value;}
/* のコトです。 */

/* このプラグインを使うと↑のが */
.selector1 {
property:value;property:value;property:value;
}
.selector2 {
property:value;property:value;property:value;
}
.selector3 {
property:value;property:value;property:value;
}
/* こんな感じに書き変わります */

私が確認した限りでは、プロパティの前に「/」を付けたりしてると、独自拡張扱いになって最後の方にまとまります。　個人的にはこれが便利だと感じました。

ダウンロード

作るの面倒な人は下記からダウンロード出来ます。

Download

動作が確認されている環境

• Mac OS X（10.6）
• Coda（1.6.1）

不具合・リクエスト・質問などはTwitterからどうぞ。

で、「Movable TypeのブログでRTボタンを作る方法」について書きます。

前提条件:

• ここで言うトコロのRTは、このブログの記事の内容にコメントを付けてTwitterに投稿すること
• HTMLソースの書き出しにはPHPを使う
• bit.lyでソースを短くする

という感じです。
* URL短縮サービスを利用する場合、「APIが落ちてたら」を想定して手を打っておく必要があると思います。

まずは「こういうのが書き出されればOK」というソースです。

<a title="Twetter" class="retweet" rel="nofollow" href="http://twitter.com/home?status=RT%20@nagomu:%20%E5%A4%96%E9%83%A8%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%81%BF%E6%99%82%E3%81%AE%E3%83%91%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%B3%E3%82%B9%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%20http://bit.ly/6pwHzC%20">retweet</a>

後でも書きますが、ポイントは「URLエンコードしておかないと日本語はアウト」なトコロです。

これをもうちょっと見やすく、目的別に分離すると。。。

<a href="http://twitter.com/home?status=RT @nagomu: 外部ファイル読み込み時のパフォーマンスについて http://bit.ly/6pwHzC ">retweet</a>

と、こんな感じです。

「http://twitter.com/home?status=RT」「@Twitterアカウント」「ブログ記事のタイトル」「bit.lyで短縮した、記事のURL」を書き出せればOKな訳ですね。

bit.lyのAPIで短縮URLを作る

ほとんどの場合、そのままリンクを貼ってしまうとTwitterに書いてもらうには長過ぎます。　で、URL短縮の方法は色々あると思いますが、今回はbit.lyを利用しました。

1. まず、http://bit.ly/でアカウント（無料のでOK）を作る
2. 「account setting」画面でAPI Keyをコピーしておく

とりあえずはココまで。

PHPを書く

今回はPHPでbit.lyのAPIを利用します。

<?php
    $retweet ='RT @ここはTwitterのID: ';
    $title ='記事のタイトル ';
    $url ='http://ブログ記事のURL';
    $login = 'ここにbit.lyのID';
    $key = 'ここにbit.lyのAPI key';
    $api = 'http://api.bit.ly/shorten?format=xml&version=2.0.1&login='.$login.'&apiKey='.$key.'&longUrl='.$url;
    $bitly = simplexml_load_file($api);
    $short_url = $bitly->results->nodeKeyVal->shortUrl;
    print '<a href="http://twitter.com/home?status='.$retweet.$title.$short_url.'%20" rel="nofollow" class="retweet" title="Twetter">retweet</a>';
?>

こんな感じです。

ただ、前述の通り色々とURLエンコードしてあげないと化ける可能性が高いので、それを踏まえてMTのテンプレートを書きます。

MTテンプレートを書く

半角の空白文字も「%20」としています。

<?php
    $retweet ='RT%20@ここはTwitterのID:%20';
    $title ='<$mt:EntryTitle encode_url="1"$>%20';
    $url ='<$mt:EntryLink$>';
    $login = 'ここにbit.lyのID';
    $key = 'ここにbit.lyのAPI key'; <mt:Ignore>例：R_123456789f123456a123456c</mt:Ignore>
    $api = 'http://api.bit.ly/shorten?format=xml&version=2.0.1&login='.$login.'&apiKey='.$key.'&longUrl='.$url;
    $bitly = simplexml_load_file($api);
    $short_url = $bitly->results->nodeKeyVal->shortUrl;
    print '<a href="http://twitter.com/home?status='.$retweet.$title.$short_url.'%20" rel="nofollow" class="retweet" title="Twetter">retweet</a>';
?>

MTが書き出す部分は、「encode_url="1"」をしておけば、ほぼ問題ないはずです。

私の場合は、全てのページがPHPとして動作するので、このテンプレートを直接、個別記事アーカイブに埋め込んでいます。
Wordpressとかだったら、当然同じ感じで作れますね。

まとめ

• どうせコメントもトラックバックもつかないので、TwitterとかFacebook用のボタンをつけた
• URLはbit.lyで短縮してみる
• bit.lyのAPIはPHPで利用してみた
• 空白文字もふくめてURLエンコードする

前回とは結論が変わりました。
ただ、ケースバイケースではあります。

「cssに関しては、多くのブラウザが並行で読み込む事が出来るけど、IE6とかIE7とかだとその辺が微妙だから注意してね」という感じです。

link - import.css
       @import a.css
       @import b.css

とかしてると、並行で読み込んでくれなかったり、Javascriptを先に読み込まれちゃったりして、問題が起きがちだから複数読む時はlinkを並べようぜ。

@import a.css
@import b.css

は、アリだけど、@importの数が増えてくると全てを並行では読んでくれないから、やっぱりlinkがイイぜ（前回は、ここが抜けてた）。

自分の場合の基本姿勢

特にレギュレーションなどが提示されない場合、以下の感じで書いてます。

• たとえターゲット以外のブラウザでも、レイアウトが崩れるのはちょっと
• レイアウトが崩れるくらいなら、CSS無しの方がイイ（HTMLがまともなら内容は問題なく閲覧できる）
• CSS読ませないブラウザでも、フリーズしちゃうとかはあまりにも。。。
• HTMLのソースに余計な事書くのは本末転倒だから、コンディショナルコメントは使いたくねえ

ただ、最近は「スピード重視！」ブーム（個人的に）なので、画像の書き出しやCSS / JSなどの書き方もスピードを気にして、良く触りそうなトコロ以外はシングルラインで書いたりしてます。

で、どうするか

結局、linkで読み込むのが一番固いようです。

ただ、それだと「IE5以下には読ませたくない！」とかがやりにくいですね。
ブラウザごとに対応を考えてみます。

• 新しいのはとりあえずママでOK
• ネスケ4とかネスケの古いのはmediaにscreen以外を入れておけばOK
• ターゲット以外のIE（まあ、6未満とかが多いでしょうか）は、とりあえずIE8.jsとか使って、ver5の世代だけ救出
• IE4以下は、まあ、いないと思うので無視します。 使ってる人ゴメンなさい。
• MacIEこれが問題です。 検討中ですがMacでクラシック使ってる人は大変ですよね。。。

どう書くか

上記を踏まえて、どう書くかですが。。。

<link ... media=""all /> <!-- という感じでまずCSSを -->
<link ... media=""all />
<script ...></script> <!-- という感じで共通のJavascriptを -->
<script ...></script> 
<!--[if lt IE 8]><script ...></script> <![endif]--> IE8より古いIEだけ、IE8.jsを読み込む
<!--[if lte IE 6]>
<script ...></script> <!-- 必要ならIE6以下は透過png対応JSを読み込む -->
<script ...></script> <!-- 透過pngのライブラリ用のJS（セレクタとか指定してるヤツ） -->
<![endif]-->

と、まあ、こんな感じで落ち着きました。

微妙だが。。。（汗

コンディショナルコメントを使っている部分はサーバサイドで処理したい気もします。
また、CSSに関しては、たいがいインラインでハックを使っています（自分一人で管理している事は少ないので、見通しが悪くなるから、ie6.cssとかは作らない）。

IE8.jsを使うとはいえ、JSがオフだったらダダ崩れってのは避けたいですので、一応、ターゲットブラウザに関してはCSSでも互換対応します。

参考サイト

• IE7.js / IE8.js（Google Code）
• Google Page Speedでサイトを高速化(3) | Screw-Axis
• Page Speed（Google Code）
• YSlow（Yahoo!）

以下、MTOS5での動作は未確認ですが、MT5で動いているものは大概大丈夫だと思われます。

記事入力画面で、CKEditorを利用するプラグインです。
私の場合（個人的にですが）、「大量の入力項目を埋める」のが面倒だと感じるので、WYSIWYGでテンプレートを持っておいて、その組み合せで作るような仕組みを提案する場合が多いです。
という訳で、WYSIWYGのプラグインは必須な訳ですが、CKEditorプラグインはとても良く出来ているので、ほとんどの場合使うと思います。

CKEditor for Movable Type とは - ToI

UploadDir

アップロードするファイルの拡張子によって、アップロード先のディレクトリを振り分けるプラグインです。
これは、MT3の頃から利用させていただいておりますが、こういうのを用意しておかないと「ルートに大量の画像ファイルが。。。」なんて事になりがちなので、とても良いと思います。
プラグインを使わずとも対処出来ますが、プラグインの方が良い気がします。

エムロジック放課後プロジェクト: UploadDir

VarExpand

変数の機能を拡張するプラグインです。
MT4からは、かなり色々とプログラムちっくな事が出来るようになりましたが、変数同士の計算とかはちょい面倒。
そんな時にこのプラグインが大活躍します。
MT5で試した限りでは、ちょいと手を加えないとダメっぽかったですが、そのウチ対応して下さるかと。

変数の機能を拡張するプラグイン - The blog of H.Fujimoto

WriteToFile

1つのテンプレートから複数のファイルを書き出せるようにするプラグインです。
アイディア次第で、様々な条件でファイルの書き出しが可能です。

• ページを分割する
• トラックバックとかコメントをJSとかJSONとかで書き出す
• フィールドの値を配列として扱って、その分だけファイルを書き出す

などなど、工夫次第で今まで「無理！」と思っていた事が出来るようになるかも？

テンプレートの再構築結果を部分的にファイルに出力するプラグイン - The blog of H.Fujimoto

SortCatFld

カテゴリやフォルダなどのソートに役立つプラグインです。
今後、MT5では標準で出来るようになるのかもしれない（？)

カテゴリとフォルダを並べ替えるプラグイン - The blog of H.Fujimoto

その他

いい感じのが見つかれば利用させていただくと思いますが、下記は、案件毎に必要なものを自作予定。

• 必要なフィールドを追加するプラグイン
• headにscriptとかstyleを書けるようにするプラグイン
• 正規表現で置換とかするプラグイン

と、このくらいあれば、大概の案件はこなせそうな気がします。
来月は2週目くらいに余裕が出来そうな気がするので、その頃、もうちょっと突っ込んだ内容が書けるといいな。。。と思っています。