Turbolinks 生存戦略

# Introduction

Ruby on Rails で無効にされがちな Turbolinks を生かす開発をしてみたときの対応策まとめです🐹
Turbolinks のバージョンは 2.5.3📦

*wiz5 - もしプログラマが書店員だったら*
[http://wiz5.jp](http://wiz5.jp)

# $(document).ready() が発火しない

*jquery.turbolinks*
[https://github.com/kossnocorp/jquery.turbolinks](https://github.com/kossnocorp/jquery.turbolinks)

の導入で解決🍺

# \<head\> が書き変わらない

DHH 曰く、

[https://github.com/rails/turbolinks/pull/165](https://github.com/rails/turbolinks/pull/165)

実際、`title` と `csrf-token` は書き変わるので困らない🐬

と、考えていたものの、メタ情報を参照するスクリプトで都合が悪い☔️
例えば、`canonical` を引用するシェアボタンとか👻
この場合は `location.href` で置き換えるなど、対応するためにもこの事象を覚えておく📣

# \<script src="*"\> が読み込まれない

`<body>` 内は駄目❌
なので、`<body>` 内読み込みのものを解消することに🎃
基本的には `<head>` へ移し、`page:load` 時に各々のリロード機構を利用する💿

## Twitter

`widgets.js` 読み込み後の `twttr.widgets.load()` でリロード📀

が、定番ですが、今回 SNS ボタン機能はブックマークレットを活用することにした🔖

*Twitter Developers*
[https://dev.twitter.com/web/bookmarklet](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

*Facebook*
[https://www.facebook.com/share_options.php](https://www.facebook.com/share_options.php)

そのまま `click` イベントに設定📌

## Google+

*Google Developers*
[https://developers.google.com/+/web/share/](https://developers.google.com/+/web/share/)

そのまま `click` イベントに設定📌

## HatenaBookmark

*Hatena Bookmarklet*
[http://www.hatena.ne.jp/tool/bookmarklet](http://www.hatena.ne.jp/tool/bookmarklet)

そのまま `click` イベントに設定📌

## Google Analytics

*Google Developers*
[https://developers.google.com/analytics/devguides/collection/analyticsjs/advanced](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](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 有効の遷移が視覚的に確認できるので、
本使用の有無に関わらず、開発時だけでも有効にしておくと便利🚀