JSONとJSONPの違い - あと味
解説は他にもたくさんありますが、私自身も使いはじめの頃、違いがよくわからなかったので。 JSONとは？ 汎用的なデータ記述方法です。こんな感じで書きます。 { 'blog' : 'あと味', 'author' : 'jdg' } まさにJavaScriptのオブジェクトですね。*1 JSONPとは？ JSONを以下のように変えたもの。 callback({ 'blog' : 'あと味', 'author' : 'jdg' }); 関数呼び出しっぽいですね。まぁ、関数呼び出しなんですけど。 どゆこと？となるポイント 見た目が関数っぽくなる意外に変更点はないように見えますが、クロスドメインでJSONを読み込む時は、なぜかJSONではなく、JSONPが使われます。（WebAPI等） また、アクセスしたらJSON形式のデータを返す単純なCGIを自分で作りたいと思った場合でも、JSONを返しても、J
13日の金曜日はJSONの勉強をしよう！
今日は13日の金曜日。決戦は金曜日。 13日の金曜日ということで、ジェイソン（JSON）のお勉強をしましょう。 Googleでは、Google AJAX Feed APIというお手軽なAPIが公開されています。 AJAX Feed API を使用すると、JavaScript だけを使用して、公開されている Atom フィードや RSS フィードをダウンロードすることができるので、自分のコンテンツや Google Maps API などの他の API に、フィードを簡単にマッシュアップできます。Flash や、その他の JavaScript を使用しない環境において、API では直接の RESTful インターフェイスを公開します。これは、ほとんどの言語やランタイムで簡単に処理できる JSON エンコードされた結果を返します。 Developer's Guide - Google AJAX
Ajaxを勉強しよう
このページはAjaxを勉強してみたい人向けの学習用ページです。サーバーを入れ替えたため一部CGIを使用したものが動作していません。時間のある時に修正します。また、書いてから、かなり時間が経過しているため内容的に古いものもあります。ご了承ください。 Ajaxで利用されるエフェクトに関しては別ページ(Ajax Effect)に移動しました。 Ajax関連書籍に関してはAjax関連書籍一覧ページを用意しました。 Prototype系ライブラリ サンプルプログラム【New !!】のページを用意しましたので、Prototype系のライブラリを利用している方は参考にしてみてください。 ミスや間違いなどがありましたらopenspc@po.shiojiri.ne.jpまでお願いします。 第一章 Ajaxって？ AjaxとRIA AjaxとDHTML AjaxとFlash Ajaxに必要な知識と技術 Aja
Ajax 月送りカレンダー（jQuery・MT4版）
jQuery を使った Movable Type 4 版の Ajax 月送りカレンダーのカスタマイズです。リアルタイムカレンダー（本日の日付の装飾）および土・日・休日表示も盛り込まれています。 これまでは prototype.js を用いたカスタマイズを公開していましたが、「jQuery版を作ってほしい」というリクエストを頂きましたので、本エントリーにて説明致します。 Ajax 月送りカレンダーの概要は「Ajax 月送りカレンダー」をご覧ください）。 ここではデフォルトテンプレートおよび公開テンプレートをサンプルにしますが、Ajax の動作はテンプレートに依存するものではありませんので、CSS を変更すれば他のテンプレートでもお使いになれます。 １．スクリプトのダウンロード・アップロード 下記のスクリプトをダウンロードします。 jquery.js（"Download" のリンクをクリックし
マウスホイールにも対応した、コンテンツをスクロールさせるためのJavaScriptライブラリ『jquery.scrollable.js』 | IDEA*IDEA
ドットインストール代表のライフハックブログ
Flash不要！JavaScriptで派手なWebデザイン
ブラウザーいっぱいに広がる鮮やかなグラフィック。フェードインでゆっくりと出現する写真画像。スクロールしながら画像に重なっていく半透明のテキストボックス――思わず見とれてしまう、キャンペーンサイトなどでおなじみの“派手なWebサイト”は、フルFlashが一般的だ。「Flashはよく分からないし、そもそもオーサリングツールもない」という個人サイトの制作者はあきらめるしかなかった。 パリ在住のフリーコンサルタント／Webデザイナー「Sebcreation」のWebサイトは、そんな常識を打ち破ることに挑戦している。まずはトップページを見てみよう。 おなじみのローディングアイコン、上下右左から次々とスライドしてくる半透明のテキストボックス……といったダイナミックなデザインに、「またFlashか」と思わずつぶやいてしまうかもしれない。ところがSebcreationでは、アニメーション／エフェクト処理を
jQueryで作る“Amazon風”インターフェイス (1/5)
「最近、どこでよく買い物していますか？」――こう聞かれて「Amazon！」と答える方も少なくないかもしれません（特に本誌読者であれば）。当初は書店の店頭で入手が難しい書籍の購入などに重宝していたAmazonですが、取扱商品が増えた今では、ペットボトルの水からパソコンまで何でも買える便利なECサイトとして、ネット利用者の生活に定着しました。 もっとも、Webサイトを作る立場から見ると、Amazonの魅力は品揃えやサービスだけではありません。Webサイトのデザイン面からAmazonを見ても優れた点は多数あり、実際、国内外の非常に多くのECサイトがAmazonをお手本にしたUIを採用しています。今回は、「Amazon.co.jp」を参考にさせてもらいましょう。 今回のお手本サイト：『Amazon.co.jp』 米アマゾン・ドットコムの日本法人アマゾンジャパンが2000年から運営するECサイト。現
[JS]スムーズにスライドするパネルを実装するスクリプト
Switch On The Codeのエントリーから、スムーズにスライドするパネルを実装するスクリプトを紹介します。 Inline Sliding Panels タブ「Click Me」をクリックすると、パネルがスムーズにスライドし、それに追随して他のコンテンツも移動します。 追随しない旧版は下記です。 Javascript Sliding Panels Inline Sliding PanelsはjQueryやPrototypeなど他のJavaScriptに依存することなく動作し、動作環境はIE7, Fx3, Op9.5, Safari3.1となっています。 ※IE6, Fx2でも動作しました。
メニュークリックでコンテンツをダイナミックにスライドさせるJSサンプル:phpspot開発日誌
jQuery Content Slider Tutorial メニュークリックでコンテンツをダイナミックにスライドさせるJSサンプル。 ナビゲーションメニューをクリックで、コンテンツブロックをズイっとアニメーションさせながら切り替えるサンプルです。 デモページ を見るとその動きが分かります。 ウェブサイトのヘッダー部分に置いておくと、カッコいいだけでなく、ページ遷移なしでヘッダー部分を切り替えることが可能です。 企業用のページなんかでよくある構成ですが、そういったサイトの制作時に使えそうですね。 jQueryベースで動作するみたい。
サイトにクールなポップアップのAjaxメニューをつけられる「PodiPodi」
キーワードは「Shift + Space」。コマンドを打つとその語句を含むメニューが現われます。コマンドは半角英数のみで実行可能ですが、それでもなかなかのもの。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! クールなAjaxメニューをつけられる「PodiPodi」 ここをクリックしてもメニューが出てきます。 メニューに設定可能なもの 「Shift + Space」を押した後に下記コマンドに含まれる語句を一字だけ半角英数で入力すると出てきます。 コマンド：Bookmarks あらかじめ設定したサイトへのリンク一覧を表示できます。 コマンド：Creditsあらかじめ登録した内容を表示します。 コマンド：Tell a friend友達にこのサイトをメールで教えてあげることができます。 コマンド：You
Ajaxによるエラーチェックの注意点 (ユーザビリティ実践メモ)
入力フォームについて、最近ではAjaxを用いることで、「送信」ボタンをクリックする前にエラーチェックをする手法が使われるようになっています。 今回はリアルタイムでフォームのエラーチェックを行う場合の注意点について考えてみます。 あまり良くない例：Remember the Milkの登録画面 http://www.rememberthemilk.com/signup/ ユーザ名を入力する欄では、入力と同時にエラーチェックが行われるため、多くの場合1文字目からエラーが表示されます。 2文字目を入力すると即座にエラーメッセージが更新されます。 ユーザが当初から自分のユーザ名として考えていた「bebittaro」を入力し終えると、利用可能である旨のメッセージが表示されます。 上記は入力に対しリアルタイムでフィードバックを返すことで誤入力を避けようという工夫ですが、ユーザが入力を終える前にエラー表示
2行＋αでラクになる！フリガナ入力を自動化するJavaScript
先日、HTMLフォームの入力作業を便利に楽しくしてくれるJavaScriptを紹介した。地図で都道府県名を選択すると、それがフォームに自動入力されるという画期的なものだったが（関連記事）、このたび、またまた便利なJavaScriptが登場した。SOURCE Lab.作の「AutoRuby.js」がそれ。フォームの名前入力欄に、フリガナを自動入力してくれるJavaScriptだ（作者のブログ）。 さっそく使ってみた。サンプルとして組み込んだのは、前回の記事でも使用したフォーム。作者のブログからファイル一式をダウンロードし、説明に従ってHTMLの<head>～</head>内に、以下の2行を追加する。 ■<head>～</head>に追加 <script type="text/javascript" src="prototype.js"></script> <script type="text
フォームのフリガナを自動入力させるAutoRuby.js | ホームページ制作・運営のヒント
&lt;script Language=”javascript” src=”http://ad.jp.ap.valuecommerce.com/servlet/jsbanner?sid=2456113&amp;pid=877160106″&gt;&lt;/script&gt;&lt;noscript&gt;&lt;a href=”http://ck.jp.ap.valuecommerce.com/servlet/referral?sid=2456113&amp;pid=877160106″ target=”_blank” &gt;&lt;img src=”http://ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=2456113&amp;pid
[JS]jQueryのプラグイン33+1選 -2008年6月 | コリス
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 iPod-style Drilldown Menu iPod風に切替わるドリルダウンメニュー。 iPhone Lock Slider
【ハウツー】わずか数行で"ものすごいテーブル"に! - jQueryプラグイン「Flexigrid」 (1) ドラッグ&ドロップでカラム幅を変更可能 | エンタープライズ | マイコミジャーナル
Webアプリケーションの操作性を向上させるために、いまや欠かすことのできないJavaScript。Prototype.jsやjQueryといった各種フレームワークを使用して、ユーザビリティを高めている開発者も少なくないだろう。 ここ数年の間でYahoo! UI LibraryやExt JS、Dojo Toolkitといった、開発のしやすさや・操作性の向上はもちろんのこと、綺麗なデザインも兼ね備えているライブラリが増えてきた。既存のWebアプリケーションに少しのコードを追加するだけで、機能もデザインも付加できるこれらのライブラリは非常に魅力的だ。 ここではテーブルで組んだリストに対して、まるで表計算ソフトのような操作性を提供するFlexigridライブラリを紹介したい。 ネイティブアプリケーション並みのリストを実現 FlexigridとはPaulo P. Marinas氏が開発・公開している
★[JS]省スペースにも最適なアコーディオンのスクリプト集 | コリス
WebTeckerのエントリーから、jQueryやPrototypeやMooToolsなどライブラリを使用するものや、単独で動作するアコーディオンのスクリプトを紹介します。 Great Accordion Scripts
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Android, WebView and AJAX
not found
透明感のあるデザインをJavaScriptで実装する（glassbox.js） - youmos
[JS]指定したタグやクラスにツールチップを実装するスクリプト -UniTip