押さえておくべき20のAjax効果を体験できるサイト | 教えて君.net
Ajax（エイジャックス、アジャックス）は、ウェブページをリロードをしなくても、サーバとデータのやり取りを 行なって処理を進めていく対話型ウェブアプリケーションの実装形態だ。画面遷移を伴わないため、 ユーザーは、サーバの存在を感じることなくウェブアプリケーションを利用できる。 「NETTUTS」では、20のAjax効果を体験できるページを公開している。すべてではないが、ほとんどの ソースを体験することができるので、ウェブ開発者は要チェックだ。 公開されているサンプルコードは、 Ajaxを利用したメッセンジャー「Ajax IM」、リアルタイムで値チェックを行う「LiveValidation」、ダブルクリックで編集可能にできる「Inline Editing」、クリックする場所を測定するアクセス解析「ClickHeat」などなど。 「DEMO」ボタンを押すことで体験することができる。なお、「SR
jQueryでホットペッパーのAPIをリクエストしてGoogle ストリートビューを表示するまで - F.Ko-Jiの「一秒後は未来」
梅酒.inの「梅酒がウリな飲食店」にてLightBoxを実現していることを前回説明しました。今回はさらに、jQueryでホットペッパーのAPIをリクエストしてGoogle ストリートビューを表示させる方法を説明をします。 ↑ こんな感じ。(昼間の写真なのがちょっとあれですが) ここではjQueryを用いているので、レスポンスのフォーマットとしてJSONPが利用できるホットペッパーのAPIを利用しています。 なお、jQueryのリファレンスは「jQuery 1.2.6 日本語リファレンス」が詳しいです。また、jQueryでJSONPを使う方法は「jQuery で JSONP ２通り – てっく煮ブログ」にて紹介されていたので、そちらを参考にやってみました。 また、ストリートビューをGoogle Maps APIから使う方法は「Google Maps API – Google Code (日本
Flash不要！JavaScriptで派手なWebデザイン
ブラウザーいっぱいに広がる鮮やかなグラフィック。フェードインでゆっくりと出現する写真画像。スクロールしながら画像に重なっていく半透明のテキストボックス――思わず見とれてしまう、キャンペーンサイトなどでおなじみの“派手なWebサイト”は、フルFlashが一般的だ。「Flashはよく分からないし、そもそもオーサリングツールもない」という個人サイトの制作者はあきらめるしかなかった。 パリ在住のフリーコンサルタント／Webデザイナー「Sebcreation」のWebサイトは、そんな常識を打ち破ることに挑戦している。まずはトップページを見てみよう。 おなじみのローディングアイコン、上下右左から次々とスライドしてくる半透明のテキストボックス……といったダイナミックなデザインに、「またFlashか」と思わずつぶやいてしまうかもしれない。ところがSebcreationでは、アニメーション／エフェクト処理を
かんたんAjax開発をするためのRuby on Railsの基礎知識 − ＠IT
かんたんAjax開発をするためのRuby on Railsの基礎知識：Ruby on RailsのRJSでかんたんAjax開発（前編）（1/4 ページ） いまさら聞けないRuby on Railsとは？ Ruby on Rails（以降、Rails）は、世の中に多数存在する現在のWebアプリケーション開発フレームワークに多大な影響を与えている、先進的で生産性の高いフレームワークです。 以下をコンセプトとして掲げており、Ruby言語で記述されています。 「同じことを繰り返さない」（DRY:Don't Repeat Yourself） 「設定よりも規約」（CoC:Convention over Configuration） ここ数年で、楽天市場、ニフティ、カカクコムなど大手IT企業での採用も進んでおり、注目を集めています。 関連記事： 楽天が「Ruby on Railsの利用を開始します」 h
Aptana Jaxerで解決するAjaxのSEO対策とは？（1/4） ─ ＠IT
Aptana Jaxerで解決するAjaxのSEO対策とは？：パターンとライブラリで作るAjaxおいしいレシピ（6）（1/4 ページ） 今回はAjaxの問題点であるSMO、SEOへの対応 今回はAjaxの「SMO」対応、「SEO」（Search Engine Optimization、検索エンジン最適化）対応について取り上げます。SEOについてはご存じの方も多いかと思いますが、SMOについてはあらかじめ簡単に説明しておきます。 「SMO」とは、ソーシャルメディア最適化（Social Media Optimization）のことです。ブログや掲示板、SNS上などで自分たちが作成したWebサイトについて言及してもらうことで、認知度や評判を高める施策のことを指します。 ■ Ajaxの“問題点”とは？ Ajaxを使ったWebページでは、画面遷移をすることなく画面内の一部のみを書き換えることで、スム
Google AJAX Feed API入門
他のサイトが配信しているATOMやRSSフィードをJavaScriptを使って取得しようとした場合、同一生成元ポリシー(Same-Origin Policy)の制限によって直接他のサーバにあるデータへアクセスできずサーバ側でいったんフィードを受信するなどの処理が必要でした。 Google AJAX Feed APIを使用すると、Googleがフィードのキャッシュとしての役割を果たしてくれるため、サーバ側のプログラムを必要とせず、クライアント側のスクリプトだけで各種フィードを取得することが出来ます。 ここではGoogle AJAX Feed APIを使ってATOMやRSSフィードを取得する方法などを解説していきます。 Google AJAX Feed APIとは ドキュメント
JSONとJSONP
JSONとJSONP ネタ元：JSONについての勉強メモ：外部URLから呼び出せない。どうやったら・・・ JSONやJSONPを利用したJavaScriptでのデータをの取り扱い方です。 JSONの場合 JSONはJSONについての勉強メモで書かれているようにデータをオブジェクトとして記述しておく方法です。 var jsonData ={"users": [ { name: "hamu", age : 24, language:["XHTML" , "CSS"] }, { name: "h2", age:25, language:["PHP" , "Java"] }, { name: "hoge", age:26, language:["JS" , "jQuery"] } ]} とJSONを定義しておけば、 for(var index in jsonData.users){ documen
jQueryでRSSを読み込む - MotuLog
久々の更新ですが、jQueryネタを。 お持ちでない方は以下、ダウンロードページで。 http://docs.jquery.com/Downloading_jQuery#Download_jQuery jQuery単体ではxmlの解析ができないようなので、jFeedなるものを使用します。 jFeed: JavaScript jQuery RSS/ATOM feed parser plugin ファイルを開くといっぱい入っていますが、とりあえず「build/dist/jquery.jfeed.pack.js」だけで動くようです。もちろん「jquery.js」も必要ですが。 外部サイトのRSSを取得して表示する場合は、内包されている「proxy.php」も使用します。 すごく簡単で便利です。 <html> <head> <meta http-equiv="Content-Type" conte
Ajaxによるエラーチェックの注意点 (ユーザビリティ実践メモ)
入力フォームについて、最近ではAjaxを用いることで、「送信」ボタンをクリックする前にエラーチェックをする手法が使われるようになっています。 今回はリアルタイムでフォームのエラーチェックを行う場合の注意点について考えてみます。 あまり良くない例：Remember the Milkの登録画面 http://www.rememberthemilk.com/signup/ ユーザ名を入力する欄では、入力と同時にエラーチェックが行われるため、多くの場合1文字目からエラーが表示されます。 2文字目を入力すると即座にエラーメッセージが更新されます。 ユーザが当初から自分のユーザ名として考えていた「bebittaro」を入力し終えると、利用可能である旨のメッセージが表示されます。 上記は入力に対しリアルタイムでフィードバックを返すことで誤入力を避けようという工夫ですが、ユーザが入力を終える前にエラー表示
xingxx - RSSリーダーはJavascript+jQueryでたった14行で作れる
思いつきで、そっけないトップページに、jQueryをつかってRSSリーダーを作ってみた。 MTが出力しているXMLを取得して、エントリーのタイトルを表示している。 そうえいばjQueryは1.2.6にバージョンアップして、実行速度が２倍くらい上がったということだ。体感はそんなでもないけど。。 jQueryのいいところは、なんといっても手軽さだろう。思いついたことを手軽に実現できるのはクリエーターにとって有難い。Ajaxという概念の敷居を低くできているのも、こういったライブラリの恩恵に預かっているからといえると思う。 こんなにも手軽に、たった約10行たらずでRSSリーダーを作れる時代になったことは喜ばしい。 まぁ、これがクロスドメインだったら、ハナシは別なのですが、、 以下、ソース $(function(){ $.ajax({ url: "blog/atom.xml", cache:
Google Japan Blog: 日本のデベロッパーの要望に応え、多くの技術ドキュメントを日本語化しました
Google が提供するさまざまなAPI やツールの詳細な技術情報は、すべて Google Code で公開されています。しかし、全ての技術情報は英語で記されていたため、多くの日本のデベロッパーからは技術ドキュメントを日本語化して欲しいとの要望をいただいていました。 そこで、 開発者ホーム と題して Google Code の日本語版の運用を開始しました。4月より、2 つの技術、OpenSocial と YouTube Data API の技術ドキュメントの日本語版の提供を開始しました。そして、Google Developer Day 2008 Japan の開催にあわせ、さらに多くのドキュメントと映像を日本語化しました。 本日、日本語版が公開されたドキュメントおよび映像は以下となります。 OpenSocial YouTube Data API Google Gadgets API Goo
2008-02-28
どうやら、ajaxでファイルを呼び出す際、呼び出されるファイル内でjavascriptファイルを読み込んでいると、 読み込まれるはずのjavascriptが認識されていないようだ。 しかも、IEでのみ。Firefox上では予想通りの動作をしてくれた。 こんなところでもクロスブラウザか〜・・・と思いながら考えてみた。 ※prototype.jsのAjax.Updater()で再現してみた。 再現させた時のコードと、回避策をメモしておこう。 ajax呼び出し元のファイル(ajaxtest.html) <html> <head> <meta http-equiv="Content-type" content="text/html; charset=EUC-JP"> <title>ajaxtest</title> <script type="text/javascript" src="./prot
[Think IT] 第1回：JSONってなにもの？ (1/3)
JSONとは何か? JSONとはJavaScript Object Notationの略で、XMLなどと同様のテキストベースのデータフォーマットです。 その名前の由来の通りJSONはJavaScriptのオブジェクト表記構文のサブセットとなっており、XMLと比べると簡潔に構造化されたデータを記述することができるため、記述が容易で人間が理解しやすいデータフォーマットと言えます。 なお、JSONは2006年に「RFC 4627（http://www.rfc-editor.org/rfc/rfc4627.txt）」として公開されています。 例としてXMLとJSONで同じデータを記述したものをリスト1とリスト2に示します（図1）。 リスト1のXMLではすべての情報をタグで囲んだテキストノードとして記述していますが、XMLでデータを表現する場合、データの記述方法として属性とテキストノードの使い分けが
ImageFlow - Redirecting
ImageFlow has been moved to http://imageflow.finnrudolph.de - you will be redirected in 5 seconds.
2006-09-04
JSON文字列をevalして値を取りたいときに挙動が妙ではまった、という話を聞いたので、Firefox1.5上のFireBugのコンソールで何パターンか試してみた。 {"key":"value"}というJSONデータが文字列で渡ってきて、それをevalしてJavaScriptの値として使いたい、という想定。 間違ったJSON文字列をevalした場合 >>> jsonstr = "{key:\"value\"}" "{key:"value"}" >>> var obj = eval(jsonstr) >>> obj "value" >>> typeof(obj) "string"JSONのオブジェクトでは、ラベルも""でくくって文字列にしないといけないのだが、まずはそれを忘れた場合を試してみた。結果として返ってくるのは、なんとJSONのハッシュの要素にしたつもりの文字列のみ。 正しいJSON
Stuudium e-kool
Õpetajasõbralik päevik, õppematerjalide haldamine, põhjalik suhtlusmoodul ja palju muud kooli igapäevatööks vajalikku. Ilma peidetud lisatasude ja reklaamita. Stuudiumit kasutab juba enam kui 380 haridusasutust üle Eesti. Võta meiega ühendust Päevikud Õppeaasta alguses saavad kõik õpetajad endale ise vajalikud päevikud teha — päevikus võivad olla ühe või mitme erineva klassi õpilased, üks keelerüh
続きを読むでAjaxついでに文字化け | Takazudo Clipping*
続きを読むを押すとAjaxでテキストを取ってくるようにしてみました。 エントリーの中身だっけを別ファイルで持って、続きを読むを押すと、Ajaxで、そのファイルの中身を読んできます。 もしかしたらSafariとかで文字化けてるかも あと、ロード中にコメントとかトラックバックとか表示されちゃうのを修正。 この、隠す部分（トラックバックとかコメントとかコメントを書くとかのパーツ）にheight:0,padding:0,overflow:hiddenを指定するっていうことを書いたCSSをロード前に読み込ませるので、最初に読んでくるときは、この部品らは隠れているように見える。ロード完了したらこの部品らをjQueryでhideして、全く隠してしまう。（こうしないと、この隠している部分へのアンカーリンクが効かなかったりする…エントリー左側についてるコメントとかトラックバックのリンク）。そんで、最後
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
twistori
ShopComposition
Philips - United Kingdom
