書籍『monacaで学ぶはじめてのプログラミング』 講義スライド第2弾(体験版)
Post on 15-Apr-2017
575 views
TRANSCRIPT
Copyright © Asial Corporation. All Rights Reserved.
はじめてのプログラミング
実践編
で学ぶ
Copyright © Asial Corporation. All Rights Reserved.
はじめに
2
Copyright © Asial Corporation. All Rights Reserved.
はじめに
Monaca Education事業のご紹介
Monacaとは
└ ブラウザだけで本格的なアプリ開発ができるサービスです
Monaca Education事業
└ アプリ開発による実践的なプログラミング教育を支援します
• 教材の開発と提供
• 教育用ライセンスの提供
• 各種トレーニングの実施
3
https://edu.monaca.io/
Copyright © Asial Corporation. All Rights Reserved.
はじめに
このスライドについて
書籍『Monacaで学ぶはじめてのプログラミング』全12章相当の学習
が完了している方を対象とした講義用スライドです。
サンプルアプリ開発を中心とした内容となっており、より実践的なア
プリ構築手法を学ぶことができます。
4
https://ja.monaca.io/book/001/
Copyright © Asial Corporation. All Rights Reserved.
はじめに
目次
5
コマ番号 タイトル 要素技術
第1回 オリエンテーション Monaca
第2回 おみくじアプリを作ろう HTML/CSS/Javascript
第3回 おみくじアプリを改造しよう ハードウェア機能
第4回 宝当てゲームを作ろう 関数
第5回 宝当てゲームを改造しよう ローカルストレージ
第6回 Yes/No チャートアプリを作ろう Onsen UI
第7回 道路標識暗記アプリを作ろう JSON
第8回 アンケートアプリを作ろうニフティクラウドmobile
backend(サーバ連携)
第9回 地図アプリを作ろう Yahoo! 地図API
第10回 位置情報共有アプリを作ろう 総括
Copyright © Asial Corporation. All Rights Reserved.
はじめに
利用について
第3回分まではスライドシェアにて無料で公開しております
└ ダウロードや再配布はできません
└ 授業や勉強会・セミナーでお使い頂いて構いません
第10回分まで利用したい場合
└ Monacaの利用を表明して頂ける教育機関(学校教育法で定めら
れた教育機関)に無料提供しています。
└ その他の教育機関も別途相談に応じます
└ お問い合わせはMonacaのサイトにて受け付けております
• https://ja.monaca.io/support/inquiry.html
6
Copyright © Asial Corporation. All Rights Reserved.
第1回 オリエンテーション
7
Copyright © Asial Corporation. All Rights Reserved.
Monacaのアカウント登録
8
Copyright © Asial Corporation. All Rights Reserved.
Monaca のアカウント登録
1) 公式サイト URL にアクセス
https://ja.monaca.io/
第1章
9
Copyright © Asial Corporation. All Rights Reserved.
Monaca のアカウント登録
2) 「サインアップ」からメールアドレスとパスワードを登録
第1章
10
Copyright © Asial Corporation. All Rights Reserved.
Monaca のアカウント登録
3) 仮登録完了メールを確認
メールに記載されたURL にアクセス
登録完了
第1章
11
Copyright © Asial Corporation. All Rights Reserved.
ダッシュボードとプロジェクト
12
Copyright © Asial Corporation. All Rights Reserved.
Monaca ダッシュボードとプロジェクト
ログインとダッシュボードの表示
開発中のアプリはプロジェクト単位で管理を行う
└ 画面左側に一覧表示される
第1章
13
Copyright © Asial Corporation. All Rights Reserved.
Monaca ダッシュボードとプロジェクト
新規プロジェクト作成
1)『新規プロジェクト』ボタンをクリック
2)プロジェクト名を設定
3)『プロジェクトを作成する』ボタンをクリック
第1章
14
Copyright © Asial Corporation. All Rights Reserved.
Monaca ダッシュボードとプロジェクト
プロジェクト一覧に表示されれば成功
プロジェクト名
└ 自由に設定可能
└ 後で管理しやすいように気をつける
第1章
15
Copyright © Asial Corporation. All Rights Reserved.
Monaca IDEの使い方
16
Copyright © Asial Corporation. All Rights Reserved.
プログラムを記述する
Monaca IDE
IDEは統合開発環境の略
正式には「Integrated Development Environment」
第1章
17
Copyright © Asial Corporation. All Rights Reserved.
プログラムを記述する
コードエディター
プログラムを記述するためのパネル
第1章
18
Copyright © Asial Corporation. All Rights Reserved.
プログラムを記述する
メニューバー
各種機能を呼び出す
└ 保存
└ ダウンロード
└ ビルドなど
第1章
19
Copyright © Asial Corporation. All Rights Reserved.
プログラムを記述する
プレビュー
プログラムの実行結果が表示されます。
第1章
20
Copyright © Asial Corporation. All Rights Reserved.
プログラムを記述する
はじめてのプログラム
「This is a template for Monaca app.」を削除
「はじめてのプログラム」と記述
メニューバーの[保存]をクリック
第1章
21
Copyright © Asial Corporation. All Rights Reserved.
プログラムを記述する
プレビューの更新
[保存]と連動してプレビュー画面が自動更新される
自動で更新されない場合
└ プレビュー画面右上の青い矢印ボタンをクリック
第1章
22
Copyright © Asial Corporation. All Rights Reserved.
Monacaデバッガーの利用
23
Copyright © Asial Corporation. All Rights Reserved.
Monaca デバッガーの利用
Monaca デバッガーとは
アプリの動作を確認するツール
プレビューより高度な動作確認が可能
└ カメラやコンパスなどのハードウェア機能
第1章
24
Copyright © Asial Corporation. All Rights Reserved.
Monaca デバッガーの利用
Monaca デバッガーのメニュー
プロジェクトを開きアプリの動作を確認
丸いMonacaボタンはメニュー
└ 更新やログの確認が可能
第1章
25
Copyright © Asial Corporation. All Rights Reserved.
Educationプランの有効化
26
Copyright © Asial Corporation. All Rights Reserved.
プランのアップグレード
Educationプランとは
作成可能なプロジェクト数が20件に増えます。
共有開発機能が利用可能になります。
• Monacaにログインし、ダッシュボード下部の「アクティベーション
コード」ボタンをクリックします。
27
Copyright © Asial Corporation. All Rights Reserved.
プランのアップグレード
28
氏名、電話番号(学校の番号)を入力します。
Copyright © Asial Corporation. All Rights Reserved.
プランのアップグレード
29
書籍の裏表紙についているカードを剥がし、裏面に記載さ
れている16桁のアクティベーションコードを入力します。
Copyright © Asial Corporation. All Rights Reserved.
プランのアップグレード
30
「適用する」ボタンを押したら完了です。
Copyright © Asial Corporation. All Rights Reserved.
プランのアップグレード
31
「ダッシュボード」をクリックして前の画面に戻ります。
Copyright © Asial Corporation. All Rights Reserved.
第2回 おみくじアプリを作ろう
32
Copyright © Asial Corporation. All Rights Reserved.
おみくじアプリを作成する
サンプルアプリ開発を通じて、HTML/CSS/JavaScriptの
役割を確認します。
おみくじを模したアプリケーション
ボタンを押すとランダムな画像を表示する
33
Copyright © Asial Corporation. All Rights Reserved.
必要な技術
Monacaでモバイルアプリを開発するには、Webの技術で
あるHTML・CSS・JavaScriptの知識が必要になります。
HTML(文書構造)
CSS(文書の装飾)
JavaScript(動きをつける)
34
Copyright © Asial Corporation. All Rights Reserved.
事前準備
下記のURLにアクセスして素材となるZIPファイルを入手
してください。
■ 素材集ページ
https://ja.monaca.io/book/001/
おみくじアプリの「ひな形」をクリックしてダウンロード
します。
35
Copyright © Asial Corporation. All Rights Reserved.
新しいプロジェクトを作成する
Monaca に ロ グ イ ン し 、 ダ ッ シ ュ ボ ー ド で 「 Import
Project」ボタンを選択します。
36
Copyright © Asial Corporation. All Rights Reserved.
新しいプロジェクトを作成する
1.名前と説明(任意入力)を設定して新規プロジェクトを
作成します
プロジェクト名:おみくじアプリ
2.「プロジェクトのパッケージをアップロード」ラジオボ
タンにチェックを入れ、先ほどダウンロードしたzipファ
イルを指定します。
3.「インポート」ボタンをクリックします。
37
Copyright © Asial Corporation. All Rights Reserved.
HTMLタグの確認
Monaca IDEのindex.htmlの<body>タグ内を確認して
ください。
<body>
<img src="images/omikuji-box.png" id="omikuji">
<button id="playBtn" onclick="play()">おみくじをひく</button>
</body>
38
Copyright © Asial Corporation. All Rights Reserved.
HTML
HTMLでは、コンテンツ(ページに表示する内容)を見出
しや段落などのパーツに分け、それぞれを1つの部品とし
て構成しています。この部品を「要素」と呼びます。
<h1> HTML入門 </h1>
開始タグ終了タグ
要素
タグは半角英数小文字で記述
終了タグには「 / 」が入る
開始タグから終了タグまでを「要素」と呼ぶ
39
Copyright © Asial Corporation. All Rights Reserved.
<body>タグ内に記述するタグの種類
主なタグの一覧
40
タグ名 概要
h1見出しを定義します。h1~h6まであり、h1が最も高レベル、h6が最
も低レベルな見出しです。
img画像を参照します。
src属性・・・画像の参照先を指定します。
div特に意味を持たないタグです。複数のタグをまとめて扱うときや、四角い枠を描画したいときに使います。
aリンクを定義します。
href属性・・・リンク先のURLを指定します。
button ボタンを定義します。
Copyright © Asial Corporation. All Rights Reserved.
タグの属性
要素対して「属性」をつけることで、付加情報を与えるこ
とができます。
<h1 id="guide_to_html"> HTML入門 </h1>
属性名
属性
属性値
<h1>タグに要素を識別するためのID属性を指定しています。
IDの他にも、適用するCSSや画像のパス、リンク先のURLなど様々な属性を指
定できます。
属性値は「"」(ダブルクォート)か「'」(シングルクォート)で囲みます。
41
Copyright © Asial Corporation. All Rights Reserved.
CSSの確認
css/style.cssの記述を確認してください
body {
background-image : url("../images/omikuji-bg.png");
background-size : cover;
background-repeat: no-repeat;
margin : 0;
padding : 0;
height: 100%;
width: 100%;
text-align: center;
}
#omikuji{
margin: 20px;
width : 60%;
}
#playBtn {
width: 60%;
padding: 10px;
font-size: 22px;
border-radius: 10px;
background-color: #444444;
color: white;
outline: none;
}
42
Copyright © Asial Corporation. All Rights Reserved.
CSSとは
CSS(Cascading Style Sheets)とは
HTML文章を装飾するための技術
色やサイズなどを変更できる
43
HTML(文書構造)
CSS(文書の装飾)
HTMLファイルにCSSファイルを読み込むことで、ページにデザインが適用される
Copyright © Asial Corporation. All Rights Reserved.
CSSとは
CSSをHTMLファイルに読み込む方法(外部ファイル)
linkタグを記述
href属性でパスを指定する
例
44
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="CSSファイルのパス">
文法 CSSファイルの読み込み
Copyright © Asial Corporation. All Rights Reserved.
CSSの記述構造(セレクタ・プロパティ・値)
CSSを指定する記述は、スタイル(デザイン)を適用する
対象の「セレクタ」と、スタイルの種類を表す「プロパ
ティ」の組み合わせによって構成されます。
h1 { color: red; }
セレクタ スタイルを適用する対象(タグ名、クラス名、IDなどを指定できます)
プロパティ 色やサイズなどの、スタイルの種類
値 属性の値
セレクタ プロパティ 値
45
Copyright © Asial Corporation. All Rights Reserved.
色を指定するプロパティ
プロパティ 説明 例
color 文字色を設定します。 color: red;
background-color 背景色を設定します。 background-color: red;
プロパティの種類
46
Copyright © Asial Corporation. All Rights Reserved.
色の指定方法
カラーコード
光の三原色で色を作る方法
カラーコードでは16進数を使う
カラーコードの例
紫の色を作る
└ 赤がff(255)緑が00(0)青がff(255)
└ 原色の赤と青を混ぜた色=紫になる
47
#ff00ff
Copyright © Asial Corporation. All Rights Reserved.
サイズや位置を指定するプロパティ
プロパティ 説明 例
font-size 文字のサイズを設定します。font-size: 12px;
text-align要素内の横方向の配置を設
定します。
text-align: left;(左寄せ)text-align: right;(右寄せ)text-align: center;(中央揃え)text-align: justify;(均等割付)
width 要素の横幅を設定します。 width: 100px
height 要素の高さを設定します。 height: 300px;
margin枠線の外側の余白を設定します。
margin: 20px;
padding枠線の内側の余白を設定します。
padding: 10px;
プロパティの種類
48
Copyright © Asial Corporation. All Rights Reserved.
プロパティの種類
marginとpadding
どちらも余白の幅を指定するプロパティ
marginはborder(枠線)の外側の余白
paddingはborderの内側の余白
49
要素
内容内容内容内容内容内容内容内容内容内容内容内容
margin padding
Copyright © Asial Corporation. All Rights Reserved.
背景に関するプロパティ
プロパティ 説明 例
background-image 背景画像を設定します。
background-image: url("
画像のパス");
background-size背景画像の表示サイズを設
定します。
background-size: cover;
※coverは背景領域を完全に覆うように、拡大表示します。
background-repeat
背景画像を繰り返し表示するかどうかを設定します。
background-repeat: no-repeat;
※no-repeatは、背景画像を一枚だけ表示します。
プロパティの種類
50
Copyright © Asial Corporation. All Rights Reserved.
パスの指定方法
パスの指定方法
対象ファイルまでの位置を相対的に指定する方法
└ フォルダ間の区切り文字に「/」を使用
└ 上位のフォルダは「..」で表す
51
いまここ
一つ上(..)
Copyright © Asial Corporation. All Rights Reserved.
枠線に関するプロパティ
プロパティ 説明 例
border線の色(および線種と線 の太さ)を設定します。
border: solid 1px red;
線種、線の太さ、線の色の順に 設定します。
※solidは直線を表します。
border-radius四角形の枠の角を丸くする
設定をします。border-radius: 10px;
outline 枠の縁取りを設定します。
outline: none;
※noneは縁取りを表示しない設定です。これを指定しないと、スマホではボタンの周りにオレンジの枠が表示されてしまいます。
プロパティの種類
52
Copyright © Asial Corporation. All Rights Reserved.
border-radiusの設定
border-radiusの設定
border-radiusに10pxを指定すると、以下のように半径10px
分のカーブがつきます。
53
Copyright © Asial Corporation. All Rights Reserved.
結果を表示する方法
HTMLとCSSだけでは、おみくじに使うランダムな値を生
成することができません。
JavaScriptを用いて、ランダムに結果が表示されるよう改
良していきます。
54
Copyright © Asial Corporation. All Rights Reserved.
スクリプトの実装
<script>タグ内にJavaScriptを記述します。
<script>
function play() {
var no = Math.floor(Math.random() * 5);
var image_name;
if (no == 0) {
image_name = "daikichi.png";
} else if (no == 1) {
image_name = "chuukichi.png";
} else if (no == 2) {
image_name = "shoukichi.png";
} else if (no == 3) {
image_name = "suekichi.png";
} else {
image_name = "kyou.png";
}
alert("おみくじが出ました!さて結果は?");
document.getElementById("omikuji").src = "images/" + image_name;
document.getElementById("playBtn").innerHTML = "やりなおす";
}
</script>
55
Copyright © Asial Corporation. All Rights Reserved.
JavaScr iptの書き方
JavaScript書き方のルール
基本的に半角の英数字と記号のみを使用する
└ 「'」か「"」で囲まれた範囲と、コメント「//」のみ全角文字も可
大文字と小文字は別の文字として扱われる
命令文の末尾には「;」をつける。
ひとまとまりの命令群を波かっこ{ } で囲む
└ 囲まれた範囲をブロックと呼ぶ
└ ブロック内は、先頭にタブ文字(tabキー)を挿入してブロックの
開始と終了がわかりやすいように記述する
改行や半角スペースは自由に挿入できる
56
Copyright © Asial Corporation. All Rights Reserved.
JavaScr ipt -イベント-
イベントとは
ページ上で発生した出来事(ページが表示された、ボタンがクリック
された等)のことをイベントといいます。
ボタンがタップされたときのイベントの名称は「click」イベントです。
ブラウザ イベントハンドラ JavaScript
click
① イベントが発生する
② イベントハンドラがイベントの発生を検知する
③ イベントハンドラに関連付けられた処理が呼び出される
イベント発生時の流れ
57
Copyright © Asial Corporation. All Rights Reserved.
JavaScr ipt -イベントハンドラ-
イベントハンドラ
イベントハンドラは、イベントとJavaScriptの処理を関連付ける仕組
みです。
HTMLタグの属性として記述します。
イベントハンドラの名前は、「on + イベント名」です。
<script>function sayHello() {
alert("Hello!");}
</script>
<body><button onclick="sayHello();">おしてね!</button>
</body>
イベントハンドラの例
58
Copyright © Asial Corporation. All Rights Reserved.
JavaScr iptの文法 -関数-
関数とは
一連の処理をまとめて名前をつけたものを関数といいます。
処理を関数として定義しておくことで、必要なときに何度でも呼び出
すことができます。
function 関数名 () {
実行される処理;
}
関数の作り方
関数名() ;
関数の呼び出し方
59
Copyright © Asial Corporation. All Rights Reserved.
JavaScr iptの文法 -変数-
変数とは
データを一時的に入れておくための箱のような仕組みです。
変数を利用する前の準備として、まず変数の「宣言」を行います。
変数に値を入れることを「代入」といいます。
var a; …①
a = 10; …②
a = 20; …③ a
① aという名前の変数が作られる
② 変数aの中に10 が代入される
10a
③ 変数aの中身が20に上書きされる
20a10×NEW
var 変数名;
宣言の書式
変数 = 値;
代入の書式
60
Copyright © Asial Corporation. All Rights Reserved.
ランダムに結果を出す方法を考える
ランダムな値を得る方法
Math.random()関数を呼ぶと、0から0.99999(1未満)の範囲の実数を返しま
す。
その結果を5倍し、Math.floor()関数で小数部分を切り捨てます。これによっ
て0~4の5通りの数字が作られます。
■ ランダム関数の使用例
Math.floor(Math.random() * 5)
61
Copyright © Asial Corporation. All Rights Reserved.
JavaScr iptの文法 - 条件分岐 -
条件分岐
条件が正しいときと正しくないときで、処理内容を振り分ける仕組み
です。
else if文は複数指定することができます。
└ 複数の条件式に合致する場合、実行されるのは最初に合致した条件のみです
if (条件式1) {
// 条件式1がtrueの場合に実行する処理
} else if (条件式2) {
// 条件式2がtrueの場合に実行する処理
} else {
// すべての条件式がfalseの場合に実行する処理
}
条件分岐の例
62
Copyright © Asial Corporation. All Rights Reserved.
ダイアログメッセージの表示
ダイアログの表示
ページの前面に表示されるメッセージウィンドウを「ダイアログ」と
いいます。
63
alert("こんにちは");
Copyright © Asial Corporation. All Rights Reserved.
DOM
DOMとは
DOM(Document Object Model)の略
JavaScriptでHTMLの各要素にアクセスする仕組みです
64
HTML要素へのアクセス
文法 要素へのアクセス
document.getElementById("ID値")
Copyright © Asial Corporation. All Rights Reserved.
DOM
要素の内容変更
65
文法 内容の変更
document.getElementById("ID値").innerHTML = "書き換える内容";
要素の属性変更
文法 属性の変更
例 画像を「flower.jpg」に切り替える
document.getElementById("ID値").属性名 = "属性値";
document.getElementById("target").src = "flower.jpg";
Copyright © Asial Corporation. All Rights Reserved.
第3回 おみくじアプリを改造しよう
66
Copyright © Asial Corporation. All Rights Reserved.
プログラムがうまく動かないときは
67
Copyright © Asial Corporation. All Rights Reserved.
プログラムがうまく動かないときは
68
文法エラーの確認
Monacaデバッガーでプロジェクトを実行すると、文法にエラーが
あった場合にエラーメッセージが表示されます。
index.htmlの33行目付近でエラー発生
Copyright © Asial Corporation. All Rights Reserved.
プログラムがうまく動かないときは
文法エラー以外のバグ(プログラムの間違い)を探すには
文法は間違っていないが、プログラムが意図した通りに動かない、と
いう場合はエラーを検出することができません。
69
if (no == 0) {
image_name = "daikichi.png";
} else if (no == 1) {
image_name = "chuukichi.png";
} else if (no == 2) {
image_nama = "shoukichi.png";
} else if (no == 3) {
image_name = "suekichi.png";
} else {
image_name = "kyou.png";
}
なぜか小吉だけ出ない!
Copyright © Asial Corporation. All Rights Reserved.
プログラムがうまく動かないときは
意図した通りに動かない原因を探す方法
alert()命令をプログラムの途中に差し込んで、どこから動きがおかし
くなっているのか見当をつけます。
70
alert(no);
if (no == 0) {
image_name = "daikichi.png";
} else if (no == 1) {
image_name = "chuukichi.png";
} else if (no == 2) {
image_nama = "shoukichi.png";
} else if (no == 3) {
image_name = "suekichi.png";
} else {
image_name = "kyou.png";
}
alert(image_name);
Copyright © Asial Corporation. All Rights Reserved.
プログラムがうまく動かないときは
console.log
alert()をconsole.log()に変えるとダイアログではなく、編集画面下
のデバッグパネルに表示されます。
71
console.log(no);
if (no == 0) {
image_name = "daikichi.png";
} else if (no == 1) {
image_name = "chuukichi.png";
} else if (no == 2) {
image_nama = "shoukichi.png";
} else if (no == 3) {
image_name = "suekichi.png";
} else {
image_name = "kyou.png";
}
console.log(image_name);
Copyright © Asial Corporation. All Rights Reserved.
端末固有の機能を使ってみよう
72
Copyright © Asial Corporation. All Rights Reserved.
端末固有の機能を使ってみよう
通常、モバイルアプリはOSごとに異なるプログラム言語を
使って開発します。
このようにして作られたアプリを「ネイティブアプリ」と
呼びます。
× ×
73
Copyright © Asial Corporation. All Rights Reserved.
OSに対応する言語
端末固有の機能を使ってみよう
端末固有の機能の呼び出し
Monacaで作られたアプリは、HTML・CSS・JavaScriptファイルを
OSに対応する言語で包んだ形式になっています。
端末固有の機能を利用する場合、JavaScriptで命令を記述すると、
OSに合わせた言語に置き換えられて命令が実行されます。
連絡帳GPSカメラ
HTML・CSS・JavaScript
OS
74
Copyright © Asial Corporation. All Rights Reserved.
端末固有の機能を使ってみよう
navigator.vibrate(振動時間);
※振動時間はミリ秒単位で指定
バイブレーション機能の利用
バイブレーション命令
75
Copyright © Asial Corporation. All Rights Reserved.
端末固有の機能を使ってみよう
おみくじが出たときにバイブレーションする
以下の命令を追加します。
76
alert("おみくじが出ました!さて結果は?");
// 1秒間振動させる
navigator.vibrate(1000);
// 画像と文字列の差し替え
document.getElementById("omikuji").src = "images/" + image_name;
document.getElementById("playBtn").innerHTML = "やりなおす";
Copyright © Asial Corporation. All Rights Reserved.
結果の出現確率を変更しよう
77
Copyright © Asial Corporation. All Rights Reserved.
結果の出現確率を変更しよう
大吉が出る確率を増やすには・・・?
78
?
Copyright © Asial Corporation. All Rights Reserved.
結果の出現確率を変更しよう
OR演算子(||)
複数の条件のうちいずれかに合致したときにtrue(正しい)となる
すべての条件に合致しない場合はfalse(正しくない)となる
例
79
if(x == 1 || x == 2 || x == 3) {
alert("xは1か2か3のどれか");
}
Copyright © Asial Corporation. All Rights Reserved.
結果の出現確率を変更しよう
AND演算子(&&)
複数の条件がすべてに合致したときにtrue(正しい)となる
どれか一つでも合致しない場合はfalse(正しくない)となる
例
80
if(x >= 1 && x <= 3) {
alert("xは1以上でかつ、3以下");
}
Copyright © Asial Corporation. All Rights Reserved.
おみくじをひいた数をカウントしよう
81
Copyright © Asial Corporation. All Rights Reserved.
おみくじを引いた数をカウントしよう
カウント機能の実装
おみくじを引いた数をカウントするための変数を用意します。
関数の中で変数を宣言すると、一度関数が終了したら変数の値はリ
セットされてしまいます。
間違った例
82
function play() {
var count = 0; // 初期値0としてcount変数を作る
count++; // countを1加算
…省略…
} // 関数が終わったら、count変数は消えてしまう
Copyright © Asial Corporation. All Rights Reserved.
おみくじを引いた数をカウントしよう
グローバル変数
関数の外側で宣言された変数は「グローバル変数」となります。
「グローバル変数」の値は、アプリを起動してからアプリを終了する
までの間、ずっと保持され続けます。
83
var count = 0; // グローバル変数として宣言
function play() {
count++; // countを1加算
…省略…
}
Copyright © Asial Corporation. All Rights Reserved.
おみくじを引いた数をカウントしよう
N回に一度、という条件の指定方法
剰余算(割り算のあまりを求める)を使います。
N回に一度だけ処理をしたい場合は、Nで剰余算した結果が0だった
場合にのみ処理をします。
84
alert(10 % 3); // 10を3で割ったあまり=1が表示される
alert(10 % 5); // 10を5で割ったあまり=0が表示される
Copyright © Asial Corporation. All Rights Reserved.
課題
20回に一回だけ、スーパーレア大吉を出現させよう!
85
画像は以下からダウンロードして下さい
http://bit.ly/2gtCrj7