Home

maRkのMyOwn

jQuery For MTプラグインをいれてみました

Movable Type 4 の管理画面に jQueryをつかえるようにするための、jQuery For MTプラグインを使ってみることにしました。

MTのアップデートの際にAltTemplateをアップするのを忘れてて動いてないなあ、とか実際にやってまして。プラグインならば、いつもアップデートのときに、旧MTディレクトリからごっそりコピーしてくるのでそういった凡ミスはほぼないってことです。

プラグインは以下からダウンロードできるようです。

以下、Movable Type 4系での話として進めていきたいと思います。

これまで、管理画面でjQueryを使うのに、AltTemplateを使っていました。これを、jQuery For MTに移行する手順は以下のとおりです。

  1. プラグインを入手する
  2. 展開してpluginsフォルダ以下はシステムのplugins以下に、mt-static/plugins以下の「jQueryForMT」をシステムのmt-static/plugins以下にそれぞれアップロードする（ダウンロードページの詳細のとおり）
  3. user.jsに、alt-tmplディレクトリ以下にある、AltTemplateファイル（.tmplのファイルなど）に記載されている、JavaScriptのコードを入れる
  4. 編集後、user.jsをアップする
  5. alt-tmplディレクトリ以下を削除する（他に使用する代替テンプレートがある場合は当該ファイルのみ削除しあとは残しておく）

それと一点だけ気づいた点ですが、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>

メモ：特定カスタムフィールドの値は提供されたタグで

特定のカスタムフィールドの値の出力のメモ。MTEntryCustomFieldsにおいてinculudeモディファイアを利用できるようですが、特定のカスタムフィールドには提供された専用のタグを使います

折角、カスタムフィールドのカテゴリを設けたので、久久にカスタムフィールドねたでいきます。

以下はカスタムフィールドにフラグメント識別子をいれてその内容にもとづいた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モディファイアを使って、「フラグメント」のカスタムフィールドのみ出力になるようにした書き方です。

MTEntryCustomFieldsでinculudeモディファイアを使った場合
<ul>
<MTEntries>
  <MTEntryCustomFields include="フラグメント">
    <MTIfNonEmpty tag="EntryCustomFieldValue">
      <li><$MTEntryTitle$>: <a href="<$MTEntryPermaLink$>#<$MTEntryCustomFieldValue$>">
          <$MTEntryCustomFieldValue$></a>
      </li>
    </MTIfNonEmpty>
    </MTEntryCustomFields>
</MTEntries>
</ul>

結果的は等しくなりますが、コードとしてどちらがすっきりとしているのかはいわずともわかりますね。

なお、についてはタグリファレンスには、exclude（特定のカスタムフィールドを除外する）のみのモディファイアが掲載されています。特定のカスタムフィールドの内容の出力は、そのカスタムフィールドのテンプレートタグを使う（＊リファレンスにも明記されています）ということで頭の中にいれておけばいいのでないでしょうか。Tipsでもなんでもなく、リファレンスをよく読めばいいという話であります。

コメントタグ内のMTタグ

Movable TypeでHTMLのコメント内にMTタグを入れたときについて

以下のサンプルでは、コメント内のMTタグは反映されます。ファンクションタグ・ブロックタグともに反映されるようです。

  • <!-- <$MTDate language="en"$> -->

出力は以下のようなもの

  • <!-- January 25, 2010 3:29 PM -->

Movable Type5の編集画面のCodeMirrorでは、コメント内のMTタグはコメントと同色で強調されていないのですが、コメント内のMTタグは動作するようです。

MTOS5の編集画面

ちなみにMT4.xにおいては、コメント内のMTタグについて強調表示が適用されていることを確認しています（MT4については、強調表示無効のボタンがあり、ワタくシは強調表示なしでしか編集をしませんから、どうでもよいといえばそれまでで）。

あまり活用されることはないとおもいますが、動作については以上です。

＊キャプチャ画像・確認ともにMTOS-5.01-jaによる。ダイナミック・パブリッシングでも同様でした。

今月のいらんことしい(2010年1月)

サイト内でカスタマイズをおこなった箇所をまとめたエントリです。

2010年初頭のカスタマイズなんですが、実はあまりおこなっていません。あえていうと、トップページのskin変更くらいかと。

今回は少し趣向をかえまして、どうでもよさげな話をしてみようと思います。

玉ねぎのみじん切りとカスタマイズ

玉ねぎをみじん切りにするときに、よく半分に切ってから、縦に細かく切込みを入れ、横から数箇所切り込みを入れてから切るといった方法を習うのでないかと思います。

これをですね、玉ねぎの四分の一の量だとか小さなサイズの玉ねぎのとき、切り込みいれなくて、最初からスライスにしてしまったのちに、ちょこっと揃えて細かく切ってもみじん切りになると。

そろえるのが面倒でない？とか思うかもだけど、それ位の量ならば揃えてから切るのは、切り込みをいれてから切るのとそれ程かわらないんじゃないか（と自分は思ってます）と。

くだらない喩えになって仕舞いましたけど、まあ、別な方法はないかなあとか思いながらカスタマイズしてるというか、ここにおけるカスタマイズのネタ元の元が玉ねぎのみじんの仕方にあるのでないか、というお話でした。おしまい。

これまでのカスタマイズリストは以下にあります。

ウェブページのページごとでカラムレイアウトを替える

Movable Type のウェブページでページ単位でテンプレートのサイドカラムの配置を切り替えるというものです。

今回おこなうのは、記事ごとでカラムレイアウトを切り替えることができるようにしよう、ってことです。「そんなことする必要があるのか？」とかいわれそうなんですが、例えば、特定の記事で左サイドにメニューをおいてみたいとか。内容的には、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のみでおこないました。以上です。

Index of all entries

Home

Recent Entries
Categories
Archives
Search

Powered by 暴想 & Dakiny&Digiclo

Feeds
Recommended Tags

All Tags

meta
Others

あわせて読みたい

全文配信同盟

my ブログネットワーク

Elsewhere

Action Streams

logo

Mozilla Firefox ブラウザ無料ダウンロード

TypePad AntiSpam

Return to page top