Ajaxの最近のブログ記事

という経験はないですか?

1回目にはまった挙句、なーんだ、こういう理由か、と思ったのに2回目はまって原因が思い出せなかったのできっと3回目にはまるであろう未来の自分へメモ。
最近忙しい。ので、雑にメモ。

これからはドラッグアンドドロップが流行る。もう流行っているかもしれないけど。
だからドラッグアンドドロップを組んでみたのでそのメモ。

これから初めて組むぞー、という人は、もっと親切な説明サイトがたくさんあるのでそちらを見たほうがいいですよ。
このエントリーが役立つのは僕と、僕と同じ状況に陥ったごくわずかな一部の人です。

会員登録とかに代表される入力項目がたくさんある入力フォームを見ると、パソコンの、ワードの、キーボードのプロであるところの僕ですらうんざりする。一言でいうと苦行。
たくさん入力したすえに登録ボタンを押したら「〇〇が間違ってます」とか言われると悲しくなる。もっと早く言えよ、と思う。
ということで、できるだけ入力フォームの苦行を和らげる工夫を調べたり、考えたりしたのでメモ。


前回の勢いで、今度は分割に挑戦してみることにした。

評価のやつ(スターレイティングが一般的な名前?)が実装したかったのでjQuery Star Ratingを設置してみた。
これが、評価は高い割りにドキュメントがあまりなくて苦労したので、その記録を残す。
たぶん、こんなの設置するのなんてドキュメント要らずだろ?って話なんだろうけど。
普通にZend Frameworkを使っていて、非同期通信をしてXMLでデータを返却するとなると
・Controllerの自動レンダリングを止めて
・レスポンスヘッダをXML形式にする
という手順が必要。

たぶん間違いないと思うんだけど、jCarouselってスクロールのためのボタンは自動生成のみで、任意のところには置けない仕様になってる。

CSSである程度はカスタマイズできるものの、タグ構成としては位置が決まってしまっているのでどうにもならないケースもでてくると思われる。というか、でてきた。

こうなったら、jCarousel自体をいじるしかない。
jCarouselLiteがverticalだとIE7で表示崩れがおきてしまい、追っかける気力が
なかったのでjCarouselを使うことにした。

やっぱLiteに比べて手順が多いのでメモ。


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

そんなときにニュースコンテンツというのは、どんなコンテンツとも親和性が高く、かつ、需要も見込まれやすい、アイデアベースだとお手軽なコンテンツだと思う。
というわけで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+. をサポートしているとのこと。

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


このアーカイブについて

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

次のカテゴリはDBです。

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