2016/11/10作成
- ニフクラ mobile backend の『ファイルストア機能』をWebサーバーとして利用し、保存したWebページを、アプリ内WebViewで表示するサンプルプロジェクトです。
- 簡単な操作ですぐに ニフクラ mobile backend の機能を体験いただけます★☆
スマートフォンアプリのバックエンド機能（プッシュ通知・データストア・会員管理・ファイルストア・SNS連携・位置情報検索・スクリプト）が開発不要、しかも基本無料(注1)で使えるクラウドサービス！
注1：詳しくはこちらをご覧ください
- Mac OS 12.5.1 (Monterey)
- Xcode Version 14.0
- iPhone X (iOS 16) ※上記内容で動作確認をしています。
1. ニフクラ mobile backend の会員登録・ログインとアプリの新規作成
- 上記リンクから会員登録（無料）をします。登録ができたらログインをすると下図のように「アプリの新規作成」画面が出るのでアプリを作成します
- アプリ作成されるとAPIキー（アプリケーションキーとクライアントキー）が発行されます
- 「OK」をクリックします
- 参考 ：APIキーはXcodeで作成するアプリに ニフクラ mobile backend を紐付けるために使用します。アプリ内でmBaaSを使用する場合には必ず必要になるものですが、今回のサンプルアプリでは使用しません。
- 下記リンクをクリックしてプロジェクトをMacにダウンロードします
- ObjcWebViewApp
-
2.でダウンロードしたプロジェクトに「setting」フォルダがあります
-
その中にある次の３点のファイルを確認します
-
index.html -
mb.png -
mb_function.png -
この３点のファイルを ニフクラ mobile backend の「ファイルストア」にアップロードします
-
ダッシュボードを開き、「ファイルストア」＞「↑アップロード」をクリックします
- ３点のファイルをドラッグ＆ドロップします
- 「アップロードする」をクリックします
- アップロードされたことを確認します
- 順番は違っていてもOKです！
- アップロードした「
index.html」ファイルをクリックします - 初期状態では「公開ファイルURL」が「無効」に設定されていますので、有効に設定する必要があります
- 「アプリ設定」をクリックします
- アプリ設定が開かれますので「公開ファイル設定」の「HTTPSでの取得」を「有効」に設定し、「保存する」をクリックしてください
- 再び「ファイルストア」に戻り、「
index.html」をクリックします - 「公開ファイルURL」が作成されていることが確認できます
- この時点でWebページが完成しています！ぜひクリックをして、webブラウザで表示してみてください
- 次はこのURLをアプリ内WebViewとして表示してみましょう！
- 「公開ファイルURL」は後ほど使用します
- ダウンロードしたフォルダを開き、「
ObjcWebViewApp.xcodeproj」をダブルクリックしてXcode開きます
WebViewController.mを編集します- 先程 ニフクラ mobile backend のダッシュボード上で確認した
index.htmlファイルの「公開ファイルURL」を貼り付けます
YOUR_HTML_PUBLIC_URLの部分を書き換えます- このとき、ダブルクォーテーション（
"）を消さないように注意してください！ - 書き換え終わったら
command + sキーで保存をします
- Xcode画面で左上で実行ボタン（さんかくの再生マーク）をクリックします
- Simulatorが起動したら、真ん中の「INFORMATION」ボタンをクリックします
- 画面が遷移し、「公開ファイルURL」で作成したWebページが表示されます
公開ファイルURLは次のような構造になっています
https://mbaas.api.nifcloud.com/2013-09-01/applications/**APPLICATION_ID**/publicFiles/**fileName**
今回はindex.htmlに２つの画像（mb.png, mb_information.png）を表示する形式で簡易的に作成していますが、JavaScript（jsファイル）を作成しファイルストアに保存することで、index.htmlにスクリプトを埋め込むことも可能です。
WebViewの表示は、WebViewController.mに記述しています
#import "WebViewController.h"
@interface WebViewController ()
// WebView
@property (weak, nonatomic) IBOutlet UIWebView *webView;
@end
// index.htmlの公開URL
NSString *const Url = @"YOUR_HTML_PUBLIC_URL";
@implementation WebViewController
- (void)viewDidLoad {
[super viewDidLoad];
// スクロールを有効にする
CGPoint point = self.webView.scrollView.contentOffset;
point.y = 0;
self.webView.scrollView.contentOffset = point;
self.webView.scrollView.scrollEnabled = YES;
// webViewに表示する
NSURL *nsurl = [NSURL URLWithString:Url];
NSURLRequest *request = [NSURLRequest requestWithURL:nsurl];
[self.webView loadRequest:request];
}- 同じ内容の【Swift】版もご用意しています
- https://github.com/NIFCloud-mbaas/SwiftWebViewApp