Angular jsとsinatraでturbolinks

3,371 views

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,371
On SlideShare
0
From Embeds
0
Number of Embeds
1,665
Actions
Shares
0
Downloads
4
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Angular jsとsinatraでturbolinks

  1. 1. AngularJS+Sinatraで Turbolinks Minori Tokuda
  2. 2. AngularJSとは ▪Google製のJava Scriptフレームワー ク ▪要はクライアントサイドでMVCをやる ▪データバインディング強力
  3. 3. クライアントサイドMVC? ▪要は View が DOM で Model が JavaScript のオブジェクト ▪DOM と Model の状態を同期させたい なーというときに AngularJS がよしな にしてくれる ▪データバインディング
  4. 4. データバインディング View <div ng-controller="MyCtrl"> {{message}} </div> Controller function MyCtrl($scope){ $scope.message = "Hello, World!"; }
  5. 5. もっとデータバインディング View <div ng-controller="MyCtrl"> count = {{count}} </div> <button ng-click= "countup()"> Controller function MyCtrl($scope){ $scope. count = 0; $scope.coutup=function(){ $scope.count++; } }
  6. 6. ここから本題 ▪JavaScriptでゴリゴリアプリをか ける! ▪ので、習作として自分のブログを AngularJSベースに置き換え ▪ブログ記事は全部API経由で動的に 読み込み ▪あれ、アクセスが減ってる・・・
  7. 7. 問題は・・・ 検索エンジン(Google)からの 流入が減っていた
  8. 8. GoogleのクローラはJavaScriptを実行でき ないため、 コンテンツを読み込んでくれなかった!
  9. 9. JavaScriptアプリでSEO = 無理ゲー
  10. 10. 一応、サーバサイドでレンダリングして HTMLを出すという手もある =>めんどい…
  11. 11. 対応策 ▪ 最初にページをロードした時はサーバサイドで生成したビュー を表示 ▪ ページ内リンクはAjaxイベントに置き換えて、リンク移動する ときはコンテンツだけ動的に書き換え ▪ 書き換えるコンテンツはAPIから取得してJavaScript側で生成 PushState=URL変更のイベントをJavaScript側で管理できる
  12. 12. そんなんできるの?=> YES ngView <div ng-view> </div> ngRoute app.config( function($routeProvider){ $routeProvider. when("/page1", { templateUrl: "/page1. html" }); } );
  13. 13. そんなんできるの?=> YES ngView <div ng-view> </div> ngRoute app.config( function($routeProvider){ $routeProvider. when("/page1", { templateUrl: "/page1. html" }); } ); ここにpage1. htmlの内容 が挿入される ページ遷移を乗っ取って、 Ajaxイベントに置き換える
  14. 14. Header Body Title Content テキストを入力 最初に開いたページだけ はサーバ側で生成し、 他 のページに移動するとき は、中身のコンテンツだ け動的に読み込む! ここと、 ここを、 AngularJSの ngRouteを使っ て、入れ替える
  15. 15. あれ、これって・・・ RailsのTurbolinksじゃね?
  16. 16. Turbolinks ▪ Railsでpjax(pushState + Ajax)するためのプラグイン ▪ Rails4でデフォルトで入るように ▪ JavaScriptページ遷移したように見せかける – ボディとタイトルをAjaxでごっそり入れ替え – URLはpushStateで置き換え ▪ JavaScript、CSSの再読み込みが発生しない ▪ DOMも再読み込みしない
  17. 17. Header Body Title Content テキストを入力 要するにこれ ここと、 ここを、 JavaScriptで入れ替 える
  18. 18. 同じ・・・ Railsでよくね?
  19. 19. 結論が出ました!それはそれとして・・・ ▪ AngularJSは便利なので使っていきたい – TurbolinksとAngularJSの同時使用は相性悪い ▪ Sinatraで作ってしまったので作りなおすのめんどい ▪ Rails重い
  20. 20. というわけで、 Sinatra+AngularJSで、 Turbolinksモドキを作ってみた
  21. 21. 続きはLive Demoで!

×