Download to read offline
![履歴操作 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])](https://image.slidesharecdn.com/historyapi-150704072901-lva1-app6892/85/History-api-6-320.jpg)
![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](https://image.slidesharecdn.com/historyapi-150704072901-lva1-app6892/85/History-api-14-320.jpg)
![[Azure Deep Dive] APIエコノミーに向けて ～Azure API ManagementによるAPIの公開と管理～ (2016/12/16)](https://cdn.slidesharecdn.com/ss_thumbnails/20161216azuredeepdiveazureapimanagement-161216082914-thumbnail.jpg?width=640&height=640&fit=bounds)
History api
- 1. ©aratana Inc. pushState(“www.aratana.jp”, “⾼高⾒見見和也”, “Front End Engineer”); History API JavaScriptルーティングの基本イロハ
- 2.
- 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.
- 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 ご清聴ありがとうございました。