FJCT_ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

ニフティクラウド mobile backendを使ったTodoアプリを作ってみよう(iOS)(後編)

前編は画面の作成と、ボタンのアクション指定までを行いました。今回はいよいよ実際にニフティクラウド 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 を開きます。

開いたら、まず最初に +ボタンを生成した際に追加されていたメソッドである insertNewObject メソッドを削除します。

そして AddTaskViewController.h をインポートして、Delegateを指定します。

#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 に追加した tapCancelButtontapSaveButton を修正します。

- (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)を選択して削除します。

deleteキーを押します。

次にタスク入力画面を開くセグエを選択します。

Identifier を ShowAddTaskView とします。

ここまで終わったら、再度 MasterViewController.m を開いて prepareForSegue を次のように修正します。

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
    if ([[segue identifier] isEqualToString:@"ShowAddTaskView"]) {
        AddTaskViewController *addTaskViewController = (AddTaskViewController *)[[[segue destinationViewController]viewControllers]objectAtIndex:0];
        addTaskViewController.delegate = self;
    }
}

動作チェック

ここまでで実装は完了です。うまく動作するかテストしてみましょう。コンパイルして実行してみます。問題なければ起動するはずです。

起動したら、+ボタンを押します。そうすると下から競り上がってくる形でタスク入力画面が開きます。

タスクを入力したら Save ボタンを押します。ちょっと間があって最初の画面に戻り、タスクの一覧が更新されるはずです。

その際には入力したタスクが表示されると思います。

管理画面での表示

管理画面 から見てみます。まずデータストアを開きます。

まだ何も表示されていません。この状態でアプリ側でタスクを追加します。

そうするとこのようにクラス(左側の丸囲み)とデータ(右側の直線部)が生成されます。データストアはスキーマレスのデータベースとなっていますので、クラスはなければ自動で追加されます。あらかじめ作成しておく必要はありません。

アプリ側でもそういったスキーマなどを意識することなく、自由にデータが追加できます。


ここまででTODOアプリが完成になります。いかがだったでしょうか。UI、ビュー周りの修正が多く、ニフティクラウド mobile backend 側で行った処理は少ないと感じられたのではないでしょうか。実際、フレームワークを読み込んでデータを保存したり取り出したりする処理はとても簡単です。

今回のソースコードは GitHub にアップロードしてあります。何か動かない部分があれば参考にしてください。

ニフティクラウド mobile backend はとても簡単に使い始められますので、ぜひ試してみてください!

f:id:mbaasblog:20180927104348p:plain