Contents

目次

第1章

アプリ開発入門… ………………………

5

第2章

HTML 入門… ……………………………

19

第3章

CSS 入門… ………………………………

35

第4章

JavaScript 入門…………………………

49

Monaca でモバイルアプリを開発しよう

画面に文字や画像を表示してみよう

文字に色をつけたり画像のサイズを変えたりしよう

今日の日付を表示するプログラムを作成しようはじめに

スマホアプリ開発で楽しくプログラミング学習

最近ではスマートフォンやタブレットの普及が進み、大多数の人が日常的に利用しています。スマートフォンやタブレットは「アプリ」と呼ばれるソフトウェアをインストールすることでより便利になり、さまざまな機能を活用できるようになります。本書では、スマー
トフォンやタブレットで動作するモバイルアプリを自分で作る方法を解説します。
アプリを作るというとすごく難しそうな印象を持たれるかもしれませんが、必ずしも高度な科学知識が必要になるわけではありません。作りたいアプリの用途や規模にもよります
が、画面数や機能が限られた簡単なアプリを開発したいということなら数時間から数十時間の学習で実現が可能です。
本書ではスマホアプリ開発を通じてプログラミングの基礎を学びます。プログラミングを行うためのコンピューター言語として「HTML」「CSS」「JavaScript」という 3 種類を活用します。それぞれの言語の役割は、以下のようになります。
・HTML

文章や画像など、画面に表示する内容を定義します。

・CSS		

画面に表示する内容の色・大きさ・配置といったスタイルを指定します。

・ JavaScript「ボタンをクリックしたときに結果を表示する」などのように、アプリに		

動きをつけます。

これらの言語はウェブサイトの制作にも利用できる、応用範囲の広い技術です。また特定の企業やソフトウェアに依存しない技術ですので、一度身に付ければ長く利用することが期待でき、最初に学ぶ言語として最適です。

3

第 1章アプリ開発入門
プログラミングを行うためには、まずプログラムを記述するためのソフトウェアが必要になります。そして記述したプログラムをコンピューターにインストールできる形に変換するソフトウェア
や、動作確認を行うためのソフトウェアなども必要です。
こういったプログラミングに必要なソフトウェア
を一つ一つ、自分のパソコンにインストールするのは大変です。そこで、最近はプログラミングに必
要なソフトウェアを統合的にまとめた「統合開発環境(IDE)」を使うケースが増えています。

第1章

Monaca でモバイルアプリを開発しよう

MonacaとはMonaca はクラウドで動作する統合開発環境です。インターネット上で利用できるサービ
ス全般を、雲の上にソフトウェアが置かれているイメージから、「クラウド」や「クラウドサービス」と呼びます。開発環境をクラウドに置くことで、自宅と学校のどちらからでもプログラミングを行うことが可能となっています。
Monaca は次のような特徴を備えています。
・

パソコンに専用のソフトウェアをインストールする必要が無い

・

少し古めのパソコンでも動作する

・

開発中のプログラムを先生や友達と共有する機能がある

・

スマートフォンやタブレットで動くモバイルアプリが作れる・Web の標準的な技術でアプリ開発できるクラウドサービスだからどんなパソコンでも動いて共有も簡単
Monaca は「Google Chrome ブラウザ」という Web ブラウザから利用できます。この Web
ブラウザがインストールされたパソコンであれば、OS（オペレーティングシステム）の種類やスペック（基本性能）は問いません。作ったアプリの動作確認は普段利用しているス
マートフォンで行うことができます。
また、開発中のプログラムを他の人と共有する機能が搭載されています。作成途中のプログラムを先生や友達にみてもらいアドバイスをもらったり、エラーでつまずいてしまった
時に助けてもらったりすることができます。アプリ開発のプロでも、自分以外の人にプログラムを見てもらうことで問題がすんなり解決することも多いものです。

モバイルアプリを標準的な技術で開発
スマートフォンで動くアプリを開発するには、さまざまな方法が存在します。Android やiOS といったスマートフォンの OS ごとに別々のプログラミング言語を使わなければならない方法もありますが、Monaca では OS の種類を問わずに共通のプログラミング言語（HTML ／ CSS ／ JavaScript）を使ってアプリを開発します。Monaca で開発したアプリ
は Android と iOS のどちらでも動作するので、自分や友達、家族などがそれぞれ違う種類のスマートフォンを持っていても、同じようにアプリを動かすことができます。

6

Monaca の誕生と利用状況
Monaca はモバイルアプリの開発を便利にするために 2011 年に日本のアシアル株式会社という企業が開発したサービスです。既に 20 万人以上の人が開発に利用しており、高校や大学・専門学校の授業でもよく使われています。
Monaca で作られたアプリも増え続けており、既に 7 万以上のアプリが世に出ています。最近では有名な企業のアプリでも使われており、代表的なアプリとしてテレビ朝日の映像・
写真投稿サービス「みんながカメラマン」や、タニタの健康管理アプリ「ヘルスプラネッ
ト」、ジャパンネット銀行の「残高確認アプリ」などが存在します。

7

第1章

Monaca でモバイルアプリを開発しよう

Monacaではじめてのプログラミングを書こう
Monaca を利用するためにはまず公式サイトにアクセスしてアカウントを取得します。はじめてのプログラミングでは教育版、ビジネス利用では通常版がお勧めです。
教育版

通常版

Monaca のアカウント作成
教育版公式サイト URL にアクセスします。
https://edu.monaca.io/
つぎに、右上の「アカウント作成」をクリックしてください。

登録した段階で仮登録が完了しメールアドレスに確認のメールが届きます。

8メールに記載された URL にアクセスすることで登録が完了します。

アクティベーションコードをお持ちの場合はこのタイミングでも適応できます。また、Free プランなどで開始して後からアクティベーションコードを適応することもできます。

9

第1章

Monaca でモバイルアプリを開発しよう

登録を完了させると、次の画面に移動します。

この画面では開発中のアプリをプロジェクトという単位で管理します。画面の左側にプロジェクトの一覧が表示されます。なお、無料プランの場合作成できるプロジェクトは 3 件までとなっています。
以上で Monaca のアカウント登録は完了です。

プロジェクトの作成
まずは Monaca の使い方の学習も兼ねて簡単なプログラムを書いてみましょう。 最初に、
プロジェクト（開発中のアプリのこと）を作成します。
［新しいプロジェクトを作る］ボタンをクリックして下さい。
プロジェクトの雛形となるテンプレートを選択する画面が現れます。

10テンプレートには「サンプルアプリ」として完成した形になっているものから、開発のための土台のみを提供しているものまでさまざまな種類が用意されています。今回は「最小限のテンプレート」を選択します。

今回はプロジェクト名を「はじめてのプログラム」に変更して「作成」ボタンをクリックします。プロジェクト名は自由につけることができます。あとで見た時にどんなプロジェク
トか分かる名前や説明を書くようにしましょう。

11

第1章

Monaca でモバイルアプリを開発しよう

プログラムを記述する「はじめてのプログラム」をクリックし [ クラウド IDE で開く ] ボタンをクリックします。

12

画面が切り替わり、Monaca IDE が表示されます。IDE というのは「Integrated Development Environment」の略で日本語では統合開発環境と呼びます。IDE にはプログラミングに必要となるさまざまな機能が用意されています。

メニューバー
様々な機能を呼び出せます

プレビュー画面
動作確認を行います

コードエディター
ソースコードの編集を行います

プロジェクトパネル
コードエディター

ファイルの管理を行います（ソースコードの編集を行います）

デバックパネル
コードエディター

エラー情報などを表示します（ソースコードの編集を行います）

真ん中の一番大きいパネルが「コードエディター」と呼ばれるプログラムを記述するためのパネルになります。

次に上部のパネルが「メニューバー」になります。プログラムを保存する機能やダウンロードする機能などはメニューバーから利用できます。

13

第1章

Monaca でモバイルアプリを開発しよう

右側に表示されている画面が「プレビュー」画面です。プログラムの実行結果が表示されます。

「This is a template for Monaca app.」というメッセージが表示されます。プレビュー画面で表示されるメッセージはコードエディターに記述されている内容と連動していますので、コードエディターの中からメッセージを探し出して「はじめてのプログラム」に書き換えてみましょう。メニューバーのファイルの [ 保存 ] をクリックすると、プレビュー画面も更新されます。

※

編集内容が保存されていない場合、コードエディタのファ
イル名の前に「*」マークが表示されます。

14

もし、自動で更新されない場合はプレビュー画面右上にある円状の矢印ボタンをクリックしましょう。
小さな一歩ですが、コンピューターに対して指示を出すことができました。

JavaScript で簡単な命令を実行させる
先ほど変更したメッセージは HTML で記述された文章です。HTML 単体では「動き」のあるアプリを作ることができません。
「動き」というのはアニメーションのことだけを指しているのではなく、ユーザーから入力された情報を受け取ったり、ユーザーの操作に合わせて文字や画像を後から差し替えたりすることなども「動き」といいます。動きのあるアプ
リは、HTML に JavaScript というプログラミング言語を組み合わせることで作成できます。
JavaScript のプログラムは HTML 文章の中にある <script> で囲まれた部分に記述します。

解説
index.html
1011<script></script>

15

第1章

Monaca でモバイルアプリを開発しよう＞＞＞ alert（）命令によるダイアログ表示
ダイアログとは、画面の前面に表示されるウィンドウのことです。ユーザーにメッセージを伝えたり、ユーザーから OK またはキャンセルといった操作を促したりするために使われます。 <script> と </script> の間に alert（" こんにちは "）; という記述を行って保存し、プレビュー画面で確認してみてください。

サンプルプログラム
index.html
10<script>
11
alert("こんにちは");12</script>

実行結果

画面を開いたときに、ダイアログが表示されるようになりました。

16

Monaca デバッガーの利用
先ほど利用した Monaca IDE のプレビュー機能は、実は簡易的な実行結果の確認をするための機能なので、スマートフォンのカメラやコンパスなどのハードウェアの機能にアクセスすることができません。また、表示崩れが起こる場合もあります。そこで、実際にスマー
トフォン上でアプリの動作を確認するためのデバッガーを利用しましょう。
なお教育版のデバッガーは「Monaca for Study」、通常版のデバッガーは「Monaca」あるい
は「Monaca デバッガー」の名称で公開されています。利用中のサービスによって対応するアプリが異なりますので注意してください。
App Store または Google Play で「monaca」というキーワードで検索し、対応するデバッ
ガーをインストールしてください。
教育版

通常版

インストールが終了したらアプリを起動して、先ほど Monaca に登録するときに使った
メールアドレスとパスワードを使ってログインしてください。ログインすると開発中のプ
ロジェクト一覧が表示されます。動作確認したいプロジェクトの名前をタップすると、実行結果が表示されます。

17

第1章

Monaca でモバイルアプリを開発しよう

右下に表示される丸いボタンをタップすると、Monaca デバッガーのメニューが表示されます。 各メニューの詳細は以下の通りです。

スクリーンショットを撮る

プロジェクト一覧に戻る

更 新アプリログの確認
このように、Monaca を用いたアプリ開発は、ブラウザ上のコードエディターでプログラミングを行い、プレビュー画面またはスマートフォンで動作確認をしながら進めていきます。
次章からは、プログラミング言語について詳しく見ていきます。

18

HTML 入門
Web ページやモバイルアプリの画面には、さまざまな色や画像が散りばめられ、とても華やかに装飾されていると思います。しかし実は、画面の元となっているファイル（「ソース」と呼びます）には文字だけでページの内容が記述されています。その記述言語が HTML と呼ばれるものです。

本章で使うプロジェクトの作成
プロジェクトのインポート
インポート URL：

https://ja.monaca.io/book/001/2a.zip
プロジェクト名：HTML と CSS の練習第2章

HTML 入門

HTMLとはHTML（Hyper Text Markup Language）はマークアップ言語の１つです。マークアップ言語
では、文書が持つ内容をタグと呼ばれる特殊な文字列で囲む形式で記述します。
元々 HTML は、膨大な量の文書を閲覧しやすくする目的で開発されました。例えば、文書の中に専門用語が出てきた場合、その専門用語について解説されている別の文書をすぐに参照することが出来れば便利でしょう。これを可能にしたのが HTML による「リンク」です。HTMLにはリンク以外にも、文書を構造化したり、画像を参照したりする機能などがあります。

HTML の書き方
HTML では、文章やリンク、画像などの画面に表示する内容を「タグ」という文字列で囲みます。タグとは、画面に表示する内容の種類や役割を表す特殊な文字列です。
タグにはさまざまな種類がありますが、記述方法はどれも同じです。

文法

タグの記述方法と名称〈開始タグ〉内容〈/ 終了タグ〉

例

タグの記述例〈p〉これは段落です。
〈/p〉「開始タグ」と「終了タグ」の部分にはタグの名称が入ります。終了タグの前にはスラッシュを記述します。開始タグから終了タグまでの全体を「要素」と呼びます。
また、タグの種類によっては終了タグが存在しないものもあります。そのような要素は「空要素」と呼びます。空要素の場合、スラッシュはつけてもつけなくても構いません。

文法

空要素の記述方法< 開始タグ >または< 開始タグ />20

例

空要素の記述例<br />

また、各種タグはそれぞれ異なる「属性」を持っています。属性とは、タグにつける付加情報のことで、例えばリンクタグであればリンク先の URL などを指定します。また、次章で学ぶ CSS を一部のタグにだけ適用する場合や、JavaScript で特定のタグを操作する場合などにもあらかじめ属性をつけておきます。属性は開始タグに記述します。1 つのタグに対して複数の種類の属性をつけることが可能です。

文法

属性の記述

< 開始タグ 属性 1=" 値 " 属性 2=" 値 "> 内容 </ 終了タグ >例

属性の記述例<a href="top.html">TOP ページへ </a>

属性値はダブルクォート（"）のかわりにシングルクォート（'）で囲んでも構いません。また、属性の指定順序に決まりはありません。

HTML の構成
HTML 文書は、いくつものタグを組み合わせて構成します。記述する際は、要素の中に別の要素を入れ込んでいく構造（入れ子構造またはネスト構造と呼ぶ）にします。この時注意しなければならないのは、終了タグの位置です。

例

良い例<div><p> これは段落です。</p></div>

例

悪い例<div><p> これは段落です。</div></p>

タグが交差するように配置してはいけません。必ず 1 つのタグを包むように配置していき
ます。

21

第2章

HTML 入門

HTML の例
ここでは、第１章で作成したアプリのソースコードを例に解説します。

解説
index.html<!DOCTYPE HTML>……①<html>		

……②<head>		

……③<meta charset="utf-8"><meta name="viewport" content="width=device-width, initialscale=1, maximum-scale=1, user-scalable=no"><meta http-equiv="Content-Security-Policy" content="default-src……④*; style-src * 'unsafe-inline'; script-src * 'unsafe-inline''unsafe-eval'"><script src="components/loader.js"></script>……⑤<link rel="stylesheet" href="components/loader.css"><link rel="stylesheet" href="css/style.css">……⑥<script>
alert(" こんにちは ");……⑦</script></head><body><br />……⑧……⑨

はじめてのプログラム</body></html>ここで登場しているのは、アプリを作る上で最低限必要となるタグです。この本の学習範
囲内では、基本的に <body> タグの中以外を変更する必要はありませんので、それ以外のタグは削除しないでください。以下に各タグの意味を解説します。
① <!DOCTYPE HTML>
HTML5（HTML の最新バージョン）で記述された文書であることを表すタグです。終了タグはありません。

22

② <html>
HTML 文書であることを表すタグです。文書全体をこのタグで囲みます。
③ <head>
文書全体に関する情報を定義するタグです。このタグ自体はあまり意味を持たず、中に入っているタグがさまざまな意味を持ちます。
④ <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximumscale=1, user-scalable=no"><meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafeinline'; script-src * 'unsafe-inline' 'unsafe-eval'"><meta> タグは、メタ情報と呼ばれる HTML 文書の補足情報を持つタグです。文書がどの文字コードで書かれているかといった情報や、スマートフォンなどの小さいサイズのスクリーンで見たときに拡大・縮小する設定などを指定します。
⑤ <script src="components/loader.js"></script>
JavaScript で記述されたファイルを読み込んでいます。このタグは、Monaca でアプリ開発を行う場合に必ず必要なタグとなるので、消さないようにしましょう。
⑥ <link rel="stylesheet" href="components/loader.css"><link rel="stylesheet" href="css/style.css">
CSS で記述されたファイルを読み込んでいます。このタグは、Monaca でアプリ開発を行う場合に必ず必要なタグとなるので、消さないようにしましょう。
⑦ <script> alert（" こんにちは "）; </script>
開始タグと終了タグの間に JavaScript を記述することができます。
⑧ <body>
本文です。画面上に表示する文字列や画像などを記述します。
⑨ <br />
改行を表すタグです。br は空要素なのでスラッシュをつけてもつけなくても構いません。

23

第2章

HTML 入門

ポイント

用語説明：ソースコード

ソースは「元となるもの」、コードは「命令文」のことを意味します。ここでは、画面の元となっている命令文、という意味で使っています。
「ソース」と「コード」はそれぞれ単独で使う場合もあります。

ポイント

用語説明：文字コード

コンピューターで利用される文字は、内部的には番号で管理されています。文字と番号の対応関係のことを文字コードといいます。世界各国の文字を表現するためにさまざまな種類の文字コードが開発されていて、よく使われる文字コードに「UTF-8」「Shift_JIS」「EUC-JP」等があります。HTML5 では文字コードに UTF-8 を使用することが推奨されています。HTML ファイルを保存するときに文字コードの指定を忘れないようにしま
しょう。

24

<body>タグ内に記述するタグの種類
アプリの画面を作成する場合は、文章や画像などを表示するため各種タグを <body> タグの中に記述していきます。HTML では非常に多くのタグと属性が用意されていますので、ここでは主要なものを紹介します。

＞＞＞終了タグのあるタグ
タグ名
h1

概要
見出しを定義します。h1 ～ h6 まであり、h1 が最も高レベル、h6 が最も低レベルな見出しです。
例：<h1> 見出し </h1>
文章の段落を定義します。

p

例：<p>
文章の段落を定義します。
</p>
特に意味を持たないタグです。複数のタグをまとめて扱うときや、四角い枠を描画したいときに使います。

diva

例：<div><h1> 見出し </h1><p> 段落 </p></div>

リンクを定義します。
href 属性・・・リンク先の URL を指定します。
例：<a href="index.html">TOP へ </a>buttonボタンを定義します。
例：<button> ボタン </button>

25

第2章

HTML 入門＞＞＞空要素（終了タグのないタグ）
タグ名

img

概要
画像を参照します。
src 属性・・・画像の参照先を指定します。
alt 属性・・・画像が何らかの理由で表示できなかった場合に、画像の変わりに表示する文字列を指定します。
例：<img src="flower.jpg" alt=" 花 ">＞＞＞すべてのタグにつけられる属性
属性名
id

概要
要素を識別するための ID です。文書内で重複する値を指定することはできません。
例：<div id="header">…</div>class

CSS のクラス名を指定します。（→第 3 章）
例：<div class="container">…</div>

次節では、これらの中でも特に頻繁に使われるリンクと画像の表示についてサンプルを挙げて解説します。

26

リンク
リンクは、ある画面から別の画面へ移動する機能です。リンクを設定する際に重要となるのが、パスという考え方です。パスとは、HTML などのファイルが存在しているコンピューター上の住所のことです。パスの指定方法には絶対パス指定と相対パス指定の 2 通りがあります。

文法

リンクの設定<a href=" リンク先のパス "> リンク文字列 </a>＞＞＞絶対パス指定
パスを全て記述する方法です。Windows パソコンの「ドキュメント」フォルダ内に入っている sample.txt というファイルを表す場合は、「C:¥Users¥ ユーザー名 ¥Documents¥sam
ple.txt」がパスになります。また、Web サイトの場合は Web ブラウザ上部のアドレスバーに表示される、「http://」から始まる文字列が絶対パスになります。アプリ内にインター
ネット上の Web サイトを表示する場合などは、こちらの方法を使います。

実習
index.html の 14 行目に、以下のタグを追記しましょう。
<a href="https://edu.monaca.io/">Monaca へ </a>

サンプルプログラム
index.html
1
2
3
4
5

<!DOCTYPE HTML><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximumscale=1, user-scalable=no">

27

第2章

HTML 入門

6
7
8
9
10
11
12
13
14
15
16

<meta http-equiv="Content-Security-Policy" content="default-src *; stylesrc * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"><script src="components/loader.js"></script><link rel="stylesheet" href="components/loader.css"><link rel="stylesheet" href="css/style.css"><script></script></head><body><a href="https://edu.monaca.io/">Monaca へ </a></body></html>

外部の Web サイトをアプリ内に表示する場合はプレビュー機能では確認できない場合があるので、Monaca デバッガーアプリを使って、スマートフォン上で確認してみましょう。
「Monaca へ」というリンク文字列をタップすると、以下のような画面になるはずです。

実行結果

外部 Web サイトをアプリ内で開けたことが確認できました。

28

＞＞＞相対パス指定
現在のファイルから見た、対象ファイルまでの位置を指定する方法です。アプリ内の別のHTML ファイルに移動する場合には、こちらの方法を使用します。相対パス指定する場
合、記述方法には以下の決まりがあります。
・同一フォルダ内のページに移動する場合はファイル名の指定だけで良い。
・フォルダとフォルダの区切り、またはフォルダとファイルの区切り文字として、フォルダ名の後ろにスラッシュをつける。
・一つ上のフォルダは .. という記号で表す。
相対パスの指定方法を以下の図で示します。

www

最初のページ
index.html

newPage.html

同じフォルダ内に移動する場合はファイル名のみを指定
例：newPage.html

css
別のフォルダの中にあるファイルに移動する場合は「フ ォ ル ダ 名 / フ ァ イル名」と指定例：css/style.css
style.css

29

第2章

HTML 入門

実習
今まで記述していたファイルは index.html という名前のファイルですが、このファイル
はアプリ起動時に最初に表示されるファイルです。ここから別の HTML ファイルに移動
してみましょう。移動先は［www］フォルダ直下にあらかじめ配置されている、newPage.
html です。このファイルをダブルクリックして開くとわかりますが、「新しい画面」という文字列が <body> タグの中に記述されています

それでは、index.html のタブに戻って 15 行目に、以下のタグを追記してください。
<a href="newPage.html"> 次の画面へ </a>

サンプルプログラム
index.html
1
2
3
4
5
6
7
8
9
10
11

30

<!DOCTYPE HTML><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1, user-scalable=no"><meta http-equiv="Content-Security-Policy" content="default-src *; stylesrc * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"><script src="components/loader.js"></script><link rel="stylesheet" href="components/loader.css"><link rel="stylesheet" href="css/style.css"><script></script>

12
13
14
15
16
17

</head><body><a href="https://edu.monaca.io/">Monaca へ </a><a href="newPage.html"> 次の画面へ </a></body></html>同じ［www］フォルダ内の HTML ファイルに移動するので、相対パス指定でリンク先を指定しています。 ここまで出来たら、プレビュー画面または Monaca デバッガーで実行してみましょう。

実行結果［次の画面へ］をクリックまたはタップすると、newPage.html へ移動します。

このようにして、リンクを使って画面の切り替えを行うことができるようになります。

31

第2章

HTML 入門

画像の表示
画面上に写真やイラストなどの画像を表示するには、HTML ファイルから画像ファイルを参照するようにタグで指定します。画像ファイルのパス（画像が置いてある場所）はリンクと同様、絶対パスまたは相対パスで指定します。

文法

画像の表示

<img src=" 画像ファイルのパス ">実習
表示する画像は、［www］直下に配置されている monaca.jpg を利用します。

index.html の 16 行目に、以下のタグを追記してください。
<img src="monaca.jpg">

サンプルプログラム
index.html
1
2
3
4
5

32

<!DOCTYPE HTML><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1,maximumscale=1, user-scalable=no">

6
7
8
9
10
11
12
13
14
15
16
17
18

<meta http-equiv="Content-Security-Policy" content="default-src *; stylesrc * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"><script src="components/loader.js"></script><link rel="stylesheet" href="components/loader.css"><link rel="stylesheet" href="css/style.css"><script></script></head><body><a href="https://edu.monaca.io/">Monaca へ </a><a href="newPage.html"> 次の画面へ </a><img src="monaca.jpg"></body></html>

実行結果

このように、HTML は画面上に表示したい文字列やリンク、画像などを指定するために利用します。次章では表示した内容にデザインを適用し、見栄えを良くする方法を学んでい
きます。

33

第2章

34

HTML 入門

第 3章
CSS 入門前章で学んだ HTML は、画面に表示する内容を定義するための技術でした。本章で学ぶ CSS
を HTML に組み込んで使うことで、画面を装飾することができます。

本章で使うプロジェクトの作成
第２章で作成した「HTML と CSS の練習」
プロジェクトを継続して使用します。

第3章

CSS 入門CSSとは
CSS（Cascading Style Sheets）は、HTML 文書を装飾するための技術です。背景や文字の色設定を行ったり、文字や画像のサイズ、表示位置を調整したりと、画面にデザインを適用するために使われます。 色やサイズなどの１つ１つのデザインのことを「スタイル」と呼びます。
「Cascading」は重ね合わせるといった意味がある言葉ですので、CSS（Cascading
Style Sheets）はたくさんのスタイルを重ね合わせてデザインを完成させるための文書、という意味になります。

CSS を HTML ファイルに読み込む方法
CSS は、HTML ファイルの中に読み込む形で利用します。まず、CSS のコードのみをファイルに記述し、拡張子を .css として保存します。 次に、HTML ファイルに <link> タグを記述し、href 属性に CSS ファイルのパスを指定します。

文法

CSS ファイルの読み込み<link rel="stylesheet" href="CSS ファイルのパス ">

なお、「HTML と CSS の練習」プロジェクトの index.html には、あらかじめ「style.css」という名前の CSS ファイルを組み込む <link> タグが記述されていました。

36

CSS の書き方
CSS を記述する際には「どの要素に対して」「どのようなスタイル」を適用するのか、の 2 つの情報が必要です。
「どの要素に対して」は「セレクタ」という仕組みでタグなどを指定します。また「どのようなスタイル」は「プロパティ」と「値」で指定します。プロパティには文字の色や背景色またサイズなどさまざまなものが用意されており、適応させたい色や数値を値として指定できます。

文法

セレクタとプロパティの記述方法～

セレクタ {
プロパティ : 値 ;プロパティ : 値 ;
}

例
p {

}

セレクタとプロパティの記述例

color: red;font-size: 10px;

この例では、HTML 文書内の <p> タグに対して、文字色を赤に、フォントサイズを 10pxにする、という指定を行っています。

ポイント

用語説明：px（ピクセル）

コンピューター上に表示される写真や図形などは、ピクセルという点の集合によって描画されています。点 1 つが 1px です。一般的にアプリの画面を作るときにはこの px という単位を利用します。

37

第3章

CSS 入門セレクタの種類
セレクタは対象要素を指定する方法で、複数の種類があります。タグ名が同じ要素すべてにスタイルを適用したい場合と、１つの要素に対してのみスタイルを指定したい場合とでは、利用するセレクタが異なります。状況に応じて適切なセレクタを選択しましょう。
◦タグセレクタ
対象要素をタグ名で指定します。
◦ ID セレクタ
対象要素を ID 属性値で指定します。ID 属性値は HTML 文書の中で一意となる（重複する値を設定できない）ので、特定の要素 1 つだけにスタイルを適用したい場合に利用します。
◦クラスセレクタ
CSS におけるクラスとは、スタイルをひとまとめにして名前をつけたもののことです。クラスはどのタグに対しても付けることができるので、複数の要素の中から任意の要素を選択してスタイルを適用したい場合に利用します。

0 各セレクタの記述方法
セレクタ

タグセレクタ

タグ名 {…}p {…}クラスセレクタ. クラス名 {…}.className {…}ID セレクタ38

書き方#ID {…}#id1234 {…}例実習
第 2 章で作成した「HTML と CSS の練習」プロジェクトを開き、［css］フォルダ内の style.
css を開きます。

style.css は、はじめは空の状態になっています。最初に、タグセレクタで <a> タグすべてに対してスタイルを適用してみます。以下のコードを記述してください。

サンプルプログラム
style.css
1
2
3

a {
}

font-size: 30px;

プレビュー画面で確認すると、リンク文字列の大きさが変更されていることがわかります。 これがタグセレクタによる指定です。

39

第3章

CSS 入門

実行結果

続いて、ID セレクタを試してみましょう。
index.html 14 行目の、「Monaca へ」リンクを設定している <a> タグに、ID 属性を指定します。

サンプルプログラム
index.html
14<a href="https://edu.monaca.io/" id="target">Monaca へ </a>

次に style.css を開き、先ほど記述した箇所の下に以下のコードを追記します。

40

サンプルプログラム
style.css
5
6
7#target {color: red;}

ここまでをプレビュー画面で確認すると、「Monaca へ」というリンク文字列が赤色で表示
されます。

実行結果

最後に、クラスセレクタによる指定方法を試してみましょう。 index.html 15 行目の、「次の画面へ」リンクを設定している <a> タグに、class 属性を指定します。

41

第3章

CSS 入門サンプルプログラム
index.html
15<a href="newPage.html" class="bright"> 次の画面へ </a>

次に style.css を開き、先ほど記述した箇所の下に以下のコードを追記します。

サンプルプログラム
style.css
910
11.bright {background-color: yellow;}

background-color は、背景色を指定するプロパティです。
プレビュー画面で結果を確認すると、背景が黄色で表示されます。

実行結果

42

CSS のクラスは、複数のタグに対して同じ属性値を設定することができます。
試しに、<body> 内の他のタグにも「class="bright"」という属性を追加してみましょう。属性を追加したタグの背景色がすべて黄色くなることが確認できると思います。

43

第3章

CSS 入門プロパティの種類
CSS のプロパティは膨大な種類がありますので、ここでは特によく使われるプロパティを紹介します。

色を指定するプロパティ

color

プロパティ

background-color
border説明

例

文字色を設定します。

color: red;

線の色（および線種と線の太さ）を設定します。

border: solid 1px red;
線種、線の太さ、線の色の順に設定します。
solid は直線を表します。

背景色を設定します。

background-color: red;＞＞＞カラーコード
色の表現方法は、「red」や「blue」などの色の名称を指定する方法の他に、カラーコードと呼ばれる方法があります。コンピューターのディスプレイに表示される色は、光の三原色（赤、緑、青）を混ぜ合わせて作られています。 それぞれの色の含有量を最小 0 から最大
255 までの数値で表し、16 進数にして並べた 6 桁の数値がカラーコードです。カラーコー
ドの先頭には #（シャープ）を付けて記述します。

＞＞＞カラーコードの例#ff00ff

赤が ff（255）、緑が 00（0）、青が ff（255）なので、原色の赤と青を混ぜた色＝紫になります。
カラーコードを調べるときは一般的に Photoshop、Illustrator などのデザインやイラスト制作用のグラフィックソフトを使います。グラフィックソフトが無い場合は、カラーコードを算出する Web サービスが多数公開されていますので、各自調べてみましょう。

44

サイズや位置を指定するプロパティ
プロパティ

説明

例

font-size

文字のサイズを設定します。

font-size: 12px;

text-align要素内の横方向の配置を設定します。

text-align: left;（左寄せ）text-align: right;（右寄せ）text-align: center;（中央揃え）
text-align: justify;（均等割付）

width

要素の横幅を設定します。

width: 100px;

margin

枠線の外側の余白を設定します。 margin: 20px;

heightpadding

要素の高さを設定します。

height: 300px;

枠線の内側の余白を設定します。 padding: 10px;

margin と padding はどちらも余白の幅を指定するプロパティですが、余白を取る位置が異なります。以下の図に示すように、margin が枠線の外側、padding が枠線の内側の余白に
なります。
要素

margin padding
内容内容内容内容内容内容
内容内容内容内容内容内容

margin プロパティと padding プロパティは、ハイフン（-）に続けて方向を表す単語を付けると、一辺に対してのみ余白を設定することができます。例えば、margin-top は外側の上余白を設定します。

45

第3章

CSS 入門

方向

上

外側余白

margin-top

padding-top

margin-left

padding-left下

margin-bottom

右margin-right

左

内側余白

padding-bottom
padding-right

なお、サイズや位置を指定する単位は、px（ピクセル）の他に、%（パーセント）もよく利用されます。% 指定の場合は、画面全体または外側にあるタグを 100% として計算されます。

実習「HTML と CSS の練習」プロジェクトの style.css に、以下のコードを追加します。

サンプルプログラム
style.css
13
14
15
16
17
18

img {
width: 30%;
border: solid 3px #0000ff;
margin: 10px;
padding: 20px;}

1 つ目の width プロパティは、要素の横幅を設定するプロパティです。画像の幅を画面全体に対して 30% に設定していますので、画像が小さく表示されています。
2 つ目の border プロパティは、要素の周囲に線を表示します。カラーコード「#0000ff」は、青を表しますので、3px の太さの青い枠線が文字列の周囲に出現します。
残りの margin プロパティと padding プロパティは、余白を設定するプロパティです。枠線の外側に 10px、枠線の内側に 20px の余白が作られています。

46

実行結果

このように、さまざまな CSS プロパティを組み合わせることで、アプリの画面を自由自在にデザインすることができます。

47

第3章

48

CSS 入門

第 4章
JavaScript 入門
本章からはいよいよアプリを動かすための技術、
JavaScriptを学んでいきます。JavaScriptは、主にWebページやモバイルアプリの画面上の部品を操作するために利用されます。なおJavaScriptと似たよ
うな名前のプログラミング言語に「Java」というものがありますが、これはJavaScriptの略ではありません。JavaとJavaScriptは違う言語です。JavaScriptを省略して呼ぶ場合はJS（ジェイエス）と呼びます。

本章で使うプロジェクトの作成
プロジェクトの新規作成使用するテンプレート：最小限のテンプレート
プロジェクト名：今日は何日？

第4章

JavaScript 入門

JavaScriptの書き方
第 一 章 で は 以 下 の JavaScript を 実 行 し ま し た。繰 り 返 し に な り ま す が、JavaScript はHTML ファイルの <script> タグの中に記述します。

解説<script>
alert(" こんにちは ");</script>

10
11
12

CSS ファイルのように、JavaScript だけを記述したファイル（拡張子には「.js」が付きます）を作っておいて、HTML ファイルに読み込む方法を取ることもできます。外部のJavaScript ファイルを HTML に読み込むには、以下のように記述します。

文法

JavaScript ファイルの読み込み<script src="JavaScript ファイルのパス "></script>

書き方のルール
まずは JavaScript を記述するにあたって必ず守らなければならないルールを理解しましょう。
・

基本的に半角の英数字と記号のみを使う。

・

シングルクォート（'）とダブルクォート（"）で括られた範囲内では全角文字を利用することもできる。

・

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

・

命令文の末尾にはセミコロン（;）をつける。

・

複数行に渡るひとまとまりの命令群を波かっこ { } で囲む。囲まれた範囲をブロッ
クと呼ぶ。

また、上記のルールを守っていれば、JavaScript のコードは自由に改行や半角スペースなどを挿入して良いことになっています。例えば、以下の 2 つのコードを見比べて見てください。

50

例プログラム Afor(i=0;i<10;i++){alert(i);}例

プログラム Bfor(i = 0; i < 10; i++) {alert(i);}この 2 つは、どちらも全く同じことが書かれています。しかし、プログラム A は見づらく、プログラム B は見やすいと感じられるのではないでしょうか。
このように見やすいコードを書くためのポイントは 2 つです。
・

単語や記号の間には半角スペースを入れる・

インデントを正しく設定する

インデントとはインデントというのは、文章を記述する際に空白スペースやタブなどを用いて見やすいよ
うに字下げを行うことです。プログラム B では、2 行目の alert(i); という命令文が少し右にずれた位置から開始されています。これがインデントを設定した状態です。
プログラム B では 1 行目で波かっこが開始されていて、3 行目で波かっこが終了しています。JavaScript では波かっこを多用するのですが、プログラム中にかっこがたくさん出てくると、開始かっこに対応する終了かっこが見つけづらくなってきます。
そこでかっこの開始行と終了行を同じ横位置に揃え、かっこの中は右にずらして記述する
ことで、かっこの対応関係が一目でわかるようになります。
インデント処理を行うには、キーボードの［Tab］キーを一度押します。

51

第4章

JavaScript 入門

for(i = 0 ; i < 10; i++) {alert(i);}[Tab] を挿入

コメント
alert 命令などの先頭にスラッシュ（/）を 2 つ付けると命令は無効化されます。

文法

一行のコメント//alert(" こんにちは ");JavaScript では、// 以降の文字列はコメント（プログラムの実行に影響を与えないメモ書き）となります。
なお、複数行にわたる文字列をコメントにする場合は、/* と */ でコメントする範囲を囲みます。

文法

複数行のコメント/*
コメントとして記述した内容は、スクリプトには影響しません。
*/

コメントには、自分で後からプログラムを読み返したときや、だれか他の人がそのプログラムを見たときに、処理内容の理解を助ける説明文を記述します。例えば、「// ラジオボタ
ン A が選択された場合は登録処理を行う」といった具合です。
また、今は使わないけれど消去したくはない、残しておきたいコードをコメントにして無効化する場合もあります。
HTML のコメントは <!-- --> でしたが、JavaScript のコメントとは記述方法が異なるので混同しないように気を付けましょう。

52

データの扱い方
はじめに覚えなければならないのは、JavaScript で文字列や数値などのデータを扱う方法です。皆さんが考え事をするとき、頭の中にいろいろな物事（データ）を思い浮かべますね。
それと同じように、コンピューターがプログラムを実行するときには、メモリという装置
上にたくさんのデータを記憶します。メモリ上にデータを記憶するには、まずデータの入れ物を用意しなければなりません。この入れ物のことを変数と呼びます。

変数の作り方メモリ上に変数を作る作業を、変数の「宣言」と言います。変数に名前を付けて、「この名前の変数を今から使いますよ」ということをコンピューターに宣言しておくのです。デー
タを扱う前には必ず変数の宣言を行います。

文法

変数宣言の書式

var 変数名 ;例x という名前の変数を作る

var x;

変数名には自由な名前を付けることができますが、読みやすいプログラムにするためには何のデータを入れるための変数なのかを推測しやすい名前にしましょう。例えば金額のデータを入れる変数であれば、「money」や「price」といった変数名が良いでしょう。

53

第4章

JavaScript 入門

変数の使い方変数を作った直後は、まだ変数の中には何もデータが入っていない、空っぽの状態になっています。変数にデータを入れるには、以下のようにします。

文法

変数へ値を入れる

変数名 = 値 ;例

変数 x の中に「10」という数値を入れる

x = 10;例

変数 x の中に「こんにちは」という文字列を入れる

x = " こんにちは ";※ JavaScript で文字列データを扱う場合は、ダブルクォート（"）またはシングルクォート（'）で囲みます。
注意しなければならないのは、この「=」記号は算数の「=」記号とは意味合いが異なるということです。算数では左右の値が等しいということを意味しますが、JavaScript のイコー
ル記号は右辺の値を左辺に入れる、という意味になります。左右が逆になってしまうと正しく動きませんので注意しましょう。
なお、変数へ値を入れることを、値の「代入」といいます。以降も頻出する言葉なので覚えておきましょう。
宣言と代入は、1 行にまとめて同時に行うこともできます。

54

文法

宣言と代入を同時に行う

var 変数名 = 値 ;JavaScript から画面にデータを出力する
データをアプリの画面に表示するにはさまざまな方法がありますが、ここでは最も簡単な命令を使って確認してみましょう。

文法<body> タグ内にデータを出力する

document.writeln( 表示するデータ );この命令を使うと、<body> タグ内の一番上の位置にデータを書き込みます。
<body>

この位置に出力される

<div>
		
<p> こんにちは </p></div></div>

55

第4章

JavaScript 入門

実習「今日は何日？」プロジェクトを開き、index.html を編集しましょう。
まずは <body> タグ内の「This is a template for Monaca app.」という文字列を変更します。

サンプルプログラム
index.html
15
16
17
18

<body><br />
今日も一日がんばりましょう。
</body>続いて、<script> タグ内に JavaScript による命令を記述します。

サンプルプログラム
index.html
10
11
12
13

56

<script>
var today = "2015 年 09 月 13 日 ";document.writeln(today);</script>サンプルプログラム
index.html（完成版 )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!DOCTYPE HTML><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1, user-scalable=no"><meta http-equiv="Content-Security-Policy" content="default-src *; stylesrc * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"><script src="components/loader.js"></script><link rel="stylesheet" href="components/loader.css"><link rel="stylesheet" href="css/style.css"><script>
var today = "2015 年 09 月 13 日 ";document.writeln(today);</script></head><body><br />
今日も一日がんばりましょう。
</body></html>

実行結果

このままでは <body> タグに文字列を記述したのと変わらないので、次は自動的に現在の日付が表示されるように変更してみましょう。

57

第4章

JavaScript 入門

今日の日付を取得する
JavaScript には、さまざまなデータを扱うための便利な命令群があらかじめ用意されています。そして、命令にはたくさんの種類があるので、カテゴリごとに分けられています。
日付を扱うための命令は、「Date」の中に含まれています。

日付に関する操作

日付を扱う命令を使えるようにするための準備
var 変数 = new Date();年を取得する命令
変数 .getFullYear();

月を取得する命令
変数 .getMonth();※現在の月から 1 引いた値が取得される（現在 1 月なら、0 という値が取得される）日を取得する命令
変数 .getDate();58

時間を取得する命令
変数 .getHours();分を取得する命令
変数 .getMinutes();秒を取得する命令
変数 .getSeconds();

曜日を取得する命令（日曜日～土曜日まで表す、0 ～ 6 の数値を返す）
変数 .getDay();

これらの命令を使って、アプリに現在の日付を表示します。

実習「今日は何日？」プロジェクトの <script> タグ内を以下のように変更してください。

サンプルプログラム

59

第4章

JavaScript 入門

index.html
10
11
12
13
14
15
16
17
18
19
20

<script>// 日付に関する命令を使えるようにする
var date = new Date();// 年、月、日の取得
var year = date.getFullYear();var month = date.getMonth() + 1;
var day = date.getDate();// 日本の表記にする
var today = year + " 年 " + month + " 月 " + day + " 日 ";document.writeln(today);</script>

完成したら、プレビュー画面で今日の日付が出力されていることを確認して下さい。
少し難しい内容になりましたので、順番に処理を追っていきましょう。
まず、12 行目で日付を扱う命令の利用準備を行っています。日付関連の命令を使う場合
は、最初にこの処理が必要となります。
14 ～ 16 行目では、現在の年、月、日を取得します。月を取得する命令だけは少し特殊で、現在の月から 1 引いた値が取得されてしまうので、1 を加算して正しい月に変換しています。この場合の「+」記号は、算数と同じで足し算をするという意味です。
最後に、18 行目で取得した年、月、日を日本表記の日付形式にしています。ここでも「+」記号が出てきていますが、数値ではなく文字列を「+」記号で繋いでいるので、計算処理はできません。文字列を「+」記号で繋いだ場合は、足し算ではなく文字列の連結になります。

ポイント

注意！「+」記号には二通りの意味がある

数値同士を「+」記号で繋いだ場合は足し算、文字列を「+」記号で繋いだ場合は文字列の連結となる

これで、今日の日付を表示するアプリは完成です。明日以降、またこのアプリを実行してみて下さい。日付が更新されていることが確認できるはずです。
このように、JavaScript を使うことで、いつ見ても同じ画面ではなく、状況に応じて異なる結果を表示することができるようになります。

60

本書サポートページ
https://ja.monaca.io/book/001/

Monacaで学ぶはじめてのプログラミング 〜モバイルアプリ入門編〜
2016年３月18日 発行
2020年４月１日 初版第４刷発行
著 者
協 力
発行所

アシアル株式会社、生形可奈子、岡本雄樹
株式会社IMAKE、濱野将、濱野香織
アシアル株式会社〒113-0034 東京都文京区湯島2-31-14
ファーストジェネシスビル
TEL.03（5875）6862 FAX.03（5875）6216
http://www.asial.co.jp©Asial Corporation, Kanako Ubukata, Yuki Okamoto
2016, Printed in Japan
ISBN978‑4‑86584‑099‑5

本書のコピー、スキャン、デジタル化等の無断複製は著作権法上での例外を除き禁じられています。本書を代行業者等の第三者に依頼してスキャンやデジタル化
することは、たとえ個人や家庭内の利用でも一切認められておりません。