iframeで埋め込む時とか、吹き出し部分が中途半端な感じになったりして、なんだか微妙だけど、マーカーは残しておきたいときのメモ。
下図のような感じです。
これを回避するには、「iwloc=A」というのを「iwloc=」とする事で実現出来るっぽい。
APIがアップデートされたりとかすると、こういうのは変わると思うので、ご注意ください。
]]>さて、CodaでSass使うとき、Sass.modeについてポストしている人は結構いるみたいですが、プラグインについてはあまり見つからなかったので、リンクを共有します。
「.scssを保存したら、自動で.cssを書き出したり」とかいう設定も出来るっぽいです。
Sassを試してみたいけど、黒い画面はちょっと...というアナタ。いかがでしょう？
現時点（2011年11月28日）では、まだ、誰が何を書くかはっきりしていませんが、非常に楽しみです！
全力でROM！なのですが、個人的には利用シーンというか「こういうケースでこんな使い方するとイイよー」みたいなのが聞ける（読める）と嬉しいなーとか思っています。
LessもSassも、まだまだ、軽ーくしか使っていないのですが、やはり、鍵になるのは「普及するかどうか」だと考えていて、それは、「ある程度、スタンダードな手法になれば、導入しやすくなるんじゃないかなー」とか「一人で使うなら他の手段もあるしなー」とかいうのが、軽ーく使ってみた印象です。
今のところ、Sass中心なので、Sassが主流になってくれると有難い！ ので、@extendとか@mediaとかを便利（とかカッコイイ感じ）に使ってるサンプルにも期待しています。
まだ、定員に達してない様子（2011年11月28日時点）なので、「書くぜ！」という方は、ぜひ！
「やばい、また今月も書いてないなー」というだけで書いた訳ではないですよ（汗
]]>iframeで埋め込む時とか、吹き出し部分が中途半端な感じになったりして、なんだか微妙だけど、マーカーは残しておきたいときのメモ。
下図のような感じです。
これを回避するには、「iwloc=A」というのを「iwloc=」とする事で実現出来るっぽい。
APIがアップデートされたりとかすると、こういうのは変わると思うので、ご注意ください。
]]>.inner」とかを使わないで実現する方法を、みなさまお馴染（？）のヨモツネットさんの記事を参考にして書いたりしていたのですが、久しぶりに使おうと思ったら、忘れてたので、メモ。
横幅が 100% の header を ~inner を使わずに実現する | ヨモツネット（デモ）
元記事が読めなかったので、断言出来ないのですが、標準モードではIE6でも問題なさそうな感じでした。
やりたい事を上手く表現出来ないので、図でごまかします。下図のようなレイアウトを実現したい感じです。
HTMLは、下記みたいな感じで、「.inner」とかを使わないで書きます。
HTML
<div id="document">
<div id="header">
<h1>Header</h1>
<!-- /div#header --></div>
<div id="body">
<p>Contents</p>
<!-- /div#body --></div>
<div id="footer">
<h1>Footer</h1>
<!-- /div#footer --></div>
<!-- // div#document --></div>
CSSは、下記みたいな感じです。関係あるトコロだけ書きます。
CSS
#document {
position: relative;
min-width: 960px;
overflow: hidden;
_width: 960px;
_margin: 0 auto;
_position: static; }
#header, #footer {
width: 960px;
/* margin-leftは「padding-leftと、幅の半分を足したサイズ」をマイナスする */
margin-left: -5480px;
padding: 0 5000px;
position: relative;
left:50%; }
/* 今回、メインコンテンツ部分は普通（？）に */
#body {
width: 960px;
margin: 0 auto; }
「padding」の値は適当に。 「どのくらいの画面サイズを想定するか」ですかね。
条件によっては上手くいかない場合もあるかもしれません。 デモは下記。
]]>簡略化すると「複数行の検索・置換するとき、1行テキストボックスだと使いにくいよね」「できます」という話です。
「先月書いてないなー」というだけで書いた訳ではないですよ（汗
]]>Cross-Browser CSS in Seconds with Prefixr
見てたら、TextMateで使う場合のサンプルとかあったので、Codaのプラグインにしてみました。 例によって、全くと言って良いほど検証していませんが、置いておきます。 よろしければお使いください。
Prefixr （zip 6KB）
使う時は、
/* 例えば、こんなん書いて、選択します（1行だったら、zen-codingの「ctrl + L」とかでいける） */
.foo {border-radius: 5px;}
/* 「cmd + shift + ctrl + P」すると、 */
.foo {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
また、
/* 以下のように他のプロパティが混ざっていた場合は, */
.foo {
width: 100%;
border-radius: 5px;
font-size: 1.2rem;
}
/* こんな感じです。 */
.foo {
width: 100%;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
font-size: 1.2rem;
}
見た目を調整してませんが、プロパティの前にはタブでインデントが入ります。
セレクタが無いまま、「border-radius: 5px;」だけ選択しても動作しますが、最後のセミコロンを省略してたりするとダメっぽかったです。
「俺、シングルラインで書いてるし」という人は、もう一度選択して、zen-coding（Tea for Coda）の「ctrl + M」すれば、イイんじゃないすかね？
といった感じです。
出来る事も出来ない事も、Prefixr次第という感じで、今のところ、たぶん、オプションは使えません。 あと、当然、オフラインだと使えないです。
]]>現在（2011年7月22日）、配布停止されているのですが、理由は「ConvertKanaを利用し「全角カナ→半角カナ」変換を行い、変換後のファイルをIEで開くと濁点のある文字の表示が崩れる現象が確認されました。
」との事。
かつて、このブログでも、さりげなく、似たようなものを配布していたのですが、仕組みは同じだったので、当然、同様の問題を抱えていました。 「でも、使いたい！」という事で修正中なのですが、なんとなく動いているっぽいので晒しておきます。
※（恒例となりつつありますが）きちんと動作確認出来ていないので、バグなどありましたら、是非、お知らせください。
TextFormat （zip 12KB）
たぶん、使い方とか書く必要無いと思いますが、リクエストがあれば追記します。
]]>MTML.mode （zip 20KB）
構文モードの追加は、「/UserName/Library/Application%20Support/Coda/Modes」の中に一式突っ込むだけです。
今の所、下記のような感じです。
まともに検証されていないので、おかしいトコロがあったら是非、ご報告ください。
このあたりは、今後、やりたいと思ってますが......「ニーズ無さそう」とか思ってるので、いつになるかは......
]]>管理画面で直接書いている人もいらっしゃると思いますが、私は概ねローカルでファイルを作っているので、他の言語同様Codaで書いているのですが、Wordpressモードとかはサクっと見つかるものの、MTモードはないっ！（見つからない）
「ココにあるよ」という事でしたら、是非教えて下さい！
で、見つからないので、作りました。
やっつけ仕事感満載ですが、バックアップを兼ねて晒しておきます。
MTML.mode （zip 8KB）
ざっと、こんな感じです。
なんだか、物凄い量なので、いつになるか分かりませんが......
といった作業をコツコツ進めようと考えております。
誤りなどございましたら、是非、お知らせください。
]]>たぶん、私以外の人が使っても便利じゃないと思うのですが、一応、晒しておきます（恥
Starter （zip 12KB）
]]>まあ、タイトルの通りなんですが、PageButeプラグインを使うと、PageButeのPageNextとMTのPageNextが被ってて、プラグインが優先される事によってMTのPageNextが使えないという罠がありました。
『PageXX』なタグを『PagebuteXX』に変更するればいけるだろうと思ったのですが、全部変えたら、MaxCountとかLastとかFirstが動かなかったので、ちょっと気持ち悪いけど、下記のように前後のだけ変更する事で一応解決しました。 無料のプラグインに文句言っちゃダメです。
block =>
IfPageNext → IfPagebuteNext
IfPageBefore → IfPagebuteBefore
function =>
PageNext → PagebuteNext
PageBefore → PagebuteBefore
]]>
若干トリッキーな手法だけど、font-familyをいじくるよりずっと実用的だし、font-familyいじくるよりはトリッキーじゃない（？）気がします。 ただ、「なんでか」が判明していないので、有識者の方、教えてください！
変更のポイントは下記の通りです。
（Webkitでword-spacingがちゃんと動けば、「display:table」要らないのになー）
ソースは以下のような感じです。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<style>
.blocks {
display: table;
width: 100%;
word-spacing: -1em;
}
.block {
/* ↓ Firefox2対策なので、無視OKなら不要 */
display: -moz-inline-box;
display: inline-block;
word-spacing: normal;
vertical-align: top;
/zoom: 1;
/display: inline;
}
/* ↓ Firefox2対策なので、無視OKなら不要 */
.block-item {
display: block;
}
</style>
</head>
<body>
<div class="blocks">
<div class="block">
<div class="block-item">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div class="block">
<div class="block-item">
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="block">
<div class="block-item">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div class="block">
<div class="block-item">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
<div class="block">
<div class="block-item">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<!-- /.blocks --></div>
</body>
</html>
※ ↑ リセットしてる前提です。
]]>2011年4月3日に、別のパターンを書きました。『inline-blockの隙間を無くす話 その後』
もうちょっと、きちんとまとめてから、改めて書きたいと思います（誰か書いてくれるとありがたいけど）が、とりあえず、色々試した結果を。
色々意見はあると思うので、是非、お聞かせ願いたいトコロですし、今後、状況は変わっていくと思います。
とはいえ、2011年春の時点では、使えるシーンは結構ある思います。
などなど
@terkelさんから、「YUIのGridがかっこいい」という話を聞いたので、チラ見してたら、@sigwygさんから、「こんなん（StackLayout by Campbell McGuiness）もあるよ」と教えていただき、さらに、@understandard、@tobotobotoから、「-0.4emでいけるんじゃ？」という情報が......
「@terkelさんが、まとめてくれるはずっ」と言ったものの、気になり始めたので、テストする事にした。
という感じです。
ちなみに、自分は、親要素でfont-sizeをリセットしたりしながら使ってたのですが、結局、ブラウザ間の誤差とか埋めきれてなくて「上手い方法ないかなー」と思ってたトコロ。
見た方が早いと思います。キャプったりしてなくてすみません......
以下、理由は怪しいです！
残りは、@terkelさんに期待。
下記、一応、まとめてzipしたやつです。
早速、追記です（当日）。
さらに色々と試しましたが、下記のような感じでした。
親要素のフォントサイズが19pxをこえると、Chromeは左向きに食い込みました（まあ、考えにくいケースだけど、フォントサイズ変更ボタンとか用意する場合は注意ですね）。
多分、「-0.625emくらい」って感じでOKなので、-0.65emで十分動作しそうです。
結果的に、stacklayout.cssの方式になった。
必要なトコだけ抜き出すと......
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<style>
body,
.block {
font-family: sans-serif;
}
.blocks {
font-family: 'Courier New',monospace;
letter-spacing: -0.65em;
word-spacing: -0.65em;
}
.block {
/* ↓ Firefox2対策なので、無視OKなら不要 */
display: -moz-inline-box;
display: inline-block;
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
/zoom: 1;
/display: inline;
}
/* ↓ Firefox2対策なので、無視OKなら不要 */
.block-item {
display: block;
}
</style>
</head>
<body>
<div class="blocks">
<div class="block">
<div class="block-item">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div class="block">
<div class="block-item">
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="block">
<div class="block-item">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div class="block">
<div class="block-item">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
<div class="block">
<div class="block-item">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<!-- /.blocks --></div>
</body>
</html>
※ ↑ リセットしてる前提です。
こんな感じでしょうか？ たぶん、vertical-align:topは入れといた方が便利ですが。
]]>Movable Typeを使うお仕事の場合、自分がユーザーだったら「大量のカスタムフィールドに入力するの面倒だから、出来るだけWYSIWYGだけで済ませたくね？」と思うので、CKEditorのテンプレート機能を駆使する方向で提案しています。 しかしながら、そのまま使うと、書き出されるソースに「インデント」「開始タグの後に改行」が入ってしまって、「まあ、MTタグで正規表現などを使って置換しても良いのだけれど......なんだかなぁ」とか思ってました。
で、今まで放置してた訳ですが、さすがにそろそろ調べてみようという事で、自分用のメモを晒しておきます。
CKEditorには便利なボタンがたくさん用意されているので、基本的にはカスタム設定で減らしていく事の方が多いと思いますが、とりあえず「こんなの無いかなぁ」って時に探す場所とか、過去に使ったプラグインをメモ。
YouTubeとかGoogleマップとか「ソースを貼り付け」がしたい時に使えます。
Inserthtmlプラグイン （Google Code）
お仕事で使う場合は、langの中にja.jsを作って、ラベルなんかをローカライズしてあげると良いかもしれません。
インストールの方法はreadmeに書いてあります。
まあ、pluginsに入れて、ボタンを設定のトコにinserthtmlを追加するだけです。
場所は「CKEditor/ckeditor/skins/movabletype/icons.png」。 movabletype以外のスキンを使う予定がないので、他のは削除。
場所は「CKEditor/style/config.js」
ほとんど、テンプレートで挿入するようにしているので、ここで使うのは、太い赤字とか小さいグレーの字とかデフォルトで入ってるqやciteくらいですかねぇ。
場所は「CKEditor/template/config.js」 よくあるパターンとしては、キャプション付きの画像を左右にfloatとか、定型の連絡先とか......lightbox的な事などにもイイ気がします。
今回、探してたのはココなんですが、「Developers Guide」にありました。
詳細はリンク先をご覧いただければわかると思いますが、使いそうなのは......
って感じです。
<p>
\tほげほげほげほげほげ</p>
<p>
\tほげほげほげほげほげ</p>
とか整形されてたのを
<p>ほげほげほげほげほげ</p>
<p>ほげほげほげほげほげ</p>
に出来るはず。
ただ、configでも出来るので、元のソースをいじるのはやめといた方がいいかもですね。
configは、「/mt-staticが入ってるディレクトリ/mt-static/plugins/CKEditor/config.js」に書きます。あらかじめ、サンプルが入ってるので、それを参考に
CKEDITOR.editorConfig = function(config) {
config.indentationChars = '';
config.breakAfterOpen : false,
};
こんな感じでいけるはず（未検証）。 ダメっぽかったです。
追記：テンプレートを使う時、デフォルトで「内容を置き換えない」にするには、templates_replaceContentをfalseに。
PublishCharset | 環境変数リファレンス （MovableType.jp）
※ 早速、訂正。下記の設定は「内部をUTF-8のまま、出力を変更するものではない」ようで、（少なくともMT5では）原則、UTF-8のみ。かも（管理画面でエラーが出ました）。他に、SQLSetNames 1というのも見つけたけど、動作は未確認です。
mt-config.cgiに下記を追加します（前述の通り、デフォルトはUTF-8）。
PublishCharset EUC-JP
まだ、検証してないので、後から修正するかもしれません :P
注意事項としては、システム全体に影響を与える設定であるという事を忘れずに。
あと、以前書いた『mt-config.cgiのスニペット』という記事にも追加しておきます。
]]>［Movable Typeで静的にページ分割を行うために、非常に便利なプラグイン『PageBute』と、「http://www.nagomu.me/」などを「/」に置換したい時に便利なプラグイン『TruncateURL』を同時使用したい時にハマったからメモしておく］という内容です。
PageButeはファイルの生成時に動作します 2。
なので、SetVarBlockとか使って変数に入れてIfで。。。とか無理。
あと、何か文字列が入ったりするので、デザインによっては結構キビしいです。。。と毎回、その事を忘れててハマりつつ、許される場合は、JSでゴニョゴニョしてごまかしたりしてます。
上記の理由からか、併用するとTruncateURLが上手く動作してくれないようです。
例えば、
インデックステンプレート：
<MTTruncateURL><$mt:Include module="index"$></MTTruncateURL>
テンプレート・モジュール「index」
<MTPageContents count="10"><mt:Entries>
・・・
<mt:Entries></MTPageContents>
というのはダメなので、どうするかというと、
インデックステンプレート：
<MTTruncateURL><$mt:Include module="index"$></MTTruncateURL>
テンプレート・モジュール「index」
<MTPageContents count="10"><mt:Entries><MTTruncateURL>
・・・
</MTTruncateURL><mt:Entries></MTPageContents>
と、こんな感じでちょっと面倒です 3。
個人レベルではどうにでもなるけど、仕事となると、ページ分割は、色々検討の余地がありますね 4。
*1 2009年の記事だという事をお忘れなく。
*2 なんか、メモとはいえ言い切ってて怖いです。ちゃんとコードを追ったりしていませんので、理由については鵜呑みにしないでください。 当時のMTのバージョンが書いていなくて、申し訳ございません。 （MT標準のグローバル・モディファイア）replaceなどでも同様だったと記憶しています。
*3 意味不明だと思いますが、要するに「分割対象よりも内側でTruncateURLを使うと（たぶん）先に処理されるから大丈夫」という意味だと思います。
*4 MTの強みは静的なファイル生成だと思うので、標準機能にして欲しいところです。
前回の作業で作ったディレクトリを見ると、/config/database.ymlというファイルがある。 開くと、DBの設定的な事が書かれているぽい。 sqlite3とあるので、とりあえずChromeのエクステンションにSQLiteまねーじゃー的な何かが無いか探してみる。→あるのかもしれないけど、見つけられなかったので、FirefoxにSQLite Manager（リンク変わってたらゴメンなさい）を入れる事に。→起動する。「Flash Playerを最新に......」と言われ、げんなりする。再起動して、SQLite Managerをインストールして、さらに再起動する。
とりあえず、DBを準備します。
対象のディレクトリに移動して、rakeする。
cd /Volumes/Documents/Projects/check
rake db:create
おおー、dbのファイルが出来たぽい。
SQLite Managerで見てみる。 問題ない。
では、サーバーを起動してみよう。
ruby script/server
http://localhost:3000/にアクセス。
はい。 ちゃんと表示されてます。
次にScaffoldなるものを試す。
無計画にちょっと作ってみる。
ruby script/generate scaffold Entry title:string body:text
おー、なんかすげー自動的だな。
Migrationする。
全く理解出来ていないけど、テーブルの追加・変更なんかを簡単に出来るように管理する為の仕組みみたい。
rake db:migrate
たぶん、OK。 なにやら、entriesというテーブルが作られた様子（下記、参照）。
== CreateEntries: migrating ==================================================
-- create_table(:entries)
-> 0.0015s
== CreateEntries: migrated (0.0016s) =========================================
「http://localhost:3000/entries」にアクセスしてみる。
New Entryをクリックしたら、「http://localhost:3000/entries/new」に移動した。 おー、管理画面的な......
これは、入力してみたいのが人情というものですよね。
「Create」をポチると......
おー！できとる！ ここ最近で一番感動したかも。
ちなみに、「http://localhost:3000/entries」にアクセスしてみたけど、そっちも（当然？）反映されてた。
「Destroy」をクリックで、上記の画像のようにアラートが表示されて、OKすると削除出来るみたい（しなかったので「みたい」とした）。
まだまだ触りたいけど、今夜は長いので、一回休憩します。
メモ：detach
ruby script/server -d
↓後で読む。
]]>とりあえずMacPortsを更新してみる
sudo port -d sync
カジュアルにRubyとRubyGemsをインストール。
すげー時間かかりそうで早速後悔するなど。入ってたしね。
sudo port install ruby rb-rubygems
Rails入れる。 なんかエラー出てたけど無視。
sudo gem install rails --include-dependencies
SQLite3入れる。
sudo port install sqlite3
SQLite3アダプタを入れる。 なんか、警告出てるけど、またもやスルー。
sudo gem install sqlite3-ruby
mongrelを入れてみる。 これまた警告出てるけどスルー。
読み方「もんぐれる」でイイんすね？本当ですね？
sudo gem install -y mongrel mongrel_cluster
リストを見てみる。まあ、色々入ってるぽかった。
gem list
適当なディレクトリに移動して、check用に開発環境を。
cd /Volumes/Documents/Projects/check
rails rails-demo
色々出来たので、動かしてみる。
cd /Volumes/Documents/Projects/check/rails-demo
ruby script/server
これでサーバー起動するはずだったんだけど、エラーが出て「sudo gem install -v=2.3.5 railsして」と言われた。
やってみた。
sudo gem install -v=2.3.5 rails
もう一度移動して、動かしてみる。
cd /Volumes/Documents/Projects/check/rails-demo
ruby script/server
おおっ。mongrel動いた。http://0.0.0.0:3000/にアクセスして見る。なんか表示されてる。おなじみ（？）の「Ctrl-C」でシャットダウンですね。 覚えました（たぶん）。
]]>
下記の情報では、17GB→6GBになったとか。 これはデカイですね。
Macで楽しくお仕事: 肥大化した VMware 仮想マシンの圧縮（Windows XP Professional の場合）
まだ、試していませんけども。
]]>仮想マシンがフリーズをした時に、仮想マシンの強制終了はできないんでしょうか | act2.com
「設定→ディスプレイ→3Dグラフィックスの高速」からチェックを外すと良いらしい。
いや、「らしい」といういうより、私の環境では改善しました。
VMWare Fusion 3 何だか重い？ | denno-bonno
続報：改善したかと思ったら、その時によって動作が異なるようです。 順調な時はSSD化したせいか、以前より早いです。（追記：）
]]>まだ、使い勝手は分からないです。
]]>「みたいです」なのは、まだ使ってないからなんですが、2011年の正月休みはSSD+HDD化（やさしいMacBookProの育て方 - SSD+HDDで快適生活 | KRAY Inc）しようと思っているので、その時にアプリケーションを入れ直したりするのに色々、リストアップしてるわけです。
]]>ただ、（デフォルトのままだと）png24とかをpng8にしちゃったりする*ので、軽く心構えと注意が必要。
よく分かってないのですが、PINGPOUTのくだりが関係してるのかも？
* PNGOUT使えば大丈夫っぽい。その場合、他のpngのオプションを外すぽい
たとえば、パフォーマンスに難のあるマシンで、CKEditorとか使ってるとcke_bookmarkとか残っちゃったりするので、できればデータから消して欲しいけど、漏れに備えてreplaceしましょーみたいな場合......
<mt:EntryBody replace="<span cke_bookmark="1" style="display: none;"> </span>","" />
こんな感じでいけます。
試してないですが、変数使ってもいけるハズ。
<mt:SetVarBlock name="hoge"><span cke_bookmark="1" style="displa: none;"> </span></mt:SetVarBlock>
<mt:EntryBody replace="$hoge","" />
]]>
CodaでもCSSのプロパティ順を揃えるプラグインがあったらいいのにな」的なコメントを見つけたので、「じゃあ、作ってみようか」と思って、とりあえず、「どっかにあるかも？」と探してみたトコロ、Codaのプラグインではないが、とても素晴らしいPerlのスクリプトがあったので、流用させていただく事にしました。
CSSのプロパティをソートするPerlスクリプト （hail2u.net）
前述のPerlスクリプトと異なる点があります。
この辺が気に入らない場合、『Coda Plug-in Creator』をダウンロードしてきて、適当にいじってください。
また、以前配布していた時と違って書類全体ではなく、選択部分を置換するように仕様変更しました。
SortProperties.zip （Zip 8KB）
不具合などありましたら、ご一報いただけると幸いです（Twitter: @nagomu）。
]]>結果としては、以下のようなアーカイブマッピングしても、ファイルは書き出されませんでした（追記 [Dec 09, 2010]：試したのは月別アーカイブです）。
<mt:Calendar month="this">%y/%m/<mt:CalendarDay zero_pad="2" />%x</mt:Calendar>
やりたい事としては、記事の有無に関わらず、暦通りにアーカイブを書き出して、内容は、記事がなければ「ありません」にするような、需要ありそうなパターンです。
意外にひっそり出来るようになってるかもーと思ったけど、たぶん、プラグイン書くか、動的に運営しないとダメですねー
......ところで、CSS Tricksってリニューアルされましたか？
Code Snippets （CSS Tricks）
]]>ただ、知ってたよりも色々出来るっぽいので、一応、メモっておきます。
About Conditional Comments （msdn）
notしか知らなかったけど、ANDとかORも出来るのね......使うかどうかは別として。
あと、以下のような事も出来るぽい。
<!--[if gte IE 9]><!-->
* ここからはIE9以上か、条件分岐コメントを解さないIEか、IE以外だけが読む
<style type="text/css" media="all">
@import '/common/css/core.css';
</style>
* ここまではIE9以上か、条件分岐コメントを解さないIEか、IE以外だけが読む
<!--<![endif]-->
## Movable Type Configuration File
##
## This file defines system-wide
## settings for Movable Type. In
## total, there are over a hundred
## options, but only those
## critical for everyone are listed
## below.
##
## Information on all others can be
## found at:
## http://www.movabletype.jp/documentation/config
#======== REQUIRED SETTINGS ==========
CGIPath /mtのパス/
StaticWebPath /mtのパス/mt-static/
StaticFilePath /サーバーのルート/mtのパス/mt-static
#======== DATABASE SETTINGS ==========
ObjectDriver DBI::mysql
Database DBの名前
DBUser DBユーザーの名前
DBPassword DBパスワード
DBHost DBホスト
#======== MAIL =======================
MailTransfer sendmail
SendMailPath /usr/lib/sendmail
#AdminScript mt.cgiをリネームする場合のファイル名
#CommentScript コメント使う場合のファイル名
#TrackbackScript Trackback使う場合のファイル名
#XMLRPCScript XML-RPC使う場合のファイル名
#AssetCacheDir サムネイル画像を生成するディレクトリ名
#SupportDirectoryPath /サーバーのルート/ユーザーの画像とかをアップするディレクトリ名
#SupportDirectoryURL ユーザーの画像とかをアップするディレクトリURL（http://~）
#SearchScript 検索スクリプトファイル名
#AltTemplate 代替テンプレート名 代替検索テンプレートファイル名
#SearchTemplatePath 検索テンプレートのディレクトリ名
#SearchDefaultTemplate デフォルト検索テンプレートファイル名
#PublishCharset UTF-8
DefaultLanguage ja
#DirUmask 0072
#HTMLPerms 0604
#UploadPerms 0604
環境変数リファレンス （MovableType.jp）
※ に編集。補助的な設定はコメントアウト。PublishCharsetを追加。
※ に編集。補助的な設定はコメントアウト。DirUmask / HTMLPerms / UploadPermsを追加。
]]>Firefoxだと『Index of /pub/mozilla.org/firefox/releases』から取ってきて、適当に「Applications/Firefox」とかにFirefox3.6, Firefox3.5 ....... みたいなファイル名で持っておくようにしています。
OperaとChromeはいつも最新のみ確認ですね......
]]>ShrinkIt 1.1 （via Panic Blog）
]]>しかも、サーバー替えるかもしれないので、その時は、また、作り直す可能性があります。 本当に申し訳ございません。
今後は、今まで以上にメモ的な要素が強まる予定なので、基本、疑って読んでください（突っ込み大歓迎です）。
]]>
<mt:SetVarTemplate name="search_link">
<mt:CGIPath /><mt:SearchScript />?IncludeBlogs=<mt:BlogID />
&template_id=<mt:BuildTemplateID />
&limit=<mt:Var name="entries_per_page" />
<mt:If name="archive_template">
&archive_type=<mt:ArchiveType />
<mt:If name="datebased_archive">
&year=<mt:ArchiveDate format='%Y' />&month=<mt:ArchiveDate format='%m' />&day=<mt:ArchiveDate format='%d' />
</mt:If>
<mt:If name="category_archive">
&category=<mt:CategoryID />
</mt:If>
<mt:If name="author_archive">
&author=<mt:AuthorID />
</mt:If>
<mt:Else>
&archive_type=Index
</mt:If>
&page=
</mt:SetVarTemplate>
<mt:SetVar name="has_pager" value="0" />
<mt:SetVarTemplate name="pagination">
<mt:If name="search_results">
<mt:IfPreviousResults>
<li class="box"><a href="<mt:PreviousLink />" rel="prev" class="item maru04"><span class="icon icn-prev">New Posts</span></a></li>
</mt:IfPreviousResults>
<mt:PagerBlock>
<mt:IfCurrentPage>
<li class="box"><em class="item maru04"><mt:Var name="__value__" /></em></li>
<mt:Else>
<li class="box"><a href="<mt:PagerLink />" class="item maru04"><mt:Var name="__value__" /></a></li>
</mt:IfCurrentPage>
</mt:PagerBlock>
<mt:IfMoreResults>
<li class="box"><a href="<mt:NextLink />" rel="next" class="item maru04"><span class="icon icn-next">Older Posts</span></a></li>
</mt:IfMoreResults>
<mt:Else>
<mt:If name="archive_template">
<mt:ArchiveCount setvar="total_entries" />
<mt:Else>
<mt:BlogEntryCount setvar="total_entries" />
</mt:If>
<mt:If name="total_entries" gt="$entries_per_page">
<mt:SetVar name="has_pager" value="1" />
<mt:If name="total_entries" op="%" value="$entries_per_page" eq="0">
<mt:GetVar name="total_entries" op="/" value="$entries_per_page" setvar="total_pages" />
<mt:Else>
<mt:GetVar name="total_entries" op="%" value="$entries_per_page" setvar="remainder" />
<mt:GetVar name="total_entries" op="-" value="$remainder" setvar="total_entries" />
<mt:GetVar name="total_entries" op="/" value="$entries_per_page" setvar="total_pages" />
<mt:SetVar name="total_pages" op="++" />
</mt:If>
<mt:For from="1" to="$total_pages" step="1">
<mt:If name="__first__">
<li class="box"><em class="item maru04"><mt:Var name="__index__" /></em></li>
<mt:Else>
<li class="box"><a href="<mt:GetVar name="search_link" /><mt:GetVar name="__index__" />" class="item maru04"><mt:GetVar name="__index__" /></a></li>
</mt:If>
</mt:For>
<li class="box"><a href="<mt:GetVar name="search_link" />2" rel="next" class="item maru04"><span class="icon icn-next">Older Posts</span></a></li>
</mt:If>
</mt:If>
</mt:SetVarTemplate>
<mt:If name="has_pager" ne="0">
<section class="archives">
<h1 class="accessibility">Archives</h1>
<nav role="navigation" class="pagenation">
<ul class="boxes">
<mt:Var name="pagination" strip_linefeeds="1" />
</ul>
</nav>
<!-- ! //archives --></section>
</mt:If>
Pagination for Static Templates （MovableType.org）
]]>text/html」で返って来ちゃったパターンテンプレート側には、ちゃんと「<$MTHTTPContentType type="application/xml"$>」が先頭に入っている前提です。 あと、関係ないと思いますが、search.cgiはリネームして、設置もMTが入ってるディレクトリの外に出してあります。
MTHTTPContentType | テンプレートタグリファレンス （Movable Type.JP）
これらは全部ダメでした。もちろん、テンプレートの内容が間違ってなければ、これらはすべてXML形式で出力されるのですが、「text/html」で返っちゃう。
など、オプションも豊富。
Pearl Crescent Page Saver （Pearl Crescent）
]]>blank （zip 4KB）
]]>オリジナルが書かれたのは「Feb 13, 2010」みたいです
参考サイトなど
使い方は参考サイトをご覧ください。
#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;
}
まあ、そのままです。
/* 変数 */
@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とか」「言語違い」みたいに分けたファイルを一気に読み込んで、一枚にまとめちゃったりも出来ます。
これは、管理とパフォーマンスの事とか考えたら便利かもしれません。
個人的に気になったのは、ネストした時の動作で、
.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;
}
こんな感じにして欲しいと思いました（まあ、コンパイル後にフォーマットすればイイけど）。
ただ、みんなで作業する場合、こういう（ちょっぴりプログラミング的な）感じがダメな人だとマイナスかもしれんし、どうなのかなーと思います。
個人的にはいつもネストやインデントなしで書いてるから、特に読みやすいとも思わないし......
ただし、「CSS3をガッツリ使うから、先行実装用とか、たくさん書くのめんどいー」という案件では良い気がします。
最初に試してから時間経ってるので、また、試してみよーかなー。
あと、Codaのプラグインもあるみたいです
]]>MacWinZipper （via 株式会社ティダ）
※2011年1月11日時点では、最新のフル機能版がリリースされていないようです。CleanArchiverも検討してみてはいかがでしょう？
Automatorを使ってさらにショートカットしてる人もいるみたいです。
Macでウィンドーズ対応の圧縮ファイルを作る （via IVYのおもちゃ箱）
]]>