ニフクラ mobile backend（mBaaS）お役立ちブログ

スマホアプリ開発にニフクラ mobile backend（mBaaS）。アプリ開発に役立つ情報をおとどけ！

アプリ内表示画像やWebViewに使える「公開ファイル機能」とは？

ファイルストア Android iOS mBaaS活用術 Objective-C Swift(Obj-Cブリッジ)

はじめに

 

アプリ内に表示する画像やWebViewに表示するデータの更新に最適

ニフクラ mobile backend (mBaaS) の「ファイルストア」機能に『公開ファイル』機能というものがあります。この機能を使うと、ファイルストアに保存したpng, jpgなど画像ファイルはもちろん、HTMLの公開ファイルURLを作成することができるので、自前でサーバーを用意しなくても、画像を公開できたり、Webページを作成できたりします。しかも無料で使えるんです！！mBaaSを使えば、クラウド側に保存データを編集するだけで、アプリ内データも更新されるため、アップデートも必要ありません！

331

 

公開ファイルURLのアプリ内での使い方

公開ファイルURLは下記のようなものが発行されます

https://mbaas.api.nifcloud.com/2013-09-01/applications/YOUR_APPLICATION_ID/publicFiles/YOUR_FILE_NAME
  • 以下の部分はファイル毎に異なります
    • 「YOUR_APPLICATION_ID」：mBaaSで作成するアプリごとに割り振られる「アプリID」が入ります
    • 「YOUR_FILE_NAME」：mBaaSにアップロードしたファイル名が入ります（例 mBaaS.png）

mBaaSにアップロードしたファイルはすべてこのようなURLを発行することができます。これをアプリ内のWebViewに設定することで利用が可能です。では実際に公開ファイルURLを発行して見みましょう。

「公開ファイルURL」の作り方

 

作業手順

  1. mBaaSアカウント取得
  2. mBaaSにアプリを作成
  3. mBaaSにファイルをアップロード
  4. ファイルの公開ファイルURLを取得と確認

 

1. mBaaSアカウント取得

  • 下記URLにアクセスして、右上の「無料登録」をクリック＞「SNS IDの登録（無料）」をクリックし、必要な項目を入力し、会員登録（無料）を完了させます。

https://mbaas.nifcloud.com/

321

会員登録後、作成したアカウントでログイン（初回のみ、規約に同意）します。

2. mBaaSにアプリを作成

  • アプリを新規作成します。（既にmBaaSをご利用いただいている方は、上の「＋新しいアプリ」をクリックすると下記画面が表示されます。）
  • アプリ名を入力します　例）publicFileApp
mBaaS_App
  • アプリ名を入力すると「新規作成」ボタンが活性化されるので、クリックします
  • APIキー（アプリケーションキーとクライアントキー）が発行されます
    • 今回は使用しません。
  • 「OK」ボタンをタップして閉じます
  • ダッシュボードが表示されます
    • mBaaSの管理画面です
mBaaS_dashboard

 

3. mBaaSにファイルをアップロード

ファイルをアップロードします。（注意：無料アカウントの場合は、アップロードできるファイルのサイズに制限があります。詳細はこちらをご確認ください。）

  • 「ファイルストア」＞「↑アップロード」をクリックします
004
  • アップロードするファイルを「ドラッグ＆ドロップ」もしくは「ファイルを選択」をクリックして設定します
  • 下図のように表示されたら、「アップロード」をクリックします
013
  • 画像がアップロードされます
014

例では、「mBaaS_image.png」という画像ファイルをアップロードしましたが、Webページを作る場合、htmlファイル・画像ファイル・JavaScriptファイルなど、Webページを作る上で必要なファイル、すべてをアップロードしてください。

4. ファイルの公開ファイルURLを取得と確認

  • 初回のみ、公開ファイル設定を有効にする必要があります
  • 公開ファイルを作成する対象のファイルを選択します
    • 下の例はWebページを構成するファイル（html,png）をアップロードした場合です。この場合は、「index.html」が対象のファイルとなります。
  • 右側に詳細が表示されるので、「公開ファイルURL」＞「アプリ設定」をクリックします
006
  • アプリ設定が表示されるので、「公開ファイル設定」＞「HTTPSでの取得」を「有効」に設定し、「保存する」をクリックしてます。（初回のみ設定）
007
  • 設定が終わったら、「ファイルストア」に戻り、公開ファイルを作成する対象のファイルを選択します
  • 公開ファイルURLが発行されました！
    • クリックしてブラウザで表示してみましょう。表示されれば完成です！
008

 

おわりに

アプリ内に設定した公開ファイルURLはアプリのアップデートをしない限り変更はできません。ただし、mBaaS上にアップロードしているファイルの更新を行えば、簡単にアプリ内の画像、Webページの更新が可能です！特にmBaaSなら、アップロードしているファイルと同じ名前で更新ファイルを作成し、アップロードするだけで更新処理が行えます。簡単に更新できてしまうので「失敗しないか心配…」と思う方もいらっしゃるかとは思いますが、その場合も大丈夫です！mBaaS上に別のテスト用アプリを作成し、そちらで更新し、公開ファイルURLをブラウザで実行してから本番アプリで実行することで安心して更新ができます◎

アプリ内WebViewで今すぐ試してみたい方へ

Swift / Objective-C / Android でサンプルを作ってみました！ 単なるWebViewを表示するだけのアプリと、ファイルのサンプルを付けたコンテンツですが、 作成した公開ファイルURLを設定して直ぐに確認できます◎

サンプル▼ Swift / Objective-C / Android / Kotlin

おまけ

公開ファイル機能を使わずに、ファイルストア内に設定したファイルをアプリ内で取得可能です。 画像ファイルを取得するサンプルを用意しました！ご活用ください。 サンプル▼ Swift / Objective-C / Android / Objective-C / Kotlin

001