JSONフィードを使って新着情報を表示する
Typepadで「JSONフィード」なる言葉を見かけました。
Six Apart - TypePad inside: JSONフィードを使って、ブログのまとめページをつくろう
RSSのようにブログが更新されると自動的に更新され、かつ他のHTMLページにJavascriptで読み込めるものらしいのです。
以前Topページの更新情報をブログと連動させましたで紹介した方法はphpでないとできないですが(多分)、これを使えばどんなHTMLの中にも(MovableTypeの外にあるサイトのトップページにも)MovableTypeに書いた記事の更新情報が入れられます。
というわけで、MovableType用のJSONフィードを掲載していらっさるサイトを見つけました〜〜。あんちもん2.Lab: JSON Feed のススメ
これを使って早速、phpで入れていた「更新情報」をJavascriptで入れてみました。
まず、先にご紹介した記事の手順通りに、新着情報を取得するブログでテンプレートの新規作成をし、JSONフィードを設置します。うちのJSONフィードはこんな感じになっています。
でもって次に、これを表示するためのJavascriptが必要です。ありがたいことにJavascriptがよくわからない私のような人間のために、先のページの「デフォルト・ファンクションを利用する」に具体的な例が載っています。…このソースをそのまま使えばよい(笑)新着情報を表示したいHTMLにこのソースを挿入します。
あ、あんちもん2.Lab: JSON Feed のススメに書いてある通り、TypePadJsonCallbackはMovableTypeJsonCallbackに、JavascriptのURLは自分のブログのfeed.jsへのURLに置き換えるのをお忘れなく。
私はちなみにファンクションの部分は別ファイル(テンプレート)にしました。まあ、気分的な問題ですが。
新着情報を入れるブログに「新規テンプレート」を作成。ファイル名「feed.js出力用」出力ファイル名「headline.js」とでもして、
「function MovableTypeJsonCallback(data) 」から「content.appendChild(mydiv);}」までをコピペし保存します。
でもって新着情報を入れたいテンプレートの中の任意の場所に以下を挿入。
<script type="text/javascript" src="<$MTBlogURL$>headline.js"></script>
<div id="matome"></div>
<script type="text/javascript" src="(feed.jsまでのパス)"></script>
【追記】なぜか時刻が9時間ずれるなあ、と思っていたら、どうやらfeed.jsの中の
<$MTEntryDate utc="1" format="%Y-%m-%dT%H:%M:%SZ"$>
<$MTEntryModifiedDate utc="1" format="%Y-%m-%dT%H:%M:%SZ"$>
このタイムゾーンの設定らしい…。やっていいのかどうかわかりませんが、とりあえず
<$MTEntryDate format="%Y-%m-%dT%H:%M:%S"$>
<$MTEntryModifiedDate format="%Y-%m-%dT%H:%M:%S"$>
にしてみたら日本時間に合いました(^^;
ここからは見栄え調整です。
インデックステンプレートを再構築すると、目的の場所に15件の新着情報がズラズラと出てくると思います。15件なんて多すぎる!という場合は、feed.jsの<MTEntries lastn="15">の数字を適当なものに書き換えます。
この部分は
<div id="matome">
<h3>ブログタイトル(私は「更新情報|トピックス」にこの部分書き換えています)</h3>
<h4>記事タイトル</h4>
<p>概要</p>
</div>
という構造になっているので、スタイルシートで見栄えの設定を行います。
#matome{ }
#matome h3{ }
#matome h4{ }
#matome p{ }
という感じ。ブラウザによって余白の考え方が違うので、各ブロック要素にmargin: 0; padding :0をあらかじめ入れておき、ブラウザでの見え方を確認しながら、調整した方がいいかもしれませんです。