Home > Internet > Movabletype > prototype.js を使って、最新記事を表示

prototype.js を使って、最新記事を表示

Posted by: oscar
2006-09-25 (月) 16:21
MovableType
Javascript, JSON, Movable Type, Templates
delicious count
hatebu user
prototype.js を使って、最新記事を表示

最近ちょっとだけ、ここを見に来て下さる方が、いるのが解ってうれしい oscarです。

あまり無理せずに自分の理解できる範囲のネタをちょっとずつやっていきたいと思います。
ということで、相変わらずの二番煎じネタです。

以前に、MovableTypeの個別記事ページに最新記事を表示するjavascriptを書いたのだけれど、それを Prototype.js をちゃんと使うように書き直した。script.aculo.usのアニメーションを追加したり、色々と遊んでいると、複数のJavascriptを混在して読み込むようになってき気持ちが悪いので。

[Prototype.js を使って、MovableTypeで最新記事を表示する：Goodpic:2006/09/25 14:57:50]

Ajaxとか、prototypeとかいう言葉に、異常に弱い私ですので、さっそく試してみました。
実はサイト内検索と、並行して手を染めてたんですが。

こうやって色々試しているうちに、少しずつ約束事とかが解ってきます。
JSON(なんかこの字を頭の中で発音すると、チェーンソーの音がするんですが、気のせいですか？)っていうのがなんとなく解ってきたのも、最近色々試してみているおかげです。
多分 TryntのAPI も XML > JSON > JSインクルードってやれば、解決するんじゃないのかな、bzbellさん。

基本的な部分はオリジナルサイトを参照ください。
一部のテンプレートを修正しているだけなので、全体の流れは一緒です。

prototypeとscript.aculo.usは、何度も言ってるように「?load=effects」で、すでに組み込み済みです。
後は新規インデックステンプレートで、カテゴリー毎の最新記事が含まれたJSONデータを作成するのと、エントリーテンプレート上でデータを表示する為のWidgetを作成するだけです。

今回は普通にテンプレートで書き出しと、Javascriptインクルードなので、文字コードうんぬんはありません。基本的にそのままでも構わないと思います。
私もほぼそのままなのですが、文字数を変更したかった（TrimX2Yプラグイン）のと、HTMLタグやプラグインで置換されるための変則の文字（doSearchプラグインの[ｇ：xx]など）を除去するために、若干の修正をしました。

<MTEntries lastn='5'>{"title" : "<$MTEntryTitle encode_js="1"$>","url" : "<$MTEntryPermalink$>", "excerpt" : "<$MTEntryExcerpt encode_js="1"$>"}<MTEntriesFooter> <MTElse>, </MTElse> </MTEntriesFooter></MTEntries>

の部分を

<MTEntries lastn='5'>{"title" : "<$MTEntryTitle encode_js="1"$>","url" : "<$MTEntryPermalink$>", "excerpt" : "<$MTEntryBody dosearch="1" remove_html="1" trimx2y="-50" encode_js="1"$>"}<MTEntriesFooter> <MTElse>, </MTElse> </MTEntriesFooter></MTEntries>

にしてます。
この部分はそれぞれのブログの事情（プラグインなどの使用状況）によると思いますので、各自で判断をお願いします。

データを表示する部分のテンプレートには、気になる部分が２個所ほどあったので変更してます。

オリジナルのテンプレートでは「recent.js」を読み込んだ後に、カテゴリーidを「cat_id」にセットするようになっています。
しかし「recent.js」内で「cat_id」が呼び出されるようになっているため、エラーが発生しています。
その為、両者の順番を逆にしています。

また、エントリーのカテゴリーを「cat_id」に入れる部分で、

var cat_id = [<MTEntryCategories><$MTCategoryID$>,</MTEntryCategories>0];

というように、カテゴリーidの後ろにカンマを付けて、最後に0を足しています。
id が 0 になる場合というのは、カテゴリーに属さないエントリーでのケースを想定しているのかも知れないですが、ここは素直にカテゴリーidを「glue」属性で並べて、カテゴリーに属さないエントリーは読み込まないようにした方が、すっきりするのでは無いかと思いました。

以上を踏まえて、表示部分の Widget は以下のようになりました。

<MTIfNonEmpty tag="MTEntryCategory"><div class="module-archives module">  <h2 class="module-header">カテゴリー内の最新エントリー</h2>  <div class="module-content">    <ul class="module-list"><div id="goodpic_new_entries"></div><script type="text/javascript" language="javascript"><!--var cat_id = [<MTEntryCategories glue=","><$MTCategoryID$></MTEntryCategories>];//--></script><script src="<MTBlogURL>archives/recent_entries.js" type="text/javascript" language="javascript"></script>      </ul>   </div></div></MTIfNonEmpty>

ちなみに「recent_entries.js」というのが、このサイトでの最新エントリーデータになります。

取りあえず付けてみただけですが、割と簡単にエフェクトの変更とか出来そうなので、色々いじり倒してみたいと思います。
もう、script.aculo.usのエフェクト、簡単でオモシロ過ぎです！