Soumettre la recherche
Mettre en ligne
History api
•
4 j'aime
•
2,331 vues
Takami Kazuya
Suivre
2015/07/04 - HTML5カンファレンス鹿児島 セッション資料(20分)
Lire moins
Lire la suite
Ingénierie
Signaler
Partager
Signaler
Partager
1 sur 17
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
Owasp japan6th
Owasp japan6th
Masakazu Ikeda
ExtJSで作るAIRアプリケーション
ExtJSで作るAIRアプリケーション
Daisaku Yamamoto
[Azure Deep Dive] APIエコノミーに向けて ~Azure API ManagementによるAPIの公開と管理~ (2016/12/16)
[Azure Deep Dive] APIエコノミーに向けて ~Azure API ManagementによるAPIの公開と管理~ (2016/12/16)
Naoki (Neo) SATO
Watch face アプリを公開してみた
Watch face アプリを公開してみた
Yuki Anzai
JSON-LD schema.org定義によるデータ構造化のススメ
JSON-LD schema.org定義によるデータ構造化のススメ
Takami Kazuya
プラグイン公開までの道のり
プラグイン公開までの道のり
Takami Kazuya
jQuery3.0-beta1-point
jQuery3.0-beta1-point
Takami Kazuya
WordPress+AMP
WordPress+AMP
Takami Kazuya
Contenu connexe
Similaire à History api
Struts2を始めよう!
Struts2を始めよう!
Shinpei Ohtani
第19回html5とか勉強会 pjax
第19回html5とか勉強会 pjax
Kensaku Komatsu
Alfresco勉強会#36 alfresco 5でカスタムREST APIを作ってみよう
Alfresco勉強会#36 alfresco 5でカスタムREST APIを作ってみよう
Tasuku Otani
Jqm20120804 publish
Jqm20120804 publish
Takashi Okamoto
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
Takashi Okamoto
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
yoshikawa_t
JavaScript 実践講座 Framework, Tool, Performance
JavaScript 実践講座 Framework, Tool, Performance
クラスメソッド株式会社
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
Yatabe Terumasa
Express Web Application Framework
Express Web Application Framework
LearningTech
Titanium Mobile
Titanium Mobile
Naoya Ito
初めての Data API CMS どうでしょう - 仙台編 -
初めての Data API CMS どうでしょう - 仙台編 -
Yuji Takayama
CodeIgniterによるPhwittr
CodeIgniterによるPhwittr
kenjis
Data apiで実現 進化するwebの世界
Data apiで実現 進化するwebの世界
Yuji Takayama
シンプルな9つのサンプルで学ぶJava Script初心者のためのAngularJS超入門ハンズオン
シンプルな9つのサンプルで学ぶJava Script初心者のためのAngularJS超入門ハンズオン
健一 茂木
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
Toshiaki Maki
初めての Data api cms どうでしょう - 大阪夏の陣
初めての Data api cms どうでしょう - 大阪夏の陣
Yuji Takayama
イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱
Fumio SAGAWA
sgvizler
sgvizler
Fumihiro Kato
食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・
食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・
Yoshie Kaneno
かんたん Twitter アプリをつくろう
かんたん Twitter アプリをつくろう
Shuhei Iitsuka
Similaire à History api
(20)
Struts2を始めよう!
Struts2を始めよう!
第19回html5とか勉強会 pjax
第19回html5とか勉強会 pjax
Alfresco勉強会#36 alfresco 5でカスタムREST APIを作ってみよう
Alfresco勉強会#36 alfresco 5でカスタムREST APIを作ってみよう
Jqm20120804 publish
Jqm20120804 publish
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
JavaScript 実践講座 Framework, Tool, Performance
JavaScript 実践講座 Framework, Tool, Performance
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
Express Web Application Framework
Express Web Application Framework
Titanium Mobile
Titanium Mobile
初めての Data API CMS どうでしょう - 仙台編 -
初めての Data API CMS どうでしょう - 仙台編 -
CodeIgniterによるPhwittr
CodeIgniterによるPhwittr
Data apiで実現 進化するwebの世界
Data apiで実現 進化するwebの世界
シンプルな9つのサンプルで学ぶJava Script初心者のためのAngularJS超入門ハンズオン
シンプルな9つのサンプルで学ぶJava Script初心者のためのAngularJS超入門ハンズオン
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
初めての Data api cms どうでしょう - 大阪夏の陣
初めての Data api cms どうでしょう - 大阪夏の陣
イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱
sgvizler
sgvizler
食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・
食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・
かんたん Twitter アプリをつくろう
かんたん Twitter アプリをつくろう
Plus de Takami Kazuya
HTML栄枯盛衰は世の習い
HTML栄枯盛衰は世の習い
Takami Kazuya
Google Apps Script 入門
Google Apps Script 入門
Takami Kazuya
GoogleAppsScript入門
GoogleAppsScript入門
Takami Kazuya
Googleデータポータルで見える化に挑戦vol.2
Googleデータポータルで見える化に挑戦vol.2
Takami Kazuya
WordPressで考えるこれからのコンテンツ制作
WordPressで考えるこれからのコンテンツ制作
Takami Kazuya
WordPressをこれから始める人のためのテーマ講座
WordPressをこれから始める人のためのテーマ講座
Takami Kazuya
WordPress+JSON-LDで構造化するこれからのマークアップ WordFes Nagoya 2016
WordPress+JSON-LDで構造化するこれからのマークアップ WordFes Nagoya 2016
Takami Kazuya
WordPress + JSON-LDで構造化するこれからのマークアップ
WordPress + JSON-LDで構造化するこれからのマークアップ
Takami Kazuya
WordPress widget api
WordPress widget api
Takami Kazuya
Miyazaki.js vol.2
Miyazaki.js vol.2
Takami Kazuya
React Facebook JavaScript Library
React Facebook JavaScript Library
Takami Kazuya
Wordpress カスタム投稿
Wordpress カスタム投稿
Takami Kazuya
WordPressプラグインの作り方
WordPressプラグインの作り方
Takami Kazuya
【WordBench宮崎】第3回・4回アンケート報告
【WordBench宮崎】第3回・4回アンケート報告
Takami Kazuya
WordPressプラグイン考察
WordPressプラグイン考察
Takami Kazuya
WordPressテーマ作成
WordPressテーマ作成
Takami Kazuya
WordPress×jQueryMobile
WordPress×jQueryMobile
Takami Kazuya
EC-CUBEプラグイン制作のポイント
EC-CUBEプラグイン制作のポイント
Takami Kazuya
今から学ぶ!jQuery Mobile!
今から学ぶ!jQuery Mobile!
Takami Kazuya
英語でカゴラボ紹介
英語でカゴラボ紹介
Takami Kazuya
Plus de Takami Kazuya
(20)
HTML栄枯盛衰は世の習い
HTML栄枯盛衰は世の習い
Google Apps Script 入門
Google Apps Script 入門
GoogleAppsScript入門
GoogleAppsScript入門
Googleデータポータルで見える化に挑戦vol.2
Googleデータポータルで見える化に挑戦vol.2
WordPressで考えるこれからのコンテンツ制作
WordPressで考えるこれからのコンテンツ制作
WordPressをこれから始める人のためのテーマ講座
WordPressをこれから始める人のためのテーマ講座
WordPress+JSON-LDで構造化するこれからのマークアップ WordFes Nagoya 2016
WordPress+JSON-LDで構造化するこれからのマークアップ WordFes Nagoya 2016
WordPress + JSON-LDで構造化するこれからのマークアップ
WordPress + JSON-LDで構造化するこれからのマークアップ
WordPress widget api
WordPress widget api
Miyazaki.js vol.2
Miyazaki.js vol.2
React Facebook JavaScript Library
React Facebook JavaScript Library
Wordpress カスタム投稿
Wordpress カスタム投稿
WordPressプラグインの作り方
WordPressプラグインの作り方
【WordBench宮崎】第3回・4回アンケート報告
【WordBench宮崎】第3回・4回アンケート報告
WordPressプラグイン考察
WordPressプラグイン考察
WordPressテーマ作成
WordPressテーマ作成
WordPress×jQueryMobile
WordPress×jQueryMobile
EC-CUBEプラグイン制作のポイント
EC-CUBEプラグイン制作のポイント
今から学ぶ!jQuery Mobile!
今から学ぶ!jQuery Mobile!
英語でカゴラボ紹介
英語でカゴラボ紹介
History api
1.
©aratana Inc. pushState(“www.aratana.jp”,
“⾼高⾒見見和也”, “Front End Engineer”); History API JavaScriptルーティングの基本イロハ
2.
自己紹介 2 ⾼高⾒見見 和也(Takami Kazuya) 株式会社アラタナ ECテクノロジー事業本部:デザイングループ所属 フロントエンドエンジニア Twitter@miiitaka Facebook@miiitaka
3.
戯れている 3
4.
History API? ©aratana Inc.
4 History APIとは? ブラウザの履履歴情報をJavaScriptから操作する機能。
5.
使ったことあるでしょ? ©aratana Inc. 5
History API は昔からありました。 ・history.back() ・history.forward() ・history.go() ・history.length() ・history.state()
6.
履歴操作 Yeah ©aratana Inc.
6 HTML5から履歴の追加・書き換えができるようになりました。 ・history.back() ・history.forward() ・history.go() ・history.length() ・history.state() ・history.pushState(data, title[, url]) ・history.replaceState(data, title[, url])
7.
Routing? ©aratana Inc. 7
Routing(ルーティング)? HTTPリクエストのURLに応じて、呼び出す処理理を決定する仕組みのこ と。
8.
例えばこんな構造 ©aratana Inc. 8
9.
例えばこんな構造 ©aratana Inc. 9
Template Routing JS HTML
10.
jQueryで実装してみる ©aratana Inc. 10
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-‐8"> <Etle>History API Demo (jQuery)</Etle> <script src="components/jquery/dist/jquery.min.js"></script> </head> <body> <ul id="menu"> <li><a href="page1.html">PAGE-‐1</a></li> <li><a href="page2.html">PAGE-‐2</a></li> <li><a href="page3.html">PAGE-‐3</a></li> </ul> <div id="contents"></div> <script src="js/app.js"></script> </body> </html> jquery.html
11.
jQueryで実装してみる ©aratana Inc. 11
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-‐8"> <Etle>History API Demo (jQuery)</Etle> <script src="components/jquery/dist/jquery.min.js"></script> </head> <body> <ul id="menu"> <li><a href="page1.html">PAGE-‐1</a></li> <li><a href="page2.html">PAGE-‐2</a></li> <li><a href="page3.html">PAGE-‐3</a></li> </ul> <div id="contents"></div> <script src="js/app.js"></script> </body> </html> jquery.html
12.
jQueryで実装してみる ©aratana Inc. 12
(funcEon ($) { "use strict"; funcEon loadData(url) { $.ajax({ "type":"GET", "dataType":"html", "url":"/html/" + url }).done(funcEon (data) { $("#contents").html(data); }); } $("#menu").find("a").on("click", funcEon (e) { e.preventDefault(); history.pushState(null, null, $(this).aEr("href")); loadData($(this).aar("href")); }); $(window).on("popstate", funcEon (e) { e.preventDefault(); loadData(locaEon.pathname.split('/').pop()); }); }(jQuery)); app.js
13.
AngularJSで実装してみる ©aratana Inc. 13
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-‐8"> <base href="/"> <Etle>History API Demo (Angular)</Etle> <script src="components/angular/angular.min.js"></script> <script src="components/angular-‐route/angular-‐route.min.js"></script> </head> <body> <ul id="menu"> <li><a href="page1">PAGE-‐1</a></li> <li><a href="page2">PAGE-‐2</a></li> <li><a href="page3">PAGE-‐3</a></li> </ul> <div id="contents" data-‐ng-‐view></div> <script src="js/angular.js"></script> </body> </html> angular.htm l
14.
AngularJSで実装してみる ©aratana Inc. 14
(funcEon (angular) { "use strict"; var app = angular.module("app", ["ngRoute"]); app.config(["$routeProvider", "$locaEonProvider", funcEon ($routeProvider, $locaEonProvider) { $locaEonProvider.html5Mode(true); $routeProvider .when("/page1", { "templateUrl": "../html/page1.html“ }) .when("/page2", { "templateUrl": "../html/page2.html“ }) .when("/page3", { "templateUrl": "../html/page3.html“ }); } ]); angular.bootstrap(document, ['app'], 'strictDi'); }(angular)); angular.js
15.
メリットは? ©aratana Inc. 15
Routing(ルーティング)のメリットは? ・共通のパーツはリロードする必要がないので⾼高速 ・ネットワークの負荷が減る ・要素をパーツ化しやすい ・データ取得をajaxでやりとりすれば、1度度もページ更更新なしで完結する。 ・URLをファイル名に関係なく⾃自由に設定できる(angularでの例例) (^o^)
16.
デメリットは? ©aratana Inc. 16
Routing(ルーティング)のデメリットは? ・URL設定やMVWなどきちんとした設計が必要(個⼈人の感想です) ・SEOどうなの? (´・ω・`)
17.
Thank You !! ©aratana
Inc. 17 ご清聴ありがとうございました。
Télécharger maintenant