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

リンク切れをその場でポップアップ通知するjQueryプラグイン「Catch404」

sigeo — Wed, 21 Jul 2010 16:00:55 +0000

「サイトで紹介していたリンク先のページが、いつのまにやら404エラーになってしまっていた。」

そういったことはよくあることですよね。このようなリンク切れは、管理が大変な上に、訪問者にとっても迷惑この上ないものです。（すみませんm(_”_)m）

今回ご紹介するのは、そういったリンク切れのページへ遷移する前に、サイト内で404エラーを通知してくれるjQueryプラグインです。

404エラー（リンク切れ）を事前に教えてくれるjQueryプラグイン

「Catch404」は、リンク切れしてしまったリンクをクリックすると、その場で吹出しをポップアップさせて教えてくれるjQuery プラグイン。

サイト訪問者にとって迷惑な、リンク切れページへの遷移を自サイト内でとどめてくれる、ユーザビリティ向上ツールです。

飛び先ページのリンク切れをポップアップで通知

↑リンク先のページが404エラーでも、エラー画面に遷移する前に教えてくれます。

サンプルを試してみたい方はこちらへどうぞ。

ポップアップのメッセージは、下記のようなソース部分を編集することで、自由に変えることができます。

試してみたい方は、Catch404のページからソースをダウンロードしてご利用ください。（※jQueryをすでにお使いの場合、バージョンによっては動作しませんのでご了承ください。）

WordPressのプラグインにも、リンク切れを通知してくれるものはあるのですが、なにせサーバー負荷がハンパないのです。

以前に使っていたときは、それがサーバーエラーの原因のひとつになってしまいました。

そういったことからも、jQueryで、サーバーに負荷をかけることなく、ユーザビリティを上げられるのは嬉しいですね。

Twitterのつぶやきをサイトへクールに表示させるjQueryプラグイン「EmTweet」

sigeo — Tue, 01 Dec 2009 15:04:03 +0000

ブログやサイトにTwitterでの自分のつぶやきや、検索結果を表示させているサイトが増えてきていますよね。

そのため、他とは違う物がよいとか、邪魔にならない部分へ表示させたいといったニーズもあるはず。

そんなことを実現してくれるjQueryプラグインをご紹介。

Twitterのつぶやきをサイトへクールに表示する「EmTweet」

「emTweet」は、サイト上にTwitterユーザー名で絞り込んだつぶやきや、検索結果の最新のつぶやきをサイトの右上の部分に表示してくれるjQuery プラグイン。

いくつかの項目を設定するだけで、カンタンにjQueryのコードを発行してくれます。

表示サンプル

↑このページにも表示させていますが、画像のように最近のつぶやきを表示させることが可能です。

カンタン設定

↑主要な部分を設定するだけでタグを発行。

設定ページで、検索結果や、検索のタイプ（ユーザー名か一般のTwitter検索）などを設定し、「Generate ～～」ボタンを押すと、サンプルの表示と、タグの発行をしてくれるので、タグをの前に設置すればOKです。

たとえば、#ht03aの検索結果を表示させたい場合は、「Search Query To Use:」の欄に ht03a と入れておけば良いようです。

つぶやき表示の背景画像の変更や、表示時間、フォントの設定も可能になっています。

興味のある方は、emTweetへどうぞ。

Twitterの表示方法もさることながら、jQuery のタグをカンタンに発行してくれる手法もなかなか良いですね。これぞ jQuery をブログパーツのように手軽に使える手法！？

Via：delicious

[jQuery]検索結果で表示可能なTwitterブログパーツを設置できる「Monitter」

sigeo — Wed, 18 Mar 2009 15:01:24 +0000

Twitterの検索結果をタイムラインで表示するようなブログパーツってなかなかないですよね。

今回ご紹介するブログパーツは、jQueryで動かす割には設定がほとんど不要で、Twitter検索結果も表示できる手軽で便利なものになっています。

Twitter検索結果で表示できるjQueryブログパーツ

「Monitter Widget」は、jQueryを使って設置でき、Twitter検索結果でも表示できるブログパーツ。

検索キーワードをブログパーツを表示するdiv要素のtitle属性に書くだけで良いので、設置もかなりカンタンです。

「Monitter」の特徴

title属性が検索クエリになる
lang属性で言語の絞込み可能
シンプルなCSSでデザイン設定可能

ここではCSSの影響を受けないようにするため、iframeで埋め込んでいます。そのため、リンクをクリックしてもちゃんと開きませんｗブログパーツ設置ページはこちらになります。

このブログを紹介してくれていると思われる投稿: title属性が検索結果になります。この部分のソースコードは下記。; <div class="monitter" id="tweets" title="WEBマーケティングブログ" lang="ja"></div>; ↑title属性に検索キーワードを入れているだけです。
ユーザー名での検索結果表示: ↑「from:ユーザー名」で自分の呟きをタイムライン表示できます。; ↓ユーザー名で表示するコードのサンプル
<div class="monitter" id="tweets2" title="from:web__marketing" lang="ja"></div>
「わさお」での検索結果: ↑なんでもやりたい放題ｗ

設置方法

1. ダウンロード: Monitter Widgetのページを開き、「Download the zip 」というリンクから「monitter_widget_v1_1.zip」をダウンロード。
2. サーバーへアップロード: ダウンロードしたZipファイルを解凍し、フォルダごと任意の場所へアップロード
3. 表示させたいページにコードを追加: ページに表示させたい場合は、内に下記コードを追加
%MINIFYHTML73c45fa6733ba6564fe7816cf1416c500%%MINIFYHTML73c45fa6733ba6564fe7816cf1416c501%<link rel="stylesheet" href="設置ディレクトリのURL/monitter.css" />; ブログパーツを表示させる部分に下記コードを追加
<div class="monitter" id="tweets" title="検索キーワード又はユーザー名" lang="ja"></div>; 「lang属性を “en” にすると英語のみ拾う」というような仕組みになっています。

興味のある方はMonitter Widgetへどうぞ。

検索結果で表示できることからも、プロモーションで「こんな意見が出ています。」系の見せ方も出来そうです。使い方次第でおもしろくなりそう。

Via：delicious

画像を回転させる「mRotate.js」のMooTools版を試してみた

sigeo — Wed, 18 Feb 2009 15:15:18 +0000

jQuery版があれば十分なのですがｗ MooTools版も出たみたいだよということでご紹介。

画像を回転させる「mRotate.js」がMooToolsでも出た

Rotation of -25
Rotation with angle = 65°
マウスオーバーでグルグル
使用しているJS: %MINIFYHTML73c45fa6733ba6564fe7816cf1416c502%%MINIFYHTML73c45fa6733ba6564fe7816cf1416c503%%MINIFYHTML73c45fa6733ba6564fe7816cf1416c505%; ↑これをHead間に入れています。’image’ ‘image2′ などのところで、回転量を調節できます。
使用しているHtml: ↑JSで各IDの回転度合いを指定して、画像にはIDをそれぞれ振るだけです。

興味のある方は、mRotateからプラグインセットをダウンロードしてください。

ごくたまにだとは思いますが、画像を回転させたい時ってありますよねｗブログジャンルによっては、雑誌などと同様に斜めにしたいこともあるはず。（私の場合はスノーボードですねｗ）ぜひ覚えておきたい一品ですね。

Via：Delicious

jQueryでTwitterブログパーツ（アバター付）ができる「Tweet!」

sigeo — Fri, 26 Dec 2008 03:15:35 +0000

これはjQueryユーザーにとっては手軽で、良いかも。アバターの表示や複数アカウントを表示できるのも魅力のひとつ。

それ以外の方でも、jQueryを導入してみる良い機会になるのでは？

jQueryでTwitterブログパーツをサイトに表示できるプラグイン

Twitterをサイトに表示させるとき、アバターを表示させるのに設定が面倒だったりしますが、「Tweet!」はオプションを数行追加するだけでいろいろな設定ができてしまいます。

「Tweet!」の特徴

読み込みが速い: このエントリでもJSを一番下に記述しているにも関わらず、読み込みが速く感じられました。
ロード中でもページの表示へ影響しない: 通常TwitterのJSONを表示させると、Twitterが落ちているときなどに影響を受けますが、それがなくなります。
最大で100エントリ表示: 用途によっては便利
アバターを表示できる: 結構出来ないのが多いですよね
複数アカウントの表示も可能: これもおもしろいですね。使い方次第でプロモにも使えそう。
@replies やURL、#hashtags を自動的にリンク化: これも必須項目

Twitterブログパーツサンプル

当ブログのCSSを影響させたままになってしまっていますがｗ

スタートアップガイド

Tweet!のページを開き、「Download」項の「Tar」をダウンロードします。
ダウンロードした「seaofclouds-tweet-ほにゃらら.tar.gz」を解凍し、中にある下記ファイルを取り出します。
- 「javascripts」のフォルダにある「jquery.tweet.js」
- 「stylesheets」のフォルダにある「jquery.tweet.css」
「jquery.tweet.css」は、中身を既存のCSSへ貼り付けるのが良いと思います。
「jquery.tweet.js」をテキストファイルで開き、4行目にある下記の seaofclouds の部分を表示させたいアカウントへ変更しますusername: ["seaofclouds"], 複数アカウントを表示させたい場合は “username1″,”username2″,”etc” というように記述します。
同じく「jquery.tweet.js」でオプションを設定します。5行目から15行目がオプション設定項目です。 avatar_size: ここにサイズを数字だけで入れます, // [integer] height and width of avatar if displayed (48px max) count: 表示するつぶやきの数, // [integer] how many tweets to display? intro_text: null, // [string] do you want text BEFORE your your tweets? outro_text: null, // [string] do you want text AFTER your tweets? join_text: null, // [string] optional text in between date and tweet, try setting to “auto” auto_join_text_default: “つぶやきに追加する語句”, // [string] auto text for non verb: “i said” bullocks auto_join_text_ed: “i”, // [string] auto text for past tense: “i” surfed auto_join_text_ing: “i am”, // [string] auto tense for present tense: “i was” surfing auto_join_text_reply: “リプライのときに追加する語句”, // [string] auto tense for replies: “i replied to” @someone “with” auto_join_text_url: “i was looking at”, // [string] auto tense for urls: “i was looking at” http:… loading_text: null // [string] optional loading text, displayed while tweets load };最低限のオプションに説明を絞っています。
「jquery.tweet.js」を「UTF-8（BOM付き）」で保存します。（※それ以外のエンコードで保存すると文字化けします。）
「jquery.tweet.js」をJSが入っているディレクトリへ（ここでは「js」というフォルダへ入れることを前提としています。）アップロードします。
ページへJavascriptのコードを追加します。
jQueryを利用中の場合と、利用していない場合
下記JSを head 内か直前に追加します。
%MINIFYHTML73c45fa6733ba6564fe7816cf1416c506%%MINIFYHTML73c45fa6733ba6564fe7816cf1416c507%
jQueryを利用していない場合
　上記に加え、下記コードを head 内か直前に追加すればOKです。
%MINIFYHTML73c45fa6733ba6564fe7816cf1416c508%%MINIFYHTML73c45fa6733ba6564fe7816cf1416c509%
HTMLコードの追加、下記コードを表示させたい部分に設置します。<div class="tweet"></div>
見た目をカスタマイズしたい場合、「jquery.tweet.css」の中身（下記内容）を使用して調整します。
.tweet { font-family: Georgia, serif; font-size: 120%; color: #085258; } .tweet .tweet_list { -webkit-border-radius: .5em; list-style-type: none; margin: 0; padding: 0; background-color: #8ADEE2; } .tweet .tweet_list li { overflow: auto; padding: .5em; } .tweet .tweet_list li a { color: #0C717A; } .tweet .tweet_list .tweet_even { background-color: #91E5E7; } .tweet .tweet_list .tweet_avatar { padding-right: .5em; float: left; } .tweet .tweet_list .tweet_avatar img { vertical-align: middle; }

これはなかなか使えそうです。 Twitterを使って何かしたいというときにもオススメできそうなjQueryプラグインだと思います。ちょっと模索してみようかなｗ

Via:Delicious

サクサクなAjaxUIのシンプルなSaaS型グループウェア「Bizroof」

sigeo — Thu, 24 Jul 2008 17:29:58 +0000

グループウェアって、なかなかどうして社内全体には浸透しないもの。「多機能すぎて。」とか、「他のツール使ってるから。」などと言う理由もあるのではないでしょうか。

それ以外にも、「重い」とか「CRMにはとても使えない」なんていうものも。コストをかけてもこれでは一向に効率化には繋がらない。そんなふうに感じている方も多いのでは？

サクサク感とシンプルさが参考になりそうなグループウェア

今回ご紹介する「Bizroof」は、機能こそ少ないもののそのAjaxUIがとても参考になりそうなサービス。

主な機能はCRMのための顧客管理機能、顧客別メモとスケジュール。共有カレンダー、文書保管、各情報へのタグ付け管理機能が主なところ。

「Bizroof」をちょこっといじってみた動画

ちなみに無料で使える制限は以下の通り。

3ユーザーまで
月に顧客30社まで
月に連絡先30個まで
月にファイルスペース10MBまで

尚、イベントの情報や顧客情報をoutlook, Googleカレンダー, iCalendarそれぞれのフォーマットでエクスポート可能になっているようです。

興味のある方はBizroofへどうぞ。

こういったツールはツールとして大事だけども、逆にこういった良いものを生み出せるような職場環境って大事ですよね。

Via：Feedmyapp

サイトにクールなポップアップのAjaxメニューをつけられる「PodiPodi」

sigeo — Sat, 19 Jul 2008 16:44:47 +0000

キーワードは「Shift + Space」。コマンドを打つとその語句を含むメニューが現われます。コマンドは半角英数のみで実行可能ですが、それでもなかなかのもの。

クールなAjaxメニューをつけられる「PodiPodi」

ここをクリックしてもメニューが出てきます。

メニューに設定可能なもの

「Shift + Space」を押した後に下記コマンドに含まれる語句を一字だけ半角英数で入力すると出てきます。

コマンド：Bookmarks: あらかじめ設定したサイトへのリンク一覧を表示できます。
コマンド：Credits: あらかじめ登録した内容を表示します。
コマンド：Tell a friend: 友達にこのサイトをメールで教えてあげることができます。
コマンド：YouTube: YouTube動画を検索できます。
コマンド：Google: Google検索できます。
コマンド：gadget: 設定しておいたGoogle ガジェットを表示できます。
コマンド：comment: 著者へコメントを送れます。（※文字化けする場合は管理画面で文字コードをUTF-8にすれば直ります。）

その他FlickrやYahoo!、Googleイメージ検索やTwitterの表示などなかなか盛りだくさんのメニューが用意されています。

興味のある方はPodiPodiへどうぞ。

もう一度ここで試したい方はどうぞ。

スタートアップガイド

PodiPodiのページを開く
下記画像のボタンをクリック
下記画像を参考にフォームを入力し、「Submit」ボタンを押せば登録完了
ログイン後にサイドメニューから「Setting」を選んで下記画像のようなコードをタグの直前に貼り付けます（※タグの直前以外に貼るとIEで動作しませんでした。）
そしてリンクでメニューを開くようにしたい場合は下記のコードを記事中に貼り付けます
open podipodi
表示させたいコマンドの設定は、下記のように緑になっている状態にすれば表示されます。赤の場合は表示されません
表示させたい項目を編集し、右上の赤い字の「Not Active」をクリックし、緑の「Active」に変われば表示されるようになります

ショートカットキーで出せるというのもなかなかおもしろい。こういった機能がブラウザで誰もが使う標準のものとなって、サイトごとにオプションでメニューを付け加えられるようになるともっとおもしろくなりそうですよね。

Via：del.icio.us

高速サイトを実現する14のルール – ハイパフォーマンスWebサイト: 価格：￥ 1,890; 平均評価：4.5; 納期：通常24時間以内に発送; Amazon で詳細を見る by WEB担当者専門書店

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

sigeo — Mon, 07 Apr 2008 16:03:52 +0000

2009年4月22日追記: 残念ながら、サービスが終了してしまったようです。同じようなサービスに複数のRSSをまとめてアコーディオンのように表示するブログパーツ「Splush」があります。

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：delicious

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

sigeo — Sun, 02 Dec 2007 22:00:12 +0000

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」

sigeo — Sat, 10 Nov 2007 22:47:15 +0000

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

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

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

dna11

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

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

リンク切れをその場でポップアップ通知するjQueryプラグイン「Catch404」

404エラー（リンク切れ）を事前に教えてくれるjQueryプラグイン

飛び先ページのリンク切れをポップアップで通知

Twitterのつぶやきをサイトへクールに表示させるjQueryプラグイン「EmTweet」

Twitterのつぶやきをサイトへクールに表示する「EmTweet」

表示サンプル

カンタン設定

[jQuery]検索結果で表示可能なTwitterブログパーツを設置できる「Monitter」

Twitter検索結果で表示できるjQueryブログパーツ

「Monitter」の特徴

設置方法

画像を回転させる「mRotate.js」のMooTools版を試してみた

画像を回転させる 「mRotate.js」がMooToolsでも出た

jQueryでTwitterブログパーツ（アバター付）ができる「Tweet!」

jQueryでTwitterブログパーツをサイトに表示できるプラグイン

「Tweet!」の特徴

Twitterブログパーツサンプル

スタートアップガイド

サクサクなAjaxUIのシンプルなSaaS型グループウェア「Bizroof」

サクサク感とシンプルさが参考になりそうなグループウェア

「Bizroof」をちょこっといじってみた動画

サイトにクールなポップアップのAjaxメニューをつけられる「PodiPodi」

クールなAjaxメニューをつけられる「PodiPodi」

メニューに設定可能なもの

スタートアップガイド

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

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

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

escaloop スタートアップガイド

デフォルトのCSS

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

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

NASA 5.0

RSSフィード登録

ブクマボタン

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

関連情報

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

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

dna11

関連するAjax

関連情報

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

画像を回転させる「mRotate.js」がMooToolsでも出た

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