Your SlideShare is downloading. ×
0
Angular jsとsinatraでturbolinks
Angular jsとsinatraでturbolinks
Angular jsとsinatraでturbolinks
Angular jsとsinatraでturbolinks
Angular jsとsinatraでturbolinks
Angular jsとsinatraでturbolinks
Angular jsとsinatraでturbolinks
Angular jsとsinatraでturbolinks
Angular jsとsinatraでturbolinks
Angular jsとsinatraでturbolinks
Angular jsとsinatraでturbolinks
Angular jsとsinatraでturbolinks
Angular jsとsinatraでturbolinks
Angular jsとsinatraでturbolinks
Angular jsとsinatraでturbolinks
Angular jsとsinatraでturbolinks
Angular jsとsinatraでturbolinks
Angular jsとsinatraでturbolinks
Angular jsとsinatraでturbolinks
Angular jsとsinatraでturbolinks
Angular jsとsinatraでturbolinks
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Angular jsとsinatraでturbolinks

2,201

Published on

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

No Downloads
Views
Total Views
2,201
On Slideshare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
3
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で!

×