HVC-Cでサイヤ人メーターを作ってみたin development

 
date:2015.01.19   posted by:Tanaka
 

お晩です、インターンの田中です。
前回はHVC-CでiOS開発をする方法とSwiftで書くときの注意点について触れました。
今回は、それを踏まえて新たにアプリを作成したので、どんなアプリかということと、実装する上でポイントとなったことを紹介します。

作ったアプリ

これ。

その名も「サイヤ人メーター」
戦闘力が一定値を超えるとサイヤ人化した自分が撮れるカメラアプリです。
カメラ以外にも投稿された最強のサイヤ人たちをランキングで見ることができます。

機能と実装方法

カメラ機能

純粋なカメラの機能は以下を参考に書きました。
逆引きSwift

画像合成機能

上に用意したスクリーンショットにあるように、サイヤヘアーとカメラで撮った写真を合成する機能を実装しています。
書き方はこんな感じ。

//撮影したカメラ画像
var cameraImage : UIImage = UIImage(data: imageData)!
//合成する画像
let saiyaHairImage = UIImage(named: "SaiyaHair.png")

//画像の合成処理
UIGraphicsBeginImageContext(CGSizeMake(cameraImage.size.width, cameraImage.size.height))
cameraImage.drawAtPoint(CGPointMake(0, 0))
saiyaHairImage?.drawAtPoint(CGPointMake(self.saiyaImageView.center.x - 120, self.saiyaImageView.center.y - 40))
cameraImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()

ランキング機能

私田中は、現在スマホネイティブは書けてもサーバーサイドが書けないのです。ランキング機能をつけるにはどうしてもデータベース連携が不可欠。
今回はそれを解決するためにWindows Azure Mobile Servicesを導入しました。Azure Mobile ServicesはiOS向けに専用フレームワークを用意している点、必要なデータベースのフィールドは自動で追加してくれる点で、サーバー側の知識が無くとも連携が容易であるので導入しました。
あとは個人的にBizSparkを手に入れたのでいじってみたかったのです。
導入方法は公式リファレンスと私が個人的にSwiftで扱う方法をまとめた以下のリンクを参考にしてみてください。
モバイルサービス向けiOSクライアントライブラリの使用方法
iOS側の操作だけで出来る!Swift×Azure入門

画像の送信

ひとつ悩んだ点としては、画像の送信ってどうやるの?ということでした。
結果として画像データをシリアライズしてやり取りをするという工程が必要なようでした。

UIImageJPEGRepresentation(image:, compressionQuality:)メソッドで画像をNSDataに変換し、それをNSDataのインスタンンスメソッド、base64EncodedStringWithOptions(options:)メソッドでエンコードしたデータを送信するという手順でした。

まとめ

データベース連携を一人でやるのは今回初めてでした。
BaaSを使うと簡単と以前から聞いていましたが、その力は絶大でした。
もうBaaS使っとけばとりあえずいいんじゃないかな(闇堕ち)
というのは言いすぎたとしても、今回のような簡単な実装がしたい場合は、これを使ったほうが早く開発ができそうです。
簡単なところはやったので、これからはもっとちゃんとしたバックエンドを書くことも覚えていきたいと思います。

 
Copyright © TheDesignium inc. powered by WordPress & mootools.
Relative Keyword|none