このブログのデザインを新しくした。

やはり左のカラムに本文があったほうが読みやすいだろうということでそれにし、ヘッダーに画像を使ってブログ感を出した。ちなみにこのヘッダー画像はチャリで日本最北端まで行った時に通りかかった東北のどっか高いところ。実際に夏だったし、夏っぽくて気に入っている。

以前の見た目の様子です。

Turbolinks で高速化

実際にヘッダーとかクリックしてポチポチ移動してもらえればわかると思うんだけど、ページの遷移がめちゃくちゃ速くなった。このブログは Rails で手作りされているものなので、Turbolinks を有効化するだけでこれくらい速くなった。ページ遷移が500ms以上かかる場合はプログレスバーが出現するが、ほぼ見ることはできない。

Turbolinks 5 対応

そろそろ 5 が主流になるということで Turbolinks 5 beta を使うことにした。Turbolinks というのは Rails プロジェクトを作成したらまず無効にするか、そもそも —skip-turbolinks オプションが付けられることで有名で、大半のWebサイトにとっては非常に厄介な副作用が含まれる。JavaScript がなんか動かなくなってアクセス解析が使えなかったり広告が貼れないということが起こります。流石に Google Analytics が使えないのはダメすぎるので適当に対応した。

Google Analytics

if window.history?.pushState and window.history.replaceState
  document.addEventListener 'turbolinks:before-render', (event) =>

    if window.ga != undefined
      ga('set', 'location', location.href.split('#')[0])
      ga('send', 'pageview', {"title": document.title})
    else if window._gaq != undefined
      _gaq.push(['_trackPageview'])
    else if window.pageTracker != undefined
      pageTracker._trackPageview();

今まで page:load イベントだったんですが、turbolinks 5 から turbolinks:* というイベント名に変更されてる。

https://github.com/turbolinks/turbolinks

Twitter Widgets

if window.history?.pushState and window.history.replaceState
  document.addEventListener 'turbolinks:load', (event) =>
    twttr.widgets.load() if window.twttr

Google AdSense

スマートフォンからのアクセスの時だけ AdSense を表示してるんだけど、Turbolinks 対応だるすぎて諦めた。出来ないことは無いんだろうけど広告収入が目的のサイトではないので。

  document.addEventListener 'turbolinks:render', (event) =>
    $('.adsbygoogle').hide()

このように、turbolinks で遷移してきた場合は広告を非表示にするという雑な対応をしている。

はてなのサブブログやめる

kksgのパソコン日記 http://kksg.hatenablog.com/

はてなブログでサブブログやりかけてたんだけど、やめてこっちだけにすることにした。編集画面が楽で高機能 & はてなトップページに露出するからすぐアクセスが増えるのでメリットは感じてたんだけど、それ以上にページのロードが遅すぎて不満だった。

これははてなブログが読み込まれるまでの様子。391リクエストも要求して全てがロード完了するまで46秒もかかってる。hatenablog.js というやつ10秒近くかかってるしなにやってるんじゃという感じ。

こちらが当ブログの様子。記事以外で iframe などは使わないようにしてるので、全てのロードが完了するまで１秒もかからないようになっている。turbolinks 化したので、ページ遷移は 200ms くらいで出来るようになってて、もはや見える感じがしない。維持費もはてなブログProと変わらんし、そもそも暇があればブログ作っていたいタイプの人間なので維持開発がめんどくさいとかがない。

とはいえ複数ブログ作るのは楽なのでPushdog開発ブログとかは引き続きはてなブログつかう

引き続きよろしくお願いいたします。