前回は、「プッシュ通知」についてご説明しました。
今回はデータストレージ機能についてご紹介します。
まず、データストレージ機能とは何かを簡単にご説明します。
データストレージ機能とは、クラウド上へデータを保存することができる機能です。
データストレージの種類は、大きく分けて2つあります。
- オブジェクトストレージ
- ファイルストレージ
■オブジェクトストレージ
クラウド上にクラスオブジェクトを作成することによって、情報を保存することができます。
アプリケーションで使用する固有のデータやユーザ情報を保存するのに適しています。
■ファイルストレージ
クラウド上にバイナリファイルを保存することができます。
アプリケーションで取得した写真や動画を保存するのに適しています。
ただし、10MBを超えるファイルは扱うことができませんので注意してください。
それでは、ストレージ機能を使用したアプリケーションを作成してみたいと思います。
今回は、画像のアップロードからダウンロードまで行うアプリケーションを作成してみましょう。
※今回も「iOS」を例としてデータストレージ機能をご説明します。
まずは、事前準備として下記をそろえておきましょう。
- iPhone5端末
- 前回使用したプロジェクトファイル
- jpeg画像ファイル(10MB以下であること)
それでは、前回作成したプロジェクトへ画像のアップロード/ダウンロードを実装する為の準備として
データを保存する際に必要なクラスオブジェクトをParse.comサイト内で作成しておきましょう。
＜Parse.comサイトにてクラスオブジェクトを作成する方法＞
【手順１】
Parse.comのサイトへログインし、画面中央にある「Data Browser」ボタンをクリックします。
【手順２】
「New Class」ボタンをクリックします。
【手順３】
下記の情報を入力して「Create Class」ボタンをクリックします。
- Class Type:「Custom」を選択する
- Class name:クラス名を入力する
【手順４】
「Classes」一覧に作成したクラス名が表示されていることを確認します。
【手順５】
「+Col」ボタンをクリックします。
【手順６】
下記の情報を入力して「Create Column」ボタンをクリックします。
- Data Type:データタイプを選択する
- Class name:カラム名を入力する
今回は、下記のカラムを追加します。
- fileId:ファイルIDを保存し、データ型は「String」とする
- name:ファイル名を保存し、データ型は「String」とする
- fileType:ファイルタイプを保存し、データ型は「Number」とする
- imageData:バイナリデータを保存し、データ型は「File」とする
※追加方法については、「fileId」を例とします。
各カラムでも同様であるため、割愛します。
【手順７】
追加したカラム名が表示されていることを確認します。
これで、Parse.comサイト内にクラスオブジェクトを作成することができました。
それでは、実際に画像をParse.comのクラウド上へアップロードを行い、
アップロードした画像をダウンロードして表示するアプリケーションを作成してみましょう。
※アップロードする画像は、予めアプリケーション内に組み込んだ画像を使用します。
＜画像のアップロード/ダウンロードを実装する方法＞
【手順１】
前回作成した作成したプロジェクトを開きます。
【手順２】
「Main.storyboard」を選択して、「ViewController」を表示します。
【手順３】
下記のボタンを作成し、各ボタンをタップした際に呼ばれるメソッドも作成しておきます。
- アップロードボタン
- ダウンロードボタン
※今回は、ボタンの作成及び、ボタンタップ時に呼ばれるメソッドの作成方法については割愛します。
メソッド名は下記とします。
アップロードボタン:uploadClick
ダウンロードボタン:downloadClick
【手順４】
画像を表示するためのUIImageViewを作成します。
※今回は、UIImageViewの作成方法については割愛します。
【手順５】
事前準備で用意したjpeg画像ファイルをプロジェクトのディレクトリ内に格納します。
【手順６】
プロジェクト内の「Supporting Files」を選択し、右クリックして「Add File to “testProject”…」をクリックします。
【手順７】
jpeg画像ファイルを選択して、「Add」ボタンをクリックします。
【手順８】
jpeg画像ファイルが追加されたことを確認します。
【手順９】
「ViewController.m」を選択して、「uploadClick」メソッド内にjpeg画像のデータを取得する処理を追加します。
※「uploadClick」メソッド:アップロードボタンをタップした際に呼ばれるメソッドです。
■ ViewController.m
//アップロードボタンのタップ処理
- (IBAction)uploadClick:(id)sender
{
//下記を追記
//アプリケーション内にある画像データを取得する
NSString *imagePath = [[NSBundle mainBundle] pathForResource:@"test" ofType:@"jpg"];
NSData *imageData = [NSData dataWithContentsOfFile:imagePath];
}
【手順１０】
「uploadClick」メソッド内に【手順１】にて取得した画像データを保持する処理を追加します。
parse.comでファイルを保存する場合、「PFFile」クラスを使用します。
「PFFile」クラスを使用することで、最大10MBまでバイナリファイルを保存することができます。
■ ViewController.m
//アップロードボタンのタップ処理
- (IBAction)uploadClick:(id)sender
{
//アプリケーション内にある画像データを取得する
NSString *imagePath = [[NSBundle mainBundle] pathForResource:@"test" ofType:@"jpg"];
NSData *imageData = [NSData dataWithContentsOfFile:imagePath];
//下記を追記
//取得した画像データをPFFileに設定する
PFFile *imageFile = [PFFile fileWithName:@"test.jpg" data:imageData];
//保存する
[imageFile save];
}
【手順１１】
「uploadClick」メソッド内に保存するデータがクラスオブジェクト内に存在するか確認する処理を追加します。
parse.comでデータを検索する場合、「PFQuery」クラスを使用します。
検索キーを指定することで、データが存在するか検索することができます。
■ ViewController.m
//アップロードボタンのタップ処理
- (IBAction)uploadClick:(id)sender
{
//アプリケーション内にある画像データを取得する
NSString *imagePath = [[NSBundle mainBundle] pathForResource:@"test" ofType:@"jpg"];
NSData *imageData = [NSData dataWithContentsOfFile:imagePath];
//下記を追記
//保存するデータがParse.comサイトで作成したクラスオブジェクト内に存在するか確認する
PFQuery *query = [PFQuery queryWithClassName:@"classTest"];
[query whereKey:@"fileId" equalTo:@"12345"];
//検索する
NSArray *arrays = [query findObjects];
//データが存在しない場合
if( 0 == [arrays count] )
{
//取得した画像データをPFFileに設定する
PFFile *imageFile = [PFFile fileWithName:@"test.jpg" data:imageData];
//保存する
[imageFile save];
//クラスオブジェクトにデータを設定する
}
}
【手順１２】
「uploadClick」メソッド内にクラスオブジェクトにデータが存在しない場合は、データを保存する処理を追加します。
parse.comでデータを保存する場合、「PFObject」クラスを使用します。
「PFObject」クラスを初期化する際に、クラスオブジェクト名を指定します。
■ ViewController.m
//アップロードボタンのタップ処理
- (IBAction)uploadClick:(id)sender
{
//アプリケーション内にある画像データを取得する
NSString *imagePath = [[NSBundle mainBundle] pathForResource:@"test" ofType:@"jpg"];
NSData *imageData = [NSData dataWithContentsOfFile:imagePath];
//保存するデータがParse.comサイトで作成したクラスオブジェクト内に存在するか確認する
PFQuery *query = [PFQuery queryWithClassName:@"classTest"];
[query whereKey:@"fileId" equalTo:@"12345"];
//検索する
NSArray *arrays = [query findObjects];
//データが存在しない場合
if( 0 == [arrays count] )
{
//取得した画像データをPFFileに設定する
PFFile *imageFile = [PFFile fileWithName:@"test.jpg" data:imageData];
//保存する
[imageFile save];
//下記を追記
//クラスオブジェクトにデータを設定する
//保存したデータをParse.comサイト内に作成したクラスオブジェクトに保存する
PFObject *objectData = [[PFObject alloc] initWithClassName:@"classTest"];
//データを設定する
[objectData setObject:@"12345" forKey:@"fileId"];
[objectData setObject:@"アライト太郎" forKey:@"name"];
[objectData setObject:imageFile forKey:@"imageData"];
[objectData setObject:[NSNumber numberWithInt:1] forKey:@"fileType"];
//保存する
[objectData save];
}
}
【手順１３】
アップロードに成功したか失敗したか分かるようにダイアログを表示する処理を追加します。
■ ViewController.m
//アップロードボタンのタップ処理
- (IBAction)uploadClick:(id)sender
{
//下記を追記
//ダイアログメッセージを設定する
NSString *msg = @"アップロードに失敗しました。";
//アプリケーション内にある画像データを取得する
NSString *imagePath = [[NSBundle mainBundle] pathForResource:@"test" ofType:@"jpg"];
NSData *imageData = [NSData dataWithContentsOfFile:imagePath];
//保存するデータがParse.comサイトで作成したクラスオブジェクト内に存在するか確認する
PFQuery *query = [PFQuery queryWithClassName:@"classTest"];
[query whereKey:@"fileId" equalTo:@"12345"];
//検索する
NSArray *arrays = [query findObjects];
//データが存在しない場合
if( 0 == [arrays count] )
{
//取得した画像データをPFFileに設定する
PFFile *imageFile = [PFFile fileWithName:@"test.jpg" data:imageData];
//保存する
[imageFile save];
//下記を追記
//ダイアログメッセージを設定する
msg = @"アップロードに成功しました。";
//クラスオブジェクトにデータを設定する
//保存したデータをParse.comサイト内に作成したクラスオブジェクトに保存する
PFObject *objectData = [[PFObject alloc] initWithClassName:@"classTest"];
//データを設定する
[objectData setObject:@"12345" forKey:@"fileId"];
[objectData setObject:@"アライト太郎" forKey:@"name"];
[objectData setObject:imageFile forKey:@"imageData"];
[objectData setObject:[NSNumber numberWithInt:1] forKey:@"fileType"];
//保存する
[objectData save];
}
//下記を追記
//ダイアログを表示する
UIAlertView *alert = [[UIAlertView alloc] initWithTitle:nil
message:msg
delegate:nil
cancelButtonTitle:nil
otherButtonTitles:@"OK", nil];
[alert show];
}
【手順１４】
「downloadClick」メソッド内に保存したデータがクラスオブジェクト内に存在するか確認する処理を追加します。
※【手順１１】を参考にして作成します。
「downloadClick」メソッド:ダウンロードボタンをタップした際に呼ばれるメソッドです。
■ ViewController.m
//ダウンロードボタンのタップ処理
– (IBAction)downloadClick:(id)sender
{
//下記を追記
//アップロードしたデータが存在するか確認する
PFQuery *query = [PFQuery queryWithClassName:@”classTest”];
[query whereKey:@”fileId” equalTo:@”12345″];
//検索する
NSArray *arrays = [query findObjects];
//データが存在する場合
if( 1 <= [arrays count] )
{
//保存した画像データを取得する
}
}
[/cpp]
【手順１５】
「downloadClick」メソッド内にクラスオブジェクトにデータが存在する場合は、
画像データを取得する処理を追加します。
■ ViewController.m
//ダウンロードボタンのタップ処理
– (IBAction)downloadClick:(id)sender
{
//アップロードしたデータが存在するか確認する
PFQuery *query = [PFQuery queryWithClassName:@”classTest”];
[query whereKey:@”fileId” equalTo:@”12345″];
//検索する
NSArray *arrays = [query findObjects];
//下記を追記
NSData *imageData = nil;
//データが存在する場合
if( 1 <= [arrays count] )
{
//下記を追記
//保存した画像データを取得する
for( PFObject *objectData in arrays )
{
//PFFileオブジェクトを取得する
PFFile *fileData = [objectData objectForKey:@"imageData"];
//画像データを取得する
imageData = [fileData getData];
}
}
}
[/cpp]
【手順１６】
「downloadClick」メソッド内に取得した画像データをUIImageViewへ設定する処理を追加します。
■ ViewController.m
//ダウンロードボタンのタップ処理
– (IBAction)downloadClick:(id)sender
{
//アップロードしたデータが存在するか確認する
PFQuery *query = [PFQuery queryWithClassName:@”classTest”];
[query whereKey:@”fileId” equalTo:@”12345″];
//検索する
NSArray *arrays = [query findObjects];
NSData *imageData = nil;
//データが存在する場合
if( 1 <= [arrays count] )
{
//保存した画像データを取得する
for( PFObject *objectData in arrays )
{
//PFFileオブジェクトを取得する
PFFile *fileData = [objectData objectForKey:@"imageData"];
//画像データを取得する
imageData = [fileData getData];
}
}
//下記を追記
if( nil != imageData )
{
self.imageView.image = [[UIImage alloc] initWithData:imageData];
}
}
[/cpp]
これで、実装は完了となります。
それでは実際にアプリケーションを動かしてみましょう。
＜作成したアプリケーションを動かす方法＞
【手順１】
用意したiPhone5端末とPCを接続し、作成したアプリをインストールします。
【手順２】
作成したアプリケーションをタップして起動します。
【手順３】
「アップロード」ボタンをタップします。
【手順４】
アップロードが完了すると、ダイアログが表示されるので、「OK」ボタンをタップします。
