pjaxできれいなURL＋非同期画面遷移！ | ヘッドウォータースのブログ TechNote
こんにちは。荒井です。 Facebookもtwitterもgoogleも画面遷移のときには、非同期で次のページを読み込むような作りになってますね！ これは、ajaxで次のページを読み込むのと同時に「History API」というHTML5の機能を使って、URLを更新することで実現してます。 毎回全部読み直さないから通常の画面遷移よりも早いし、URLが変わるから履歴に残るし、良いことばっかり！！SEO的にも「#!」を使ったやつより良いよっていうのを何かで読みました！！！ これからWebサービスを作るなら、導入したいですね！！！ これpjaxを使えば簡単に導入できるんです！！！よし！！！ PJAX!! pjaxとは、GithubのChris Wanstrathって人が作ってるjqueryプラグインです。 上で説明した、History APIとajaxを使った非同期の画面遷移を簡単に導入すること
History API - Dive Into HTML5 (日本語訳)
Manipulating History for Fun & Profit ❧ Diving In ブラウザのロケーションバーは世にある UI のなかで最もギークなもののひとつだろう。URL はビルボードや電車の車体、はたまたグラフィティにまで現れる。戻るボタン (ブラウザでもっとも重要なものだ) と組み合わせれば、Web と呼ばれる複雑に絡みあったリソースの集合を行き来するとても強力な手段となる。 HTML5 の History API はブラウザのヒストリ情報をスクリプトから操作する機能だ。この API の一部にはヒストリを行き来する機能があるが、これは以前の HTML の頃より存在していた。HTML5 では、ブラウザのヒストリにエントリを追加する機能、ページの更新なしにロケーションバーの URL を書きかえる機能、ユーザーが戻るボタンを押しそのエントリがスタックから削除される際に発火
githubがhistory.replaceState使ってた - Webtech Walker
JavaScriptでhistory.pushStateとhistory.replaceStateっていう履歴管理のための仕様があるんですけど、これを使うとlocation.hashを使って実装しているような、ページ遷移をしないでコンテンツを入れ替える（Twitterの新UIみたいな）ものを実現できます。 5.4 Session history and navigation — HTML5 Manipulating the browser history - MDC Doc Center で、これを実際使ってるところは見たことなかったんですけど、githubがいつの間にか使ってました。適当なリポジトリに入ってhistory.replaceStateをサポートしてるブラウザ（現時点ではchromeかsafari）で見るとページ遷移なしで動いて、切り替わるときにURLが書き換わってるのがわかる
[HTML5]History APIめも - l4l
spec http://www.w3.org/TR/html5/history.html HTML5以前のHistoryオブジェクトI/F window.historyでアクセスできるホストオブジェクト。ブラウザの進む／戻るに対するJavaScript APIのみでした。 interface History { void go(in optional long delta); void back(); void forward(); }; HTML5以後のHistoryオブジェクトI/F stateプロパティ、pushState, replaceStateメソッドが追加されました。ただChrome13(Webkit/535.1)においてはstateプロパティは未実装のよう。 interface History { readonly attribute long length; readon
pjax こそが pushState + Ajax の本命 - punitan (a.k.a. punytan) のメモ
pjaxの前にpushStateとは AjaxとjQueryの説明は不要として、pushStateとはなんぞや。 pushStateを使ってブラウザの履歴に対する操作をし、HTMLの一部のみを書き換える動作でもブラウザの戻る／進む機能を実現できる方法のひとつ。Ajaxなページを再現し、かつURLを見慣れた方法で自然にpermalinkを表現できる。 有名なところではGitHubで使われてるアレ。 hash fragment (/#!/) ブラウザの履歴を機能させるため、URL の fragment (#) を使ってAjaxなページを実現する方法。一時期もてはやされた感があるが、さらなる「#!」URL批判 - karasuyamatenguの日記 など合理的な反論があり、これから導入するのはためらわれるところ。 有名なところではTwitterで使われているあの厄介者。 pjaxとは pjax
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
