[MBaaS][NCMB][Android]えっ!? こんなに簡単にサーバ連携アプリが作れるの!?

巷で話題(?)のmBaaS。海外ではParse, Mobile Backend Starter(Google Cloud Platform), Windows Azure(Microsoft's Cloud Platform)などがありますが、国内でも ニフティクラウド mobile backend, appiaries, Kii Cloud などなど続々と登場しているようです。

今回は、ニフティクラウド mobile backend(NCMB)に触れてみたので、使用感などを記述していきたいと思います。 本投稿はAndroid SDKについて記載しています。

Parseについては「MBaaS な Parse で遊ぼう シリーズ」にて掲載されているので、是非こちらもご覧ください。

MBaaS な Parse で遊ぼうシリーズ

MBaaSとは

簡潔に言うと、サーバサイドでの処理（ユーザ管理、push通知、データストア、ファイル保存など）がサーバレスで、クライアント側でコードを書くだけで、簡単に実装できてしまうサービスのことです。 今までは、サーバの準備や専門的な知識がないとできなかったことですが、なんと無料で（制限はありますが）、なおかつ簡単にできてしまいます！

NCMB提供機能

NCMBでは、上記のような機能が利用できます。(2014/4/21現在)

無料でできること

わりと後発でのサービス開始でしたが、無料でリクエスト数 200万/月, push通知 200万/月, ストレージ5GBはかなり魅力だと思います。

対応SDK

Android,iOS,JavascriptのSDKが対応しています。

他のサービスよりは少ないですが、徐々に対応してくれることを期待したいですね。

管理画面、サポートが日本語

この辺りは一長一短があると思いますが、日本語で対応してくれるのは安心ですね。管理画面も日本語なので日本企業への導入は、わりとスムーズにできるのではないでしょうか。

また、サポートはExperプランからで、なおかつプランのダウングレードはできないようなので、その辺は注意が必要です。

Android実装

前置きはこのくらいにして、早速実装してみましょう。

今回は、メール認証でのユーザログインを実装してみたいと思います。

NCMBへのログイン

以下のサイトの「ログイン」からniftyIDでログインします。

ニフティクラウド mobile backend

ログインしたらアプリ名の入力画面が表示されます。今回はサンプルとしてSnsSampleを作成します。

アプリケーションキーとクライアントキーは、よくあるように後で使うのでメモっておいてください。 OKを押すと、以下のようなダッシュボード画面が表示されます。

ダッシュボード画面では、リクエスト数やプッシュ数がグラフで表示されているので、わかりやすいですね。

メール設定

先ほどのダッシュボード画面の、「アプリ設定」-「会員認証設定」を選択すると、以下の画面が表示されます。 以下画面で「ID/パスワード認証の許可」、「メールによる会員認証の許可」を「許可する」にチェックして「保存」します。

この画面では、他にも「送信メールアドレスの変更」、「メールの文面」、「パスワード変更ページなどのカスタマイズ」が行えます。このあたりも無料でできるのが素敵ですね。

ユーザログインに対するmBaaSの設定は以上です！たったのこれだけ！技術の進歩はすごい！

Androidでのユーザログイン実装

つづいてAndroidにログイン機能を組み込んでみましょう。(事前に新規アプリケーションプロジェクトを作成しておいてください。)

まずはここからSDKをダウンロードします。

NCMB Adnroid SDK

解凍して作成されたNCMB.jarをAndroidプロジェクトのlibsフォルダにコピーしておきます。

つづいてManifestファイルに以下を追加しておいてください。

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

次にサンプル用のレイアウトを作成します。

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <EditText
        android:id="@+id/UserName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Name"
        />
    
    <EditText
        android:id="@+id/MailAddress"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="E-mail"
        />
    
    <EditText
        android:id="@+id/Password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Password"
        />
    
    <Button 
        android:id="@+id/Button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:text="Sign up"
        />

</LinearLayout>

まぁ、サンプルなのでこんな感じで。。。

MainActivity.java はこんな感じになります。

public class MainActivity extends Activity {

    private EditText mUserName;
    private EditText mEmail;
    private EditText mPassword;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        mUserName = (EditText)findViewById(R.id.UserName);
        mEmail = (EditText) findViewById(R.id.MailAddress);
        mPassword = (EditText) findViewById(R.id.Password);
        
        Button btn = (Button) findViewById(R.id.Button);
        btn.setOnClickListener(new View.OnClickListener() {
            
            @Override
            public void onClick(View v) {
                
                // ここに Sign up 処理
                
            }
        });
        
        
    }

}

つづいてボタンの処理を記述します。

        NCMB.initialize(getApplication(), "アプリケーションキー", "クライアントキー");
        
        Button btn = (Button) findViewById(R.id.Button);
        btn.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {

                // ここに Sign up 処理

                NCMBUser user = new NCMBUser();
                user.setUsername(mUserName.getText().toString());
                user.setEmail(mEmail.getText().toString());
                user.setPassword(mPassword.getText().toString());

                // 既定値以外のフィールドに値を設定
                // user.put("phone", "123-456-7890");
                
                user.signUpInBackground(new SignUpCallback() {
                    @Override
                    public void done(NCMBException e) {

                        if (e == null) {
                            // Sign up 成功！
                            Toast.makeText(getApplication(), "成功！", Toast.LENGTH_SHORT).show();

                        } else {
                            // Sign up 失敗！
                            Toast.makeText(getApplication(), "失敗！", Toast.LENGTH_SHORT).show();
                        }
                    }
                });
            }
        });

NCMB.initialize()の引数には、先ほどメモしたアプリケーションキーとクライアントキーを入れます。 ちなみにParseのinitialize()は２回目を呼ぶと落ちましたが、NCMBのinitialize()は何回呼んでも大丈夫でした。（まあ、どちらも1回でいいんですが...） OnClick内では、new NCMBUser()としてNCMBUserクラスのインスタンスを作成し、setUsername(),setEmail(),setPassword()でそれぞれの値をセットします。これはNCMB側でデフォルトで作成されている値で、他にも自由に値を設定できます。任意の値をセットする場合はput()を使用します。

後は、signUpInBackground()を実行すると、非同期でサーバにアップロードしてくれます。SignUpCallback()で非同期処理のイベントを受け取ることができます。

とりあえずここまできたら実行してみましょう。

このような画面が表示されたら、ユーザ名、パスワードと自分の使っているメールアドレスを入れてみましょう。

成功！のToastが表示されるとすぐに「ユーザ登録につきまして(アプリ名：〜)」というメールが届きます！ たったのこれだけで、メールアドレス認証でのユーザ登録機能が実装できてしまうわけです！

NCMBの管理画面で会員情報を見てみると、ちゃんと追加されていることがわかります。 ちなみにmailAddressConfilmは、先ほどのメール内のリンクをクリックしたかどうかです。 （メールアドレスが使用されているかの確認）

ユーザ登録機能が実装できたので、つづいてログイン機能をつけてみましょう。 先ほどの activity_main.xml にログイン用のViewを追加していきましょう。

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    
    〜　省略　〜
    
    
    <EditText
        android:id="@+id/login_UserName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Name"
        />
    
    <EditText
        android:id="@+id/login_Password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Password"
        />
    
    
    <Button 
        android:id="@+id/login_Button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:text="Login"
        />

</LinearLayout>

つづいて、先ほどと同じようにMainActivity.javaに追加します。

MainActivity.java

public class MainActivity extends Activity {

    private EditText mUserName;
    private EditText mEmail;
    private EditText mPassword;

    
    private EditText mLoginUserName;
    private EditText mLoginPassword;

    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        // NCMB初期化
        NCMB.initialize(getApplication(), "アプリケーションキー", "クライアントキー");

        
        〜　省略　〜
        

        mLoginUserName = (EditText) findViewById(R.id.login_UserName);
        mLoginPassword = (EditText) findViewById(R.id.login_Password);
        
        Button loginBtn = (Button) findViewById(R.id.login_Button);
        loginBtn.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {

                // ここに Login 処理

                String userName = mLoginUserName.getText().toString();
                String userPassword = mLoginPassword.getText().toString();

                // ログイン
                NCMBUser.logInInBackground(userName, userPassword, new LogInCallback() {
                    @Override
                    public void done(NCMBUser user, NCMBException e) {
                        if (e == null) {
                            
                            Toast.makeText(getApplication(),  "ログイン成功", Toast.LENGTH_SHORT).show();
                        } else {
                            
                            Toast.makeText(getApplication(),  "ログイン失敗！", Toast.LENGTH_SHORT).show();
                        }
                    }
                });
            }

        });
    }
}

ログインの場合は、logInInBackground()を実行します。引数はユーザ名とパスワード、あとはログイン後の処理を行うLoginCallbackです。

それでは実行してみましょう。

下部のName,Passwordに先ほどユーザ登録したアカウントを入力して、Loginボタンを押してみましょう。 ログイン成功！と表示されたら成功です！　こちらも簡単に実装できてしまいましたね。

ちなみに、先ほどのmailAddressConfilmを使用してメール内のリンクを、クリックしたかどうかチェックしたい場合は、以下のように変更すればOKです。

                // ログイン
                NCMBUser.logInInBackground(userName, userPassword, new LogInCallback() {
                    @Override
                    public void done(NCMBUser user, NCMBException e) {
                        if (e == null) {

                            // Email確認
                            if (user.getBoolean("mailAddressConfirm")) {

                                // OK
                                Toast.makeText(getApplication(), "ログイン成功", Toast.LENGTH_SHORT).show();

                            } else {
                                // NG(Email認証されてない)
                                Toast.makeText(getApplication(), "メール認証エラー", Toast.LENGTH_SHORT).show();

                            }

                        } else {
                            
                            Toast.makeText(getApplication(), "ログイン失敗！", Toast.LENGTH_SHORT).show();
                        }
                    }
                });

まとめ

サーバレスで"無料"で"簡単"にサーバ連携アプリが作れてしまうMBaaSは非常に魅力的です。 いままで、サーバ構築が難しくてサーバ連携アプリを作れなかった人も、MBaaSでは簡単にできてしまうので アプリの幅が一気に広がるのではないでしょうか。

また、ParseとNCMBを触れてみてた感想としては、ログインなどのユーザ管理系機能は、ほぼ同等のような気がします。 ただ、今回は記載していませんがデータストアやファイル管理については、いろいろと違いがありました。 （その辺りも後々掲載していきたいです。Android開発者としては、特にParseのParseQueryAdapterクラスが強力でした！）

国内では、まだ情報が多くないですが非常に魅力的なサービスなので、みんなで盛り上げていきましょう！ 以上です。