2009年9月 Archive

記事ページアーカイブのテンプレートで、パンくずリスト（topicpath）の部分を一箇所のみにしました。

ま、記事をおこすほど大袈裟なハナシではないのですが。。

パンくずリストとか呼ばれているアレですけれども、個人のサイトで且つ検索からの訪問者がメインであるならば、パンくずのリストは思っている以上に機能していないと思います。まぁ、主観でしかないけれども、自分が自分以外のサイトにいってみてもそのように感じるということです。

というわけで、mt.Vicunaテンプレートで、entry.mtmlで2回インクルードしてるtopicPathを一箇所だけにすることとしました。なお、ヴァージョンは、（mt.Vicuna）2.2.1についてなのですが、違っているようですたらすみませんです。

あと、単に要らないところを削除すれば、それまでなハナシでしたが、ちょっと小細工してみました。なぜ上のほうのトピックパスを削除したかとかそういったところです。参考まで。

• test of topicpath template

Google Analyticsで利用ブラウザの情報からどのページを閲覧されているかを たどるためのカスタムレポート設定について

Google Analyticsでは様ざまなアクセス解析と統計がとれるわけですが、 通常、左ペインのレポートの「ユーザー」でPC環境のブラウザから、どのページを閲覧されているかを辿ることができません。

[PC環境]＞[ブラウザ]として次の階層でブラウザのヴァージョンまでがこのレポートの終点となっています（ディメンションによる各レポートを確認できないもよう）。

そこで、カスタムレポート（BETA)を利用して、先の条件にあったレポートを作ることにしました

以降、メモとして設定方法を書いていきますが、将来的にGoogle Analyticsの仕様というか動作が変わってくることがありますので、その点は注意願います。

左ペインより「カスタムレポート」をクリックしてカスタムレポートを新規作成します

そのままですと、タイトルには、「カスタム タイトル 2009年9月21日」のように書かれています。このタイトルは、編集のリンクを押せば変更可能になります。

「指標」は設定が必須ですので、ここではとりあえず、「コンテンツ」の「ページ別セッション」にしておきます。左ペインのリストでコンテンツのところの「ページ別セッション」をドラッグして、メインカラムの指標のところにドロップすればいいわけです。

「指標」の次の階層の「ディメンション」には、始点とするレポートをいれます。ここには、「ユーザー」のリスト内の「システム」配下にある、「ブラウザ」をドラッグしてドロップします。

次の階層になる、「サブディメンション」のところが目的のレポートが入ります。従いましてここには、「コンテンツ」の「ページタイトル」を左ペインの「ディメンション」のリスト内からドラッグアンドドロップすればいいことになります。

あと、サブディメンションとして下位に階層が並びますがここはお好みのものをということで、レポートをプレビューで確認してみます。（別ウィンドウ）

確認して問題ないようならば、レポートを「作成ボタン」押下で設定を終わります。

以上のレポートを階層で示すと以下のようになります。

• 指標　ページ別セッション
  • ディメンション　ブラウザ
    • ブラウザ以下の階層　ページタイトル
      • ページタイトル以下の階層　・・・
        • ・・・以下の階層 ......

1. 左メニュー、カスタムレポートより作成済みのレポートをクリックし表示させます
2. 上部のエクスポートなどのメニューの項目中の「マイレポートに登録」というボタンを押します
3. 以上で作成したカスタムレポートが左メニューのマイレポートに表示されます

本記事は、旧ヴァージョンのAnalyticsでの機能をもとに作成したものです。参考までに、新ヴァージョンでのカスタムレポートについて公式ブログに記事があがっています。

• アナリティクス 日本版 公式ブログ: 新しい Google アナリティクスのご紹介：カスタムレポートをもっと

今月（2009年9月）、サイト内でカスタマイズした点を中心にまとめて振り返ったりするエントリです。

今月初頭(2009年9月 2日）にMovable Type 5のベータテストが始まっているわけですが、、余計なところばかり構っていて、少しもテストらしいことをやっていなかったりします。

さて、今月カスタマイズしたところは以下のとおりです。

• AutoPagerize用のmicroformatをやめた
• はてなスターの表示スタイルの変更
• 検索ボックスのテキストのスタイルについて
• MT-PubSubHubbubプラグインの実装
• 分割ページの2ページ目以降のtitle要素にページ数
• LightboxをjQuery lightbox (balupton edition) に乗り換え
• 過去のぬり絵アーカイブページを作った
• ウェブページの一部に、Easy Retweet Button設置
• 各アーカイブリストページへマウスオーバーのときのスタイル追加
• 記事中のクラス、.memo にスタイル

AutoPagerizeのmicroformat（autopagerize_insert_beforeとか）は、まあ便利かもだけども削除しました（SITEINFO書ければいいわけだけども）。まあ利便性は落ちるだろうけど。抑抑、各記事ページの前後が続き物でもない、ということで補助的なmicroformatも要らないだろうということで止めにしました。

はてなスターの表示位置をタイトルにくっ付けないようなスタイルにしてみました。これは実験的なもので大して意味ありません。スタイルはこのような感じです。

/* Star をリストタイプにする */
.hatena-star-comment-container{
position:relative; 
display:list-item; margin-left:1em;
line-height:1;
list-style-type:none; }
.hatena-star-star-container{
display:list-item;margin-left:3em;
position:relative;
top:-1em;
line-height:1;
list-style-type:none; }
.hatena-star-star-container:before{
content: "Add \2606";
font-size:smaller; }

検索ボックスのスタイルは、このようなかんじで初期状態のスタイルがイタリックになるようにしてみました。:focus擬似クラスだとIE6,IE7ともに表現できなくて、このようなものはJavaScriptがおこなう領分な気もするのだけど、思いつきだけでやってみたです。

input#searchKeyword { 
    font-style : italic; }
    input#searchKeyword:focus {
font-style : normal; }

MT-PubSubHubbubプラグインについては、以下に書きました。

• MT：PubSubHubbubプラグインについて

補足をしておくと、記事を書いたあとにPing送信されて、Movable Typeのシステムログに記録されます。（Pinged http://...）

それと、（お節介ながら）当たり前なことですが、更新の反映がはやいですので、間違って記事をアップすると早い段階で間違った箇所（マークアップとかタイプミスとか）が晒されていることになるかと。Twitterでは、前の発言に対して訂正の意味での発言をPostすることは容易なのですけども。。よく確認しましょうってことで特に全文を配信されているかたは。

分割ページのtitle要素にページ数を入れることについては以下に書いています。

• Movable Typeで分割ページのTITLE要素にページ数を入れるお話

Lightboxの乗り換えをおこないました。Lightboxがprototype.jsベースでないことで、jQueryのコンフリクトの対策はしなくてもいいという利点はあるかと。といっても今現在、記事ページにLightbox以外でjQueryを使っている場所もないし、prototype.js使っている箇所もないですが。

ぬり絵の原画のアーカイブとして、ギャラリーのようなものを作ってみました。まだ作成途中ですが、jQuery Lightbox採用してみました（＃sampleディレクトリ下にありますが、サンプルページのつもりではないです）。

• ぬり絵原画ぎゃらりぃ（過去分）

Easy Retweet ButtonはJavaScriptで簡単にRetweetのボタンを設置できるというものです。

• John Resig - Easy Retweet Button

bit.lyにアカウント登録する手間はありますが、それは差し引いてボタンの設置は簡単だとおもいます。なんでブログ記事でなく、Webページなのかは訊かないでください。。

アーカイブリストページとか、ブログのトップページとか、今読んでいるエントリを示すのに、マウスオーバーのときのスタイルをつけてみました。

最近流行ってるのかどうかよく知らないのですが、マウスオーバーのときに枠線の色が変わったりするのをよくみかけるので、マネしてみました。

Vicunaのテンプレートだと、.entryに対してスタイルを指定したらよさそうなのですが、普通にborderを指定すると、マウスオーバーのときに違和感があると思いますのでそのあたりを意識して書いたCSSが以下となります。

/* section entry hover */
div.entry { margin:4px; border:1px solid #FFFFFF; }
div.entry:hover{ border:1px solid #6CA6CD; }

記事中の.memoにようやくスタイルつけてみました。画像はVicunaアイコンのものをベースにちょっと加工しただけというものです。というか、Sub-Skinに同梱されているものを使わせてもらいました。今月のカスタマイズは以上です。

以下のページで過去のカスタマイズの一覧をみることができます。

• 当ブログのカスタマイズ記録

Operatorアドオンのユーザースクリプトを使ってはてなブックマークのブクマユーザ数を表示するリンクを作る試み

参考にしたページは以下。

• はてなブックマーク数(users)のリンクをつくるブックマークレット - ぼくはまちちゃん！(Hatena)

でもって、Operatorアドオンでなんかするようなのは以下に色色書いてます。

• Operatorユーザスクリプト、hAtom.js
• FirefoxアドオンのOperator→はてブの特定タグの注目エントリに

ま、正直なところ、ブックマークレットでOK。だとか、それ、Make Link。なのですがそういうかたはそのようにつかったらいいだけの話でしょう。

ということで、これは個人メモ程度かネタかどちらか。個人のメモだからつかったらイカんよ、とはいいませんけども得にも損にもならないような、どうでもよさそうな話です。

で、このようなコードをテキトーに拡張子.jsのファイルにして、Operatorに登録しました。なお、コードを参考にしたページは先に示しましたとおりです。

var hatebentrylink = {
  description: "to make hateb link",
  shortDescription: "make bookmarklink",
  scope: {
    semantic: {
      "hAtom-hEntry" : "bookmark.link",
    }
},
  doAction: function(semanticObject, semanticObjectType) {
    if (semanticObjectType == "hAtom-hEntry") {
      var _entryTitle = semanticObject['entry-title'];
      var _bookmarklink = semanticObject.bookmark.link;
      window._content.prompt('', '<a href="http://b.hatena.ne.jp/entry/'+_bookmarklink.replace(/#/g,'\u002523').replace(/^http:\/\//,'')+'"><img src="http://b.hatena.ne.jp/entry/image/'+_bookmarklink.replace(/#/g,'\u002523')+'" alt="\u306F\u3066\u306A\u30D6\u30C3\u30AF\u30DE\u30FC\u30AF\u0020\u002D\u0020\u000A'+ _entryTitle +'" /></a>');
    }
  }
};
SemanticActions.add("hatebentrylink", hatebentrylink);

やりたかったのはrel-boookmarkなとき抽出されて、ブクマエントリページとユーザー数のリンクを作るプロンプトが出る、というもの。

ちょっとやってみることにします。自前のページでrel-bookmarkがあるページを使ってもいいのだけど、Google リーダーで「AideRSS」のGreasemonkeyを利用しているときの状態でやってみます。これを入れているとき、hAtomが入っていることになっているようなので。

AidsRSSの説明などはコチラを。

• Mozilla Re-Mix: Google リーダーでスコアの高い人気記事だけを抽出して読むことができるFirefoxアドオン「AideRSS」(mozilla-remix.seesaa.net)

そしたら、とりあえずGoogle リーダーを開いてみます。

Click to Enlarge

アクションが実行されると、以下のようにプロンプトが表示。

――とはいっても、実際は使う場面があまりないのですけども(おぃ）。未だにユーザースクリプトで既存のスクリプトにアクションを追加するやり方がよくわかってないのでした。orz

Movable Typeのテンプレートでphp化のときのXML宣言とSetVarテンプレートタグ群による出力結果の解決をメモしておきます。

MTのヘッダ部の出力問題

この問題は、既に解決されていたりするのですが、Movable Type 5の声が聞こえてからMovabe Typeに入られている方もいらっしゃると思いますので、ざーとおさらいしておきます。MT4から使われている方には聞いたような話なので軽く聞きながしていただけたらと思います。

簡単に説明しますと、Movable Typeのテンプレートタグのmt:setvarを使って変数を或るテンプレートの上部にまとめて定義したとします。その下にDOCTYPE宣言やXML宣言の記述があるときに、DOCTYPE宣言やXML宣言の上に連続改行が出力されてしまうという問題です。

この辺のお話は、すでにWolaWolaさまにて、言及がなされています。特に問題となっているのは、XML宣言の上に改行文字がある事により、InvalidなXHTMLとなる点かと思います。

参考 1.

• MT4のヘッダ部分 - WolaWola

解決方法として、一行書きにしたりするなどが提案されたわけですが、これをうけて、The blog of H.Fujimotoさまにて、ApplyModifierプラグインが提供され以上の問題の解決がおこなわれました。

参考 2.

• ページ先頭の改行を削除する - The blog of H.Fujimoto

その後、MT4.2以降（？ 改修されたMTのヴァージョンの正確な記憶がありませんorz。違っているようでしたらコメントお願いします）において、ページ上部に、mtsetvar群を改行した状態で並べても連続改行が出力されないようになりました。

以上が、この問題についての経緯です。

PHPのコードが絡むと問題が解決されていなかった

とまあ、今更な話をしてきましたがここからが本題です。

PHPでEtagを出力するコードの記述位置を入れ替えたときのことです。このときにプチハマりました。

Etagとは？のかたは以下をどぞ。なお、MT4.2以降には、「条件付取得」の設定があるのですが、ダイナミック・パブリッシングでの話として理解してます。当記事で言っているのは、スタティック・パブリッシングでのPHPのページということです。

• 小粋空間: HTTP/1.1 の「条件付きGET」を利用して PHP ファイルアクセスによるサーバ負荷を削減する

それで、これまでは以下のような記述をしていました。

<MTSetVar name="body_class" value="archiveIndex">
<MTSetVar name="foo" value="1">
<MTSetVar name="fugafuga" value="1">
<MTSetVar name="tempName" value="hogetempl">
<MTSetVarBlock name="page_title">Hoge Hoge</MTSetVarBlock>
<?php 
...略... (ETag出力のコード)
header( 'ETag: ' . $etag );
?></MTApplyModifier><?php echo '<?xml version="1.0" encoding="UTF-8" ?>'."\n" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="<$MTDefaultLanguage$>" xml:lang="<$MTDefaultLanguage$>">
...略...

PHPのheader()関数が出力の前にほかの出力があるとマズいそうなので、直すことにしたわけです。

参考 3.

• PHP: header - Manual

これまでこの書き方でMTSetVarの部分は出力されていなかったのでこれといって問題なかったのですが、テンプレートの書き換えをこなったようなときに不備があった場合にエラーの原因となる可能性はあります。

そこで、以下のようにPHPコードを上に記述したわけです。

 
<?php 
...略... (ETag出力のコード)
header( 'ETag: ' . $etag );
?>
<MTSetVar name="body_class" value="archiveIndex">
<MTSetVar name="foo" value="1">
<MTSetVar name="fugafuga" value="1">
<MTSetVar name="tempName" value="hogetempl">
<MTSetVarBlock name="page_title">Hoge Hoge</MTSetVarBlock>
<?php echo '<?xml version="1.0" encoding="UTF-8" ?>'."\n" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

これがどのような出力になるかといいますと、このような状態です。

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

この状態はMovable Type4.261で確認しています。

仕方がないのでこの場合は、ApplyModifierプラグインをつかわせていただくことにしました。

タグ挿入の位置ですが、phpの終了コードと同じ行にApplyModifierの開始コードを、phpで出力するXML宣言の行のはじめにApplyModifierの終了コードをという具合です。具体的には以下のような感じに。

header( 'ETag: ' . $etag );
?><MTApplyModifier ltrim="1">
...MTSetVar 略...>
</MTApplyModifier><?php echo...

メモのようなもの

補足として、上記現象が再現されるコードを置いておきます。＊出力はPHPのファイルです。

<?php 
// test
?>
<MTSetVar name="content_class" value="archiveIndex">
<MTSetVar name="foo" value="1">
<MTSetVar name="fugafuga" value="1">
<MTSetVar name="tmpl_name" value="hoge1">
<MTSetVarBlock name="page_title">Hoge Hoge</MTSetVarBlock>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="<$MTDefaultLanguage$>" xml:lang="<$MTDefaultLanguage$>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />
<title><$mt:var name="page_title"$></title>
</head>
<body><p>test template</p></body>
</html>

Movable Type5.0ベータ1、Movable Type5.0ベータ2でも再現されたことは確認しています。動作的には仕様っぽいのかも。。(現時点ではベータ版につき動作については参考情報程度ということで)

Movable Typeが生成する、インデックステンプレートのjsファイルに登録されている関数を利用して特定IDの要素の表示や非表示を実現するカスタマイズです。

ページ内の一部分をクリックで表示させたり、非表示にしたりするのに、自分でJavaScriptを書いて用意するか、prototype.jsやjQueryを利用するなどの方法があります。

さて、ほんの小ネタなのですが、MTのインデックステンプレートのJavaScriptテンプレートには、簡単な要素の表示・非表示をおこなう関数があらかじめ用意されています。簡素な表示切り替えでしたら、このJSファイルを利用する、という手もあります。

今回使う関数は、mtShow()とmtHide()です。

なお、上記の関数はMovable Type 4のヴァージョンによってはこの関数が導入されていませんので注意願います。ということで、以下のカスタマイズは、JavaScriptテンプレート内に、function mtHide(id)といったコードが記述されていることを前提として説明していきます。

mtShow()を利用した例

例として、簡単なテンプレートで示します。<$mt:Link template="javascript"$>を使ってMTのJSファイルを呼び出していますが、これはあくまでも例としてのテンプレートです。実際の使用は、individualアーカイブテンプレートのように作りこまれたテンプレート内で利用することを想定しています。

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<style type="text/css">
#show { display: none; }
</style>
<title>MT Template test Show(ID)</title>
<script type="text/javascript" src="<$mt:Link template="javascript"$>"></script>
</head>
<body>
<p><a href="./" onclick="mtShow('show'); return false;">Show List</a></p>
     <div id="show">
     <ul>
         <li>list - 1</li>
         <li>list - 2</li>
         <li>list - 3</li>
     </ul>
     </div>
</body>
</html>

mtShow('show')で表示したい要素のID、showを渡します。記事ページのコメント一覧の表示とか、トラックバックURIを表示させるなどに使えるかと思います。

mtHide()を利用した例

以下は、画面上部に表示された要素を消すボタン用に関数を利用した例です。サイドバーやページの最上部に簡単なお知らせを表示するような場合などに。

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<style type="text/css">
body *{ margin:0; padding:0; }
#hide { display: block;
 margin     : 0;
 border     : 1px solid #CCCCCC;
 background : #FFFFE0 none;
 text-align : right; }
</style>
<title>MT Template test Hide(ID)</title>
<script type="text/javascript" src="<mt:Link template="javascript">"></script>
</head>
<body>
     <p id="hide">This is a test of MT Template !! <a title="Click to hide this message" href="./" onclick="mtHide('hide'); return false;">[ X ]</a></p>
<ul>
<li>list - 1</li>
<li>list - 2</li>
<li>list - 3</li>
</ul>
</body>
</html>

以上です。もっと複雑なことをされたいようなときは、自前で用意されたほうがいいかと思います。

これらのテンプレートをセットしたものは以下にあります。

解凍後の、templatesフォルダ内のファイルをインデックステンプレートで作成すれば試すことができます。

Download

• TestShowHide01.zip

Movable Typeの記事編集画面に任意のボタンを追加するプラグイン、Custom Editor Button 2の小ネタをあつめて紹介。

Custom Editor Button 2を利用すると、MTの記事編集画面に自分の好みのボタンをカスタマイズすることができます。ボタンの作り方などは、作者さまの以下のページに解説がありますので参照されるといいでしょう。

• Writting Custom Button Plugins - blog.aklaswad.com

上記のページを参考にいくつかためしてみました。

その１．MovableType 5でjQueryの記述がつかえる

Movable Type5では、管理ページでjQueryがつかわれていることがわかりました。そこで、Custom Editor Button 2で、jQueryのコードがつかえるかためしてみました。

なお、MT4xで試すには、記事編集テンプレートのhead要素にjQuery本体が読み込まれるように改造しておく必要があります。

先に示しました、Writting Custom Button PluginsのページにのっているHello Buttonを参考にした簡単な例で示します。

buttons:
    hello:
        face_text: B-1
        title: get entry-title text
        code: |
            function ceb_hello ( text ) {
                text = jQuery('input#title').val();
                return text;
            }

face_textは、画像ボタンを使わない場合の書き方です。この場合、テキストは長くないほうが見やすいかと。

上記の例ですと、このようなボタンを必要とするヒトはいないとは思いますが、記事タイトルの欄に書かれているテキストを選択したテキストと変換（非選択でタイトルをカーソル位置に入力）するものです。

という具合に、jQueryが使えると簡単な記述でボタンを作ることが可能になります。

その２．選択テキストをキーワードのフィールドに入れる

選択テキストをキーワード欄に入力するのも簡単にできます。

buttons:
    keyword:
        face_text: B-2
        title: text to keyword field
        code: |
            function ceb_keyword ( text ) {
            var getKeyword = $('input#keywords').val();
            if ( getKeyword.length ==0 ){
            $('input#keywords').val(text);
            } else if(text){
              getKeyword += "," + text;
              $('input#keywords').val(getKeyword);
            }
                return;
            }

ID:keywordsのinput要素のvalueに（実際は$('#keywords')でいいはずです）選択キーワードを追加していきます。例のコードは簡単なものですから、実用にはHTMLタグをリムーブする処理もいれたほうがいいかもです。

その３．テキストエリア外も操作する

以下はMovable Type5 (ベータ1)の左側にある、サブメニューを開閉するボタンです。

buttons:
    open_submenu:
        face_text: B-3
        title: view all submenu
        code: |
            function ceb_open_submenu () {
            $('ul.sub-menu').toggle();
                return;
            }

簡単なjQueryのトグルです。左メニューが一発で全部開いたら気分いいかなとおもって作ってみました。

その４．メッセージを表示

動作時にメッセージを表示します。

buttons:
    message:
        face_text: B-4
        title: message
        code: |
            function ceb_message (text) {
                ceb_sysmessage(text, 3);
                return;
            }

ceb_sysmessage() 関数を利用します。例では選択テキストを表示しますが、シングルクォーテーションで括った任意の文字列でもいけます。

その５．MT5でポケットボタンが表示されない対処

MT5(b1)で四次元ポケットが表示されていないのを確認しました。実際は表示されているのですが、スタイルの位置が原因で表示されていないように見えるというものです。

具体的にはCustomEditorButton2.pmファイルの最後のほうのスタイルシートの箇所で、div#ceb-containerと、div#ceb-boxに対するwidthプロパティの指定をコメントアウトすれば表示されるようになりました。

その６．ボタン画像マウスオーバーのスタイル

作ったボタンでマウスオーバー時の色違いのボタンを用意します。先述のCustomEditorButton2.pmのスタイルシートの部分にボタンのhoverのスタイルを追加します。例をしめします。

a.command-hogehoge_button:hover{
background: url(/mt-static/plugins/HTMLButtons/images/hogehoge_button-hover.png) no-repeat!important;
}

ボタンの名前がhogehoge_buttonとしたときの例です。ボタンの名前というのは、yamlファイルのbuttons:の次の階層に書かれている文字列のことです。

その7. 選択範囲を分かち書きにする

単語らしきものに対して、前後に半角スペースをつけるものです。

buttons:
    separatingwords:
        image: images/separatingwords.png
        title: Separating Words in Japanese with Spaces
        code: |
            function ceb_separatingwords ( text ) {
                var reg =/([a-zA-Z]\w+)/g;
                text = text.replace(reg, " $1 ");
                return text;
            }

• markdiarycom / mt-plugin-CEBSeparatingWords -- Bitbucket

まとめのようなもの

ということで、Movable Type 5でjQueryが使えると、何でもアリ（？）な世界に、というか自分のやろうとしていることの実現が近くなるかもしれません。試したMT5は今の時点でベータ版ということで、今後、エディタの動作がどう変わっていくのかという点も注目していきたいところです。

最後に、上記で示した例をパックしたプラグインを置いておきます。

Download

• HelloWorld.zip

このブログでつかっていた、Lightbox2をjQuery Lightbox Pluginに移行してみました。 移行の時に設定したことなどメモしておきます。

Lightboxの説明はナシ、ということで。。これまで使っていたLightboxは以下のページのものでした。

• Lightbox 2

jQueryに移植されたLightboxはいくつかあったと思うのですが、そのなかで、jQuery Lightbox Plugin (balupton edition)を利用することにしました。プラグインのページは以下にあります。

• jQuery Lightbox Plugin (balupton edition)

内容については以下のテキストにありますが、個人の都合で書いたものですので設置方法をお探しの方にはおすすめできません。

• memo-jquery-lightbox-balupton.txt

準備が整ったら、テンプレートを保存して、記事アーカイブを再構築します。ワタくシの場合はLightboxを利用した記事がそれ程多くないので、MT管理画面からrel="lightboxで検索して出てきた記事だけを保存しなおしという形で変更を反映しました。

Lightboxのグループ化の部分ですが、jQuery Lightbox Plugin用の書き方に変更しておきます。rel="lightbox[hoge]"とあるものを、rel="lightbox-hoge"のように-（ハイフン）のあとに任意の文字列という形に変更しておけば移行は完了です。

• ぬり絵原画ぎゃらりぃ（過去分）

Movable Typeのプラグイン、PubSubHubbubの紹介と導入について書きます。

「PubSubHubbub」って何？といわれてもよくわかってなかったりしますが、RSSの更新情報の反映をRSSリーダーなどでの時差を解消しようとするものです。

説明不足でアレなので、PubSubHubbubについては、以下のページを参考リンクとして示します。

• ライブドア、ブログとRSSリーダー時差解消にPubSubHubbub対応 -INTERNET Watch（internet.watch.impress.co.jp）
• http://labs.unoh.net/2009/08/what-is-pubsubhubbub.html">ウノウラボ Unoh Labs: PubSubHubbubとは（labs.unoh.net）(注：リンク先ページ不明)

PubSubHubbubプラグイン

PubSubHubbubプラグインは、miyagawa（Tatsuhiko Miyagawa）氏の提供するMovable Type用プラグインです。Movable Type4以降で利用可能のようです。プラグインの入手は以下からダウンロードすることができます。

• miyagawa's MT-PubSubHubbub at master - GitHub

導入について

ダウンロードしたファイルを解凍し、フォルダごとMTシステムのディレクトリのpluginsディレクトリ内にアップロードします。アップロード後に、プラグインの設定画面にて設定をおこないます。なおプラグインはブログ単位で設定をおこなうようになっています。

以下のキャプチャはMT5.0ベータ1によるものです。

設定画面にて、pingを打つ先のURLを入力して、設定を完了します。今のところ、「http://pubsubhubbub.appspot.com/」が利用可能のようです。

設定が済んだら、「最新記事のフィード（feed_recent）」(atom.xml)テンプレートの<link rel="self" ... />以下に<$mt:PubSubHubbubLinks$>を埋め込み、保存・再構築をおこないます。

再構築後のフィードのソースを見ると、<link rel="hub" href="..." />というコードが追加されています。 W3C Feed Validation Service で確認すると、Recommendationsとして、「Unregistered link relationship」が指摘されるのですが、御愛嬌ということで。

あとは、記事を更新するのみです。以上です。

Continue reading

MTでページ分割しているとき、ページタイトルに分割されているカレントページの数値を入れる方法について

ページ分割で2ページ目のときにタイトルのとこにPage 2のようなものを入れたい、というアレです。

最適解が小粋空間さまにて紹介されているので、MTPaginateプラグインをつかわれているかたは以下を参照してみてください。

• 小粋空間: Movable Type のページ分割でページ番号を title 要素に表示する（koikikukan.com）

で、MTPaginateのカレントページ数ですが、もとをたどると、$_GETだったりするです。

なので、ここもテンプレートタグとか関係なしに、直接PHPコードで書いてしまうわけです。ほんの一例を示します。

<title>An XHTML 1.0 Strict standard template<?php $getPageN = intval(@$_GET['page']);if ( $getPageN > 1) echo " page= ".$getPageN; ?></title>

page=というパラメタのときの場合で1ページ目はそのままのタイトルで、2ページ目から、ページ数がつくようにしています。

テンプレート側でPHP化とページ分割しているかの判別がめんどくさいので、title要素の部分は一元管理せずに当該テンプレートに書くほうがいいというか自分ならそのようにします。

ウチのところは2ページ以降を検索結果にnoindexにするようにしたので、これを使ったところでいいことも余りないのですが、期間限定でカテゴリページにおいて上記のコードを埋めてみました。ということです。

Movable Type 5 のベータテストが始まりました。そこでInstaMTにて構築してみました。少しだけ注意する部分があります。

追記：【2009・12・01】Movable Type 5が正式リリースされました。これに伴い、本記事内容を凍結とさせていただきます。なお、InstaMTについてまとめたページについては時間をみて更新させていただきます。

InstaMTはMovable Typeの環境を簡易的に構築するためのツールです。Movable Type 5(beta)での最低限の動作環境は満たしているようなので、インストールしてみることにしました。

「InstaMT」については、手前味噌ですが、以下のページにてまとめておきました。

• InstaMTによるMovable Type動作環境構築についてのまとめ

環境としましては、InstaMTにMT4.2以降のヴァージョンにアップし、ユーザの利用環境を日本語に設定しておいたうえでのアップグレードという形です。プラグインについては、初期の状態とします。なお、使用したMT5のヴァージョン表記は、「Movable Type Pro version 5.0b1 」。

Movable Type 5 のベータテスト開始に関する情報およびベータ版ダウンロードについては以下を参照します。

• Movable Type 5.0 ベータ１を公開 | MovableType.jp（movabletype.jp）

InstaMTでのヴァージョンアップの方法ですが、簡単におさらいしておくと、

1. /cgi-bin/mt/ 以下に新しいほうの/cgi-bin/mt/ のmt-staticを除いたフォルダをコピーして上書きする
2. /www/にmt-staticフォルダのコピーを上書きする
3. 新しいほうのMTの各CGIファイルを開き、パスを#!C:/InstaMT/perl/bin/perl -wに書き換えておく
4. 書き換え済みのCGIファイルを含めたフォルダ以外のファイル群をmtフォルダに上書きする
5. InstaMTを起動させるとアップグレードの動作がはじまる

以上の作業後のアップグレードの流れは以下のようにおこなわれました。

次に注意する点ですが、Movable Type5よりウェブサイト単位の管理というものが設けられましたので、そのあたりでの設定です。

アップグレード後の状態でブログを再構築すると、エラーで止る現象がおこりました。これはブログの公開パスの設定が正しくないことによるものです。

そこで「システム」のメニューからウェブサイト一覧を開き、「Generic Website」と書かれた（初期状態でそのような名称になっています）サイトの設定画面に移動します。以下のキャプチャのようにルートの公開パスを設定しておきます。

ちなみにルートのサイトパスはC:\InstaMT\www\となります。

設定後にGeneric Websiteの管理画面にいきます。上のメニューのうぐいす色のところにGeneric Websiteと書かれている状態です。この時点では1つもテンプレートが登録されていない筈です。ここでインデックステンプレートを１つだけ作成しておきます。

作成するのは、InstaMT起動時に「Sending you to the InstaMT dashboard...」のメッセージのでるジャンプページで、/www/直下のindex.htmlのソースをそのままコピーして貼り付けします。ファイルの出力はindex.htmlとしておき登録します。これで、Generic Websiteのほうの設定は完了です。

今度はInstaMTにはじめから登録されているブログ（My MT Blog）のほうの設定に移動します。ブログの全般の設定にいき、サイトパス、アーカイブパスを正しいものにすれば完了です。設定後に全再構築してエラーがでていなければあとは弄り倒しに、という流れです。以上です。