jsWaffleでAndroidアプリを作ろう！インド式九九編②
サクウェブＴＶはコチラ↓↓↓
では、開発環境が整ったところで作成をはじめていきましょう。
開発環境の構築は以下を参考にしてください。
jsWaffleでAndroidアプリを作ろう！インド式九九編①
今回はjsWaffleを使用してインド式九九のAndroidアプリを作成しますが、
ボタン式とセレクト式の２種類を作成してみようと思います。
まずは、ボタン式からです。
そういえば、プロジェクトの作成について説明した記事を書いていなかったので念のため書いておきます。
プロジェクトを作成する
開発にはEclipseを使用しますが、当記事内ではAptana studio 3を使用して解説しますので、
環境は合わせておいたほうがわかりやすいかも知れません。
では、Aptanaで新規プロジェクトを作成してください。
この先は数回「次へ」が続き、最後に「完了」をクリックすることでプロジェクトが作成されます。
作成されたプロジェクトにjsWaffle手動インストールにしたがってjsWaffleをインストールしてください。
開発開始
jsWaffleのインストールで挿入されているassetsフォルダのwwwフォルダを通常のＷＥＢ開発におけるルートディレクトリだと思って頂ければいいです。
現在、wwwフォルダには様々なフォルダ・ファイルがあると思いますが、その中のindex.htmlとjsWaffle.jsを見つけてください。
実はこの二つ以外のものはjsWaffleでのAndroidアプリ開発では必要ありません。二つ以外はテンプレートとしてデモを表示するためのものです。
削除してしまっても問題ありませんし、よくわからない場合には残しておいても動きます。
さて、開発の準備をしていきましょう。
今回の開発ではHTML5,CSS3,JavaScriptを使用していきますから、wwwにcssフォルダとscriptフォルダを作成しておいてください。
cssフォルダにはstyle.cssを、scriptフォルダにはscript.jsを作成しておきます。
また、今回はより簡単に作成するためにjQueryを使用しますからjQuery.jsなどとしたjQueryをscriptフォルダに入れておきましょう。
では、表示を整えます。簡単なHTMLとCSSですが以下のソースを記述して下さい。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>インド式九九</title>
<script type="text/javascript" src="jsWaffle.js"></script>
<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/script.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<h1>インド式九九ボタン式</h1>
<div id="button_space"></div>
<div id="calc_display"></div>
<p style="text-align:center">
<a href="select.html">セレクト式</a>
</p>
</body>
</html>
style.css
*{
margin:0;
padding:0;
}
h1{
padding:5px;
margin:5px;
background:#ff0000;
color:#ffffff;
font-size:16px;
text-align:center;
}
#button_space{
text-align:center;
}
#button_space button{
width:40px;
margin:5px;
text-align:center;
}
#calc_display{
width:200px;
margin:0 auto;
}
#select_space{
text-align:center
}
これでこんな状態になります。
次の記事からここにプログラムを組み込んでいきます。
