こんにちは、エンジニアにょけん（@nyoken_box）です。
って人、結構多いのではないでしょうか？
そんなあなたに向けて、Monacaの基本的な使い方をまとめました。
しかも、わかりやすくするために、実際にサンプルアプリを開発しながら操作をお見せします。（太っ腹！！！）
ちなみに、
「まだMonacaのアカウント持っていないよー！」
「そもそもMonacaってなんやねん」
って人は、まずは以下の記事をご覧ください。
Contents
Monacaの基本的な使い方（アプリ作成）
まずは、カンタンなアプリを作成してみましょう。
以下の手順に沿ってみてください。
1.Monacaにログイン
まずは、Monacaへログインしましょう。
2.「新しいプロジェクトを作る」を選択
※「プロジェクト＝アプリ」と考えていただければOKです
3.「最小限のテンプレート」を選択
※「サンプルテンプレート」を選択すると、出来上がっているサンプルアプリがいくつか出てきます。
4.プロジェクト名をつけて、「作成」を選択
これで、アプリの枠組み作成は終了です。
カンタンすぎるぜ…！
5.上記で作成したアプリを選んで、「クラウドIDEで開く」を選択
6.アプリ内のプログラムが出てきます
- アプリ内のファイル一覧で、HTML・JavaScrip・CSSなどが格納されています。
- ①の一覧にあるファイルを選択すると表示され、コードを編集することができます。
- プレビュー画面で、アプリの見栄えを確認することができます。
- アプリ実行時にログが出力され、内容やエラーのチェックを行えます。
「最小限のテンプレート」からアプリを作成した場合、最初は以下の赤枠で囲った部分を表示するだけのアプリとなっています。
次から、いよいよアプリの中身を編集していきます。
とその前に、デバッガー（アプリの動作確認用ツール）の使い方を見ていきましょう。
Monacaの基本的な使い方（デバッガー）
「Monacaの概要・メリット・開発環境の構築とは？」という記事でも説明しましたが、Monacaではスマホアプリを開発するため、スマホ上での動作確認が必須です。
で、この確認用ツールを、Monaca側が提供してくれているんですね。
これを、デバッガーと呼びます。
お使いのスマホに応じて、以下からインストールしてください。
- iPhone→https://itunes.apple.com/jp/app/monaca/id550941371?mt=8
- Android→https://play.google.com/store/apps/details?id=mobi.monaca.debugger&hl=ja
次から、デバッガーの使い方を説明します。
1.ログイン
インストールしたデバッガーアプリを立ち上げ、メアドとパスワードを入力してログインしましょう。
こちらは先ほどのMonaca自体のログインではなく、動作確認ツールを用いるためのログインですね。
2.動作確認したいプロジェクト（アプリ）をタップ
ここでは、先ほど作成した「Monacaお試し」の動作確認をしたいので、こちらをタップしましょう。
3.アプリの実行結果が表示される
先ほどMonacaのIDE上で見たのと同様に、スマホでもメッセージが表示されました。
Monacaで開発したアプリが、正常に動いたというわけですね。
ここで、赤枠で囲われているボタンを押してみてください。
様々な操作メニューが現れましたか？
次の手順で、各ボタンの意味を見ていきましょう。
4.各種操作メニューの説明
- ログイン後の選択画面に戻ります
- スクリーンショットを撮れます
- アプリ起動後に変更があった場合、更新（同期）を行えます
- エラーがあった際にログを確認できます
ちょっとこれだけではデバッガーの大切さがわからないと思うので、次の章で実際にアプリを編集してみましょう。
デバッガーのスゴさが爆発しますよ。
Monacaの基本的な使い方（実践編）
「Monacaお試し」アプリを、カンタンに編集してみます。
1.ブラウザの方で「Monacaお試し」を選び、「クラウドIDEで開く」を選択
確認になりますが、今プレビュー画面では、以下赤枠の中の文字が表示されています。
これを変更していきましょう。
2.<body>〜</body>間を編集
まずは、先ほど赤枠で囲っていた部分（<boddy>〜<body>）の中にある部分を編集します。
以下のように変えてみてください。
変更前
<body> <br /> This is a template for Monaca app. </body>
↓
変更後
<body> <h1>Monacaお試し</h1> <div><button onclick="test(1)">Monaca</button></div> </body>
3.<script>〜</script>間を編集
<body>〜</body>の少し上あたりに、<script>〜</script>もあります。
何も書かれていないと思うので、以下のコードを追加してみてください。
変更前
<script> </script>
↓
変更後
<script>
function test(inflag){
console.log("in:"+inflag);
if(inflag == 1){
alert("Monaca");
}
}
</script>
ここまでできたら、保存しましょう。
- Windows：「Ctrl」キー+「S」キー
- Mac：「Command」キー+「S」キーです。
- 共通：「ファイル」→「保存」
4.プレビュー画面の確認
中身は、こんな感じになっているはずです。（赤枠内は変更箇所）
右側のプレビュー画面を見ると、表示が変わっているのがわかりますか？
「Monacaお試し」という太文字と、「Monaca」と書いてあるボタンがあるはずです。
これは、手順2で行なった<body>〜</body>間の編集結果です。
5.デバッガーによる動作確認
では、ボタンがどのような動作をするのかをデバッガーで確認しましょう。
スマホアプリのデバッガーを開いて、「お試しアプリ」をタップします。
すると、以下のように変更されているので、「Monacaボタン」をタップしてみましょう。
以下のようなな表示が出ましたでしょうか？
これは、手順3で<script>〜</script>内に、「Monacaボタンを押した時に”Monaca”と表示させる」という命令を書いたからです。
6.デバッガーでログ確認
操作メニューから、ログを表示してみます。
「in:1」という文字が表示されているはずです。
種明かしをすると、「Monacaボタン」を押したとき、実は裏側で「1」という数字が渡されていたということを示しています。
そして実は、「1を受け取った場合に”Monaca”という文字を表示しろ！」という命令も書いていました。
このため、「Monacaボタンを押すと”Monaca”と表示された」わけですね。
7.あえてエラーを出してログを確認してみる
わざと間違えたコードを書いて、エラーチェックもしてみましょうか。
手順3で書いた<script>〜</script>内の「}」を、1つ消してみてください。
以下のコード内のピンク文字部分です。
変更前
<script>
function test(inflag){
console.log("in:"+inflag);
if(inflag == 1){
alert("Monaca");
}
}
</script>
↓
変更前
<script>
function test(inflag){
console.log("in:"+inflag);
if(inflag == 1){
alert("Monaca");
}
</script>
「}」を消したら、保存しましょう。
すると、ログ画面にエラーメッセージが表示されます。
さらに、再びデバッガーから「Monacaお試し」を開きます。
すると、右下の操作メニューに赤い「！」が出ているのが分かりますか？
これは、プログラムにエラーがあることを表しています。便利！
てわけで、エラー確認のために赤い「！」をクリックしましょう。
その後、赤くなっているボタンをタップすると、先ほどと同じエラーがスマホ上でも確認できます。
ちなみに、「index.html」というファイルの17行目にエラーがあると記載されていますね。
こんな感じで、「アプリ改修→デバッガーで動作確認」を繰り返しながら、アプリ作成していくのが基本です。
Monacaを使ってスマホアプリ開発をしよう！
以上、Monacaの基本的な使い方を紹介しました。
どれも感覚的に操作できるので、開発が非常に効率的に行えます。
ぜひ、使ってみてください！
