MTのアップデートの際にAltTemplateをアップするのを忘れてて動いてないなあ、とか実際にやってまして。プラグインならば、いつもアップデートのときに、旧MTディレクトリからごっそりコピーしてくるのでそういった凡ミスはほぼないってことです。
プラグインは以下からダウンロードできるようです。
以下、Movable Type 4系での話として進めていきたいと思います。
これまで、管理画面でjQueryを使うのに、AltTemplateを使っていました。これを、jQuery For MTに移行する手順は以下のとおりです。
それと一点だけ気づいた点ですが、jQueryのプラグインなどを利用したいときに、user.jsにプラグインのコードを貼るのもあれなので、動的に.jsファイルを呼び出すようにuser.jsに書くようにしました。AltTemplateでは、<script src='path/to/hogehoge.js'></script>みたいに直接HTMLで書けるわけで、こういったところはAltTemplateとの違いでしょうか。
もっともプラグインのplファイル弄ればなんとかなりそうですけれども（というか、そんなにコテコテにカスタマイズしてどうする、とかなんとか）。
追記：メモです。システムメニューでjQueryを使わないという都合ができた（個人の環境によるものです）ので、plファイルの出力関連のコードに以下のタグに包含するとしました。
<mt:unless name="system_overview_nav"></mt:unless>折角、カスタムフィールドのカテゴリを設けたので、久久にカスタムフィールドねたでいきます。
以下はカスタムフィールドにフラグメント識別子をいれてその内容にもとづいたURIを作成する目的のものです。
カスタムフィールド名として「フラグメント」、使用するテンプレートタグは「cf_fragment」にしたとします。
<ul>
<MTEntries>
<mt:if tag="cf_fragment">
<li><$MTEntryTitle$>: <a href="<$MTEntryPermaLink$>#<$MTcf_fragment$>">
<$MTcf_fragment$></a>
</li>
</mt:if>
</MTEntries>
</ul>で、以下はMTEntryCustomFieldsタグにinculudeモディファイアを使って、「フラグメント」のカスタムフィールドのみ出力になるようにした書き方です。
<ul>
<MTEntries>
<MTEntryCustomFields include="フラグメント">
<MTIfNonEmpty tag="EntryCustomFieldValue">
<li><$MTEntryTitle$>: <a href="<$MTEntryPermaLink$>#<$MTEntryCustomFieldValue$>">
<$MTEntryCustomFieldValue$></a>
</li>
</MTIfNonEmpty>
</MTEntryCustomFields>
</MTEntries>
</ul>
結果的は等しくなりますが、コードとしてどちらがすっきりとしているのかはいわずともわかりますね。
なお、MTEntryCustomFieldsについてはタグリファレンスには、exclude（特定のカスタムフィールドを除外する）のみのモディファイアが掲載されています。特定のカスタムフィールドの内容の出力は、そのカスタムフィールドのテンプレートタグを使う（＊リファレンスにも明記されています）ということで頭の中にいれておけばいいのでないでしょうか。Tipsでもなんでもなく、リファレンスをよく読めばいいという話であります。
]]> 記事を読んでコメントする以下のサンプルでは、コメント内のMTタグは反映されます。ファンクションタグ・ブロックタグともに反映されるようです。
<!-- <$MTDate language="en"$> -->出力は以下のようなもの
Movable Type5の編集画面のCodeMirrorでは、コメント内のMTタグはコメントと同色で強調されていないのですが、コメント内のMTタグは動作するようです。
ちなみにMT4.xにおいては、コメント内のMTタグについて強調表示が適用されていることを確認しています（MT4については、強調表示無効のボタンがあり、ワタくシは強調表示なしでしか編集をしませんから、どうでもよいといえばそれまでで）。
あまり活用されることはないとおもいますが、動作については以上です。
＊キャプチャ画像・確認ともにMTOS-5.01-jaによる。ダイナミック・パブリッシングでも同様でした。
]]> 記事を読んでコメントする2010年初頭のカスタマイズなんですが、実はあまりおこなっていません。あえていうと、トップページのskin変更くらいかと。
今回は少し趣向をかえまして、どうでもよさげな話をしてみようと思います。
玉ねぎをみじん切りにするときに、よく半分に切ってから、縦に細かく切込みを入れ、横から数箇所切り込みを入れてから切るといった方法を習うのでないかと思います。
これをですね、玉ねぎの四分の一の量だとか小さなサイズの玉ねぎのとき、切り込みいれなくて、最初からスライスにしてしまったのちに、ちょこっと揃えて細かく切ってもみじん切りになると。
そろえるのが面倒でない？とか思うかもだけど、それ位の量ならば揃えてから切るのは、切り込みをいれてから切るのとそれ程かわらないんじゃないか（と自分は思ってます）と。
くだらない喩えになって仕舞いましたけど、まあ、別な方法はないかなあとか思いながらカスタマイズしてるというか、ここにおけるカスタマイズのネタ元の元が玉ねぎのみじんの仕方にあるのでないか、というお話でした。おしまい。
これまでのカスタマイズリストは以下にあります。
]]> 記事を読んでコメントする今回おこなうのは、記事ごとでカラムレイアウトを切り替えることができるようにしよう、ってことです。「そんなことする必要があるのか？」とかいわれそうなんですが、例えば、特定の記事で左サイドにメニューをおいてみたいとか。内容的には、MT4: ちょっとしたレイアウト技を思いついた（blog.aklaswad.com）に似ています。なんで今更というか(記事ねたをおもいついてから知ったw)。。なお、本記事で取り上げる「ウェブページ」とは、広義のウェブページではなくて、Movable Typeのシステム上で「ブログ記事／ウェブページ」といった分類の「ウェブページ」のことです。（ウェブサイトを管理する『ブログ』と『ウェブページ』の使い分け - Movable Type ドキュメント）
Movable Typeのデフォルト（クラシックブログ）のテンプレートで見ていくとします。
デフォルトテンプレートでインポートされるCSS、mt-static/themes/minimalist-red/screen.cssと、mt-static/themes-base/blog.cssを見れば一目瞭然です。
screen.css先頭にlayouts: layout-wtt, layout-twt, layout-wt, layout-tw
という記述があります。このクラスが指定されているのが、body要素で、ウェブページのテンプレートでbody要素のコードは以下のようになってます。
<body id="<$mt:BlogTemplateSetID$>" class="mt-page-archive <$mt:Var name="page_layout"$>">
page_layoutという変数名がページのレイアウトを決定するものです。この値の実際の出力は、class="mt-page-archive layout-wtt"のようになっています（3カラムを選択している場合です）。
wttをtwtに変更しますと、画面左から大・小・小というカラムレイアウトが小・大・小に切り替わるというわけです。
これをウェブページにおいて記事ごとに切り替えられるようにするには、クラス名が分岐するようなカスタマイズが必要で、ここではプライベートタグ（先頭に@のついたタグ）を使う方法でおこなってみます。この方法ならば、カスタムフィールドのないMTOSでもカスタマイズできます。
まずは、ウェブページテンプレートの先頭に以下のコードを置き、@twtというプライベートタグがつけられたページには、page_layoutの内容を上書して変更すると云う形にします。
<MTPageIfTagged tag="@twt" include_private="1">
<mt:setvar name="page_layout" value="layout-twt" />
</MTPageIfTagged>これであとはページによってプライベートタグをつけるのみという感じです。前置きの長さの割にこれだけかって感じですが。@twtがついていないウェブページは、デフォルトのままの筈ですが、もしうまくいかないようならば、page_layout読み込みの箇所でdefault値を明示して、
class="mt-page-archive <$mt:Var name="page_layout" default="layout-wtt"$>"のようにしておけばよいかと思います。
もう少しカスタマイズして、layout-twtというクラスが選択されているときに、何かするという条件分岐を追加してみたいと思います。
分岐には変数page_layoutを使えばよいでしょう。サイドバーのウィジェットなどに以下のようなコードを使います。
<mt:Ignore>「小・大・小」のレイアウトのときに何かする</mt:Ignore>
<mt:If name="page_layout" eq="layout-twt">
<!-- do something -->
</mt:If>確認はMTOS-5.01-jaのみでおこないました。以上です。
]]> 記事を読んでコメントするガジェットとかConnectの説明は省略ということで、ここでは、メンバーガジェットとコメントガジェットを同一ページに表示する場合でみていきます。
なお、以下に示す方法は、Googleが仕様を変更をおこなったときに使えなくなるかもしれません。
コメントガジェットもメンバーガジェット（以下それぞれ「コメント」、「メンバー」と表記）も同じ配色の場合で説明します。
あらかじめコメントとメンバーのガジェットのコードを取得しておきます。
最初にガジェットが入るDIVを用意します（その前に、Connectの本体のスクリプトファイル（friendconnect.js）は呼び出ししてあるものとします）。
取得済みのコードのDefine the div tag where the gadget will be inserted.というコメントの次にある、id属性のついたdiv要素をそれぞれを表示したい箇所に並べておけばよいでしょう。
<div id="div-0123456789012345678" style="width:200px;border:1px solid #cccccc;"></div><div id="div-0987654321098765432" style="width:200px;border:1px solid #cccccc;"></div>自分のやり方だと、コメントのガジェットのほうが設定（要するにコード）が多いので、コメントのほうのコードをベースにメンバーのコードを足すという方法でおこなっています。この辺はお好みですが。
次にRender the gadget into a div.というコメント以下のコードを見ていきます。
var skin = で宣言されている変数の値（例えばskin['FONT_FAMILY'] 連想配列のようですが）のうち、共通でないものを追加していきます。
メンバーがコメントに共通しないものはskin['NUMBER_ROWS'] = '4';のようですので、これをコメントのほうのコードにペーストします。
あとはgoogle.friendconnect.container.renderMembersGadget();が表示のための関数のようなのでこれもコメントのほうにペーストします。上で示した例のIDですと以下のようなコードになるでしょう。
google.friendconnect.container.renderMembersGadget(
{ id: 'div-0987654321098765432',
site: '00000000000000000000' },
skin);このコードの部分は自分の場合、外部JavaScriptとして作成して呼び出すようにしてます。テンプレート等に直接書いても同じことです。
コメントとメンバーガジェットをひとまとめにしたコードは以上です。
コードをまとめるという意味は薄れるのですが、Render the gadgetの部分を外部JavaScriptにすれば、このファイルの変更のみでスタイル変更が楽になるかも？程度のものです。
簡単にいうと、変数をコメントとメンバーとで変えればよいのです。
var skin = {}, skin_2 = {};みたいに宣言しておいて、
skin_2['FONT_FAMILY'] = 'sans-serif';といった具合にに2つ目のガジェットのコードを書き換えて、google.friendconnect.container.renderMembersGadget();の第二引数にskin_2を入れると。
以上まとめますと。。
となります。このサイトですと、/blog/web/ 以下のページだとかaboutページだとかで確認できます。
ということで新年あけてからだいぶ経ちましたけど今年初エントリでした。そんな感じで今年もマイペースでやっていこうかなと思います。m(u.u;)m
]]> 記事を読んでコメントするFirefox(3.5.6)+Stylish(1.0.7)にて
@-moz-document domain(google.co.jp) {
/*
// for Web Search
*/
h3 a[href^="http://www.markdiary.com"] {
background: #E5ECF3;
padding-bottom: 3.8em; }
/*
// for Blog Search
*/
a[href^="http://www.markdiary.com"]{
background: #E5ECF3;
padding:0 0 5em 0; }
a[id^="pb"]{
background: #fff; }
/* end */}Googleの検索ページの構造が変わると使えません。本来はブロック単位で背景色を設定するのだけど、padding-bottomを使って手抜きしてます。
ということで、この前の続きになります。
さっと要点だけ申し上げますと、Movable Typeのタグまわりのテンプレートタグを利用して、タグの情報のはいったXMLファイルを作成する、というところまでをやりました。
このファイルを活用して何かしようということで(ご想像のとおりで)、jQueryを使ってAjaxなタグ一覧のようなものを作ってみました。
前回作成したファイル名をtags.xmlとして出力させたものとします。
用意するのは、jQuery本体(ここではヴァージョン・1.3.2ということにしておきます）でjQuery本体は先に読み込んでおくとします。
ページには、以下のようなタグリストが差し込まれる要素を埋め込んでおきます。
<ul>
<li class="firstChild">Tag list here.</li>
</ul>そして、XMLファイルを解析するコードを追加します。
$(function(){
$.ajax({
url: '<$MTBlogURL$>tags.xml',
type: 'GET',
dataType: 'xml',
timeout: 1000,
error: function(){
alert("Error loading XML file.");
},
success: function(xml){
$('.firstChild').remove();
$(xml).find('items').each(function(){
var tag = $(this).find('tagName').text();
var link = $(this).find('link').text();
var count = $(this).find('tagCount').text();
var rank = $(this).find('tagRank').text();
$('<li></li>')
.html('<a href=\"'+link+'\" class=\"rank-'+rank+'\">'+tag+'</a>'+' ( '+count+' )')
.appendTo('ul');
});
}
});
});このファイルは、外部のJavaScriptとして読み込めばコードがすっきりするでしょう。<$MTBlogURL$>の箇所は、インデックステンプレートでこのJavaScriptファイルを作成した場合のものです。JavaScriptファイルをMTを使わず作成するときは実際に出力されたXMLファイルまでのパスと置き換えします。
で、これを実際にやったのが以下となります。ここのブログでよく使われているタグ50件分をXMLファイルとしています。
timeoutの数値を先に示したコードより長めにしてますが、サーヴァの状況により読み込みに時間がかかり失敗しているようならば、時間をおいてから読み込んでみてください。
]]> 記事を読んでコメントする<?xml version="1.0" encoding="UTF-8"?>
<tagcloud><MTTags sort_by="name">
<items>
<tagName><$MTTagName encode_xml="1"$></tagName>
<tagCount><$MTTagCount$></tagCount>
<link><$MTTagSearchLink$></link>
<tagRank><$MTTagRank max="10"$></tagRank>
</items></MTTags>
</tagcloud>何かのカスタマイズとか、特にどうっていうものもないのですけれど、これをベースにちょっと学んでみようかなと考えています（わりとテキトウです）。
]]> 記事を読んでコメントする今年最後のカスタマイズ記録となります（いつまで続くんだろか）。
今月いじったところは以下となっております
\nが表示されるのを置き換えて出力。（/\\n/g",""）Ajax検索のsearch_data.txtで改行のコードが出力されていたので、念のため。
Ajax JSON 検索のblog_ajax_json_search.jsをminimum sizeにしておきました。YUI Compressor(http://developer.yahoo.com/yui/compressor/)というツールを使いました。日本語の記述の部分があると実行中にエラーが返って止るようなので、先にライセンス表記を削除したのち、コード中の日本語をエスケープしてyuicompressor実行後にライセンス表記の部分を再び入れなおししてファイルをアップロードしています。
ふるふるブックマークについては、以下のページにコードが掲載されています。
タグをつけたエントリが100件に近づくのもあるので一応。それ以上あっても分割はしないという方針で。
要は&limit=というクエリを追加。
まずは、.htaccessにてRewriteRuleでlimitのクエリを追加。
タグ検索フォームだと、以下を追加（というより、action属性でcgiへのパスでなく、RewriteRuleで指定したものにすればとくに必要なし）
<input type="hidden" name="limit" value="100" />
あとタグ・アーカイブページで、100件以上ヒットしたとかでてるのに100件しかでてないよ、というツッコミ対策（何）で件数表示のところで
<em>
<mt:if tag="MTSearchResultCount" le="100">
<$MTSearchResultCount$>
<MTElse>100
</mt:if>
</em>
のようなかんじ。
ということで今年のカスタマイズは以上です。
これまでのカスタマイズリストは以下にあります。
]]> 記事を読んでコメントするキーの動作は自分で確認とりながらメモったものです。違っている部分があるかも知れません。
特に覚えなくてもいいのですが、Windowsキー＋Rでsolと入力でソリティア起動です。
その他
カーソルをカードの上にもっていってからEnterキーで選択状態。このとき、山札・組札は選択されたカードが数ドット下に下がる。場札のときは数枚分下にカードが下がる。
なお、オプションの設定で、「トランプの外枠だけ移動」にチェックをいれると、移動時に外枠が描画されてEnterキー押下したときにカードが移動されるという表示になる。好みで設定してみるとよいかも。
場にあるカードがすべて積み重ねが完了したときに、一枚ずつ、組札に移動するのは大変なので、Ctrl＋Aとすればよい。
操作手順：移動したいカード（複数）のある列にカーソルを持っていき、↑キーで移動させたい箇所まで選択後、Enterで複数カードが選択状態になり移動できるようになる。矢印キーなどで移動してEnter。
複数のカード移動のさせ方は覚えるの必須だと思います（難しいことではないけど。これがわからないとゲームとして厳しいとおもいます）。
あとは慣れるのみかと。とか慣れたようにいってますが、キーボード操作だけで全て積んだことは未だないのでした。
]]> 記事を読んでコメントする小技未満のねたですが、以下のようなものです。Firefox3.5.5＋Stylish 1.0.7にて確認をおこないました。
.tabbrowser-tabs {text-shadow: 0 1px 0 #EBEBEB; }
.tabbrowser-tab[selected="true"] {
text-shadow: 2px 2px 1px #CCC;
}キャプチャは以下となります（区別がつかなくて間違い探しみたいですが）。
ま、すぐに飽きるとはおもうんですがね。。
]]> 記事を読んでコメントする個人的にMTシステムやブックマークなどから関連ページを探すのに手間だったりしたもので、以下のページにてまとめることにしました。
]]> 記事を読んでコメントする今年ものこり1箇月を切っています。そこで（恒例なのか）、まとめ的な記事をやってみたいと思います。
閲覧ブラウザと記事のクエリは、以前書いた下記の記事をもとにおこなっています。
期間は、2009年1月1日から、2009年12月4日までです。カレンダーとしてはまだ少し日にちがありますけれども、上位はそれほど変化しないものと見なしました。
2009/01/01から2009/12/04まででよく読まれている記事のタイトルで各上位７エントリです。
XMLファイルはこちら
参考までに、全体でよくアクセスのあるエントリタイトルは以下のようになっています。
Firefoxがアドオン系の記事が目立つくらいですかね。Fifefox以外のブラウザについてあまり言及してないですし、アクセスの多い記事はどのブラウザでも多いかなといった結果でした。おしまい。
]]> 記事を読んでコメントする単に、input要素のvalue属性に任意のワードを入れればいいのかと思っていたら、Picoテーマではvalue属性に<$MTSearchString$>がはいっていました。昔のテンプレートではSearchみたいな単語がはいっていた気がしたのですが、この状態では、検索フォームの初期値がない状態で使うことが前提という感じがしました。
そこで、初期値をいれるカスタマイズをおもいつきました。分岐については、以下のような方法を考えました。
まずは、日本語名で「検索」というテンプレート名のウィジェットテンプレートの先頭に以下を埋め込んで見ます。
<mtsetvars>defaultVal=キーワード
searchword=<$MTSearchString$>
</mtsetvars>
<mt:if tag="SearchString">
<mtsetvar name="defaultVal" value="$searchword">">
</mt:if>変数名は任意でして、ここでは初期値としてdefaultVal（ここでは値を「キーワード」。この値も任意で）、検索されたキーワードを格納する変数にsearchwordとしています。
次に、同じく、検索ウィジェットで、<input type="text" id="search" class="ti" name="search"という部分を探して、value属性の<$MTSearchString$>を以下のように書き換えます（途中で折り返してますが、一行書きです）。
<input type="text" id="search" class="ti" name="search"
value="<mt:var name="defaultVal">" />これで、検索結果以外では「キーワード」という初期値で、検索をかければ、その値が検索フォームに入力されている状態となります（確認はMTOS 5にておこなっています）。
ここまできたら、検索フォームがフォーカスされているとき、初期値を空にするというのも追加してみたいと思います（欲張りです）。
バナーフッターあたりに以下のコードを入れておくことで実現可能かと。jQueryの本体は用意しておくか、Google AJAX APIを利用するなどします。
<script type="text/javascript" src="path-to/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('#search').focus(function(){
if($("#search").val !== "")
{ $(this).val(""); }
}).blur(function(){
if($(this).val()=="")
{ $(this).val(this.defaultValue); }
});
});
</script>コード自体は、第9回 今すぐできる！ユーザビリティを向上させるフォーム操作実践（1）｜gihyo.jp ... 技術評論社にて紹介されているものそのものです。特に説明の必要も無いかと。
と、まあこんな感じです。でもこれPicoテーマに限った話でもなくて、引き合いにだしたのは、なんとなくシンプルでいいなあと思ったというだけです。以上です。