1. 誰でも(たぶん)簡単
Ajax
&
Pjax
～とりあえず概要だけ～編

2. まず最初に

4. 自己紹介(表)
•
•
•
•
•
•
•
•
たしま(27)
facebook
:
hiroyuki.tashima
85/06/20 柳川市生まれ
株式会社gumiWest こう見えてもエンジニア
アパレルショップの店員ではない
2年前ぐらいに東京から戻ってきた
C++、DirectXでオンラインゲーム作ってた
FlashLiteでガラケー用ゲーム作ってた
今はjsとかpythonとか雑用メイン

5. 自己紹介(裏)
• 日本唐揚協会公認 カラアゲニスト
(詳しくは h5p://karaage.ne.jp/)
• アメフト、映画をピザ食べながら見るのが幸せ
• ボードゲーム、カードゲームたくさん持ってる
• イヤフォンを2か月に1回無くすのが特技
• eSportsやってます(StarCra=2
:
プラチナリーグ)
• 唐突に一人飲みに行く癖あり
• ガジェット大好き

6. 本題
Ajax
&
Pjax
～とりあえず概念あたりまで～

7. コンテンツ多いwebアプリ、システム作ってて
誰もが当たる壁…

8.
重画
面
遷
移
、
？

9. 例えば
テキスト入力
画面↓遷移
確認画面(以下の内容でよろしいですか？系)
画面↓遷移
結果画面(以下の内容で登録しました系)

10. 多小
画
面
遷
移
？ 、

11. ちょっとUXの話
待ち時間が長い 、回数多い =
ストレス
格闘ゲームで演出が長すぎてプレイヤーにストレスを与えてしまうことも…

12. 解決方法？
• 画像とかコンテンツの容量減らす？
→クオリティ下がる…
• CSSやJSファイル削減する？
→数KBぐらいしか減らない…

13. 解決方法？
ほとんど画面変わらないところで
わざわざ画面遷移するなんて…
HTMLレンダリングエンジンさんがかわいそう…
一体、どうすれば…

14. 話
Ajax
！
聞
！
使

15. Ajax？
Asynchronous JavaScript + XML の略
非同期通信 + インタフェースリアクション制御
別にXMLで通信しなくてもいい
実は昔からあった技術
(2005年にはもうあったらしい)
最近HTML5の人気に乗っかってきたちゃっかり者

16. Ajax？
• not
use
Ajax
1.サーバにリクエスト送信
2.レスポンス結果 (html)
3.画面遷移(レンダリング重)
• use
Ajax
1.サーバにリクエスト送信
2.レスポンス結果 (データ or innerHTML)
3.リアクションする(レンダリングなし)

17. 実際にAjax使ってるサイト
•
•
•
•
•
Amazon
GoogleMap
Gmail
GoogleCalender
Facebook
などいろいろ…

18. How To Use Ajax
のAjax/API/
Ajax Eventsを使うのが簡単
※jQuery:javaScriptの軽量ライブラリ(のくせに重かったりする)

19. How To Use Ajax
• HTML側(ものすごく単純な例)
var
ajaxExe
=
funcLon()
{
$.ajax({
cache
:
false,
//送信データをキャッシュしない設定
url
:
“～.html”,
//リクエストURL
success
:
funcLon(data){
//サーバから戻ってきたdataを使う
//ここに通信成功した時の処理を書く(js)
},
});
}

20. How To Use Ajax
• サーバ側
サーバ側はそれぞれの言語で…(お察し下さい)
Ajax通信後、
HTML側でリアクションさせたい場合、
必要なデータやHTMLを送る。

21. Ajaxはどんなところに有効？
• 何かのリストの追加表示
• ランダムで何かを表示してる部分の更新
• 処理確認、結果表示
などなど

22. 欠点
• Ajax通信後、リアクション用処理必須
(jsを書く必要がある)
• HTMLが肥大化する恐れあり
(リアクションの内容、サーバ処理次第)

23. さらに…
Ajax通信後の履歴が残らない…
(ページ遷移してないのだから当たり前)
ブラウザバック → Ajax通信する大昔に戻る

24. そもそも今日は…

25. Ajaxは昔からあった技術

26. HTML5
関係ない…
よね？

28. 話
Pjax
！
聞
！
使

29. Pjax？
pushState + Ajax = Pjax

30. pushState？
• HTML5に追加されたメソッド
• 動的に履歴を作ることができる！
• Window.history.pushState(null, null, url);
これだけで履歴を作れる！

31. じゃあ、さっそくPjaxを使ってみよう！

32. jquery.pjax
• h5ps://github.com/falsandtru/jquery.pjax.js
• githubの人たちが作ったjQueryのプラグイン
• これを使うとものすごく楽

33. HTML側
• jQuery、jQuery.pjax.jsを読み込む
• 書き換え(遷移)範囲をid指定する
• リンクに class=“js-pjax” data-pjax=id
• $(“a.js-pjax”).pjax(“id”);

34. サーバ側
• リクエストヘッダにX-PJAXがあるか判定
→ついてたらコンテンツ(html、データ)
→ついてなかったらページ全体(url)
をそれぞれ返すようにする。

35. どう動くの？
指定した書き換え範囲のものが
返ってきたコンテンツと入れ替わる
• サーバから文字列が返ってくる
→指定範囲が文字列と入れ替わる
• サーバからinnerHTMLが返ってくる
→指定範囲がinnerHTMLと入れ替わる

36. バインド(bind)もできちゃう
$("#id")
.bind("pjax:start",funcLon(){
//ajax通信開始時に呼び出される
})
.bind("pjax:end",
funcLon(){
//ajax通信終了時に呼び出される
});

37. もちろん
ブラウザバックすると1つ前の状態に戻る！

38. 欠点
• 調子に乗るとHTMLが肥大化する(かも)
(分割したり工夫すりゃ回避可能)
• Ajax通信後の処理の記述必須

39. Ajax Pjax 使い分け
• Ajax
リストの追加表示
表示物更新
予測補間
• Pjax
通常遷移
ページャー
サムネからの遷移

40. じゃあ、さっそく実践！
と言いたいところですが…

41. それはまた、別のお話…
次回へ続く…
(第二回勉強会に呼ばれなかったらマジどうしよう…)

42. 質問どうぞ

43. 勝手に

46. えっ

47. 次回
Ajax
&
Pjax
～じゃちょっと使ってみよう～編
ご期待ください
(第二回勉強会に呼ばれなかったらマジどうしよう…)