読者です 読者をやめる 読者になる 読者になる

Hope is a Dream. Dream is a Hope.

非公開ふぃふぃ工房ブログ

↓LINE登録はこちら↓

定期的につぶやいてます. 記事に興味を持って頂いたかたや、Line Botを使ってみたいかたは試しに登録どうぞ

友だち追加

はじめてのmonaca..

WEB

<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>&lt;!DOCTYPE HTML&gt;</p>

<p>&lt;html&gt;</p>

<p>&lt;head&gt;</p>

<p> &lt;meta charset="utf-8"&gt;</p>

<p> &lt;script src="plugins/plugin-loader.js"&gt;&lt;/script&gt;</p>

<p> &lt;link rel="stylesheet" href="plugins/plugin-loader.css"&gt;</p>

<p> &lt;style&gt;</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> &lt;/style&gt;</p>

<p> &lt;script&gt;</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> &lt;/script&gt;</p>

<p>&lt;/head&gt;</p>

<p>&lt;body&gt;</p>

<p> &lt;div id="hako"&gt;</p>

<p> &lt;img id="saisyo" src="images/omikuji-box.png" /&gt;</p>

<p> &lt;img id="kekka" style="display : none;"/&gt;</p>

<p> &lt;/div&gt;</p>

<p> &lt;div id="bottombar"&gt;</p>

<p> &lt;img id="bottom" src="images/omikuji-btn-hajimeru.png"

onclick="omikuji()"&gt;</p>

<p> &lt;/div&gt;</p>

<p> </p>

<p>&lt;/body&gt;</p>

<p>&lt;/html&gt;</p>

<p> </p>