2012年3月23日金曜日

自分用のdropbox automatorが作れる!dropbox+herokuでtwitterに写真を自動投稿する方法

dropboxにファイルを上げると、自動的にfacebookやflickrに投稿するようにできるdropbox automatorというサービスがあります。
このサービスはtwitterへのphoto投稿が対応していないので、dropbox apiとherokuを使って、できるようにしてみたいと思います。
今回のファイルはgithubにあげておきました。

とりあえずgemをインストール
# vim Gemfile

下記を記述。

source "http://rubygems.org"
gem "clockwork"
gem 'dropbox-sdk'
gem 'twitter'


# bundle install

次にdropbox apiを使えるようにこちらから登録してください。
ログイン後、アプリ登録画面で「create an App」をクリック
適当にアプリ名と説明を入れて、「App folder」の方をチェックして、登録。

アプリの詳細画面でApp keyとApp secretを確認してください。
apiを使うためには、コレ以外にrequest_tokenとaccess_tokenが必要なのですが、
そのためにはブラウザでフォルダへの許可を取る必要があります。

なので、まずはその取得用のスクリプトを作成。


# -*- coding: utf-8 -*-
require 'dropbox_sdk'

APP_KEY = 'INSERT-APP-KEY-HERE'
APP_SECRET = 'INSERT-APP-SECRET-HERE'
ACCESS_TYPE = :app_folder
session = DropboxSession.new(APP_KEY, APP_SECRET)

request_token = session.get_request_token

authorize_url = session.get_authorize_url
puts "AUTHORIZING", authorize_url
gets

access_token = session.get_access_token

p "request_token:", request_token
p "access_token:", access_token



上のスクリプトを一端起動してください。
途中urlが表示されると思いますので、それをブラウザに入力。
認証完了後、ターミナルに戻り、エンターを押してください。

request_tokenとaccess_tokenのkeyとsecretがそれぞれ表示されると思いますので、メモしておきます。

次に実際に動かすスクリプトの作成。

herokuのcedar stackでは、webの代わりにスクリプトを動かしっぱなしにできるので、それを利用します。
具体的には、clockworkというライブラリを使い、一定ごとにdropboxのapiを叩き、新規ファイルが登録されていれば、それを投稿という流れ。

設定用のファイルを作成。
# vim Procfile

cron: bundle exec clockwork clock.rb


コードは下記の通り。

# -*- coding: utf-8 -*-
require 'clockwork'
require 'twitter'
require 'dropbox_sdk'
include Clockwork
@time = Time.now

Twitter.configure do |config|
config.consumer_key = 'XXXXXXXXXXXXXXXX'
config.consumer_secret = 'XXXXXXXXXXXXXXXX'
config.oauth_token = 'XXXXXXXXXXXXXXXX'
config.oauth_token_secret = 'XXXXXXXXXXXXXXXX'
end

APP_KEY = 'INSERT-APP-KEY-HERE'
APP_SECRET = 'INSERT-APP-SECRET-HERE'
ACCESS_TYPE = :app_folder
session = DropboxSession.new(APP_KEY, APP_SECRET)
session.set_request_token('REQUEST_TOKEN_KEY', 'REQUEST_TOKEN_SECRET')
session.set_access_token('ACCESS_TOKEN_KEY', 'ACCESS_TOKEN_SECRET')
client = DropboxClient.new(session, ACCESS_TYPE)

handler do |job|
filedata = nil
file_metadata = client.metadata('/')
filedata = file_metadata["contents"].map { |x| x if Time.parse( x["modified"]) > @time }
filedata.each do |f|
unless f == nil
file = client.get_file(f["path"])
filename = Time.now.to_i.to_s
File.open("/tmp/" + filename, "w") {|f| f.write file}
tmp = File.open("/tmp/" + filename, "rb")
p tmp
Twitter.update_with_media(@time.strftime("%F %H:%M"), tmp)
end
end
@time = Time.now
end

every(1.minutes, 'check')


apiのキーはそれぞれ先程メモったものなどを入力してください。

あとはherokuに上げるだけ。
# git init
# git add .
# git commit -m 'first commit'

# heroku create --stack cedar
# git push heroku master
# heroku scale cron=1

ちゃんと動いているかどうか確認します。
# heroku ps
起動しているプロセスがcron.1だけのはず。

# heroku logs --tail
Triggering checkみたいなログがでているはずです。

あとは、dropboxに先程登録したアプリ名のファイルができているので、画像をコピーしてみます。(なぜかgitがうまく投稿できませんでした。。。)
twitterに自動投稿されていれば成功です。

ファイル名や種類、アップするフォルダで処理を変えるようにすれば、自分なりの「dropbox automator」がつくれます。

2012年3月19日月曜日

iphoneで撮った写真をherokuにアップロードする(iosアプリ)

herokuで無料のimage uploaderを作るの続き。

mongolabを使って、写真のアップローダを作れるようにしましたが、せっかくなのでiphoneから写真を直接あげられるようにしておきます。
写真をアップロードはhttpを使ってサーバにpostします。

postするサンプルを作っている人がいたので、これをベースにして使うことに。
https://github.com/tochi/HTTPFileUploadSample

HTTPFileUploadSampleViewController.hを以下のように修正

@interface HTTPFileUploadSampleViewController : UIViewController
{
IBOutlet UITextField *codeTextField;
IBOutlet UIImageView *_imageView;
}

- (IBAction)postButtonClicked:(id)sender;
- (IBAction)showCameraSheet:(id)sender;
@property (retain, nonatomic) IBOutlet UITextField *codeTextField;


HTTPFileUploadSampleViewController.mを以下のように修正
httpFileUpload postWithUriは自分のherokuのURLに修正してください。


#import "HTTPFileUploadSampleViewController.h"

@implementation HTTPFileUploadSampleViewController
@synthesize codeTextField = _codeTextField;

- (void)dealloc
{
[_imageView release];
[_codeTextField release];
[super dealloc];
}

- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
}

#pragma mark - View lifecycle
- (void)viewDidLoad
{
[super viewDidLoad];
_codeTextField.returnKeyType = UIReturnKeyDone;
_codeTextField.delegate = self;
}

- (BOOL)textFieldShouldReturn:(UITextField *)textField {
[_codeTextField resignFirstResponder];
return YES;
}

- (void)viewDidUnload
{
[_imageView release];
_imageView = nil;
[codeTextField release];
codeTextField = nil;
[self setCodeTextField:nil];
[super viewDidUnload];
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
return (interfaceOrientation == UIInterfaceOrientationPortrait);
}

- (IBAction)postButtonClicked:(id)sender
{
// Get image data.
//UIImage *image1 = [UIImage imageNamed:@"Icon.png"];

// File upload.
HTTPFileUpload *httpFileUpload = [[HTTPFileUpload alloc] init];
httpFileUpload.delegate = self;
[httpFileUpload setPostString:self.codeTextField.text withPostName:@"name"];
[httpFileUpload setPostImage:_imageView.image withPostName:@"photo" fileName:@"Icon.png"];
[httpFileUpload postWithUri:@"http://XXXX.herokuapp.com/users/photo.json"];
[httpFileUpload release], httpFileUpload = nil;
}

- (IBAction)showCameraSheet:(id)sender {
// アクションシートを作る
UIActionSheet* sheet;
sheet = [[UIActionSheet alloc]
initWithTitle:@"Select Soruce Type"
delegate:self
cancelButtonTitle:@"Cancel"
destructiveButtonTitle:nil
otherButtonTitles:@"Photo Library", @"Camera", @"Saved Photos", nil];
[sheet autorelease];

// アクションシートを表示する
[sheet showInView:self.view];
}

- (void)actionSheet:(UIActionSheet*)actionSheet
clickedButtonAtIndex:(NSInteger)buttonIndex
{
// ボタンインデックスをチェックする
if (buttonIndex >= 3) {
return;
}

// ソースタイプを決定する
UIImagePickerControllerSourceType sourceType = 0;
switch (buttonIndex) {
case 0: {
sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
break;
}
case 1: {
sourceType = UIImagePickerControllerSourceTypeCamera;
break;
}
case 2: {
sourceType = UIImagePickerControllerSourceTypeSavedPhotosAlbum;
break;
}
}

// 使用可能かどうかチェックする
if (![UIImagePickerController isSourceTypeAvailable:sourceType]) {
return;
}

// イメージピッカーを作る
UIImagePickerController* imagePicker;
imagePicker = [[UIImagePickerController alloc] init];
[imagePicker autorelease];
imagePicker.sourceType = sourceType;
imagePicker.allowsImageEditing = YES;
imagePicker.delegate = self;

// イメージピッカーを表示する
[self presentModalViewController:imagePicker animated:YES];
}

- (void)imagePickerController:(UIImagePickerController*)picker
didFinishPickingImage:(UIImage*)image
editingInfo:(NSDictionary*)editingInfo
{
// イメージピッカーを隠す
[self dismissModalViewControllerAnimated:YES];
// オリジナル画像を取得する
UIImage* originalImage;
originalImage = [editingInfo objectForKey:UIImagePickerControllerOriginalImage];

// グラフィックスコンテキストを作る
CGSize size = { 300, 400 };
UIGraphicsBeginImageContext(size);

// 画像を縮小して描画する
CGRect rect;
rect.origin = CGPointZero;
rect.size = size;
[originalImage drawInRect:rect];

// 描画した画像を取得する
UIImage* shrinkedImage;
shrinkedImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

// 画像を表示する
_imageView.image = shrinkedImage;
}

- (void)imagePickerControllerDidCancel:(UIImagePickerController*)picker
{
// イメージピッカーを隠す
[self dismissModalViewControllerAnimated:YES];
}

- (void)httpFileUpload:(NSURLConnection *)connection
didFailWithError:(NSError *)error
{
NSLog(@"%@", error);
}

- (void)httpFileUploadDidFinishLoading:(NSURLConnection *)connection
result:(NSString *)result
{
NSLog(@"%@", result);
UIAlertView *alert = [[UIAlertView alloc]
initWithTitle:@""
message:@"投稿完了しました。"
delegate:nil
cancelButtonTitle:@"OK"
otherButtonTitles:nil, nil];
[alert show];
[alert release];
}
@end


次にここを参考にxibを作成。アクションシートを追加してください。(コードは上のものにすでに入ってます。)
http://news.mynavi.jp/column/iphone/001/index.html
同じような感じで、textfieldを追加してください。(codeTextField)

次にrails側。
こちらをベースに修正します。
https://github.com/face-do/heroku-image-uploader
UsersController.rbを以下の用に修正。

def photo
@user = User.new(:name => params[:name], :photo => params[:photo] )

respond_to do |format|
if @user.save
format.html { redirect_to @user, notice: 'User was successfully created.' }
format.json { render json: @user, status: :created, location: @user }
else
format.html { render action: "new" }
format.json { render json: @user.errors, status: :unprocessable_entity }
end
end
end

config/routes.rbに以下を追記
post "users/photo" => 'users#photo'

app/controllers/application_controller.rbを以下のように修正。

protect_from_forgery :except => :photo


で、herokuにあげて、iosアプリをiphoneに転送すれば、できます。
一応今回のファイルをgithubにあげておきました。
rails アプリのほう
iphoneクライアントの方

2012年3月18日日曜日

herokuで無料のimage uploaderを作る

herokuで無料のimage uploaderを作る

herokuは非常に便利ですが、read onlyなのでアップローダーを作ったりできません。
もしやろうとするとS3を使った方法が一般的のようですが、若干利用料金がかかってしまいます。
なので無料で作れる方法を考えてみました。

herokuでは画像を直接アップすることはできませんが、DBに直接保存することができます。
しかしherokuのデフォルトのものは、5MBしかありません。
そこでmongolabという、mongodbを240MBまで無料提供してくれるサービスを利用します。
なおmongolabはherokuにadd-onとして提供されているため、セットアップは簡単です。

githubにファイルをあげておいたので、参考にしてください。
https://github.com/face-do/heroku-image-uploader

まずはrailsプロジェクトを作成します。
ただしmongodbを使うため、active recordを切るようにしておきます。

# rails new uploader -O

次に、gemfileに以下を追記


gem 'mongoid', '~>2.1'
gem 'bson_ext', '~>1.3'
gem 'carrierwave'
gem 'carrierwave-mongoid', :require => 'carrierwave/mongoid'


# bundle install

で、mongodbに接続するための設定のひな形を作る。
# rails generate mongoid:config

config/mongoid.ymlのproductionを以下のように修正

production:
uri: <%= ENV['MONGOLAB_URI'] %>



carrierwaveの設定をする
#vim config/initializers/carrierwave.rb

以下を記述

CarrierWave.configure do |config|
config.storage = :grid_fs
config.grid_fs_connection = Mongoid.database
config.grid_fs_access_url = "/images"
end


アップローダのひな形を作る
# rails g scaffold page title:string
# rails g uploader photo

app/models/user.rbは以下のように


class User
include Mongoid::Document
field :title, :type => String
mount_uploader :photo, PhotoUploader
end


app/uploaders/photo_uploader.rbは以下のように修正


# encoding: utf-8
class PhotoUploader < CarrierWave::Uploader::Base
include CarrierWave::RMagick
storage :grid_fs
def store_dir
"uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
end
version :thumb do
process :resize_to_limit => [200, 200]
end
end


app/views/users/_form.html.erbの
の上に以下を追記



<%= f.label :photo %>

<%= image_tag( @user.photo_url ) if @user.photo? %>
<%= f.file_field :photo %>
<%= f.hidden_field :photo_cache %>



このままだと画像が表示されないので、画像表示用のメソッドを作る。
まずはapp/controllers/users_controller.rbに以下を追記


require 'mongo'
class UsersController < ApplicationController
def serve
gridfs_path = env["PATH_INFO"].gsub("/images/", "")
begin
gridfs_file = Mongo::GridFileSystem.new(Mongoid.database).open(gridfs_path, 'r')
self.response_body = gridfs_file.read
self.content_type = gridfs_file.content_type
rescue
self.status = :file_not_found
self.content_type = 'text/plain'
self.response_body = ''
end
end


config/routes.rbに以下を追記
match "/images/uploads/*path" => "users#serve"

これでアプリ側の設定は終了。git でcommitしておきます。
# git add .
# git commit -m 'first commit'

次にheroku側の設定をします。
#heroku create --stack cedar
#heroku addons:add mongolab:starter

あとはherokuにdeployするだけ
#git push heroku master