mr_eyecatch_izawa2
マリンロード

2016.6.2システム開発 

マリンロード

HTML5アプリ開発フレームワーク「Monaca」でおみくじ作り

お久しぶりです、バックエンドエンジニアの伊澤です。

最近html5アプリ開発のフレームワーク「Monaca」に触る機会がありましたので、
少し勉強をしておりました。

Monaca
https://ja.monaca.io/

いくつかの制作フローはありますが、まずは慣れるために簡単なものを触るのがいいと思いますので、ひとまずサンプルを見てみる事にしましょう。
基本的にhtml css javascriptで動くようになってますので、わかりやすい「おみくじのテンプレート」をチョイス。
今回はこのおみくじのランダム部分を変更して遊んでみる事にします。

初期画面
omikuji01
ボタンを押すと遷移(大吉・中吉・平のランダムで3パターン)
omikuji02
やり直すともう一度おみくじをやり直し

と、おみくじサンプルの機能は以上です。
おみくじの肝であるランダム部分を見てみましょう。

function omikuji (){
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パターン追加してみます。

追加したものがこちら

function omikuji (){
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/ に追加しましょう。

omikuji-hazure

はずれ、こんな神社あったらガッカリ度は凶越えです。
無いと信じたいです。

実際に見てみましょう。

omikuji03

完成したのに「はずれ」でガッカリです。

いかがでしたでしょうか。かなり簡素な説明になったと思いますが、完成までに使った時間は画像を含めて10分かからないぐらいです。
興味を持たれた方はぜひ触ってみて下さい。

Onsen UIを使ったコーディングなどはまた後日に。
それでは。

現役ウェブ解析士が教えるWebサイトの読み解き方 イメージ
システム開発サービスはこちら
ページTOPへ