Enviar pesquisa
Carregar
Angular jsとsinatraでturbolinks
•
Transferir como PPTX, PDF
•
2 gostaram
•
5,643 visualizações
Minori Tokuda
Seguir
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 21
Baixar agora
Recomendados
Who is painter for webpage from html
Who is painter for webpage from html
SotaRyotaro
Ma gician <Vue にはできないこと (1)> WeJS 37th
Ma gician <Vue にはできないこと (1)> WeJS 37th
Eucen Stew
Ma_gician (世界中のフロントエンダーの残業時間を減らす、新しいフロントエンドフレームワーク)<詳細版>
Ma_gician (世界中のフロントエンダーの残業時間を減らす、新しいフロントエンドフレームワーク)<詳細版>
Eucen Stew
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
normalian
20130924 Picomon CRH勉強会
20130924 Picomon CRH勉強会
Yukihiro Kitazawa
Ma gician <wide version> @meguro.es 2019/10/10
Ma gician <wide version> @meguro.es 2019/10/10
Eucen Stew
Grid application テンプレートを紐解く
Grid application テンプレートを紐解く
Kazuhide Maruyama
introduction to Marionette.js (jscafe14)
introduction to Marionette.js (jscafe14)
Ryuma Tsukano
Recomendados
Who is painter for webpage from html
Who is painter for webpage from html
SotaRyotaro
Ma gician <Vue にはできないこと (1)> WeJS 37th
Ma gician <Vue にはできないこと (1)> WeJS 37th
Eucen Stew
Ma_gician (世界中のフロントエンダーの残業時間を減らす、新しいフロントエンドフレームワーク)<詳細版>
Ma_gician (世界中のフロントエンダーの残業時間を減らす、新しいフロントエンドフレームワーク)<詳細版>
Eucen Stew
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
normalian
20130924 Picomon CRH勉強会
20130924 Picomon CRH勉強会
Yukihiro Kitazawa
Ma gician <wide version> @meguro.es 2019/10/10
Ma gician <wide version> @meguro.es 2019/10/10
Eucen Stew
Grid application テンプレートを紐解く
Grid application テンプレートを紐解く
Kazuhide Maruyama
introduction to Marionette.js (jscafe14)
introduction to Marionette.js (jscafe14)
Ryuma Tsukano
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
Yasuhito Yabe
Web制作勉強会 #2
Web制作勉強会 #2
Moto Yan
Knockout.js を利用したインタラクティブ web アプリケーション開発
Knockout.js を利用したインタラクティブ web アプリケーション開発
Daizen Ikehara
まだDOM操作で消耗してるの?
まだDOM操作で消耗してるの?
IRI MO
作って分かるKnockoutJS@ALM11月
作って分かるKnockoutJS@ALM11月
Takuya Ueda
20160927 reactmeetup
20160927 reactmeetup
Naoki Kurosawa
Knockout
Knockout
Kazuhiro Eguchi
スマホにおけるWebGL入門
スマホにおけるWebGL入門
Yohta Kanke
KnockoutJS勉強会 プロジェクトにmvvmを適用する狙い
KnockoutJS勉強会 プロジェクトにmvvmを適用する狙い
Toshihiro Kawachi
第5回 HTML5minutes! LT 「ねこでもできるWebGL」
第5回 HTML5minutes! LT 「ねこでもできるWebGL」
Shinnosuke Morimoto
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
Kohei Asai
AngularJSの高速化
AngularJSの高速化
Kon Yuichi
Java script
Java script
sayoko miura
AngularJSでの非同期処理の話
AngularJSでの非同期処理の話
Yosuke Onoue
ASP.NET MVC Part 2
ASP.NET MVC Part 2
Yoshitaka Seo
公式page改ざんで学ぶjQuery入門 (jscafe7)
公式page改ざんで学ぶjQuery入門 (jscafe7)
Ryuma Tsukano
株式会社インタースペース 清水様 登壇資料
株式会社インタースペース 清水様 登壇資料
leverages_event
PHP-Ninjaの裏側
PHP-Ninjaの裏側
Takayuki Miyauchi
Gong anyware
Gong anyware
Aki Ariga
はじめて翻訳記事を書いたら300ブクマ超えた話
はじめて翻訳記事を書いたら300ブクマ超えた話
Aki Ariga
gsub with ActiveSupport::SafeBuffer
gsub with ActiveSupport::SafeBuffer
Aki Ariga
Juliaを使った機械学習
Juliaを使った機械学習
Aki Ariga
Mais conteúdo relacionado
Mais procurados
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
Yasuhito Yabe
Web制作勉強会 #2
Web制作勉強会 #2
Moto Yan
Knockout.js を利用したインタラクティブ web アプリケーション開発
Knockout.js を利用したインタラクティブ web アプリケーション開発
Daizen Ikehara
まだDOM操作で消耗してるの?
まだDOM操作で消耗してるの?
IRI MO
作って分かるKnockoutJS@ALM11月
作って分かるKnockoutJS@ALM11月
Takuya Ueda
20160927 reactmeetup
20160927 reactmeetup
Naoki Kurosawa
Knockout
Knockout
Kazuhiro Eguchi
スマホにおけるWebGL入門
スマホにおけるWebGL入門
Yohta Kanke
KnockoutJS勉強会 プロジェクトにmvvmを適用する狙い
KnockoutJS勉強会 プロジェクトにmvvmを適用する狙い
Toshihiro Kawachi
第5回 HTML5minutes! LT 「ねこでもできるWebGL」
第5回 HTML5minutes! LT 「ねこでもできるWebGL」
Shinnosuke Morimoto
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
Kohei Asai
AngularJSの高速化
AngularJSの高速化
Kon Yuichi
Java script
Java script
sayoko miura
AngularJSでの非同期処理の話
AngularJSでの非同期処理の話
Yosuke Onoue
ASP.NET MVC Part 2
ASP.NET MVC Part 2
Yoshitaka Seo
公式page改ざんで学ぶjQuery入門 (jscafe7)
公式page改ざんで学ぶjQuery入門 (jscafe7)
Ryuma Tsukano
株式会社インタースペース 清水様 登壇資料
株式会社インタースペース 清水様 登壇資料
leverages_event
PHP-Ninjaの裏側
PHP-Ninjaの裏側
Takayuki Miyauchi
Mais procurados
(18)
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
Web制作勉強会 #2
Web制作勉強会 #2
Knockout.js を利用したインタラクティブ web アプリケーション開発
Knockout.js を利用したインタラクティブ web アプリケーション開発
まだDOM操作で消耗してるの?
まだDOM操作で消耗してるの?
作って分かるKnockoutJS@ALM11月
作って分かるKnockoutJS@ALM11月
20160927 reactmeetup
20160927 reactmeetup
Knockout
Knockout
スマホにおけるWebGL入門
スマホにおけるWebGL入門
KnockoutJS勉強会 プロジェクトにmvvmを適用する狙い
KnockoutJS勉強会 プロジェクトにmvvmを適用する狙い
第5回 HTML5minutes! LT 「ねこでもできるWebGL」
第5回 HTML5minutes! LT 「ねこでもできるWebGL」
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
AngularJSの高速化
AngularJSの高速化
Java script
Java script
AngularJSでの非同期処理の話
AngularJSでの非同期処理の話
ASP.NET MVC Part 2
ASP.NET MVC Part 2
公式page改ざんで学ぶjQuery入門 (jscafe7)
公式page改ざんで学ぶjQuery入門 (jscafe7)
株式会社インタースペース 清水様 登壇資料
株式会社インタースペース 清水様 登壇資料
PHP-Ninjaの裏側
PHP-Ninjaの裏側
Destaque
Gong anyware
Gong anyware
Aki Ariga
はじめて翻訳記事を書いたら300ブクマ超えた話
はじめて翻訳記事を書いたら300ブクマ超えた話
Aki Ariga
gsub with ActiveSupport::SafeBuffer
gsub with ActiveSupport::SafeBuffer
Aki Ariga
Juliaを使った機械学習
Juliaを使った機械学習
Aki Ariga
Introduction to Kanagawa Ruby Kaigi01 #kana01
Introduction to Kanagawa Ruby Kaigi01 #kana01
Aki Ariga
Julia 100 exercises #JuliaTokyo
Julia 100 exercises #JuliaTokyo
Aki Ariga
素人がDeep Learningと他の機械学習の性能を比較してみた
素人がDeep Learningと他の機械学習の性能を比較してみた
Toru Imai
Pythonによる機械学習の最前線
Pythonによる機械学習の最前線
Kimikazu Kato
あなたの業務に機械学習を活用する5つのポイント
あなたの業務に機械学習を活用する5つのポイント
Shohei Hido
Destaque
(9)
Gong anyware
Gong anyware
はじめて翻訳記事を書いたら300ブクマ超えた話
はじめて翻訳記事を書いたら300ブクマ超えた話
gsub with ActiveSupport::SafeBuffer
gsub with ActiveSupport::SafeBuffer
Juliaを使った機械学習
Juliaを使った機械学習
Introduction to Kanagawa Ruby Kaigi01 #kana01
Introduction to Kanagawa Ruby Kaigi01 #kana01
Julia 100 exercises #JuliaTokyo
Julia 100 exercises #JuliaTokyo
素人がDeep Learningと他の機械学習の性能を比較してみた
素人がDeep Learningと他の機械学習の性能を比較してみた
Pythonによる機械学習の最前線
Pythonによる機械学習の最前線
あなたの業務に機械学習を活用する5つのポイント
あなたの業務に機械学習を活用する5つのポイント
Semelhante a Angular jsとsinatraでturbolinks
Angular.jsについてちょっとしゃべる
Angular.jsについてちょっとしゃべる
Masashi Haga
Tide - SmalltalkでSPA
Tide - SmalltalkでSPA
Masashi Umezawa
Try_to_writecode_practicaltest #atest_hack
Try_to_writecode_practicaltest #atest_hack
kimukou_26 Kimukou
【17-C-2】 クラウド上でのエンタープライズアプリケーション開発
【17-C-2】 クラウド上でのエンタープライズアプリケーション開発
lalha
Mithril - 軽量/高速なMVCフレームワーク
Mithril - 軽量/高速なMVCフレームワーク
sairoutine
Angular js はまりどころ
Angular js はまりどころ
Ayumi Goto
AngularJSを触ってみた
AngularJSを触ってみた
tomowata
VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発
Yuta Matsumura
俺とAngular JS 2
俺とAngular JS 2
Masayuki KaToH
3分でわかるangular js
3分でわかるangular js
Shin Adachi
3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
AdvancedTechNight
[Cloud OnAir] Talks by DevRel Vol. 1 インフラストラクチャ 2020年7月30日 放送
[Cloud OnAir] Talks by DevRel Vol. 1 インフラストラクチャ 2020年7月30日 放送
Google Cloud Platform - Japan
2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
miso- soup3
Brush up your Coding! 2013 winter
Brush up your Coding! 2013 winter
Shogo Sensui
AngularJSでデータビジュアライゼーションがしたい
AngularJSでデータビジュアライゼーションがしたい
Yosuke Onoue
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
Hiroaki Wakamatsu
クリスマスを支える俺たちとJava(JJUG CCC 2015 Spring AB4)
クリスマスを支える俺たちとJava(JJUG CCC 2015 Spring AB4)
Koichi Sakata
Re-frame and A-Frame
Re-frame and A-Frame
Kazuhiro Hara
これでBigQueryをドヤ顔で語れる!BigQueryの基本
これでBigQueryをドヤ顔で語れる!BigQueryの基本
Tomohiro Shinden
Architecting on Alibaba Cloud - Fundamentals - 2018
Architecting on Alibaba Cloud - Fundamentals - 2018
真吾 吉田
Semelhante a Angular jsとsinatraでturbolinks
(20)
Angular.jsについてちょっとしゃべる
Angular.jsについてちょっとしゃべる
Tide - SmalltalkでSPA
Tide - SmalltalkでSPA
Try_to_writecode_practicaltest #atest_hack
Try_to_writecode_practicaltest #atest_hack
【17-C-2】 クラウド上でのエンタープライズアプリケーション開発
【17-C-2】 クラウド上でのエンタープライズアプリケーション開発
Mithril - 軽量/高速なMVCフレームワーク
Mithril - 軽量/高速なMVCフレームワーク
Angular js はまりどころ
Angular js はまりどころ
AngularJSを触ってみた
AngularJSを触ってみた
VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発
俺とAngular JS 2
俺とAngular JS 2
3分でわかるangular js
3分でわかるangular js
3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
3DCG(3Dコンピュータグラフィック)をWebGLで始めよう
[Cloud OnAir] Talks by DevRel Vol. 1 インフラストラクチャ 2020年7月30日 放送
[Cloud OnAir] Talks by DevRel Vol. 1 インフラストラクチャ 2020年7月30日 放送
2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
Brush up your Coding! 2013 winter
Brush up your Coding! 2013 winter
AngularJSでデータビジュアライゼーションがしたい
AngularJSでデータビジュアライゼーションがしたい
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
クリスマスを支える俺たちとJava(JJUG CCC 2015 Spring AB4)
クリスマスを支える俺たちとJava(JJUG CCC 2015 Spring AB4)
Re-frame and A-Frame
Re-frame and A-Frame
これでBigQueryをドヤ顔で語れる!BigQueryの基本
これでBigQueryをドヤ顔で語れる!BigQueryの基本
Architecting on Alibaba Cloud - Fundamentals - 2018
Architecting on Alibaba Cloud - Fundamentals - 2018
Angular jsとsinatraでturbolinks
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で!
Baixar agora