mt5 Archive

ダイナミックパブリッシング利用で、Movable Type のシステムディレクトリ名がかわる場合の影響と修正に関してのメモです

ちょっと意味不明なのですが、おもにローカル環境で動作確認している場合で、MTのヴァージョンごとでディレクトリ名変えたりしながら使っているといった状況下での話で、通常の利用ではまずおこらないような話です。

よくある手順でアップデートを済ませますが、このときに新しいヴァージョンのほうはディレクトリ名を前のものと異なる状態にしてアップデートを実行します。

データベースは以前のヴァージョンのデータベースを複製し、データベース名変更にしてアクセスしているとします。

その状態でそのままダイナミックパブリッシング（以下単に、「ダイナミック」と表記）に設定してある、 サイト／ブログ を表示してみます。

すると以下のようなことがおこっています。

• 新しい記事を作成、公開してもページが見つからないというエラーがでる
• 過去記事の編集、公開をおこなっても更新されていない
• プラグイン設定の変更をおこなったとき、プラグインデータの取得がうまくおこなわれていない

で、これらの原因を探ってみたところ、mtview.php のファイルの内容が原因ということがわかりました。

対処方法

公式なやり方（cf.　Movable Type 5.x の変更点、注意事項、および既知の問題 : Movable Type 5 ドキュメント アップグレードの注意点）では、一旦、ダイナミック用に生成されていた .htaccess ファイルと mtview.php を削除したうえで、ダイナミックを解除（スタティックにもどす）、再度ダイナミックに設定といった手順です。

今回はローカル環境想定ということで、直接書き換えの方法を示します。

mtview.php の場所ですが、ほとんどの場合、ダイナミック設定されてるブログ（サイト）のトップのディレクトリにあるはずです。

あけてみますと、以下のようなコードがみられます。

include('/path/to/Movable Type システムディレクトリ名/php/mt.php');
$mt = MT::get_instance(ブログID, '/path/to/Movable Type システムディレクトリ名/mt-config.cgi');$mt->view();

件の不具合では、Movable Type システムディレクトリ名 が以前のものとなっています。

そこを新しいほうのディレクトリに書き換えすればOKです。

簡単にまとめますと、mtview.php はデータベースと関わるので注意が必要です。

Movable Type 5.2.4 以降導入されたテンプレートタグ MTCanonicalLink の出力でスラッシュがつかないようにしたい場合の方法についてです

標準で MTCanonicalLink は、<link ref="canonical" href="http://example.com/canonical.html" /> のように出力されます。

HTML5 採用のテンプレートをスラッシュなしのほうで統一した、といったような理由であえてスラッシュなしに出力したい時は regex_replace などをつかいます。

• <mt:CanonicalLink regex_replace="/ \/>$/",">">

※ なお、置換せずに、デフォルトの出力のままでXHTML、HTML5どちらでも使えます。

また同時に導入されている、MTCanonicalURL を使うことで、link 要素から作成することもできます。

• <link rel="canonical" href="<$mt:CanonicalURL$>">

XHTML 用

• <link rel="canonical" href="<$mt:CanonicalURL$>" />

タグリファレンスによりますと、current_mapping というモディファイアを持っていて、アーカイブマッピングで複数ファイル出力している場合に優先するマッピングを対象にできます。

• MTCanonicalLink | テンプレートタグリファレンス
• MTCanonicalURL | テンプレートタグリファレンス

Movable Type の translation に関してのほとんど役に立たない小ネタです

わかっている人はこのページそっと閉じてしまって構いません。。

答えを言ってしまう前に前置きみたいなことをやります（タイトルの単語を訳すとネタがバレバレですが）。

Movable Type はローカライズのために単語やセンテンスがあらかじめ登録されているのであります。

このなかで以下を見つけましたのでためしてみたいと思います。

• 'Lorem ipsum'
• 'LOREM_IPSUM_TEXT'
• 'LORE_IPSUM_TEXT_MORE'

Test とか適当なフォルダ名のフォルダを作成し、その下に以下のような config.yaml ファイルを作成して Movable Type のプラグインフォルダにつっこんでみます。（確認したときのヴァージョンは MTOS 5.5.2です）

id: 'Test plugin'
name: 'Test plugin'
description: <__trans phrase="LORE_IPSUM_TEXT_MORE">
version: 0.1

これで、Movable Type の使用言語を日本語の状態にして（意外と重要）、プラグイン一覧で詳細にどう翻訳されているでしょうか。

ちなみに答えは、以下などで前掲のリストのワードを検索すれば確認できます。

https://github.com/openmelody/melody/blob/master/lib/MT/L10N/ja.pm

Movable Typeのウェブページ用カスタムフィールドで次のページURL を示すフィールドをつくってみました。

背景など

ウェブページの link 要素のrel=next および、rel=prev に入れるURLをあつかうとき、MTPageNext　や MTPagePrevius がありますが、これはページの作成順序を考慮していないと、「本当はあのページを次のページとして指定したかったのに」なんてことがおこるかどうかは定かでありませんけれども、そんな環境を想定してみました。

細かな前提とかおいておき、さっそく作成例として示しておきます。

ざっと NextURL のほうだけですが以下のようなものです。previous は文字列変更するだけですので省略。

名前のところは、管理画面の「表示オプション」などが使用するので、わかりやすくて簡潔な名前のほうがいいでしょう（ここの例は思いつきでつけただけですので）。ベースネームは他のと重ならないもの、テンプレートタグも既存のものと違うもので、CFなどの接頭辞をつけてテンプレートタグとわけておくのがいいです。

システムオブジェクト

      ウェブページ

名前
      nextURL

説明
       次のページ

種類
      テキスト

必須?
      なし

規定値
      なし

ベースネーム
   cf_pagenexturl

テンプレートタグ

   CFPageNextURL

テンプレートの例

<mt:If tag="CFPageNextURL">
nextURL: <mt:CFPageNextURL>
</mt:If>

使用する場合は、 ウェブページのそれぞれのページ編集のところで、表示オプションで作成したフィールド名にチェックを入れてフィールド表示させておきます。

あとは、URLを入力すれば、MTCFPageNextURLは入力したURLに展開されます。

以下は、簡単な link要素の next prev の設置です。

head 要素内に以下を追加します。

<mt:If tag="CFPageNextURL"><link rel="next" href="<mt:CFPageNextURL>"></mt:If>
<mt:If tag="CFPagePreviousURL"><link rel="prev" href="<mt:CFPagePreviousURL>"></mt:If>

title 属性を入れたい場合は、 :title=XXX とか独自に記法を決めておいて、URLとtitle部分を regex_replace で取り出すか、新たにタイトル用のフィールドも作るかになるとおもいます。

Movable Type を4.2x系より、5.2.3 にアップグレードしたときにおこったトラブルの解決と各設置をまとめたものです

設定について

Movable Type(以下 MT) 4.x 系から 5.x 系に移行した際の確認事項からまとめていきます。

＊作業内容をことごとく詳細にメモをとっていたわけではなく、思いあたったものだけを記載してますので、一部抜け落ちているかもしれません。

アップグレードが完了してもすぐに全体を再構築しないこと。再構築をかけないかぎりは静的なページの表示に変化はありません（当然のことながらダイナミックで動いている部分には変更が反映されることがあります。

従ってテンプレートの確認の優先順位としてはスタティックなページより、ダイナミックなページのテンプレートのほうを先におこなうほうがよいといえます）。

1. サイトの構成とパスはあっているか？

MT4.xからMT5.x にしたときにブログが存在する場合、自動でサイトが判別されて、その配下にブログがおさめられるという仕様になっています（あとからでも移動なども可能です）。

以下確認事項を列挙します

• ユーザーダッシュボードを開いたときに、下のほうのウィジェットに「ウェブサイト」のタブにあるURLがドメインのトップなどになっているか
• ブログのタブに、MT4.x で作成したブログ群が並んでいるか
• ウェブサイト管理ページの設定＞全般のところのパスに正確な値が入っているか
• ウェブサイト管理ページの設定でウェブサイトのURLはあっているか（www. ありかなしかなど MTWebSiteURLに反映されるので）
• ブログ管理ページの設定＞全般のところのパスおよび公開設定は旧環境と同じ値が入っているか
• 各管理ページのタイムゾーンの設定はあっているか

変更をおこなったら、保存をクリックします。反映には再構築ですが、ほかの確認がすんでから全体の再構築時でかまわないとおもいます。

2. プラグインが認識されていないものはないか?

MT4.x で使えていたものが、MT.5x で使用できない、もしくはシステムのプラグイン一覧のところに警告表示のあるものはないか、などをチェックしておきます。

動作しないか、または動作に不安があるプラグインについては、アップグレード後の確認の段階ではシステムのプラグインリストより個別にプラグインの使用を停止するか削除しておくほうがいいでしょう。

MT5.x系でのプラグイン動作の確認情報

1. 小粋空間: Movable Type プラグイン一覧（MT5対応）
2. 拙作プラグインのMovable Type 5.2対応状況 - The blog of H.Fujimoto
3. MT5・プラグインの皆さん動いてますか - WolaWola　（続編は前掲の『小粋空間』のページ上に全てリンクされています）

3. テンプレートの状態

• アップグレード後にテンプレートが文字化けしていたりしないか
• ダイナミックパブリッシングに設定しているテンプレートは正常に動作しているか
• グローバルテンプレートなど初期化はおこなったか
  • 5.13、5.07、4.38 へのアップグレード後に必要な作業 : Movable Type 5 ドキュメント このブログでは、コミュニティ関連の機能を使っていない状態だったので、特に変更はやっていません。該当する場合は修正の必要があります。

トラブルに関して

• a.　5.2.3 設置完了後に YAML のエラーで管理画面に入れない
• b.　サイトのテンプレートで文字化け
• c.　ダイナミックパブリッシングにしているテンプレートが404 で返る
• d. PubSubHubbub プラグインで ping が動作していない

a. ですが、 YAML モジュールがMT5が YAML::Syck を標準にしていることで、書式において厳密になっているのが主な原因といえます。

対処方法は、問題のおこるプラグインを削除してしまう、あるいは、YAML::Syckに怒られないように.yamlファイルを修正するか、 YAML::Tiny を使うように、mt-config.cgi に書き込むなどです。

インストール時は、修正とかすると時間がかかってしまうので、一時的にmt-config.cgi に YAMLModule YAML::Tiny を書き加えました。

インストールが完了して一通り確認作業が終わった時点で、問題のおこっているプラグインの.yaml ファイルの修正にとりかかりました。というのも、標準にYAML::Syck が採用されたのはおそらくパフォーマンスに関係してるとおもわれ（確かベンチとったかたが記事をあげていたような）、面倒でも YAML::Syck の環境にしたかったので。ローカルのほうのMTOSもYAML::Syck になってますし。

エラーをおこしているプラグインの具体的な名前をあげると、 CommunityActionStreams とか Motion 。 CommunityActionStreams はGitHub 上のものに差し替えると大丈夫そうです。

.yaml の修正ですが、[_1] <a href= ... > のようなコードは、シングルクォーテーションを使って囲うことでエラーは回避できます。　あと、インデントにタブが使われているものもエラーですので、それらは半角スペースに、それとインデントの位置があっているかもチェックしておきます。

まあ、どちらもほとんど使わないようになってきたので削除してしまったほうが早かったかもしれません。

b. の文字化けについて

これは、Movable Type 5.x の変更点、注意事項、および既知の問題 : Movable Type 5 ドキュメント に書かれている、「データベースがMySQL 5.x で、UTF-8を利用している場合は、mt-config.cgiに"SQLSetNames 0"を指定してください。」の文面どおりにおこなったらなりました。

---- 同じような現象は、Google検索をかけてみるといくつかみられました。サーバーの環境などにもよるものらしいですが、当方の環境も当りだったということのようです。

具体的には、テンプレート名やサイトのタイトルなど複数の箇所で文字化けがおこります。環境変数を削除すれば、ほとんど解消します。しかしながら、これまでにデータベースになく新たにセットされたテーマで文字化けはそのままでした。

そこで、グローバルテンプレートについてはテンプレートの初期化を、サイトのテーマについては、再適用で文字化けは解消しました。

d. PubSubHubbub ですが、GitHub 上の https://github.com/miyagawa/MT-PubSubHubbub 最新版に差し替えて使用しています。

ところが、そのままで使うと、ping が送信されないので当然リーダーのサービスにも反映されていませんでした。

以前のヴァージョンもそういえば、テンプレートが標準でないときに動作してなかったことを思い出して修正をおこないました。

Plugin.pm の11行は、

• if ($tmpl && $tmpl->identifier eq 'feed_recent')

となっています。このブログだと、template_identifier がNULL のため、以下に修正（改変？）しました。

• 　 if ($tmpl && $tmpl->name eq 'Atom')$tmple->name

テンプレート名が 'Atom'のものを対象とする

（注： これは自分が修正したときのものです。１回既存のテンプレートをテーマとしてエクスポートし、既存のフィードのテンプレートはテーマの configuration で identifier => 'feed_recent' にして、最適用させるかidentifier にfeed_recent 登録済なテーマに入れ替えるのが望ましい方法です）

いまのところ以上です。なにか気づいたことがあったら追記します。

Movable Type 4から5系にアップグレードしましたのでそのおぼえ書きです

手順を追っていきますが、特にやらなくてもよさそうなものもありますので、このとおりにすれば間違いなし、という意味ではないです。2013年 2月 版ということで。将来的には手順がかわるかもしれません。

バックアップ

不具合がおこったときの備えのためのバックアップです。

ここのサイトではアクションストリームプラグインを入れてますので、そのデータをプロフィールのページから過去のログをばんばん削除していきます。これで少しはダンプファイルのサイズが少なくなるかと。

そのあと、サーバの管理ページ経由（理由は管理画面からデータベースの保存機能があるため。定期のバックアップのときはいつも phpMyAdmin で ダンプファイル作成してローカルに落とすのと両方でやっています）で phpMyAdmin に入ります。オーバーヘッドのあるテーブルをチェックして最適化をおこないます。そのあとエクスポートタブからダンプファイル作成をしてダウンロードします。

次に、Movable Type (4.2)のバックアップ機能から、バックアップをとります。ここではこのブログのみでバックアップをしてます 。

つぎにブログのエクスポート機能で、記事データをエクスポートします（これを使うことになるのは非常事態のときくらいかも）。

このあとに、ブログの公開設定のところを開き、公開設定の一連の項目をスティッキーズなどにメモしておきます

そして、ブログの静的ファイルのバックアップも試みました。ターミナルから ssh で入って、アカウントのディレクトリ（ドキュメントルートの上の階層）にバックアップ用ディレクトリを作りそこにコピーしていきます。

個人無償版のダウンロード

SixApart のサイトにいって、最新版の Movable Type をダウンロードします。

• Movable Type 個人無償版ウンロード : 各種お問合せ - Six Apart

利用許諾に目をとおして、同意できたならば、送信フォームに 確実に自分のところに届くメールアドレスと、利用目的を選択して送信します。

フォームに入力したメールアドレスに、ダウンロードページのURLとログインキーが記載されたメールが届きます。

あとはページを開いて指示通りすすめばダウンロードされます。

ファイルのアップロードとインストール

ダウンロードしたファイルを FTP クライアントを使って、サーバーにアップロードします。今回はドキュメントルート上におきます。その後に ターミナルから展開、もとの MTディレクトリより必要なファイル群をコピーします。

その辺りは、Movable Type 5 を最新のバージョンへアップグレード : Movable Type 5 ドキュメント の 2. 新しいディレクトリでのアップグレード に記載されています。

必要な作業が終わったら、ブラウザからMTにアクセスします。このときはFirefox でなく Safari のほうを使ってやりました。 いきなり YAML でエラーがでたので、とりあえずは、mt-config.cgi に環境変数 YAMLModule YAML::Tiny をセットして回避しました（これはインストール作業が完了した後でエラーのおこっているプラグインの.yamlファイルに修正をおこない、現在は YAML::Syck のほうで動作させています）。

アップグレードウィザードが走り、あとはデータベースの更新などが行なわれてダッシュボードに入ることだできました。

Movable Type 5.2.3 インストールまでは以上です。

さて、これでめでたし、めでたし、といきたいところでしたが、いくつか不具合がみつかったので次回にでもそのまとめを書いてみようと思ってます。

Movable Type 上で使用するエディタに CodeMirror を設定するやりかたです

もともとMovable Type（ここではヴァージョン5.2 以上ということです）に CodeMirror は同梱されているのですが、使えるようにするのにあれこれしないといけなくなるわけです。

探しましたところ、CodeMirror を使えるようにするためのプラグインが GitHub にありました。

• movabletype/mt-plugin-codemirror · GitHub

CodeMirror for Movable Type として提供されています

簡単な導入手順は以下の通りです。システム管理者権限の有る者がおこないます。

1. 前掲のページより master.zip をダウンロードして、展開しておきます
2. plugins 内のフォルダを Movable Type の plugins ディレクトリに入れます
3. mt-config.cgi に SourceEditor CodeMirror を追加します。参考：SourceEditor | 環境変数リファレンス
4. TinyMCE を使わない場合は、システムメニューのプラグイン設定のところで、TinyMCEを無効にします

で、設定後のキャプチャは以下です(ローカルのMTOS v5.2.2で試しています)。

以下は、表示できる補助ボタンをカスタマイズした例で、リンク挿入を入れています。

カスタマイズの参考までに。プラグインの editor.tmpl のコードを追ってみると参考になります。

Movable Type 5 でImage Driver をImager にしていて、JPEG画像はサムネイルが作られるのに、PNG画像では作られないといった問題の解決です

状態の確認

以下のアイテム一覧(スクリーンショット)は、Imager 使用で、PNG画像でサムネイルが表示されていないときの例です。（確認は、OSX Lion / MTOS 5.2 / MAMP + MacPorts Imagerインストールはcpanm による ）

対応

まずは、Imager で対応しているファイルの形式を調べます。

use Imager; - 今日のCPANモジュール（跡地） によりますと、以下の一行コードで対応するファイル形式を調べられるとのことです。

perl -MImager -e 'print join ", ", sort keys %Imager::formats'

この結果で、pngがでていなければ、png画像に対応してないということになるようです。

PNGを扱えるようにするには、別途 Imager::File::PNG をインストールする必要があります。以下は参照ページです。

• Imager::QRCodeではまった。 - ちゃまぐの備忘録

cpanm Imager::File::PNG

以上で解決しました。

MTOS 5.13の環境でencode_js の出力に関してのテストテンプレート。

scriptという文字列があったときに、バックスラッシュによるエスケープ文字が挿入されることに最近気がついたので、テキトーなテンプレートを作ってみてみました。

<mt:Var name="var[0]" value="script">
<mt:Var name="var[1]" value="javascript">
<mt:Var name="var[2]" value="applescript">
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>encode js test</title>
</head>
<body>
<p><$mt:GetVar name="var" encode_js="1"$></p>
<script>
(function(){
var i;
var a=new Array( <mt:loop name="var" strip_linefeeds="1">
<mt:Unless name="__last__">
<mt:Var name="__value__" encode_js="1" regex_replace='/(.*)/','"$1",'>
<mt:Else><mt:Var name="__value__" encode_js="1" regex_replace='/(.*)/','"$1"'>
</mt:Unless></mt:loop> );
for (i=0; i<3; i++){
     document.write('<' + a[i] +'>' + 'test' + '</' + a[i] + '>' );
}
})()
</script>

Movable Type 5.1で画像処理ライブラリとしてImagerを設定できるようになっていましたので、その設定と動作を確認してみました。

なんか5.1のリリース近しとか囁かれていたりしますが、やや見切り発車？でのレポートです。動作テストはRC版でおこないました。

環境変数リファレンスをみますと、ImageDriverとしてImagerが追加されています（ただし、ヴァージョン5.1以降）

• ImageDriver | 環境変数リファレンス

Imagerのインストール

Mac OS XでMAMP下でインストールをおこなってみました。

Imagerの説明については以下のページが丁寧に解説されていて参考になりました。サンプルコードもありますので、インストール後に動作確認してみるといいでしょう。

• use Imager; - 今日のCPANモジュール（跡地）

jpeglibとかlibpngとかいったライブラリが必要となっているとのことですが、自分の環境では既に画像処理ライブラリにNetpbmをMacportsからインストールしておりまして、そのあたりはスキップしております（一部ないものもあるけど）。

インストールはcpan経由にておこないました。cpanプロンプトに入って、Imagerをインストール。

cpan> install Imager

インストールに成功したら、先ほどの参考元サイトさまで示されているように、%Imager::formatsハッシュをみてみます。

最低限JPEGとPNGが対応できていればいいかなと。

環境変数をmt-config.cgiに記載

追記：　新しめのヴァージョンですと　Imager インストール済でかつ、 Image::Magick 未インストールという環境でウィザードからインストールをおこなった場合にmt-config.cgi にImageDriverにImager が書き込まれる事は確認しております。

準備が整ったら、あとは簡単でmt-config.cgiにImageDriver ImageMagickとかなっているのをImageDriver Imagerと書き換えるだけです。書き換えたら上書き保存します。

ImageDriverの指定がなかった場合に画面上部に警告メッセージが表示されています。＊キャプチャは5.1RCのものです。

ImageDriverをImagerにして書き換えます。

これで再びログインしなおしますと警告メッセージも消えてアイテムで画像アップロードなどするとサムネイル表示されるようになります。

Movable Type5.1でtrim_toモディファイアでtrim_to=5+...の書き方の動作確認です。

MTでtrim_toを使って省略されたテキストのあとに三点リーダなどを付与する方法ですがMT5.1ではモディファイアにて簡単に表現できるようになっています。

MT5.1リリースノート（本記事作成の時点では[RC4]）の「MT 5.1で実装された機能」の項目にtrim_to="5+..." モディファイアを追加する。と記載されています。

• 5.1 リリースノート | Movable Type 5 ドキュメント

モディファイアについては特に解説なしでいきなり使ってみましょう。当方はRC2にて検証をおこないました。このテストでは三点リーダでなくピリオド３つ並べたものでおこなっています。

テスト用テンプレート

<mt:SetVar name="text" value="1234567abc" />
<!DOCTYPE html>
<meta charset="utf-8">
<title>trim to option test</title>
<p><mt:var name="text" trim_to="5+..." /></p>
<p><mt:var name="text" trim_to="7+（ry" /></p>

結果

出力

12345...

1234567（ry

出力されたページのソース

<!DOCTYPE html> 
<meta charset="utf-8"> 
<title>trim to option test</title> 
 
<p>12345...</p> 
<p>1234567（ry</p>

正式版リリースを前になんかしょうもないエントリですみません。

Movable Type 5インストール後にmt-check.cgiを見に行くと、無効化されています。

わかっていそうで実は知らなかったのでメモです。環境はMTOS　5.1b2 によるものですので、ヴァージョンによって違う動作となるかも。

MTOSをインストールする前に、１回mt-check.cgiを開いて必要なモジュールなどが揃ってるかチェックするわけです。

そのあとインストールは常の如しでおこないまして、ダッシュボードが表示されるまでできたとします。

この後、再びmt-check.cgiにアクセスしますと、以下のようなメッセージが表示されています。

• The MT-Check report is disabled when Movable Type has a valid configuration file (mt-config.cgi)

?__lang=jaというパラメタつきですと、以下のメッセージです。

• 構成ファイル(mt-config.cgi)がすでに存在するため、'mt-check.cgi' スクリプトは無効になっています。

というわけで、インストールしたあとはMovable Typeの管理画面の[ システム ]　>　[ ツール ]　> [ システム情報 ]と進みますと情報をみることができます。

Continue reading

Movable Typeの管理画面カスタマイズで、プラグイン経由でフッターのJavaScriptにコードを追加しようとするときに、jq_js_includeにappendするとダイアログ表示にもコードが追加されることがあります。

MTの管理画面でjQueryを追加してカスタマイズするとき、footer.tmplファイルにある、<mt:var name="jq_js_include">にappendする（append=1として変数に追加する）という方法を以前このブログ内において公開していたのですが、これをおこなったときにダイアログを表示（テンプレートの初期化とか、エントリ編集画面のファイル・画像アップロードのときとか）したときにも追加されることがあるのを確認できました（MTOS 5.02）。

追加したコードの書き方によっては必要もない箇所でカスタマイズしたコードの読み込みがおこなわれることもあるのでないかとおもい、その対処を考えてみました。

なお、これが再現されるのはTransformerプラグインでsetvarblockを使いappend=1というオプションを利用したなどの場合で、直接当該テンプレートのコピーをalt-templeでカスタマイズした場合には問題ないものとおもわれます。

（１）footer.tmplの代替テンプレートを作り、カスタマイズ用の変数をセットする

先述の現象は、/MTシステムフォルダ/tmpl/cms/dialog/footer.tmpl で<mt:var name="jq_js_include">が記述されていることによります。

つまるところダイアログのテンプレートを除外すればいいわけなんですが、ここは条件式なしで変数をセットしておいてそこに追加させるという方法で対処してみます。

• /MTシステムフォルダ/tmpl/cms/include/footer.tmplファイルをコピーしてalt-tmplフォルダ以下に/cms/include/footer.tmplをおきます
• （コピー先の）footer.tmplをエディタで開いて、このリスト下に示すコードを追加します
• 編集後はサーヴァにローカルと同じ構成でアップロードします

footer.tmplに追加するコード。

追加の場所は</body>の上に。ここでは変数名をjq_custom_includeとした。

<script type="text/javascript">
jQuery(function($){
<mt:var name="jq_custom_include">
});
</script>
<!-- 追加コードここまで -->
    </body>
</html>

勿論、上記コードのscript内およびjQuery(function...内に直接になんらかの処理のコードを書くということもできます（このエントリではプラグイン等でappendを利用することを想定したつもりですが）。scriptタグ自体を追加側（setvarblock内）のコードに委ねるというのであれば変数の呼び出し（mt:var name=）だけ置けばよいことになるでしょう。

ちなみに追加させるほうのコードについては、jQuery()といった書き方を$()で書くことができるという寸法であります。

jQueryのコードの追加

あとは、setvarblockで任意のコードをappendです。

<mt:setvarblock name="jq_custom_include" append="1">
/* append code
 $("#foo").css("background", "#ffffff");
*/
</mt:setvarblock>

（２）スクリプトがダイアログのとき動作しないようにする

コードを書くにあたって、ダイアログと当該テンプレートで共通しないidかclassを参照するようにするのがコツなのですが、カスタマイズのスクリプトがダイアログのときは動かないようにコードで分岐しておく、ということも考えられます。

これには、dialog.tmplでルート要素にdialogというIDがつけられていることを利用します（ヴァージョンアップ等でなくなる可能性はあるかもです）。

以下は、jQuery('#dialog')でIDをgetして分岐するコードです。＊else{以降は適当な（動作に影響をおよぼさない）コードを。

<mt:setvarblock name="jq_js_include" append="1">
var gt_html_id = jQuery('#dialog');
if(gt_html_id==""){return;} 
else {
//  Do Something
jQuery('#bootstrapper').removeAttr('class');
}
</mt:setvarblock>

この例では、ID bootstrapperのclassがダイアログのiframeでリムーヴされずに残っているはずです。（Firebug等のツールで確認します）

（３）プラグインで対策してみる

例えば、include/header.tmpl でrelated_contentという変数がセットされており、/dialog/header.tmplではセットされていないことからこれを置換する形で。。

   my $old = qq(<mt:setvarblock name="related_content">);
   my $new = <<EOT;
#
# ここにappend予定のsetvarblock !
#
<mt:setvarblock name="related_content">
EOT

   $$tmpl_ref =~ s/$old/$new/;

あとこまかな事など

cms/dialog/header.tmplにおいて、<mt:var name="html_head">、<mt:var name="js_include">の記述があるので、appendする場合についても同じ状況になることがあるかも知れません。

以上の内容は自分が試した環境に基づいています。早い話、MT編集画面のカスタマイズをしていなければこれらの問題はまずおこらないということです。確認にはFirefox + Firebug でダイアログ表示のiframeを別のウィンドウで表示させたうえでページのHTMLをチェックしました。

個人的には、何かの操作ボタンを追加するとかいったカスタマイズについて、或る操作の時だけ必要というようなものはブックマークレットでもいいのではないかと考えています。

おもいつくままで整理できずにまとめたので、ちょっと何いってるのか分からないかんじで申し訳ありません。

Movable Type5 (MTOS5)の管理画面で各テーブルにてマウスオーバー時に行をハイライトするというカスタマイズです

tableの行ハイライトのデザインに慣れてしまうと、どうもどこでも実装してみたくなってしまいこのとおりでございます。

「ブログテンプレートの管理」とかtableで構成されているリストのあるページでマウスオーバーの時にハイライトになるというものです。

其レ、CSSで出来るよ（・∀・）というかたはその様にされて構わないのですけれど（んだども、セレクタが使える部分は大きいかなあとかなんとか）。

MTOS5.01-jaにて確認をおこないました（jQueryを使うのでMT5以降用です）。alt-tmplで代替テンプレートとして使用します。

{mtシステム}/alt-tmpl/CMS/include/ 以下に、{mtシステム}/tmpl/cms/include/footer.tmpl のコピーを置いて、以下のコードをfooter.tmplの先頭に追記します。

追記：すみません、selectedのときの背景色を考慮してなかったので書き直しました

<mt:setvarblock name="jq_js_include" append="1">
var addCss='';
addCss += '<style type="text/css">\n'
addCss += '.listTableHighlight { background-color : #e5ecf3 !important; }\n';
addCss += '</style>\n';

jQuery("head").append(addCss);

jQuery('table[id*=listing] tbody tr').hover(function(){
       jQuery(this).addClass("listTableHighlight");
}, function() {
       jQuery(this).removeClass("listTableHighlight");
});

</mt:setvarblock>

tableの縞々の背景色は手抜きでハイライト前の元の色を取得せずclass名、odd、evenに指定されていた背景色を使うことにしてるので、自分で好きな配色にされてるかたは（いるのか？）適宜変更が必要になるでしょう。

あ、いちおうプラグインらしきものも用意してみました。こういうの初めて作ったような気が。上のalt-tmpl使うのと同じです。footerに上記のコードを追加するだけです。それ以上の機能はありません。

• http://www.markdiary.com/sample/haifu/ListTableHighlight.zip (zip)

メモ的に。SetVarBlock（+append）を使った書き方をするのは好みの問題ですので直に代替テンプレートにjQueryのコードとか書き込んでも構わないと思います（自分が使う分には、という前提だけど）。SetVarBlockを使う方法でやってるのは、止めにしたいときに、SetVarBlockタグと中身をまるっと削除すればその部分はなかったことになるので。

そのような関係で、テンプレートに追加したいところに空要素書き込んでおいて流し込ませなくて、jQueryで要素を作って{append()/prepend()}するようなのをしばしばおこないます。

Continue reading

Movable Type 5のテンプレート編集画面において、左ペインのメニュー（以下省略して「メニュー」とします）を表示させたり隠したりするボタンをjQueryを使って作成

MT5では管理画面に3カラムが採用されました。テンプレートの編集画面では、XGAな環境には（テキストエリアの横幅がせまくて）一寸厳しい部分があります。

編集するテキストエリアを全画面表示されるプラグインはありますが、メニューを表示させないだけでも少しは違います。

スクリーンショット

• メニューが開いている状態

  

• メニューが閉じられている状態

  

ということで、FirefoxのアドオンStylishで確認して作成してみたのが以下のカスタムスタイルです。

下記に示すコードは当方が普段使っているモニタの解像度に基づいてるものですので、もし使われる場合は各自で（Stylish使うなど）確認しながら調整をおこなわれたほうがよいでしょう。

#menu{
clear:left !important;
position:absolute;
left:-170px;!important
}

#content{
width: 115%!important;
clear:left!important;
position:relative!important;
left:0!important;
}

そのままStylishにいれて、有効・無効を切り替えて使ってもいいのですが、折角ですので管理画面上に切り替えボタンがあればそのほうが使いやすそうですよね。

テンプレート編集画面の代替テンプレートを使って、このボタンを作成してみたいとおもいます。

注意点です。Movable Typeのヴァージョンが変わった際、構造が変更となった場合はその都度代替テンプレートの変更が必要となります。
＊この記事では、MTOS 5.01 jaを元にカスタマイズしております。

代替テンプレートの作成

1. 先にCSSファイルを用意します。下記のファイルを（任意のファイル名でいいのですが）ここではeditor-toggle.cssとして（mt-static/css/editor）以下に保存します
   

   
   .wide_view_menu{
    clear:left !important;
    position:absolute;
    left:-170px;!important
   }
   
   .wide_view_content{
    width: 115%!important;
    clear:left!important;
    position:relative!important;
    left:0!important;
   }
   
   #toggle_view{
    display: block;
    position:relative;
    padding-left: 4px;
    left: 0px;
    width: 145px;
    text-align : center;
    background-color:#ccc;
    cursor: default;
   }
   
   #toggle_view:hover { background-color: #eee; }

2. mt/tmpl/cms/ のedit_template.tmplファイルを開きます
3. edit_template_tmplを任意のエディタで開き全選択してコピーし、エディタの新規作成に貼り付けします

4. 貼り付けしたほうで、<mt:include name="include/footer.tmpl">という記述の上に以下のようなコードを追記します。

   <mt:setvarblock name="jq_js_include" append="1">
    var toggle_htm= '<a href="#" id="toggle_view"> &#62;&#62; </a>';
    jQuery("#container").prepend(toggle_htm);
   
   // toggle view actions
   
    jQuery("#toggle_view").toggle(
     function () {
       jQuery(this).text(" \u003E\u003E ");
       jQuery("#menu").addClass("wide_view_menu");
       jQuery("#content").addClass("wide_view_content");
     },
     function () {
       jQuery(this).text(" \u003C\u003C ");
       jQuery("#menu").removeClass("wide_view_menu");
       jQuery("#content").removeClass("wide_view_content");
     }
   );
   
   </mt:setvarblock>

5. 先に保存しておいた、editor-toggle.cssがテンプレート内に呼び出されるように、以下のコードも追記しておきます
   

   
   <mt:setvarblock name="html_head" append="1">
   <link rel="stylesheet" type="text/css" href="<mt:var name="static_uri">css/editor/editor-toggle.css" />
   </mt:setvarblock>

6. 以上書き換えが済んだら、edit_template.tmplとファイル名にして、mt/alt-tmpl/CMS/以下にファイルを設置します
7. 設定を終えたら、MT管理画面にログインしますと、先に示しましたスクリーンショットのとおりです

• http://www.markdiary.com/sample/haifu/ShowHideLeftMenu.zip" class="event_file">ShowHideLeftMenu.zip

5.1x 以降は、以下にあります。

• https://bitbucket.org/markdiarycom/showhideleftmenu/downloads

Continue reading

MovableType 5に同梱されている、Picoテーマで検索フォームで初期値をいれつつ、テンプレートを一元管理できるようにしてみました

単に、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テーマに限った話でもなくて、引き合いにだしたのは、なんとなくシンプルでいいなあと思ったというだけです。以上です。

Picoテーマを紹介されているサイト様

• Movable Type 5に「Picoテーマ」が追加 - The blog of H.Fujimoto
• 小粋空間: Movable Type 5.0 RC1 リリース
• MovableType5 RC版リリースとPicoテーマ追加 - StarBrother

Movale TypeのTemplateShelfプラグインですがAll Templatesを選択時にテンプレートの数が多いと動作が重くなるとのことなので使えないようにする改造とグローバルテンプレートのIDについてです

Movable Type 5で「TemplateShelfプラグイン」が動作できるとの情報がWolaWolaさまにて紹介されています。不具合の修正や改造方法も掲載されていますので参考になります。

• MT5でのTemplateShelf - WolaWola（www.zelazny.mydns.jp）

ヴァージョンを4.2にしてから動作しなくなったので放置してしまったのですが、4.2以降でも動作するようにヴァージョンアップされていたようですね。さっそく使ってみましたところ4.261においても動作することを確認しました。

さて、「All Templates」を選択した際に動作が重いとのことです（JSON形式のデータの書き出しか読み込みで時間がかかるのか？？）。すべてのテンプレートのショートカットを表示させたい場面は滅多にありませんので要らないものは使わなくて済むように以下のように変更してみました。なお以下のカスタマイズはMovable Type 4.261にて確認をおこないました

<option value="" disabled="disabled"><__trans phrase="All Templates"></option>

template_shelf.tmplファイルのoption要素で当該の箇所にdisabled属性を追加して選択できないようにしています。

余談ではありますが、書いておきますとoption要素のdisabled属性がIE6では選択不可にならなかったとおもいます。その前にIE自体でこのプラグインが動かないですので。。(参考：「Template Shelf」プラグインがIE6では動かない？ - ElectricBrain Standard)上記はワタくシがやった方法ですから、その部分を削除するなり、コメントにするなりお好みの方法でよろしいかと。

それと、グローバルテンプレート時の振り分け（blog_id=0のパラメタが機能していない件の対処）についてなのですが、実はモーダルボックスでグローバルテンプレートの表示を試してみると（MT4.261の場合です）、コチラのほうはいちおう表示されているんですね、これが。

ソースを見るとどうやらtmpl.idの値が求めているものそのものらしいです。で、問題の箇所は以下のように変更してみました。createRow()関数の箇所でmt:var name="blog_id"の部分をtmpl.blog_idに置き換えます。そういう意味とは違うようでしたら御免なさい。

?__mode=view&_type=template&blog_id='+ tmpl.blog_id + '&id=' + tmpl.id + '">'

改造後はいつもの如しで、MTシステムディレクトリ/plugins/TemplateShelf/tmpl以下にアップロードして管理ページから確認して終了です。これで「むきょー！」の仲間入りですね。

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

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）のほうの設定に移動します。ブログの全般の設定にいき、サイトパス、アーカイブパスを正しいものにすれば完了です。設定後に全再構築してエラーがでていなければあとは弄り倒しに、という流れです。以上です。