Help us understand the problem. What is going on with this article?

Turbolinks 生存戦略

More than 5 years have passed since last update.

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

実際、titlecsrf-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

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

そのまま 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 有効の遷移が視覚的に確認できるので、
本使用の有無に関わらず、開発時だけでも有効にしておくと便利🚀

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away