Ajax: 2008年4月アーカイブ

サイトを作るにあたって困っちゃうのが、コンテンツが少ないことじゃないだろうか。
テーマは決まっていて、メインコンテンツもステキなイメージが沸いている。でもサイト全体を俯瞰してみるとなんか寂しい。

そんなときにニュースコンテンツというのは、どんなコンテンツとも親和性が高く、かつ、需要も見込まれやすい、アイデアベースだとお手軽なコンテンツだと思う。
というわけでGoogle Ajax Search APIの中にあるNews Barっていうのを使う手順を簡単にメモしておく。

参考:News Bar Programming Guide

①まず、API keyを取得します。利用規約をよく読もう。ポイントだけ筆者の意訳を記載。
--------------
The API may be used only for services that are accessible to your end users without charge.
--------------
→会員限定サイトとかで使っちゃダメよ、ということですね。
 有料だったとしても、無料の会員がアクセスできるコンテンツがあって、そこにAPIを使ったコンテンツがあればよい、ということだと筆者は解釈してます。

--------------
Google reserves the right to release subsequent versions of the API and to require You to obtain and use the most recent version.
--------------
→グーグルはAPIの仕様とか変えることがあるから、いきなり使えなくなるとかは覚悟しておいてね。ということだと思います。


--------------
you will not, and you will not permit your users or other third parties to: (a) modify or replace the text, images, or other content of the Google Search Results; or (b) modify, replace or otherwise disable the functioning of links to Google or third party websites provided in the Google Search Results.
--------------
→APIを使って得られた "結果に対して"(テキスト、画像などなど)修正を加えちゃいけませんよ。ということですね。レイアウトはOKでしょうが、表示順位の変更はダメな気がします。


--------------
You will not, and will not permit your end users or other third parties to:
・incorporate Google Search Results as the primary content on your website or page;
--------------
→検索結果をサイトのメインコンテンツにしちゃダメ

--------------
・hide or mask from Google the identity of your service as it uses the API, including by failing to follow the identification conventions listed in the API documentation;
--------------
→グーグルのサービスを使っているってことを隠しちゃダメ。検索結果にでてくる「powered by google」を消す、とかが具体的なことだと思われ。
 ※"identification conventions listed in the API documentation"がよく分からなかった。。。誰か教えてください。

・・・あとは一般常識的な法律に触れちゃだめとか人を傷つけちゃだめ、とか常識人だったら問題ないと思われる内容がズラズラと書いてある。

②以下のタグを<head>内に貼り付ける

<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=YOUR-KEY" type="text/javascript"></script>
<link href="http://www.google.com/uds/css/gsearch.css" rel="stylesheet" type="text/css"/>
<script src="http://www.google.com/uds/solutions/newsbar/gsnewsbar.js" type="text/javascript"></script>
<link href="http://www.google.com/uds/solutions/newsbar/gsnewsbar.css" rel="stylesheet" type="text/css"/>

YOUR-KEYを①で取得したAPIキーに書き換える。

③以下のタグを表示したい部分に貼り付ける

<div id="newsBar" class="newsBar">Loading...</div>

Loading...は、APIがデータを返すまでに表示される文言。

④以下の実行ロジックを貼り付ける

<script type="text/javascript">
/**
* LoadNewsBar: Called when page loads
*
* Create a manually switched News Bar
* and place it in "newsBarTop"
*/
function LoadNewsBar() {
var root = document.getElementById("newsBarTop");
var options = {
largeResultSet : false,
resultStyle : GSnewsBar.RESULT_STYLE_EXPANDED,
title : "Nintendo in the news",
autoExecuteList : {
executeList : [ "Nintendo", "Nintendo DS", "Nintendo Wii" ]
}
};
var newsBar = new GSnewsBar(root, options);
}

/**
* Arrange for LoadNewsBar to run once the page loads.
*/
GSearch.setOnLoadCallback(LoadNewsBar);
</script>


========
executeList : [ "Nintendo", "Nintendo DS", "Nintendo Wii" ]
========
この部分を検索したいニュースのキーワードに書き換える。日本語をそのまま書いても行けた。
※筆者のHTMLのエンコーディングはutf-8だった

終わり。これで終わり。いや、まじあっという間に終わった。
コード組むのに5分。規約読むのに30分って感じ。

※このブログの全部の内容についてそうなんですが、特に利用規約のことは、筆者は責任を負えません。at your own risk(自己責任)で参考にしてください
※ちなみに2008年4月24日現在 Google AJAX Search API はFirefox 1.5+, IE 6, and Safari, and Opera 9+. をサポートしているとのこと。

次はカスタマイズについて調べようと思ってます。


このアーカイブについて

このページには、2008年4月以降に書かれたブログ記事のうちAjaxカテゴリに属しているものが含まれています。

次のアーカイブはAjax: 2009年1月です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。