Recomendados
Mais conteúdo relacionado
Semelhante a Teclab4
Semelhante a Teclab4 (15)
Último
Teclab4
- 4. 前回のあらすじ
- 6. pushState
- 7. pushState •HTML5 ファミリー •ブラウザの履歴を管理 •ハッシュではなく、ごく普通の URL として扱えるため サーチエンジンも推奨 •多少サーバー側の処理が必要となる。
- 9. 単に URL 変えるだけなら簡単 window.history.pushState({}, title, url)
- 10. ちゃんとやろうと思ったら 考えなきゃいけないこと •いきなり下層コンテンツへアクセスがあった時の処理 •どの URL が pushState の対象なのかわかりづらい •push があるなら pop もあるのでその扱い •素材の読込など、 URL を変える前に実行したい処理 •pushState に対応していないブラウザへの対応 •ブラウザのヒストリーバック/進む機能への対応
- 12. Kazitori.js •pushState をいい感じに処理してくれるライブラリ •ver 0.2.3 -> 1.0 を開発中 •jQuery などへの依存が無いため単体で使える •基本は CoffeeScript で書くことを推奨 •派生で CreateJS との相性がいい Milkpack.js というラッ パーがある
- 13. ルーター + コントローラー
- 14. 実例
- 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 とあんまり関係ない のでほとんど書いてあります。
- 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 と同じ •内部的にはタスクキューイングとして処理しているので 与えた順番で処理される。
- 32. URL を変える(pushState) $('.brand').on 'click', (event)-> event.preventDefault() window.App.change '/'
- 33. URL を変える(replaceState) $('.brand').on 'click', (event)-> event.preventDefault() window.App.replace '/'
- 35. この辺り覚えてれば勝つる
- 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 から常にパスを取得するようにすれば一箇所だけの変更で済む。
- 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... #:( ﾞﾟ'ωﾟ'）:ウウウオオオアアアーーー！！！ #航路間違えた #▂▅▇!▓"░('ω')░"▓!▇▅▂うわあああああああ
- 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. ご清聴ありがとうございました