Submit Search
Upload
Teclab4
•
7 likes
•
1,388 views
Eikichi Yamaguchi
Follow
pushState library
Read less
Read more
Technology
Report
Share
Report
Share
1 of 55
Download now
Download to read offline
Recommended
環境が変わって最近知ったもの #hachiojipm
環境が変わって最近知ったもの #hachiojipm
鉄次 尾形
2時間で学ぶjQuery
2時間で学ぶjQuery
Shumpei Shiraishi
Scc2014 :jQueryの仕組みを完璧に理解する
Scc2014 :jQueryの仕組みを完璧に理解する
Jun Futakawa
20140523 jQuery基礎 (HTML5ビギナーズ)
20140523 jQuery基礎 (HTML5ビギナーズ)
Daisuke Yamazaki
スマートフォン用の時間割を作ってみて
スマートフォン用の時間割を作ってみて
soh335
vimプラグインでよりよい(ry
vimプラグインでよりよい(ry
soh335
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
Toshiaki Maki
続・Freeプランで緩く監視させてもらってる話など
続・Freeプランで緩く監視させてもらってる話など
Koichi Ota
Recommended
環境が変わって最近知ったもの #hachiojipm
環境が変わって最近知ったもの #hachiojipm
鉄次 尾形
2時間で学ぶjQuery
2時間で学ぶjQuery
Shumpei Shiraishi
Scc2014 :jQueryの仕組みを完璧に理解する
Scc2014 :jQueryの仕組みを完璧に理解する
Jun Futakawa
20140523 jQuery基礎 (HTML5ビギナーズ)
20140523 jQuery基礎 (HTML5ビギナーズ)
Daisuke Yamazaki
スマートフォン用の時間割を作ってみて
スマートフォン用の時間割を作ってみて
soh335
vimプラグインでよりよい(ry
vimプラグインでよりよい(ry
soh335
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
Toshiaki Maki
続・Freeプランで緩く監視させてもらってる話など
続・Freeプランで緩く監視させてもらってる話など
Koichi Ota
Python と Xpath で ウェブからデータをあつめる
Python と Xpath で ウェブからデータをあつめる
Shuhei Iitsuka
20190531 「運用自動化」のモデルを考える
20190531 「運用自動化」のモデルを考える
Yoshikazu GOTO
一人でもはじめるGitでバージョン管理
一人でもはじめるGitでバージョン管理
Takafumi Yoshida
#phpmatsuri LT大会システムの中身
#phpmatsuri LT大会システムの中身
Hisateru Tanaka
新しくなったPg monzでpostgre sqlのクラスタを監視しよう
新しくなったPg monzでpostgre sqlのクラスタを監視しよう
Yoshinori Nakanishi
20190531 「運用自動化」に失敗してみた
20190531 「運用自動化」に失敗してみた
Yoshikazu GOTO
HTML で自己紹介ページをつくる
HTML で自己紹介ページをつくる
Shuhei Iitsuka
etckeeperをopenSUSEの公式リポジトリに入れたいぞ!
etckeeperをopenSUSEの公式リポジトリに入れたいぞ!
Mitsutoshi Nakano
GoでシュッとWebスクレイピングする
GoでシュッとWebスクレイピングする
Yuta Ohashi
[Dots.]taiga
[Dots.]taiga
Tatsunori Nishikori
MF GeeksNight pplogの話
MF GeeksNight pplogの話
Naoto Koshikawa
Hachiojipm31
Hachiojipm31
Junichiro Suzuki
プロセスの永続化でコスト削減 #perlbeginners
プロセスの永続化でコスト削減 #perlbeginners
鉄次 尾形
BigQueryで集計するシステムを作って分かったKPI集計ツール作成
BigQueryで集計するシステムを作って分かったKPI集計ツール作成
(shibao)芝尾 (kouichiro)幸一郎
Elasticsearch at CrowdWorks
Elasticsearch at CrowdWorks
佑介 九岡
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
iPride Co., Ltd.
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
sugiuralab
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
Toru Tamaki
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
Hiroki Ichikura
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
danielhu54
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Toru Tamaki
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Ryo Sasaki
More Related Content
Similar to Teclab4
Python と Xpath で ウェブからデータをあつめる
Python と Xpath で ウェブからデータをあつめる
Shuhei Iitsuka
20190531 「運用自動化」のモデルを考える
20190531 「運用自動化」のモデルを考える
Yoshikazu GOTO
一人でもはじめるGitでバージョン管理
一人でもはじめるGitでバージョン管理
Takafumi Yoshida
#phpmatsuri LT大会システムの中身
#phpmatsuri LT大会システムの中身
Hisateru Tanaka
新しくなったPg monzでpostgre sqlのクラスタを監視しよう
新しくなったPg monzでpostgre sqlのクラスタを監視しよう
Yoshinori Nakanishi
20190531 「運用自動化」に失敗してみた
20190531 「運用自動化」に失敗してみた
Yoshikazu GOTO
HTML で自己紹介ページをつくる
HTML で自己紹介ページをつくる
Shuhei Iitsuka
etckeeperをopenSUSEの公式リポジトリに入れたいぞ!
etckeeperをopenSUSEの公式リポジトリに入れたいぞ!
Mitsutoshi Nakano
GoでシュッとWebスクレイピングする
GoでシュッとWebスクレイピングする
Yuta Ohashi
[Dots.]taiga
[Dots.]taiga
Tatsunori Nishikori
MF GeeksNight pplogの話
MF GeeksNight pplogの話
Naoto Koshikawa
Hachiojipm31
Hachiojipm31
Junichiro Suzuki
プロセスの永続化でコスト削減 #perlbeginners
プロセスの永続化でコスト削減 #perlbeginners
鉄次 尾形
BigQueryで集計するシステムを作って分かったKPI集計ツール作成
BigQueryで集計するシステムを作って分かったKPI集計ツール作成
(shibao)芝尾 (kouichiro)幸一郎
Elasticsearch at CrowdWorks
Elasticsearch at CrowdWorks
佑介 九岡
Similar to Teclab4
(15)
Python と Xpath で ウェブからデータをあつめる
Python と Xpath で ウェブからデータをあつめる
20190531 「運用自動化」のモデルを考える
20190531 「運用自動化」のモデルを考える
一人でもはじめるGitでバージョン管理
一人でもはじめるGitでバージョン管理
#phpmatsuri LT大会システムの中身
#phpmatsuri LT大会システムの中身
新しくなったPg monzでpostgre sqlのクラスタを監視しよう
新しくなったPg monzでpostgre sqlのクラスタを監視しよう
20190531 「運用自動化」に失敗してみた
20190531 「運用自動化」に失敗してみた
HTML で自己紹介ページをつくる
HTML で自己紹介ページをつくる
etckeeperをopenSUSEの公式リポジトリに入れたいぞ!
etckeeperをopenSUSEの公式リポジトリに入れたいぞ!
GoでシュッとWebスクレイピングする
GoでシュッとWebスクレイピングする
[Dots.]taiga
[Dots.]taiga
MF GeeksNight pplogの話
MF GeeksNight pplogの話
Hachiojipm31
Hachiojipm31
プロセスの永続化でコスト削減 #perlbeginners
プロセスの永続化でコスト削減 #perlbeginners
BigQueryで集計するシステムを作って分かったKPI集計ツール作成
BigQueryで集計するシステムを作って分かったKPI集計ツール作成
Elasticsearch at CrowdWorks
Elasticsearch at CrowdWorks
Recently uploaded
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
iPride Co., Ltd.
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
sugiuralab
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
Toru Tamaki
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
Hiroki Ichikura
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
danielhu54
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Toru Tamaki
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Ryo Sasaki
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Toru Tamaki
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Yuma Ohgami
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
taisei2219
Recently uploaded
(10)
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
Teclab4
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.
ご清聴ありがとうございました
Download now