Home > MTカスタマイズ Archive

MTカスタマイズ Archive

1 of 17

Next Page >

Select Pages:

今月のいらんことしい（2010年2月）

今月（2010年2月）、ブログのカスタマイズをおこなった記録を綴るエントリです。

そういえば今月はあまり記事書いてないですね。。

  • jQuery For MTプラグインをいれてみた。
  • TypePad（Micro）に登録。独自のActionStreamsを作ってみた

jQuery For MTについてはこちら（ <http://www.markdiary.com/archives/2010/02-01091250.php>）に記したとおりです。MT4.xな環境でjQueryで書かれたコードを編集画面にとりいれることを実現するものです

さて、既にサイドバーのElsewhereにあるんですが、TypePad（typepad.com）に登録してみました（こちらです。maRkzMICRO）。TypePadにPostしたものを取り込みます。

ところで、TypePadでダッシュボードのクイック投稿フォームからの投稿をおこなった場合にフィードのほうが、title要素が空で出力されています。

この対応としまして、YAMLファイルには要素を置き換えという方法（summary要素をtitle要素と置き換える）で対処しました。

ActionStreams関連のドキュメントは用意されているのですが、熟読するよりやってみないことには始まらない、というのが今回やってみた教訓というかなんというか、そんなところです。ActionStreams関連はあつかわないと前に宣言しましたんでこの辺で。

今月のカスタマイズは以上です。以下に過去のカスタマイズ記録があります。

link要素にアーカイブ

Movable Typeでlink要素にarchivesというLink typeをいれてみるというものです。

毎回、毎回つかいどころのわからないものを、「ネタ」と称して公開するのはちょっと気が引けるのですがいってみます。

このカスタマイズは<link rel="archives" ... />というのをhead内にいれるというもの。ワタくシが見かけたなかでは、月別アーカイブのリンクをその値としてるものがあるようでしたので、それに倣ってやってみます。

月別アーカイブのウィジェットのコードを参考にしますと、おそらくこのような形になるかと

<mt:IfArchiveTypeEnabled archive_type="Monthly">
<MTArchiveList archive_type="Monthly" lastn="1">
<link rel='archives' title='<$mt:ArchiveTitle$>' href='<$mt:ArchiveLink$>' />
</MTArchiveList>
</mt:IfArchiveTypeEnabled>

しかしながら、スタティックパブリッシングでは各記事において再構築されるまでは、その時点のアーカイブリストとなる問題（＊これは正確には、常に最新のアーカイブリストで表示したいとう、運用上の都合での問題です）もあります。

そこで、PHP環境前提になりますが、以下のようにしてみました。＊MTArchiveTitleを使わないので、出力が月別アーカイブのタイトルの書式に揃わないことがあります。

<?php
echo "<mtentries lastn=1>";
$latest_year=<$MTEntryDate format=%Y$>;
$latest_month="<$MTEntryDate format=%m$>";
echo "<link rel='archives' title='".$latest_year."年 ".$latest_month."月' href='<$MTBlogURL$>".$latest_year."/".$latest_month."/' />\n";
echo "</mtentries>";
?>

再構築をおこなった月に最低１つは記事がある、という場合は「MTDate」を使うという手もあるのでないでしょうか。（MTEntriesタグを使わなくてよくなるなど）

で、実装後の使いどころですが

にあるように、link要素表示のところに、rel='archives'の場合を追記することで、ナビゲーションにアーカイブが反映されたりします。

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>

今月のいらんことしい(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のみでおこないました。以上です。

タグのXMLファイルからタグリストを表示する

jQueryを使いタグの情報のはいったXMLファイルを読み込んでAjaxなタグリストを表示してみます

ということで、この前の続きになります。

さっと要点だけ申し上げますと、Movable Typeのタグまわりのテンプレートタグを利用して、タグの情報のはいったXMLファイルを作成する、というところまでをやりました。

このファイルを活用して何かしようということで(ご想像のとおりで)、jQueryを使ってAjaxなタグ一覧のようなものを作ってみました。

jQueryによるXMLファイルの読み込み

前回作成したファイル名を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の数値を先に示したコードより長めにしてますが、サーヴァの状況により読み込みに時間がかかり失敗しているようならば、時間をおいてから読み込んでみてください。

Index of all entries

Home > MTカスタマイズ Archive

Categories
Search

Powered by 暴想 & Dakiny&Digiclo

Feeds
Elsewhere

Action Streams

logo

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

TypePad AntiSpam

Return to page top