mobilebackend運用しています。こちらの記事の元は[こちら] (https://github.com/NIFTYCloud-mbaas/UserCommunity/issues/192). 初めてロボットを触って、mobile backendを使ってデモを作りましたが、作成した手順などシェアさせてください。
- 本記事は、ニフティクラウドmobile backend各種展示会ブースにて展示している【Romo】デモの実装TIPSになります！
- デモに使用しているサービス群
What is Romo? Romo（ロモ）って何？
Romo
公式サイトより：
Romo（ロモ）はiPhoneやiPod touchを使って楽しくプログラミングを学べる知育ロボットです。
つまり、iPhoneやiPodをつければ、様々なことができるロボットの一種になります！
How to develop for Romo? どうやってRomoアプリ開発を行うの？
基本的にはiOSアプリ開発を行う形になります。
Romoに取り付けるiPhone/iPod上で動作するiOSアプリを作ることで、ロモの制御が可能です！
ロモ社からは、ロモ専用のSDKが下記の通り2つ提供されています。
- RM Core Framework（本体の制御）
LEDの制御、iPhoneの角度の制御、左右のキャタピラの回転
- RM CharacterFremework（Romoアプリ内のキャラクターの制御）
視線、発話、目の開閉、感情の表現
これらのSDKを使えば、Romoをコントロールするのは簡単そうですね。
What I did with Romo? Romo（ロモ）と何をしたのか？
Romoの機能を活用すれば、色んなことが出来そうです。
たとえば、カーレースのようなゲームを作る記事なども公開されていました。
今回は、ゲームのようなものではなく、何か生活に役に立つものをRomoと行えないか考えてみました。
Romoは自由に動き回ることができ、iPhoneのカメラも利用できます。
それらを組み合わせれば、ボディーガードとまではいかなくとも、
家の状況や子供・ペットの状況を監視することはできそうですね！
今回は、Romoを遠隔操作で自由に走らせ、ビデオ通信で状況を把握したり、
写真を撮って登録した端末へプッシュ通知で送るようなRomoアプリを作っていきたいと思います。
また、今回の実装はニフティクラウドmobile backendだけではなく、
ニフティクラウドの様々なサービスを組み合わせて行っていきます。
How to? どうやって行ったか？
構成要素は主に下記の3つです。
- コントローラー: ビデオを受信し、Romoへ写真を撮る命令を送る
- Romoクライアント: ビデオを送信し、Romoの制御を受け、写真を撮る
- プッシュ通知受信クライアント：プッシュ通知の受信
以下は、展示会ブース等でも使用した今回のRomoアプリの説明図です。
-
Romoの制御：ニフティクラウドMQTTにより実装。
-
Romoのビデオ通信：ニフティクラウドでWEB-RTCを構築。
-
Romoから画像写真をアップロード／Push通知を送信: ニフティクラウドmobile backend <- 今回はここをメインに説明します！
Romoからファイルストアに画像をアップロードする
//保存するファイル名の生成
[self.localView setHidden:false];
NSDate *currentTime = [NSDate date];
NSDateFormatter *dateFormatter = [[NSDateFormatter alloc] init];
[dateFormatter setDateFormat:@"yyyyMMddHHmmss"];
NSString *resultString = [dateFormatter stringFromDate: currentTime];
NSString *fileName = [resultString stringByAppendingString:@".jpg"];
//mbaasの初期化
[NCMB setApplicationKey:NCMB_ApplicationKey clientKey:NCMB_ClientKey];
//データストアへファイル名の保存
NCMBObject *imageData = [NCMBObject objectWithClassName:@"image"];
[imageData setObject:fileName forKey:@"imagetitle"];
[imageData saveInBackgroundWithBlock:nil];
// ファイルストアへ画像のアップロード
GLKView *tempview = self.localView.subviews[0];
UIImage *image = [tempview snapshot];
[self.localView setHidden:true];
NSData *jpgData = [[NSData alloc] initWithData:UIImagePNGRepresentation(image)] ;
NCMBFile *file = [NCMBFile fileWithName:fileName data:jpgData];
[file saveInBackgroundWithBlock:nil];
少しソースコードの説明をします。
まず、ファイル名を現在時刻の文字列より生成します。
その後、データストアへファイル名を、ファイルストアへ画像を保存します。データストアと連携を行うのは、ファイル名で画像を検索できるようにするためです。
画像は、以下のドキュメントを参考に、NSDataに変換したものを保存します。
http://mb.cloud.nifty.com/doc/sdkguide/ios/filestore.html
プッシュ通知の実装
写真のアップロードが完了したら、指定した端末へプッシュ通知を配信します。
端末がプッシュ通知を受信したら、アップロードした画像がポップアップで出てくるような実装とします。
※写真については、公開ファイルか、もしくは別途URLを準備する必要があります。
以下のプッシュ通知登録ドキュメントをご参考ください。
http://mb.cloud.nifty.com/doc/sdkguide/ios/push.html
//Sendpush
NSString *richUrlStr = [@"http://cy8srgt-ac3-app000.c4sa.net/romo-js/#/push/" stringByAppendingString:fileName];
NCMBPush *push = [NCMBPush push];
NSDictionary *data = @{};
[push setData:data];
[push setMessage:@"it`s a pic from romo"];
[push setImmediateDeliveryFlag:true];
[push setPushToAndroid:true];
NCMBQuery *query = [NCMBInstallation query];
[query whereKey:@"iot" equalTo:self.pushid]; //installation class setting: string "1"
[push setRichUrl:richUrlStr];
[push setSearchCondition:query];
[push sendPushInBackgroundWithBlock:^(NSError *error) {
NSLog(@"[Error] %@", error);
}];
setDataおよびsetMessageにてプッシュ通知の中身を設定します。
また、setImmediateDeliveryFlagをtrueにして、即時配信されるように設定しました。
対象端末はAndroidです。
今回、プッシュ通知は設定時に入力された「pushid」と同じ番号が割り振られている端末へ配信する形をとります。
まず、NCMBInstallationのqueryを作成し、「iotフィールドにpushidと同じ番号が入っている」という条件にしてから、setSearchConditionにqueryを指定します。
最後に、sendInBackgroundWithBlockで非同期的にプッシュ通知を登録します。
プッシュ通知受信処理
AndroidでもiOSでも受信することが可能です。
以下のサンプルをご参考ください。
ソースコード公開中
以下のGithubにアップしていますので、ぜひご参考ください。
※サーバー設定、APIキー設定などの修正が必要です。