<< List

Sinatra、Unicorn、Rmagickを使って、GIF画像作成Webアプリを作る

February 18, 2014

はじめに

以前にRailsアプリで画像をダウンロードできるアプリを仕事で作ったことがありまして、それを応用してGIF画像を作成するアプリを過去に作っていました。デプロイするサーバーとかを持っていないので、社内のサーバーに上げて公開していたたんなる内輪ウケのジョークアプリだったのですが、HerokuにはデフォルトでImageMagickが入っていることを知りまして、Herokuにデプロイしてみました。

作ったアプリについて

現バージョンはスマホでも見られます！（レスポンシブデザインに挑戦）

作成工程

作成工程は以下の流れです。

土台となるGIF画像を作成する
GIF画像に指定した文字を埋め込む
指定したカートの色を変える
WEBアプリ化する

土台となるGIF画像を作成する

まず文字が表示されていないカートGIF画像をツールを使って作りました。

cart

こちらは、Giamというソフトを使いました。

上にあるGIF画像は10コマの画像で構成されています。

例）その中の2枚の画像

cart1

cart2

この10枚の画像はキャプチャソフトとExcelを使って作りました。。カートはExcelのオブジェクトで横にずらしながら、コマ撮りアニメーションのようにキャプチャしていきます。キャプチャしていった10枚の画像をGiamで編集し、一つのGIF画像を作成していきました。

GIF画像に指定した文字を埋め込む

ImageMagickは、画像編集ソフトです。コマンドラインにて画像編集（大きさ変えたり、画像の品質を変えたり）する事が可能です。 PhotoShopやGimpで出来ることをCUIでできるイメージです。こちらのソフトはコマンドラインだけでなく、APIも用意されていまして、 RmagickというRuby製のライブラリを使うとこのAPIをRubyにて使うことができます。今回はRmagickを使いました。

以下のようなメソッドを使用して、上に書いた各10枚の画像を参照できます。

gif = Magick::ImageList.new "images/cart.gif" # <-- imagesディレクトリのcart.gifにアクセス
gif.each_with_index do |f, i|  # <-- f が画像オブジェクト、iはindex
   # ...
   # ...
end

画像オブジェクトに文字を埋め込むには、annotateメソッドを使います。

（ソース記述例）

# imgは画像オブジェクト。x, y は画像の座標（ピクセル）です。
Magick::Draw.new.annotate(img, 0, 0, x, y, letter) do 
# フォントファイルのパス、配置、大きさ等を指定
self.font = font_file_path               
self.align = Magick::CenterAlign
self.stroke = "transparent"
self.pointsize = 52
self.text_antialias = true
self.kerning = 1
end

指定したカートの色を変える

ImageMagickは、指定したピクセルの色を変えられます。Rmagickでは、Imageクラスのpixel_colorメソッドを使います。

（ソース記述例）

# カートの高さ(Y座標 118～134）あたりのピクセルの色が緑色（土台GIFのカートの色）の座標を指定された色に変えている
for y in 118...134
  for x in 0...img.columns
    src = img.pixel_color(x, y)
    r = src.red
    g = src.green
    b = src.blue
    if r == 37522 && g == 53456 && b == 20560
    img.pixel_color(x, y, "#" + color)
  end
  end
end

WEBアプリ化する

Sinatraを使っています。（Sinatraは情報が多いので省略します。私自身それほど詳しい訳ではないので。。）ルートにアクセスするとページHTMLを返し、/cartにアクセスするとGIF画像を返しています。ソース - main.rb

画像の編集は時間がかかるので、/cartのレスポンスはやや遅いです。

Heroke とGithub Pagesにデプロイしました

上に書いたRmagick、SinatraのソースはHerokuを使って公開しました。

http://hozumicart3.herokuapp.com/

Sinatra、Unicornを使ったHerokuへのデプロイは以下のサイトを参考にしました。

Sinatra + PostgreSQL + Unicorn な Web サーバーを Heroku に構築する

Github Pagesも作りたかったので、viewファイルと同じようなものをhtmlで作りました。（HerokuにUPしているviewファイルはローカル端末でも動くようにしているため、若干記述は異なります）

Github Project用のGithub Pagesは、gh-pagesというブランチを作成してhtml等をpushすれば構築できます。以下のサイトを参考にしました。

GitHub Pagesホスティングサービス（ほぼ）完全活用ガイド

ボタンを押したり、色指定プルダウンが変わったタイミングで、imgタグのsrc属性を変えて画像を取得しています。画像がロードされるまでにちょっと時間がかかるので、Now LoadingGif画像に切り替えたりしています。

Now Loading...

さいごに

Ruby自体に触れるようになったのも、ここ1、2年（おかしな記述も多いかと）なのですがRubygemsやBundler等の一連のエコシステムが心地よくて、「早めに完成品が見られる感」が半端ないですね。表示されたGif画像は保存もできるので、どうぞお持ち帰りください。