ニフクラ mobile backend を使ったAndroidのサンプルアプリを作ってみる(1) #Android

ニフクラ mobile backend (NCMB)のエバンジェリストをやってます小山です。
今回、NCMB が Android でいかに簡単に使えるかということを示すために、サンプリアプリを作ってみましたので 2回にわたって解説します。

作成したのは掲示板もどき Ncmboard

作ったのは掲示板とも呼べるような呼べないような…、単純なアプリです。ユーザ名/パスワードでログインして、書き込んだメッセージが時系列順で表示されるだけのシンプルなものです。

NCMB に対応させるのが簡単なことを示すのが目的なので、まずは NCMB を利用しないアプリのガワだけ作ってみましょう。

最近の Google は Android の UI ガイドラインとして「Material Design」を提唱していて、Android Studio でプロジェクトを新規作成する際の雛形にも Material Design 対応のものが含まれているので、今回はそれをベースに作ってみました。

なお今回作成したアプリのソースコードは、GitHub で公開しています。

non_ncmbrized と ncmbrized の2つのブランチがあって、それぞれNCMB使用前、使用後に対応しています。

今回は non_ncmbrized ブランチのコードを見ていきます。NCMB 対応の ncmbrized ブランチについては次回に解説します。

アプリの動作

まずは画面キャプチャーを示しながらアプリの動作を見ていきましょう。

アプリを起動すると、まずログインパネルが表れます。

ログインパネルにユーザ名とパスワード(今回はなんでもいい)を入れると

メッセージリスト画面が表示されますが、最初はまだメッセージはありません。

右下の「+」のFloating Action Buttonを押すと、メッセージの投稿画面が開きます。

何かメッセージを入力して、POSTボタンを押します。

メッセージリスト画面に先ほど入力した内容が表示されます。

再びメッセージを投稿すると、メッセージリストに追加されます。

プログラムの解説

まずはログインダイアログ

ログインダイアログを作るやり方はたくさんありますが、今回は AlertDialog.Builder を使って作っています。
こちらのブログに書かれていたやり方をほぼそのまま使っています。
http://raz-soft.com/android/android-show-login-dialog/

入力したログイン名とパスワードのチェックは、後で NCMB の機能を使って認証するものに置き換えるので、今回は何もしていません。入力されたユーザ名をそのまま使用します。

メッセージの表示

メッセージは MessageItemAdapter というアダプタを作成して、それを通して ListView にセットしています。このやり方だと各メッセージの表示方法をカスタムレイアウトを使って自由に変更できるので便利ですね。

MainActivity#onCreate()

        // setup message container
        messages = new ArrayList<>();
        messageAdapter = new MessageItemAdapter(this, 0, messages);
        messageView = findViewById(R.id.listView);
        messageView.setAdapter(messageAdapter);

メッセージの作成

メッセージを作成するために PostActivity という別画面を呼び出しますが、startActivityForResult() という便利なメソッドがあるのでそれを MainActivity から呼び出しています。何らかの結果を取得するために別の Activity を呼ぶ必要があるケースのためのメソッドなので、今回のケースにはぴったりです。

MainActivity#showLoginDialog()

        startActivityForResult(new Intent(
            MainActivity.this,
            PostActivity.class
        ), REQ_CODE_FAB);

メッセージは MainActivity 内 messages プロパティに保持していますが、アプリ終了時に SQLite に書き出す等の処理はしていません。ですので、アプリを起動する度に空のメッセージリストになります。
これは後で NCMB を使ってメッセージを保存する処理に置き換えるためです。

次はいよいよニフクラ mobile backend に対応

今回作成したサンプルアプリは、単独のアプリとしては一通りの機能も揃っていなくて全く使い物にならないくらいのものですが、データを入力してそれを表示するというシンプルな仕組みについては、このくらい単純な方が理解しやすいのではないかと思います。

次回は NCMB にアクセスする部分をこのアプリに追加して、ユーザの認証やデータの保存に NCMB を用いるように変更してみましょう。