Angular jsとsinatraでturbolinks

  • 1,985 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,985
On Slideshare
0
From Embeds
0
Number of Embeds
17

Actions

Shares
Downloads
2
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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