Help us understand the problem. What is going on with this article?

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

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

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

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

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

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

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

https://github.com/koyhoge/ncmboard/

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

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

アプリの動作

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

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

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

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

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

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

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

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

プログラムの解説

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

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

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

メッセージの表示

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

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

メッセージの作成

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

MainActivity#showLoginDialog()
                int requestCode = REQ_CODE_FAB;
                startActivityForResult(new Intent(
                        MainActivity.this,
                        PostActivity.class
                ), requestCode);

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

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

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

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

nifcloud_mb
アプリ開発をよりスマートに、スピーディに!ニフクラ mobile backendの公式アカウントです。アプリ開発に必要な機能をクラウド上で提供するので、面倒なサーバー開発が一切不要に!
https://mbaas.nifcloud.com/
fjct
クラウド・IoT 関連サービスを開発・提供している企業です。(こちらは、富士通クラウドテクノロジーズの有志にて運営しております。)
https://fjct.fujitsu.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした