LoginSignup
4
5

More than 5 years have passed since last update.

【mBaaS】無料でWebページが作成できる「公開ファイル機能」

Last updated at Posted at 2016-11-22

はじめに

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

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

331.png

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

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

公開ファイルURL
https://mb.api.cloud.nifty.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にアクセスして、右上の「無料登録」をクリック>「個人会員として登録ご希望の方」>「@nifty会員の登録(無料)」をクリックし、必要な項目を入力し、会員登録(無料)を完了させます。 http://mb.cloud.nifty.com/ 321.png 会員登録後、作成したアカウントでログイン(初回のみ、規約に同意)します。

2. mBaaSにアプリを作成

  • アプリを新規作成します。(既にmBaaSをご利用いただいている方は、上の「+新しいアプリ」をクリックすると下記画面が表示されます。)
  • アプリ名を入力します 例)publicFileApp

mBaaS準備2-1.png

  • アプリ名を入力すると「新規作成」ボタンが活性化されるので、クリックします
  • APIキー(アプリケーションキーとクライアントキー)が発行されます
    • 今回は使用しません。
  • 「OK」ボタンをタップして閉じます
  • ダッシュボードが表示されます
    • mBaaSの管理画面です

332.png

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

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

  • 「ファイルストア」>「↑アップロード」をクリックします

012.png

  • アップロードするファイルを「ドラッグ&ドロップ」もしくは「ファイルを選択」をクリックして設定します
  • 下図のように表示されたら、「アップロード」をクリックします

013.png

  • 画像がアップロードされます

014.png

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

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

  • 初回のみ、公開ファイル設定を有効にする必要があります
  • 公開ファイルを作成する対象のファイルを選択します
    • 下の例はWebページを構成するファイル(html,png)をアップロードした場合です。この場合は、「index.html」が対象のファイルとなります。
  • 右側に詳細が表示されるので、「公開ファイルURL」>「アプリ設定」をクリックします

006.png

  • アプリ設定が表示されるので、「公開ファイル設定」>「HTTPSでの取得」を「有効」に設定し、「保存する」をクリックしてます。(初回のみ設定)

007.png

  • 設定が終わったら、「ファイルストア」に戻り、公開ファイルを作成する対象のファイルを選択します
  • 公開ファイルURLが発行されました!
    • クリックしてブラウザで表示してみましょう。表示されれば完成です!

008.png

おわりに

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

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

Swiftでサンプルを作ってみました!
https://github.com/natsumo/SwiftWebViewApp
単なるWebViewを表示するだけのアプリと、ファイルのサンプルを付けたコンテンツです
作成した公開ファイルURLを設定して直ぐに確認できます

おまけ

公開ファイル機能を使わずに、ファイルストア内に設定したファイルをアプリ内で取得可能です。
Swiftで画像ファイルを取得するサンプルを用意しました!
https://github.com/natsumo/SwiftImageViewApp
001.png

4
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
5