前編は画面の作成と、ボタンのアクション指定までを行いました。今回はいよいよ実際にニフティクラウド mobile backendとの連携に入っていきたいと思います。
タイトルの名前変更
まず前回に作業し忘れてしまったので、追加した Root View Controller のタイトル部分を変更しておきたいと思います。 Main_iPhone.stroyboard を開いて、追加したテーブルビューを選択します。
プロトコルの追加
参考にさせてもらっている StoryboardでTODOリストアプリを作ろう と同じように Delegate パターンによる実装を行っていきたいと思います。
まず、 AddTaskViewController.h を開きます。
#import <UIKit/UIKit.h> @protocol AddTaskViewControllerDelegate; // ← 追加します @interface AddTaskViewController : UITableViewController @property (weak, nonatomic) id<AddTaskViewControllerDelegate> delegate; // ← 追加します @end @protocol AddTaskViewControllerDelegate <NSObject> - (void)addTaskViewControllerDidCancel:(AddTaskViewController *)controller; // ← 追加します - (void)addTaskViewControllerDidFinish:(AddTaskViewController *)controller item:(NSString *)item; // ← 追加します @end
Delegate は様々なサイトで説明されていますが、あるオブジェクトに対するイベントを移譲して受け取るオブジェクトになります。今回の場合、 AddTaskViewControllerDelegate が Delegate になり、
- addTaskViewControllerDidCancel
- addTaskViewControllerDidFinish
の2つのメソッドが追加されました。この2つのメソッドを移譲先のオブジェクトで実装する形になります。
MasterViewController.mの編集
次に MasterViewController.m を編集して、Delegateで実装されているプロトコルを実装していきます。 MasterViewController.m を開きます。
#import "MasterViewController.h" #import "DetailViewController.h" #import "AddTaskViewController.h" // ← 追加 #import <NCMB/NCMB.h> // ← 追加 @interface MasterViewController () <AddTaskViewControllerDelegate> { // ← 修正 NSMutableArray *_objects; } @end
ついでに ニフティクラウド mobile backendのヘッダーファイルもインポートしておきます。これはタスクの追加処理で必要になります。
プロトコルの実装
ついで addTaskViewControllerDidCancel を実装します。これは Cancel ボタンをタップした時のイベントです。
- (void)addTaskViewControllerDidCancel:(AddTaskViewController *)controller { NSLog(@"addTaskViewControllerDidCancel"); // 画面を閉じるメソッドを呼ぶ [self dismissViewControllerAnimated:YES completion:NULL]; }
次に addTaskViewControllerDidFinish を実装します。ここではニフティクラウド mobile backendへアクセスしてデータを登録します。
- (void)addTaskViewControllerDidFinish:(AddTaskViewController *)controller item:(NSString *)item { NSLog(@"addTaskViewControllerDidFinish item:%@",item); // 保存するための配列の準備ができていない場合は、配列を生成し、初期化する if (!_objects) { _objects = [[NSMutableArray alloc] init]; } NCMBObject *obj = [NCMBObject objectWithClassName:@"TODO"]; [obj setObject:item forKey:@"todo"]; NSError *saveError = nil; [obj save:&saveError]; if (saveError == nil) { // 受け取ったitemを配列に格納する [_objects insertObject:item atIndex:0]; // TableViewに行を挿入する NSIndexPath *indexPath = [NSIndexPath indexPathForRow:0 inSection:0]; [self.tableView insertRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationAutomatic]; // 画面を閉じるメソッドを呼ぶ [self dismissViewControllerAnimated:YES completion:NULL]; }else{ } }
_objects は Table View に表示するための NSMutableArray となっています。ニフティクラウド mobile backendに保存する処理はとても簡単で、
NCMBObject *obj = [NCMBObject objectWithClassName:@"TODO"]; [obj setObject:item forKey:@"todo"]; NSError *saveError = nil; [obj save:&saveError];
これだけで実装されます。TODOというクラスのキー、todoに対して入力したタスク名を当てはめています。後は save メソッドを実行するだけです。処理は同期で、保存処理に失敗した場合はsaveErrorに対してエラーメッセージが入ってくる仕組みです。今回は簡単な判定処理しか書いていませんが、エラーがあった場合はエラーメッセージを出すなりの処理が必要です。
保存処理がうまくいったならば、_objectsに対してデータを追加し、Table Viewにもデータを追加しています。
AddTaskViewController.m の修正
Delegate 周りの追加が終わったので、最後に AddTaskViewController.m から呼び出す処理を実装します。
前回 AddTaskViewController.m に追加した tapCancelButton と tapSaveButton を修正します。
- (IBAction)tapCancelButton:(id)sender { [self.delegate addTaskViewControllerDidCancel:self]; } - (IBAction)tapSaveButton:(id)sender { [self.delegate addTaskViewControllerDidFinish:self item: self.txtTask.text]; }
どちらも Delegate で実装されているメソッドを呼び出しているだけです。
セグエ修正
Delegate の結びつけを行うため、画面遷移のタイミングで処理を追加します。
Main_iPhone.storyboard を開いて、まずはタスク詳細画面(DetailView)を選択して削除します。
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender { if ([[segue identifier] isEqualToString:@"ShowAddTaskView"]) { AddTaskViewController *addTaskViewController = (AddTaskViewController *)[[[segue destinationViewController]viewControllers]objectAtIndex:0]; addTaskViewController.delegate = self; } }
動作チェック
ここまでで実装は完了です。うまく動作するかテストしてみましょう。コンパイルして実行してみます。問題なければ起動するはずです。
管理画面での表示
管理画面 から見てみます。まずデータストアを開きます。
アプリ側でもそういったスキーマなどを意識することなく、自由にデータが追加できます。
ここまででTODOアプリが完成になります。いかがだったでしょうか。UI、ビュー周りの修正が多く、ニフティクラウド mobile backend 側で行った処理は少ないと感じられたのではないでしょうか。実際、フレームワークを読み込んでデータを保存したり取り出したりする処理はとても簡単です。
今回のソースコードは GitHub にアップロードしてあります。何か動かない部分があれば参考にしてください。
ニフティクラウド mobile backend はとても簡単に使い始められますので、ぜひ試してみてください!