RSSのインポートという機能。
実は簡単に実装できます。
Takumaです。
【Google AJAX Feed API】
AJAX Feed API を使用すると、JavaScript だけを使用して、公開されている Atom フィードや RSS フィードをダウンロードできるので、自分のコンテンツや Google Maps API などの他の API に、フィードを簡単にマッシュアップできます。 (by オフィシャルサイト)
takumaの運用しているサイト。
(1)静的なファイルとFlashで構成された[takumart.net]
(2)wordpressで動的生成しているブログ[takumaの「デザインはあれでアートはそれで」]
の大きく分けて二つの要素で出来上がっています。
この場合。更新やRSSの自動生成に関してはwordpressが楽ですしSEO的にもよろしいので、日常の情報発信は(2)ブログにて行っています。
しかし、(1)の静的なサイト箇所に動的に「RSS情報」を掲載したい。
そんなときには、いままでFlash等でできたブログパーツなどを入れないとだめでした。
が・・・
「Google Ajax Feeds API」がその悩みを解消してくれました。
■概要：「Google AJAX Feed API」とはなんぞや？■■■■■■■
下記のオフィシャルサイトに記載されているとおり、
▼Google AJAX Feed API▼
http://code.google.com/intl/ja/apis/ajaxfeeds/
JavaScriptベースでAtom フィードや RSS フィードのインポート表示を可能にするAPIです。
wordpressのプラグインやシステムの組み込まれている動的環境以外でもjavaScriptが動作する環境なら基本動作するという環境シームレス/導入障壁の低さがポイントだと思います。
また、GoogleのAPIなのでマッシュアップに対しても親和性のある構成になっているようです。では、上記のようなtakumart.netの事例の導入行程については下記で順序をおってメモしていきます。
■Step.1：基本要素を導入してみよう■■■■■■■■■■■■■
▼Google AJAX Feed API▼
http://code.google.com/intl/ja/apis/ajaxfeeds/
GoogleアカウントでGoogleにログインした状態で上記URLにアクセス。
そして、手順に従いAPIのKeyを取得します。これは、サイトURLに対して発行されるキーですので、アカウントが一つでもサイトの個数分発行することができます。
APIのKey発行時に必要要素が記載されたHTMLコードも発行されます。
この状態では、基本的なCSS指定がGoogle側から指定されており(※ソース内に未記述)、JjavaScript要素も直接記述されており、外部化されておりません。
自分の指定するRSS情報を読ませるためには、生成されたHTMLコードに以下の手を加えます。
「var feed = new google.feeds.Feed(“http://www.digg.com/rss/index.xml”);」の記載されている行のうち、RSSの指定URLを自分の読ませたいRSSのURLに書き直す。
インポートする記事数を変える場合は「feed.setNumEntries(5);」の数字を変えてみましょう。
あとは、上記のコードを記載してHTMLをブラウザで閲覧すれば稼働するはずです。
■Step.2：複数のRSSをインポートしよう ■■■■■■■■■■■
マッシュアップに対してオープンなGoogleのAPI。
上記の基本コードでは一つのフィードに対してしか対応していませんが、複数のフィードを集約することが可能です。
▼JavaScript/Google AJAX Feed APIを使ってみよう 複数RSSを表示させる（参考サイト）▼
FeedControlというクラスを利用した、タイプだそうです。
日本語でコメントも表記されているので分かりやすいですね。
■Step.3：javaScript要素を外部化しよう■■■■■■■■■■■
SEOに対する配慮と複数ページでソースを利用する為には、javaScriptの外部化は必要です。ということで、ソースを分割して「HTMLファイル」と「jsファイル」にします。
▼JavaScript: 外部RSS読み込み（参考サイト）▼
「Step.2」のマッシュアップをした場合には参考サイトのソースと違いますが、シンプルなソースなので、簡単に分解できると思います。
■Step.4：CSS要素を外部化＆カスタマイズしよう■■■■■■■
これらのカスタマイズが完了したら、CSSベースの見た目の改善をしましょう。
RSSのインポート情報はGoogle側でもっているので、HTMLソース上に表示されるわけではありません。(PHP等のように動的にタグ類を生成しているものではないので。)
クラスが記載されていないのに、どうやってカスタマイズするの？と思うかもしれませんが、実はGoogle側が見えないところで指定しているのです。
▼スタイルの設定 – 複数フィードの取得 – Google AJAX Feed API入門（参考サイト）▼
DIVで生成されているブロック要素の構成内容と、クラス指定が分かりやすく記載されています。加えてデフォルトでGoogle側が指定しているCSS情報も載っています。
カスタマイズしたいCSS情報を自分で再指定すれば反映されますので、外部CSS化も一緒にすれば、一石二鳥ですね。
■まとめ■■■■■■■■■■■■■■■■■■■■■■■■■
これを実装したのが、Takumart.netのトップページです。
▼takumart.net▼
http://www.takumart.net/
・takumart.netの新着情報(※ブログのRSS)
・TakumaのTwitter(※TwitterのRSS)
・Takumaのブックマーク(※はてなブックマークのRSS)
を読み込んで、表示しています。ソース上これらのRSS情報は生成されてないのでクローラーからしたら、SEO関連に効果があるかはいささか疑問ですが、マッシュアップして様々なAPIとの連携も可能なので、拡張性と汎用性を考えるといいのではないでしょうか。
実際に被リンクを集めて表示するソースコードを紹介しているサイトさんもあります。
▼Trackbackをやめて、Google AJAX Feed APIを使って被リンクを表示（参考サイト）▼
いやー。便利な時代になったもんだ。
■P.S:今日の気になったサイト■■■■■■■■■■■■■■■■
▼にっぽんと遊ぼう▼
http://www.nippontoasobo.jp/
●んで、一言
京都の魅力の掘り起こしを目的としたサイトだそうです。
フルFlashのサイトらしく、インタラクティブかつナビゲーションに連動した様々なオブジェクトの動きが滑らかで心地いです。
写真のクオリティもさることながら、サイト内での空間と世界観の表現。
くわえて、デザインパーツとしての日本の感じがとても魅力的に活用されています。
和モダンのサイトとして非常にカッコイイサイトです。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
