【Android】 mBaaSをWebサーバーとして使ってみよう！

概要

• ニフクラ mobile backend の『ファイルストア機能』をWebサーバーとして利用し、保存したWebページを、アプリ内WebViewで表示するサンプルプロジェクトです
• 簡単な操作ですぐに ニフクラ mobile backend の機能を体験いただけます

ニフクラ mobile backend って何？？

スマートフォンアプリのバックエンド機能（プッシュ通知・データストア・会員管理・ファイルストア・SNS連携・位置情報検索・スクリプト）が開発不要、しかも基本無料(注1)で使えるクラウドサービスです。

注1：詳しくはこちらをご覧ください

動作環境

• MacOS Monterey version 12.5
• Android Studio Chipmunk | 2021.2.1 Patch 2
• Pixel 2 - Android 13 (Simulator)
• SDK v2系だと動作しないので注意

※上記内容で動作確認をしています。

手順

1. ニフクラ mobile backend の会員登録・ログインとアプリの新規作成

• 下記リンクから会員登録（無料）をします
  • https://console.mbaas.nifcloud.com/signup
• 登録ができたら下記リンクからログインします
  • https://console.mbaas.nifcloud.com/
• 下図のように「アプリの新規作成」画面が出るのでアプリを作成します
  • 既に mobile backend を利用したことがある方は左上の「＋新しいアプリ」をクリックすると同じ画面が表示されます
• アプリ作成されるとAPIキー（アプリケーションキーとクライアントキー）が発行されます
• 「OK」をクリックすると管理画面が開かれます
• 参考 ：APIキーは Android Studio で作成するアプリに ニフクラ mobile backend を紐付けるために使用します。アプリ内でmBaaSを使用する場合には必ず必要になるものですが、 今回のサンプルアプリでは使用しません 。

2. GitHubからサンプルプロジェクトのダウンロード

• 下記リンクをクリックしてプロジェクトをMacにダウンロードします

• https://github.com/NIFCLOUD-mbaas/AndroidWebViewApp/archive/master.zip

• ダウンロードしたプロジェクトを解凍します

3. Webページの公開ファイルURLを作成する

• 2.でダウンロードしたプロジェクト内にある「setting」フォルダを開きます

• 次のファイル３点を確認します

  • index.html
  • mb.png
  • mb_function.png

• この３点のファイルを ニフクラ mobile backend の「ファイルストア」にアップロードします

• 管理画面を開き、「ファイルストア」＞「↑アップロード」をクリックします

• ３点のファイルをドラッグ＆ドロップします
• ファイルが表示されたことを確認して「アップロードする」をクリックします

• アップロードされたことを確認します
• 順番は違っていてもOKです！
• アップロードした「index.html」ファイルをクリックします
• 初期状態では「公開ファイルURL」が「無効」に設定されていますので、有効に設定する必要があります
• 「アプリ設定」をクリックします

• アプリ設定が開かれますので「公開ファイル設定」の「HTTPSでの取得」を「有効」に設定し、「保存する」をクリックしてください

• 再び「ファイルストア」に戻り、「index.html」をクリックします
• 「公開ファイルURL」が作成されていることが確認できます

• この時点でWebページが完成しています！ぜひクリックをして、webブラウザで表示してみてください
• 次はこのURLをアプリ内WebViewとして表示してみましょう！
• 「公開ファイルURL」は後ほど使用します

4. Android Studioでアプリを起動

• AndroidStudioを開いて、「Open」から、ダウンロードして解凍したプロジェクトを選択します

• 選択したプロジェクトが開かれます

5. 公開ファイルURLの設定

• AndroidStudio で WebviewActivity.kt を開きます

  • ディレクトリはデフォルトで「Android」が選択されていますので、「Project」に切り替えてから探してください

• YOUR_HTML_PUBLIC_URLの部分を書き換えます

• 先程 ニフクラ mobile backend の管理画面上で確認した index.html ファイルの「公開ファイルURL」を貼り付けます

  • このとき、ダブルクォーテーション（"）を消さないように注意してください

• 書き換え終わったら保存してください
• Windowsの場合、Ctrl + Sで保存できます。
• Macの場合、command + Sで保存できます。

6. 動作確認

• AndroidStudio でビルドを行います
• アプリを起動したら、真ん中の「INFORMATION」ボタンをクリックします
• 画面が遷移し、「公開ファイルURL」で作成したWebページが表示されます

解説

公開ファイルURLについて

公開ファイルURLは次のような構造になっています

https://mbaas.api.nifcloud.com/2013-09-01/applications/**APPLICATION_ID**/publicFiles/**fileName**

サンプルWebページについて

今回は index.html に２つの画像（mb.png, mb_information.png）を表示する形式で簡易的に作成していますが、JavaScript（jsファイル）を作成しファイルストアに保存んすることで、index.html にスクリプトを埋め込むことも可能です。

サンプルアプリについて

WebViewの表示は、WebviewActivity.javaに記述しています

public class WebviewActivity extends AppCompatActivity {

    private static final String TAG = "ShopActivity";
    private static final int REQUEST_RESULT = 0;
    Button _btn_back;
    WebView _webview;

    //index.htmlの公開URL
    String url = "YOUR_HTML_PUBLIC_URL";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_webview);

        //WebviewのURLを設定
        _webview = (WebView) findViewById(R.id.webviewInfo);
        _webview.loadUrl(url);

        //ボタンの処理を登録する
        _btn_back = (Button) findViewById(R.id.btnBack);

        //Btn Back 画面遷移の処理を実装
        _btn_back.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // MainActivityに戻る処理
                Intent intent = new Intent(getApplicationContext(), MainActivity.class);
                startActivityForResult(intent, REQUEST_RESULT);
            }
        });
    }
}