SlideShare a Scribd company logo
1 of 85
Download to read offline
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.
JavaScriptの書き方
JavaScript書き方のルール
 基本的に半角の英数字と記号のみを使用する
└ 「'」か「"」で囲まれた範囲と、コメント「//」のみ全角文字も可
 大文字と小文字は別の文字として扱われる
 命令文の末尾には「;」をつける。
 ひとまとまりの命令群を波かっこ{ } で囲む
└ 囲まれた範囲をブロックと呼ぶ
└ ブロック内は、先頭にタブ文字(tabキー)を挿入してブロックの
開始と終了がわかりやすいように記述する
 改行や半角スペースは自由に挿入できる
56
Copyright © Asial Corporation. All Rights Reserved.
JavaScript -イベント-
イベントとは
 ページ上で発生した出来事(ページが表示された、ボタンがクリック
された等)のことをイベントといいます。
 ボタンがタップされたときのイベントの名称は「click」イベントです。
ブラウザ イベントハンドラ JavaScript
click
① イベントが発生する
② イベントハンドラがイベントの発生を検知する
③ イベントハンドラに関連付けられた処理が呼び出される
イベント発生時の流れ
57
Copyright © Asial Corporation. All Rights Reserved.
JavaScript -イベントハンドラ-
イベントハンドラ
 イベントハンドラは、イベントとJavaScriptの処理を関連付ける仕組
みです。
 HTMLタグの属性として記述します。
 イベントハンドラの名前は、「on + イベント名」です。
<script>
function sayHello() {
alert("Hello!");
}
</script>
<body>
<button onclick="sayHello();">おしてね!</button>
</body>
イベントハンドラの例
58
Copyright © Asial Corporation. All Rights Reserved.
JavaScriptの文法 -関数-
関数とは
 一連の処理をまとめて名前をつけたものを関数といいます。
 処理を関数として定義しておくことで、必要なときに何度でも呼び出
すことができます。
function 関数名 () {
実行される処理;
}
関数の作り方
関数名() ;
関数の呼び出し方
59
Copyright © Asial Corporation. All Rights Reserved.
JavaScriptの文法 -変数-
変数とは
 データを一時的に入れておくための箱のような仕組みです。
 変数を利用する前の準備として、まず変数の「宣言」を行います。
 変数に値を入れることを「代入」といいます。
var a; …①
a = 10; …②
a = 20; …③ a
① aという名前の
変数が作られる
② 変数aの中に
10 が代入される
10a
③ 変数aの中身が
20に上書きされる
20
a
10
×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.
JavaScriptの文法 - 条件分岐 -
条件分岐
 条件が正しいときと正しくないときで、処理内容を振り分ける仕組み
です。
 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

More Related Content

What's hot

Monacaによるモバイルアプリ開発ことはじめ
Monacaによるモバイルアプリ開発ことはじめMonacaによるモバイルアプリ開発ことはじめ
Monacaによるモバイルアプリ開発ことはじめアシアル株式会社
 
iOS/Android/Windows クロスプラットフォーム モバイルアプリ開発
iOS/Android/Windows クロスプラットフォーム モバイルアプリ開発iOS/Android/Windows クロスプラットフォーム モバイルアプリ開発
iOS/Android/Windows クロスプラットフォーム モバイルアプリ開発アシアル株式会社
 
Androidでもサクサク動くHTML5ハイブリッドアプリの作り⽅
Androidでもサクサク動くHTML5ハイブリッドアプリの作り⽅Androidでもサクサク動くHTML5ハイブリッドアプリの作り⽅
Androidでもサクサク動くHTML5ハイブリッドアプリの作り⽅アシアル株式会社
 
モバイル用Webフレームワーク最前線
モバイル用Webフレームワーク最前線モバイル用Webフレームワーク最前線
モバイル用Webフレームワーク最前線アシアル株式会社
 
Monacaでつくるハイブリッドアプリ
MonacaでつくるハイブリッドアプリMonacaでつくるハイブリッドアプリ
MonacaでつくるハイブリッドアプリMonaca
 
Web標準技術で iOS、Android両対応アプリを開発
Web標準技術でiOS、Android両対応アプリを開発Web標準技術でiOS、Android両対応アプリを開発
Web標準技術で iOS、Android両対応アプリを開発 アシアル株式会社
 
120分聞けばドヤ顔で語れる apache cordova スーパー勉強会
120分聞けばドヤ顔で語れる apache cordova スーパー勉強会120分聞けばドヤ顔で語れる apache cordova スーパー勉強会
120分聞けばドヤ顔で語れる apache cordova スーパー勉強会Monaca
 
Monacaで簡単スマートフォンアプリ開発体験講座
Monacaで簡単スマートフォンアプリ開発体験講座Monacaで簡単スマートフォンアプリ開発体験講座
Monacaで簡単スマートフォンアプリ開発体験講座Monaca
 
クロスプラットフォーム開発入門
クロスプラットフォーム開発入門クロスプラットフォーム開発入門
クロスプラットフォーム開発入門minazou67
 
HTML5ハイブリッドアプリ開発のベストプラクティス
HTML5ハイブリッドアプリ開発のベストプラクティスHTML5ハイブリッドアプリ開発のベストプラクティス
HTML5ハイブリッドアプリ開発のベストプラクティスアシアル株式会社
 
はやわかりHTML5ハイブリッドアプリ開発事情
はやわかりHTML5ハイブリッドアプリ開発事情 はやわかりHTML5ハイブリッドアプリ開発事情
はやわかりHTML5ハイブリッドアプリ開発事情 Monaca
 
WordPress APIで作るモバイルアプリ
WordPress APIで作るモバイルアプリWordPress APIで作るモバイルアプリ
WordPress APIで作るモバイルアプリアシアル株式会社
 
CROSS 2015 モバイル開発環境セッション
CROSS 2015 モバイル開発環境セッションCROSS 2015 モバイル開発環境セッション
CROSS 2015 モバイル開発環境セッションMasahiro Tanaka
 
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみた
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみたCordova を使って本気で商用ハイブリッドアプリ開発をやってみた
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみたShin Ogata
 
Monacaソリューションセミナー20160621
Monacaソリューションセミナー20160621Monacaソリューションセミナー20160621
Monacaソリューションセミナー20160621アシアル株式会社
 
エンタープライズ要件に対応する高品質なCordovaアプリ開発のポイント
エンタープライズ要件に対応する高品質なCordovaアプリ開発のポイントエンタープライズ要件に対応する高品質なCordovaアプリ開発のポイント
エンタープライズ要件に対応する高品質なCordovaアプリ開発のポイントアシアル株式会社
 

What's hot (20)

Monacaによるモバイルアプリ開発ことはじめ
Monacaによるモバイルアプリ開発ことはじめMonacaによるモバイルアプリ開発ことはじめ
Monacaによるモバイルアプリ開発ことはじめ
 
iOS/Android/Windows クロスプラットフォーム モバイルアプリ開発
iOS/Android/Windows クロスプラットフォーム モバイルアプリ開発iOS/Android/Windows クロスプラットフォーム モバイルアプリ開発
iOS/Android/Windows クロスプラットフォーム モバイルアプリ開発
 
Androidでもサクサク動くHTML5ハイブリッドアプリの作り⽅
Androidでもサクサク動くHTML5ハイブリッドアプリの作り⽅Androidでもサクサク動くHTML5ハイブリッドアプリの作り⽅
Androidでもサクサク動くHTML5ハイブリッドアプリの作り⽅
 
Cordovaの特徴と開発手法概要
Cordovaの特徴と開発手法概要Cordovaの特徴と開発手法概要
Cordovaの特徴と開発手法概要
 
モバイル用Webフレームワーク最前線
モバイル用Webフレームワーク最前線モバイル用Webフレームワーク最前線
モバイル用Webフレームワーク最前線
 
Monacaでつくるハイブリッドアプリ
MonacaでつくるハイブリッドアプリMonacaでつくるハイブリッドアプリ
Monacaでつくるハイブリッドアプリ
 
Web標準技術で iOS、Android両対応アプリを開発
Web標準技術でiOS、Android両対応アプリを開発Web標準技術でiOS、Android両対応アプリを開発
Web標準技術で iOS、Android両対応アプリを開発
 
120分聞けばドヤ顔で語れる apache cordova スーパー勉強会
120分聞けばドヤ顔で語れる apache cordova スーパー勉強会120分聞けばドヤ顔で語れる apache cordova スーパー勉強会
120分聞けばドヤ顔で語れる apache cordova スーパー勉強会
 
Monacaで簡単スマートフォンアプリ開発体験講座
Monacaで簡単スマートフォンアプリ開発体験講座Monacaで簡単スマートフォンアプリ開発体験講座
Monacaで簡単スマートフォンアプリ開発体験講座
 
クロスプラットフォーム開発入門
クロスプラットフォーム開発入門クロスプラットフォーム開発入門
クロスプラットフォーム開発入門
 
HTML5ハイブリッドアプリ開発のベストプラクティス
HTML5ハイブリッドアプリ開発のベストプラクティスHTML5ハイブリッドアプリ開発のベストプラクティス
HTML5ハイブリッドアプリ開発のベストプラクティス
 
Onsen UIが目指すもの
Onsen UIが目指すものOnsen UIが目指すもの
Onsen UIが目指すもの
 
Html5/JSモバイルアプリ最前線
Html5/JSモバイルアプリ最前線Html5/JSモバイルアプリ最前線
Html5/JSモバイルアプリ最前線
 
はやわかりHTML5ハイブリッドアプリ開発事情
はやわかりHTML5ハイブリッドアプリ開発事情 はやわかりHTML5ハイブリッドアプリ開発事情
はやわかりHTML5ハイブリッドアプリ開発事情
 
WordPress APIで作るモバイルアプリ
WordPress APIで作るモバイルアプリWordPress APIで作るモバイルアプリ
WordPress APIで作るモバイルアプリ
 
CROSS 2015 モバイル開発環境セッション
CROSS 2015 モバイル開発環境セッションCROSS 2015 モバイル開発環境セッション
CROSS 2015 モバイル開発環境セッション
 
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみた
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみたCordova を使って本気で商用ハイブリッドアプリ開発をやってみた
Cordova を使って本気で商用ハイブリッドアプリ開発をやってみた
 
Monacaソリューションセミナー20160621
Monacaソリューションセミナー20160621Monacaソリューションセミナー20160621
Monacaソリューションセミナー20160621
 
エンタープライズ要件に対応する高品質なCordovaアプリ開発のポイント
エンタープライズ要件に対応する高品質なCordovaアプリ開発のポイントエンタープライズ要件に対応する高品質なCordovaアプリ開発のポイント
エンタープライズ要件に対応する高品質なCordovaアプリ開発のポイント
 
CordovaでAngularJSアプリ開発
CordovaでAngularJSアプリ開発CordovaでAngularJSアプリ開発
CordovaでAngularJSアプリ開発
 

Similar to 書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド第2弾(体験版)

【アシアル塾】PHPオブジェクト指向再入門・第四回デザインパターンに学ぶクラス設計
【アシアル塾】PHPオブジェクト指向再入門・第四回デザインパターンに学ぶクラス設計【アシアル塾】PHPオブジェクト指向再入門・第四回デザインパターンに学ぶクラス設計
【アシアル塾】PHPオブジェクト指向再入門・第四回デザインパターンに学ぶクラス設計アシアル株式会社
 
OSSを利用したプロジェクト管理
OSSを利用したプロジェクト管理OSSを利用したプロジェクト管理
OSSを利用したプロジェクト管理Tadashi Miyazato
 
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向Tsutomu Ogasawara
 
DELPHI BOOT CAMP / DELPHIでビジュアル開発に挑戦しよう ◆ DAY2: DELPHIでUI設計のポイントを学ぼう
DELPHI BOOT CAMP / DELPHIでビジュアル開発に挑戦しよう ◆ DAY2: DELPHIでUI設計のポイントを学ぼうDELPHI BOOT CAMP / DELPHIでビジュアル開発に挑戦しよう ◆ DAY2: DELPHIでUI設計のポイントを学ぼう
DELPHI BOOT CAMP / DELPHIでビジュアル開発に挑戦しよう ◆ DAY2: DELPHIでUI設計のポイントを学ぼうKaz Aiso
 
コンテナ&サーバーレス:トレンドの考察と少し先の未来の展望
コンテナ&サーバーレス:トレンドの考察と少し先の未来の展望コンテナ&サーバーレス:トレンドの考察と少し先の未来の展望
コンテナ&サーバーレス:トレンドの考察と少し先の未来の展望Yoichi Kawasaki
 
開発者におくるサーバーレスモニタリング
開発者におくるサーバーレスモニタリング開発者におくるサーバーレスモニタリング
開発者におくるサーバーレスモニタリングAmazon Web Services Japan
 
先進的なアプリの短期開発を実現する 「IBM Bluemix Garage Method」と 「Open Toolchains」
先進的なアプリの短期開発を実現する 「IBM Bluemix Garage Method」と 「Open Toolchains」先進的なアプリの短期開発を実現する 「IBM Bluemix Garage Method」と 「Open Toolchains」
先進的なアプリの短期開発を実現する 「IBM Bluemix Garage Method」と 「Open Toolchains」岬 宇藤
 
NSA NB委員会セミナー「モバイルアプリ開発業務におけるmonacaの活用」
NSA NB委員会セミナー「モバイルアプリ開発業務におけるmonacaの活用」NSA NB委員会セミナー「モバイルアプリ開発業務におけるmonacaの活用」
NSA NB委員会セミナー「モバイルアプリ開発業務におけるmonacaの活用」アシアル株式会社
 
Case study of DevOps for Hadoop in Recruit.
Case study of DevOps for Hadoop in Recruit.Case study of DevOps for Hadoop in Recruit.
Case study of DevOps for Hadoop in Recruit.Recruit Technologies
 
DevOps時代到来!Engine YardのPaaSで変わるシステムの開発と運用のあり方
DevOps時代到来!Engine YardのPaaSで変わるシステムの開発と運用のあり方DevOps時代到来!Engine YardのPaaSで変わるシステムの開発と運用のあり方
DevOps時代到来!Engine YardのPaaSで変わるシステムの開発と運用のあり方Takahiro Imanaka
 
継続的デリバリーとサービス仮想化で変わる、エンタープライズアジャイル開発
継続的デリバリーとサービス仮想化で変わる、エンタープライズアジャイル開発継続的デリバリーとサービス仮想化で変わる、エンタープライズアジャイル開発
継続的デリバリーとサービス仮想化で変わる、エンタープライズアジャイル開発Takashi Watanabe
 
MicrosoftのOSSへの取り組み
MicrosoftのOSSへの取り組みMicrosoftのOSSへの取り組み
MicrosoftのOSSへの取り組みShinichiro Arai
 
Bitbucketを活用したコードレビュー改善事例
Bitbucketを活用したコードレビュー改善事例Bitbucketを活用したコードレビュー改善事例
Bitbucketを活用したコードレビュー改善事例Kosuke Ito
 
Azure machine learning service 最新の機械学習プラットフォーム
Azure machine learning service 最新の機械学習プラットフォームAzure machine learning service 最新の機械学習プラットフォーム
Azure machine learning service 最新の機械学習プラットフォームKeita Onabuta
 
アジャイル実践における開発環境の変化〜要求の捉え方、プロジェクト運営、ツール支援
アジャイル実践における開発環境の変化〜要求の捉え方、プロジェクト運営、ツール支援アジャイル実践における開発環境の変化〜要求の捉え方、プロジェクト運営、ツール支援
アジャイル実践における開発環境の変化〜要求の捉え方、プロジェクト運営、ツール支援智治 長沢
 
Cloud Native and Agile Approach
Cloud Native and Agile ApproachCloud Native and Agile Approach
Cloud Native and Agile ApproachShinya Yanagihara
 

Similar to 書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド第2弾(体験版) (20)

【アシアル塾】PHPオブジェクト指向再入門・第四回デザインパターンに学ぶクラス設計
【アシアル塾】PHPオブジェクト指向再入門・第四回デザインパターンに学ぶクラス設計【アシアル塾】PHPオブジェクト指向再入門・第四回デザインパターンに学ぶクラス設計
【アシアル塾】PHPオブジェクト指向再入門・第四回デザインパターンに学ぶクラス設計
 
OSSを利用したプロジェクト管理
OSSを利用したプロジェクト管理OSSを利用したプロジェクト管理
OSSを利用したプロジェクト管理
 
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
 
DELPHI BOOT CAMP / DELPHIでビジュアル開発に挑戦しよう ◆ DAY2: DELPHIでUI設計のポイントを学ぼう
DELPHI BOOT CAMP / DELPHIでビジュアル開発に挑戦しよう ◆ DAY2: DELPHIでUI設計のポイントを学ぼうDELPHI BOOT CAMP / DELPHIでビジュアル開発に挑戦しよう ◆ DAY2: DELPHIでUI設計のポイントを学ぼう
DELPHI BOOT CAMP / DELPHIでビジュアル開発に挑戦しよう ◆ DAY2: DELPHIでUI設計のポイントを学ぼう
 
コンテナ&サーバーレス:トレンドの考察と少し先の未来の展望
コンテナ&サーバーレス:トレンドの考察と少し先の未来の展望コンテナ&サーバーレス:トレンドの考察と少し先の未来の展望
コンテナ&サーバーレス:トレンドの考察と少し先の未来の展望
 
開発者におくるサーバーレスモニタリング
開発者におくるサーバーレスモニタリング開発者におくるサーバーレスモニタリング
開発者におくるサーバーレスモニタリング
 
Angularreflex20141210
Angularreflex20141210Angularreflex20141210
Angularreflex20141210
 
先進的なアプリの短期開発を実現する 「IBM Bluemix Garage Method」と 「Open Toolchains」
先進的なアプリの短期開発を実現する 「IBM Bluemix Garage Method」と 「Open Toolchains」先進的なアプリの短期開発を実現する 「IBM Bluemix Garage Method」と 「Open Toolchains」
先進的なアプリの短期開発を実現する 「IBM Bluemix Garage Method」と 「Open Toolchains」
 
20140514 introduction of appcross & taiwan experience jepa(jp)
20140514 introduction of appcross & taiwan experience jepa(jp)20140514 introduction of appcross & taiwan experience jepa(jp)
20140514 introduction of appcross & taiwan experience jepa(jp)
 
NSA NB委員会セミナー「モバイルアプリ開発業務におけるmonacaの活用」
NSA NB委員会セミナー「モバイルアプリ開発業務におけるmonacaの活用」NSA NB委員会セミナー「モバイルアプリ開発業務におけるmonacaの活用」
NSA NB委員会セミナー「モバイルアプリ開発業務におけるmonacaの活用」
 
Case study of DevOps for Hadoop in Recruit.
Case study of DevOps for Hadoop in Recruit.Case study of DevOps for Hadoop in Recruit.
Case study of DevOps for Hadoop in Recruit.
 
Case study of DevOps for Hadoop in Recruit.
Case study of DevOps for Hadoop in Recruit.Case study of DevOps for Hadoop in Recruit.
Case study of DevOps for Hadoop in Recruit.
 
DevOps時代到来!Engine YardのPaaSで変わるシステムの開発と運用のあり方
DevOps時代到来!Engine YardのPaaSで変わるシステムの開発と運用のあり方DevOps時代到来!Engine YardのPaaSで変わるシステムの開発と運用のあり方
DevOps時代到来!Engine YardのPaaSで変わるシステムの開発と運用のあり方
 
継続的デリバリーとサービス仮想化で変わる、エンタープライズアジャイル開発
継続的デリバリーとサービス仮想化で変わる、エンタープライズアジャイル開発継続的デリバリーとサービス仮想化で変わる、エンタープライズアジャイル開発
継続的デリバリーとサービス仮想化で変わる、エンタープライズアジャイル開発
 
Force.com開発基礎
Force.com開発基礎Force.com開発基礎
Force.com開発基礎
 
MicrosoftのOSSへの取り組み
MicrosoftのOSSへの取り組みMicrosoftのOSSへの取り組み
MicrosoftのOSSへの取り組み
 
Bitbucketを活用したコードレビュー改善事例
Bitbucketを活用したコードレビュー改善事例Bitbucketを活用したコードレビュー改善事例
Bitbucketを活用したコードレビュー改善事例
 
Azure machine learning service 最新の機械学習プラットフォーム
Azure machine learning service 最新の機械学習プラットフォームAzure machine learning service 最新の機械学習プラットフォーム
Azure machine learning service 最新の機械学習プラットフォーム
 
アジャイル実践における開発環境の変化〜要求の捉え方、プロジェクト運営、ツール支援
アジャイル実践における開発環境の変化〜要求の捉え方、プロジェクト運営、ツール支援アジャイル実践における開発環境の変化〜要求の捉え方、プロジェクト運営、ツール支援
アジャイル実践における開発環境の変化〜要求の捉え方、プロジェクト運営、ツール支援
 
Cloud Native and Agile Approach
Cloud Native and Agile ApproachCloud Native and Agile Approach
Cloud Native and Agile Approach
 

More from アシアル株式会社

書籍『Monacaで学ぶはじめてのプログラミング』発展資料(試験問題アプリ編)
書籍『Monacaで学ぶはじめてのプログラミング』発展資料(試験問題アプリ編)書籍『Monacaで学ぶはじめてのプログラミング』発展資料(試験問題アプリ編)
書籍『Monacaで学ぶはじめてのプログラミング』発展資料(試験問題アプリ編)アシアル株式会社
 
Onsen UI 2 開発における JS フレームワーク衝突事例集
Onsen UI 2 開発における JS フレームワーク衝突事例集Onsen UI 2 開発における JS フレームワーク衝突事例集
Onsen UI 2 開発における JS フレームワーク衝突事例集アシアル株式会社
 
Onsen UI の最近とこれから 〜 国内サポートはじめました
Onsen UI の最近とこれから 〜 国内サポートはじめましたOnsen UI の最近とこれから 〜 国内サポートはじめました
Onsen UI の最近とこれから 〜 国内サポートはじめましたアシアル株式会社
 
最新UIフレームワーク Onsen UI2で カッコイイWordPress連携アプリを作る方法
最新UIフレームワーク Onsen UI2でカッコイイWordPress連携アプリを作る方法最新UIフレームワーク Onsen UI2でカッコイイWordPress連携アプリを作る方法
最新UIフレームワーク Onsen UI2で カッコイイWordPress連携アプリを作る方法アシアル株式会社
 
創業明治33年の衣料卸問屋がﰀ アプリで挑むコミュニケーション変革 ﰀ ~MonacaとmBaaSを活用したﰀ ビジネスチャットアプリの紹介〜 ﰀ
創業明治33年の衣料卸問屋がﰀ アプリで挑むコミュニケーション変革 ﰀ ~MonacaとmBaaSを活用したﰀ ビジネスチャットアプリの紹介〜 ﰀ創業明治33年の衣料卸問屋がﰀ アプリで挑むコミュニケーション変革 ﰀ ~MonacaとmBaaSを活用したﰀ ビジネスチャットアプリの紹介〜 ﰀ
創業明治33年の衣料卸問屋がﰀ アプリで挑むコミュニケーション変革 ﰀ ~MonacaとmBaaSを活用したﰀ ビジネスチャットアプリの紹介〜 ﰀアシアル株式会社
 
HTML5ハイブリッドアプリ開発 で拓くビジネスチャンス
HTML5ハイブリッドアプリ開発で拓くビジネスチャンスHTML5ハイブリッドアプリ開発で拓くビジネスチャンス
HTML5ハイブリッドアプリ開発 で拓くビジネスチャンス アシアル株式会社
 
HTML5によるモバイルアプリ開発 が拓拓くビジネスチャンス
HTML5によるモバイルアプリ開発 が拓拓くビジネスチャンスHTML5によるモバイルアプリ開発 が拓拓くビジネスチャンス
HTML5によるモバイルアプリ開発 が拓拓くビジネスチャンスアシアル株式会社
 
HTML5ハイブリッドアプリ の活用ポイント
HTML5ハイブリッドアプリの活用ポイント HTML5ハイブリッドアプリの活用ポイント
HTML5ハイブリッドアプリ の活用ポイント アシアル株式会社
 
Cordova×業務システム:失敗しないモバイル開発の秘訣
Cordova×業務システム:失敗しないモバイル開発の秘訣Cordova×業務システム:失敗しないモバイル開発の秘訣
Cordova×業務システム:失敗しないモバイル開発の秘訣アシアル株式会社
 
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリAngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリアシアル株式会社
 

More from アシアル株式会社 (15)

MonacaとEducation活動の紹介
MonacaとEducation活動の紹介MonacaとEducation活動の紹介
MonacaとEducation活動の紹介
 
PWA 4 Business
PWA 4 BusinessPWA 4 Business
PWA 4 Business
 
書籍『Monacaで学ぶはじめてのプログラミング』発展資料(試験問題アプリ編)
書籍『Monacaで学ぶはじめてのプログラミング』発展資料(試験問題アプリ編)書籍『Monacaで学ぶはじめてのプログラミング』発展資料(試験問題アプリ編)
書籍『Monacaで学ぶはじめてのプログラミング』発展資料(試験問題アプリ編)
 
Onsen UI 2 開発における JS フレームワーク衝突事例集
Onsen UI 2 開発における JS フレームワーク衝突事例集Onsen UI 2 開発における JS フレームワーク衝突事例集
Onsen UI 2 開発における JS フレームワーク衝突事例集
 
Onsen UI の最近とこれから 〜 国内サポートはじめました
Onsen UI の最近とこれから 〜 国内サポートはじめましたOnsen UI の最近とこれから 〜 国内サポートはじめました
Onsen UI の最近とこれから 〜 国内サポートはじめました
 
最新UIフレームワーク Onsen UI2で カッコイイWordPress連携アプリを作る方法
最新UIフレームワーク Onsen UI2でカッコイイWordPress連携アプリを作る方法最新UIフレームワーク Onsen UI2でカッコイイWordPress連携アプリを作る方法
最新UIフレームワーク Onsen UI2で カッコイイWordPress連携アプリを作る方法
 
20160308seminar2
20160308seminar220160308seminar2
20160308seminar2
 
Nifty cloud mbaas
Nifty cloud mbaasNifty cloud mbaas
Nifty cloud mbaas
 
創業明治33年の衣料卸問屋がﰀ アプリで挑むコミュニケーション変革 ﰀ ~MonacaとmBaaSを活用したﰀ ビジネスチャットアプリの紹介〜 ﰀ
創業明治33年の衣料卸問屋がﰀ アプリで挑むコミュニケーション変革 ﰀ ~MonacaとmBaaSを活用したﰀ ビジネスチャットアプリの紹介〜 ﰀ創業明治33年の衣料卸問屋がﰀ アプリで挑むコミュニケーション変革 ﰀ ~MonacaとmBaaSを活用したﰀ ビジネスチャットアプリの紹介〜 ﰀ
創業明治33年の衣料卸問屋がﰀ アプリで挑むコミュニケーション変革 ﰀ ~MonacaとmBaaSを活用したﰀ ビジネスチャットアプリの紹介〜 ﰀ
 
HTML5ハイブリッドアプリ開発 で拓くビジネスチャンス
HTML5ハイブリッドアプリ開発で拓くビジネスチャンスHTML5ハイブリッドアプリ開発で拓くビジネスチャンス
HTML5ハイブリッドアプリ開発 で拓くビジネスチャンス
 
HTML5によるモバイルアプリ開発 が拓拓くビジネスチャンス
HTML5によるモバイルアプリ開発 が拓拓くビジネスチャンスHTML5によるモバイルアプリ開発 が拓拓くビジネスチャンス
HTML5によるモバイルアプリ開発 が拓拓くビジネスチャンス
 
HTML5ハイブリッドアプリ の活用ポイント
HTML5ハイブリッドアプリの活用ポイント HTML5ハイブリッドアプリの活用ポイント
HTML5ハイブリッドアプリ の活用ポイント
 
Onsen UI 2.0とUIライブラリの未来
Onsen UI 2.0とUIライブラリの未来Onsen UI 2.0とUIライブラリの未来
Onsen UI 2.0とUIライブラリの未来
 
Cordova×業務システム:失敗しないモバイル開発の秘訣
Cordova×業務システム:失敗しないモバイル開発の秘訣Cordova×業務システム:失敗しないモバイル開発の秘訣
Cordova×業務システム:失敗しないモバイル開発の秘訣
 
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリAngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
 

Recently uploaded

KARAPATANG PANTAO.pptxhrhrhrhrhrhrhrhrhr
KARAPATANG PANTAO.pptxhrhrhrhrhrhrhrhrhrKARAPATANG PANTAO.pptxhrhrhrhrhrhrhrhrhr
KARAPATANG PANTAO.pptxhrhrhrhrhrhrhrhrhrRodolfFernandez1
 
Divorce agreements in administrative work.pdf
Divorce agreements in administrative work.pdfDivorce agreements in administrative work.pdf
Divorce agreements in administrative work.pdfoganekyokoi
 
What I did before opening my business..pdf
What I did before opening my business..pdfWhat I did before opening my business..pdf
What I did before opening my business..pdfoganekyokoi
 
レポートの書き方講座 [大学生初年次向けに対する講義資料] Lecture on how to write a report [lecture mater...
レポートの書き方講座 [大学生初年次向けに対する講義資料] Lecture on how to write a report [lecture mater...レポートの書き方講座 [大学生初年次向けに対する講義資料] Lecture on how to write a report [lecture mater...
レポートの書き方講座 [大学生初年次向けに対する講義資料] Lecture on how to write a report [lecture mater...yutakashikano1984
 
The first time I used CANVA to create a slide document.
The first time I used CANVA to create a slide document.The first time I used CANVA to create a slide document.
The first time I used CANVA to create a slide document.oganekyokoi
 
International Politics I - Lecture 1
International Politics I - Lecture 1International Politics I - Lecture 1
International Politics I - Lecture 1Toru Oga
 
3年前期 交通基盤工学 第一回 ガイダンス 交通基盤工学の概要  パワーポイント
3年前期 交通基盤工学 第一回 ガイダンス 交通基盤工学の概要  パワーポイント3年前期 交通基盤工学 第一回 ガイダンス 交通基盤工学の概要  パワーポイント
3年前期 交通基盤工学 第一回 ガイダンス 交通基盤工学の概要  パワーポイントshu1108hina1020
 
Establishment and operation of medical corporations.pdf
Establishment and operation of medical corporations.pdfEstablishment and operation of medical corporations.pdf
Establishment and operation of medical corporations.pdfoganekyokoi
 
Registration of travel agents - 'Explanation of the registration system under...
Registration of travel agents - 'Explanation of the registration system under...Registration of travel agents - 'Explanation of the registration system under...
Registration of travel agents - 'Explanation of the registration system under...oganekyokoi
 

Recently uploaded (9)

KARAPATANG PANTAO.pptxhrhrhrhrhrhrhrhrhr
KARAPATANG PANTAO.pptxhrhrhrhrhrhrhrhrhrKARAPATANG PANTAO.pptxhrhrhrhrhrhrhrhrhr
KARAPATANG PANTAO.pptxhrhrhrhrhrhrhrhrhr
 
Divorce agreements in administrative work.pdf
Divorce agreements in administrative work.pdfDivorce agreements in administrative work.pdf
Divorce agreements in administrative work.pdf
 
What I did before opening my business..pdf
What I did before opening my business..pdfWhat I did before opening my business..pdf
What I did before opening my business..pdf
 
レポートの書き方講座 [大学生初年次向けに対する講義資料] Lecture on how to write a report [lecture mater...
レポートの書き方講座 [大学生初年次向けに対する講義資料] Lecture on how to write a report [lecture mater...レポートの書き方講座 [大学生初年次向けに対する講義資料] Lecture on how to write a report [lecture mater...
レポートの書き方講座 [大学生初年次向けに対する講義資料] Lecture on how to write a report [lecture mater...
 
The first time I used CANVA to create a slide document.
The first time I used CANVA to create a slide document.The first time I used CANVA to create a slide document.
The first time I used CANVA to create a slide document.
 
International Politics I - Lecture 1
International Politics I - Lecture 1International Politics I - Lecture 1
International Politics I - Lecture 1
 
3年前期 交通基盤工学 第一回 ガイダンス 交通基盤工学の概要  パワーポイント
3年前期 交通基盤工学 第一回 ガイダンス 交通基盤工学の概要  パワーポイント3年前期 交通基盤工学 第一回 ガイダンス 交通基盤工学の概要  パワーポイント
3年前期 交通基盤工学 第一回 ガイダンス 交通基盤工学の概要  パワーポイント
 
Establishment and operation of medical corporations.pdf
Establishment and operation of medical corporations.pdfEstablishment and operation of medical corporations.pdf
Establishment and operation of medical corporations.pdf
 
Registration of travel agents - 'Explanation of the registration system under...
Registration of travel agents - 'Explanation of the registration system under...Registration of travel agents - 'Explanation of the registration system under...
Registration of travel agents - 'Explanation of the registration system under...
 

書籍『Monacaで学ぶはじめてのプログラミング』 講義スライド第2弾(体験版)

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