SlideShare une entreprise Scribd logo
1  sur  17
Télécharger pour lire hors ligne
©aratana	
  Inc.	
 pushState(“www.aratana.jp”,	
  “⾼高⾒見見和也”,	
  “Front	
  End	
  Engineer”);	
  
History API
JavaScriptルーティングの基本イロハ
自己紹介	
2	
  
⾼高⾒見見  和也(Takami Kazuya)
株式会社アラタナ
ECテクノロジー事業本部:デザイングループ所属
フロントエンドエンジニア
Twitter@miiitaka
Facebook@miiitaka
戯れている	
3	
  
History API?	
©aratana	
  Inc.	
 4	
  
History APIとは?	
ブラウザの履履歴情報をJavaScriptから操作する機能。
使ったことあるでしょ?	
©aratana	
  Inc.	
 5	
  
History API は昔からありました。	
・history.back()
・history.forward()
・history.go()
・history.length()
・history.state()
履歴操作 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])
Routing?	
©aratana	
  Inc.	
 7	
  
Routing(ルーティング)?	
HTTPリクエストのURLに応じて、呼び出す処理理を決定する仕組みのこ
と。
例えばこんな構造	
©aratana	
  Inc.	
 8	
  
例えばこんな構造	
©aratana	
  Inc.	
 9	
  
Template
Routing JS
HTML
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
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
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
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
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
メリットは?	
©aratana	
  Inc.	
 15	
  
Routing(ルーティング)のメリットは?	
・共通のパーツはリロードする必要がないので⾼高速
・ネットワークの負荷が減る
・要素をパーツ化しやすい
・データ取得をajaxでやりとりすれば、1度度もページ更更新なしで完結する。
・URLをファイル名に関係なく⾃自由に設定できる(angularでの例例)
(^o^)
デメリットは?	
©aratana	
  Inc.	
 16	
  
Routing(ルーティング)のデメリットは?	
・URL設定やMVWなどきちんとした設計が必要(個⼈人の感想です)
・SEOどうなの?
(´・ω・`)
Thank	
  You	
  !!	
©aratana	
  Inc.	
 17	
  
ご清聴ありがとうございました。

Contenu connexe

Similaire à History api

Struts2を始めよう!
Struts2を始めよう!Struts2を始めよう!
Struts2を始めよう!Shinpei Ohtani
 
第19回html5とか勉強会 pjax
第19回html5とか勉強会 pjax第19回html5とか勉強会 pjax
第19回html5とか勉強会 pjaxKensaku Komatsu
 
Alfresco勉強会#36 alfresco 5でカスタムREST APIを作ってみよう
Alfresco勉強会#36 alfresco 5でカスタムREST APIを作ってみようAlfresco勉強会#36 alfresco 5でカスタムREST APIを作ってみよう
Alfresco勉強会#36 alfresco 5でカスタムREST APIを作ってみようTasuku Otani
 
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
 jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキングTakashi Okamoto
 
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & TipsjQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tipsyoshikawa_t
 
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用Yatabe Terumasa
 
Express Web Application Framework
Express Web Application FrameworkExpress Web Application Framework
Express Web Application FrameworkLearningTech
 
Titanium Mobile
Titanium MobileTitanium Mobile
Titanium MobileNaoya Ito
 
初めての Data API CMS どうでしょう - 仙台編 -
初めての Data API   CMS どうでしょう - 仙台編 -初めての Data API   CMS どうでしょう - 仙台編 -
初めての Data API CMS どうでしょう - 仙台編 -Yuji Takayama
 
CodeIgniterによるPhwittr
CodeIgniterによるPhwittrCodeIgniterによるPhwittr
CodeIgniterによるPhwittrkenjis
 
Data apiで実現 進化するwebの世界
Data apiで実現 進化するwebの世界Data apiで実現 進化するwebの世界
Data apiで実現 進化するwebの世界Yuji Takayama
 
シンプルな9つのサンプルで学ぶJava Script初心者のためのAngularJS超入門ハンズオン
シンプルな9つのサンプルで学ぶJava Script初心者のためのAngularJS超入門ハンズオンシンプルな9つのサンプルで学ぶJava Script初心者のためのAngularJS超入門ハンズオン
シンプルな9つのサンプルで学ぶJava Script初心者のためのAngularJS超入門ハンズオン健一 茂木
 
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframeworkSpring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframeworkToshiaki Maki
 
初めての Data api cms どうでしょう - 大阪夏の陣
初めての Data api   cms どうでしょう - 大阪夏の陣初めての Data api   cms どうでしょう - 大阪夏の陣
初めての Data api cms どうでしょう - 大阪夏の陣Yuji Takayama
 
イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱Fumio SAGAWA
 
食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・
食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・
食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・Yoshie Kaneno
 
かんたん Twitter アプリをつくろう
かんたん Twitter アプリをつくろう かんたん Twitter アプリをつくろう
かんたん Twitter アプリをつくろう Shuhei Iitsuka
 

Similaire à History api (20)

Struts2を始めよう!
Struts2を始めよう!Struts2を始めよう!
Struts2を始めよう!
 
第19回html5とか勉強会 pjax
第19回html5とか勉強会 pjax第19回html5とか勉強会 pjax
第19回html5とか勉強会 pjax
 
Alfresco勉強会#36 alfresco 5でカスタムREST APIを作ってみよう
Alfresco勉強会#36 alfresco 5でカスタムREST APIを作ってみようAlfresco勉強会#36 alfresco 5でカスタムREST APIを作ってみよう
Alfresco勉強会#36 alfresco 5でカスタムREST APIを作ってみよう
 
Jqm20120804 publish
Jqm20120804 publishJqm20120804 publish
Jqm20120804 publish
 
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
 jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
 
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & TipsjQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
 
JavaScript 実践講座 Framework, Tool, Performance
JavaScript 実践講座 Framework, Tool, PerformanceJavaScript 実践講座 Framework, Tool, Performance
JavaScript 実践講座 Framework, Tool, Performance
 
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
 
Express Web Application Framework
Express Web Application FrameworkExpress Web Application Framework
Express Web Application Framework
 
Titanium Mobile
Titanium MobileTitanium Mobile
Titanium Mobile
 
初めての Data API CMS どうでしょう - 仙台編 -
初めての Data API   CMS どうでしょう - 仙台編 -初めての Data API   CMS どうでしょう - 仙台編 -
初めての Data API CMS どうでしょう - 仙台編 -
 
CodeIgniterによるPhwittr
CodeIgniterによるPhwittrCodeIgniterによるPhwittr
CodeIgniterによるPhwittr
 
Data apiで実現 進化するwebの世界
Data apiで実現 進化するwebの世界Data apiで実現 進化するwebの世界
Data apiで実現 進化するwebの世界
 
シンプルな9つのサンプルで学ぶJava Script初心者のためのAngularJS超入門ハンズオン
シンプルな9つのサンプルで学ぶJava Script初心者のためのAngularJS超入門ハンズオンシンプルな9つのサンプルで学ぶJava Script初心者のためのAngularJS超入門ハンズオン
シンプルな9つのサンプルで学ぶJava Script初心者のためのAngularJS超入門ハンズオン
 
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframeworkSpring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
Spring Frameworkの今 (2013年版) #jjug_ccc #ccc_r17 #springframework
 
初めての Data api cms どうでしょう - 大阪夏の陣
初めての Data api   cms どうでしょう - 大阪夏の陣初めての Data api   cms どうでしょう - 大阪夏の陣
初めての Data api cms どうでしょう - 大阪夏の陣
 
イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱イマドキのフロントエンドエンジニアの道具箱
イマドキのフロントエンドエンジニアの道具箱
 
sgvizler
sgvizlersgvizler
sgvizler
 
食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・
食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・
食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・
 
かんたん Twitter アプリをつくろう
かんたん Twitter アプリをつくろう かんたん Twitter アプリをつくろう
かんたん Twitter アプリをつくろう
 

Plus de Takami Kazuya

HTML栄枯盛衰は世の習い
HTML栄枯盛衰は世の習いHTML栄枯盛衰は世の習い
HTML栄枯盛衰は世の習いTakami Kazuya
 
Google Apps Script 入門
Google Apps Script 入門Google Apps Script 入門
Google Apps Script 入門Takami Kazuya
 
GoogleAppsScript入門
GoogleAppsScript入門GoogleAppsScript入門
GoogleAppsScript入門Takami Kazuya
 
Googleデータポータルで見える化に挑戦vol.2
Googleデータポータルで見える化に挑戦vol.2Googleデータポータルで見える化に挑戦vol.2
Googleデータポータルで見える化に挑戦vol.2Takami Kazuya
 
WordPressで考えるこれからのコンテンツ制作
WordPressで考えるこれからのコンテンツ制作WordPressで考えるこれからのコンテンツ制作
WordPressで考えるこれからのコンテンツ制作Takami Kazuya
 
WordPressをこれから始める人のためのテーマ講座
WordPressをこれから始める人のためのテーマ講座WordPressをこれから始める人のためのテーマ講座
WordPressをこれから始める人のためのテーマ講座Takami Kazuya
 
WordPress+JSON-LDで構造化するこれからのマークアップ WordFes Nagoya 2016
WordPress+JSON-LDで構造化するこれからのマークアップ WordFes Nagoya 2016WordPress+JSON-LDで構造化するこれからのマークアップ WordFes Nagoya 2016
WordPress+JSON-LDで構造化するこれからのマークアップ WordFes Nagoya 2016Takami Kazuya
 
WordPress + JSON-LDで構造化するこれからのマークアップ
WordPress + JSON-LDで構造化するこれからのマークアップWordPress + JSON-LDで構造化するこれからのマークアップ
WordPress + JSON-LDで構造化するこれからのマークアップTakami Kazuya
 
WordPress widget api
WordPress widget apiWordPress widget api
WordPress widget apiTakami Kazuya
 
React Facebook JavaScript Library
React Facebook JavaScript LibraryReact Facebook JavaScript Library
React Facebook JavaScript LibraryTakami Kazuya
 
Wordpress カスタム投稿
Wordpress カスタム投稿Wordpress カスタム投稿
Wordpress カスタム投稿Takami Kazuya
 
WordPressプラグインの作り方
WordPressプラグインの作り方WordPressプラグインの作り方
WordPressプラグインの作り方Takami Kazuya
 
【WordBench宮崎】第3回・4回アンケート報告
【WordBench宮崎】第3回・4回アンケート報告【WordBench宮崎】第3回・4回アンケート報告
【WordBench宮崎】第3回・4回アンケート報告Takami Kazuya
 
WordPressプラグイン考察
WordPressプラグイン考察WordPressプラグイン考察
WordPressプラグイン考察Takami Kazuya
 
WordPressテーマ作成
WordPressテーマ作成WordPressテーマ作成
WordPressテーマ作成Takami Kazuya
 
WordPress×jQueryMobile
WordPress×jQueryMobileWordPress×jQueryMobile
WordPress×jQueryMobileTakami Kazuya
 
EC-CUBEプラグイン制作のポイント
EC-CUBEプラグイン制作のポイントEC-CUBEプラグイン制作のポイント
EC-CUBEプラグイン制作のポイントTakami Kazuya
 
今から学ぶ!jQuery Mobile!
今から学ぶ!jQuery Mobile!今から学ぶ!jQuery Mobile!
今から学ぶ!jQuery Mobile!Takami Kazuya
 
英語でカゴラボ紹介
英語でカゴラボ紹介英語でカゴラボ紹介
英語でカゴラボ紹介Takami Kazuya
 

Plus de Takami Kazuya (20)

HTML栄枯盛衰は世の習い
HTML栄枯盛衰は世の習いHTML栄枯盛衰は世の習い
HTML栄枯盛衰は世の習い
 
Google Apps Script 入門
Google Apps Script 入門Google Apps Script 入門
Google Apps Script 入門
 
GoogleAppsScript入門
GoogleAppsScript入門GoogleAppsScript入門
GoogleAppsScript入門
 
Googleデータポータルで見える化に挑戦vol.2
Googleデータポータルで見える化に挑戦vol.2Googleデータポータルで見える化に挑戦vol.2
Googleデータポータルで見える化に挑戦vol.2
 
WordPressで考えるこれからのコンテンツ制作
WordPressで考えるこれからのコンテンツ制作WordPressで考えるこれからのコンテンツ制作
WordPressで考えるこれからのコンテンツ制作
 
WordPressをこれから始める人のためのテーマ講座
WordPressをこれから始める人のためのテーマ講座WordPressをこれから始める人のためのテーマ講座
WordPressをこれから始める人のためのテーマ講座
 
WordPress+JSON-LDで構造化するこれからのマークアップ WordFes Nagoya 2016
WordPress+JSON-LDで構造化するこれからのマークアップ WordFes Nagoya 2016WordPress+JSON-LDで構造化するこれからのマークアップ WordFes Nagoya 2016
WordPress+JSON-LDで構造化するこれからのマークアップ WordFes Nagoya 2016
 
WordPress + JSON-LDで構造化するこれからのマークアップ
WordPress + JSON-LDで構造化するこれからのマークアップWordPress + JSON-LDで構造化するこれからのマークアップ
WordPress + JSON-LDで構造化するこれからのマークアップ
 
WordPress widget api
WordPress widget apiWordPress widget api
WordPress widget api
 
Miyazaki.js vol.2
Miyazaki.js vol.2Miyazaki.js vol.2
Miyazaki.js vol.2
 
React Facebook JavaScript Library
React Facebook JavaScript LibraryReact Facebook JavaScript Library
React Facebook JavaScript Library
 
Wordpress カスタム投稿
Wordpress カスタム投稿Wordpress カスタム投稿
Wordpress カスタム投稿
 
WordPressプラグインの作り方
WordPressプラグインの作り方WordPressプラグインの作り方
WordPressプラグインの作り方
 
【WordBench宮崎】第3回・4回アンケート報告
【WordBench宮崎】第3回・4回アンケート報告【WordBench宮崎】第3回・4回アンケート報告
【WordBench宮崎】第3回・4回アンケート報告
 
WordPressプラグイン考察
WordPressプラグイン考察WordPressプラグイン考察
WordPressプラグイン考察
 
WordPressテーマ作成
WordPressテーマ作成WordPressテーマ作成
WordPressテーマ作成
 
WordPress×jQueryMobile
WordPress×jQueryMobileWordPress×jQueryMobile
WordPress×jQueryMobile
 
EC-CUBEプラグイン制作のポイント
EC-CUBEプラグイン制作のポイントEC-CUBEプラグイン制作のポイント
EC-CUBEプラグイン制作のポイント
 
今から学ぶ!jQuery Mobile!
今から学ぶ!jQuery Mobile!今から学ぶ!jQuery Mobile!
今から学ぶ!jQuery Mobile!
 
英語でカゴラボ紹介
英語でカゴラボ紹介英語でカゴラボ紹介
英語でカゴラボ紹介
 

History api

  • 1. ©aratana  Inc. pushState(“www.aratana.jp”,  “⾼高⾒見見和也”,  “Front  End  Engineer”);   History API JavaScriptルーティングの基本イロハ
  • 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に応じて、呼び出す処理理を決定する仕組みのこ と。
  • 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   ご清聴ありがとうございました。