はじめてのmonaca..
<p>ハイブリッドアプリを作りたくて、monacaの勉強をすることにした。</p>
<p>とりあえず、サンプルコードが10個ほどあったので、まず一つ目をやってみた
。</p>
<p> </p>
<h4>Tips</h4>
<p>コードは短いが写しをすると動かない。。</p>
<p> </p>
<p>症状</p>
<p>背景全体が上方向にずれている。</p>
<p>始めのおみくじBoxが表示されない。</p>
<p>以降のゲームも始まらない。</p>
<p>原因</p>
<p> // Set virtual screen width size to 640 pixels</p>
<p> monaca.viewport({width: "640"}); //間違い</p>
<p> monaca.viewport({width: "480"}); //正しい</p>
<p>コードをいじっている時にviewportのサイズをいじってた見たい。。</p>
<p>http://tech.nitoyon.com/ja/blog/2013/02/15/viewport/</p>
<table style="margin: 1em 1em 1em 2em; padding: 0px; border: 1px solid
#666666; font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3',
メイリオ, Meiryo, 'MS Pゴシック', Helvetica, Arial, Verdana,
sans-serif; line-height: 19.200000762939453px; font-size: 16px;
vertical-align: baseline; border-collapse: collapse; border-spacing: 0px;
-webkit-box-shadow: #cccccc 0px 4px 10px; box-shadow: #cccccc 0px 4px
10px; color: #000000; background-color: #fef9ef;">
<thead style="margin: 0px; padding: 0px; border: 0px; font-family:
inherit; font-style: inherit; font-variant: inherit; font-weight: inherit;
line-height: inherit; vertical-align: baseline;">
<tr style="margin: 0px; padding: 0px; border: 0px; font-family: inherit;
font-style: inherit; font-variant: inherit; font-weight: inherit;
line-height: inherit; vertical-align: baseline;"><th style="margin: 0px;
padding: 0.5em 1em; border: 1px solid #666666; font-family: inherit;
font-style: inherit; font-variant: inherit; line-height: inherit;
vertical-align: middle; text-align: center; background-color: #eeeee9;">世
代</th><th style="margin: 0px; padding: 0.5em 1em; border: 1px solid
#666666; font-family: inherit; font-style: inherit; font-variant: inherit;
line-height: inherit; vertical-align: middle; text-align: center;
background-color: #eeeee9;">解像度</th><th style="margin: 0px; padding:
0.5em 1em; border: 1px solid #666666; font-family: inherit; font-style:
inherit; font-variant: inherit; line-height: inherit; vertical-align:
middle; text-align: center; background-color: #eeeee9;" align="right">縦向
き</th><th style="margin: 0px; padding: 0.5em 1em; border: 1px solid
#666666; font-family: inherit; font-style: inherit; font-variant: inherit;
line-height: inherit; vertical-align: middle; text-align: center;
background-color: #eeeee9;" align="right">横向き</th></tr>
</thead>
<tbody style="margin: 0px; padding: 0px; border: 0px; font-family:
inherit; font-style: inherit; font-variant: inherit; font-weight: inherit;
line-height: inherit; vertical-align: baseline;">
<tr style="margin: 0px; padding: 0px; border: 0px; font-family: inherit;
font-style: inherit; font-variant: inherit; font-weight: inherit;
line-height: inherit; vertical-align: baseline;">
<td style="margin: 0px; padding: 0.5em 1em; border: 1px solid #666666;
font-family: inherit; font-style: inherit; font-variant: inherit;
line-height: inherit; vertical-align: middle; background-color:
white;">iPhone 1〜3</td>
<td style="margin: 0px; padding: 0.5em 1em; border: 1px solid #666666;
font-family: inherit; font-style: inherit; font-variant: inherit;
line-height: inherit; vertical-align: middle; background-color:
white;">320px ? 480px</td>
<td style="margin: 0px; padding: 0.5em 1em; border: 1px solid #666666;
font-family: inherit; font-style: inherit; font-variant: inherit;
line-height: inherit; vertical-align: middle; background-color: white;"
align="right">32.7%</td>
<td style="margin: 0px; padding: 0.5em 1em; border: 1px solid #666666;
font-family: inherit; font-style: inherit; font-variant: inherit;
line-height: inherit; vertical-align: middle; background-color: white;"
align="right">49.0%</td>
</tr>
<tr style="margin: 0px; padding: 0px; border: 0px; font-family: inherit;
font-style: inherit; font-variant: inherit; font-weight: inherit;
line-height: inherit; vertical-align: baseline;">
<td style="margin: 0px; padding: 0.5em 1em; border: 1px solid #666666;
font-family: inherit; font-style: inherit; font-variant: inherit;
line-height: inherit; vertical-align: middle; background-color:
white;">iPhone 4</td>
<td style="margin: 0px; padding: 0.5em 1em; border: 1px solid #666666;
font-family: inherit; font-style: inherit; font-variant: inherit;
line-height: inherit; vertical-align: middle; background-color:
white;">640px ? 960px</td>
<td style="margin: 0px; padding: 0.5em 1em; border: 1px solid #666666;
font-family: inherit; font-style: inherit; font-variant: inherit;
line-height: inherit; vertical-align: middle; background-color: white;"
align="right">65.3%</td>
<td style="margin: 0px; padding: 0.5em 1em; border: 1px solid #666666;
font-family: inherit; font-style: inherit; font-variant: inherit;
line-height: inherit; vertical-align: middle; background-color: white;"
align="right">98.0%</td>
</tr>
<tr style="margin: 0px; padding: 0px; border: 0px; font-family: inherit;
font-style: inherit; font-variant: inherit; font-weight: inherit;
line-height: inherit; vertical-align: baseline;">
<td style="margin: 0px; padding: 0.5em 1em; border: 1px solid #666666;
font-family: inherit; font-style: inherit; font-variant: inherit;
line-height: inherit; vertical-align: middle; background-color:
white;">iPhone 5</td>
<td style="margin: 0px; padding: 0.5em 1em; border: 1px solid #666666;
font-family: inherit; font-style: inherit; font-variant: inherit;
line-height: inherit; vertical-align: middle; background-color:
white;">640px ? 1,136px</td>
<td style="margin: 0px; padding: 0.5em 1em; border: 1px solid #666666;
font-family: inherit; font-style: inherit; font-variant: inherit;
line-height: inherit; vertical-align: middle; background-color: white;"
align="right">65.3%</td>
<td style="margin: 0px; padding: 0.5em 1em; border: 1px solid #666666;
font-family: inherit; font-style: inherit; font-variant: inherit;
line-height: inherit; vertical-align: middle; background-color: white;"
align="right">116.0%<br /><br /></td>
</tr>
</tbody>
</table>
<h4>index.html</h4>
<p><!DOCTYPE HTML></p>
<p><html></p>
<p><head></p>
<p> <meta charset="utf-8"></p>
<p> <script src="plugins/plugin-loader.js"></script></p>
<p> <link rel="stylesheet" href="plugins/plugin-loader.css"></p>
<p> <style></p>
<p> body{</p>
<p> background: url("images/omikuji-bg.png") 100% 100%;</p>
<p> margin: 0;</p>
<p> padding : 0;</p>
<p> text-align : center;</p>
<p> }</p>
<p> #hako{</p>
<p> position: absolute;</p>
<p> width: 100%;</p>
<p> top: 100%;</p>
<p> background-color : #f00;</p>
<p> }</p>
<p> #bottombar{</p>
<p> position: absolute;</p>
<p> bottom: 30px;</p>
<p> width : 100%;</p>
<p> }</p>
<p> </style></p>
<p> <script></p>
<p> // Set virtual screen width size to 640 pixels</p>
<p> monaca.viewport({width: "480"});</p>
<p> function omikuji (){</p>
<p> var dice = Math.floor(Math.random()*3);</p>
<p> var image_name;</p>
<p> if (dice == 0){</p>
<p> image_name = "omikuji-daikichi.png";</p>
<p> }else if(dice == 1){</p>
<p> image_name = "omikuji-chuukichi.png";</p>
<p> }else{</p>
<p> image_name = "omikuji-hei.png";</p>
<p> }</p>
<p> document.getElementById("saisyo").style["display"] =
"none"; // omikuji-box.png</p>
<p> </p>
<p> // 結果画像の更新</p>
<p> document.getElementById("kekka").src =
"images/"+image_name; //結果画像の選択表示</p>
<p> document.getElementById("kekka").style["display"] =
"inline"; //結果画像をinlineで表示</p>
<p> </p>
<p> // ボタンの表示をやり直すに変更</p>
<p> document.getElementById("button").src =
"images/omikuji-btn-yarinaosu.png";</p>
<p> }</p>
<p> </script></p>
<p></head></p>
<p><body></p>
<p> <div id="hako"></p>
<p> <img id="saisyo" src="images/omikuji-box.png" /></p>
<p> <img id="kekka" style="display : none;"/></p>
<p> </div></p>
<p> <div id="bottombar"></p>
<p> <img id="bottom" src="images/omikuji-btn-hajimeru.png"
onclick="omikuji()"></p>
<p> </div></p>
<p> </p>
<p></body></p>
<p></html></p>
<p> </p>