NOT SO BAD

Towards a not so bad world.

[notsobad-jp-blog]

Railsまわりの小ネタ集

Rail関連の小ネタ集です。

目次

Validation時に変更前の値を取得

Bootstrapのtooltipを改行する

associationのorderはassociation宣言で一緒にしとく

初期ユーザーのPWD作成メモ

secret_key_baseを作成

ローカルのDBデータをdumpしてHeorkuにリストア

Validation時に変更前の値を取得

validationかけるときに、変更前の値を使いたい時があるのです。

TECHSCORE 「Railsで変更前の値、型変換前の値、などなど」

便利。

Bootstrapのtooltipを改行する

tooltipは便利なんですが、改行のしかたがわからんくて困った。

# index.html.haml %button#hoge.btn.btn-default(type="button" data-toggle="tooltip" title="tooltip<br>message") # scripts.js.coffee $("#hoge").tooltip({html:true})

こんな感じでtitleに タグをいれといて、初期化するときにhtml:trueにしてあげればオッケーでした。

stackoverflow「How to make Twitter bootstrap tooltips have multiple lines?」

もしくは要素の属性に入れといてもいいみたい。

stackoverflow「Add line break to tooltip in Bootstrap 3」

associationのorderはassociation宣言で一緒にしとく

default scopeで設定してたけど、has_many, throughのときにorderに使うcolumnがないって言われちゃったので修正。

associationを宣言するときにオプションで設定できたんですね。

has_many :games, order: 'id ASC'

みたいな感じでオッケー。 と思ったらrspecでdeprecation warningがでてた。

stackoverflow「Deprecated warning for Rails 4 model with order」

Rails4からはこんな書き方が正しいみたいです。

has_many :games, -> { order(id: :asc) }

初期ユーザーのPWD作成メモ

ema25の日記「Railsのユーザ認証deviseを用いた簡単かつ突っ込んだ実装」

deviseをデフォルトで使ってるなら、暗号化はbcryptを使ってるはず。

rails consoleを起動して、

p BCrypt::Password.create("hogehoge") #=> "$2a$10$.PFE0gdf0G1v0aJwlIuAZeis6pFFNLNvcAysva7G3xJjaXnKtrInG"

これをDBのencrypted_passwordにつっこめばオッケー。

secret_key_baseを作成

Rails4になってconfig/secrets.ymlとかにsecret_keyをまとめたりしてますが、　　 本番は環境変数で設定するとして、developmentとtestにランダムなのを入れたい時のメモ。

Qiita「secret_key_baseあたりのメモ」

$ irb irb(main):001:0> require 'securerandom' => true irb(main):002:0> SecureRandom.hex(64) => "xxxxxxxxxxxxx"

という感じで64桁のランダムな文字列を取得できる。 これをコピペしてsecrets.ymlに追加すればオッケー。

便利コマンド疑惑

と思ったけど、もしかして

rake secret

コマンドでできたりするのか…？

RailsGuides「A Guide for Upgrading Ruby on Rails」

こんど試してみよう。

ローカルのDBデータをdumpしてHeorkuにリストア

よくあるこのシチュエーション。

kaosfield blog「ローカルで dump した PostgreSQL のバックアップを Heroku に restore するAdd Star 」

pg_dump onsen_development -F c -f onsen_db mv onsen_db ~/Dropbox/Public/onsen_db

DropboxのPublicLinkを取得。

heroku pgbackups:restore HEROKU_POSTGRESQL [DROPBOX_URL]

これでオッケー。

ちょいちょい使うけど毎回ぐぐるの大変なのでまとめといただけ。

おしまい。

[notsobad-jp-blog]

Resqueでいい感じの非同期処理を実装して、Herokuでもいい感じに動くようにしてみた話。

(photo credit: d_oracle via photopin cc)

いままであんまりやったことなかったけど、時間のかかる処理とかを バックグラウンドでやりたいときってあるじゃないですか。

そんな非同期処理を、ResqueってGemでなかなかお手軽にやってみた話。 とはいえハマりどころも多かったし、まぁそれなりには大変っていう感じですな。。

ローカルで動かしてみる

どのgemつかうか

調べてるとresqueとかdelayed_jobとかって名前をよく聞きます。

Ruby Toolboxで比べるとresqueが優勢だったのでresqueにする。 Github製らしいっていうのもポイント高し。

The Ruby Toolbox「Background Jobs」

こうやってアクティブなGemを選ぶようにするのはいい気がする。

Redisのセッティング

ResqueはRedisっていうをバックエンドに使うらしいので、まずそれを入れる。 memcachedに近い感じなんですかね。

こちらのブログ記事を参考にさせてもらいます。

kentana20 技忘録「OS XでRedisをインストールしてRuby on Railsで使う（gem 'redis'）」

インストール

Brewfileに追加して、

#Brewfile ... install redis

brew bundle実行。

$ brew bundle path/to/Brewfile

入りました。

configの修正

redis.confのパスが/usr/local/varになってるからredis用のパスに変えろ、って書いてあったけど じぶんの環境では最初から

dir /usr/local/var/db/redis/

ってなってたのでこのままでよさそう。 いったん放置。

Redis起動

ちゃんとできたか確認。

$ redis-server

ってやって、なんか重箱みたいなAAが出てきたら成功。

Resque使うときはこれを後ろで動かしとかなあかんわけですね。

Resque導入

お次はいよいよResqueを導入。

kakakakakku blog「Resqueを使ってRailsで非同期処理を実現する」

こちらのブログが大変参考になりました。

Gemインストール

まずはGemfileにresqueを追加。これでredisも一緒に入れてくれるはず。

#Gemfile ... gem 'resque'

でbundle install。

rakeタスク作成

次はResque用のrakeタスクを作りますとな。

$ bundle exec rails g task resque

で、resque.rakeファイルで読み込み。

# lib/tasks/resque.rake require 'resque/tasks'

このへんはいまいち理解しきれず。。

ルーティングを修正

rails_root/resqueでresqueの管理画面が見れる。 なのでいい感じにルーティングを修正しておく。

# config/routes.rb require 'resque/server' Rails.application.routes.draw do ... mount Resque::Server.new, at: "/resque" end

Controllerからjobの呼び出し

で実際にControllerから非同期で処理したいjobの呼び出しを行う。

# hoge_controller ... def call_job Resque.enqueue(SampleJob, "hoge") render :text => "jobよびましたよ！" end

処理の実行内容を作成

呼び出した処理で実行したい内容をつくる。

$ mkdir ./app/jobs

このへんはjobsやったりworkersやったり人によって違うけど、 何となくjobsが多かったのでこっちにしただけ。多分どっちでも大丈夫。

# app/jobs/sample_job.rb class SampleJob @queue = :default def self.perform(text) p text end end

performの中に実際にやる処理の内容を書く感じですな。 @queueのところはqueueの名前なのでお好きにどうぞ。

引数持たせて使ったりもできるけど、 このなかで環境変数にアクセスしたりするのは無理っぽい。

はまりましたよ。。

Railsで非同期処理を動かしてみる

queue追加

というわけでさっそくControllerで用意したアクションを踏む。 でおもむろに localhost:5000/resqueとかにアクセスして、resqueの管理画面を確認。

ちゃんと動いてればここに処理待ちのqueueが追加されてるはず。 名前はさっき@queueで設定したやつですな。

ワーカー起動

このまま待ってても処理がはじまるわけじゃないので、これを実際に処理してくれる ワーカープロセスを起動する（この辺の概念の理解にてまどった）。

$ QUEUE=* bundle exec rake resque:work

こんな感じ。environmentオプションを付けてたりするのも見たけどいまいち理解できず。

QUEUE=xxxで実行するqueueを特定もできるけど、 いろいろ全部やりたいときは*にしとくのが吉。

これで改めてresque管理画面見て、処理中に移動してればオッケー。 サンプルは一瞬で終わるので処理中にいるのを見ることすらできずに処理済みになって消えてるかもしれんけど。

これHerokuでもやりたい

Queuing with Heroku

ここまでやったらもちろんこれHerokuでもできるようにしたい。

というわけでさっそくやってみる。

Heroku DevCenter「Queuing in Ruby with Redis and Resque」

アドオン追加

とりあえず無料のrediscloudってアドオンを追加。redis-to-goっていうのもあるみたいやけど、まぁお好みで。

$ heroku addons:add rediscloud

Resqueプロセスを起動

HerokuではWebプロセス１つ以上のは有料になります。 Resqueプロセス１つ追加で月3500円くらいか。初のプロセス課金。

$ heroku scale web=1 resque=1

Herokuの管理画面からでも追加可能。値段とか確認できるからそっちのが安心する。。

heroku open

あれ、ドキュメント見てるとこれでもうアプリにアクセスしてる。

$ heroku open

すごいなーこれだけで動くのかーと思ったけど、動かず。 Redisの接続情報とかがうまく読み込まれてなかったりとかで、なんかハマる。

やりなおし

困ってたら同じようなこと言ってる人がいたので、彼が解決したっていう方法に従うことにしました。 そしたら無事解決。ありがとうLizさん！

LIZ ABINANTE「Deploying Rails 4.1 apps with Resque to Heroku」

基本的にこのブログに書かれてるとおりにやれば問題なく起動しました！

動作確認

あらためてアプリにアクセスしてjobを追加させてみる。 resque管理画面で確認するとちゃんと処理が追加されてて、しばらくすると実行中になりました！ すばらしい！

ちょっとだけ修正内容

Redisの接続情報が本番用だけになってたので、ローカルでの設定も追加。

# config/initializers/redis.rb if ENV["REDISCLOUD_URL"] $redis = Resque.redis = Redis.new(:url => ENV["REDISCLOUD_URL"]) else $redis = Resque.redis = Redis.new(host: "localhost", port: "6379") end

こんな感じ。これでローカルでも動きました。

いろいろハマって大変やったけど、非同期処理できるようになると夢が広がっていいですね。 次はschedulerとかと組み合わせてcronみたいな処理もできるようになりたいなー。

おしまい。

[notsobad-jp-blog]

[Webサービス開発日記] 6/9~6/15

(photo credit: Hamed Saber via photopin cc)

個人で開発している「THE TOURNAMENT」の運営日記です。 今週も週報風にやったこととかをまとめてみます。

やったこと

開発

Gemの大量アップデートとエラー対応 rails、rspec-rails、twitter-bootstrap-railsあたりのコアなgemを軒並みアップデートして、 いろいろハマりまくって丸1日死にそうになってました。。

メール送信システム SendGridを導入してメールを送信できるようにしました。まだ使ってないけど。。

権限管理 こちらはcancancanを使って権限管理を導入。

viewのリファクタリング

その他

W杯特集ページ公開（バナー制作）

新サービス「トーナメント・スキャン」公開

料金プランの作成（まだフリーしかないけど。。）

成果

色々やったけどKPIは伸びなかった1週間。 一番だめなパターンですね。がんばります。。

やること

開発

エラー通知（errbit）

予選制度設計

その他

スポンサー制度の導入・利用依頼

サービス紹介動画の作成

ユーザー数が伸び悩んでるので今のうちに後ろのシステムを整備。 しつつ次の施策を考えないと…という感じです。がんばる。

[notsobad-jp-blog]

[Webサービス開発日記] 6/2〜6/8

(photo credit: Johan Larsson via photopin cc)

個人で開発してる「THE TOURNAMENT」の運営日記です。 今週も週報風にやったこととかまとめてみます。

やったこと

開発

トーナメント表の画像ダウンロード機能（Railsで画面の一部をキャプチャして画像としてダウンロードできる機能をつけてみた。）

一部のページのURLをPrettyな感じに変更（RailsでURLに文字列を含めて日本語もオッケーでSEO的にもいい感じにする方法を考えてみた。）

スマホ版のview最適化

マイページ追加

今週は開発よりユーザー獲得をがんばるとか言ってたのに、 楽しくなってまた開発ばっかりしてしまった。。

大変やからもうちょっと後回しになるかなと思ってた機能が さくっとできたときの達成感ったらないですね(現実逃避)。

障害対応

routingいじったとき影響でユーザー登録&ログイン画面でエラーが出てしまってた。。 ２日ほど気づけず新規登録もない状態になってた。これはまずい。

テストは全然網羅的じゃないからすり抜けちゃうのはしょうがない前提で、 今後すぐ気づけるようにエラー通知があるといいのかなー。。 あと一度失敗したのはテストに追加していくっていうのも大事。

さらに言うとユーザー登録状況とかのコアなKPIはちゃんとモニタリングできてれば こんなことにはならんのですよね。。ダッシュボードそろそろ用意するか。。

その他

海外向けプレスリリース投稿

Bufferつかってfacebook/twitterでの情報更新開始

サッカーW杯関連コンテンツ作成

キャンペーンページ準備

海外向けリリースはこんな感じ。

PR.com PRLOG

残念ながら今のところそんなに効果はないですが。。

やること

開発

ユーザーの権限管理

メール配信

エラー通知

その他

キャンペーン開始＆告知

サッカーW杯関連コンテンツ作成

今週もがんばりますよー

[notsobad-jp-blog]

RailsでURLに文字列を含めて日本語もオッケーでSEO的にもいい感じにする方法を考えてみた。

(photo credit: maclauren70 via photopin cc)

SEO的にはURLにキーワードを含めるのはいいことだと言うじゃないですか。

ドルフィン・シーエムエス「URLに含めるキーワードの最適なSEOとは」

ブログでも記事のタイトルをURLに入れてくれるし、 これを絶賛運営中の「THE TOURNAMENT」でもやりたい。

もちろん日本語でもオッケーな感じで。

というわけでいろいろやってみた結果のメモです。 近年まれに見る長期戦になってつかれた。。

基本方針

というわけで調べてみたけど、どうやらやり方もいくつかあったりするみたいなので 自分の状況とあわせてどんな感じにするか考えてみた。

どんなURLにするか

今回やりたいのは、tournamentモデルのshow画面で、リソースの名前をURLに入れること。

やり方として考えられるのは、

#リソース名がhogehogeの場合 http://the-tournament.jp/tournaments/58 #=>デフォルト(ID) (1) http://the-tournament.jp/tournaments/58-hogehoge #=>リソース名とIDを連結して使用 (2) http://the-tournament.jp/tournaments/hogehoge #=>IDをリソース名で置き換え (3) http://the-tournament.jp/tournaments/58/hogehoge #=>IDの下の階層でリソース名を表示

とりあえずこんなとこですかね。

(1)リソース名とID連結パターン

これは最初選択肢になかったけど、調べてると一番お手軽に実装できる方法としてけっこう人気みたい。

inBoundio「SEO for Ruby on Rails (Complete Guide)」

なんとmodelのメソッドをちょっとoverrideするだけで実装が完了してしまいます。

# models/tournament.rb class Tournament < ActiveRecord::Base def to_param "#{id}-#{title}".parameterize end end

これだけ。すでに設置してるlink_toとかのリンクも勝手に置き換わって、 かつこの連結したIDでアクセスするとRailsが勝手に読み取って今まで通りのtournament#showを表示してくれます。

簡単で副作用がないのがいいですね。 IDをつけるから名前を一意にする必要がないのも便利です。

(2)IDをリソース名で置き換えパターン

次はちょっとがんばるときの王道。リソース名を完全にIDの代わりに使っちゃいます。 friendly_idって専用のgemを使うのがいいらしい。

TreeHouseBlog「Creating Vanity URLs in Rails」

リソース名を単体でキーに使ってるので、このパターンやと 名前の重複とか名前が変わった時とかの対応をどうするか問題が発生します。

このgemを使うとそのへんをうまいこと処理してくれるっぽい。 (変更の履歴をとっといてリダイレクトしてくれたりとか)

(3)IDの下の階層でリソース名を表示パターン

調べててもほとんど情報がなかったけど、元々やりたかったのはこれです。 tumblrとかstackoverflowの記事リンクでもこれになってる。

#stackoverflow：記事IDのあとにタイトル http://stackoverflow.com/questions/9169101/friendly-id-generate-slug-with-id/ #tumblr：同じく記事IDのあとにタイトル http://blog.notsobad.jp/post/87809261001/rails

大手も使ってる方法やのになんで全然情報がないんやろう。調べ方が悪かっただけかな。。

しかし日本語の扱いがネックでして

というわけで3つくらい方法が見つかったけど、日本語の扱いが大きなネックになって 結局当初の想定どおり「IDの下の階層でリソース名を表示」パターンでやることにしました。

「リソース名とID連結」パターンは初めて知って簡単でよかったんやけど、日本語がうまく扱えずしょんぼり。 （だれか解決法知ってたら教えてください）

「IDをリソース名で置き換え」パターンも同じく日本語が空文字になったり大変そうで、 かつgemを使いこなして一意制御とかやり切るのも面倒そうなのでパス。

「IDの下の階層でリソース名を表示」パターンは、結局IDで一意判別しててるので リソース名はあくまでおまけのオプション。 なので日本語の扱いとかも雑でいい気がしてて、いいんじゃないかなと。

あとnestするのにあんまり長いURLもいやでして

あと選択基準はもう１個あって、nested_resourceしたときにURLが長くなって気持ち悪い問題です。

tournamentリソースはplayersとgamesというリソースをnestしてて、

http://the-tournament.jp/tournaments/58/players/ http://the-tournament.jp/tournaments/58/games/

というパスが用意されてます。

ここで断念した２つの方法やと、このID部分が長いのに置き換わるので URLがちょっと長すぎて気持ち悪いかなーとか(主観)。

長すぎるというか、nestしてるいろんなリソースにアクセスするときに いちいちリソース名つけてまわらんでも…って感覚が近いですかね。

今回採用した方式やと逆にnestと階層かぶっちゃうからそっちまで変えるの大変やし、 あくまでtournament#showのときだけprettyなURL、nestしたリソースとかにアクセスする際は もともとのIDだけ使う方式でいってみようかと。

最終的にこんな感じにしてみようと思います

というわけで、最終的にこんな感じのroutingにするのがゴールです(長かった…)。

リソース名が「ほげほげ」やとすると、

#「正」となるURLとリダイレクト設定 http://the-tournament.jp/tournaments/58/ほげほげ #=> これが「正」。tournament#show http://the-tournament.jp/tournaments/58 #=> 上記URLにリダイレクト http://the-tournament.jp/tournaments/58/ちがう名前 #=> 上記URLにリダイレクト # nestされたリソースとか http://the-tournament.jp/tournaments/58/players #=> players#index http://the-tournament.jp/tournaments/58/games #=> games#index http://the-tournament.jp/tournaments/58/new #=> tournament#new http://the-tournament.jp/tournaments/58/edit #=> tournamnet#edit

ふう。

最後のほうに載せてるように、nestリソースとかデフォルトのactionとかとの 判別をどうするか問題が出てきますね。

実装

それではいよいよ実装していきますか。 しかし方針さえ決まってれば実装はそんなに難しくなかったりします。

routingをいじる

まずはroutingの設定。これが今回の肝ですな。

akkunchoi.github.com「Rails3 routes.rb まとめ」 久しぶりにroutingいじったので設定の方法をいろいろ参考にさせてもらいました。

# config/routes.rb resources :tournaments do resources :players resources :games end match 'tournaments/:id/(:title)', to: 'tournaments#show', via: :get, as: :pretty_tournament

これだけ。上のほうはもともと設定してるやつなので、追加は実質最後の１行だけです。

まず

'tournaments/:id/(:title)'

の部分は、idのあとに何か入ってたらparams[:title]で受け取るって感じ。 かつ()で囲ってるので、別に指定なくてもいいんですけどねという謙虚な気持ちを表現しています。 (もちろん実際そうなる仕様です)

で to: で今までどおり#showのページを表示するようにさせて、 as: でこのパスに名前をつけときました。ここは趣味です。なくても大丈夫。

設定はこれだけなんやけど注意するのはこの１行を記述する場所で、 必ずresources: tournamentsより後に書くようにします。

routingは上から優先して適用されるので、

http://the-tournament.jp/tournaments/58/players

とかのURLでアクセスが来た際、上のresources内でこのアドレスがキャッチされて 今までどおりのページに処理が渡ります。

逆にしちゃうと、playersとかにアクセスしてもそれがリソース名として処理されちゃうので tournamnets#showページに行ってしまいます。。

nestリソースだけじゃなくてnew, editとかのリンクもこれで問題なく処理されます。

この時点で手動でURL叩いてみて、ちゃんと 名前付きのURLが機能してるのを確認しておきましょう。

予約語を設定しとく

しかしこのままだとtournamentの名前に 「players」とかつけたらどうなるんだ問題が出てきます。

まぁどうなるかというと「players」大会のtournament#showに行こうとしても players#index（プレイヤー一覧画面）に行ってしまって困る、という感じですね。

これを防ぐにはそもそもそんな名前で大会を登録させないようにするしかないんじゃないかと。 登録されるとつらい名前問題です。

Qiita「登録されるとつらいユーザー名リスト」

一旦ここまで網羅的にやらんでも大丈夫かなということで、最低限の制御だけ追加してみました。

validates :title, exclusion: {in: %w(index new edit players games)}

これでこんな名前で登録しようとすると、「予約されてます」ってエラーメッセージが出るように。

いいですねいいですね。

viewでリンクを修正する

routingが設定できたら次は実際にリンクを表示してるところのパスを修正していきます。 まぁこのあと旧URLからのリダイレクトを設定するんですが、最初からちゃんと飛ばすほうがいいですよね。

さっきroutingでas: pretty_tournamentって名づけておいたので、

# 旧URL - link_to tournament_path(@tournament) # 新URL - link_to pretty_tournament_path(@tournament, @tournaemnt.title)

こんな感じでちゃんとリンクが作成されるはず。渡す引数が１個増えてるので注意です。

prettyなURLにリダイレクト

長かったけどそろそろ仕上げ。最後に旧URLにアクセスが合った場合、もしくは リソース名に変な値が入ってた場合に正しいprettyなURLにリダイレクトするようにします。

config/routes.rbで定義できたらいいんやけど、残念ながらその時点では なんていう名前をURLに含めるかが判断できないので、controllerに処理を追加します。

# controllers/tournamens_controller.rb def show redirect_to pretty_tournament_path(@tournament, @tournament.title), status: 301 unless params[:title][email protected] ... end

URLでidのあとにつけてる名前がparams[:title]として取得できるので、 それを正しいリソース名と比較して違うときだけリダイレクト発動。

statusオプションをつけてちゃんと301でリダイレクト。

エンコードとかの関係で日本語の比較がうまくいかんかったら無限ループしそうなので エラーが続くようならparams[:title]が空かどうかだけの判定にしてもいいかもしれない。。

というわけでいろいろがんばってみたけど、日本語の扱いとかリダイレクトの設定とか ほんとにこんな感じでいいのか色々不安です。

おかしいところとかあればご指摘くださいませませ。

[notsobad-jp-blog]

Railsで画面の一部をキャプチャして画像としてダウンロードできる機能をつけてみた。

(photo credit: Stuck in Customs via photopin cc)

絶賛運営中の「THE TOURNAMENT」ではトーナメント表をjsで出力してて、 これはこれでインタラクティブな感じにできたりといいんですが、やはり画像で保存したいというニーズも根強い。

そこで画面のこの部分だけを画像としてダウンロードできる機能をつけてみた。 よくある機能な気がしてたし余裕かと思ったけど意外とめんどくさかったです。。

基本方針

まずは今回の要件を完璧に満たしてくれる都合のいいgemでもないかなーと探してみたけど、たぶんない。 （もしあったら教えてください）

ただ部分部分をやってくれそうなパーツは見つけたので、それを組み合わせて今回の機能を実現します。

具体的には、

html2canvas.jsでDOM要素を指定してcanvasに変換

HTML5のtoDataURLでcanvasをDataURLに変換

HTML5のdownload属性にDataURLを指定してダウンロードボタンを有効化

という感じでやりました。 ちょっとめんどくさいけど順番に見ていきますか。

html2canvas.jsでDOM要素を指定してcanvasに変換

DOM要素をいきなり画像にしてくれるのはなかったので、canvasに変換してくれるのでがまん。 でも簡単につかえてかなり便利。

html2canvas

まずは公式サイトからjsファイルをダウンロードして、railsのassets/javascriptsに配置。 application.jsから読み込んでおきます。これでとりあえず準備オッケー。

対象の要素をcanvasに変換するのは、

html2canvas($(".hoge"), { onrendered: (canvas) -> # xxxxx })

という感じ。$('.hoge')のとこはキャプチャしたい要素のに置き換えてくださいませ。 xxxxxのところがcanvasに変換したあとの処理になるので次にここを見てみます。

どうでもいいけど大体ドキュメントは素のjsやから、coffee scriptでどう書くのかいつも悩む。。

toDataURLでcanvasからDataURLに変換

お次はこのcanvasをDataURLに変換します。

プログラミングで飯を食え。腕をあげたきゃ備忘録！「そもそもDataURLとは！？～canvasを画像に変換する方法（toDataURL()）！①」

そもそもDataURLって何やっけってところから復習しつつ変換。

さっきの処理に追加して、

html2canvas($(".hoge"), { onrendered: (canvas) -> canvasImage = canvas.toDataURL("image/jpeg") })

これだけ。 拡張子は"image/jpeg"と"image/png"が選べるみたいですな。

HTML5.jp「toDataURL()メソッド」

さぁ最後はこのデータをダウンロードできるようにするだけです。

HTML5のdownload属性つかってダウンロードリンクをつくる

そういうえばダウンロードリンクって作ったことがなくて、どうやるんかなーと調べたら 単純にリンク先がブラウザで解釈できん形式やとダウンロードするって感じなんですな。

そしてこれやと画像の場合ブラウザが解釈できちゃうので画面左上に画像だけ表示される、 みたいなよくあるかっこわるい感じになってしまう。別にいいんですけどね。

もうちょっと調べてみたらHTML5でdownload属性ってのができて、簡単にダウンロードリンクを実現できるみたいでした。

WORKABROAD「HTML5を使ってファイルを表示させずにダウンロードさせる方法」

いいですね。

というわけで、

# views %a.hoge(href="#" download="hogehgoe") ダウンロードリンクだよ

という感じの空リンクを用意しといて、DataURLが用意できたらhrefにセットします。

# javascripts html2canvas($(".hoge"), { onrendered: (canvas) -> canvasImage = canvas.toDataURL("image/jpeg") $(".hoge").attr('href', canvasImage) })

これでリンククリックすると変換された画像がダウンロードされました！

しかし、せっかくdownload属性でファイル名指定してるのに全然効かず、download.jpegになってしまう。 hrefにDataURL指定せんかったらちゃんと反映されるから、これが悪さしてんのか。。

しばらくがんばったけどまだ情報も少なくて解決せず。 うーんちょっと気持ち悪いけどしょうがない。。

Bootstrapでちょっといい感じに

最後にBootstrapのデフォルトComponentをつかってダウンロードリンクの表示をいい感じにしてみます。

やりたいことは、ダウンロードの準備ができるまではリンクボタンをLoading..表示にして、 準備ができたらクリック可能状態にするという感じ。至れり尽くせりですな。

ソースはこんなので。

# views %a.hoge.btn.btn-sm.btn-default(href="#" download="hogehoge" data-loading-text="画像ダウンロードの準備をしています...") 画像ダウンロード # javascripts $(".hoge").button('loading') #=> loading状態にしとく html2canvas($(".hoge"), { onrendered: (canvas) -> canvasImage = canvas.toDataURL("image/jpeg") $(".hoge").attr('href', canvasImage) $(".hoge").button('reset') #=> 完了したらクリック可能状態に戻す })

なかなかいい感じに仕上がった気がします。

実物を見たい方はこちらをどうぞ。トーナメント表の下にダウンロードボタンがあります。 (PC版でしか表示されません)

THE TOURNAMENT「FIFAワールドカップ 1990 イタリア大会」

おしまい。

[notsobad-jp-blog]

TravisからHerokuへのデプロイがこけまして。

(photo credit: Aristocrats-hat via photopin cc)

Travisからのデプロイがこけて、こんなエラーが出てて困った話。

deploy failed, anvil build error: exited 22

解決したけど途中でいろいろ勉強になったのでメモ。

調べてたら同じこと言ってる人がいた。まったく同じ状況です。。

continuous learning in software engineering「Travis CI build failed when deploying to Heroku」

しかし誰も回答していないじゃないか。。

他のやり方ためしてみるが

別の修正してからGithubにPush。Travisが動き始めるもまたエラー。

とりあえず手動でデプロイしてみようと

git push heroku master

とやるも失敗。

keys:addとかやっても変わらず。。 なんかTravisっていうよりherokuが調子悪いのかなと思い始める。

さらに調べてみたら

しょうがないのでもうちょい調べてみたら今度は回答載ってた！と思ったら質問者同じ人やった！よかったね。

scala-vienna/scala-vienna-web「Deploy at Heroku is failing」

Herokuのdynoをリスタートしたらうまくいきましたとな。

そんなんやったことないから調べたけど、まぁふつうにできるんですね。

heroku dev center「Dynos and the Dyno Manager」

ふつうに

heroku restart

って感じです。すぐにrestartが終わりました。

結果は

で再度手動でherokuにpushしてみると、無事にデプロイできました！やった。 その後は今までどおりGithub→Travisでデプロイできるようになってます。よかったよかった。

あとTravisでビルド失敗したときにビルドだけやり直すのがわからんくてなんかコミットして もっかいGithubに上げて…とかやってたけど、Travisから再ビルドってできたんですね。ありがたや。。

おしまい。

[notsobad-jp-blog]

[Webサービス開発日記] 5/26〜6/1

(photo credit: Mike Rohde via photopin cc)

個人で開発してる「THE TOURNAMENT」の運営日記です。 週報風にやったこととやることをまとめてみます。

やったこと

開発

スコアなし形式の大会に対応

英語版リリース（Rails4でi18nの多言語対応やったときのハマりどころとかまとめ。）

SEO対策でメタタグの設定とか（Rails4でメタタグの設定をまじめにやってみた。）

ユーザビリティ改善（ひっそりベータ版のサービス改善した話。）

こんな感じかな。久々にだいぶ時間さけた気がする。 やりたいことはいっぱいあるけど優先順位つけるのが大変です。。

その他

プレスリリース掲載

nanapiにサービスの使い方を掲載

いったんサービス開発の方に力入れてたけど、そろそろ流入増やすほうにシフトしていかねば。。

成果

広告以外の流入が増えてきた

ためしにやってた広告出稿をほぼ辞めたけど、他の流入がちょっとずつ出てきたので トータル流入数はほぼ横ばいキープ。

ReferrelとOrganic Search増えてきてるのはうれしい。

トーナメント作成直後の離脱率改善

次のアクションをアラートで表示してあげるようにしたらだいぶ改善しましたよという話。

NOT SO BAD「ひっそりベータ版のサービス改善した話。」

次やること

開発

翻訳できてないところを直す

試合結果に詳細オプションを追加

その他

英語版のプレスリリースと告知

ユーザーインタビュー

W杯用の特集コンテンツ用意

大きな新機能の開発よりも流入増とユーザーのニーズ把握が直近の課題。 海外展開はうまくいくかわからんけどちょっと楽しみです。

という感じでした。

今週もがんばりますよー。

[notsobad-jp-blog]

Rails4でi18nの多言語対応やったときのハマりどころとかまとめ。

絶賛運営中のトーナメント表作成サービス「THE TOURNAMENT(ザ・トーナメント)」。 今回はRails多言語対応のi18nをつかって英語版に切替れるようにしてみました。

i18n対応でいろいろハマったりしたところのまとめです。

まずは基本的なやり方とか

i18nの使い方については公式ドキュメントに詳しく載ってます。困ったときはちゃんと読めば書いてある。

RailsGuides「Rails Internationalization (I18n) API」

あとはいつものようにmorizyunさんのブログも参考にさせてもらいました。

酒と泪とRubyとRailsと「Railsの多言語化対応 I18nのやり方を整理してみた！【国際化/英語化】」

まずはこのあたりを読み込んでその通りにやっていけば基本的な設定はできるはず。 以下さらに詳細な設定やハマったところとかのまとめです。

shallow routingつかってるとlocaleのscope設定でハマる

まずはこれですね。そもそも他言語対応したときにURLをどうするかという問題があって、

URLは同一でsessionとかで判別して表示言語を出し分け

言語ごとにドメインをわける e.g. http://the-tournament.us(英語版) と http://the-tournament.jp(日本語版)

全URLの後ろにパラメータくっつける e.g. http://the-tournament.jp/?locale=en

URLの一部に言語識別のパラメータを持たせる e.g. http://the-tournament.jp/en/

とかって選択肢があります。

同一URLで違うコンテンツを出すのはRESTの観点からいけてないので一番上は非推奨。 残り３つを比べると、ドメインわける→いろいろ大変、後ろにパラメータ→カッコ悪い、 ということで必然的に最後のURLにパラメータ組み込む案を採用することに。

やり方は各サイトを参考にしてもらうとして、この案はroutingを少しいじる必要が出てきます。

ふつうは

scope "(:locale)", locale: /ja|en/ do resources :tournaments end

とかでできるはずなんやけど、shallow routingつかってるせいでハマりました。。

どういう状態やったかというと、

scope "(:locale)", locale: /ja|en/ do resources :tournaments, shallow: true do resources :players resources :games end end

みたいにshallow routingを使ってて、こうするとリンクに自動的にlocaleがセットされるときに

http://localhost:5000/hogehoge?locale=en

と後ろパラメータ方式にされてしまう。 しかも本来やりたかったhttp://localhost:5000/en/hogehogeでroutingエラーが起きてしまって全然だめ。

明らかにshallow: trueがあやしいなーと思ったらやっぱりそうでした。

Stackoverflow「Rails routes with scope “:locale” and shallow nested resources」

ここを参考に、

scope "(:locale)", shallow_path: "(:locale)", locale: /ja|en/ do

とshallow_pathオプションをつけると無事解決。 よかったよかった。。

多言語対応したらメタタグもちゃんと設定する

メタタグもちゃんと多言語対応しましたよ。

alternateの設定

タイトルとかキーワードとか翻訳するのはまぁ当然として、多言語対応時に必要になるのがalternateというやつ。 これは現在のページに他言語版があれば対応するURLを指定してあげるという感じです。

kpumuk/meta-tags「Multi-regional and multilingual URLs」

いったん日本語・英語の２つなので、

# _meta_tags.html.haml - if I18n.locale == :ja - set_meta_tags alternate: {en: "PATH_FOR_EN"} - else - set_meta_tags alternate: {ja: "PATH_FOR_JA"}

という感じにしたい。

現在のページURLを他言語版で取得する

しかしここで指定したい「現在のページURLの他言語版」を取得するのに手間取った。

Railsで現在のURLを取得するのは request.url とかいくつかあるけど、localeを指定する方法がわからない。 root_path(locale: 'ja')とかやとlocaleの指定はできたけど今度は現在のURLを指定する方法がわからない。

で結局ここでurl_for使う方法見つけて無事解決しましたよー。

Stackoverflow「Rails link to current page and passing parameters to it」

url_forはcontrollerとか指定しないと現在のパスを返すんですね。 なのでシンプルにこんな感じ。

url_for(locale: 'en') #=> "/ja/tournaments/30"

ただこれやとホスト名以下の相対パスだけ返すので、オプションで絶対パスを返すように指定。

url_for(locale: 'en', only_path: false) #=> "http://localhost:5000/ja/tournaments/30"

完璧です。

最終的に完成版のメタタグはこんな感じ。

- if I18n.locale == :ja - set_meta_tags alternate: {en: url_for(locale:'en', only_path: false)} - else - set_meta_tags alternate: {ja: url_for(locale:'ja', only_path: false)}

これで各ページで他言語版のURLをメタタグで指定してくれるようになりました。

辞書ファイルを階層化する

これは途中まで気づかんかったんですが、辞書ファイルを定義していくときに yamlの構造をうまくやればRailsが自動的に階層構造を読み取ってくれるんですね。これは便利。

Rails3事始め「[Rails3] 国際化 I18n のまとめ（その３：辞書ファイルの使い方）」

翻訳を一番よくつかうのはViewやと思うけど、views/tournaments/index.html.hamlで使う単語を定義するときは、

# config/locale/views/tournaments/ja.yml ja: tournaments: #=> controller index: #=> action hoge: ほげほげ

とかって感じで定義してやれば、viewファイル内で簡潔に参照できるとな。

# views/tournaments/index.html.haml ... = t('.hoge')

参照時に"."(ドット)をつけるのがポイントですね。

deviseまわりの翻訳

日本語辞書ファイルを配置

ユーザー認証にdeviseつかってますが、登録時のflashメッセージ表示とか、 いろいろデフォルトの文言が英語で用意されてるのでこれも翻訳する必要があります。

量が多いので大変ですが、Gistで日本語辞書ファイルが提供されているのでありがたく使わせていただきます。

Gist「kawamoto / devise.ja.yml」

このファイルを

config/locale/devise.ja.yml

として配置します（同じとこにdevise.en.ymlがもともとあるはず）。 これで各種文言が日本語化されました。便利！

deviseのviewファイルを翻訳

ただこのデフォルト辞書ファイルだけでは完璧じゃなくて、ログイン画面とかのviewファイルで 自分が作った部分は当然別途翻訳を用意する必要があります。

基本はふつうの画面の翻訳と同じなんですが、上記の階層化のときにdevise用の対応が必要だったのでちょっとハマる。

# config/locale/views/devise/ja.yml ja: devise: sessions: new: hoge: ほげほげ

こんな感じでいつものcontroller, actionの前にdevise:を入れる必要があるみたいです。

Simple formのラベル表示も翻訳する

しかしさらにまだやることは残ってて、これだけだとログインなどの画面で表示される入力項目のラベルが デフォルトの英語のままになってるはず。

Simple_formを使ってる場合、これはconfig/locale/simple_form.ja.ymlに定義することで翻訳できます。 (これも同じ所にsimple_form.en.ymlがもともとあるはず)

plataformatec/simple_form「i18n」

simple_form.en.ymlに書き方のサンプルがあるのでそれを参考に、

# config/locale/simple_form.ja.yml ja: simple_form: labels: default: password: パスワード user: new: hoge: ほげほげ

ってな感じです。

newかeditかで表現変えれたりもするのがきめ細かい。

ここまでやればdeviseまわりの表現も全部多言語対応できたんじゃないですかね。。

辞書定義のtips

あとは知らなかった細かいTipsとか。

波打際のブログさん「Ruby on RailsのI18nで使用する名前空間に関してのまとめと、ベストプラクティスの検討。」

ここを大変参考にさせていただきました。

変数を使う

翻訳定義するときに変数を使いたい時がある。 とくに日本語と英語で語順が変わるときとか。

これは辞書ファイルで

hoge: "ほげほげ%{keyword}ほげ"

って感じで変数を埋め込んで、view側で

= t('.hoge'), keyword: xxxx

って変数を渡す感じですね。

HTMLタグを使う

あとは定義した翻訳内容にHTMLタグを入れるというやつ。 あんまりよくないけど、ちょっと改行だけ入れたかったりとか…あるじゃないですか。

これは辞書側で

hoge_html: ほげ<br>ほげ

と定義名にxx_htmlをつけて、

= t('.hoge_html')

とふつうに呼び出してやればオッケー。ちゃんとHTMLタグとして出力されます。

まぁあんまり使わんにこしたことはないけど。。

というわけで意外と大変やったけどだいぶ満足いく感じで多言語対応できました。 せっかく作ったので英語でプレスリリース打ったりしてみますかな。。

[notsobad-jp-blog]

[Webサービス開発日記] Rails4でメタタグの設定をまじめにやってみた。

絶賛運営中のWebサービス「THE TOURNAMENT(ザ・トーナメント)」の開発日記。 今回はシステムのお話です。

そろそろ流入も増やしていきたいなーと思ったけど 基本的なSEO対策もできてなかったので勉強しながらmetatagの設定とかやりましたよという話。

書いてみたら基本的な内容ばっかりではずかしい。 これくらいやっとけって話ですね。。

いつもどおりmorizyunさんのブログも参考にさせてもらいつつ、だいぶカスタマイズされてるそうなので アドバイスどおりgem公式サイトの案内にしたがってまずは設定してみます。

酒と泪とRubyとRailsと「meta-tagsとsitemap_generatorで始めるRails 4.0時代のSEO対策」 Github「kpumuk/meta-tags」

Gemのインストールは前にやってたので今回はパス。 さっそく設定していきます。

Title

まずはTitleの設定から。推奨は70文字・10単語までだそうです。 日本語やと30文字とか32文字とか言われるけどどうなんでしょうね。

Web担当者Forum「記事タイトルのベストな文字数は？ 8943記事のデータから探ってみた」

設定方法

で肝心の設定ですが、要素としてはSite TitleとPage Titleの2つ＋その表示順をどうするか。 THE TOURNAMENTやと共通のlayoutファイルでこんな感じに設定して、

- set_meta_tags site: 'THE TOURNAMENT', title: '**個別ページのタイトル**', reverse: true => "個別ページのタイトル | THE TOURNAMENT"

という感じで出力されるようにしてます。

でこの個別ページのタイトルをどうしようって感じなんですが、 contents_forとか使って各ページのviewで個別に設定、個別の設定がなければデフォルトのを表示、 という感じにしてみようかと思います。

# views/layouts/application.html.haml (実際はmetatag部分はpartialに切り出してます) - if content_for?(:page_title) - set_meta_tags site: 'THE TOURNAMENT', title: yield(:page_title), reverse: true - else - set_meta_tags title: '無料トーナメント作成サービス「THE TOURNAMENT(ザ・トーナメント)」'

これでpage_titleがセットされてればそれを表示、なければ デフォルトの文言が表示されます。 かつセットされてない時はSite Titleも含めた形でまとめて出力するように切り分けてます。

あとはpage_titleを個別のviewファイルで設定してあげる。

# 各viewファイル = content_for :page_title, @tournament.title

こんな感じ。

タイトルに何を表示するか

でシステム観点じゃなくて、そもそも何をタイトルにするかって考えた時に、 THE TOURNAMENTの場合やとちゃんとトーナメントの大会名をタイトルに入れたいなーと思いました。

超絶あたりまえですが検索での表示もSNSでのシェアでもタイトルはほんとに大事なので、 ちゃんとページの内容が伝わる＆見た人の興味を惹くものにせねばと。

あとユーザー獲得にも絡んでくるけど、THE TOURNAMENTやとトーナメント表を自分で作りたい人以外に、 大会名で検索してて流れてくる人もぼちぼち出始めてます。

これも期待して有名な大会の結果登録を地道に続けてたので、これがちゃんと検索に表示されてクリックを誘うように タイトル設定はちゃんとしとくという感じです。

当たり前すぎて悲しくなってきた。。でもできてなかったんですよこれが。。

Description

いわく、

DescriptionはTitleと違ってブラウザに表示されることはありませんが、検索エンジンによっては表示されることもあります。通常2~3文程度でページの概要を説明します。

だそうです。あんまり重要じゃなさそうやしこれは全ページ同じ文章でいいかなー。

# views/layouts/application.html.haml - set_meta_tags description: "THE TOURNAMENT(ザ・トーナメント)は簡単・便利な無料のトーナメント表作成サービスです。"

Keyword

同じくどれくらい効果があるのかわからんけどKeyword。 推奨は255文字、20単語程度ですと。

Descriptionさぼったのでこれはちょっとだけやっとくか。 トーナメントの画面では大会名をキーワードに入れてみる。

# views/layouts/application.html.haml - keywords = %w[THE\ TOURNAMENT ザ・トーナメント トーナメント表 作成 無料 エクセル] - if content_for?(:keywords) - keywords << yield(:keywords) - set_meta_tags keywords: keywords

これで個別ページで設定されてればkeywordsの一覧に追加される。

# 個別view = content_for :keywords, @tournament.title

こんな感じ。

しかしcontent_forで複数のキーワードを持ってくるのは挫折。 content_forで配列みたいなん渡したりはできんのかな。。

no index

ログインページとか、Googleに(他のエンジンもやろうけど)indexしてほしくないページに設定するとな。

Google「Block access to your files」

しかし今のところ特にそんなページもないし、Googleのこのページによるとブロックの方法は他にもあって、

そもそもコンテンツをパスワードかかったディレクトリにいれる

robots.txtで指定する

no indexを指定する

という感じらしい。

今回は特に必要なさそうなのでパス。

no follow

同じくGoogleに特定のページでリンクを追わないように伝える目的。 これはあれか、サイトが巨大になってクロールに時間がかかる状態で 巡回してもらうページに優先順位つけるとかそういうやつですよねきっと。

まだ必要なさそうなのでこれもパス。

canonical url

これは同じ内容のページが複数のURLを持つ場合に、メインとなるURLを指定するというやつですね。 一覧画面のURLにクエリがついた検索結果画面とか(e.g. /tournaments/?q=hogehogeとか)がこれに該当するのかと。

この例やと一覧画面のviewにcanonicalを指定してやればオッケーなはず。

# views/layouts/application.html.haml - if content_for?(:canonical) - set_meta_tags canonical: yield(:canonical) # 個別view = content_for :canonical, tournaments_url

URLは絶対パスで指定するはずなのでtournaments_pathじゃなくてtournaments_urlで。

Author links / Publisher links

Google+のアカウントとひもづけるやつですね。 これは別にいいかなー。。

Multi-regional and multilingual URLs

多言語対応してるときに別言語のリンクを教えてあげるやつ。 これもまだ大丈夫。

はやく多言語対応せねば。。

Pagination links

ページングしてるときに前のページ次のページを指定するってやつらしいけど、 一覧画面のページングとかやとcanonical指定してるからいいんじゃないかなーって気がする。

Refresh interval and redirect URL

これはウェブブラウザを自動更新させる間隔を指定するらしい。 そんな機能あったんですな。知らんかった。。

かつ時間が来た時に指定したURLにリダイレクトさせることもできるから、 そういう使い方もできるよねーってことらしい。

今回は別にいらんけど、何かで使えそう。おもしろい。。

Open Graph

お次はOpenGraphの設定。SNSシェアとか考えたらこれも大事です。 動的に設定するのがあるなら、morizyunさんみたいにこんな書き方するのが便利。

:ruby og = { title: content_for?(:page_title) ? "#{yield(:page_title)}" : "無料トーナメント作成サービス「THE TOURNAMENT(ザ・トーナメント)」", type: 'website', url: about_url, image: 'xxxx', site_name: 'THE TOURNAMENT(ザ・トーナメント)', description: "THE TOURNAMENTは簡単・便利な無料のトーナメント表作成サービスです。", locale: 'ja_JP' } - set_meta_tags og: og

Twitter Cards

これも知らんかった。 Twitter Cardsの設定をしておくとTwitter上でいい感じに情報表示されるんですね。。

これがない場合はOpenGraphの設定見にいってくれたりするんかな？ でも設定しとくにこしたことはないので、しとく。

- set_meta_tags twitter: {card: "summary", site: "@username"}

これでオッケー。

こんな感じでメタタグ設定はいったん終了です。 全然適当にやってたので勉強になりましたよ。。

[notsobad-jp-blog]

[Webサービス開発日記] ひっそりベータ版のサービス改善した話。

ちまちま作ってたWebサービスをひっそりリリースしてそろそろ１ヶ月になろうとしています。

「THE TOURNAMENT(ザ・トーナメント) | 簡単、便利な無料のトーナメント作成サービス」

ちょっとずつ利用者も増えてきたので、それを見ながらぼちぼちサービス改善してみた結果とかのメモです。

いまどんな状態かというと

リリースして特に告知とかはしてない

じぶんで宣伝系のサイトにはいくつか登録してみた

GoogleAdwordsで試しに出稿してみてる（300円/日上限）

流入は30~40UU/day程度。ほとんどAdwordsから。

ユーザー登録までしてくれたのは20人ほど。うち自分・知り合いで5名くらい。

一般ユーザーで実際にトーナメント作成までしてくれたのは10名くらい。

ちょっとまだバグも残ってたのでその辺の修正もしつつ、ほんとにベータ版としてひっそり運用してた感じ。 でも結果的にこれで改善点しぼってから拡大していけたらいいと思うので、この進め方はこれでよかったんではなかろうか。 このあとユーザーが増やせんかったら意味ないけど。。

ユーザー登録はまだまだ少ないけど、登録してからアクティブに使ってくれる率が高いのは嬉しい誤算。 検索ワードが「トーナメント　作成」とかなのでほんとにニーズある人が来てくれてる印象です。

現状分析してみた

アクティブ率は悪くないものの、いろいろ問題もありそうなのでまずはGoogleAnalyticsでユーザーの動きを見てみた。

広告からのリンクをサービスのトップページにしてるので、ほとんどのユーザーのLPがトップページ。

そのあと登録済みのトーナメントをいくつか見て離脱、っていうパターンが多い。

2ページ目はいくつかのトーナメントにアクセスが分散してたけど、その時々で新着トップに表示されてるのをクリックしてるっぽい。

ユーザー登録で離脱してるっていうよりは、ユーザー登録ページに行ってる人がそもそもほとんどいない。

初期にユーザーが作ってくれたトーナメントは、すべて基本設定のみで終了してる （ほんとは基本設定→参加者名の登録→試合結果の登録っていうフローに進んでほしい）

全体的に、まぁそうですよねーという感じの結果。 最後のところが明確に問題が顕在化してる感じです。

何を改善するか考えてみた

で何から手つけようかなーと考えてみた。

LPどうするか

これは今のところ全部トップページがLPでいいのかなーと思ってる。 もうちょい流入増えてきたらキーワードごとにページ用意できたらよさげやけど。

具体的には「トーナメント表　エクセル　作り方」とかが結構ボリュームあるので、それ用の対策ページを作ったり。 別にエクセルを絶対使いたいわけじゃなくて、なんとなくエクセルとかで作るのかなー、それどうやるのかなーって感じの検索が多い気がするので、 もっと簡単なやり方ありますよっていうのは効果あると思うんですよね。

まぁ現状これが問題になってるって感じではないので、手つけるのはもうちょい後でもいいかなと。

ユーザー登録問題

ユーザー登録への遷移が少ないけど、これまた対策すべきかというと微妙な気もしてる。 もうちょい具体的に言うと、アクセスしたときにポップアップ(モーダル)でユーザー登録促すとか、そういうのはやらんでもいいかなって話。

作り手としてはそりゃユーザー数増えたほうがうれしいけど、トーナメントって必要がないときに試しに作るもんでもないですしね。。

何個かサンプルのトーナメント表見てよさそうやなーと思ってもらったら、次実際にトーナメントやるタイミングで ユーザー登録して使ってもらえたらいいんじゃないかなという気がしますよと。

そうすると今のユーザー遷移はそんなに問題なさそうな気もしてて、その場合 ほんとに見るべき指標は戻ってきたユーザーがちゃんと登録→作成に進んでるか、とかになるんかな。。

まだサンプルが少なすぎるのか、いまいち打ち手が決めれない感じです。。

トーナメント作成途中での離脱

トーナメント作ってみた人が全員最後までやりきらずに離脱してる問題。 これは明らかに問題なので直したいところ。 何人か作ってくれてみんな同じところで止まってるというのはさすがにこっち側の問題やと思うわけです。

で改めて作成フローを見なおしてみると、トーナメントの基本情報を登録すると いったん仮で作成されたトーナメント表が表示されるという仕様。 ここからはタブメニューが用意されてるのでメンバー登録とかに進んでほしいんやけど、どうもこれがわかりにくいのかも。

とはいえ抜本的にUI変えるのも大変やしいい案も思いつかないので、トーナメント作成後に次のアクションをガイドする案を採用してみました。 Railsならエラー表示とかにデフォルトで使ってるFlashメッセージがあるので、これを利用してみます。 トーナメント表示画面で、参加者登録・試合結果登録がまだなら「次はxxxしよう」ってメッセージを表示するように修正。

作業的には20分かからないくらいのお手軽改修でしたが、結果はかなりいい感じ。 これ以後に登録してくれたユーザーのトーナメントはすべて参加者情報の登録まで完了されてました。

こういう費用対効果の高い改修をするととても得した気分になるのでいいですね。

他にもこんなことやったり

nanapiで使い方説明ページをつくった

次にやることをガイドするのはいったん効果的に機能してるものの、並行してちゃんとした使い方説明も用意しようと思って nanapiに説明記事を投稿してサイトからリンクを貼るようにしてみた。

nanapi「無料で簡単トーナメント作成！「THE TOURNAMENT（ザ・トーナメント）」でトーナメント表を作成する方法」

過去にbook loves musicでもやったんやけど、 自前で作るよりきれいにまとまるし、なんとなくちゃんとしてる感も出る気がしててこのやり方はちょっと気に入ってます。

ただ規約にも書いてあるとおり自社製品の宣伝目的の投稿とかはNGなので、その辺はちゃんと気をつけましょうという感じで。

ちなみに投稿後にnanapiの審査が入って、実際に掲載されるのは数日後。 記事のカテゴリ分けも掲載時にnanapi側でしてくれてました。 この記事数でここまでやってるとかnanapiさんすごい。。

細かい設定を詳細オプションに切り出した

いろいろ機能追加してるとだんだんユーザーが選択できるオプションが増えてきて、なんか弊害も出てきた。

具体的には渾身の力作・ダブルエリミネーション（敗者復活戦あり）機能を気軽に選択できるようにしてたんやけど、 正しく使いこなしてるユーザーがいなかったりとか。

トーナメントの形が劇的に変わるので後から変更もできず、作ったけど何これ思ってたのと違う→離脱みたいな流れになってそう。

これはビリヤードの大会とかほんとにこの形式を知ってる人じゃないと使わないと思うので、 他のオプションとまとめて設定を隠すようにしてみた。

まだ結果はわからんけど効果あるといいなー。

というか結局だれもまともに使ってないこの機能の開発にどれだけ苦労したと。。 まぁ予想はしてたけど仕様を大幅にいじるからユーザーおらんうちに済ませときたかったんですよ。。後悔はしてないんですよ。。

というわけで

ちょこちょこ改修してみたけど、いったん登録後の流れは改善できたので 次はもう一度流入増やすところをがんばってみようかという感じです。

その辺のお話はまた次回。

大した内容ではないですが、同じようにサービス開発されてる方の何かの参考になれば幸いです。 そしてもっとこうした方ががいいよ！とかのご意見も大歓迎です。

おしまい。

[notsobad-jp-blog]

【2014年4月版】MacOSX Mavericks セットアップ手順まとめ with homebrew-cask & YADR

SSDへの換装も無事にできたので、例によってOSをクリーンインストールして 開発環境を再セットアップしたくなりました。

今回はこないだから目をつけてたBrewfile&homebrew-cask&Yadrを導入して、 環境のportabilityというか再現性を意識したセットアップをめざしてます。

OSクリーンインストールと初期設定

OSクリーンインストール

まずはOSを入れなおすところから。 こちらのブログを参考にさせてもらいました。

和洋風ドットコム改「【Mac】OS X Mavericks (マーベリックス) をクリーンインストールする方法」

もちろん先にバックアップは必須ですが、 基本的にローカルにしか存在しないファイルは作らないようにしてるので それほど気にせずクリーンインストール完了。

まっさらになったのでアプリとかどんどん入れたいところですが、 まずは最低限のセットアップを。

Xcodeインストール

なにはともあれXcode。 他のがいろいろ依存したりするので最初にいれとくと吉。

AppStoreの購入済みに入ってるはずなのでそこからインストール。

ライセンスの同意も求められるのでやっとく。

sudo xcodebuild -license

Dockの設定

このへんは全部好みですが。

不要なアプリをRemove from Dockで削除。

PositionをLeftに変更。サイズもちょっと小さく。

Turn HidingをOnにしてふだんは非表示。

トラックパッド

「システム環境設定」の「TrackPad」にて。

Point & Click

Tap to Clickを有効化

Three Finger Dragを有効化

Track Speedをちょっと速く

その他のチェック外す

More Gestures

ぜんぶチェック外す。

今回からNatural Scrollのまま使うことにしてみました。 こっちが標準になってるし、、おとなしく従います。

その他

MissionControllでDashboardを非表示に。

bluetoothつかわないのでチェックを外してメニューバーからも非表示に。

Firewallをonに。

SharingでComputer Nameをシンプルなのに変更。

TimeMachineをメニューバーから削除。

Homebrew & homebrew-caskでアプリインストール

今回からアプリのインストールを、Homebrewとhomebrew-caskで管理することにしてみました。　

deadwood 「[Mac OS X] brew bundle / cask で Homebrew も他の Mac アプリもまとめて管理・インストールする」

まだそんなにノウハウが枯れてない感じなのでいろんなところを参考にさせてもらいましたが、 こちらの記事がよくまとまっていて参考になりました。

HomeBrew & homebrew-caskについて

最近Brewfileでhomebrew管理するアプリをまとめられることを知って感動して、 さらにbrew-caskでdmg配布されてるアプリとかもhomebrewで管理できることを知って感激しました。 めっちゃ便利ですやん。

これは試すしかないなーと思ってたのでこの機会に試しました。いろいろすっきりして満足です。 homebrew-caskは使ってるアプリが対応してるか心配やったけど、じぶんが使ってたのはほぼすべて用意されてました。

参考までにhomebrew-caskでインストールしたアプリはこんな感じ。

AppCleaner

Alfred

ClamXav

Day-o

Dropbox

GoogleChrome

GoogleDrive

GoogleJapaneseInput

iTerm2

Monolingual

MplayerX

PG-Commander

TotalFinder

逆に使ってるアプリでなかったのはSimpleNoteくらい。 おとなしくEvernoteにしてればあったのに。。

Brewfile作成

このアプリ管理をするのに必要なのはBrewfile。 いまはHomebrewのデフォルト機能として提供されてるみたいです。便利。

インストール済みのアプリを呼び出したときもWarningで済むようになったみたいなので、 特にエラー制御とかせずにそのまま書いちゃったけど、、ほんまにこれでいいのかはまだちょっと不明。

アプリインストール

BrewfileはあらかじめGithubとかにあげといたのをローカルに用意して、

brew bundle

を実行。

brewfileに設定してたアプリが次々とインストールされていきます。なかなか爽快。

アプリの初期設定とか

上記コマンドだけで設定しきれないのも色々出てくるので、その後始末。

Google日本語入力

インストールしただけやとデフォルトで設定されないので、手動でなおす。

Inforati「無料で利用できる「Google日本語入力™」をMacで使用する方法」

ここのインストール後の設定を参考に、「システム環境設定 > 言語とテキスト > 入力ソース」で 「ことえり」をアウト、「AlphaNumerical(Google)」と「Hiragana(Google)」をイン。

Alfred対応

homebrew-caskで入れたアプリは普通と違うとこに入るのでAlfredが読み込んでくれない。

brew cask alfred link

コマンドを実行すれば修正してくれるみたいです。

brewfileにも書いたんやけど、タイミング的にだめなのかうまく反映されず。 一度再起動したあとに上のコマンドを実行すれば直りました。ここはもうちょいうまくやれそう。。

GoogleDrive, Dropboxの同期開始

これは時間かかるので早めにはじめとく。 あと「システム環境設定 > Users&Groups > Login Items」に追加してログイン時に立ち上がるようにしとく。

postgresqlの自動読み込み

postgresqlが自動で起動されるようにする。

cp /usr/local/Cellar/postgresql/9.1.3/homebrew.mxcl.postgresql.plist ~/Library/LaunchAgents/ launchctl load -w ~/Library/LaunchAgents/homebrew.mxcl.postgresql.plist

カレンダーをDay-oに

Day-oを立ち上げて、デフォルトの日時表示をオフに。 シンプルで好きなのです。これもLogin Itemsに入れとく。

有料アプリの設定

そんなにないけどAppStoreで有料のを買ったアプリは別途設定。

Sketchは最新版が別アプリになっちゃったので、昔のやつをAppStoreから再インストール。

TotalFinderは昔お金はらったので、無料お試し期間って表示されてるところから メールで受け取ったユーザーIDとかを入れて認証しとく。

YADRセットアップ

こないだYADRなるものを知って気になってたので、さっそくこのタイミングで導入してみることにしました。

酒と泪とRubyとRailsと「Marvericks Rails 最新環境 詳解 構築手順 [Homebrew][MySQL][rbenv][Ruby]」

Vim, iTerm, Zshは奥が深すぎて使いこなせてない感が強かったので、 強制的にモダンな環境にしてちょっとずつ覚えていこうと思います。

Github「skwp/dotfiles」

インストール

インストールはこのコマンドを実行するだけ。

sh -c "`curl -fsSL https://raw.github.com/skwp/dotfiles/master/install.sh`"

途中パスワード聞かれたりとかいろいろあるけど。

Solarized Colorスキームの設定

これだけでもなんか色々いい感じなんですが、YADRでは iTermのカラースキームをSolarizedにすることが強く主張されています。 なので設定する。

Github「altercation/solarized」

ここでSolarizedDarkのテーマファイルをダウンロードしとく。

iTermを開いて「Profiles > OpenProfile > Edit Profiles > Load Preset > Import」で さっきダウンロードしといたファイルを選択。

これで選択肢にSolarizedDarkが追加されてるはずなので、それを選択してあげる。

たしかにこれはおしゃれ。。

gitの設定追加

YADRがgitconfigとgitignoreを作っちゃうので、自分で設定したいのは別途用意する。

gitconfig

これは公式のREADMEに書いてあるとおり、gitconfig.userを用意してあげればオッケー。

Github「skwp/dotfiles」

ユーザー情報と、aliasとか設定してます。 treeはめっちゃよく使うし。。

gitignore

これはgitignore_globalってファイルを作って有効化すればよさそう。

Qiita「~/.gitignore_globalの有効化」

giboで用意してるgitignoreファイルをgitignore_globalにする。

NOT SO BAD「giboで.gitignore。」

gibo OSX Vim Ruby Rails > ~/.gitignore_global git config --global core.excludesfile ~/.gitignore_global

これでひとまずYADRの導入は完了ということで。 ちゃんと使い方おぼえねば。。

Ruby/Rails環境セットアップ

お次はRuby/Railsの環境をセットアップしていきます。

RbenvでRubyインストール

とりあえず最新の2.1.1をいれました。　

rbenv install 2.1.1 rbenv global 2.1.1 rbenv rehash

でうまくいくはずが、readlineでエラーが出てインストールができない。。

Qiita「rbenv installで失敗する問題を解消 on Arch Linux」

こちらを参考にpatchをあててインストールしたらうまくいきました。 だいぶはまった。。

Bundlerのインストール

gemは基本的にプロジェクトごとに管理する。 例外的にグローバルで管理するBundlerだけ最初にインストールしとく。

gem install bundler

Githubからリポジトリをcloneしてくる

あとはGithubの各リポジトリから必要なやつをcloneしてくる。 最初のbundle installはパスを指定して。

あとはDBのユーザー作成・初期設定とかやればオッケーなはず。

Herokuをremoteに追加

このままやとHerokuで運用してるアプリのremoteからherokuが消えてる。 なので追加する。

Qiita「Heroku にある Git リポジトリを楽に remote に設定する」

ここを参考にさせてもらいました。

heroku git:remote --app HEROKU_APP_NAME

これでオッケー。

これでひとまずセットアップ完了じゃないかと。

残課題としてはVimがMacVim Kaoriyaじゃないのでちょっと不安。

Qiita「HomebrewでMacVim-Kaoriyaのビルド 〜luaを添えて〜」

このへんを参考にトライしてみたんやけどYADRとうまく共存できず。 そのうちなんとかせねば。。

[notsobad-jp-blog]

MacBookPro Mid 2010 をSSDに換装しましたよ。

(photo credit: Tekke via photopin cc)

まだまだ現役稼働中のMacBookPro Mid2010モデル。 あと数年はがんばってもらおうとついにSSDに換装しました。

簡単で値段もけっこう安かったけど、結果はなかなか満足いく感じです。

換装前のスペック

こんな感じ。

MacBookPro 13-inch Mid 2010

Memory: 16GB (8GB x 2)

Processor: 2.4 GHz Intel Core 2 Duo

Storage: 250GB HDD

購入時点からメモリだけ16GBまで増設してます。

NOT SO BAD「MacBookPro Mid2010でメモリ16GBに増設できました。」

今回のSSD換装でひとまずハード的にはやれるだけのことはやったって感じかと。

事前準備

基本的にこの記事を参考にしてやれば問題なくできました。 めちゃわかりやすい。

ASCII.jp「MacBook Proを高速SSD「Samsung SSD 830」で爆速化」

ただ記事の時点から時間たってるので、部品とかはちょっと違うの使ったりしてます。

SSD

記事ではSamsungの830を使用してたけど、現時点での選択肢としては840evoがよさそう。

SAMSUNG SSD840EVO ベーシックキット MZ-7TE250B/IT ※新生活応援セール！

SSD840EVOベーシックキット250GB

商品スペック

容量250GBインターフェースSATA 6Gb/s厚さ6.8mmフラッシュ規格TLC最大読み込み速度540MB/s最大書き込み速度520MB/sコントローラSAMSUNG

TSUKUMO 商品詳細バッジ で 2014-04-14 に生成しました

「830」のあとに「840」と上位ラインの「840pro」に枝分かれしたみたい。 そのあとに出た「840」の後継が「840evo」ですと。

値段もこなれてて性能もproに迫る勢い、だそうなので今回はこれをセレクト。

ノートPC換装用に必要な器具がセットになったノートパソコンセットっていうのもあったけど、 取り外したHDDを外付けで使えるようにしたかったので、SSDは単品で買って 別途HDDケースとトルクスドライバーを自分で買いました。

HDDケース

Samsungのノートパソコンキットやと、HDD接続用にケーブルがついてくるだけ。 移行作業はそれでもできるけど、その後外付けで使うことを考えたら最初からHDDケースにしたほうがよさげ。

Century「シンプルBOX2.5」

でもここはそんなにお金かけるつもりもないので、シンプルなやつをセレクト。2200円くらいでした。 もっと安いやつもあったけどケーブル接触不良とかって口コミがあったのでセーフティに。。

サイズは2.5インチのやつを選べば問題ないはず。

トルクスドライバー

Appleがよく使う星形ネジに対応したドライバー。 今回はHDDを安定させるために両端につけてあるネジで必要になります。

サイズもいろいろあるみたいやけど、T6を選べばオッケー。 安くてデザインもかわいかったアネックスのやつにしました。

アネックス「ヘクスローブドライバーT型 T6×50 No.6300」

換装

で準備ができたので実際に換装。

記事にもあるとおり、まずSSDを外付けでつないで現在のディスクをそのままコピー。 おわったら内蔵のHDDと交換して起動するだけ、というお手軽作業です。 やってみたらめちゃ簡単にできました。

そして起動が、、めっちゃ速い。 MBP買ってすぐのときの感動を思い出すくらい速い。

記事では換装して起動ディスクを指定しないと遅いって書いてあったけどそんなこともなく、 一応設定確認したら自動で入れ替えたSSDが起動ディスクに設定されてるみたいでした。

しばらくしたらすごい勢いでファンが回り出したから焦ったけど、 ActivityMonitorで確認したらAlfredがインデックスしなおそうとしてがんばってたみたい。 しばらくしたら落ち着いてたので、今のところ問題なさそうです。

というわけで念願のSSD換装終了。

今回の換装にかかったお値段は全部で18,000円くらい。 メモリ増設と合わせると合計30,000円くらいこのMBPに投資したけど、 なかなか快適な環境ができて満足です。

これであと３年くらいがんばれれば。。さすがにムリか。。

[notsobad-jp-blog]

RailsのSingle Table Inheritanceをつかったら、Modelはきれいになったけど色々大変だったという話。

(photo credit: seriykotik1970 via photopin cc)

１つのmodelの処理がだんだん複雑になってきて、 微妙に振る舞いが違う２つのクラスに分けたくなりました。

そんなときにRailsのSingle Table Inheritance(STI: 単一テーブル継承)を知って、 これはドンピシャじゃないかと手を出してみた話。

modelがきれいになってよかったけど、ハマりどころも多くて疲れました。。

使い方

STIはなかなか公式っぽいドキュメントがなくて困ったけど、こちらのブログがわかりやすかったです（英語）。

thibaultdenizet.com「Single Table Inheritance with Rails 4 – #1」

ふつうに使う分には、modelにtypeカラムを追加して、そこに設定した名前で子classを作成。 親クラスを継承するようにして、親と違うメソッドとかだけ上書きしてあげればオッケーというやつです。

ふつうのクラス継承なんやけど、いつもの「設定より規約」で、typeカラムを用意するだけで 上記一連の設定をよしなにやってくれるのがやっぱりRailsすごいという感じです。

しかし使いどころは絞ったほうがよさそう

メリットと使いどころ

STIを導入したら、Modelの記述はすごく綺麗になりました。

基本は共通なんやけどちょいちょい振る舞いの違うパターンが２つあって、 同じif文をいろんなメソッドで使ってたのでSTIで別クラスに分離。

こういうパターンはSTIがしっくり来ると思いました。

デメリット

なんか色々はまりどころが多い。 自分が知らないだけかもしれないですが。。

特にRoutingまわりとか気持ち悪い感じになったりしたので、 ちょっとくらいならわざわざSTI使わず、がんばってif文書いてもいいのかなー思いました。

はまったとこ①：命名規則

これは同じこと言ってる人が見つからなかったので謎ですが、 自分はtypeカラムに保存するクラス名をCamelCaseにしないとうまくいきませんでした。

Tournamentクラスの子クラスでSingleEliminationクラスをつくったとき、 tournamentsテーブルのtypeカラムに

single_elimination

って格納したいけど、

SingleElimination

で保存しないとうまくいかなかったという話。

そういうもんなのかもしれないですが地味にはまりました。 なんか気持ち悪いのは気のせいですか。。そうですか。。

はまったとこ②：Routing

多分いちばんめんどくさいのがこれ。

すでに作成済みのmodelにSTIを導入して子クラスに分割すると、 linkとかformのroutingが子クラスの名前で設定されてエラーになったりする。

対応はこちらのブログが大変参考になりました。

TechRacho「STI(Single Table Inheritance)でハマったところ」

最初はcontroller側でまとめてbecomesでクラス変換してたけど、 その後にsubclassのメソッドが呼べなくなったりしていろいろ困る。

この問題は結局link_toとかform_forとかで、本来ならRailsが自動でパスをセットしてくれるはずのところが うまくいかないという問題なので、それを個別に直す。

まずlink_toとかは引数をちゃんと指定すれば大丈夫なはず。

修正前： link_to @hoge 修正後： link_to hoge_path(@hoge)

という感じで略さず書くようにすれば回避可能。

めんどくさいのがform_forで、これは上の方法でうまくいかないみたいなので一瞬becomesして戻すという荒業をつかってみる。

The Pug Automatic「Rails STI and form_for」

simple form つかってる場合はこんな感じ。

= simple_form_for @game.becomes(Game) do |f| - f.object = @game.becomes(@game.class)

formつくるところは親クラスに変換して、その後formで使うobjectを子クラスに戻す。 いろいろやり方はあるみたいやけどこれが一番影響範囲小さそうでいいんじゃないかなーと。 （検証しきれてないので何かこのやり方で問題ありそうなら教えてもらえたらうれしいです。。）

モデルをサブディレクトリに整理

STIつかうとmodelに子クラスがいくつかできるので、そのままにしてるとmodelが散らかって気持ち悪い。 なのでサブディレクトリつかってそこにまとめるようにしてみます。

こんな感じ。

|-models |- user.rb |- tournaments |- tournament.rb |- single_elimination.rb |- double_elimination.rb

サブディレクトリも読み込めるように、config/application.rbにautoloadを追加。

#config/application.rb ... config.autoload_paths += Dir[Rails.root.join('app', 'models', 'tournaments')]

rspecでテストするときのはなし

最後にテストの話。 STIしたmodelをテストするとき、factory girlでどうやって子クラスのオブジェクトを作るのかわからんくて困った。

stackoverflow「Testing simple STI with FactoryGirl」

ここを参考に、親のtournamentクラスと子のsingle_eliminationクラスのfactoryをつくる。

FactoryGirl.define do factory :tournament, class: 'Tournament' do ... end factory :single_elimination, parent: :tournament, class: 'SingleElimination' do type 'SingleElimination' end end

こんな感じ。

子のtype属性は別に指定せんでも機能するみたいやけど念のため。

これで晴れてSTI導入完了。

いろいろ悪口も言ったけどうまく使えば便利なのは間違いないので、 節度を守って適度に使っていきたいと思いましたよ。

おしまい。

[notsobad-jp-blog]

RailsでTurbolinksしてくれてる間にローディング画像を表示させてみる。

(photo credit: Let Ideas Compete via photopin cc)

Turbolinksはすごい機能やけど、ページロードしてるのが表示されんから ふつうのユーザーからするとリンククリックしても反応がないように見える。

なのでページがちゃんと表示されるまでのあいだ くるくるローディング画像を表示させてあげることにしました。

実際の処理速度改善ももちろん大事やけど、体感速度向上も超大事。 Turbolinksつかうならこの設定は絶対やったほうがいいなーと思いましたよ。。

Turbolinksのページロードイベント取得

Turbolinksつかってると、jQueryのreadyが発火しないのはよく聞く話。

でかわりに提供されてるイベントがあるのでそれを使って Turbolinksのページロードを検知する。

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

でここで紹介されてるpage:fetchとpage:changeがトリガーになりそうやけど、 jQueryでどう書いたらいいのかなーと悩んでるときに見つけたのがこちら。

coderwall「Faster page loads with Turbolinks」

coffee scriptならこんな感じ。

$(document).on 'page:fetch', -> // 読み込み開始 $(document).on 'page:change', -> // 読み込み終了

ローディング画像表示以外にもTurbolinks対応について説明されてるので勉強になる。。 Analyticsも設定変えんとあかんっぽいけど、jquery-turbolinksがうまいことやってくれたりしないんだろうか。。

くるくる画像はspin.jsで

ローディング画像の表示はなにでやろうかなーと思ってたら、 なんかすてきなサイトを見つけました。

spin.js

CSSでいい感じのローディングを出力してくれるjsライブラリ。 rails用にgemも用意されてたので今回はそれを使うことにしました。

Github「spinjs-rails」

いつものようにGemfileに追加して、

#Gemfile ... gem 'spinjs-rails'

bundle install。それからapplication.jsでrequire。

#application.js //= require jquery.spin

これで準備完了。 実際に使うときはさっきのイベント検知を利用して、

$(document).on 'page:fetch', -> $('body').spin() $(document).on 'page:change', -> $('body').spin(false)

こんな感じでいけるはず。 相変わらず簡単便利です。Railsすごい。

これでTurbolinkでページ遷移してる間にクルクル表示されるようになりました。

いろいろオプションもつけれるので、スクロールしてても 常に表示してる画面の中央に表示したい場合なんかは、

$(document).on 'page:fetch', -> top = $(window).height()/2 + $(window).scrollTop() $('body').spin({top: top})

とかでいけそうです（bodyにつけてる場合）。

これは何か費用対効果の高い改修な気がするから、 Turbolinksつかうときはとりあえずやっとくといいかも、ですな。。

[notsobad-jp-blog]

Rails x SimpleForm x country_selectで、国を選択したり国旗を表示してみたり。

(photo credit: slimmer_jimmer via photopin cc)

セレクトボックスで国を選択して、値は英字2文字(JPとか)で保存。 さらに選んだ国の国旗アイコンを表示、なんていう国選択まわりの処理を実装したのでまとめ。

country_selectを導入

むかしはRailsの標準機能に入ってたらしいけど、政治的な問題もあったのか 現在はgemとして切りだされてるみたいです。

Github「stefanpenner / country_select」

gemをinstallして、対象のモデルにcountryカラムを追加。 名前は変えれるけどxxx_countryとかにしとくとデフォルトでsimple formとも連携してくれるからいい感じ。

この時点でsimple formつかってるviewで、

= r.input :country

これだけで国名のselectフォームが出力されてます。 便利ーー。

Valueはalpha2がいいんです

しかし何かvalidationで引っかかると思ったら、よく見るとoptionのvalueが表示名そのままになってる。 ドキュメントではalpha2がvalueになるって書いてあるんやけど。。

==========[2014.03.26追記]=============== オプションを指定すれば問題なくvalueがalpha2になりました。 正しい対応は、

= f.input :country, iso_codes: true

です。 以下はむだに処理も遅くなるしだめな対応ですね。。

===========追記ここまで==================

しょうがないのでSimpleformのcollectionとselect_methodをつかって手動で設定することに。 表示はちゃんとした英語名、設定値はアルファベット2文字のalpha2にするっていうのがゴールです。

<option value="JAPAN">JAPAN</option> # いまこうなってる <option value="JP">JAPAN</option> # こうなってほしい

国の一覧出力とかはここのドキュメントを参考に。

Github「hexorx / countries」

= r.input :country, as: :select, collection: Country.all.map{|c| c[1]}, label_method: lambda {|country| Country[country].name}

Country.allのなかに、

['Japan', 'JP'], ['United States', 'US'], ...

みたいなのが大量に入ってるので、x[1]のalpha2をcollectionにセット。 表示名はnameに設定してます。

label_methodの使い方がなかなかわからんくて手こずった。。

Github「plataformatec / simple_form」 stackoverflow「Simple form association custom label name」

表示名のアルファベット順に並べ替え

しかし実際つかってみると、数が多いせいもあるけど 探してくる国がリストからなかなか見つからない。

何でかなーと思ったら表示順が微妙にアルファベット順になってない。 しばらくしてvalueのalpha2順にならんでることに気づいたので、 表示名順に並ぶように修正。

%td= r.input :country, label: false, as: :select, collection: Country.all.sort.map{|c| c[1]}, label_method: lambda {|country| Country[country].name}

collectionのCountry.allのあとに.sortメソッドを入れてます。

多重配列にsortメソッド使うとデフォルトで1番目の要素で並べ替えするみたいなので 今回はこれでばっちり。

いい感じにアルファベット順になりました。 まぁそれでも探すの大変なんやけど。。

国旗表示

ここまで来たら選んだ国をいい感じに国旗アイコンで表現したい。 しかし国旗画像200個以上持って出力するのもかっこ悪いな−と思ってたら やっぱりありました専用gem。探せばなんでもあるもんですなー。。

Github「djonasson / world_flags」

ものすごい数の国旗画像をsprite画像にして表示してくれるgemだそうです。

installしたらcssに読み込ませて、

%ul.f16 %li.flag.au Australia

みたいな感じで使うとみごと国旗画像が出力されました！

class指定は別にul/liタグじゃなくてもいいみたいなんで、ラベルなしで画像だけ出力したいときなんかは divにつかってwidth/heightを指定してやるといい感じになりました。

という感じで国管理もなかなかいい感じに仕上がりました。 ただ国選択のあたり手動で変なことしたせいか、かなり処理が重くなってる。。

次はまずこれを速くするところに取り組まねば。。

[notsobad-jp-blog]

Railsでいい感じのタグ管理するならacts-as-taggableとjQuery-Tags-Inputですよ。

(photo credit: foxypar4 via photopin cc)

よくあるタグ管理を実装しようとして、途中まで自力でやったんやけど すばらしいgemがあるのを見つけたのでそっちに乗り換えました。

ついでに入力の部分もjQueryプラグインがすごい簡単につかえたので、 かなり満足のいくタグ管理機能ができましたよという話。

かんたんにまとめると、

バックエンドはacts-as-taggable gemで完璧。

フロントエンドはjQuery-Tags-Inputすばらしい。

どちらも機能がよくて導入も超簡単、相性もばっちりといいことずくめです。

acs-as-taggable導入

まずはacts-as-taggableを導入。

Github「mbleigh / acts-as-taggable-on」 酒と泪とRubyとRailsと「acts-as-taggable-onでつくるタグクラウド＆効率的なタグ管理【Rails4 X Ruby2.1】」

上記リンクを参考にさせてもらって、びっくりするくらい簡単に導入完了。 いっつも思うけどほんま便利な時代になったんですなー。。

Simple Formでつかう

あっさり導入が終わっちゃったけど、これをSimpleFormで選択させるには、

= f.input :tag_list

なんとこれだけ。どんだけ簡単なんですか。

strong parameter対応で、xxx_paramsメソッドに以下を追加して、

def xxx_params params.require(xxxx).permit(...., :tag_list) end

ためしに適当にカンマ区切りで入力してみるとちゃんと登録されてます。 すげーー

タグクラウドまで！

さらにこのgemはタグクラウドまで生成してくれるとな。 これもドキュメント通りにやればすぐできたけど、 今回はサイドバーでController横断して使いたかったのでそこだけちょっと修正。

うーん便利すぎる。。

jQuery-Tags-Inputで入力もいい感じに

せっかくバックエンドがいい感じになったので、入力するところもいい感じにしてみる。

Startup Reality「スタイリッシュなタグ入力を実現するjQueryプラグイン4選Add Star」

こちらを参考にさせてもらってスタイリッシュなプラグインを選びました。

Github「jQuery-Tags-Input」

こちらです。とてもスタイリッシュ。

そして導入もすごい簡単で、インストールしてファイル読み込んだら ドキュメント通りにid指定するだけでいい感じのタグ入力フォームになりました。

すげーーー。

フィールドのサイズが固定になってるのだけ気に入らなかったので、 init時にオプション持たせて上書き。

$('#tag_list').tagsInput({'width':'100%', 'height':'auto'})

完璧です。

タグにリンクつける

せっかくなので設定したタグを表示するときに、 クリックするとそのタグがつけられたやつ一覧にとぶようなリンクを設定したい。

単純にURLにパラメータつけるやり方を知らなかったんですが、

= link_to tournaments_path(tag: tag.name)

これで

http://APP_URL/tournaments/?tag=xxxx

みたいなリンクを生成できるのか。

でcontroller側でパラメータ受け取ってタグついたやつだけ返すようにすればオッケー。

というわけでかなりお手軽に期待通りのタグ管理が導入できました。 便利すぎて感動しっぱなし。