狠狠撸

狠狠撸Share a Scribd company logo
Pjax
Rubyist九州
山崎重一郎
            Rubyist九州2011年11月例会
            2011年11月26日
Webアプリって
? いちいちページ遷移して使いにくい
? 反応が悪い
? そもそも、サーバ側でユーザの操作に対するアクションを処
  理したり、ビューを生成したりする必要があるのか?

                         サーバ

                         アク
                        ション

                        ビュー
              データとビュー    生成
              HTML
Webアプリって
? ブラウザ側でやれることはブラウザ側でやれば?
? ひとつのアプリの中でページ遷移って必要?
? ブラウザ内で、DOM要素だけ処理すればいいんじゃない?
? 必要なデータだけJSONとかでサーバからもらえばいいじゃん。
                           サーバ

           アク
          ション
                  データのみ
                  JSON等
          ビュー
           生成
じゃあAjaxなの?

? リソースにちゃんとしたURLがついてないと
ブックマークできない、検索エンジンにひっかからない
というか、そもそもそのリソースをWebで共有できないじゃないか

? REST の基本は重要!
リソース状態の流通 (REpresentational State Transfer)
   → サーバをステートレスに保ちながら、リソースの状態は表現で
 きる
 例:リソースへのアクセス権限状態(OAuthのアクセストークンなど)

?ほら! やっぱりAjaxじゃだめじゃん
ブラウザ側のリソースと
 サーバ側のリソース
? Ajax的なシステムでも同一のURLが指すのは同一のリソース

? 直接サーバにURLでアクセスした場合 →     サーバからGET

? Ajax的に同じURLでアクセスした場合   → ブラウザ側で生成


                               サーバ

      リソース     アク           リソース
              ション
      リソース                  リソース

      リソース    ビュー           リソース
               生成
ブラウザ側にリソース表現の
 実体が構成された場合

? Ajax的にDOM要素の構成でできたリソース
? その場合も仮想的にサーバ側にもリソースが存在しているよう
  にしたい
→ バックボタン、ブックマーク、検索エンジン、Web共有


                             サーバ

      リソース    アク           リソース
             ション
      リソース                 リソース

      リソース   ビュー           リソース
              生成
URLで直接的にリソースにアクセス
した場合
? もともとそのリソースはサーバに存在しているよ、という感じ
? ページの姿はブラウザ側で構成したものと全く同一にしたい




                       サーバ

                     リソース

                     リソース

                     リソース
Webブラウザの基本構成
(かなりいいかげんですが...)
? <a href="">...</a> をクリックしたとき

                  Webブラウザ
  クリック                              http GET など
         エンティティ
          マネージャ
                                  LF (ヘッダ) CR       サーバ
                                  LF (ボディ) CR

         historyスタック

    表示
           レンダラ             DOM     <h1>aaa</h1><p>...
Pjax 魔法のしくみ1
? jQuery で、ブラウザの機能を抑制/入替
? HTML5 のpushState でhistoryスタックに履歴をプッシュ

                  Webブラウザ
  クリック                              http GET などをしたつもり
         エンティティ
          マネージャ          XjQuery
                        preventDefault(
                               )
         historyスタック             HTML5
                              pushState
   表示
           レンダラ             DOM
ブラウザの機能を抑制/入替え
? preventDefault()
  <!doctype html>
  <html>
  <head>
  <meta charset="UTF-8">
  <title>preventDefalut()のテスト</title>
  <script type="text/javascript" src=/11ro_yamasaki/pjax1/&
  </head>
  <body>
  <h1>preventDefault()のテスト</h1>
  <p>
  <a id="enable" href="http://www.cacanet.org">このリンク</a>は有効にされています。
  <a id="disable" href="http://www.cacanet.org">このリンク</a>は無効にされています。
  </p>
  <p id="message"></p>
  <script type="text/javascript">
  $("#disable").click(function (e) {
     e.preventDefault();
     $("#message").html("ほら、ページ遷移しないでしょ?");
  });
  </script>
  </body>
  </html>
HTML5 の history.pushState

? history.pushState(historyオブジェクト, タイトル, URL);
 ブラウザの閲覧履歴スタックに強引にタイトルやURLを強引にプッシュ
 → とりあえずブックマークできる。
    <html><head><meta charset="UTF-8">
    <title>最初のページ</title>
    <script>
    function ps() {history.pushState(null,null,"http://rubyist.org/");}
    </script>
    </head>
    <body>
    <h1>pushSateのテスト</h1>
    <form>
    <input type="button" value="URLに注目" onclick="ps()" />
    </form>
    </body></html>
Pjax = jQueryの jquery.pjax.js
  これがPjaxのオリジナル
? pushState + Ajax = Pjax
 https://github.com/defunkt/jquery-pjax   直接URLを入れても
                                          同じページが表示される
 デモページ:http://pjax.heroku.com/
jquery.pjax.js
? リクエストヘッダに HTTP_X_PJAX           を含める
? サーバ側は、HTTP_X_PJAXのときはAjax的にデータだけ送る
 そうでなければ、レイアウト付きのHTMLを返す

                  Webブラウザ
  クリック
         エンティティ
          マネージャ         X                 HTTP_X_PJAX
                           jQuery
                        jquery.pjax.js
                                                        サーバ
         historyスタック           HTML5         データ
                              pushState      だけ
   表示
           レンダラ             DOM
jquery.pjax.jsの使用例
? sinatraの場合
   # -*- coding: utf-8 -*-
   require 'sinatra'

   get '/' do
    erb "<h1>トップページです</h1>", :layout => !env['HTTP_X_PJAX']
   end

   get '/hello' do
    erb "<h1>こんにちは!<%=Time.now%></h1>", :layout => !env['HTTP_X_PJAX']
   end

   __END__
   @@layout
   <!doctype html><html><head>
   <title><%= @title %></title>
   <script type="text/javascript" src=/11ro_yamasaki/pjax1/"http:/code.jquery.com/jquery-1.7.min.js"></script>
   <script type="text/javascript" src="http://pjax.heroku.com/jquery.pjax.js"></script>
   <script type="text/javascript">$("a.pjax").pjax("#main");</script>
   </head>
   <body>
   <ul>
    <li><a href="/" class="pjax">ホーム</a></li>
    <li><a href="/hello" class="pjax">あいさつ</a></li>
   </ul>
   <div id="main"><%= yield %></div>
   </body></html>
サーバ側の魔法の種明かし
? リクエストヘッダのHTTP_X_PJAXの有無チェックとレイアウ
  トの抑制判定
  get '/' do
   erb "<h1>トップページ</h1>", :layout => !env['HTTP_X_PJAX']
  end


? Ajax的にDOM要素を更新する部分の指定(divでyieldを囲む)
  <div id="main"><%= yield %></div>


? a タグ(pjaxクラスの)に対するpjaxの適用
   <li><a href="/" class="pjax">ホーム</a></li>
   <li><a href="/hello" class="pjax">あいさつ</a></li>

  <script type="text/javascript">$("a.pjax").pjax("#main");</script>
PjaxはRails3.2 から標準になる

? 利点は明らかだから当然
? 今後のWebアプリケーションは基本的にページ遷移しなくなる
? Rails流のMVCも見直しが必要
 コントロールやビュー生成の大部分をcoffeeScriptでやるの?

? Pjax を基本にした、すっきり新しいWebアプリフレームワーク
  を新規設計した方がはやい
でも、なぜこんなにうまくいくのか?

? historyに pushState を追加しただけなのに?
? なにか基本的な原理がありそう
Rubyistの目線からの妄想
? historyへのプッシュは、クロージャによるメモ化に似ている
  理論的なかっこいいアプローチもあるかも
? クロージャによるメモ化
 関数の入力と出力の視点からの意味は変わらない
 既存の計算結果のキャッシュを使うか、関数の処理を実際に計算するか

? Pjax
 同じURLにアクセスしたときのページの姿は変わらない
 ブラウザ側でページ要素のみを構成するか、サーバからページ全体を
 持ってくるか


? Haskellの人は、「それはxxモナドだよ」とか言うかも...
Ad

Recommended

厂笔础のルーティングの话
厂笔础のルーティングの话
ushiboy
?
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
yoshikawa_t
?
jQuery Mobile 1.2 最新情報 & Tips
jQuery Mobile 1.2 最新情報 & Tips
yoshikawa_t
?
jQuery Mobile 1.3 最新情報
jQuery Mobile 1.3 最新情報
yoshikawa_t
?
Web 04
Web 04
XMLProJ2014
?
DEV-010_エンプラ系業務 Web アプリ開発に効く! 実践的 SPA 型モダン Web アプリ開発の選択手法
DEV-010_エンプラ系業務 Web アプリ開発に効く! 実践的 SPA 型モダン Web アプリ開発の選択手法
decode2016
?
HTML5 on ASP.NET
HTML5 on ASP.NET
Fujio Kojima
?
Okinawapm#3
Okinawapm#3
Kei Kamikawa
?
笔测谤补尘颈诲入门
笔测谤补尘颈诲入门
Atsushi Odagiri
?
Start React with Browserify
Start React with Browserify
Muyuu Fujita
?
Google Dev Fest 2010 Japan LT: OpenSocial JavaScript API is good, Lightweight...
Google Dev Fest 2010 Japan LT: OpenSocial JavaScript API is good, Lightweight...
Nobuhiro Nakajima
?
jQuery Mobileの基礎
jQuery Mobileの基礎
Takashi Okamoto
?
【社内LT】JSあれこれ -読み込み編-
【社内LT】JSあれこれ -読み込み編-
Vitalify.Inc
?
诲别惫颈蝉别を利用した认証について@惭颈苍补尘颈谤产
诲别惫颈蝉别を利用した认証について@惭颈苍补尘颈谤产
Jun Fukaya
?
WordPressで提供するWeb API
WordPressで提供するWeb API
Yuko Toriyama
?
Twitter連携chrome extension作り方
Twitter連携chrome extension作り方
Hiroshi Oyamada
?
贵濒补蝉办勉强会その1
贵濒补蝉办勉强会その1
Masato Kawamura
?
奥辞谤诲笔谤别蝉蝉と外部础笔滨との连携
奥辞谤诲笔谤别蝉蝉と外部础笔滨との连携
Hidekazu Ishikawa
?
xmile by dreamfarmer
xmile by dreamfarmer
?? ?
?
Test for procedure text (writing test)
Test for procedure text (writing test)
aryantifitri
?
HTML5 ? ??? ?????? ??
HTML5 ? ??? ?????? ??
Zany Lee
?

More Related Content

What's hot (18)

DEV-010_エンプラ系業務 Web アプリ開発に効く! 実践的 SPA 型モダン Web アプリ開発の選択手法
DEV-010_エンプラ系業務 Web アプリ開発に効く! 実践的 SPA 型モダン Web アプリ開発の選択手法
decode2016
?
HTML5 on ASP.NET
HTML5 on ASP.NET
Fujio Kojima
?
Okinawapm#3
Okinawapm#3
Kei Kamikawa
?
笔测谤补尘颈诲入门
笔测谤补尘颈诲入门
Atsushi Odagiri
?
Start React with Browserify
Start React with Browserify
Muyuu Fujita
?
Google Dev Fest 2010 Japan LT: OpenSocial JavaScript API is good, Lightweight...
Google Dev Fest 2010 Japan LT: OpenSocial JavaScript API is good, Lightweight...
Nobuhiro Nakajima
?
jQuery Mobileの基礎
jQuery Mobileの基礎
Takashi Okamoto
?
【社内LT】JSあれこれ -読み込み編-
【社内LT】JSあれこれ -読み込み編-
Vitalify.Inc
?
诲别惫颈蝉别を利用した认証について@惭颈苍补尘颈谤产
诲别惫颈蝉别を利用した认証について@惭颈苍补尘颈谤产
Jun Fukaya
?
WordPressで提供するWeb API
WordPressで提供するWeb API
Yuko Toriyama
?
Twitter連携chrome extension作り方
Twitter連携chrome extension作り方
Hiroshi Oyamada
?
贵濒补蝉办勉强会その1
贵濒补蝉办勉强会その1
Masato Kawamura
?
奥辞谤诲笔谤别蝉蝉と外部础笔滨との连携
奥辞谤诲笔谤别蝉蝉と外部础笔滨との连携
Hidekazu Ishikawa
?
DEV-010_エンプラ系業務 Web アプリ開発に効く! 実践的 SPA 型モダン Web アプリ開発の選択手法
DEV-010_エンプラ系業務 Web アプリ開発に効く! 実践的 SPA 型モダン Web アプリ開発の選択手法
decode2016
?
笔测谤补尘颈诲入门
笔测谤补尘颈诲入门
Atsushi Odagiri
?
Start React with Browserify
Start React with Browserify
Muyuu Fujita
?
Google Dev Fest 2010 Japan LT: OpenSocial JavaScript API is good, Lightweight...
Google Dev Fest 2010 Japan LT: OpenSocial JavaScript API is good, Lightweight...
Nobuhiro Nakajima
?
【社内LT】JSあれこれ -読み込み編-
【社内LT】JSあれこれ -読み込み編-
Vitalify.Inc
?
诲别惫颈蝉别を利用した认証について@惭颈苍补尘颈谤产
诲别惫颈蝉别を利用した认証について@惭颈苍补尘颈谤产
Jun Fukaya
?
WordPressで提供するWeb API
WordPressで提供するWeb API
Yuko Toriyama
?
Twitter連携chrome extension作り方
Twitter連携chrome extension作り方
Hiroshi Oyamada
?
贵濒补蝉办勉强会その1
贵濒补蝉办勉强会その1
Masato Kawamura
?
奥辞谤诲笔谤别蝉蝉と外部础笔滨との连携
奥辞谤诲笔谤别蝉蝉と外部础笔滨との连携
Hidekazu Ishikawa
?

Viewers also liked (7)

xmile by dreamfarmer
xmile by dreamfarmer
?? ?
?
Test for procedure text (writing test)
Test for procedure text (writing test)
aryantifitri
?
HTML5 ? ??? ?????? ??
HTML5 ? ??? ?????? ??
Zany Lee
?
?????? ?? ??? ??
?????? ?? ??? ??
?? ?
?
Hybrid Mobile Application Framework
Hybrid Mobile Application Framework
?? ?
?
?????(Open platform) ?? ? ??
?????(Open platform) ?? ? ??
Youngjo Seong
?
xmile by dreamfarmer
xmile by dreamfarmer
?? ?
?
Test for procedure text (writing test)
Test for procedure text (writing test)
aryantifitri
?
HTML5 ? ??? ?????? ??
HTML5 ? ??? ?????? ??
Zany Lee
?
?????? ?? ??? ??
?????? ?? ??? ??
?? ?
?
Hybrid Mobile Application Framework
Hybrid Mobile Application Framework
?? ?
?
?????(Open platform) ?? ? ??
?????(Open platform) ?? ? ??
Youngjo Seong
?
Ad

Similar to Pjax1 (20)

第19回html5とか勉強会 pjax
第19回html5とか勉強会 pjax
Kensaku Komatsu
?
Hijax - 少しずつAjaxへ
Hijax - 少しずつAjaxへ
Yi Gu
?
徳丸本に载っていない奥别产アプリケーションセキュリティ
徳丸本に载っていない奥别产アプリケーションセキュリティ
Hiroshi Tokumaru
?
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Shumpei Shiraishi
?
Web制作勉強会 #2
Web制作勉強会 #2
Moto Yan
?
Ajax basic
Ajax basic
Katsuyuki Seino
?
jQuery と MVC で実践する標準志向 Web 開発
jQuery と MVC で実践する標準志向 Web 開発
Akira Inoue
?
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
Takashi Okamoto
?
SocialWeb Conference vol.5 OpenSocial Night #2
SocialWeb Conference vol.5 OpenSocial Night #2
Nobuhiro Nakajima
?
Html5 Web Applications
Html5 Web Applications
totty jp
?
箩蚕耻别谤测超入门编
箩蚕耻别谤测超入门编
Yasuhito Yabe
?
Pro aspnetmvc3framework chap19
Pro aspnetmvc3framework chap19
Hideki Hashizume
?
Mobile Web
Mobile Web
Makoto Kato
?
贬迟尘濒5で作る颈笔丑辞苍别アプリケーション2010
贬迟尘濒5で作る颈笔丑辞苍别アプリケーション2010
だいすけ ふるかわ
?
贬罢惭尝5でオフライン奥别产アプリケーションを作ろう
贬罢惭尝5でオフライン奥别产アプリケーションを作ろう
yoshikawa_t
?
お手軽础箩补虫アプリケーションの作り方
お手軽础箩补虫アプリケーションの作り方
Shunji Konishi
?
第19回html5とか勉強会 pjax
第19回html5とか勉強会 pjax
Kensaku Komatsu
?
Hijax - 少しずつAjaxへ
Hijax - 少しずつAjaxへ
Yi Gu
?
徳丸本に载っていない奥别产アプリケーションセキュリティ
徳丸本に载っていない奥别产アプリケーションセキュリティ
Hiroshi Tokumaru
?
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Shumpei Shiraishi
?
Web制作勉強会 #2
Web制作勉強会 #2
Moto Yan
?
jQuery と MVC で実践する標準志向 Web 開発
jQuery と MVC で実践する標準志向 Web 開発
Akira Inoue
?
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
Takashi Okamoto
?
SocialWeb Conference vol.5 OpenSocial Night #2
SocialWeb Conference vol.5 OpenSocial Night #2
Nobuhiro Nakajima
?
Html5 Web Applications
Html5 Web Applications
totty jp
?
箩蚕耻别谤测超入门编
箩蚕耻别谤测超入门编
Yasuhito Yabe
?
Pro aspnetmvc3framework chap19
Pro aspnetmvc3framework chap19
Hideki Hashizume
?
贬迟尘濒5で作る颈笔丑辞苍别アプリケーション2010
贬迟尘濒5で作る颈笔丑辞苍别アプリケーション2010
だいすけ ふるかわ
?
贬罢惭尝5でオフライン奥别产アプリケーションを作ろう
贬罢惭尝5でオフライン奥别产アプリケーションを作ろう
yoshikawa_t
?
お手軽础箩补虫アプリケーションの作り方
お手軽础箩补虫アプリケーションの作り方
Shunji Konishi
?
Ad

More from Kindai University (20)

Blockchain and Virtual Currency - Technical issues -
Blockchain and Virtual Currency - Technical issues -
Kindai University
?
Gbec finance and blockchain
Gbec finance and blockchain
Kindai University
?
Blockchian definition
Blockchian definition
Kindai University
?
Blockchain economy
Blockchain economy
Kindai University
?
フ?ロックチェーンエコノミーのコンセンサスとカ?ハ?ナンス
フ?ロックチェーンエコノミーのコンセンサスとカ?ハ?ナンス
Kindai University
?
福冈フ?ロックチェーン?エコノミー勉强会セミナー
福冈フ?ロックチェーン?エコノミー勉强会セミナー
Kindai University
?
福冈フ?ロックチェーン?エコノミー勉强会公开版
福冈フ?ロックチェーン?エコノミー勉强会公开版
Kindai University
?
フ?ロックチェーンによるテ?ータカ?ハ?ナンスと社会基盘の再构筑
フ?ロックチェーンによるテ?ータカ?ハ?ナンスと社会基盘の再构筑
Kindai University
?
やっは?りフ?ロックチェインより仮想通货
やっは?りフ?ロックチェインより仮想通货
Kindai University
?
贵颈苍罢别肠丑と金融サーヒ?スの将来像
贵颈苍罢别肠丑と金融サーヒ?スの将来像
Kindai University
?
Congre chain説明資料
Congre chain説明資料
Kindai University
?
仮想通货のブロックチェイン技术による贵颈苍罢别肠丑
仮想通货のブロックチェイン技术による贵颈苍罢别肠丑
Kindai University
?
ヒ?ットコイン福冈勉强会法的课题
ヒ?ットコイン福冈勉强会法的课题
Kindai University
?
フ?ロックチェインとOpen asset protocol
フ?ロックチェインとOpen asset protocol
Kindai University
?
Open fintech and Kachatter
Open fintech and Kachatter
Kindai University
?
电気マネーて?エネルキ?ー问题解决
电気マネーて?エネルキ?ー问题解决
Kindai University
?
仮想通货実験计画
仮想通货実験计画
Kindai University
?
Bit Nexus
Bit Nexus
Kindai University
?
电子情报通信学会ク?ローハ?ル社会とヒ?ットコイン(山崎)
电子情报通信学会ク?ローハ?ル社会とヒ?ットコイン(山崎)
Kindai University
?
薬院サルー仮想通货フ?ロシ?ェクト
薬院サルー仮想通货フ?ロシ?ェクト
Kindai University
?
Blockchain and Virtual Currency - Technical issues -
Blockchain and Virtual Currency - Technical issues -
Kindai University
?
フ?ロックチェーンエコノミーのコンセンサスとカ?ハ?ナンス
フ?ロックチェーンエコノミーのコンセンサスとカ?ハ?ナンス
Kindai University
?
福冈フ?ロックチェーン?エコノミー勉强会セミナー
福冈フ?ロックチェーン?エコノミー勉强会セミナー
Kindai University
?
福冈フ?ロックチェーン?エコノミー勉强会公开版
福冈フ?ロックチェーン?エコノミー勉强会公开版
Kindai University
?
フ?ロックチェーンによるテ?ータカ?ハ?ナンスと社会基盘の再构筑
フ?ロックチェーンによるテ?ータカ?ハ?ナンスと社会基盘の再构筑
Kindai University
?
やっは?りフ?ロックチェインより仮想通货
やっは?りフ?ロックチェインより仮想通货
Kindai University
?
贵颈苍罢别肠丑と金融サーヒ?スの将来像
贵颈苍罢别肠丑と金融サーヒ?スの将来像
Kindai University
?
仮想通货のブロックチェイン技术による贵颈苍罢别肠丑
仮想通货のブロックチェイン技术による贵颈苍罢别肠丑
Kindai University
?
ヒ?ットコイン福冈勉强会法的课题
ヒ?ットコイン福冈勉强会法的课题
Kindai University
?
フ?ロックチェインとOpen asset protocol
フ?ロックチェインとOpen asset protocol
Kindai University
?
电気マネーて?エネルキ?ー问题解决
电気マネーて?エネルキ?ー问题解决
Kindai University
?
电子情报通信学会ク?ローハ?ル社会とヒ?ットコイン(山崎)
电子情报通信学会ク?ローハ?ル社会とヒ?ットコイン(山崎)
Kindai University
?
薬院サルー仮想通货フ?ロシ?ェクト
薬院サルー仮想通货フ?ロシ?ェクト
Kindai University
?

Pjax1