Skip to content

Latest commit

 

History

History
133 lines (70 loc) · 7.61 KB

app_omikuji.md

File metadata and controls

133 lines (70 loc) · 7.61 KB

おみくじアプリ

おみくじ占いアプリ - Monaca Docs https://docs.monaca.io/ja/sampleapp/samples/omikuji/

このアプリを作るのがゴールです。

プロジェクトの作成

上記のようにMonacaにはすでにおみくじアプリのテンプレートがありますが、今回は、これを空のプロジェクトから順に作っていきます。 プロジェクトの新規作成から「No Framework」→「最小限のテンプレート」を選んでプロジェクトを作成してください。

newproject

プロジェクトを開くと、下記のように、最小限のコードが書かれたプロジェクトとなっています。ここにアプリケーションのためのコードを書いていきます。

omikuji-001

画像のアップロード

まず、アプリで使う画像を用意しましょう。

下記にアプリ内で使う7ファイルをアップしてあるので、ダウンロードしておいてください。zipファイルを展開すると7つの画像があります。

https://s3-ap-northeast-1.amazonaws.com/tohokutechdojo-koriyama/monaca-omikuji/omikuji-images.zip

画像はwwwフォルダの下のimagesフォルダの中に置きたいので、まずimagesフォルダを作ります。 下記の画像のようにwwwフォルダのところで右クリックして、「新規フォルダー」を選び、「images」というフォルダを作ってください。

omikuji-002

フォルダができたら、そのimagesフォルダの上で右クリックして、アップロードを選択して、画像をアップロードします。

omikuji-003

下記のようになれば画像のアップロードは完了です。

omikuji-004

HTMLのコーディング

bodyタグ内に下記のコードを入力していきます。

omikuji-005

JavaScriptのコーディング

headタグ内のscriptタグ内に下記のコードを入力していきます。

omikuji-006

ここまででアプリは最低限動作します。画面上部の「保存」を押して、「プレビュー」を押し、右のプレビューウィンドウからアプリの動作確認をしてみてください。スマホの実機がある人は、実機デバッグもしてみてください。

CSSのコーディング

最後にCSSを書いて、見た目の整頓を行います。さきほど書いたscriptのすぐ下に、下記のように入力していきます。

omikuji-007

JavaScript, CSSを外部ファイルにする

以上でアプリのコーディングはいったん完成し、冒頭で見たサンプルアプリとほぼ同じ状態になっています。 ただし、このサンプルアプリには、index.htmlというHTMLファイルの中に、JavaScriptもCSSも記述してしまっているという、ややまずい点があるので、 改善しましょう。

まず、cssの外部ファイルはstyle.cssというものがあるので、それを使います。styleタグ内に記載した内容を、style.css内にカット＆ペーストしてください。

画像のパス（そのコードが記述されたファイルから見たときの画像ファイルの位置が変わっているので、2行目の

background-image: url("images/omikuji-bg.png");

を

background-image: url("../images/omikuji-bg.png");

に修正します。

下記のようになればOKです。

2016-07-16 09 41 37

次にJavaScriptも外部ファイルに移しましょう。

wwwフォルダの下に、jsフォルダを作り、その中で新規ファイルを作成して、omikuji.jsと名前をつけます。

omikuji-009

scriptタグ内の中身をカット＆ペーストします。

2016-07-16 09 32 49

JavaScriptのイベント登録もJavaScript内で行うようにリファクタリングする

このアプリでは、「はじめる」を押したときにおみくじを発動する、というJavaScriptイベントを登録していますが、現時点ではその指定はonClick='omikuji'というようにHTMLファイルに記述されてしまっています。

このアプリではこのクリックイベント1つしかないので問題になりませんが、たくさんボタンがあってそれを1つ1つのボタンに記述していると、コードが込み入ってきてよくわからなくなってしまいます。

HTMLファイルは構造だけを記述するべきなので、このコードもさきほど作ったomikuji.jsのほうに移動してみましょう。

まずHTMLファイルのほうから、onClickイベント部分の記述は削除します。

2016-07-16 10 05 16

そして、omikuji.jsのほうに以下の4行を追加します。

2016-07-16 10 14 27

これでもう一度動作確認を行ってみましょう。さきほどと同じようにおみくじアプリが動作しました。

なお、この4行部分は、下記のように書いてもほぼ同じように動作します。

window.onload = function() {
    var button = document.getElementById("button");
    button.addEventListener("click", omikuji, false);
}

どちらを記述してもOKですが、document.addEventListener('DOMContentLoaded'を使うほうが、どちらかというと望ましいようです。

このように、ソースコードの移動や整理を行って、よりよいコードに直す作業をリファクタリングといいます。

課題

  • 「吉」「凶」の画像を用意しました。「平」を消して、「大吉」「中吉」「吉」「凶」の4つからどれかが出るようにアプリを修正してみてください。

https://s3-ap-northeast-1.amazonaws.com/tohokutechdojo-koriyama/monaca-omikuji/omikuji-kichi.png
https://s3-ap-northeast-1.amazonaws.com/tohokutechdojo-koriyama/monaca-omikuji/omikuji-kyou.png