MonacaでHTMLとJavaScriptを使ってMobileアプリ開発
数年前からHTML5とJavaScriptでクロスプラットフォームなモバイルアプリが開発できるらしいということは耳にしていましたが実際やったことなかったので挑戦してみました。
Android向けのIDE（統合開発環境）と言えばEclipse、クロスプラットフォーム開発ではアドビの提供するオープンソースのPhoneGapBuildが有名ですが、いざこれらを使って開発しようと思うと慣れていない人は環境設定だけで日が暮れてしまいます。
準備が多すぎるのと特に作りたいものがなく面倒くさいので実は結構長い間放置していましたが、ウェブ上で利用できるIDE（統合開発環境）Monacaを使えば面倒な環境設定などを行わなくてもすぐに開発に取り掛かることができるとの事でした。
MonacaはWebDAVを利用することでEclipse等のIDEを使い慣れた人にとっても使いやすくなっているようです。
WEB開発者にはDreamweaver(CS4以降)で開発可能なのも魅力。
まずはMonaca公式Webサイトへ。
同時に開発できるプロジェクト等が無制限、その他色々な機能が利用できる有料版がありますが、今回は無料版を利用します。
ログインするとダッシュボードにアクセスできます。
開発中のプロジェクトはオンラインのタブに。
開発の終わったプロジェクトはアーカイブへ保存します。
無料版では同時に開発できるプロジェクトは３つまでですが、アーカイブに保存しておけばあまり心配することもないでしょう。
開発プロジェクトを「開く」とIDEのUIが開きます。
あとはウェブサイトを開発していく要領でHTML5とJavaScriptを書いていくだけ。
但し、当たり前ですがApache等が搭載されているわけではないし、もちろんWebサーバーに普通にインストールされているようなMySQL等のデータベースやPHPなどはそのままでは使えません。
基本的にはブラウザ上でもオフラインで利用できるように開発していきます。
データベースやPHPやPerl等のサーバーサイド言語を利用する場合は外部サーバーに起点となるファイルを置いてAjaxを利用してやりとりすることになります。
今回作ったアプリは前回の日記でも紹介した陸上・混成競技計算ツール
しかしこのツールはPHPを利用しているためオンラインでしか利用できません。
面倒ですが全てJavaScriptの処理に書き換えます。
こちらが前の記事に書いたJavaScript部分のソース
function decaCal(e){
function total(result){
id.html(result);
}
var deca = [e];
var id = $(document.getElementById(e+'Total'));
$('#'+e+' input').each(function(){
if($(this).val().match(/[^0-9]+/)){
id.text("Error(半角数字のみで入力して下さい。)");
exit;
}else{
deca.push($(this).val())
}
});
$.post('decathlon.php',
{
score:deca.join()
}, total);
}
PHPのソースは長いので前回の記事「jQuery MobileとAjax通信で作る十種競技得点計算ツール」を御覧ください。
それが前回PHPで処理した部分も全てJavaScriptで処理させるとこうなりました。
//maleEvents
male100 = [25.4347,18,1.81];
male200 = [5.8425,38,1.81];
male400 = [1.53775,82,1.81];
male1500 = [0.03768,480,1.85];
male110H = [5.74352,28.5,1.92];
maleHJ = [0.8465,75,1.42];
malePV = [0.2797,100,1.35];
maleLJ = [0.14354,220,1.40];
maleSP = [51.39,1.5,1.05];
maleDT = [12.91,4,1.1];
maleJT = [10.14,7,1.08];
mdformula= [male100,maleLJ,maleSP,maleHJ,male400,male110H,maleDT,malePV,maleJT,male1500];
moformula= [male100,maleLJ,maleSP,male400,male110H,maleJT,maleHJ,male1500];
mtformula= [male110H,maleSP,maleHJ,male400];
//femaleEvents
fm200 = [4.99087,42.5,1.81];
fm800 = [0.11193,254,1.88];
fm100H = [9.23076,26.7,1.835];
fmHJ = [1.84523,75,1.348];
fmLJ = [0.188807,210,1.41];
fmSP = [56.0211,1.5,1.05];
fmJT = [15.9803,3.8,1.04];
fhformula= [fm100H,fmHJ,fmSP,fm200,fmLJ,fmJT,fm800];
ftformula= [fm100H,fmSP,fmHJ,fm200];
function tracks(mark,a,b,c){
if(mark<10000){
sec=mark*0.01;
}else{
sec=Math.floor(mark*0.0001)*60+(mark % Math.pow(10, 4))*0.01;
}
if(mark!=0){
return Math.floor(a*Math.pow((b-sec),c));
}else{
return 0;
}
}
function jumps(mark,a,b,c){
if(mark!=0){
return Math.floor(a*Math.pow((mark-b),c));
}else{
return 0;
}
}
function throws(mark,a,b,c){
mt=mark*0.01;
if(mark!=0){
return Math.floor(a*Math.pow((mt-b),c));
}else{
return 0;
}
}
function decaCal(e){
deca = [];
evtGenre = [];
evtName = [];
total = 0;
var id = $(document.getElementById(e+'Total'));
$('#'+e+' input').each(function(){
if($(this).val().match(/[^0-9]+/)){
id.text("Error(半角数字のみを入力して下さい。)");
exit;
}else{
deca.push($(this).val());
evtGenre.push($(this).attr('data-event'));
evtName.push($(this).attr('data-name'));
//alert(evt+deca);
}
});
switch(e){
case 'maledeca'://十種競技の処理
id.html("十種競技 ");
for (i=0;i<10;i++) {
switch(evtGenre[i]){
case 'track':
point = Number(tracks(deca[i],mdformula[i][0],mdformula[i][1],mdformula[i][2]));
break;
case 'jump':
point = Number(jumps(deca[i],mdformula[i][0],mdformula[i][1],mdformula[i][2]));
break;
case 'throw':
point = Number(throws(deca[i],mdformula[i][0],mdformula[i][1],mdformula[i][2]));
break;
default:
id.html("errorでした、正しい数値を入力して下さい。");
exit;
break;
}
if(isNaN(point)){
id.html(evtName[i]+"でerrorでした、正しい数値を入力して下さい。");
exit;
}else{
total += point;
id.append(evtName[i]+point+" - "+total+" ");
}
}
break;
case 'maletetra':
//その他の処理
break;
default:
id.html(evtName[i]+"でerror(1)でした、正しい数値を入力して下さい。");
exit;
break;
}
if(isNaN(point)){
id.html(evtName[i]+"でerror(2)でした、正しい数値を入力して下さい。");
exit;
}else{
total += point;
id.append(evtName[i]+point+" - "+total+" ");
}
}
break;
}
id.append("合計 : "+total);
}
HTMLにdata-*属性を幾つか加えた点と配列や変数の書き方が違いますが処理自体はほぼ一緒です。
あとはGoogle Hosted Librariesから読み込んでいたjQuery本体やjQuery Mobileも全てローカルディレクトリ内へ。
上部メニューの「プレビュー」から動作確認して問題がなければビルドします。
但しプレビューの挙動はAndroidとは若干異なるので手元のAndroid端末からもチェックしましょう。
チェックするにはMonacaデバッカーを利用する方法とビルドしたAPKファイルをインストールする方法の2つあります。
開発中は前者での動作チェックをお勧めします。
Monacaデバッカーの利用方法
PlayStoreからMonacaデバッカーで検索、または以下のリンクから。
Google PlayStore | Monacaデバッカー
iOS向けにも開発したい場合はAppStoreから同名のアプリをインストールして下さい。
インストールしたら起動後に登録したメールアドレスとパスワードの入力。
開発中のアプリをタップすると開発中のアプリ一覧が表示されます。
当該項目をタップするとアプリが起動します。
右下のメニューをタップするとHTMLソースなどを確認できます。
色々弄ってみて問題がなければ開発画面へ戻り「ビルド」します。
ビルド方法
ビルドには「Androidアプリ」「iOSアプリ」「Windows 8アプリ」「Chrome Apps」の４種類があります。
今回はAndroid向けの開発なので「Androidアプリ」を選択するといくつかの選択肢が表示されます。
「デバッグビルド」
ダミー署名を用いたビルドでストア登録不可。
「リリースビルド」
本番用ビルドです。
キーストア登録（後ほど説明）後に利用可能。
「In-App Updater用更新ファイル」
エンタープライズ版専用です。
無料版では利用できません。
まずはデバッグビルドを利用してみます。
ビルド後にはAPKファイルをローカルPCへダウンロードもできるので手動でインストールしたい場合やAndroid用の仮想環境Geny Motionを利用している場合などはDLしましょう。
端末にインストールしたい場合はMonacaデバッカーを利用するとビルド後のアプリを端末にインストールすることも出来ます。
先ほどの開発中のアプリ選択画面で右側に表示される！マークをタップすると「インストール」という項目があるのでタップ、「パッケージインストーラ」を選択すると自動でインストール出来ます。
インストールが完了後には普通のアプリと同じようにメニュー画面のダウンロードアプリから選択＆実行できます。
この段階で問題がなければ引き続きストアでPublishの準備をします。
続きはこちらへ
Monacaで開発＆ビルドしたアプリをGoogle PlayStoreで公開
注意する点
Androidアプリの多くはアプリ内に広告を掲載していますが、WEBサイトのようにAdsense広告を挿入しようとしてもできません。
正確にはできるかもしれませんが規約違反のおそれがあるのでやめておきましょう。