WEBマーケティングブログ: Ajax

サクサク気持ちいいシンプルな複数RSSまとめブログパーツ「escaloop」

Tue, 08 Apr 2008 01:03:52 +0900

　Ajaxで複数RSSをサクサク表示してくれる「escaloop」。GoogleのサービスにもGoogle AJAX Feed APIがありますが、排出されるコードが思わしくないのが難点。複数RSSをまとめてくれるブログパーツもありますが、総合的に見ると「escaloop」が今のところ一番かも。

]]> シンプルな複数RSSまとめブログパーツ「escaloop」

　Ajaxローダー特有の「グルグル」で読み込み始めてくれて、気持ち良さも感じます。余計な装飾がないのでサイトに融合しやすいのも肝かも。

「escaloop」で利用可能なサービス

　下記サービスのRSSを読み込めるようです。

del.icio.us
Flickr
Google
Google Reader
LastFM
Livejournal
Magnolia
Pownce
StumbleUpon
Tumblr
Twitter
Vox

escaloop スタートアップガイド

　以前にどなたかのブログでリクエストがあったので英語が苦手な方向けに、ちょっと雑ですがガイドします。

escaloop. ☆ Badge Builderのページを開く
「— I want to build a (new) badge!」をクリックすると↓のように開くのでRSSをコピペしていく
「Styling settings」の欄で各種項目を設定

List style
CSSに自信がある方はセッティングしてみては？下の方にデフォルトのCSSを記載しておきます。

Number of bullets
表示させる記事数を10~全部まで選択できます

Grouping
たとえばFlickrならFlickrだけをまとめて表示し、その次にTumblrのみを表示するといったような設定

List of sources
↑の表示でも反映させているように、一番下に読み込んでいるRSSの元サイトへのリンクを表示する設定
「Save Your Setting」ボタンを押して保存
「Here's a preview of your badge (will open in a new window).」をクリックすると新しいタブでプレビューできます
↓ここに表示されるコードは、次回以降同じ設定を呼び出すための「escaloop ID」です
上段のHTMLをブログパーツを表示させたい場所にコピペし、下段のコードを内またはタグの直前にコピペします（ブログの場合は記事の一番下でもOK。）
設置完了

デフォルトのCSS

排出されるコード中にある、の部分で下記CSSをカスタマイズしたファイルの保存先を指定すればデザインをいじれるようです。

/*
    escaloop badge: default.css
    $Id: default.css 341 2008-02-07 09:16:55Z carlo_carlo $
*/

#escaloopList { 
	list-style-type: none; 
	padding-left: 0px; 
	margin-left: 0px; 
}

#escaloopList LI { 
	list-style-type: none; 
	font-size: 10pt; 
	padding-left: 10px; 
	line-height: 125%; 
}

#escaloopList LI.lst_date { 
	margin: 10px 10px 20px -10px; 
	font-weight: bold; 
	font-size: 13pt; 
}

#escaloopList .item_date { color: gray; }

#escaloopList IMG { 
	border: 1px solid #999; 
	padding: 4px; 
	margin: 4px; 
}

#escaloopList LI.lst_source { 
	margin: 40px 10px 15px -10px; 
	font-weight: bold; 
	font-size: 13pt; 
}

#escaloopList .bullet_source { 
	background: url(http://escaloop.com/img/blog.png) left top no-repeat;
	padding-left: 25px;
	margin-bottom: 5px;
}

#escaloopList .bullet { 
	background: url(http://escaloop.com/img/blog.png) left top no-repeat;
	padding-left: 25px;
	margin-bottom: 20px;
}

#escaloopList .delicious { background: url(http://escaloop.com/img/delicious.png) left top no-repeat; }
#escaloopList .diggcom { background: url(http://escaloop.com/img/digg.png) left top no-repeat; }
#escaloopList .facebook { background: url(http://escaloop.com/img/facebook.png) left top no-repeat; }
#escaloopList .flickr { background: url(http://escaloop.com/img/flickr.png) left top no-repeat; }
#escaloopList .google { background: url(http://escaloop.com/img/google.png) left top no-repeat; }
#escaloopList .jaiku { background: url(http://escaloop.com/img/jaiku.png) left top no-repeat; }
#escaloopList .lastfm { background: url(http://escaloop.com/img/lastfm.png) left top no-repeat; }
#escaloopList .livejournal { background: url(http://escaloop.com/img/livejournal.png) left top no-repeat; }
#escaloopList .magnolia { background: url(http://escaloop.com/img/magnolia.png) left top no-repeat; }
#escaloopList .newsvinecom { background: url(http://escaloop.com/img/newsvine.png) left top no-repeat; }
#escaloopList .pownce { background: url(http://escaloop.com/img/pownce.png) left top no-repeat; }
#escaloopList .googlereader { background: url(http://escaloop.com/img/googlereader.png) left top no-repeat; }
#escaloopList .stumbleupon { background: url(http://escaloop.com/img/stumbleupon.png) left top no-repeat; }
#escaloopList .tumblr { background: url(http://escaloop.com/img/tumblr.png) left top no-repeat; }
#escaloopList .twitter { background: url(http://escaloop.com/img/twitter.png) left top no-repeat; }
#escaloopList .vimeocom { background: url(http://escaloop.com/img/vimeo.png) left top no-repeat; }
#escaloopList .vox { background: url(http://escaloop.com/img/vox.png) left top no-repeat; }

#escaloopContent DIV.lbe {
    text-align: right;
}

　たった4行のコードを追加するだけで複数RSSを表示できてしまうのはなかなか嬉しいですよね。興味のある方はescaloop. ☆ Dead-simple lifestream badges.へどうぞ。

Via：Dead-simple lifestream badges - escaloop - FeedMyApp

Webサイトコンテンツ増強テクニック―Webパーツ、RSS、Webサービスで手軽にパワーアップ: 価格：￥ 2,205; 平均評価：5.0; 納期：通常24時間以内に発送; Amazon で詳細を見る by WEB担当者専門書店

]]>

テクノラティタグ: RSS , ブログパーツ

「超情報整理」NASAのAjaxを駆使した新サイト「NASA 5.0」使用Ajaxまとめ付

Mon, 03 Dec 2007 07:00:12 +0900

NASA設立50周年を期に先日リニューアルされたNASAのオフィシャルサイト「NASA5.0」、随所でAjaxを使った情報整理がなされていたので使用されているAjaxと共にご紹介します。

]]> NASAの新オフィシャルサイト「NASA.GOV 5.0」

↑NASAといえば、Googleに情報を提供するほど膨大な量の情報を持っているわけですから、情報整理のノウハウが詰まっているはず。

NASA 5.0

↑これがNASA5.0のサイト。たまに「新しいタブ」ではなく「新しいウインドウ」でページが開くので、すべてが良いわけではないですが、参考になる部分はいろいろありそうです。

RSSフィード登録

↑フィード登録にも気を使った感を受けます。

ブクマボタン

↑ついに政府機関もSMO！？流行どころはしっかりと押えているようです。

ちなみにこのサイトで使われているのはPrototype JavaScript、Ajaxを使った主な特徴も公表されていました。

NASA 5.0で主に使用されているAjax

すべてがPrototype.jsを使っているわけではありませんが体系化してみました。

ドロップダウンツリー: faLog | CSS(とJS)でシンプルなドロップダウンメニュー - 2
アコーディオン: 横にスライドするきれいな動きのアコーディオンJavaScript*ホームページを作る人のネタ帳
タブメニュー: 『10のJavaScript、Ajaxタブメニュー』他、タブまとめ*ホームページを作る人のネタ帳
Ajaxカレンダー: フリーのCSS＆JavaScriptカレンダースクリプトいろいろ:phpspot開発日誌
タグクラウド: JavaScriptオンリーで動く高速サーチエンジン＆タグクラウド:phpspot開発日誌
コメント: MovableType：MovableTypeのコメントをAjaxで投稿する - Movable Type備忘録; WordPress：コメントを投稿した後も編集できる WordPress のプラグイン at orioa
ポップアップでない小窓: [J] ポップアップではない手法で小窓/ウィンドウを表現したい - Jamz (Tech)

決してすべての人が「使いやすい！」と思うわけでないと思いますが、良い意味でも悪い意味でも参考になるのではないでしょうか。

サイトの仕掛けについてもっと詳しく知りたい方はフラッシュ動画で説明してくれるNASA5.0プレビューサイトへどうぞ。

【Ajaxタブ活用例】買い物ユーザビリティが高いDNAアート販売サイト「dna11」

Sun, 11 Nov 2007 07:47:15 +0900

見た目のかっこよさや、ユーザビリティの改善を期待できることから人気のAjax タブ。サイトを見ていてなかなか買い物をしやすそうなサイトを見つけたので書き留めておきます。

]]> 買い物のステップをAjaxでサクサク進ませる「dna11」

シンプルなインテリアに最適なDNAアート、「dna11」は、そのDNAアートを販売しているサイトです。実際に操作を見たほうが分かりやすいので動画にしてみました。

dna11

↑商品のページで、ほとんどスクロールしないまま詳細項目を選択できるようにAjaxタブでうまくまとめられています。

Google AJAX Feed APIで簡単にブログRSS最新記事一覧を作る

Wed, 10 Oct 2007 07:37:57 +0900

3ステップで簡単にブログの最新記事一覧を作成できるツールがGoogle AJAX Feed APIから公開されていたので、早速試してみました。

]]> マウスオーバーで概要を表示

完成形のひとつが↓、簡単に出来るわりに、なかなか使えそうじゃないですか？

WEBマーケティングブログFeed Gadgetの表示サンプル

↑これがiGoogleで表示してみたサンプル。もしよかったら使ってみてください。作り方の概要はWEB担当者が仕事でiGoogleを効率よく使うための15のガジェット、15番の「自分専用のガジェットを作っちゃおう」が参考になりそうです。

より幅広い層の人が気軽に開発出来るような環境を作ることによって、自らのコンテンツを倍増させるGoogleの戦略、究極の差別化を図ることが出来ていますね。すばらしいと言うか恐ろしいというか、どちらにせよ成功へと向かっていることは間違いないようです。

AJAXタブを作る際の13のユーザビリティガイドライン

Wed, 19 Sep 2007 06:58:17 +0900

先日、ネタ元へのリンクを分かりづらいところに貼ってしまい、人気ブロガーの方に怒られてしまいました。。。以後気をつけます。

さて、気を取り直して今日はAJAXの普及などで益々多用されるようになった「タブ」を作る際に気をつけるべき、ユーザビリティのガイドラインをご紹介したいと思います。

]]> タブユーザビリティ、13のガイドライン

Ajaxタブは、違うコンテンツを表示するにもかかわらず、ページを先に読み込むため、ページが切り替わるストレスが少ないことから、さまざまなサイトに導入されています。

タブは同じ文脈内で一覧を作る代わりに使おう

異なるエリアへのナビゲーションに使ってはいけません。言われてみればなるほどと感じます。amazon.comは、過去にこの点で失敗をしてしまったそうです。

Yahoo! USA

iza

タブのタイトルはユーザーが内容を予測できるものにしよう

タブのタイトルが分かりづらいものだと、ユーザーを迷わせてしまいます、それでは本末転倒ですよね。

ユーザーは同時に複数タブの内容を理解する必要がない

もしユーザーが異なるタブの情報を比較する必要があるのならば、いくらAjaxタブといえどもユーザーの負担になります。むしろ同一ページに表示しておいたほうが良いでしょう。

タブはどことなく似ている自然なタイトルが良い

↓これは著者の例ですが、少なくともアメリカ人にはちょうど良く、国際的に考えると、”US”より"North America"または"Americas"と表記したほうが良いということです。

Yahoo! Finance

ターゲットユーザーに合わせた表記が必要ですね。

選択中のタブは強調されていること

選択されているタブは、他のタブよりも目立たない色にすることがベスト。少なくとも3つのタブがある場合にはうまく機能するようです。（2つの場合は必ずしもそうでなくとも分かるはず。）それ以外には、文字サイズの変更や太字、もしくは画像効果で前にあるようにみせるのもいいでしょう。

非選択のタブは、はっきり目に見えるようにしよう

非選択のタブを見やすくすることによって、読者に印象付けることができます。

Tesco.Direct

選択中のタブはコンテンツエリアにくっついていたほうが良い

選択タブとコンテンツエリアがくっついていることによって、今どれを見ているのか、視覚的に訴えることができます。↓

タブのラベルは短く、単純明快な言葉を使おう

通常ラベルは1~2語であることが望ましいようです。共通点の例として、マインドマップのノードタイトルのように直感的で、尚且つ誰にでも理解できるようなものがいいのでしょうね。

↓ちょっと長いですが。。。

英語表記なら最初の文字を大文字に

日本語では適応しませんが、これはMicrosoftやAppleのガイドラインでも表記されています。

タブは1列で

タブが複数行になってしまうと、読者に覚えられにくくなってしまい、デザインを崩すことにもなってしまいます。シンプルなデザインを心がけましょう。

タブはパネル上部に配置しよう

サイドや下部だと、読者は見逃してしまいます。

Yahoo!ファイナンス

タブによってコントロールされる部分は視覚的に明確なデザインにしよう

タブを使うことは、索引カードを使うのと同じです。どこまでが索引カードであるかを読者が分かるものでなければなりません。

Yahoo Pipes

タブの切り替えが速い方が良い

Ajaxタブを利用して切り替えの時間を極力短く、0.1秒以内にすることが大事です。ただし、プログラミングの技術が重要なわけではありません。無償で配布されているものは数多く存在しているので、そういったものを利用するだけでもかなり有効です。

こう見てみると、当たり前と思っていたものも「こんな明確な理由があったんだ。」と、より顧客視点で理解することができますよね。三井住友銀行のアクセシビリティガイドラインも、「その理由から優先度を高くしたのか。」となかなか勉強になります。何をするにしても、相手の立場に立つというのは大切なことなんですね。

Google AJAX Search APIにイメージ検索が追加されたので早速試す

Wed, 25 Jul 2007 06:51:17 +0900

Ajax Searchに新しい機能が追加されたら、とりあえず試しておけっていう信条から、さっそく試してみました。

]]> せっかくなので、グーグルアースにちなんで”Blues Brothers”を検索。

Google AJAX Searchはサクサク検索できるのが気持ちいいですね。
Ajaxってなんて素晴らしいんでしょう。

このサクサク感に目をつけて、海外のネットショップやネットスーパーが導入しているのも事実。

日本の著名サイトでも最近Ajaxを積極的に使うようになってきましたよね。（例：iza）

話が逸れましたが、Google Ajax Searchを設置するにはAPI keyが必要。

既にGoogle Ajax Searchを利用している人は、下記スクリプトを追加、 var searchControl = new GSearchControl(); searchControl.addSearcher(new GimageSearch()); もしくは既存ファイルに下記スクリプトを、ベースのスクリプト部分と入れ替えてしまえばOK。

初めてGoogle Ajax Seachに挑戦する人、もしくは敷居が高いと思っているあなた。
そんな方に、スタートアップキット（右クリックでファイルに保存。テキストファイルになっています。）。

Google Ajax Seachスタートアップガイド

スタートアップキットをダウンロード
EmEditorなどの各種文字コードに対応したテキストエディタで開く
「あなたのAPI key」の部分に取得したAPI keyをコピペ
HTML形式で保存（文字コードをUTF-8に）
サーバーにアップして、ページを開けば"Blues Brothers"のイメージ検索結果が出てきますｗｗ

Ajaxの可能性は、サイトのユーザビリティを向上させてくれること、いろいろなサンプルが無償で配布されていること、これにつきます。

拒否反応を起こしていた人も、是非この機会に試してみては？

Google AJAX Search API Image Search

http://www.google.com/uds/samples/apidocs/image.html
Googleイメージ検索サクサク

]]>

テクノラティタグ: Ajax , Google AJAX Search API , WEBツール

めっちゃ綺麗な無料デスクトップ壁紙をゲットできるスライドショー

Sun, 20 May 2007 17:29:16 +0900

Google AJAX Feed APIから、綺麗な壁紙をゲットできるスライドショーがリリースされていました。

]]> 壁紙スライドショー

スライドショーで気に入った画像があれば、クリックして壁紙を入手することができます。

たとえばこんな壁紙↓

私のような人にはちと設置が面倒なので「ブログパーツ」と軽く言うことはできませんが、壁紙ゲットはあくまでサンプルで、いろいろなことができそうなので、試してみては？

わたしと同じような人のためにサンプルを用意して置きました⇒サンプルファイル※右クリックでダウンロードしてください。

テキストファイルになっているのでHTMLに変更し、http://www.google.com/jsapi/?key=YOUR-KEY"の「YOUR-KEY」の部分にGoogle AJAX Feed APIで取得できるKEYを入力してください。

Google AJAX Feed API

http://code.google.com/apis/ajaxfeeds/signup.html
Google AJAX Feed APIのサインアップ画面、KEYの取得はかんたんにできます。

Googleマップ+Ajaxで自分の地図をつくる本 Google Maps API徹底活用

価格：￥ 2,079
平均評価：3.5
納期：通常24時間以内に発送

Amazon で詳細を見る by WEBマーケティングブログ

]]>

テクノラティタグ: Ajax , Google , Google AJAX Feed API , WEBツール , スライドショー , ブログパーツ , 壁紙

Googleのブログパーツ？Google AJAX Search APIを実装してみた

Fri, 18 May 2007 16:36:30 +0900

右サイドバーにGoogleのビデオバーをつけてみました。昨年公開されたGoogle AJAX Search APIのβ版を使用したものです。

画像をクリックすると、このすぐ上で、動画が再生されるようになってます。

定期的にテーマを決めて設置していこうと思います。てなわけで今回は「WEB2.0」、ティム・オライリー氏もWEB3.0と言う言葉を出し始めた中、このキーワードで、どんな動画が出てくるんでしょうか。

そういった意味で見るとおもしろいかも。

]]> Googleはブログパーツを狙っているのか？

このGoogle AJAX Search API、ニュースを複数のキーワードで掲載できたり、RSSを拾ってきたり、Amazonのように本を紹介できたりと（アソシエイト的なものは出来ないようですが。）ブログパーツとして広めようと言う気満々なものになってます。

ブログパーツによるプロモーションは何気に注目されていて、当初はSEO会社による被リンクを大量に得るためのモノ、アフィリエイターの効率化ツールなどから、次第に企業のプロモーションにも使われるようになってきています。

Googleもブログに対して友好的な態度を示すことによって、自社のサービスをブログも巻き込んで大きくしていこうと言う考えなのでしょうね。

ちなみにここの左下にはニュースバーがあります。上部の「Yahoo」とか「SEO」とかのキーワードをクリックすると、関連する新着ニュースが表示されます。

Google AJAX Search API

http://code.google.com/apis/ajaxsearch/signup.html
Google AJAX Search APIのサインアップ画面

]]>

テクノラティタグ: Ajax , Google , Google AJAX Search API , WEBツール , ツール , ブログパーツ , 無料

WEBマーケティングブログ: Ajax

サクサク気持ちいいシンプルな複数RSSまとめブログパーツ「escaloop」

「escaloop」で利用可能なサービス

escaloop スタートアップガイド

デフォルトのCSS

「超情報整理」NASAのAjaxを駆使した新サイト「NASA 5.0」使用Ajaxまとめ付

NASA 5.0

RSSフィード登録

ブクマボタン

NASA 5.0で主に使用されているAjax

関連情報

【Ajaxタブ活用例】買い物ユーザビリティが高いDNAアート販売サイト「dna11」

dna11

関連するAjax

関連情報

Google AJAX Feed APIで簡単にブログRSS最新記事一覧を作る

最新記事の概要をロール表示

最新記事一覧作成ガイド

WEBマーケティングブログFeed Gadgetの表示サンプル

関連情報

AJAXタブを作る際の13のユーザビリティガイドライン

関連情報

Google AJAX Search APIにイメージ検索が追加されたので早速試す

Google Ajax Seachスタートアップガイド

Google AJAX Search API Image Search

めっちゃ綺麗な無料デスクトップ壁紙をゲットできるスライドショー

Google AJAX Feed API

Googleのブログパーツ？Google AJAX Search APIを実装してみた

Google AJAX Search API

WEBマーケティング ブログ: Ajax

サクサク気持ちいい シンプルな複数RSSまとめブログパーツ「escaloop」

「escaloop」で利用可能なサービス

escaloop スタートアップガイド

デフォルトのCSS

「超情報整理」NASAのAjaxを駆使した新サイト「NASA 5.0」使用Ajaxまとめ付

NASA 5.0

RSSフィード登録

ブクマボタン

NASA 5.0で主に使用されているAjax

関連情報

【Ajaxタブ活用例】買い物ユーザビリティが高いDNAアート販売サイト「dna11」

dna11

関連するAjax

関連情報

Google AJAX Feed APIで簡単にブログRSS最新記事一覧を作る

最新記事の概要をロール表示

最新記事一覧作成ガイド

WEBマーケティングブログFeed Gadgetの表示サンプル

関連情報

AJAXタブを作る際の13のユーザビリティガイドライン

関連情報

Google AJAX Search APIにイメージ検索が追加されたので早速試す

Google Ajax Seachスタートアップガイド

Google AJAX Search API Image Search

めっちゃ綺麗な無料デスクトップ壁紙をゲットできるスライドショー

Google AJAX Feed API

Googleのブログパーツ？Google AJAX Search APIを実装してみた

Google AJAX Search API

WEBマーケティングブログ: Ajax

サクサク気持ちいいシンプルな複数RSSまとめブログパーツ「escaloop」