Suche senden
Hochladen
Teclab4
•
7 gefällt mir
•
1,388 views
Eikichi Yamaguchi
Folgen
pushState library
Weniger lesen
Mehr lesen
Technologie
Melden
Teilen
Melden
Teilen
1 von 55
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
環境が変わって最近知ったもの #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
Empfohlen
環境が変わって最近知ったもの #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
佑介 九岡
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
Weitere ähnliche Inhalte
Ähnlich wie 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
佑介 九岡
Ähnlich wie 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
Kürzlich hochgeladen
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Hiroshi Tomioka
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Kürzlich hochgeladen
(11)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
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.
ご清聴ありがとうございました
Jetzt herunterladen