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

Copyright © Asial Corporation. All Rights Reserved.

はじめてのプログラミング

実践編

で学ぶ


はじめに

2


はじめに

Monaca Education事業のご紹介

Monacaとは

└ ブラウザだけで本格的なアプリ開発ができるサービスです

Monaca Education事業

└ アプリ開発による実践的なプログラミング教育を支援します

• 教材の開発と提供

• 教育用ライセンスの提供

• 各種トレーニングの実施

3

https://edu.monaca.io/

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

https://ja.monaca.io/support/inquiry.html


第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ファイルを入手

してください。

■ 素材集ページ


おみくじアプリの「ひな形」をクリックしてダウンロード

します。

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


JavaScr iptの書き方

JavaScript書き方のルール

基本的に半角の英数字と記号のみを使用する

└ 「'」か「"」で囲まれた範囲と、コメント「//」のみ全角文字も可

大文字と小文字は別の文字として扱われる

命令文の末尾には「;」をつける。

ひとまとまりの命令群を波かっこ{ } で囲む

└ 囲まれた範囲をブロックと呼ぶ

└ ブロック内は、先頭にタブ文字（tabキー）を挿入してブロックの

開始と終了がわかりやすいように記述する

改行や半角スペースは自由に挿入できる

56


JavaScr ipt -イベント-

イベントとは

ページ上で発生した出来事（ページが表示された、ボタンがクリック

された等）のことをイベントといいます。

ボタンがタップされたときのイベントの名称は「click」イベントです。

ブラウザイベントハンドラ JavaScript

click

① イベントが発生する

② イベントハンドラがイベントの発生を検知する

③ イベントハンドラに関連付けられた処理が呼び出される

イベント発生時の流れ

57


JavaScr ipt -イベントハンドラ-

イベントハンドラ

イベントハンドラは、イベントとJavaScriptの処理を関連付ける仕組

みです。

HTMLタグの属性として記述します。

イベントハンドラの名前は、「on + イベント名」です。

<script>function sayHello() {

alert("Hello!");}

</script>

<body><button onclick="sayHello();">おしてね！</button>

</body>

イベントハンドラの例

58


JavaScr iptの文法 -関数-

関数とは

一連の処理をまとめて名前をつけたものを関数といいます。

処理を関数として定義しておくことで、必要なときに何度でも呼び出

すことができます。

function 関数名 () {

実行される処理;

}

関数の作り方

関数名() ;

関数の呼び出し方

59


JavaScr iptの文法 -変数-

変数とは

データを一時的に入れておくための箱のような仕組みです。

変数を利用する前の準備として、まず変数の「宣言」を行います。

変数に値を入れることを「代入」といいます。

var a; …①

a = 10; …②

a = 20; …③ a

① aという名前の変数が作られる

② 変数aの中に10 が代入される

10a

③ 変数aの中身が20に上書きされる

20a10×NEW

var 変数名;

宣言の書式

変数 = 値；

代入の書式

60


ランダムに結果を出す方法を考える

ランダムな値を得る方法

Math.random()関数を呼ぶと、0から0.99999(1未満)の範囲の実数を返しま

す。

その結果を5倍し、Math.floor()関数で小数部分を切り捨てます。これによっ

て0～4の5通りの数字が作られます。

■ ランダム関数の使用例

Math.floor(Math.random() * 5)

61


JavaScr iptの文法 - 条件分岐 -

条件分岐

条件が正しいときと正しくないときで、処理内容を振り分ける仕組み

です。

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弾(体験版)

Education

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