おばちゃんのつれづれ 主にマンガとweb

おばちゃんがライフハックや日常を書きます

コピペだけで!既存のHPをそのままアプリ化。初心者でも簡単。あと無料。

スマホandroidのアプリを難しいことは抜きにして、さくっと作ろう!のステップ2「既存のHPをmonacaでまるっとアプリ化」についての解説です。

monacaについていろいろ調べるとすごい難しいことがいっぱい書いてあるけど、ほんとはHPコピペだけでできます。すでにお店などのスマホ対応HPがあるならそれを流用してアプリにしてしまいましょう。

もくじ 

 初心者のためのアプリ作成全体の流れをチェックするならこちらの記事

obatyan1.hatenablog.com

 

必要な知識

まず前提として、htmlとcssでHPを作れることが必要です。スマホでストレスなく使えるスマホ対応デザインやレスポンシブデザインで作りましょう。超簡単なレスポンブデザインの方法は今後記事にしていきたいと思います。

これができない人はまずhtmlとcssをがんばりましょう。

詳しくはこちらの記事にまとめました。 

obatyan1.hatenablog.com

 

こういうやつとかで習うのもありです。

 

 

なにがなんだかわからん、そもそもアプリって何?という人はこちらの記事を参考にしてください。

 

obatyan1.hatenablog.com

 

 

 

店舗のアプリ一例

 こういう感じの。すでにあるHPにクーポン機能などをつけてアプリにすることが多いみたいですね。

appreach.net

 

 

アプリストア申請を見据えるコツ

ただアプリを作りたいだけならHPをまるっとコピペすればいいのですが、GooglePlayやAppleStoreなどのいわゆるアプリストアに掲載するアプリを作りたいならちょっとコツがいります。アプリストアに登録しない野良アプリだとタブレットにインストールするのがめんどくなるのでたぶんお店のお客さんはインストールしてくれないと思います。

HPをコピペするだけだと、リジェクトされる

アプリストアに掲載拒否されるのをリジェクトといいます。

AndroidAppleさんの言い分としては「普通にスマホから検索して表示できるHPだったらわざわざアプリにする必要ないじゃん」ということらしいです。

アプリにするとスマホのスタート画面にアイコンが表示されるので、HPをまるっとアプリ化すればわざわざ検索する手間がはぶけて便利、と思うんですがまぁだめなものはだめなので、新着通知とかクーポン機能とか予約機能とか、アプリならではの機能を盛り込んでおく必要があるそうです。

ですので流れとしてはHPをそのままアプリ化してその後monaca上で機能を付け加えるといいんじゃないでしょうか。

 

既存のHPをコピペでアプリ化する方法

てことで、まずは今あるHPをアプリにしてしまいましょう。

monacaアカウントを作る

2新規プロジェクトを作る

3コピペ

てな流れになります。

 

monacaアカウントを作る

monaca公式ページに行く

f:id:obatyan1:20170428133531j:plain

 

https://ja.monaca.io/

『今すぐ試す』を押してメアドとパスワードを入力するだけ。日本発のサービスなので安心の日本語対応です。

 

2新規プロジェクト作成

アプリに最低限必要な機能だけを集めた新規アプリを作ります。

 

monacaにログインすると左側にある『新規プロジェクトの作成』をクリック

f:id:obatyan1:20170428134952j:plain

いちばん上の奴を『作成』

f:id:obatyan1:20170428134958j:plain

名前はあとで変えられるのであんま気にしない。

f:id:obatyan1:20170428135005j:plain

 

できたー。

f:id:obatyan1:20170428135011j:plain

早速開いてみましょう。

 

2HPをコピペ

さくっとコピペしましょう。

1元のHPデータを用意

 今回は私がさくっと作ったサンプルHPをアプリ化してみます。

こんなやつ。

f:id:obatyan1:20170428135804j:plain

これのフォルダはこんな風になってます。

f:id:obatyan1:20170428140325j:plain

jsフォルダはjQuelyを使ってなければないかもしれません。cssフォルダとhtmlはあると思います。

 

また、こんな感じに

f:id:obatyan1:20170428140010j:plain

シンプルなサイトの場合cssはフォルダわけしてないことが多いかもしれませんが細かいことは気にしない。

 

monaca側の作業

 

さっき作ったプロジェクトを開く。

f:id:obatyan1:20170428135011j:plain

 

index.htmlの上で右クリック→ファイルのコピー

f:id:obatyan1:20170428141229j:plain

作りたいHPのhtmlの数だけhtmlを増やします。

f:id:obatyan1:20170428141525j:plain

さーてあとは<body>から下をコピペするだけ。

 

monacaのほうの<body>から下を削除して

f:id:obatyan1:20170428141944j:plain

 

HPのほうの<body>から下をコピペ。

f:id:obatyan1:20170428142205j:plain

これを繰り返してhtml部分をまるっとmonacaにコピペします。

 

そしたらcssもコピペ。

f:id:obatyan1:20170428142529j:plain

jsはドラック&ドロップでできちゃいます。

f:id:obatyan1:20170428143038j:plain

jsをドラック&ドロップする前にindexを選択しておくのがコツです。でないとへんなところにコピーされて後で移動する必要があります。

 

jsと同じ要領で画像フォルダも移動させます。

 

できあがり☆

コピペだけでアプリができてしまいました。

ほんとこれだけなので、ぜひやってみてください。

 

できあがったらプレビューで動作確認

試運転してみましょう。

f:id:obatyan1:20170428143541j:plain

まず、上のツールバーにある「保存」を押します。保存されるとタブの前にある「※」マークがなくなります。※印が全部なくなったら「プレビュー」をぽちっとすると右側に表示されます。まだ画像がないけどちゃんと動くようになりました。メニューボタンとかクリックしてちゃんと動くかどうかチェックしましょう。

 

 

関連記事

 

obatyan1.hatenablog.com

 

 

obatyan1.hatenablog.com