monacaで簡単スマートフォンアプリ開発体験講座

URL : http://www.asial.co.jp/　│　 Copyright © 2013 Asial Corporation. All Rights Reserved. 　｜　　 1

Monacaで簡単スマートフォンアプリ開発

アシアル株式会社


Monaca開発入門


MonacaでHelloWorldを動かしてみる

Monacaでは、その手軽さを実感いただくためにサンプルプログラムを用意しています。

まずは、そのサンプルプログラムを動かすことで、Monacaの基本を学びます。

←完成図


Monacaダッシュボードを表示する

1. PCブラウザにてMonacaにログインします。ダッシュボード（左図）が表示されます。

2. 「プロジェクトを追加」ボタンをクリックします。

新しいプロジェクトを追加します

IDEを起動します現在のプロジェクト一覧が表示

されます


HelloWorldプロジェクトを追加する

下記のとおり情報を入力します。

1. テンプレート： HelloWorld2. プロジェクト名： HelloWorld（任意）3. 説明：任意

入力が完了したら、「プロジェクトを作成する」をクリックしてください。

プロジェクトを作成したらIDEを起動します

ここをクリック


IDEの使い方を学ぶ

ファイルの管理を行います

ファイルの編集を行います

Monacaの機能にアクセスします

デバッグ情報を表示します


HelloWorldデモをデバッガーで実行してみる

• Monacaに登録したアカウントでログインを行ってください

• Monacaデバッガーを起動すると、登録されているすべてのプロジェクトが表示されます。

• 作成したサンプルアプリが見えない場合は、右上の「更新」ボタンをタップしてください。

• アプリを実行すると、サーバー上のファイルをダウンロードします。 HelloWorldサンプルの場合、簡単なサンプルが含まれるため、ダウンロードに時間を必要とします。しばらくお待ちください。

プロジェクト更新

実行


Monacaデバッガーを使用する

プロジェクト一覧に戻る

デバッガーのメニューにアクセス

デバッガーメニュー

更新IDEで編集したファイルを再度取得し、反映させます

HTML現在のページの HTMLソースコードを表示します

デバッグログJavaScriptやその他のログを表示します

ネットワークインストール（ Androidのみ）Monacaにてデバッグビルド（後述）したアプリを直接端末にインストールします


Hello Worldテンプレートで使われている機能 1

• 画面下部のタブによる画面遷移– ネイティブコンポーネントという独自の機能を使っています

– 今回は深く説明をしませんが、ドキュメントにて詳細をご覧ください


Hello Worldテンプレートで使われている機能 2

• PhoneGapによる端末情報や機能へのアクセス– 加速度センサー– 位置センサー– など、端末の機能へのアクセスを JSで行うことができるデモです

端末情報

端末機能へのアクセス


開発の流れ

コードエディタで編集し、保存する

コードエディタで編集したファイルをデバッガーで確認しながら開発します

Monaca IDE デバッガー

デバッガーを使うことで、毎回ビルドをしなくても動作確認を行えます。


開発の流れ：デバッグ

コード実機上のデバッガーで動作確認

IDE上でデバッグ


開発の流れ：ビルド

Android版ビルドはデバッグとリリースの２種類

そのまま APKをダウンロード可

もしくはデバッガーから直接インストール

iOS版はOTA Distributionに対応(Wireless AdHoc)


おみくじアプリを作成する


おみくじアプリを作成する

• 以下のような簡単なサンプルを通じて、Monacaの使い方の概要を説明します。– おみくじを模したアプリケーション– ボタンを押すとランダムな画像を表示する


開発の流れ

• おみくじの仕組みを検討する• 素材のダウンロード• 素材を IDEへアップロード• index.htmlの編集

– HTML編集– CSSによるデザインを当てる– JavaScriptによるロジック追加

このアプリは以下の流れで、開発を進めます。


おみくじプログラムの仕組みを考える

プログラムの流れはフローチャートで表せます。「はじめる」ボタンを

タップ

3種類のパターンからランダムで 1つを選ぶ

パターンが0だった場合

パターンが1だった場合

「大吉」と表示

「中吉」と表示

「平」と表示それ以外の場合

0,1,2のいずれかの数字をランダムで作り、変数にセット

変数の値をもとに条件分岐


ランダムの作り方を考える

ランダムな状態を発生させるためには

プログラムで乱数を生成します。

Math.random() 関数を呼ぶと、 0から 0.99999(1 未満 )の範囲の小数を返

します。その結果を 100 倍し、Math.floor() 関数で小数部分を切り捨てます。

そうすることで 0 ～ 99の 100通りの数字が作られ、表示されます。

このように、関数は組み合わせて使うことができます。

■ ランダム関数の使用例

alert(Math.floor(Math.random() * 100));


条件分岐

プログラムで条件分岐を行うには if を使います

var dice = Math.floor(Math.random() * 3);

if (dice == 0) { alert(" あなたは大吉です！ ");} else if (dice == 1) { alert(" あなたは中吉です！ ");} else { alert(" あなたは平でした。。。 ");}

diceという変数が0の値を持っていた場合の処理

dice という変数が1の値を持っていた場合の処理

上のどちらでもない場合の処理

値が同じことである判定は == で行う 0,1,2からランダムで値を選び

diceという変数にセットする


新しいプロジェクトを作成する

1. スケルトンとして「最小限のプロジェクト」を選択します

2. プロジェクト名を決めます

「おみくじ」等、任意の名前を付与してください

3. 「プロジェクトを作成する」をクリックして作成します

4. 「 IDEを起動」をクリックして、 IDEを起動します


必要な素材を入手する

ブラウザにて下記の URLにアクセスしていただき、 ZIPファイルをダウンロードしてください。http://bit.ly/T2eP2J（上記ファイルには最終的に作成する HTMLも含まれています）

ダウンロードした ZIPファイルを展開し、 imagesフォルダ内に画像ファイルがあることを確認してください。

http://bit.ly/T2eP2J





素材を IDEへアップロードする

• ファイルツリーの wwwフォルダを右クリックし、「新規フォルダーの追加」を選択してください。

• 表示されるダイアログで imagesと入力し、OKボタンを押してください。これで、ファイルツリー内に imagesフォルダが作成されます。


素材を IDEへアップロードする

• Imagesフォルダを右クリックし、「アップロード」を選択します。

• ダウンロードしていた画像ファイルを、アップロードダイアログの枠線内にドラッグアンドドロップします。

※フォルダごとドラッグアンドドロップすることは出来ません


開始ページの画面を作成する

index.htmlを下記の通り修正（赤色の部分）し、開始ページの画面を作成します。

<!DOCTYPE HTML><html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>Plain Project Skeleton</title> <script type="text/javascript" src="plugins/plugin-loader.js"></script> <script type="text/javascript"> // Set virtual screen width size to 640 pixels (横幅 640pxに設定 ) monaca.viewport({width: 320}); </script> </head> <body> <div id="hako"> <img src="images/omikuji-box.png" width="160" id="saisyo" /> <img src="" width="230" id="kekka" style="display : none;"/> </div> <div id="bottombar"> <img src="images/omikuji-btn-hajimeru.png" onclick="omikuji()" width="160" id="button"> </div> </body></html>


CSSを編集し、画面を整える

<head>タグ内に<style>タグを追加し、背景やボタンの位置を調整します。

<style type="text/css">body { background-image : url("images/omikuji-bg.png"); background-repeat: no-repeat; background-position: center center; background-size : 100% 100%; background-attachment : fixed; margin : 0; padding : 0;}#hako { width : 100%; text-align : center; margin : 10% 0px; height : 80%; position : fixed; left : 0; top : 0;}

#bottombar { position : absolute; left : 0px; bottom : 30px; width : 100%; text-align : center;}</style>


結果を表示する方法

HTMLと CSSだけでは、おみくじに使うランダムな値を生成することができません。JavaScriptを用いて、ランダムに結果が表示されるよう改良していきます。


プログラムコードを記述する

<head>タグ内に<script>タグを記述し、 JSのプログラムコードを記述します

<script> function omikuji (){ var dice = Math.floor(Math.random() * 3); var image_name; if (dice == 0) { image_name = "omikuji-daikichi.png"; } else if (dice == 1) { image_name = "omikuji-chuukichi.png"; } else { image_name = "omikuji-hei.png"; } document.getElementById("saisyo").setAttribute("style", "display : none;"); document.getElementById("kekka").src = "images/" + image_name; document.getElementById("kekka").setAttribute("style", "display : inline;"); document.getElementById("button").src = "images/omikuji-btn-yarinaosu.png"; alert('おみくじが出ました！さて結果は ?'); }</script>


おみくじアプリ作成を終えて

• このアプリの作成によって、次のことを習得しました– 画像のアップロード方法– JavaScriptでランダムな処理を行う

monacaで簡単スマートフォンアプリ開発体験講座

Documents