Qiita API v2 Hackathonに参加してきた：写真撮ってQiita Teamにアップロード

このエントリーは、株式会社リクルートテクノロジーズ Advent Calendar 2014の17日目です。

2014/12/13、リクルート本社サウスタワーで行われた Qiita API v2 Hackathon で、QiitaSnapなるアプリを作り発表させていただきました。

商品はとても豪華。以下のとおり。

素敵なサウスタワー41階の景色も相まって、とても楽しい会でした。

＊リクルートが出てくるのはここまでです。

Hackathonのテーマ

今回のHackathonのテーマは、Qiita APIv2を利用して毎日の開発が楽しくなるツールの開発でした。私のチームではQiita Teamを使っており、UIUX設計時のホワイトボード上のメモを議事録として投稿することがよくありました。これが意外と面倒なので、三秒でQiita Team上にアップロードできるiOSアプリを作りました。

つくったもの

UIImagePickerControllerを用いて写真を撮影し、Parseに画像をアップロードし、Qiita API v2で画像をアップロードするシンプルな仕組みです。カメラに関してはUIImagePickerControllerを用いないでもAVFoundation Frameworkを用いればカスタマイズ可能なカメラを実装できるのですが、短時間での実装だったためより簡単に実装できるUIImagePickerControllerを用いました。

まず、起動直後にカメラを起動し、その画面上で投稿するQiita Teamを選択するボタンを表示。

f:id:jeffsuke:20141217154217p:plain

カメラの部分は、UIViewControllerの上に以下のコードを書いている。

- (void)viewDidLoad
{
    [super viewDidLoad];
    
//    UIImagePickerControllerの初期設定
    self.picker = [[UIImagePickerController alloc] init];
    self.picker.delegate = self;
    self.picker.allowsEditing = NO;

//    起動するのはカメラ
    self.picker.sourceType = UIImagePickerControllerSourceTypeCamera;
    
//    ボタンの設置
    UIButton *button = [UIButton buttonWithType:100];
    [button setBackgroundImage:[UIImage imageNamed:@"team"] forState:UIControlStateNormal];
    [button setFrame:CGRectMake(0, [UIScreen mainScreen].bounds.size.height - 200, 100, 42)];
    [button addTarget:self action:@selector(teamAction:) forControlEvents:UIControlEventTouchUpInside];
    self.picker.cameraOverlayView = button;
    
    [self presentViewController:_picker animated:YES completion:NULL];
}

これでカメラの実装は完了。

カメラで撮影後は、UIImagePickerViewControllerDelegateの- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)infodelegateメソッドから撮影画像を取得し、画像サイズをUIGraphicsBeginImageContextにて変更している。

// Resize image
    UIGraphicsBeginImageContext(CGSizeMake(640, 960));
    [image drawInRect: CGRectMake(0, 0, 640, 960)];
    UIImage *smallImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

これにより生成された画像をParseにアップロード。その画像をリクエストするURLを取得するためにPFFileオブジェクトを取得する。

//PFFileオブジェクトを取得する
    PFFile *fileData = [objectData objectForKey:@"imageData"];
            
//画像データURLを取得する
    imageURL = fileData.url;

最終的にこのURLを元にPOSTする内容を生成。今回は、時間がなく平文で、一つのStringで以下のようにした。

NSString *json = [NSString stringWithFormat:@"{\"body\": \"![](%@)\",\"tags\": [{\"name\": \"QiitaSnap\"}],\"title\": \"議事録 %@\",\"tweet\": true}", imageURL, stringFromDate];