インソースマーケティングデザイン
2016.06.02 システム
HTML5アプリ開発フレームワーク「Monaca」でおみくじ作り
お久しぶりです、バックエンドエンジニアの伊澤です。
最近html5アプリ開発のフレームワーク「Monaca」に触る機会がありましたので、
少し勉強をしておりました。
Monaca
https://ja.monaca.io/
いくつかの制作フローはありますが、まずは慣れるために簡単なものを触るのがいいと思いますので、ひとまずサンプルを見てみる事にしましょう。
基本的にhtml css javascriptで動くようになってますので、わかりやすい「おみくじのテンプレート」をチョイス。
今回はこのおみくじのランダム部分を変更して遊んでみる事にします。
初期画面
ボタンを押すと遷移（大吉・中吉・平のランダムで3パターン）
やり直すともう一度おみくじをやり直し
と、おみくじサンプルの機能は以上です。
おみくじの肝であるランダム部分を見てみましょう。
var dice = Math.floor(Math.random() * 3);
var image_name;
if (dice == 0) {
image_name = “omikuji-daikichi.png”;
} else if (dice == 1) {
image_name = “omikuji-chuukichi.png”;
} else {
image_name = “omikuji-hei.png”;
}
document.getElementById(“saisyo”).style[“display”] = “none”;
document.getElementById(“kekka”).src = “images/” + image_name;
document.getElementById(“kekka”).style[“display”] = “inline”;
document.getElementById(“button”).src = “images/omikuji-btn-yarinaosu.png”;
}
omikuji-daikichi.png
omikuji-chuukichi.png
omikuji-hei.png
画像が3パターンありますね。
ここに、1パターン追加してみます。
追加したものがこちら
var dice = Math.floor(Math.random() * 4);
var image_name;
if (dice == 0) {
image_name = “omikuji-daikichi.png”;
} else if (dice == 1) {
image_name = “omikuji-chuukichi.png”;
} else if (dice == 2) {
image_name = “omikuji-hazure.png”;
} else {
image_name = “omikuji-hei.png”;
}
document.getElementById(“saisyo”).style[“display”] = “none”;
document.getElementById(“kekka”).src = “images/” + image_name;
document.getElementById(“kekka”).style[“display”] = “inline”;
document.getElementById(“button”).src = “images/omikuji-btn-yarinaosu.png”;
}
用意した画像はこちら。
images/ に追加しましょう。
はずれ、こんな神社あったらガッカリ度は凶越えです。
無いと信じたいです。
実際に見てみましょう。
完成したのに「はずれ」でガッカリです。
いかがでしたでしょうか。かなり簡素な説明になったと思いますが、完成までに使った時間は画像を含めて10分かからないぐらいです。
興味を持たれた方はぜひ触ってみて下さい。
Onsen UIを使ったコーディングなどはまた後日に。
それでは。
