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

#Android

#iPhone

橋本早樹

2014.04.23

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

巷で話題(?)の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クラスが強力でした！）

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