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

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

![331.png](https://qiita-image-store.s3.amazonaws.com/0/112032/de46064c-d190-1eba-e425-7ca0fbefad01.png)

## 公開ファイルURLのアプリ内での使い方
公開ファイルURLは下記のようなものが発行されます

```text:公開ファイル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](https://qiita-image-store.s3.amazonaws.com/0/112032/a1708928-3035-a131-b2ca-f72b6e59350f.png)
会員登録後、作成したアカウントでログイン（初回のみ、規約に同意）します。

## 2. mBaaSにアプリを作成
* アプリを新規作成します。（既にmBaaSをご利用いただいている方は、上の「＋新しいアプリ」をクリックすると下記画面が表示されます。）
* アプリ名を入力します　例）`publicFileApp`

![mBaaS準備2-1.png](https://qiita-image-store.s3.amazonaws.com/0/112032/e58ae371-8c88-1439-d840-c31dc2d8626b.png)

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

![332.png](https://qiita-image-store.s3.amazonaws.com/0/112032/4e261606-c2cb-fe18-4845-c37d269d534f.png)

## 3. mBaaSにファイルをアップロード
ファイルをアップロードします。（__注意__：無料アカウントの場合は、アップロードできるファイルのサイズに制限があります。詳細は[__こちら__](http://mb.cloud.nifty.com/price.htm)をご確認ください。）

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

![012.png](https://qiita-image-store.s3.amazonaws.com/0/112032/eff6c258-e687-773a-5ff8-4fe4389b23bd.png)

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

![013.png](https://qiita-image-store.s3.amazonaws.com/0/112032/5208c5e7-5b0b-e8ae-0599-75da2c3475cc.png)

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

![014.png](https://qiita-image-store.s3.amazonaws.com/0/112032/1d4c63e8-bfb1-1337-913c-7969b0629eeb.png)

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


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

![006.png](https://qiita-image-store.s3.amazonaws.com/0/112032/603c309f-657f-7dc4-d19a-2ddad685c0a5.png)

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

![007.png](https://qiita-image-store.s3.amazonaws.com/0/112032/bb816691-ed65-0790-2d33-98e2447b63b2.png)

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

![008.png](https://qiita-image-store.s3.amazonaws.com/0/112032/468b54dd-f09c-630c-7723-e06db72f9671.png)

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

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

## おまけ
公開ファイル機能を使わずに、ファイルストア内に設定したファイルをアプリ内で取得可能です。
Swiftで画像ファイルを取得するサンプルを用意しました！
https://github.com/natsumo/SwiftImageViewApp
![001.png](https://qiita-image-store.s3.amazonaws.com/0/112032/c94df0e5-255f-a2f9-04fe-69d0d97db840.png)