2010年3月 Archive

Movable Typeのmt.jsファイルに追記することで、イベント表示のようなものを表示するカスタマイズを考えました。

この時期でイベントというと、「エイプリルフール」でしょうね。

でもちょっと大がかりな（謎）ものを思いついても、時間ねーとかなるし、MTなんかは場合によってはテンプレートに再構築が必要にもなってきてちょっと手間だったり。

こんなときmt.jsファイルに少しコードを追加してみたらどうよ、というのを思いつきました。ネタなので思いつきだけで終わってもいいんですがとりあえずやってみました。

だいたいこのような感じです。中身だとか時間の取得とかはてきとうです。getElementByIdでも任意なところに追加してもいいかも。実行されるとページの上のほうに何か表示されるということになってます。

<mt:IfBlog>
function event(){
    var today = new Date();
    var month = today.getMonth();
    var day = today.getDay();

    if (month==3 || day == 1 ){
        var mybody = document.getElementsByTagName("body")[0];
      if(mybody){
        var message = document.createElement("div");
        var atr= document.createAttribute("id");
        atr.nodeValue= "event";
        message.setAttributeNode(atr);
        var htm='<span class="event" style="position: absolute;top:0;left:0;margin:0 3px;width: 90%;">message here.</span>';

        mybody.appendChild(message);
        message.innerHTML=(htm);
       }
    }
}

window.onload = function() {
event();
}

</mt:IfBlog>

feedをパースするjQueryのプラグインを使ってこのブログのフィードを読み込んでみました。

以下が提供もとのサイトです。Windowsで試すにtar.gzが展開できるアプリケーションがいるかもです。ローカルで試すのにローカルサーヴァの環境が必要かと

• jFeed: JavaScript jQuery RSS/ATOM feed parser plugin - jf-hovinne.blog

1. jQueryとjFeedを読み込む

展開後のexample.htmlなんかがシンプルなサンプルかと。お決まりな感じですが、先にjQuery（同梱されてます）とjfeed.jsか、jfeed.pack.jsを読み込んでおきます

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jfeed.pack.js"></script>

2. ちょっとパースさせてみる

今回はブログのAtomフィードをつかうってことで置き換えてみます。

サンプルと一緒ですが、

jQuery.getFeed({ url: 'atom.xml', success: function(feed) {
           alert(feed.title);
       }
});

でフィードのタイトル（要素の中身）がアラートとなります。

3. フィードの読み込み

jFeed関係であれこれみていると、.getFeed()のsuccess:のところに関数をあてて別途関数を用意するといった書き方をされてるようなんでそれに倣ってみます。

$(function() { jQuery.getFeed ({ 
url: 'blog/atom.xml',
      success: readFeed
   })
});

url: の箇所に読み込むフィードのURLをいれます。

としたうえでreadFeed(){}を用意すると。

要素を得るには、先頭にfeedのつくプロパティと、先頭にentryのつくプロパティとがあり、エントリタイトルを得るには、entry.titleというように、コードをみれば直感的にわかるようになってます。

4. Authorだとかcategoryもパースしたい

サンプルとかみてるとカテゴリとかAuthorなんかを拾ってないようなので追加してみました。

jquery.jfeed.jsを以下のようにカスタマイズしてみました。（実のところ、Atomしか読まないのであればsrcフォルダにjatom.jsといったファイルが用意されていたりします）

item/ JFeedItem.prototype = というところに、

    // ↑　省略　↑
    id: '',
    author: '',
    category: ''
}

という具合に取り込みたい要素を追記します。

そうしたら今度はJAtom.prototype = の

jQuery('entry', xml).each( function() {
のところで、

item.author = jQuery(this).find('name').eq(0).text();           
item.category = jQuery(this).find('category').eq(0).attr('term');

上記のコードを似たような（というか真似ただけですが）記述のとこに追記して上書保存します。

categoryは、category/@term の値を読んでますが、正確には（MTのフィードでは）category[@schem="category"]を持つ要素のterm属性の値をもってこないといけないんだと思います（jQueryのセレクタの書き方をいまいち理解してませんorz）。

まあカテゴリ未設定なんてことは殆どないのでこんなんでもいいかなといったところです。

5. 一応完成品

• Test :: jFeed - jQuery feed parser plugin - atom feed

以上です。

MTEntriesで最初のN件とそれ以降のM件との処理の分岐の方法を試してみました。

タイトルと冒頭の記述のとおりですが、よく記事の最初だけ「全文表示」でそれ以降は「概要」を表示するといったカスタマイズがあります。

これを実装するに、offsetモディファイアを利用して除外する件数を指定して処理する方法があります。以下にサンプルを示します。

例えば、ブログ全体で記事が5件あり、最初の2件は記事本文（entrybody）を表示し、それ以降の3件については、記事概要（entryexcerpt）を表示する、といった処理をおこないたいとしましょう。（＃たまたま自分のテスト環境が記事5件分しかなかったりするのでそうなっただけですが）それを、最初のほうで2件分のエントリを取り出し記事本文を表示。2回目のEntriesのループでは、先頭２つをoffsetにより除外、そのうち3件分を出力するコードが以下となります。

カウントの部分は趣味でいれてるので無視してくださってかまいません。マークアップはいい加減なものなのでそのまますぐ使えるというものでもないです。

<mt:entries lastn="2">
<div style="background:none #eee; border:1px padding:3em;">
<h2><mt:var name="__counter__" /></h2>
<h3><$mt:entrytitle$></h3>
<$mt:entrybody$>
</div>
</mt:entries>
<mt:entries lasn="3" offset="2">
<mt:setvar name="count" value="3" op="++">
<div>
<h2><mt:var name="count"></h2>
<h3><$mt:entrytitle$></h3>
<$mt:entryexcerpt$>
</div>
</mt:entries>

MT4以降でしたかちょっとヴァージョンが定かでないんですが、ループ処理に__counter__とかいった変数がセットされています。

この変数をMTIfを使い、最初2件までentrybodyでそれ以降はentryexcerptにしてみます。

<mt:entries lastn="5">
<mt:if name="__counter__" le="2">
<div style="background:none #eee; border:1px padding:3em;">
<h2><mt:var name="__counter__" /></h2>
<h3><$mt:entrytitle$></h3>
<div><$mt:entrybody$></div>
</div>
<mt:Else>
<div>
<h2><mt:var name="__counter__" /></h2>
<h3><$mt:entrytitle$></h3>
<p><$mt:entryexcerpt$></p>
</div>
</mt:if>
</mt:entries>

le="2"で、__counter__が2以下ならば、entrybody、そうでなければ、excerptといった感じです。サンプルではわざわざ__counter__の値も表示させてるますから、エントリ数とカウントの数値を確かめてみることができるかと。

MTIf/MTElseのタグがある分、先に示したコードのほうがすっきりしているように感じますが、1つのループ処理で完結してるところが違う点というか、そんなところです。以上です。

どうでもいい話とか

たまにMTIfとはなんぞ？みたいな検索でこられるかたもいらっしゃるようなので、おさらいといいましょうか、勉強を兼ねて試してみました。

最近はローカルで簡単なサンプルのテンプレートを作るときはダイナミックパブリッシングで作成して確認することが多くなってるなあとかなんとか。ファイルがやたら生成されてきては削除してくのもなんだし。。

このサイトの利用サーバ（CORESERVER）のサーバの移動作業を完了しました。

maRkのMyOwn（maRkdiary.com）はCORESEVERを利用しております。今年に入り、サーバの重い状態が続いていましたので、この度サーバの移動を実施いたしました。

この記事は移転先サーバで書いてますので、これが表示されていれば移動は完了しています。思っていたよりDNSの変更が早く完了しており、事前告知なしでの移動となりました。

以上です。

今月（2010年3月）、サイト内でカスタマイズをおこなった箇所を記録するエントリです。

今月のカスタマイズは以下のとおりです。

• AjaxJSON Search テンプレートで、JavaScript無効のときの処理を追加した
• mt-search.cgiへの対応
• ActionstreamsでDeliciousのフィード取得ができなかった点の対処

何回か改造してる、例の全文検索です（参考）。

もともとJavaScript有効の環境での動作が前提なので、特に気にすることもないとは思うのですがとりあえずです。JavaScript無効のときにYahoo!のカスタム検索のフォームがでるようにしてみました。（Ajax Searchを止めにして全部コレでもいい気はするんですが）

mt-search.cgiについては、AjaxJSON Search採用後はほとんど（というか全く）使われていません。とはいえmt-search.cgiにはアクセスは可能（クエリ文字有りでもパラメタなしのmt-search.cgiでも）で、検索結果のテンプレートが反映されます。

この扱いをどうするかですが、1つには、なかったことにしてしまう方法と、2つには代替のテンプレートで誤魔化しておく方法と大きくわけて2つあると思います。

今回は替わりのテンプレートを使うということで対応しました。具体的にはMovable Typeの検索結果のテンプレートで、Yahoo!検索のフォームを採用しました。サイト上にmt-search.cgiのフォームが用意されてない以上はほとんど使われることはないので、こんな程度でいいのでないかと。

ActionstreamsプラグインのDeliciousの件ですが、

feeds.delicious.com....の更新に失敗しました。
999 Unable to process request at this time -- error 999

といったエラーがログに残っており、実際にfeedの内容も取得できないことが続いていました。

この件の情報が少なく、Deliciousのフォーラムで以下がヒットしましたが、原因および対処についてはよくわかりませんでした。

• delicious support forum - Error 999 - My delicious link roll via RSS

仕方ないので、一旦PipesにDeliciousのフィードを取り込んで、Pipesが出力するフィードを読むようにプラグインのYAMLファイルを書き換えました。ただし、PipesにおいてError 999がでるというような情報も見つかったので、この方法も一時的な回避策に過ぎないでしょう。

今月のカスタマイズは以上です。

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

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

今回は、Movable Typeのカスタムフィールドで、フラグメント識別子を入れたものを利用して、ページ内のリストメニューとして出力させる方法のメモです。

MTでフラグメントをあつかう方法はいろいろとあるのですが、以前からカスタムフィールドを利用して何かできないものか考えていましたので試してみることにしました。

設定の流れとしては以下のとおりです。

• ブログ記事用として識別子を入力するカスタムフィールドを作る
• 値には区切り文字をいれて区切っておくようにする
• 区切り文字から内容を解析してテンプレートタグを使いリストを生成する

といった具合です。で、カスタムフィールドの作成はこの際端折ってしまうとして、問題は区切り文字をどう解釈させるかにあります。

ちょうどよさそうなプラグインが見つかりましたので、今回利用させていただくことにしました。以下に解説が記載されています。

• ファンクションタグの内容を区切って配列に格納する SetArray プラグイン | Blog | weeeblog+

以下のテンプレートタグによるコードは、カスタムフィールド(mt:cf_fragment)を作成して、エントリページのカスタムフィールドにsection_01,section_02,section_03のような入力があった場合に、a href="#section_01" のようなリンクを出力します。

<mt:if tag="cf_fragment">
<$mt:setarray tag="cf_fragment" name="frag" sep=","$>
<ul>
<mtloop name="frag">
 <li><a href="#<$mt:Var name="__value__"$>">section<$mt:var name="__counter__"$></a></li>
</mtloop>
</ul>
</mt:if>