アプリを作る時に色々な開発ツール、言語があります。
iOS系のアプリ開発でしたら、xcodeでSwiftと言う言語を使います。
android系であれば、Visual Studioでc言語やJavaを使いアプリ制作ができます。
今回は、難しい言語を覚える事なく、アプリ制作したいと思っている方におすすめです。「HTML」と「css」だけでアプリが制作できる開発ツール「Monaca」です。

私も、プログラミング知識がない大学生の時、卒業制作でアプリを作る事になった際に、簡単にできると言う事で「Monaca」でアプリ制作を行いました。その当時、作ったのは旅行系のアプリでした。自分のアイディアが簡単に作成できるのでおすすめです。
それでは、Monacaについてさらに深く解説していきます。
- Monacaについて
- Mocanaのインストール方法
- アプリの作り方
- 開発画面についての詳細
- まとめ
1,Monacaについて
先ほどもさらっと紹介した通り、「Monaca」は「HTML」と「css」を使い、簡単にアプリを作成することができます。
作ったアプリは、iOSでもAndroidでもどちらでも、同じコードで動きます。
別のOSように書き換えることがないので効率的です。
サンプルコードも多数あるので、自分の作りたいアプリのフレームワークだけサンプルで中身は自分で修正すると言った流れで、簡単にかつ素早くアプリ制作できると言った事も特徴です。
開発はブラウザ上で行うことができるので、OSの種類やパソコンに関係なくどこでもインターネット環境がある場所なら開発できます。
2,Mocanaのインストール方法

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

自分のメールアドレスを入力し、任意のパスワードを作成します。
その後、メールアドレスにメールが届きます。メールに届く、本登録のURLに飛び、本登録をします。
無料でMonacaを開始したい人は↓のFreeプランを選択し、名前、電話番号を入力しアカウント作成が完了します。

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

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

アプリ開発初心者は、「サンプルアプリケーション」を改良し、自分のアプリに変えていくと言うことをお勧めします。
ある程度、アプリ開発にに慣れているのであれば、「フレームワークテンプレート」「最小限のテンプレート」を選択しても良いと思います。
「サンプルアプリケーション」を選択すると、Monacaが用意したいくつかのサンプルアプリを選択できます。

数あるテンプレートから自分が作りたいアプリと似ている物を選びます。
サンプルのテンプレートを選び終わったら、アプリの名前と簡単な説明を書いて開発画面に進みます。
4,開発画面について詳細
サンプルのテンプレートを選び終えたら、作ったアプリをクリックし、「クラウドIEDで開く」をクリックします。

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

画面について解説していきます。
①ファイルや写真などが格納されているエリアです。
編集したいファイルを選択すると作業画面(③)に表示されます。自分のPCにあるファイルや写真をドラックして持ってくる事も可能です。
②各種設定や編集ができるエリアです。
ビルドする際や、JavaScriptのコンポーネントを追加する時に使います。
③作業画面です。
ここで、「HTML」「CSS」「JavaScript」などを編集します。
④プレビューを表示してくれます。
現在作成している画面のデザインや、ボタンを押した時のアクションなども確認できます。Monacaのとても便利なところです。
画面をiPhone用やiPad用、GalaxyやXperia用に変えてくれるので、色々な端末でのデザインをすぐに確認ができます。
5,まとめ
以上、Monacaの始め方についてでした。
高校生や大学生など、頭にあるデザインしたアプリを、アプリ開発初心者が簡単に作れるツールなので、是非作ってみてはいかがですか?
コメント