Ajax&pjax

1,489 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,489
On SlideShare
0
From Embeds
0
Number of Embeds
474
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Ajax&pjax

  1. 1. 誰でも(たぶん)簡単   Ajax  &  Pjax ~とりあえず概要だけ~編
  2. 2. まず最初に
  3. 3. 自己紹介(表) •  •  •  •  •  •  •  •  たしま(27) facebook    :    hiroyuki.tashima   85/06/20  柳川市生まれ 株式会社gumiWest こう見えてもエンジニア アパレルショップの店員ではない 2年前ぐらいに東京から戻ってきた C++、DirectXでオンラインゲーム作ってた FlashLiteでガラケー用ゲーム作ってた 今はjsとかpythonとか雑用メイン
  4. 4. 自己紹介(裏) •  日本唐揚協会公認 カラアゲニスト
 (詳しくは h5p://karaage.ne.jp/) •  アメフト、映画をピザ食べながら見るのが幸せ •  ボードゲーム、カードゲームたくさん持ってる •  イヤフォンを2か月に1回無くすのが特技 •  eSportsやってます(StarCra=2  :  プラチナリーグ)   •  唐突に一人飲みに行く癖あり •  ガジェット大好き  
  5. 5. 本題  Ajax  &  Pjax ~とりあえず概念あたりまで~  
  6. 6. コンテンツ多いwebアプリ、システム作ってて
 誰もが当たる壁…
  7. 7.   重画 面 遷 移 、 ?
  8. 8. 例えば テキスト入力     画面↓遷移     確認画面(以下の内容でよろしいですか?系)     画面↓遷移     結果画面(以下の内容で登録しました系)  
  9. 9. 多小   画 面 遷 移 ? 、
  10. 10. ちょっとUXの話 待ち時間が長い 、回数多い  =   ストレス 格闘ゲームで演出が長すぎてプレイヤーにストレスを与えてしまうことも…
  11. 11. 解決方法? •  画像とかコンテンツの容量減らす? →クオリティ下がる… •  CSSやJSファイル削減する? →数KBぐらいしか減らない…
  12. 12. 解決方法? ほとんど画面変わらないところで
 わざわざ画面遷移するなんて… 
 HTMLレンダリングエンジンさんがかわいそう… 
 一体、どうすれば…
  13. 13. 話 Ajax   ! 聞 ! 使
  14. 14. Ajax? Asynchronous JavaScript + XML の略 非同期通信 + インタフェースリアクション制御
 
 別にXMLで通信しなくてもいい 実は昔からあった技術
 (2005年にはもうあったらしい)
 
 最近HTML5の人気に乗っかってきたちゃっかり者
  15. 15. Ajax? •  not  use  Ajax   1.サーバにリクエスト送信
 2.レスポンス結果 (html)   3.画面遷移(レンダリング重) •  use  Ajax   1.サーバにリクエスト送信
 2.レスポンス結果 (データ or innerHTML)   3.リアクションする(レンダリングなし)
  16. 16. 実際にAjax使ってるサイト •  •  •  •  •  Amazon   GoogleMap   Gmail   GoogleCalender   Facebook       などいろいろ…
  17. 17. How To Use Ajax        のAjax/API/
  Ajax Eventsを使うのが簡単 ※jQuery:javaScriptの軽量ライブラリ(のくせに重かったりする)  
  18. 18. How To Use Ajax •  HTML側(ものすごく単純な例)   var  ajaxExe  =  funcLon()  {          $.ajax({                  cache  :  false,    //送信データをキャッシュしない設定                  url  :  “~.html”,    //リクエストURL                  success  :  funcLon(data){  //サーバから戻ってきたdataを使う                          //ここに通信成功した時の処理を書く(js)                    },          });   }
  19. 19. How To Use Ajax •  サーバ側   サーバ側はそれぞれの言語で…(お察し下さい)       Ajax通信後、
 HTML側でリアクションさせたい場合、
 必要なデータやHTMLを送る。    
  20. 20. Ajaxはどんなところに有効? •  何かのリストの追加表示 •  ランダムで何かを表示してる部分の更新 •  処理確認、結果表示
 
 などなど
  21. 21. 欠点 •  Ajax通信後、リアクション用処理必須
 (jsを書く必要がある) •  HTMLが肥大化する恐れあり
 (リアクションの内容、サーバ処理次第)
  22. 22. さらに… Ajax通信後の履歴が残らない… (ページ遷移してないのだから当たり前) ブラウザバック → Ajax通信する大昔に戻る
  23. 23. そもそも今日は…
  24. 24. Ajaxは昔からあった技術
  25. 25. HTML5 関係ない… よね?
  26. 26. 話 Pjax   ! 聞 ! 使
  27. 27. Pjax? pushState + Ajax = Pjax 

  28. 28. pushState? •  HTML5に追加されたメソッド •  動的に履歴を作ることができる! •  Window.history.pushState(null,  null,  url); これだけで履歴を作れる!
  29. 29. じゃあ、さっそくPjaxを使ってみよう!
  30. 30. jquery.pjax •  h5ps://github.com/falsandtru/jquery.pjax.js   •  githubの人たちが作ったjQueryのプラグイン •  これを使うとものすごく楽
  31. 31. HTML側 •  jQuery、jQuery.pjax.jsを読み込む •  書き換え(遷移)範囲をid指定する •  リンクに class=“js-pjax”  data-pjax=id •  $(“a.js-pjax”).pjax(“id”);
  32. 32. サーバ側 •  リクエストヘッダにX-PJAXがあるか判定
 
 →ついてたらコンテンツ(html、データ)
 
 →ついてなかったらページ全体(url)     をそれぞれ返すようにする。
  33. 33. どう動くの? 指定した書き換え範囲のものが
 返ってきたコンテンツと入れ替わる •  サーバから文字列が返ってくる
 →指定範囲が文字列と入れ替わる •  サーバからinnerHTMLが返ってくる
 →指定範囲がinnerHTMLと入れ替わる
  34. 34. バインド(bind)もできちゃう $("#id")   .bind("pjax:start",funcLon(){ //ajax通信開始時に呼び出される }) .bind("pjax:end",  funcLon(){    //ajax通信終了時に呼び出される });
  35. 35. もちろん ブラウザバックすると1つ前の状態に戻る!
  36. 36. 欠点 •  調子に乗るとHTMLが肥大化する(かも)
 
 (分割したり工夫すりゃ回避可能) •  Ajax通信後の処理の記述必須
  37. 37. Ajax Pjax 使い分け •  Ajax
 
 リストの追加表示
 表示物更新
 予測補間
 •  Pjax
 
 通常遷移
 ページャー
 サムネからの遷移
  38. 38. じゃあ、さっそく実践! と言いたいところですが…
  39. 39. それはまた、別のお話… 次回へ続く… (第二回勉強会に呼ばれなかったらマジどうしよう…)
  40. 40. 質問どうぞ
  41. 41. 勝手に
  42. 42. えっ
  43. 43. 次回  Ajax  &  Pjax   ~じゃちょっと使ってみよう~編 ご期待ください  (第二回勉強会に呼ばれなかったらマジどうしよう…)

×