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