【Monaca】HTMLで簡単にアプリが作れる便利ツールの使い方

アプリを作る時に色々な開発ツール、言語があります。
iOS系のアプリ開発でしたら、xcodeでSwiftと言う言語を使います。
android系であれば、Visual Studioでc言語やJavaを使いアプリ制作ができます。

今回は、難しい言語を覚える事なく、アプリ制作したいと思っている方におすすめです。「HTML」と「css」だけでアプリが制作できる開発ツール「Monaca」です。

Monacaの使い方

私も、プログラミング知識がない大学生の時、卒業制作でアプリを作る事になった際に、簡単にできると言う事で「Monaca」でアプリ制作を行いました。その当時、作ったのは旅行系のアプリでした。自分のアイディアが簡単に作成できるのでおすすめです。

それでは、Monacaについてさらに深く解説していきます。

  1. Monacaについて
  2. Mocanaのインストール方法
  3. アプリの作り方
  4. 開発画面についての詳細
  5. まとめ

1,Monacaについて

先ほどもさらっと紹介した通り、「Monaca」は「HTML」と「css」を使い、簡単にアプリを作成することができます。
作ったアプリは、iOSでもAndroidでもどちらでも、同じコードで動きます。
別のOSように書き換えることがないので効率的です。

サンプルコードも多数あるので、自分の作りたいアプリのフレームワークだけサンプルで中身は自分で修正すると言った流れで、簡単にかつ素早くアプリ制作できると言った事も特徴です。

開発はブラウザ上で行うことができるので、OSの種類やパソコンに関係なくどこでもインターネット環境がある場所なら開発できます。

2,Mocanaのインストール方法

Monacaインストール方法

ここからMonacaのページに移動できます。

Moncaはブラウザでの開発になるので特にインストールは必要ありません。ログインする為に自分のアカウントを作成して、使用します。

アカウントを作成するには、メールアドレスが必要です。

Monacaのアカウント作成

自分のメールアドレスを入力し、任意のパスワードを作成します。
その後、メールアドレスにメールが届きます。メールに届く、本登録のURLに飛び、本登録をします。

無料でMonacaを開始したい人は↓のFreeプランを選択し、名前、電話番号を入力しアカウント作成が完了します。

Monacaのプラン選択

3,アプリの作り方

Monacaでの、アプリ制作はブラウザ上で行うので、Wi-Fi環境が必要になります。
ログインした際の画面が↓になります。

Monacaの最初の画面

新しくアプリを作る場合は、「新しいプロジェクトを作る」を押します。

Monacaのサンプルテンプレート

アプリ開発初心者は、「サンプルアプリケーション」を改良し、自分のアプリに変えていくと言うことをお勧めします。

ある程度、アプリ開発にに慣れているのであれば、「フレームワークテンプレート」「最小限のテンプレート」を選択しても良いと思います。

「サンプルアプリケーション」を選択すると、Monacaが用意したいくつかのサンプルアプリを選択できます。

Monacaの使い方

数あるテンプレートから自分が作りたいアプリと似ている物を選びます。

サンプルのテンプレートを選び終わったら、アプリの名前と簡単な説明を書いて開発画面に進みます。

4,開発画面について詳細

サンプルのテンプレートを選び終えたら、作ったアプリをクリックし、「クラウドIEDで開く」をクリックします。

Monacaの使い方

その後、開発画面が出てきます。

Monacaの画面詳細

画面について解説していきます。

①ファイルや写真などが格納されているエリアです。
編集したいファイルを選択すると作業画面(③)に表示されます。自分のPCにあるファイルや写真をドラックして持ってくる事も可能です。

②各種設定や編集ができるエリアです。
ビルドする際や、JavaScriptのコンポーネントを追加する時に使います。

③作業画面です。
ここで、「HTML」「CSS」「JavaScript」などを編集します。

④プレビューを表示してくれます。
現在作成している画面のデザインや、ボタンを押した時のアクションなども確認できます。Monacaのとても便利なところです。
画面をiPhone用やiPad用、GalaxyやXperia用に変えてくれるので、色々な端末でのデザインをすぐに確認ができます。

5,まとめ

以上、Monacaの始め方についてでした。
高校生や大学生など、頭にあるデザインしたアプリを、アプリ開発初心者が簡単に作れるツールなので、是非作ってみてはいかがですか?

コメント

タイトルとURLをコピーしました