「Monaca」でWebサイトをiOSアプリ化する手順

悲しいお知らせ

この記事を読む前に、下記の記事を読まれてください。

この記事の通りにアプリを作成しても、App Storeの審査で却下されることをあらかじめお伝えいたします。。。

https://theshare.info/adwords/スマホアプリ/webサイトをiframeでアプリにしてapp-storeに審査申請した結果_i991

「Monaca」でWebサイトをiOSアプリ化する手順

Webサイトを簡単にネイティブアプリにして、App StoreやAndroidマーケットに公開できるツールが 「Monaca（もなか）」です。

iOSアプリ, Androidアプリどちらも作成・公開可能。

Monacaには14日間のトライアルがありますので、無料で試せます。ただしストアに公開する工程を使うには有料プランへの申し込みが必要です。

また、現在動作確認がされているブラウザはChromeのみです。ブラウザ上で完結するので、PCはWindowsでもMacでも使えます。

MonacaでWebサイトをアプリ化してapp storeに公開申請する流れを紹介します。

Monacaに登録

https://ja.monaca.io

まずは登録してログインします。

Webサイトをアプリにする

★１　プロジェクトの作成

1. 新規プロジェクトを作成
2. 最小限のテンプレート　を選択
3. アプリ名を入力して作成

★２　プロジェクトを編集

１．左側のエリアで編集したいプロジェクトを選択

２．右側のエリアでクラウドIDEで開くをクリック

３．bodyタグの内容を削除

４．bodyタグの中に下記の内容を追記

<iframe src="https://theshare.info/forum/" seamless></iframe>

• https://theshare.info/forum/　の部分はあなたのWebサービスのURLに置き換えてください。

５．CSSの内容を追記

style.cssに下記の内容を追記

 html,body{
 width:100%;
 height:100%;
 padding:0;
 margin:0;
 }
 iframe{
 width:100%;
 height:100%;
 padding:0;
 margin:0;
 border:0;
 }

以上で編集は終わりです。コピペだけなので早くて5分程度です。

動作確認

1. Monacaのシミュレータービルド、デバッグビルドなどの機能などを使って動作確認します。
2. ストアに申請するための画面キャプチャを撮ります。

アプリをapp store で公開するための設定

1. 上部の「設定」メニューからiOSアプリ設定を選択。
2. アプリケーション名：アプリの名前に変更。
3. App ID：アプリに固有のIDをつけます。. (ピリオド)を必ず１つは使用します。
4. それ以外は必要があれば変更
5. 保存

アプリの「ビルド」

アプリデータの作成と設定が終わりました。

アプリをスマートフォンなどで使うために「ビルド」という作業が必要です。

0.　事前準備：ビルドに必要な設定を行う

最初は下記のメッセージが出ると思います。秘密鍵と証明書のMonacaへのインポートが必要です。

証明書が登録されていません。
プロビジョニングプロファイルが登録されていません。

ビルドのための準備は下記のページをご覧ください。

https://theshare.info/adwords/web制作/プログラミング/monacaiosのビルドのための準備_i977

1.　ビルド＞iOSアプリのビルド　を選択