mt5 Archive

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