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

Copyright © Asial Corporation. All Rights Reserved.
はじめてのプログラミング
実践編
で学ぶ

はじめに
2

はじめに
Monaca Education事業のご紹介
 Monacaとは
└ ブラウザだけで本格的なアプリ開発ができるサービスです
 Monaca Education事業
└ アプリ開発による実践的なプログラミング教育を支援します
• 教材の開発と提供
• 教育用ライセンスの提供
• 各種トレーニングの実施
3
https://edu.monaca.io/

はじめに
このスライドについて
 書籍『Monacaで学ぶはじめてのプログラミング』全12章相当の学習
が完了している方を対象とした講義用スライドです。
 サンプルアプリ開発を中心とした内容となっており、より実践的なア
プリ構築手法を学ぶことができます。
4
https://ja.monaca.io/book/001/

はじめに
目次
5
コマ番号タイトル要素技術
第1回オリエンテーション Monaca
第2回おみくじアプリを作ろう HTML/CSS/Javascript
第3回おみくじアプリを改造しようハードウェア機能
第4回宝当てゲームを作ろう関数
第5回宝当てゲームを改造しようローカルストレージ
第6回 Yes/No チャートアプリを作ろう Onsen UI
第7回道路標識暗記アプリを作ろう JSON
第8回アンケートアプリを作ろう
ニフティクラウドmobile
backend（サーバ連携）
第9回地図アプリを作ろう Yahoo! 地図API
第10回位置情報共有アプリを作ろう総括

はじめに
利用について
 第3回分まではスライドシェアにて無料で公開しております
└ ダウロードや再配布はできません
└ 授業や勉強会・セミナーでお使い頂いて構いません
 第10回分まで利用したい場合
└ Monacaの利用を表明して頂ける教育機関（学校教育法で定めら
れた教育機関）に無料提供しています。
└ その他の教育機関も別途相談に応じます
└ お問い合わせはMonacaのサイトにて受け付けております
• https://ja.monaca.io/support/inquiry.html
6

第1回オリエンテーション
7

Monacaのアカウント登録
8

Monaca のアカウント登録
1) 公式サイト URL にアクセス
https://ja.monaca.io/
第1章
9

2) 「サインアップ」からメールアドレスとパスワードを登録
第1章
10

3) 仮登録完了メールを確認
メールに記載されたURL にアクセス
登録完了
第1章
11

ダッシュボードとプロジェクト
12

Monaca ダッシュボードとプロジェクト
ログインとダッシュボードの表示
 開発中のアプリはプロジェクト単位で管理を行う
└ 画面左側に一覧表示される
第1章
13

新規プロジェクト作成
1）『新規プロジェクト』ボタンをクリック
2）プロジェクト名を設定
3）『プロジェクトを作成する』ボタンをクリック
第1章
14

プロジェクト一覧に表示されれば成功
 プロジェクト名
└ 自由に設定可能
└ 後で管理しやすいように気をつける
第1章
15

Monaca IDEの使い方
16

プログラムを記述する
Monaca IDE
 IDEは統合開発環境の略
 正式には「Integrated Development Environment」
第1章
17

コードエディター
 プログラムを記述するためのパネル
第1章
18

メニューバー
 各種機能を呼び出す
└ 保存
└ ダウンロード
└ ビルドなど
第1章
19

プレビュー
 プログラムの実行結果が表示されます。
第1章
20

はじめてのプログラム
 「This is a template for Monaca app.」を削除
 「はじめてのプログラム」と記述
 メニューバーの［保存］をクリック
第1章
21

プレビューの更新
 ［保存］と連動してプレビュー画面が自動更新される
 自動で更新されない場合
└ プレビュー画面右上の青い矢印ボタンをクリック
第1章
22

Monacaデバッガーの利用
23

Monaca デバッガーの利用
Monaca デバッガーとは
 アプリの動作を確認するツール
 プレビューより高度な動作確認が可能
└ カメラやコンパスなどのハードウェア機能
第1章
24

Monaca デバッガーの利用
Monaca デバッガーのメニュー
 プロジェクトを開きアプリの動作を確認
 丸いMonacaボタンはメニュー
└ 更新やログの確認が可能
第1章
25

Educationプランの有効化
26

プランのアップグレード
Educationプランとは
 作成可能なプロジェクト数が20件に増えます。
 共有開発機能が利用可能になります。
• Monacaにログインし、ダッシュボード下部の「アクティベーション
コード」ボタンをクリックします。
27

28
氏名、電話番号（学校の番号）を入力します。

29
書籍の裏表紙についているカードを剥がし、裏面に記載さ
れている16桁のアクティベーションコードを入力します。

30
「適用する」ボタンを押したら完了です。

31
「ダッシュボード」をクリックして前の画面に戻ります。

第２回おみくじアプリを作ろう
32

おみくじアプリを作成する
サンプルアプリ開発を通じて、HTML/CSS/JavaScriptの
役割を確認します。
 おみくじを模したアプリケーション
 ボタンを押すとランダムな画像を表示する
33

必要な技術
Monacaでモバイルアプリを開発するには、Webの技術で
あるHTML・CSS・JavaScriptの知識が必要になります。
HTML
（文書構造）
CSS
（文書の装飾）
JavaScript
(動きをつける)
34

事前準備
下記のURLにアクセスして素材となるZIPファイルを入手
してください。
■ 素材集ページ
https://ja.monaca.io/book/001/
おみくじアプリの「ひな形」をクリックしてダウンロード
します。
35

新しいプロジェクトを作成する
Monaca にログインし、ダッシュボードで「 Import
Project」ボタンを選択します。
36

新しいプロジェクトを作成する
1.名前と説明（任意入力）を設定して新規プロジェクトを
作成します
 プロジェクト名：おみくじアプリ
2.「プロジェクトのパッケージをアップロード」ラジオボ
タンにチェックを入れ、先ほどダウンロードしたzipファ
イルを指定します。
3.「インポート」ボタンをクリックします。
37

HTMLタグの確認
Monaca IDEのindex.htmlの<body>タグ内を確認して
ください。
<body>
<img src="images/omikuji-box.png" id="omikuji">
<button id="playBtn" onclick="play()">おみくじをひく</button>
</body>
38

HTML
HTMLでは、コンテンツ（ページに表示する内容）を見出
しや段落などのパーツに分け、それぞれを１つの部品とし
て構成しています。この部品を「要素」と呼びます。
<h1> ＨＴＭＬ入門 </h1>
開始タグ
終了タグ
要素
 タグは半角英数小文字で記述
 終了タグには「 / 」が入る
 開始タグから終了タグまでを「要素」と呼ぶ
39

<body>タグ内に記述するタグの種類
主なタグの一覧
40
タグ名概要
h1
見出しを定義します。h1～h6まであり、h1が最も高レベル、h6が最
も低レベルな見出しです。
img
画像を参照します。
src属性・・・画像の参照先を指定します。
div
特に意味を持たないタグです。複数のタグをまとめて扱うときや、四
角い枠を描画したいときに使います。
a
リンクを定義します。
href属性・・・リンク先のURLを指定します。
button ボタンを定義します。

タグの属性
要素対して「属性」をつけることで、付加情報を与えるこ
とができます。
<h1 id="guide_to_html"> HTML入門 </h1>
属性名
属性
属性値
 <h1>タグに要素を識別するためのID属性を指定しています。
 IDの他にも、適用するCSSや画像のパス、リンク先のURLなど様々な属性を指
定できます。
 属性値は「"」(ダブルクォート)か「'」（シングルクォート）で囲みます。
41

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

CSSとは
CSS（Cascading Style Sheets）とは
 HTML文章を装飾するための技術
 色やサイズなどを変更できる
43
HTML
（文書構造）
CSS
（文書の装飾）
HTMLファイルにCSSファイルを読み込むことで、
ページにデザインが適用される

CSSとは
CSSをHTMLファイルに読み込む方法（外部ファイル）
 linkタグを記述
 href属性でパスを指定する
 例
44
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="CSSファイルのパス">
文法 CSSファイルの読み込み

CSSの記述構造（セレクタ・プロパティ・値）
CSSを指定する記述は、スタイル（デザイン）を適用する
対象の「セレクタ」と、スタイルの種類を表す「プロパ
ティ」の組み合わせによって構成されます。
h1 { color: red; }
 セレクタスタイルを適用する対象（タグ名、クラス名、IDなどを指定できます）
 プロパティ色やサイズなどの、スタイルの種類
 値属性の値
セレクタプロパティ値
45

色を指定するプロパティ
プロパティ説明例
color 文字色を設定します。 color: red;
background-
color 背景色を設定します。 background-color: red;
プロパティの種類
46

色の指定方法
カラーコード
 光の三原色で色を作る方法
 カラーコードでは16進数を使う
カラーコードの例
 紫の色を作る
└ 赤がff（255）緑が00（0）青がff（255）
└ 原色の赤と青を混ぜた色＝紫になる
47
#ff00ff

サイズや位置を指定するプロパティ
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

marginとpadding
 どちらも余白の幅を指定するプロパティ
 marginはborder(枠線)の外側の余白
 paddingはborderの内側の余白
49
要素
内容内容内容内容内容内容
内容内容内容内容内容内容
margin padding

背景に関するプロパティ
background-
image 背景画像を設定します。
background-image: url("
画像のパス");
background-size
背景画像の表示サイズを設
定します。
background-size: cover;
※coverは背景領域を完全
に覆うように、拡大表示し
ます。
background-
repeat
背景画像を繰り返し表示す
るかどうかを設定します。
background-repeat: no-
repeat;
※no-repeatは、背景画像
を一枚だけ表示します。
50

パスの指定方法
パスの指定方法
 対象ファイルまでの位置を相対的に指定する方法
└ フォルダ間の区切り文字に「/」を使用
└ 上位のフォルダは「..」で表す
51
いまここ
一つ上（..）

枠線に関するプロパティ
border
線の色（および線種と線の
太さ）を設定します。
border: solid 1px red;
線種、線の太さ、線の色の
順に設定します。
※solidは直線を表します。
border-radius
四角形の枠の角を丸くする
設定をします。
border-radius: 10px;
outline 枠の縁取りを設定します。
outline: none;
※noneは縁取りを表示しな
い設定です。これを指定し
ないと、スマホではボタン
の周りにオレンジの枠が表
示されてしまいます。
52

border-radiusの設定
border-radiusの設定
 border-radiusに10pxを指定すると、以下のように半径10px
分のカーブがつきます。
53

結果を表示する方法
HTMLとCSSだけでは、おみくじに使うランダムな値を生
成することができません。
JavaScriptを用いて、ランダムに結果が表示されるよう改
良していきます。
54

スクリプトの実装
<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

JavaScriptの書き方
JavaScript書き方のルール
 基本的に半角の英数字と記号のみを使用する
└ 「'」か「"」で囲まれた範囲と、コメント「//」のみ全角文字も可
 大文字と小文字は別の文字として扱われる
 命令文の末尾には「;」をつける。
 ひとまとまりの命令群を波かっこ{ } で囲む
└ 囲まれた範囲をブロックと呼ぶ
└ ブロック内は、先頭にタブ文字（tabキー）を挿入してブロックの
開始と終了がわかりやすいように記述する
 改行や半角スペースは自由に挿入できる
56

JavaScript -イベント-
イベントとは
 ページ上で発生した出来事（ページが表示された、ボタンがクリック
された等）のことをイベントといいます。
 ボタンがタップされたときのイベントの名称は「click」イベントです。
ブラウザイベントハンドラ JavaScript
click
① イベントが発生する
② イベントハンドラがイベントの発生を検知する
③ イベントハンドラに関連付けられた処理が呼び出される
イベント発生時の流れ
57

JavaScript -イベントハンドラ-
イベントハンドラ
 イベントハンドラは、イベントとJavaScriptの処理を関連付ける仕組
みです。
 HTMLタグの属性として記述します。
 イベントハンドラの名前は、「on + イベント名」です。
<script>
function sayHello() {
alert("Hello!");
}
</script>
<body>
<button onclick="sayHello();">おしてね！</button>
</body>
イベントハンドラの例
58

JavaScriptの文法 -関数-
関数とは
 一連の処理をまとめて名前をつけたものを関数といいます。
 処理を関数として定義しておくことで、必要なときに何度でも呼び出
すことができます。
function 関数名 () {
実行される処理;
}
関数の作り方
関数名() ;
関数の呼び出し方
59

JavaScriptの文法 -変数-
変数とは
 データを一時的に入れておくための箱のような仕組みです。
 変数を利用する前の準備として、まず変数の「宣言」を行います。
 変数に値を入れることを「代入」といいます。
var a; …①
a = 10; …②
a = 20; …③ a
① aという名前の
変数が作られる
② 変数aの中に
10 が代入される
10a
③ 変数aの中身が
20に上書きされる
20
a
10
×NEW
var 変数名;
宣言の書式
変数 = 値；
代入の書式
60

ランダムに結果を出す方法を考える
 ランダムな値を得る方法
Math.random()関数を呼ぶと、0から0.99999(1未満)の範囲の実数を返しま
す。
その結果を5倍し、Math.floor()関数で小数部分を切り捨てます。これによっ
て0～4の5通りの数字が作られます。
■ ランダム関数の使用例
Math.floor(Math.random() * 5)
61

JavaScriptの文法 - 条件分岐 -
条件分岐
 条件が正しいときと正しくないときで、処理内容を振り分ける仕組み
です。
 else if文は複数指定することができます。
└ 複数の条件式に合致する場合、実行されるのは最初に合致した条件のみです
if (条件式１) {
// 条件式１がtrueの場合に実行する処理
} else if (条件式２) {
// 条件式２がtrueの場合に実行する処理
} else {
// すべての条件式がfalseの場合に実行する処理
}
条件分岐の例
62

ダイアログメッセージの表示
ダイアログの表示
 ページの前面に表示されるメッセージウィンドウを「ダイアログ」と
いいます。
63
alert("こんにちは");

DOM
DOMとは
 DOM（Document Object Model）の略
 JavaScriptでHTMLの各要素にアクセスする仕組みです
64
HTML要素へのアクセス
文法要素へのアクセス
document.getElementById("ID値")

DOM
要素の内容変更
65
文法内容の変更
document.getElementById("ID値").innerHTML = "書き換える内容";
要素の属性変更
文法属性の変更
例画像を「flower.jpg」に切り替える
document.getElementById("ID値").属性名 = "属性値";
document.getElementById("target").src = "flower.jpg";

第３回おみくじアプリを改造しよう
66

プログラムがうまく動かないときは
67

68
文法エラーの確認
 Monacaデバッガーでプロジェクトを実行すると、文法にエラーが
あった場合にエラーメッセージが表示されます。
index.htmlの33行目
付近でエラー発生

文法エラー以外のバグ（プログラムの間違い）を探すには
 文法は間違っていないが、プログラムが意図した通りに動かない、と
いう場合はエラーを検出することができません。
69
if (no == 0) {
} else if (no == 1) {
} else if (no == 2) {
image_nama = "shoukichi.png";
} else if (no == 3) {
} else {
}
なぜか小吉だけ
出ない！

意図した通りに動かない原因を探す方法
 alert()命令をプログラムの途中に差し込んで、どこから動きがおかし
くなっているのか見当をつけます。
70
alert(no);
if (no == 0) {
} else if (no == 1) {
} else if (no == 2) {
} else if (no == 3) {
} else {
}
alert(image_name);

console.log
 alert()をconsole.log()に変えるとダイアログではなく、編集画面下
のデバッグパネルに表示されます。
71
console.log(no);
if (no == 0) {
} else if (no == 1) {
} else if (no == 2) {
} else if (no == 3) {
} else {
}
console.log(image_name);

端末固有の機能を使ってみよう
72

通常、モバイルアプリはOSごとに異なるプログラム言語を
使って開発します。
このようにして作られたアプリを「ネイティブアプリ」と
呼びます。
× ×
73

OSに対応する言語
端末固有の機能の呼び出し
 Monacaで作られたアプリは、HTML・CSS・JavaScriptファイルを
OSに対応する言語で包んだ形式になっています。
 端末固有の機能を利用する場合、JavaScriptで命令を記述すると、
OSに合わせた言語に置き換えられて命令が実行されます。
連絡帳GPSカメラ
HTML・CSS・JavaScript
OS
74

navigator.vibrate(振動時間);
※ 振動時間はミリ秒単位で指定
バイブレーション機能の利用
 バイブレーション命令
75

おみくじが出たときにバイブレーションする
 以下の命令を追加します。
76
alert("おみくじが出ました！さて結果は？");
// 1秒間振動させる
navigator.vibrate(1000);
// 画像と文字列の差し替え
document.getElementById("omikuji").src = "images/" + image_name;
document.getElementById("playBtn").innerHTML = "やりなおす";

結果の出現確率を変更しよう
77

大吉が出る確率を増やすには・・・？
78
？

OR演算子（||）
 複数の条件のうちいずれかに合致したときにtrue（正しい）となる
 すべての条件に合致しない場合はfalse（正しくない）となる
 例
79
if(x == 1 || x == 2 || x == 3) {
alert("xは1か2か3のどれか");
}

AND演算子（&&）
 複数の条件がすべてに合致したときにtrue（正しい）となる
 どれか一つでも合致しない場合はfalse（正しくない）となる
 例
80
if(x >= 1 && x <= 3) {
alert("xは1以上でかつ、3以下");
}

おみくじをひいた数をカウントしよう
81

おみくじを引いた数をカウントしよう
カウント機能の実装
 おみくじを引いた数をカウントするための変数を用意します。
 関数の中で変数を宣言すると、一度関数が終了したら変数の値はリ
セットされてしまいます。
 間違った例
82
function play() {
var count = 0; // 初期値0としてcount変数を作る
count++; // countを1加算
…省略…
} // 関数が終わったら、count変数は消えてしまう

グローバル変数
 関数の外側で宣言された変数は「グローバル変数」となります。
 「グローバル変数」の値は、アプリを起動してからアプリを終了する
までの間、ずっと保持され続けます。
83
var count = 0; // グローバル変数として宣言
function play() {
count++; // countを1加算
…省略…
}

N回に一度、という条件の指定方法
 剰余算（割り算のあまりを求める）を使います。
 N回に一度だけ処理をしたい場合は、Nで剰余算した結果が0だった
場合にのみ処理をします。
84
alert(10 % 3); // 10を3で割ったあまり＝1が表示される
alert(10 % 5); // 10を5で割ったあまり＝0が表示される

課題
20回に一回だけ、スーパーレア大吉を出現させよう！
85
画像は以下からダウンロードして下さい
http://bit.ly/2gtCrj7

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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

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

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

Plus de アシアル株式会社

Plus de アシアル株式会社 (15)

Dernier

Dernier (20)