3-5.Monacaデバッガーでデバッグ

さて、犬のイラストをタッチすると犬の表情がランダムに変わり、
音がなる、という動きのコーディングが終わりましたので、
ちゃんと動くか動かしてみます。

Androidが入っているお手持ちのスマートフォンやタブレッドでデバッグします。
うちは息子(2歳)がときどきゲームアプリを
楽しむタブレットでデバッグしてみます。
デバッグにはMonacaデバッガーをインストールする必要があります。

Monacaデバッガーのページからインストールができます。
もしくはgooglePlayで「Monacaデバッガー」と検索すれば出てきます。

インストールして起動するとログインIDとパスワードの入力画面が出ます。
unnamed.jpg

ここにMonacaにログインするときのメールアドレスと
パスワードを入力してログインします。

そうするとプロジェクトの一覧が出てくるので、開発中のプロジェクトを選ぶと
さっき作ったソースが実行されます。

タッチしたら犬の絵が変わり、無事に音も鳴りました!
わーい!
動いた動いたうれしいな!


パソコンでソースの書き換えして保存、
タブレットで書き換わったソースを同期してから実行、
というのを繰り返します。

犬の絵を増やしたり、位置を調整したり、全部の犬が笑顔になったら
音がなるようにする、など、多少作りこみました。
あと、そうそうnend広告がちゃんと表示されるのも確認できました。

最終的なゲーム画面はこんな感じになりました。

d000.jpg


上の「にっこりえがおにしてね」の文字は
手書きフォントで書いた画像を使用しています。
これ、フォントのインストールとか面倒なのでWEBサービスを利用しました。

バナー工房
こちらも無料で商用利用も可というサービスです。

banner02.jpg

こんな感じの画面で、今これは犬の画像をアップロードして
「えあわせー!」って文字を入れる処理をしています。
文字入れは全部このサービスを利用しました。

もちろんMSゴシックとかだけでいいなら
HTMLだけで大丈夫なので画像の文字要れなどの作業は必要ありません。
-----------------------------------

-----------------------------------
応援はこちらのクリックをお願いします。
にほんブログ村 IT技術ブログ iPhoneアプリ開発へ
にほんブログ村
にほんブログ村 IT技術ブログ Androidアプリ開発へ
にほんブログ村
スポンサーサイト

3-4.Monacaで開発(効果音を鳴らす)

Monacaの開発リファレンス「音楽を再生する」というページから
ほぼ丸写しでコーディングしました。

「PhoneGapのMedia APIを使ってプロジェクト中の音声ファイルを読み込む」
というところにある「おみくじアプリ に効果音をつけてみましょう」のサンプルソースから
まるっとコピペ。

<script type="text/javascript">
var src1 = "koukaon1.mp3";
var src2 = "koukaon2.mp3";

var media1 = null;
var media2 = null;

function getPath(){
var str = location.pathname;
var i = str.lastIndexOf('/');
return str.substring(0,i+1);
}

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady(){
media1 = new Media(getPath() + src1, onSuccess, onError);
media2 = new Media(getPath() + src2, onSuccess, onError);
}

function onSuccess() {
console.log("playAudio():Audio Success");
}

function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}

</script>


コピペ後に
var src1 = "koukaon1.mp3";
var src2 = "koukaon2.mp3";
この部分は自分のアップロードした効果音ファイルの名前に変えました。

それから画像を変更するファンクションchange_imgの最後に
「media1.play();」と追記しました。

一応「素人の開発」がコンセプトなので、素人ならPhoneGapってなんだろう?
とかきっと思うと思いますが、もうここはサンプルどおりに書けば動くじゃないかな?
ってノリで進めます。

知りたい人はググってください。

このガサッとコピーした部分でやっていることは、音声メディアを読み込んで、
再生できる準備をしている、ってことだけ押さえとけばいいのではないかしら。
change_imgの最後に「media1.play();」と追記しましたが、
この部分でその準備した音声メディアを再生するわけですね。

詳しくはコピペした元のページを見てください。


開発リファレンスを熟読しましたが、
ふむふむ、一応これで音が鳴るはず。


ただ、プレビュー機能では再生されないようです。
Monacaのプレビュー機能は簡易的な動作確認のみができる機能なので、
単純なHTMLの配置確認などはできますが、
それ以外はできません。

monaca092.jpg

これがプレビュー画面ですが下のほうに
「正確に表示するには、Monacaデバッガー(無料) を利用してください。」
と記載されています。

デバッグは実機で行うのが基本のようです。
-----------------------------------

-----------------------------------
応援はこちらのクリックをお願いします。
にほんブログ村 IT技術ブログ iPhoneアプリ開発へ
にほんブログ村
にほんブログ村 IT技術ブログ Androidアプリ開発へ
にほんブログ村

3-3.Monacaで開発(html+javascriptでタッチでイラストを変える)

さて、いよいよMonacaでコーディング的なことをします。
「素人が開発」がコンセプトなのでほぼコピペでできちゃう感じで進めます。

やりたいことは
イラスト画像を複数配置して、
┌───┐
│○×△│
└───┘
画像がタッチされたら、
タッチされた画像が、ランダムに別のイラスト画像に変わる、
┌───┐
│○○△│
└───┘

ということです。


Monacaにログインし、ダッシュボードページにをひらき、
新しく作ったプロジェクトのIDEを開きます。
index.htmlは最初から作られていたので、それに書き足す感じで行きますね。

monaca08.jpg

最低限のbodyとかheadのタグは最初から書いてありました。

まず、加工した画像素材をアップロードします。
こんな感じで左の右クリックでwindowのエクスプローラー機能のように
フォルダやファイルを追加できます。
monaca09.jpg

アップロードは追加したいフォルダを右クリックしてアップロードを選択し、
ドラッグ&ドロップでらくらくアップロードできました。

加工した画像素材のほか、効果音のファイルもアップロードしました。
それから、javascriptを記載するためのmain.jsというファイルも新規追加しました。
フォルダ構成はこのようになりました。

monaca091.jpg

index.htmlに追記します。
<body>~</body>タグの間にimgタグを書きます。

<img src="img/d01.jpg" />
<img src="img/d02.jpg" />

こんな感じで配置しました。
「これで最初のページに画像が並ぶ」状態が完了です。
ヘッダメニューの「プレビュー」ボタンを押すと、
アプリを起動したときの様子が簡易表示でプレビューできます。

monaca092.jpg

こんな感じでプレビューされました。
imgタグって何?って人はググってこういうページで勉強してみてください。
コピペでいけます。


次はタッチしたときの動き、htmlとjavascriptの基礎知識だけで進めてみますと
onClickでクリックしたときのイベントを拾います。
クリックしたときchange_imgというファンクションが呼ばれるようにします。
さっきのimgタグにこのように追加します。

<img src="img/d01.jpg" onClick="change_img('img1');" />
<img src="img/d02.jpg" onClick="change_img('img2');" />


そして呼ばれるchange_imgファンクションの処理をmain.jsに書きます。


function change_img(img) {
    var col = new Array("img/d01.jpg","img/d02.jpg","img/d03.jpg","img/d04.jpg");
    var rnd;
    rnd = Math.floor( Math.random() * 4 );
    document.getElementById(img).src = col[rnd];
}


Math.floor( Math.random() * 4 )で0から4までの乱数を発生させます。
ググって出てきたここのページからほぼコピペしました。

さて、ほぼコピペで画像が変わるとこまでできました。
プレビューで簡易的に実行もできます。
プレビューを押して、犬のイラストをマウスでクリックすると、
画像がランダムに変わります。

ここから並べる犬の数を増やしたり、表示する大きさを調整したりしました。


ここまでは順調ですね。
さてサクサク進めましょう。
-----------------------------------

-----------------------------------
応援はこちらのクリックをお願いします。
にほんブログ村 IT技術ブログ iPhoneアプリ開発へ
にほんブログ村
にほんブログ村 IT技術ブログ Androidアプリ開発へ
にほんブログ村

3-2.素材を作成する

まず最初はイラストを配置する。
┌───┐
│○×△│
└───┘
ってのをやりたいわけなんで、イラスト素材を作ります。

でも私、イラストあんまり描けません。
今回は「完全無料のアプリ開発」なので
イラストレーターに発注もできません。
時間が永遠にあるのであれば、イラストの練習から始めてもいいんだけど
時間もありません。

なので無料素材を拝借します。
無料で利用可、商用利用も可、報告やバックリンクも不要、加工もOKな
イラストACさんでイラスト画像を探して、ダウンロードさせてもらうことにします。

picac01.jpg
picac02.jpg

利用には利用者登録が必要です。
登録はメールアドレスなどだけです。
ただし、メルマガがものすごい来るのでご注意ください。

あとは規約としてイラスト素材として再配布するのは不可、
アダルトサイトなどでの使用は不可とかあるので
利用の際は規約を確認してくださいね。

こちらの素材をゲットしました。

042924.jpg

タッチしたら犬のイラストの表情が変わる、というゲームができそうです。

で、こちらのイラストを
ばらばらに分けたり、余白の調整をしたり、などの加工します。

加工にはフリーソフトのJTrimを使いました。
今回の開発コンセプトの「低スペックのPC」でもサクサク動きますし、
開発コンセプトの「素人が開発」というのも、わかりやすくて
最低限の機能しかないソフトなので大丈夫です。
開発コンセプトの「完全無料で」というのもフリーソフトなのでOKです。

これでひとつひとつの表情を切り離して余白を調整したイラストができました。
こんな感じのものが複数出来上がりました。

d01.jpg

d02.jpg

イラスト素材は完成です。


あとはタッチしたときに音を鳴らしたいので音の素材もほしいです。
音も作れないこともないのですが、今回は時間短縮のために、無料素材を利用します。

TAM Music Factory 効果音素材さんで無料素材をダウンロードさせてもらいました。

oto01.jpg

こちらの規約では「無料配布のデジタルコンテンツ」に関しては
「無料でご利用頂けます。ご連絡・リンク・著作権表示の必要はありません。」

なので、これを使ってできあがったアプリは無料で配布することが必須となります。
有料アプリを作成予定のかたはお気をつけください。

私の場合は、こんなしょぼいアプリは有料なんかにしたら
誰もダウンロードしないので無料にするつもりでしたから大丈夫です。

音の素材は効果音素材のページからチョイスしてダウンロードし、加工もせずそのまま使います。


これで素材の準備は完了しました。
-----------------------------------

-----------------------------------
応援はこちらのクリックをお願いします。
にほんブログ村 IT技術ブログ iPhoneアプリ開発へ
にほんブログ村
にほんブログ村 IT技術ブログ Androidアプリ開発へ
にほんブログ村

3-1.最初のアプリの構想

さて、前準備も終わったので、アプリの開発に取り掛かります。

最初につくるアプリは、キャンペーンの関係で、
なんとしても8/31までに終わらせたいので、
すぐに開発が終わるような、とても簡単なアプリ(とってもしょぼいアプリ)にします。
もしかしたら誰もダウンロードしてくれないかもしれない。

(目標としているキャンペーンについてはこちらの記事に書いてます)

アプリの構想としては「子供向けの簡単な絵合わせゲームアプリ」にします。

うちにも2歳児がいるので子供向けアプリを
ダウンロードすることもあるのですが、
結構簡単で簡素な仕組みであっても、所詮は2歳児なので
「タッチして音が鳴る」「タッチして絵が変わる」
くらいで喜んでくれたりするわけです。

例えば「いないいないばぁ」のアプリとか、
タッチすると「ばあ」って音が鳴って
イラストが「いないいない」の絵から「ばぁ」ってなるだけ
たったこれだけの仕組みなのですが、
初回はゲラゲラと大笑いし、その後もときどき開いて、
結構夢中で遊んでいます。

このくらいの機能ならHTML+javascriptでもすぐできそうです。
なんとかキャンペーンに間に合いそうな気もします。

絵合わせはこんな感じをイメージ
イラスト(たとえばいちご、バナナとかの子供が喜びそうなイラスト)
を3つ配置します。
┌───┐
│○×△│
└───┘
○をタッチするとランダムに×とか△に変わる。
×をタッチ、△をタッチしても同じようにイラストが変わる。
┌───┐
│○○○│
└───┘
で、例えば3つのイラストがそろったら「ピンポーン」と音を鳴らす。

という感じで構想。
簡単すぎる感じがしますが、とりあえずは1本アプリをリリースするためです。
うちの子はこれくらいでも初回はものすごく喜ぶと思います。

「初回は」と書いたのは、よく子供向けアプリをインストールするのですが、
どんなよくできたアプリでもすぐ飽きて、
「次は?次は?」と新しいアプリをほしがるわけなので。
で、また次の日とかは飽きたと思われたアプリをまたやってるわけなのですが。

さて、アプリの基本的な動きはこんな感じです。


-----------------------------------

-----------------------------------
応援はこちらのクリックをお願いします。
にほんブログ村 IT技術ブログ iPhoneアプリ開発へ
にほんブログ村
にほんブログ村 IT技術ブログ Androidアプリ開発へ
にほんブログ村

| ホーム |
Page Top↑
▲ Page Top