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

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

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

ニフティクラウド mobile backendを使ってみたいけれど、実際何をどうすればいいか分からないといった方は少なくないんじゃないかと思います。そこで簡単なデモを通しつつニフティクラウド mobile backendに触ってもらおうというのがこのシリーズになります。

まず今回はiOS向けの簡単なTodoアプリを作ってみたいと思います。ステップを踏んで進めていきますのでぜひチャレンジしてみてください。今回の記事は Developers.IO さんの StoryboardでTODOリストアプリを作ろう を大いに参考にさせていただいています。

必要なもの

まず必要なものをあげていきます。

  • Mac OSX
  • Xcode
  • Ruby(CocoaPods用)

この3つは必須になります。

ニフティクラウド mobile backendのアカウントを取得する

次にニフティクラウド mobile backendのユーザ登録を行います。もしアカウントを既にお持ちでしたら飛ばしてください。

まず最初にニフティクラウド mobile backendのWebサイトに行きます。そしてログインボタンをクリックします。

そうすると@niftyのログイン画面が表示されます。もし@niftyアカウントをお持ちでしたらログインしてください。お持ちでない場合は下の方にある @nifty会員に新規登録する(無料) をクリックしてください。

こちらは@nifty新規会員登録の画面です。ユーザ名、パスワード、連絡先メールアドレスを入力する必要があります。

入力が終わったらフォームの下にある 登録内容の確認へ をクリックします。

そうすると入力した内容が表示されますので、問題なければ 登録する ボタンをクリックしてください。

登録完了するとこのような画面が表示されます。別途入力してもらったメールアドレス宛に確認メールが送信されていますので、メールアドレス確認処理を行ってください。なお、ニフティクラウド mobile backendへのログインは既に行える状態になっています

初回ログイン

ユーザ登録が終わりましたら先ほどのログインボタンをクリックした画面に戻ります。

@niftyユーザ名、パスワードに先ほど登録したユーザ名、パスワードを入力して ログイン ボタンをクリックしてください。

ログインが成功すると、最初に利用規約が表示されます。内容を確認の上、以上の規約に同意する チェックボックスをつけて アカウント登録 ボタンをクリックしてください。

アカウント登録が終わるとそのままアプリの新規作成画面になります。

アプリ名として使えるのは半角英数字またはアンダースコア(_)になります。例えば今回はNCMBTodoとしています。アプリ名を入力して 新規作成 ボタンをクリックしてください。

アプリが無事作成されると アプリケーションキークライアントキー が生成されます。このキーは後で使いますので画面はこのまま残しておきましょう。もし OK ボタンを押したり、ウィンドウを閉じてしまった場合は 管理画面アプリ設定 の中にAPIキーで確認できます。

Xcodeで新規プロジェクト作成

次にXcodeを立ち上げて、新規プロジェクトを作成します。Create a new Xcode project をクリックします。

今回はMaster-Detail Applicationを選択します。選択した状態で Next ボタンをクリックします。

Product Nameを入力します。今回はアプリ名と合わせて NCMBTodo としています(異なる名称でも問題ありません)。 Next ボタンをクリックします。

適当なフォルダを選択して Create ボタンをクリックします。

無事作成が完了するとXcodeプロジェクトの画面になるかと思います。そうしたら一度Xcodeは終了します。

CocoaPodsでの作業

先ほど作成したXcodeプロジェクトの直下に Podfile というファイルを作成します。内容は次のようになります。

post_install do |installer_representation|
  installer_representation.project.targets.each do |target|
    target.build_configurations.each do |config|
      config.build_settings['CLANG_WARN_DIRECT_OBJC_ISA_USAGE'] = 'YES'
    end
  end
end

platform :ios, "7.0"
target "NCMBTodo" do
  pod 'NCMB-iOS-SDK', :podspec => 'https://gist.githubusercontent.com/moongift/b437832368e379528612/raw/71afc6a6766f57793c9f0bcd6f52991bcf86757d/NCMB.podspec'
end

target "NCMBTodoTests" do

end

ここで、NCMBTodoNCMBTodoTests となっている部分はXcodeプロジェクト名によって変わります。例えばABCであれば target “ABC” dotarget “ABCTests” do となります。

ファイルを作成したら、podコマンドを実行します。ターミナルアプリなどを立ち上げてXcodeプロジェクトのルートディレクトリに移動します。

CocoaPodsのインストール

もしCocoaPodsをインストールしたことがない場合は(インストール済みであれば飛ばしてください。)、

// rvmやrbenvを使っている場合
$ gem install cocoapods

または

// Mac OSX標準のRubyを使っている場合
$ sudo gem install cocoapods

を実行してください。そうすると次のような文字がずらずらと流れていきます。

$ gem install cocoapods
Fetching: i18n-0.6.9.gem (100%)
  :
Fetching: cocoapods-0.33.1.gem (100%)

CHANGELOG:

## 0.33.1

##### Bug Fixes

* Fix `pod spec lint` for `json` podspecs.  
  [Fabio Pelosin][irrationalfab]
  [#2157](https://github.com/CocoaPods/CocoaPods/issues/2157)
  :

Successfully installed i18n-0.6.9
  :
Successfully installed cocoapods-0.33.1
17 gems installed

CocoaPodsの実行

インストールが終わったら pod install を実行します。

$ cd path_to_xcode_project_root
$ pod install

そうすると次のようなログが流れてインストールが完了します。

$ pod install
Analyzing dependencies
Fetching podspec for `NCMB-iOS-SDK` from `https://gist.githubusercontent.com/moongift/b437832368e379528612/raw/71afc6a6766f57793c9f0bcd6f52991bcf86757d/NCMB.podspec`
Downloading dependencies
Installing Facebook-iOS-SDK (3.13.0)
Installing JSONKit (1.4)
Installing NCMB-iOS-SDK (1.2.6)
Generating Pods project
Integrating client project

[!] From now on use `NCMBTodo.xcworkspace`.

Xcodeを再度立ち上げ

CocoaPodsで管理しはじめたので、今度は xcworkspace ファイルを開きます。

Xcodeが立ち上がったら幾つか設定を行います。

32bit対応

ニフティクラウド mobile backend for iOSのSDKが今は32bitのみ対応となっていますので、その修正を行います。

NCMBTodoプロジェクト(Podsプロジェクトではない方)の Build Settings を開きます。

その中の Architectures を選択して Other… を選びます。

$(ARCHS_STANDARD) をダブルクリックして、$(ARCHS_STANDARD_32_BIT) に変更してください。

AppDelegate.mの修正

32bitへの修正が終わったら、 AppDelegate.m を開いて #import <NCMB/NCMB.h> を追記します。

#import "AppDelegate.h"
#import <NCMB/NCMB.h> // <- ここに追加します。

@implementation AppDelegate

そして didFinishLaunchingWithOptions でアプリケーションキーとクライアントキーを設定します。

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // Override point for customization after application launch.
    [NCMB setApplicationKey:@"your_application_key" clientKey:@"your_client_key"];  // <- ここに追加します。
    if ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPad) {

your_application_key と your_client_key はそれぞれアプリ作成時のアプリケーションキーとクライアントキーを設定します。もし分からない場合は、管理画面アプリ設定 を見て確認してください。

または

に表示されています。

ここまで終わったら一度ビルドしてみます。Table Viewが表示されれば問題ありません。

ボタンの削除

デフォルトのMaster-Detailの構成では行を追加するボタンを動的にナビゲーションバーに追加しています。今回はここをセグエを使って移動するようにします。

まず MasterViewController.m を開きます。その中の viewDidLoad が修正する部分になります。

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    self.navigationItem.leftBarButtonItem = self.editButtonItem;
    
    UIBarButtonItem *addButton = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:self action:@selector(insertNewObject:)];
    self.navigationItem.rightBarButtonItem = addButton;
    self.detailViewController = (DetailViewController *)[[self.splitViewController.viewControllers lastObject] topViewController];
}

この中のaddButtonの作成と、ナビゲーションアイテムへの追加が不要になります。修正後は次のようになります。

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    self.navigationItem.leftBarButtonItem = self.editButtonItem;
    
    self.detailViewController = (DetailViewController *)[[self.splitViewController.viewControllers lastObject] topViewController];
}

この状態でビルドすると、ボタンがなくなっているのが確認できると思います。

StoryBoardの修正

では次にタスクを追加するためのボタンを追加したいと思います。Main_iPhone.storyboard を開きます。

そして Navigation Controller を追加します。

追加するとこのようになります。

次に Bar Button Item を Master と書かれているビューに追加します。

追加したら、ボタンを選択して Attributes Inspector を表示します。

そして Identifier を Add にします。

追加したボタンを Control キーを押しながらドラッグし、先ほど追加した Navigation Controller と接続します。

出てきたツールチップで modal を選択します。

接続が完了するとこのようなセグエが追加されます。

さらにこのNavigation Controller から戻ってくる処理が必要です。追加した View Controller(Root View Controllerになっているかと思います)に Bar Button Itemを左右に一つずつ追加します。

追加したら左側のボタンを選んで、Attributes Inspector で Identifier を Cancel にします。右側のボタンは Save にします。

最後にTable Viewを修正します。ここではタスク名一つの入力しか行いませんので、Table View を固定にします。Table Viewを選択し、Attributes Inspector を表示します。

Table View > Content を Static Cells にします。行が3つになりますので、中央の一つを残して上下は削除します。

そして残したセルにText Fieldを追加します。

追加したら幅や大きさを適当に調整してください。

また、Attributes InspectorにてBorder styleを無し(一番左側)に設定します。

View Controllerの追加

追加したViewの処理を行うコントローラーを追加します。名前はAddTaskViewControllerとします。

アプリケーションのコードが入っているフォルダを右クリックして、New Fileを選択します。

出てきたダイアログで iOS > Cocoa Touch > Objective-C class を選択します。

次のステップで Class は AddTaskViewController と入力し、 Subclass of として UITableViewController を選択して Next ボタンを押します。

最後のダイアログで Create ボタンを押せば ファイルが作成されます。

ファイルが作成されたら、再度 Main_iPhone.storyboard を開きます。そして追加したView Controllerを選択します。そして Custom Class を AddTaskViewController とします。

アシスタントエディタによる修正

前半の最後として、アシスタントエディタでテキストフィールドのアウトレットとボタンのアクションを関連づけることにします。追加した View Controller を選択してアシスタントエディタを開きます。

Controlキーを押しながら Text Field を AddTaskViewController.mへドロップします。

NameをtxtTaskとしています。

@interface AddTaskViewController ()
@property (weak, nonatomic) IBOutlet UITextField *txtTask;
@end

このようなコードが追加されるはずです。

続けてControlキーを押しながら Cancel ボタンをドラッグして、Actionを作成します。Saveボタンも同じようにActionを作成します。名前はそれぞれtapCancelButton/tapSaveButtonとしています。

Cancelボタンをタップした時のアクションを次のように記述します。モーダル表示を閉じるアクションです。

- (IBAction)tapCancelButton:(id)sender {
  [self dismissViewControllerAnimated:YES completion:NULL];
}

同じくSaveボタンを押した時のアクションを次のように記述します。

- (IBAction)tapSaveButton:(id)sender {
    NSLog(@"Task is %@", self.txtTask.text);
}

これでビルドしてテストすると、+ボタンでタスク追加画面が開き、Cancelボタンで画面が閉じるようになりました。

さらにテキストフィールドに何か入力してSaveボタンをタップすると、その文字がログに出るようになっています。

2014-07-01 21:45:36.815 NCMBTodo[5679:60b] Task is テスト

ここまでで基本的な動きは完了です。次回はいよいよタスクをニフティクラウド mobile backend に追加したり、既存のデータを Table View に表示するところを解説します。

後編はこちらです。

f:id:mbaasblog:20180927104348p:plain