« ANIMAX-バイファム10話・11話 | メイン | ANIMAX-バイファム12話 »

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をあらかじめ入れておき、ブラウザでの見え方を確認しながら、調整した方がいいかもしれませんです。

グッジョブだったらポチッと→

トラックバック

この一覧は、次のエントリーを参照しています: JSONフィードを使って新着情報を表示する:

» JSONフィードで更新情報掲載 from INSTINCのおもちゃ箱
instincトップページに更新情報なるものを載せるにあたって、とってもラクチン... [詳しくはこちら]

コメントを投稿

月別アーカイブ

2017年
2016年
2013年
2012年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
           

Blogのフィードを取得

Powered by
Movable Type 6.3.3