Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Angular jsとsinatraでturbolinks

5,195 views

Published on

  • Sex in your area is here: ❶❶❶ http://bit.ly/36cXjBY ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Follow the link, new dating source: ♥♥♥ http://bit.ly/36cXjBY ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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で!

×