jsWaffleでAndroidアプリを作ろう！クイズアプリ編①
サクウェブＴＶはコチラ↓↓↓
今回からjsWaffleを使用してクイズアプリを作成していきます。
前回までより少し難易度が上がります。
開発環境の準備
jsWaffleでAndroidアプリを作ろう！インド式九九編①
を参考にして、jsWaffleでの開発環境を作ってください。
開発開始
では表示と今後使用するファイルを準備してしまいます。
index.htmlを以下のように書きかえてください。
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="js/jquery.js"></script> <script type="text/javascript" src="js/script.js"></script> <link rel="stylesheet" type="text/css" href="css/style.css" /> </head> <body> <h1>クイズ</h1> <div id="result"></div> </body> </html>
次にJavaScriptを整えます。
assetsフォルダのwwwフォルダにjsフォルダを作成してください。
その中に、jquery.jsなどとしたjQueryを入れます。更に、script.jsを作成してください。
最後にwwwフォルダにcssフォルダを作成しstyle.cssをその中に作成してください。
こんな感じです。style.cssには以下のように記述しておいてください。
style.css
*{
padding:0;
margin:0;
}
h1{
background:#ff0000;
text-align:center;
margin:10px;
padding:5px;
color:#ffffff;
border-radius:5px;
font-size:16px;
border:1px solid #aa0000;
}
#result{
width:80%;
text-align:center;
margin:0 auto;
background:#eeeeee;
border:1px solid #cccccc;
padding:10px;
border-radius:10px;
line-height:1.8;
}
これで表示と各ファイルの準備が整いました。
あとは、JavaScriptをごりごり書いていきましょう。
