読者です 読者をやめる 読者になる 読者になる

【Rails4】turbolinks使って新規サービス作ってみた

8月あたりから帰宅後や土日にちょこちょことRailsで遊んでたら、だんだん形になってきたのでサーバ借りてドメイン取って公開してみました。

Puhaar! - お酒を共有するサイト - http://puhaar.jp

Puhaar!とは

f:id:Peranikov:20141005233306p:plain

お酒の写真を取って、みんなで共有しようというSNSサイトです。 あの時何飲んだっけ?とならないように記録したり、みんなが飲んでるお酒を知りたい!というニーズを考えて作りました。 もともとは自分が酒好きのくせにお酒の名前が覚えられないために作ったものです。

最初はクローズドベータとして内輪で遊んでもらい、コンテンツも溜まってきたので今回オープンベータとしました。多分ずっとベータのままです

タイトルにturbolinksと銘打ったのは、turbolinksで検索しても無効化する記事の方が目立った気がしたので、実際にturbolinksでどこまでやれるのか?という実験も兼ねたからです。*1

というわけで、自分のふりかえりも兼ねて内部の技術的なことをここに記載しておきます。

turbolinksとは

誤解を恐れず簡単に言えば、ページ全部を読み込むのは遅いし無駄だから、必要な部分だけをJavascriptで差し替えようぜ、というPjaxをGem化してRailsに組み込んだものです。

こちらの方の記事が大変参考になりました。

Rails 4のturbolinksについて最低でも知っておきたい事 | KRAY Inc

今回はこのturbolinksを有効化したままサービスを作るという目的でしたが、苦労した点は後々でてきます。

技術・リソース

CoffeeScriptは単純にすごく興味があったので挑戦してみました。一方でScssの方はAssetPipeline対応のために仕方なく使ったり、あとはimport程度しかやっていないのであまり有効活用できていません。SassでないのはCSSとの互換が効くからです。

使用したGemについてはQiitaの方に投稿したのでそちらも見てみてください。

Rails4 + turbolinksで作ったサービスのGemfileを公開します - Qiita

サーバ

さくらVPS(2G)にストレージ以外を同居させています。

デプロイ

サーバ構築にはChefを、アプリケーションのデプロイにはcapistranoを使用しています。この辺も初めて使用する技術で最初は全然慣れず構築がすごく大変でしたが、はじめに導入しておくとその後のミドルウェアの導入やデプロイが断然楽にできます。

デザイン

自分は仕事ではどちらかと言うとサーバ側の人間なので、正直一番苦労したところでした。

デザイン界のしまむらで有名なBootstrapで大まかに作って、Bootswatchで何回か着せ替えて気に入るものを探しました。現在はSlateで落ち着いていますが、気が変わったらまた差し替えるかと思います。

背景を差し替えるとクオリティが2割増しに見えるとずるいデザインで言っていたので、そこだけSubtlepatternsから拾ってきました。

あとはturbolinksとnprogress-railsを組み合わせるとプログレスバーがいい感じに演出できます。

アイコンやロゴはまだないのでそのうち作りたいです。

広告

今回、turbolinksを導入した上での一番の壁が広告周りでした。ざっと理由をまとめると以下のとおりです。

プロバイダ 不採用になった理由
Google Adsense お酒を扱うので規約が厳しい
忍者AdMax turbolinksで遷移後に表示されなくなる
nend turbolinksで遷移後に表示されなくなる
Fluct 審査に落とされたので不明

Google Adsenseはクリック広告の中で還元率が圧倒的に良いそうなのですが、お酒をコンテンツとして扱うと規約に違反するようなので導入できませんでした。*2

次に検討したのが忍者AdMax、nendは同じくクリック広告なので導入してみました。 が、turbolinksを使ってページを遷移した場合に広告が表示されなくなるという現象が発生しました。

調査したところ広告のスクリプト内でdocument.writeを呼び出しており、この部分でFailed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.というエラーが発せられていました。

結局この問題は解決できず、導入を断念することにしました。

ちなみにGoogle AdsenseTurbolinks Compatibilityに投稿があるので、この通りやれば導入できるかもしれません。

Amazon アソシエイト

クリック広告は儚くも全滅したので、Amazonアソシエイトを検討しました。嬉しい事にこちらはすんなりと導入できました。

バナーとは別に、amazon-ecsを使って、投稿されたタグからAmazonの商品を検索し、リンクを生成するということも行っています。このリンクの生成は写真の投稿のタイミングとは別にしたかったので、resqueを使用してバックグランドで行っています。

結局turbolinksはどうなのよ?

パフォーマンスを考えると確かに早くなった感覚はあるのですが、その分フロントサイドの開発で気を使い、turbolinksのために時間を費やす部分が多くなりました。 今回は実験目的だったため意地でturbolinksを使い続けましたが、今後もし壁に当たることがあれば潔く切り捨てて部分的なAjaxなどでパフォーマンスをカバーする方針も検討していきたいと思っています。

今後について

これからもRails周りで面白い技術を見つけたらどんどん導入していくつもりですが、まずは次のことを目標とするかな、と思っています。

iPhoneアプリは仕事でObjective-Cを使って何度か開発したことがありますが、Swiftは本格的に使ったことがないのでちょうどいいかなと。そのためにはAPI化を急がないといけないですね。 Androidは...気が向いたらGroovyとかで書くかなぁ。。。

良かったら遊んでみてください!

*1:後々これが辛いことになったりします

*2:ワインやシャンパンならOKというルールもあるらしいです