Introduction
Ruby on Rails で無効にされがちな Turbolinks を生かす開発をしてみたときの対応策まとめです🐹
Turbolinks のバージョンは 2.5.3📦
wiz5 - もしプログラマが書店員だったら
http://wiz5.jp
$(document).ready() が発火しない
jquery.turbolinks
https://github.com/kossnocorp/jquery.turbolinks
の導入で解決🍺
<head> が書き変わらない
DHH 曰く、
https://github.com/rails/turbolinks/pull/165
実際、title と csrf-token は書き変わるので困らない🐬
と、考えていたものの、メタ情報を参照するスクリプトで都合が悪い☔️
例えば、canonical を引用するシェアボタンとか👻
この場合は location.href で置き換えるなど、対応するためにもこの事象を覚えておく📣
<script src="*"> が読み込まれない
<body> 内は駄目❌
なので、<body> 内読み込みのものを解消することに🎃
基本的には <head> へ移し、page:load 時に各々のリロード機構を利用する💿
widgets.js 読み込み後の twttr.widgets.load() でリロード📀
が、定番ですが、今回 SNS ボタン機能はブックマークレットを活用することにした🔖
Twitter Developers
https://dev.twitter.com/web/bookmarklet
share.js の挙動から必要な部分を抽出、canonical 優先を変更し、
window.open(
'https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'&url='+encodeURIComponent(location.href),
'', 'width=550, height=450, personalbar=0, toolbar=0, scrollbars=1, resizable=1'
);
をボタンの click イベントに設定📌
Facebook
https://www.facebook.com/share_options.php
そのまま click イベントに設定📌
Google+
Google Developers
https://developers.google.com/+/web/share/
そのまま click イベントに設定📌
HatenaBookmark
Hatena Bookmarklet
http://www.hatena.ne.jp/tool/bookmarklet
そのまま click イベントに設定📌
Google Analytics
Google Developers
https://developers.google.com/analytics/devguides/collection/analyticsjs/advanced
を参考にして、
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXX-Y', 'auto');
トラッカーの生成までを <head> 内に記述✏️
そして、page:load 時に、
if (window.ga) {
ga('set', 'location', location.href.split('#')[0]);
ga('send', 'pageview');
}
location.href をセットして、ページ毎に送信📮
Google AdSense
Turbolinks Compatibility
http://reed.github.io/turbolinks-compatibility/google_adsense.html
の手法で動作確認できたものの、https には対応できなかった⚠️
jsapi から取得してくる古い default.I.js を読み解いていくと、
https に対応するためのメソッド定義は見当たるものの、
有効にするための引数が常に空っぽ👾
なので、最終的には <iframe> で包み実行🎉
Progress Bar を使用する
ページ遷移時に表示される Progress Bar が 2.5.2 から導入され、
3.0 でデフォルト有効になる模様🚧
README では、
Turbolinks.ProgressBar.enable()
Turbolinks.ProgressBar.disable()
と記載されているものの、現バージョンには存在しない💣
CHANGELOG を見ると、
Enable progress bar feature by default. Remove
Turbolinks.enableProgressBar()from public API, replaced with:
なので、
Turbolinks.enableProgressBar()
を呼び出して有効化⚡️
Turbolinks 有効の遷移が視覚的に確認できるので、
本使用の有無に関わらず、開発時だけでも有効にしておくと便利🚀