Tim Bray: 「URLに#!入れるな」 - karasuyamatenguの日記
Tim Bray(GoogleのAndroid応援団長)が「#!」の入ったajax用URLを使用を批判している。 http://www.tbray.org/ongoing/When/201x/2011/02/09/Hash-Blecch new: さらならる「#!」URL批判 例にtwitterのtwitter.com/#!/timbrayを挙げている。 #!の働き サーバ側は#!の前までしか見えない。上の例だとサーバはtwitter.com/のリクエストを受ける #!以降はブラウザの中のジャバスクリプトが解釈する 何故#!を使うのか ajaxのアプリは古いブラウザでは基本的にURLを変更することができない… ただし#(フラグメント)以降はブラウザ内のJavaScriptからでも変更可能 なので、ajaxアプリケーションが自分の状態をURLバーに表示するために使われるようになった。 つまり
ピュアAJAXアーキテクチャのススメ
先日、ここで発表したFacebookユーザーむけグループウェア「Fruence.com」。今年のトレンドになるであろう「ソシアル・アプリ」の実例という意味もあったが、私自身の中で少し前から形になりつつあった「AJAXを最大限に活用した新しい形にウェブ・アプリケーション」のアーキテクチャの実践という意味合いも大きい。 このアーキテクチャの特徴は以下の３つである。 サーバー側は、JSON over HTTPのAPIとHTML/CSS（およびそのテンプレート）をスタティックな形でのみ提供する（サーバー側では、ダイナミックなHTMLの生成はしない） クライアント側では、JavaScriptを使ってサーバーから取得したJSONとHTMLのテンプレートを組み合わせて（データ・バインドして）表示する。 ウェブサイトはあたかも独立したアプリのように動き、操作中はURLは一切変化しない もともとは、HTML
TwitterやFacebookのURLには、なぜ#!が含まれるのか (SEOとAjaxのおいしい関係) - kazuhoのメモ置き場
Ajaxを使うためにはページ内リンク (hash fragment=URLの#以降) を使うのが一般的*1 hash fragmentはサーバに送信されないから、JavaScript非対応のブラウザだと動作しない 特にサーチエンジンのクローラ等で問題になる*2 そこで Google は、#! が含まれる URL を hash を含まないものに読み替える仕組みを提唱している。例えば「www.example.com/ajax.html#!key=value」のサーチエンジン用URLは「www.example.com/ajax.html?_escaped_fragment_=key=value」になる。 TwitterやFacebookはこの仕様に従うことで、Ajax な UI と SEO を同時に実現している、というわけ。ということを調べたなう。 参照: Getting Started |
Ajax - Goodbye, JSONP. Hello, Access-Control-Allow-Origin : 404 Blog Not Found
2010年08月17日06:45 カテゴリLightweight Languages Ajax - Goodbye, JSONP. Hello, Access-Control-Allow-Origin もうそろそろJSONPとはお別れできるのではないかと思い立ったので。 XMLHttpRequestとその問題 AjaxといえばXHRの愛称で親しまれているXMLHttpRequestですが、これには一つ重大な欠点がありました。 これを発行するDHTMLページのドメインが、Request先のドメインと一致する必要があったのです。いわゆる Same Origin Policy というやつです。おかげでサイトをまたがって使えなかったのです。これではマッシュアップできない。どうしよう。 JSONPとその問題 そこで生まれたのが、JSONPという手法です。 これは、scriptノードを追加した時に、単
ajaxで簡単ファイルアップロードが可能なjQueryプラグイン「jQuery.upload」:phpspot開発日誌
jQuery.upload: A simple ajax file upload plugin ajaxで簡単ファイルアップロードが可能なjQueryプラグイン「jQuery.upload」 同じページ内に生成したiframeへデータをPOSTすることで、非同期にファイルをアップロードが可能にするものです。 ファイルを選択すると即時にアップロードが開始するのが特徴 アップロードを完了すると次のように、ファイル名・サイズといったファイル情報が表示されるデモが公開されています。 ファイルアップロードを頻繁に行うようなケースにおいて、便利に使えるインタフェースが組み込めそうですね。 関連エントリ ajaxファイルアップロードに使えるjQueryプラグインいろいろ PHPでファイルアップロードの処理を超簡単にするクラス例「EasyUp」 ファイルアップロードの際に便利なFlash/JavaScri
40分で覚える！jQuery速習講座 (1/6)
いまやWeb制作に欠かせなくなったJavaScript。でも、「JavaScriptはほとんど“アリモノ”で済ませている」という方も多いのでは？ そこで、WebデザイナーやマークアップエンジニアなどのWeb制作者の方向けに、いま一番人気のJavaScriptライブラリー「jQuery」の基本を学べる特別レッスンをお届けします。題して、「40分で覚えるjQuery」。要点だけにぎゅっと絞って解説しますので、手を動かしながら今すぐjQueryを始めましょう。 【0分目：導入編】 jQueryのダウンロードと利用方法 jQueryのライブラリー本体（JavaScriptファイル）は公式サイトからダウンロードし、head要素などにscript要素を書いて読み込みます。
ハイテンションAjax入門 - 三等兵
JSが少しできる人ならうじうじ考えるほどのこともでもない！ 何も難しいことはない！ぶっとんぢまいなよ！ヒャッパー！！！ というノリでAjaxを学んでみました。醜いです。 Ajax入門 Ajaxはいろいろできるんだぜ！ 以上入門終り！キミは完璧だ！次いけ！ Ajaxは非同期通信だかなんだかそんなもんはどうでもいいんだ！ どうでもいい！そんなことよりもXMLHttpRequestオブジェクト生成！ var request = false; if(window.XMLHttpRequest) { request = new XMLHttpRequest(); //frefox ie7,8 safai opera } else if(window.ActiveXObject) { try { request = new ActiveXObject("Msxml2.XMLHTTP"); // ie6
YappoLogs: Ajax アプリ等の為の JavaScript コードのテストツール JSTAPd を作ってるよ
Ajax アプリ等の為の JavaScript コードのテストツール JSTAPd を作ってるよ Data::ObjectDriverをDISってる人の話題が三周目に突入した今日この頃ですが皆さんは何をDISってますか?Yappoです。 JavaScript にもテストツールが色々とあると思うんですが、 Ajax アプリの XHR リクエストとかも含めてラクチンにテストできるツールが見つからなかったので JSTAPd というツールを作りました。 http://github.com/yappo/JSTAPd 名前の通りテスト結果はTAPで出力してるのでproveコマンドとかを使ってPerlの作法でテストできます。 ブラウザの連携の設定をすれば prove -v foo/hoge.t とかをコマンドで打ち込めば勝手にブラウザ立ち上げてテストコード実行してブラウザ閉じて結果をコンソールに吐いてく
JSONファイルをFirefox上で閲覧する·JSONView MOONGIFT
Webアプリケーションが増えるに従って、JSONフォーマットを利用する機会も増えてきた。だがJSONファイルの扱いはそれほど良くなく、Firefoxの場合ダウンロードのダイアログが開いてしまう。それにシステム向けに改行なしで作られているケースが多く閲覧には不向きだ。 JSONフォーマットをFirefox上で閲覧できる 今後さらに利用が進んでいくと思われるだけに、扱い勝手が悪いのは問題だ。そこで使ってみたいのがJSONViewだ。 今回紹介するオープンソース・ソフトウェアはJSONView、Firefox上でJSONファイルを閲覧できるようにするFirefoxアドオンだ。 JSONViewをインストールした状態でJSONファイルを開くとダウンロードダイアログが開かず、そのままソースが見られるようになる。キー、文字列、数値とそれぞれハイライト化されて表示されるので分かりやすい。配列やハッシュの
［気になる］JSONPの守り方
XSSにCSRFにSQLインジェクションにディレクトリトラバーサル……Webアプリケーションのプログラマが知っておくべき脆弱性はいっぱいあります。そこで本連載では、そのようなメジャーなもの“以外”も掘り下げていきます （編集部） JSONPだって、セキュリティを気にしてほしい 皆さんこんにちは、はせがわようすけです。今回は、JSONPを使用する場合のセキュリティについて解説しましょう。 JSONPとは、JSON with Paddingの名称が示しているとおり、JSON形式のデータにコールバック関数の呼び出しのためのコードを付加することで、クロスドメインでデータの受け渡しを実現するためのデータ形式です。JavaScriptからクロスドメインでのデータが簡単に扱えることなどを理由に、多数のWebアプリケーションでAPIの一部としてJSONP形式でデータの提供が行われています。 具体的な例を見
JavaScriptツール&ライブラリ50選 | エンタープライズ | マイコミジャーナル
Smashing Magazine - WE SMASH YOU WITH THE INFORMATION THAT WILL MAKE YOUR LIFE EASIER, REALLY. Smashing Editoria氏がSmashing Magazineにおいて50 Fresh JavaScript Tools That Will Improve Your Workflowのタイトルで50のJavaScriptに関連したツールやライブラリを紹介している(実際には51)。RIA開発においてJavaScriptは重要な地位を占めつつあり、適切な開発ツールやライブラリ、フレームワーク、プラグインを選択することは、迅速で効果的な開発を実現するために欠かせない。紹介されているツールやライブラリは次のとおり。 JavaScriptツール FireUnit (Firebug向けJavaScrip
JavaScript正規表現メモ。 (JavaScriptでよく使う書き方。) - こせきの技術日記
タイトル変えました。旧タイトル「JavaScriptでよく使う書き方」。よく使うけど毎回忘れる。 正規表現にマッチするかどうか。 RegExp#testを使う。 /abc/.test("abcdefg") // => true String#searchはマッチした位置を返す。マッチしない場合は-1。先頭にマッチすると0でfalseなので注意。真偽値が欲しい場合はString#searchを使わない。 "abcdefg".search(/xxx/) // => -1 "abcdefg".search(/def/) // => 3 "abcdefg".search(/abc/) == false // => true 正規表現の部分マッチを得る。 部分マッチを得るには、RegExp#execかString#matchを使う。execとmatchの速度は大して変わらない。 正規表現のベンチマー
グーグルが賭けるHTML 5の未来 － ＠IT
2009/05/28 「決してWebをあなどってはいけない」（Never underestimate the Web）。Google I/O 2009初日の基調講演でシュミットCEOに続いて登壇したのは、米グーグル バイス・プレジデントのビック・グンドトラ氏だ。ゆっくりと一語一語を区切りながら語り始めたグンドトラ氏の言葉には重みがある。彼は元マイクロソフト社員で、まさにWebをあなどっていた側にいたからだ。 グンドトラ氏はWindowsプラットフォームを唱道する立場にあった。彼に限らず、マイクロソフト社員の間には、ネイティブアプリケーションでなければできないことがあるとする見方が一般的だったという。「Keyholeという会社が出てきたとき、彼らが持つようなアプリケーションこそ、ネイティブでなければできないものだと言っていた。ところがグーグルは2004年11月にKeyholeを買収し、Goo
これは注目！jQueryでExtばりにリッチなＵＩが実装できる「jQuery Ribbon」:phpspot開発日誌
これは注目！jQueryでExtばりにリッチなＵＩが実装できる「jQuery Ribbon」 2009年05月28日- jQuery Ribbon - Home これは注目！jQueryでExtばりにリッチなＵＩが実装できる「jQuery Ribbon」。 利用すれば、コントロールのグルーピングや、ドロップダウンメニュー、階層リストなどのリッチなコンポーネントが実装できるみたい。 jQuery Ribbonを使ったリッチなＵＩ。Windows7っぽいデザインのＵＩがJavaScriptで。 アイコン付きのかっこいいメニュー 表示しているＵＩのテーマを選べる アイコンつきリスト アイテムのグルーピング ドロップダウンメニュー ちょっとこれは素晴らしいですね・・・。jQueryの優位性がますます高くなってしまいましたね。 関連エントリ ナビゲーションのUIはこれで完璧かもなjQueryプラグイ
JSONPを使ってJavaScriptだけでマッシュアップ
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、Yahoo!地図の開発を担当しています前田博敏です。 今回は、JavaScriptから外部サイトのWeb APIを直接呼び出すことができる、JSONPという手法について紹介させていださきます。 JSONPとは JSONPとは、JavaScriptの外部ファイル読み込み（「script」タグとその「src」指定）を利用して、ドメインの異なる外部サイトのデータを読み込む手法のことを言います。 JSONPを利用するには、呼び出される側のWeb APIがJSONP形式に対応している必要があります。 Yahoo!デベロッパーネットワークでは、現在のところローカルサーチAPIとショッピングAPIが、JSONP形式に対応しています。
Ajax開発等に超便利なページ内の変更部分が一発で分かるFirefoxアドオン「Firediff」:phpspot開発日誌
Ajax開発等に超便利なページ内の変更部分が一発で分かるFirefoxアドオン「Firediff」 2009年04月20日- Firediff - In Case of Stairs Ajax開発等に超便利なページ内の変更部分が一発で分かるFirefoxアドオン「Firediff」。 これは欲しかった！という機能がついにリリースされました。 インストールにはFirebug1.4が必要で、Firebug1.4a17以降が推奨されています。 Firebug1.4のダウンロードはこちらから可能です。 まず、インストールすると、次のように、FirebugにChangesタブが表示されます。 で、実際どうやって使えるか？見てみましょう。 (1) DOMインスペクタをいじった結果をDIFF たとえば、DOMインスペクタの中で、要素を編集してみます。 2009年4月16日を2009年にしてみました。 す
PHP+Ajaxの日本語も対応した超高機能ファイルマネージャ
いいですねこれ。 AjaxとPHPの4と5で動きます。実行するのに、データベースを使用しないという点も見逃せませんねぇ。 主な機能もご紹介。 ダウンロードは以下から Ajaxplorer.info : the ultimate ajax file manager. ドキュメント Ajaxplorer.info サンプルデモ http://www.ajaxplorer.info/demo/ ユーザー名 demo パスワード demo 主な機能 ファイル/フォルダの操作。ダウンロード。 名前の変更/コピー/移動/削除/。 そして画像のサムネイル表示。 また、検索機能も付いているので、ファイルを探すのが楽そうです。 FLASHプレイヤー内臓なので、FLASHも直接見れる。 ZIPファイルもファイルマネージャー上で閲覧が出来る。 MP3もその場で聞ける。 目的のファイルをブックマークする事ができ
Aptanaで始めるJavaScriptライブラリ「jQuery」超入門
JavaScriptライブラリ「jQuery」とは？ 最近、Flashの代わりにJavaScriptを利用してリッチなデザインのWebサイトを構築する事例が増えてきました。特にグーグルのサービスは、JavaScriptをうまく取り入れている例として誰もがご存じでしょう。 例えばGoogleマップは、Webブラウザ上でマウスをドラッグ＆ドロップするだけで、地図を自由に操作できます。このような操作感は、まるでWebサイトであることを意識させない作りになっています。 本来、JavaScript自体はインターネットが広まり始めたころから存在していて、決して目新しい技術ではないのですが、Webブラウザの種類やバージョンによって挙動が異なることから、JavaScriptを使って大掛かりな仕組みを作ることは不可能だと考えられてきました。 しかし、最近ではWebブラウザは自動的にバージョンアップされるよう
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Site Under Maintenance
Site Under Maintenance
