Your SlideShare is downloading. ×
0
Teclab4
Teclab4
Teclab4
Teclab4
Teclab4
Teclab4
Teclab4
Teclab4
Teclab4
Teclab4
Teclab4
Teclab4
Teclab4
Teclab4
Teclab4
Teclab4
Teclab4
Teclab4
Teclab4
Teclab4
Teclab4
Teclab4
Teclab4
Teclab4
Teclab4
Teclab4
Teclab4
Teclab4
Teclab4
Teclab4
Teclab4
Teclab4
Teclab4
Teclab4
Teclab4
Teclab4
Teclab4
Teclab4
Teclab4
Teclab4
Teclab4
Teclab4
Teclab4
Teclab4
Teclab4
Teclab4
Teclab4
Teclab4
Teclab4
Teclab4
Teclab4
Teclab4
Teclab4
Teclab4
Teclab4
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Teclab4

774

Published on

pushState library

pushState library

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
774
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. pushState で作る Web アプリケーション 2013/05/29 Tech Lab 4
  • 2. Agenda •お前だれよ •pushState って何よ •Kazitori.js •作ってみる
  • 3. お前だれよ •Yamaguchi Eikichi •@__kageyama__, @__hage__ •キュアニート •http://kageya.ma •js は 気づいたらやってた
  • 4. 前回のあらすじ
  • 5. https://twitter.com/yuchimiri/status/312351688382111745/photo/1
  • 6. pushState
  • 7. pushState •HTML5 ファミリー •ブラウザの履歴を管理 •ハッシュではなく、ごく普通の URL として扱えるため サーチエンジンも推奨 •多少サーバー側の処理が必要となる。
  • 8. 生でやろうとすると 結構めんどくさい
  • 9. 単に URL 変えるだけなら簡単 window.history.pushState({}, title, url)
  • 10. ちゃんとやろうと思ったら 考えなきゃいけないこと •いきなり下層コンテンツへアクセスがあった時の処理 •どの URL が pushState の対象なのかわかりづらい •push があるなら pop もあるのでその扱い •素材の読込など、 URL を変える前に実行したい処理 •pushState に対応していないブラウザへの対応 •ブラウザのヒストリーバック/進む機能への対応
  • 11. _人人人人人_ > Kazitori.js <  ̄Y^Y^Y^Y^Y^ ̄
  • 12. Kazitori.js •pushState をいい感じに処理してくれるライブラリ •ver 0.2.3 -> 1.0 を開発中 •jQuery などへの依存が無いため単体で使える •基本は CoffeeScript で書くことを推奨 •派生で CreateJS との相性がいい Milkpack.js というラッ パーがある
  • 13. ルーター + コントローラー
  • 14. 実例
  • 15. https://github.com/alumican/Milkpack.js
  • 16. http://webgl.hageee.net https://github.com/glassesfactory/webgl-example
  • 17. http://long.hageee.net https://github.com/glassesfactory/kazitori-long-example
  • 18. 前回のこれ
  • 19. Kazitori.js で出来ること •見通しの良いルーティング •URL 変数 •事前処理ができる •URL クエリ •IE7+, iPhone, Android などマルチ環境 •各処理段階ごとに色々イベント飛ばしてくれる •一応実戦投入済み。
  • 20. 基本的な使い方 •Kazitori.js を継承したクラスを作る •ルーティングを定義 •定義した URL に対応するハンドラを 登録 •インスタンス化 class Router extends Kazitori routes : '/':'index' '/<int:id>':'show' index:()-> console.log “index” show:(id)-> console.log id $(()-> window.App = new Router({root:'/'}) )
  • 21. 下準備 •事前資料でお願いしたものは入ってる前提。 •github から techlab4-template をダウンロード or git clone •venv 作って pip install -r requirements.txt, npm install, grunt init を実行 今回は全部やると 長い & pushState とあんまり関係ない のでほとんど書いてあります。
  • 22. 作っていく手順 •何はともあれルーティングを定義 •モデルを定義、実装 •コントローラーで各 URL を割り振る •細かい動きとかフォーム処理とかを実装していく わりとサーバーサイドのプログラムと 同じような感覚でやっていける
  • 23. 処理の流れ •URL から適切なメソッドを判断 •サーバーからデータが読込まれているかチェック •URL に対応した処理を実行する
  • 24. ルーティング class Router extends Kazitori routes: '/':'index' '/<string:id>':'show'   index:()-> return   show:(id)-> return
  • 25. ルーティング •‘/’ , ‘/foo’ •ベタ書きの URL。優先度高い •‘/foo/bar’ など URL のネストにも対応 •‘/<username>’ •変数として処理。コントローラーの引数として与えられる。 •‘/<int:id>’, ‘/<string:username>’ •変数に型指定をつけることが可能。 •‘/foo/<int:id>’ など ネストした状態でも指定できる •root •root を設定することで URL に prefix をつけることが出来る •NotFound •登録のない URL にアクセスされた時の処理
  • 26. モデルがロード済みかチェック class Router extends Kazitori beforeAnytime: ["checkModel"] routes: '/':'index' '/<string:id>':'show'   index:()-> return   show:(id)-> return checkModel:()-> if not TweetModel.isLoaded() #モデルの読み込みと Kazitori の一時停止 @suspend()
  • 27. モデルがロード済みかチェック パターンその2 class Router extends Kazitori routes: '/':'index' '/<string:id>':'show'   index:()-> return   show:(id)-> return loadModel:()-> TweetModel.load() @suspend()     $(()-> window.App = new Router() window.App.addEventListener KazitoriEvent.FIRST_REQUEST, window.App.loadModel )
  • 28. 事前処理用の API は2種類 •beforeAnytime •どの URL でも必ず処理する •befores •特定の URL だけ処理する •書式は routes と同じ •内部的にはタスクキューイングとして処理しているので 与えた順番で処理される。
  • 29. 処理の中断、再開、中止 •suspend •現在の処理で中断(一時停止)する •resume •suspend したところから再開する •reject •処理を中止する
  • 30. 豊富なイベント •KazitoriEvent.CHANGE •URL が変わった時 •KazitoriEvent.EXECUTED •URL に登録されたメソッドがちゃんと実行された •KazitoriEvent.BEFORE_EXECUTED •ビフォアー処理が完了した •KazitoriEvent.PREV •ヒストリーバックした時 •KazitoriEvent.NEXT •ヒストリーネクストした時
  • 31. 豊富なイベント •KazitoriEvent.REJECT •中断 •KazitoriEvent.NOT_FOUND •見つからなかった •KazitoriEvent.START •スタート •KazitoriEvent.STOP •ストップ •KazitoriEvent.SUSPEND •一時停止した •KazitoriEvent.RESUME •再開 •KazitoriEvent.FIRST_REQUEST •初めてのアクセス
  • 32. URL を変える(pushState) $('.brand').on 'click', (event)-> event.preventDefault() window.App.change '/'
  • 33. URL を変える(replaceState) $('.brand').on 'click', (event)-> event.preventDefault() window.App.replace '/'
  • 34. URL のチェック window.App.match '/foo'
  • 35. この辺り覚えてれば勝つる
  • 36. Kazitori ファミリー Kai
  • 37. Kai について •画像や js など、静的ファイルのパスを吐いてくれる君 •サーバーサイドでよくあるアレ •無駄に相対パスにも対応
  • 38. Kai の使い方 #初期化 Kai.init()   #CSS のパスを返す console.log Kai.GET_CSS_PATH()   #script のパスを返す console.log Kai.GET_SCRIPT_PATH()   #画像のパスを返す console.log Kai.GET_IMAGE_PATH()
  • 39. Kai のパスを変える console.log Kai.GET_SCRIPT_PATH() # デフォルトは /assets/scripts Kai.init scripts: "js" console.log Kai.GET_SCRIPT_PATH() # /assets/js にかわる
  • 40. 何がうまいのか •デバイスごとに静的ファイルを分けて用意する場合 •UA 判断後、JS で動的に CSS や image の src 属性を設定する •箇所が多い場合、ベタ打ちすると後から変更があった場合大変なことに… •Kai から常にパスを取得するようにすれば一箇所だけの変更で済む。
  • 41. Kazitori ファミリー Hunanori.js
  • 42. Hunanori.js について •JS のログ機能を強化 •Hunanori.debug フラグのオン/オフで出力の可否をコントロール •ログの前や後ろに区切り線などを出力するように出来る https://github.com/glassesfactory/Hunanori.js
  • 43. Hunanori.js の使い方 Hunanori.log("ソイヤ!") #results #ソイヤ! Hunanori.debug = false Hunanori.log("ソイヤソイヤ!") #results...
  • 44. Hunanori.js の使い方 class Sencho extends Hunanori constructor:()-> hoge:()-> @log “はらへ” sencho = new Sencho() sencho.log("お腹すいた") sencho.hoge() #results... #お腹すいた #はらへ
  • 45. Hunanori.js の使い方 class Sencho extends Hunanori separator: "▂▅▇!▓"░('ω')░"▓!▇▅▂うわあああああああ" prefix: ":( ゙゚'ω゚'):ウウウオオオアアアーーー!!!" constructor:()-> sencho = new Sencho() sencho.log("航路間違えた") #results... #:( ゙゚'ω゚'):ウウウオオオアアアーーー!!! #航路間違えた #▂▅▇!▓"░('ω')░"▓!▇▅▂うわあああああああ
  • 46. Kazitori は更に進化する 0.9.9
  • 47. 1.0 のプレリリース版 •ルーターのネスト •サイレントモード
  • 48. ルーターのネスト class FooRouter extends Kazitori root: '/foo/' routes: '/': 'index' '/<int:id>': 'show' index:()-> console.log "foo index" show:(id)-> console.log "foo show", id class Router extends Kazitori routes : '/':'index' '/foo': FooRouter index:()-> console.log "indeeeeeex"
  • 49. サイレントモード App = new Router({'silent': true}) URL は変わらず、Kazitori の内部で保持している fragment だけが変更される
  • 50. プチハンズオン
  • 51. class Router extends Kazitori     routes:       '/':'index'       '/<string:id>':'show'
  • 52. class Router extends Kazitori     routes:       '/':'index'       '/<string:id>':'show'     index:()->       index.hide()       contents.hide()       return     show:(id)->       if not contents         contents = new TECH.ShowController()       if @.lastFragment isnt '/'         contents.hideAndShow(id)       else         contents.show(id)       index.slide()       return
  • 53. class Router extends Kazitori     beforeAnytime: ["checkModel"]     checkModel:()->       if not index.hasModelLoaded()         index.load()         @suspend()
  • 54. require ['app'], ()->     $(()->       index = new TECH.IndexController()       newController = new TECH.NewController()       contents = new TECH.ShowController()       do(TECH)->         TECH.App = new Router()         $('.brand').on 'click', (event)->           event.preventDefault()           TECH.App.change '/'     )
  • 55. ご清聴ありがとうございました

×