ガジェニュー

~iPhone・Android,格安スマホ,ネットフリックスとか~

Monaca(モナカ)を使ってWEBサイトをそのままアプリにする方法

      2016/03/11    後で読む

IMG_5108.jpg 今回はMonaca(モナカ)というWEBサービスを利用して、今あるWEBサイトをそのままAndroid・iosアプリにする簡単な方法を書いていきます。

WEBサイトをアプリ化することによって再来訪率をアップさせたり、ストアからの流入があればと思って作成して見ました。

今回は、こちらを使ってWEBサイトをそのままアプリにするやり方を備忘録代わりに書いておきます。

SPONSORED LINKS

Monaca(モナカ)を使って今あるWEBサイトをそのままアプリに

今回使うサービスは「monaca(モナカ)」という無料でも利用できるWEBサービスです。monaca-website-app-1.png

LInk https://ja.monaca.io/

こちらのサービスを簡単に説明するとHTML5のハイブリッドアプリが簡単に作れるサービスです。

まずは、大まかな流れを書きます。

1.Monaca(モナカ)のアカウントの作成
2.プロジェクトの作成
3.HTMLの追加
4.アプリの設定とビルド
5.アプリストアにアップロード

こんな感じです。

また、大前提のお話としてアプリストアにアプリを公開するためにはiOSとandroidそれぞれで登録が必要です。

iOSアプリは年間11,800円の登録料が、androidは25ドルが初回の登録の際にかかります。

詳細はそれぞれの公式ページで確認を。

・Androidアプリ
https://support.google.com/googleplay/android-developer/answer/6112435?hl=ja

・iosアプリ
https://developer.apple.com/programs/jp/

それでは簡単に手順を追ってみます。

1.Monaca(モナカ)のアカウントの作成

monaca(モナカ)にアクセスをして会員登録をしましょう。

登録は無料で可能です。また、無料でも個人のちょっとした利用であれば十分使えます。

2.プロジェクトの作成

monaca-website-app-4.png ログイン後は新規のプロジェクトを作成しましょう。

monaca-website-app-3.png テンプレートの選択は「最小限のテンプレート」でOKです。

3.HTMLの追加

テンプレートの選択が終了したら中身をいじる形になります。

monaca-website-app-5.pngツリーから「index.html」を選択します。

今回はWEBサイトをそのまま表示するだけのアプリを作りますのでまずは<body>部分に下記のようにコードを追加です。

<iframe src="http://abcdefg.com/" seamless></iframe>

普通にiframeを使ってアプリ内に指定のURLを表示するだけですね。「seamless」で枠なしにします。

後はCSSなどで微調整です。

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

htmlに直接書き込んでもCSSに書き込んでもどちらでもいいと思います。

4.アプリの設定とビルド

これで保存すればあとはアップロードするためのデータを作成するだけです。

設定からアプリの基本的な設定をして

monaca-website-app-2.pngビルドに進むだけです。

詳細に関しては省きますので、下記マニュアルを確認しながら進めれば難しくはありません。

Linkhttp://docs.monaca.mobi/cur/ja/

5.アプリストアにアップロード

それぞれのストアに上記で作成したファイルのアップロード・アプリの詳細の設定などを行います。

こちらもしっかりとマニュアルがあるのでその通りに進めましょう。

・Androidアプリ
http://docs.monaca.mobi/cur/ja/manual/deploy/google_play/

・iosアプリ
http://docs.monaca.mobi/cur/ja/manual/deploy/appstore/

6.アプリの公開完了

以上で作業自体は完了です。

アプリアップロードが終わるとAndroidは2~3時間程で公開、iosは審査後に公開になります。

今回このやり方で作ったアプリは下記です。

ひよこ先生の格安スマホ教室

iosは年会費に見合う効果なしと判断し、Androidアプリのみの作成です。

ガジェニューは特にアプリ化するメリットが感じられなかったのでとりあえず、管理している他のサイトです。

まとめ

基本的にほとんど知識がない自分でも割と簡単にアプリの作成と公開ができました。

WEBサイトを持っている方はいい経験になるのでチャレンジしてみるのもいいかもしれませんね。

てな感じで。

 - WEBサイト運営, WEBサービス , , ,

  関連記事

icon_1r_192
【アクセス数報告】2015年5月のPVとアフィリエイトの収益とか

5月の印象はとしてはとにかく暑い!暑い!やってられません。 という印象でした。 …

PAK85_deskshiryou20131223500
メアドだけで無料でアンケートが作れる「Questant(クエスタント)」はテンプレートも豊富だった

みなさん一度はアンケートって作ったことありますよね? 実はアンケートを作るのって …

access201503
【アクセス数報告】2015年3月のPVとアフィリエイトの収益とか

3月も終わり今日から4月に突入。新年度ということで色々とイベントがある方いるかも …

キャプチャ3
タダのフリマアプリではない!あげる・もらえる「Garage Sale」(ガレージセール)

最近、スマホアプリのみでフリマができるサービスが多くなってきていると思いませんか …

accessreport201602-tb
【アクセス数報告】2016年1月のPVとアフィリエイトの収益とか

3月ですね。 今年は初めて青色申告と確定申告をやってみましたが意外と簡単にできま …

sumune-base
オリジナルデザインのスマホケースを売りたい人必見!「BASE」なら超簡単♪在庫リスクなし。

デザイナーさん・クリエイターの方々にとってはグッドニュースなのではないでしょうか …

MF
【無料家計簿アプリ】マネーフォワードの基本的な使いかた

微妙にこのブログからマネーフォワードに登録されている人がちょこちょこいるみたいな …

キャプチャ
簡単にWEBの予約ページが作れちゃう「Coubic」が面白い。

ちょっとした、イベントやセミナーをするときに皆さんってどんな風に予約の管理をして …

sum20141205
Twitterの連携アプリの認証は、きちんと知識を持ってやらないと痛い目みるよ

こんな感じの画面を皆さん見覚えありませんか? この画面は、自分のTwitterア …

smart-payment-sum
今広がりつつあるスマートペイメントサービスをまとめてみた【ガジェニュー】

スマートペイメントって言葉を皆さん知ってますか? アメリカではモバイルペイメント …

Loading Facebook Comments ...

Comment

  1. ことにー より:

    こんにちは。
    内に、を用い、自身のホームページURLにしましたが、monaca上ではプレビューが表示されませんでした。

    何か解決策はありますか?(o*。_。)oペコッ

    • Tatsuya Yabe より:

      こんにちは!httpsのサイトだとiframeでの呼出を許可していない場合があって、その場合はプレビュー出ない事がありました。仕事で利用しているサイトでその事象に当たりました。。

      正直全く詳しくないのでお力になれなそうです。。すいません。

      • ことにー より:

        返信ありがとうございます。プレビューが表示されないままビルドを行い。androidアプリではちゃんと表示されていました。iOSはページを表示できるものの、ページがスマートフォンの枠をはみ出してしまう感じでした。

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です