WordPressで作ったサイトを簡単にアプリ化する方法

2020.02.18

Monacaに登録しよう｜プログラムがよくわからない方でも安心

MonacaとはHTML5ハイブリッドアプリ開発プラットフォームで、androidとIOSの両方のアプリを作ることができます。

HTML5ハイブリッドアプリ開発プラットフォームという言葉だけでちょっと「難しそう…」と思ってしまった方もいるでしょうが安心してください。

WordPressで作ったサイトを単純に表示する為のアプリであれば、プログラムの知識がなくてもアプリを作ることができます。

Monacaは有料プランもありますが、簡単なアプリを作るだけであればフリープランで十分対応できますので、まずフリープランで登録してみましょう。

Monacaにログインしたらまずは「新しいプロジェクトを作る」をクリックします。

テンプレートの種類は「最小限のテンプレート」を選択。

「プロジェクトの情報」にはアプリの名前を登録しましょう。

新しいプロジェクトを作ったらクラウドIDEを開きます。いろいろと難しそうな画面が開くと思いますが、HTMLを触ったことがある方であればそれほど混乱はしないでしょう。

クラウドIDEを開いたら、index.htmlのファイルに下記のコードをbody内に記載します。

<iframe src="https://sample.com/"></iframe>

Sample.comの部分にアプリに表示させたいサイトのURLを記載して保存しましょう。

次にstyle.cssに次のコードを記載します。

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

コードを記載したらあとは実際にアプリにしてみるだけです。「ビルド」の項目を選択してandroidアプリのビルドをしてみましょう。

実際にGoogle Playストアに出すためには、他にも色々やることがあるのですが、今回はあくまでもサイトを表示するアプリを作ってみるだけですので、「デバッグビルド」を選択します。

あとは、ビルドが完了したら実際にお持ちのandroid端末にアプリを入れてみて動きを確認して完成です。

今回はアプリ開発の専門的な知識がなくても、アプリを簡単に作る方法をご紹介しました。

サイトをそのまま表示するだけのアプリではありますが、アプリ開発に挑戦してみたいと思っている方の最初の後押しになれば幸いです。

IOSアプリに関しては、androidアプリと同じような手順で作れるのですが、ビルドする時にAppleの証明書が必要など、少し手順が複雑になるので今回はandroidアプリのみとさせて頂きます。

実際にGoogle Playストアにアプリをリリースすることもできますので、ぜひ挑戦してみてください。

また、Webもりではアプリの作成相談も受け付けておりますので、是非お気軽にご連絡ください。