Rewish

Herokuを利用したナントカstagramの作り方

先週の水曜日に@hilokiと一緒に作った Shibastagram - 柴犬たくさん、しばすたぐらむ というモフモフ系癒しWebをリリースしました。

スクロールすると柴犬がモリモリ出てきて無限に癒されるナイスWeb。

今回はソースコード自体を公開し、Shibastagramのチワワ版「chihuastagram - チワワたくさん、チワスタグラム」を作りながら、ナントカstagramの作り方を紹介したいと思います。

※記事中のChihuaやChihuastagramは自分のナントカstagramに合わせて読み替えて下さい。

準備

早速いってみましょう。

注意) 以下の内容はMac環境を前提としています。UNIX/Linux系のOSを使ってる人は問題無いと思いますが、Windowsの人はRubyやRubyGemsなど必要なモノを別途インストールする必要があります。あと全部ターミナルで作業です。

Herokuを使う準備

Heroku (ハーオークー/ヘロク)は最近流行のPaaS。DeployにGitを使っているのが特徴でしょうか。Rubyアプリケーションを簡単に動かせるのでRubyistを使いまくってるらしい。

ユーザ登録を済ませた後、以下のコマンドを実行してherokuコマンドをインストールします。

sudo gem install heroku

必要なGemライブラリをインストール

以下のコマンドを打てばきっと大体OK!

sudo gem install instagram
sudo gem install activerecord
sudo gem install json
sudo gem install sqlite3
sudo gem install sinatra
sudo gem install haml

Gitをインストール

とりあえずGitが無いと始まりません。

Gitのインストール方法とか書き出したら大変なことになるので、調べるか、お近くのプログラマーさんに質問するのが良いと思います。GitHubでリポジトリを作ると表示されるチュートリアル的なモノもオススメ。

各種設定

Shibastagramのソースコードを入手

Chihuastagramの元となるソースコードを入手します。

rewish/Shibastagram - GitHub

上記のリポジトリをforkしてからcloneする。

git clone git://github.com/ユーザー名/Shibastagram.git chihuastagram

cloneし終わったら対象ディレクトリに移動しておく。

cd chihuastagram

Herokuにアプリケーションを作成

以下のコマンドを打つと自動でHerokuのアプリが作成される。アプリ名.heroku.comみたいなドメインになる。

heroku create アプリ名

初めての場合はHerokuに登録したメールアドレスとパスワードを入力してって言われるので入力してください。

Instagram APIのClient IDを取得

まずhttp://instagr.am/developer/にログインする。アカウントが無ければ作る。

http://instagr.am/developer/manage/からRegister a New Clientを選択してクライアントを追加する。

追加したらCLIENT IDというのが出てくるので、config/environment.rbのCLIENT_IDのところに貼り付ける。

# Client ID
CLIENT_ID = 'こぴぺぺぺぺぺぺたり'

取得したい写真のタグを設定

どんな方法で柴犬の画像を集めてるの的な質問があったけど、Bijostagramとは違って、写真に付いてるタグで検索してるだけです。

目的のタグをconfig/environment.rbのTARGET_TAGSに追加していく。複数のタグを指定できますが、増やしすぎるといっぱいアクセスして取得時間が長くなります。

# Target tags ['shiba', 'shibainu', 'shibadog', 'shibas']
TARGET_TAGS = ['chihuahua', 'chiwawa']

ローカルでテスト実行

アプリのルートディレクトリで以下のコマンドを打ってみる。

ruby application.rb

http://localhost:4567/にアクセスするとそれっぽいモノが見えます。

動いているのが確認出来たらCtrl + Cを押してコマンドを終了させます。

データベースの設定

config/database.yml.defaultをコピーしてconfig/database.ymlを作成。

デフォルトではSQLite3を使うようになっていますが、MySQLなどを使いたい場合は設定を変更して下さい。この設定はローカルのみで有効です。

データベースの設定が完了したら以下のコマンドを実行してテーブルを作る。

rake db:migrate

Instagramのデータを取得

以下のコマンドを実行すると、指定したタグのデータを取得し始めます。

rake hh:update

終わったらもう一度ruby application.rbしてブラウザで確認。完全に自分用ならココで終わっても問題無いですね。

カスタマイズ

HTMLはviewsディレクトリの中にあるファイルを適当にイジる。

他は雰囲気で感じ取って適当に修正して下さい。

デプロイ

Herokuにアプリケーションを配備します。deploy自体はGitでpushするだけなので凄くシンプル。

最初に1回だけ実行するコマンド

最初に一回だけ以下のコマンドを実行して、Heroku側にmasterブランチを作るのと、データベースのマイグレーション、データ取得を行います。

git push heroku master
heroku rake db:migrate
heroku rake hh:update

2回目以降に実行するコマンド

2回目以降は単純にpushするだけで変更が反映される。

git push heroku

動作確認

直接 http://アプリ名.heroku.com/ にアクセスするか、以下のコマンドを叩く。

heroku open

Cronの設定

Herokuの無料版ではCronを一日一回しか回せないので、設定した時間毎にURLを叩いてくれるcron-job.orgを利用して定期的にデータ取得処理を実行します。データ取得用のURLを勝手に叩かれても困るので、Tokenを設定してそれが一致しない場合はURL自体を無効化する感じです。

以下のコマンドでトークン文字列が表示されるのでメモる。

rake hh:token

メモったトークン文字列をconfig/environment.rbのCRON_TOKENに貼り付ける。

# Cron token
CRON_TOKEN = 'トークン文字列ペタリ'
実際にcron-job.orgで叩くURL
http://アプリ名.heroku.com/tasks/update?token=トークン文字列

cron-job.orgの設定については プログラミングできないデザイナーでも制作できるTwitter bot 制作メモ - EC studio デザインブログが参考になると思います。

回すタイミングは取得内容によりますが、1時間〜2時間に一回くらいで大丈夫じゃないでしょうか。

以上です。