Monacaを使って1時間でアプリを作る方法。名前を表示するアプリを作ろう。

Monacaを使って1時間でアプリを作る方法。名前を表示するアプリを作ろう。

Monacaに登録して1時間でアプリを完成する方法を紹介します。アプリのビルドまで行うので、自分の実機にインストールすることも可能です。HTML5、CSS、JavaScriptを知らなくても大丈夫なので、ぜひ挑戦してみてください。

Monacaに登録して、Monacaデバッガーをインストール

まずはMonacaに登録します。メールアドレスとパスワードを入力するだけです。Monacaに登録したら、App StoreかGoogle PlayからMonacaデバッガーをダウンロードしてインストールします。ここまでで準備は完了です。

Onsen UI V2 JS Minimumで新規プロジェクトを作成

左上の緑色のボタン、新規プロジェクトを作成を押します。様々なテンプレートが選べますが、一番シンプルなOnsen UI V2 JS Minimumを選びましょう。1ページのみで動作するアプリはすべてこのテンプレートでOKです。自分もこれしか使っていません。

プロジェクト名には名前を表示するアプリ。説明には適当でいいです。あとはプロジェクトを作成するをクリックしましょう。ここまでで30%は完成しています。

Onsen UI V2 JS Minimumのテンプレートを使えば、オリジナルの時計やカレンダーのアプリを簡単に作ることができます。くだらない簡単なアプリから開発を始めるのがいいです。まずは、一つ何かをリリースする。それが大切です。

Advertisement

HTMLを編集して名前を表示させる

名前を表示するアプリのプロジェクトを開くと、コードが表示されるはずです。表示されているファイルはindex.htmlです。名前を表示させるだけなので、<body>から</body>の間に自分の名前を入力しましょう。入力したら左上のファイルからすべて保存すれば、右下のプレビューに自分の名前が表示されるはずです。

これでビルドしても立派な名前を表示するアプリですが、ちょっとだけCSSにコードを入力してデザインを変えてみます。

CSSにコードを入力してデザインを変える

左のツリー上になっているところから、cssのフォルダを開きます。style.cssというファイルがありますので、クリックしてコードを表示させましょう。何も入力されていませんので、下記をコピして、ペーストします。

終わったら、左上のファイルからすべて保存を。するとプレビューが変わります。背景に色が付いたり、文字が太字で大きくなったのが確認できるはずです。可能なら、navyやwhiteなでの色を変えたり、font-sizeを小さくしたり、大きくしたりしてみましょう。

HTML5とCSSはプログラミング言語ではない

MonacaはHTML5、CSS、JavaScriptでプログラミングしますが、厳密にいうとプログラミングするのはJavaScriptのみです。HTML5、CSSはプログラミング言語ではないからです。JavaScriptが難しいなら、まずはHTML5とCSSから勉強するのもいいかもしれません。

monacoデバッガーで実機確認する

簡単なアプリなので、確認するまでもないのですが、初めてなら、スマホでmonacoデバッガーを起動して名前が表示するかをみてみましょう。ビルドすればそのままアプリとなります。

Advertisement

ビルドしてアプリを完成させる

ファイルなどが並んでいるところからビルドを選択します。Android、iOS、windowsから選べます。今回はAndroidでデバッグしてみます。Androidアプリのビルドには2種類あります。デバッグ向けとリリース向けです。デバッグ向けはアプリに不具合がないかを確認するためのビルドです。自分だけでアプリを使う時にも利用します。今回はリリースするわけではないので、デバッグ向けでビルドしましょう。

ビルドするには青いボタン、ビルドを開始するを押すだけです。別タブが開いて、勝手にビルドを開始します。

数分すればビルドが成功したという画面に変わります。後はダウンロードするか、QRコードからインストールするだけです。

名前を表示するだけでも立派なアプリ

早ければ1時間かからずにアプリが出来上がったはずです。名前を表示するだけという使い道がないアプリでもアプリはアプリです。出来た人はアプリ開発者です。