ニフティクラウド mobile backendを使ってみたいけれど、実際何をどうすればいいか分からないといった方は少なくないんじゃないかと思います。そこで簡単なデモを通しつつニフティクラウド mobile backendに触ってもらおうというのがこのシリーズになります。
まず今回はiOS向けの簡単なTodoアプリを作ってみたいと思います。ステップを踏んで進めていきますのでぜひチャレンジしてみてください。今回の記事は Developers.IO さんの StoryboardでTODOリストアプリを作ろう を大いに参考にさせていただいています。
必要なもの
まず必要なものをあげていきます。
- Mac OSX
- Xcode
- Ruby（CocoaPods用）
この3つは必須になります。
ニフティクラウド mobile backendのアカウントを取得する
次にニフティクラウド mobile backendのユーザ登録を行います。もしアカウントを既にお持ちでしたら飛ばしてください。
初回ログイン
ユーザ登録が終わりましたら先ほどのログインボタンをクリックした画面に戻ります。
Xcodeで新規プロジェクト作成
適当なフォルダを選択して Create ボタンをクリックします。
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
ここで、NCMBTodo、NCMBTodoTests となっている部分はXcodeプロジェクト名によって変わります。例えばABCであれば target “ABC” do、 target “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を再度立ち上げ
32bit対応
ニフティクラウド mobile backend for iOSのSDKが今は32bitのみ対応となっていますので、その修正を行います。
$(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が表示されれば問題ありません。
ボタンの削除
まず 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 を開きます。
View Controllerの追加
追加したViewの処理を行うコントローラーを追加します。名前はAddTaskViewControllerとします。
アプリケーションのコードが入っているフォルダを右クリックして、New Fileを選択します。
アシスタントエディタによる修正
前半の最後として、アシスタントエディタでテキストフィールドのアウトレットとボタンのアクションを関連づけることにします。追加した View Controller を選択してアシスタントエディタを開きます。
@interface AddTaskViewController () @property (weak, nonatomic) IBOutlet UITextField *txtTask; @end
このようなコードが追加されるはずです。
続けてControlキーを押しながら Cancel ボタンをドラッグして、Actionを作成します。Saveボタンも同じようにActionを作成します。名前はそれぞれtapCancelButton/tapSaveButtonとしています。
- (IBAction)tapCancelButton:(id)sender {
[self dismissViewControllerAnimated:YES completion:NULL];
}
同じくSaveボタンを押した時のアクションを次のように記述します。
- (IBAction)tapSaveButton:(id)sender {
NSLog(@"Task is %@", self.txtTask.text);
}
これでビルドしてテストすると、+ボタンでタスク追加画面が開き、Cancelボタンで画面が閉じるようになりました。
2014-07-01 21:45:36.815 NCMBTodo[5679:60b] Task is テスト
