❸ クラウド IDE

❷ Monaca にログイン

　ダッシュボードのページを見み

るためには、Monaca の

サイトにログインしておく必ひつ

要よう

がある。一いち

度ど

作さ

業ぎょう

をやめ

て、Monaca のサイトにログインしていないときは、ロ

グインしてから作さ

業ぎょう

をはじめよう。画が

面めん

右みぎ

上うえ

にあるログ

インを選せん

択たく

して❷、メールアドレスとパスワードを入にゅう

力りょく

して、ログインのボタンをクリックしよう❸。これも

Scratch を使つか

う場ば

合あい

といっしょだから大だい

丈じょう

夫ぶ

だよね。

　Monaca で作さ

業ぎょう

をはじめるために

は、Dashboard（ダッシュボード）と

いうページを使つか

うよ❶。このダッシュ

ボードのページは、つくっているアプ

リの一いち

覧らん

を見み

ることができ、選せん

択たく

するとアプリの内ない

容よう

を編へん

集しゅう

することができる。Scratch

でいうところの、「私わたし

の作さく

品ひん

」のページと同おな

じだね。

　ここからは「Monaca（モナカ）」という、スマホアプリをつくるための Web サイトを

使つか

うよ。Monaca を使つか

えば、特とく

別べつ

なアプリをインストールしなくても Web ブラウザーだ

けでアプリを開かい

発はつ

することができるんだ。つくっているアプリを試ため

しに動うご

かしたりも簡かん

単たん

にできて便べん

利り

だよ。Monaca へアクセスするときには、Part 4 でも使つか

った Chrome を

使つか

うようにしよう。ほかの Web ブラウザーだとうまく動どう

作さ

しないことがあるから注ちゅう

意い

してね。Mac を使つか

っている場ば

合あい

は、Mac 用よう

の Chrome でアクセスすれば使つか

い方かた

はいっ

しょだよ。

アプリづくりの準じゅん

備び

❷

❸

❹

❻

❺

❶

　Monaca の無む

料りょう

（Free）プランを使つか

う場ば

合あい

は、ア

プリのプロジェクト（Scratch のプロジェクトと

同おな

じだ）は３つまでしかつくれないという制せい

限げん

が

ある。アカウント作さく

成せい

をした段だん

階かい

で、はじめから

「はじめての Monaca アプリ」とい

うサンプルのプロジェクトが用よう

意い

さ

れているから、まずはそれを開ひら

こ

う。プロジェクトの一いち

覧らん

からプロ

ジェクトを選せん

択たく

して❹、「クラウド

IDE で開ひら

く」というボタンをクリッ

クしよう❺。

　❻の画が

面めん

が開ひら

いたかな？ Monaca では、

このクラウド IDE と呼よ

ばれる画が

面めん

を使つか

って

アプリをつくっていくよ。

155154 Part 5　スマホアプリをつくろう

❶ ダッシュボードを開ひら

く

　Part 5 の内ない

容よう

を行おこな

うには、Monaca のサイトで

無む

料りょう

登とう

録ろく

をして、アカウントを作さく

成せい

する必ひつ

要よう

があ

り ま す。プ ロ グ ラ ミ ン グ サ ポ ー ト ペ ー ジ の

「Monaca のアカウント登とう

録ろく

」の項こう

目もく

で紹しょう

介かい

して

いる手て

順じゅん

で、大おとな

人といっしょに必ひつ

要よう

な手て

続つづ

きを

行おこな

ってください。

Monaca のアカウント登とう

録ろく

クラウド IDE

の使つか

い方かた

は

次つぎ

のページへ！

https://kodomonokagaku.com/miraiscience/support/

　さっそく新あたら

しくプロジェクトをつくってみ

よう。Monaca のプロジェクトは Scratch の

プロジェクトと同おな

じで、これからつくるアプ

リを管かん

理り

するための入い

れ物もの

のことだよ。

　ダッシュボードの画が

面めん

の左ひだり

上うえ

にある「新あたら

しいプロジェクトを作る」というボタンを

クリックしよう❶。プロジェクトのテンプ

レートを選せん

択たく

する画が

面めん

が表ひょう

示じ

される。テン

プレートは、アプリをつくるために必ひつ

要よう

な

ファイルの「ひな形がた

」のことだよ。つくり

たいアプリに応おう

じて、いくつかの種しゅ

類るい

が用よう

意い

されているんだ。今こん

回かい

はシンプルなアプ

リをつくって練れん

習しゅう

をしたいから、一いち

番ばん

右みぎ

の

「No Framework」というボタンを押お

し❷、

「さい

小しょう

限げん

のテンプレート」で「作さく

成せい

」を選せん

択たく

しよう❸。プロジェクト名めい

を入にゅう

力りょく

する画が

面めん

が

表ひょう

示じ

されるので、「あいさつアプリ」と入にゅう

力りょく

して❹、「プロジェクトを作さく

成せい

する」を選せん

択たく

し

よう❺。今こん

回かい

は説せつ

明めい

については入にゅう

力りょく

しなくて OK だ。

　さい

初しょ

はシンプルなアプリをつくりながら、Monaca の使つか

い方かた

や基き

本ほん

的てき

なアプリのつく

り方かた

を解かい

説せつ

するよ。さい

初しょ

につくるのは「あいさつを表ひょう

示じ

してくれるアプリ」だ。

　IDE というのは、統とう

合ごう

開かい

発はつ

環かん

境きょう

（Integrated Development Environment）の略りゃく

で、プ

ログラムを書か

くためのエディターだけでなく、バグの発はっ

見けん

に役やく

立だ

つデバッガーという

ツールや、つくったアプリをスマホに転てん

送そう

するためのツールなど、プログラミングをす

るときに必ひつ

要よう

になるいろいろなツールをまとめて、使つか

いやすくしたもののことだよ。

　画が

面めん

の右みぎ

上うえ

には、人ひと

型がた

のアイコンが表ひょう

示じ

されているね。ここを

クリックすると、ダッシュボードの画が

面めん

に戻もど

ったり、Monaca の

サイトからログアウトしたりすることができるぞ❽。

　画が

面めん

の右みぎ

に表ひょう

示じ

されているのはプレビューだ。つくっているアプリの見み

た目め

がどのよ

うになっているかを表ひょう

示じ

している。Part 4 の 145 ページで紹しょう

介かい

した Brackets のライブ

プレビューと同おな

じだと思おも

えばいい。画が

面めん

の下した

にあるのはデバッガー・プレビューログだ。

プログラムのエラーや、アプリの動どう

作さ

の情じょう

報ほう

などを確かく

認にん

することができるよ。

　画が

面めん

の真ま

ん中なか

に表ひょう

示じ

されているのがコードエディターだ。ここに

HTML や JavaScript などを入にゅう

力りょく

していくよ。

　画が

面めん

の左ひだり

に表ひょう

示じ

されているのは、プロジェクトパネルで、ここに

アプリで使つか

っているさまざまなファイルが表ひょう

示じ

されている。この一いち

覧らん

から HTML や JavaScript を書か

いたファイルをダブルクリックす

ると❼、コードエディターで開ひら

いて編へん

集しゅう

ができる。

あいさつアプリをつくろう

❽

❶No Framework を選

せん択たく

する

「あいさつアプリ」と入にゅう

力りょく

❷

❸❹

❺

プレビュー：

作さく

成せい

している

アプリの画が

面めん

が

表ひょう

示じ

される

プロジェクト

パネル：

プロジェクトの

ファイルが

表ひょう

示じ

される

デバッガー・プレビューログ：デバッグなどに必ひつ

要よう

なさまざまな情じょう

報ほう

が表ひょう

示じ

される

コードエディター：HTML や JavaScript を編へん

集しゅう

するためのエディターメニューバー：さまざまな操そう

作さ

を行おこな

う

❼

157156 Part 5　スマホアプリをつくろう

❶ 新あたら

しいプロジェクト

　うまく修しゅう

正せい

できたら、ファイルメニューから、「保ほ

存ぞん

」を選せん

択たく

➒して、編へん

集しゅう

した index.html を保ほ

存ぞん

しよう。

　編へん

集しゅう

をして、保ほ

存ぞん

をしていないファイルについては、エ

ディターの上うえ

にあるファイル名めい

のさい

後ご

に「*」のマークが表ひょう

示じ

されるよ➓。保ほ

存ぞん

するとこのマークは消き

えるぞ。

　保ほ

存ぞん

をすると自じ

動どう

的てき

にプレビューが更こう

新しん

されて、表ひょう

示じ

され

ている文も

字じ

が「あいさつアプリ」に変か

わったはずだ⓫。ここ

めのボタン（丸まる

い矢や

印じるし

）を押お

せば⓬、さい

新しん

の内ない

容よう

に

更こう

新しん

されるよ。

までは Part 4 でやった HTML の編へん

集しゅう

とほとんど同おな

じだから

簡かん

単たん

だよね。

　もし、プレビューが自じ

動どう

的てき

に更こう

新しん

されない場ば

合あい

、更こう

新しん

のた

　次つぎ

は JavaScript を書か

いてみよう。

　JavaScript は Web ブ ラ ウ ザ ー で 実じっ

行こう

す る こ と が で き る プ ロ グ ラ ミ ン グ 言げん

語ご

だ。

JavaScript を使つか

えば、いろいろなしくみをもった Web サイトをつくることができる。

今こん

回かい

は Web サイトではなく、スマホアプリをつくっているけれど、スマホの OS には、

HTML を表ひょう

示じ

したり、JavaScript を実じっ

行こう

したりするための部ぶ

品ひん

（WebView と呼よ

ばれる）

が内ない

蔵ぞう

されている。HTML で画が

面めん

をつくり、JavaScript を使つか

ってしくみをつくれば、ス

マホのアプリとして動どう

作さ

させることができるんだ。HTML ファイルの中なか

に「script」とい

うタグを書か

いて、その中なか

に JavaScript を書か

くことができるぞ⓭。

❹ 保ほ

存ぞん

する

❺ JavaScript とは？

　プロジェクトの一いち

覧らん

に「あいさつア

プリ」が追つい

加か

されたね。「クラウド IDE

で開ひら

く」を選せん

択たく

して IDE の画が

面めん

に切き

り

替か

えよう❻。「あいさつアプリ」を編へん

集しゅう

できる IDE の画が

面めん

が開ひら

いたね❼。

　プレビューには、「This is a template

for Monaca app.（ こ れ は Monaca で

つくるアプリのひな形がた

です）」と表ひょう

示じ

されているはずだ。

　コードエディターで index.html が開ひら

いていることを確かく

認にん

して、次つぎ

の文も

字じ

列れつ

が書か

かれ

ている部ぶ

分ぶん

を探さが

してみよう。

　14 行ぎょう

目め

に 改かい

行ぎょう

の た め の「<br/>」の タ グ が あ り、そ の 下した

の 15 行ぎょう

目め

に「This is a

template for Monaca app.」という文も

字じ

列れつ

があるね。これを「あいさつアプリ」という一いち

番ばん

大おお

きな表ひょう

題だい

に書か

き換か

えてみよう❽。表ひょう

題だい

を書か

くためのタグは覚おぼ

えているかな？「h1」

のタグだったね。Monaca のコードエディターも、Brackets と同おな

じように、タグの候こう

補ほ

を自じ

動どう

的てき

に表ひょう

示じ

してくれる機き

能のう

（141 ページ参さん

照しょう

）があるから活かつ

用よう

しよう。

あいさつアプリという表ひょう

題だい

を

表ひょう

示じ

するように変へん

更こう14 行

ぎょう目め

と 15 行ぎょう

目め

を削さく

除じょ

❻

❼

❽

➒

⓫

⓬

⓭Script のタグの中

なかに

JavaScript を書か

いていく

保ほ

存ぞん

をしていない印しるし ➓

プレビューのさい

初しょ

の表ひょう

示じ

159158 Part 5　スマホアプリをつくろう

❷ IDE を開ひら

く

❸ HTML の編へん

集しゅう

　つくったあいさつアプリをスマホで動うご

かしてみよう！ Monaca には「実じっ

機き

デバッグ」という機き

能のう

があって、つくったアプリをスマホで試ため

しに動うご

かしてみることができるよ。

⓱

アプリの動どう

作さ

ログを見み

る

プロジェクトをさい

新しん

の状じょう

態たい

に

更こう

新しん

する

プロジェクトの

一いち

覧らん

に戻もど

る

⓲

⓳20

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

る

　index.html の 10 行ぎょう

目め

と 11 行ぎょう

目め

を見み

てみよう。じつは「script」タグ

はすでに用よう

意い

されているぞ。この

script タ グ の 中なか

に JavaScript を 書か

け ば、index.html が 表ひょう

示じ

さ れ た と

きに実じっ

行こう

されるよ。

　入にゅう

力りょく

できたら、保ほ

存ぞん

をしよう。保ほ

存ぞん

をすると、⓰のようなアラートが

表ひょう

示じ

される。もし表ひょう

示じ

されない場ば

合あい

は、JavaScript が間ま

違ちが

っていないかを確かく

認にん

してみよう。少すこ

しわかりにくいけれど、こ

れは Monaca のプレビューで、今いま

書か

いたア

ラートが表ひょう

示じ

されたということだよ。

　あいさつアプリという名な

前まえ

にしたけれど、まだ何なん

のあいさつもしてくれないよね。「ア

ラート」という小ちい

さなウインドウを表ひょう

示じ

させて、そこにあいさつを表ひょう

示じ

させるようにし

てみよう。アラートを表ひょう

示じ

させて、その中なか

にメッセージを表ひょう

示じ

させるための JavaScript

は⓮のようになるぞ。「こんにちは」以い

外がい

はすべて半はん

角かく

で入にゅう

力りょく

することに注ちゅう

意い

しよう。

Scratch の「と言い

う」のブロック⓯と同おな

じだと考かんが

えるとわかりやすいね。Brackets と同おな

じように、自じ

動どう

的てき

にインデント（141 ページ参さん

照しょう

）がつくので、script の開かい

始し

タグ（10 行ぎょう

目め

）のさい

後ご

で改かい

行ぎょう

を入にゅう

力りょく

すれば、インデントされた状じょう

態たい

で次つぎ

の行ぎょう

にカーソルが移い

動どう

する

ぞ。

⓮

⓯ Scratch の

ブロックだと…

カッコを対たい

応おう

させるさい

後ご

はセミコロンを

忘わす

れない

インデント ダブルクオーテーションで囲かこ

む

指し

定てい

したあいさつは

この部ぶ

分ぶん

に表ひょう

示じ

されている

Scratch だと…

⓰

161Part 5　スマホアプリをつくろう160

❻ JavaScript を書か

こう ❽ スマホで動どう

作さ

確かく

認にん

しよう

❼ 保ほ

存ぞん

する

　つくったスマホアプリを実じっ

際さい

のスマホで動うご

かす

ためには、7 ページにある環かん

境きょう

を備そな

えたスマホの

機き

種しゅ

を用よう

意い

した上うえ

で、「Monaca デバッガー」とい

う無む

料りょう

のアプリをインストールする必ひつ

要よう

がありま

す（iPhone、Android 対たい

応おう

）。以い

下か

のプログラミン

グサポートページの「Monaca デバッガーのイン

ストール」の項こう

目もく

で紹しょう

介かい

している手て

順じゅん

でアプリを

インストールして、Monaca と同おな

じメールアドレ

スとパスワードでアプリにログインしてください。

Monaca デバッガーのインストール

https://kodomonokagaku.com/miraiscience/support/

Monaca デバッカーのアプ

リ に ロ グ イ ン す る と、

Monaca.io プ ロ ジ ェ ク ト

の欄らん

に今いま

つくっている「あ

いさつアプリ」が見み

えるは

ず。これをタップする⓱。

アプリを起き

動どう

して動どう

作さ

を確かく

認にん

することができるぞ⓲。

画が

面めん

の右みぎ

下した

に表ひょう

示じ

されて

いるのは、デバッガーメ

ニューを表ひょう

示じ

するための

ボタンだよ⓳。これを押お

すと、メニューが表ひょう

示じ

さ

れて、いろいろな操そう

作さ

が

できるぞ20。

　「イベント」というのは、ユー

ザーがボタンをクリックした

り、ページを移い

動どう

したり、ユー

ザーの操そう

作さ

によって生しょう

じる「で

きごと」のことだよ。ここでは、

ボタンを押お

したらあいさつを

表ひょう

示じ

するようにアプリを改かい

造ぞう

するぞ。

　まずはボタンを表ひょう

示じ

させるための HTML を index.html に加くわ

えよう。ボタンを表ひょう

示じ

させるためには、「button」というタグを

使つか

うよ。お手て

本ほん

を参さん

考こう

にして追つい

加か

してみよう❶。button という

タグを使つか

うと、HTML でクリックできるボタンを表ひょう

示じ

させるこ

とができる。タグで囲かこ

んだ内ない

容よう

はボタンのラベルになるよ。今こん

回かい

は「あいさつをする」というラベルにしてみた。HTML が完かん

成せい

したら、保ほ

存ぞん

をして、プレビューでボタンが表ひょう

示じ

されたか確かく

認にん

してみよう❷。

　スマホで Monaca デバッガーを表ひょう

示じ

させたままにしておく

と、更こう

新しん

を自じ

動どう

で検けん

知ち

して、表ひょう

示じ

を更こう

新しん

してくれるぞ❸。

　ここまでつくったあいさつアプリは、アプリを起き

動どう

するとすぐにアラートが表ひょう

示じ

され

ていたね。「イベント」と「関かん

数すう

」を使つか

って、アプリを起き

動どう

した後あと

で、ボタンを押お

すとあい

さつを表ひょう

示じ

するように改かい

造ぞう

してみよう。まずは下した

に、次つぎ

の❶から❸で作さく

成せい

・編へん

集しゅう

する

HTML や JavaScript を整せい

理り

しておくよ。どこを書か

いているかわからなくなったら、この

ページに戻もど

って確かく

認にん

しよう。

あいさつアプリを改かい

造ぞう

しよう

❸ 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, 6 <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: 7 <script src="components/loader.js"></script> 8 <link rel="stylesheet" href="components/loader.css"> 9 <link rel="stylesheet" href="css/style.css">10 <script>11 function hello(){12 alert("こんにちは");13 }14 </script>15 </head>16 <body>17 <h1>あいさつアプリ</h1>18 <button onclick="hello();">あいさつをする</button>19 </body>20 </html>

163162 Part 5　スマホアプリをつくろう

❶

❷

❶ ボタンの設せっ

置ち

ボタンが

ついたよ！

❷ 関かん

数すう

をつくる

❸ 関かん

数すう

の呼よ

び出だ

し

❶ ボタンの設せっ

置ち

　保ほ

存ぞん

をしたら、プレビューに表ひょう

示じ

されているボタンをクリックして❻、アラートが表ひょう

示じ

されることを確かく

認にん

しよう❼。

　Monaca デバッガーでも同おな

じように動どう

作さ

をすることを確かく

認にん

してみよう❽❾。

　じつはこの関かん

数すう

に似に

たものをつくる

機き

能のう

は Scratch にも用よう

意い

されている

よ。Scratch では「その他た

」のカテゴリから、新あたら

しい

ブロックを自じ

分ぶん

でつくることができる。たとえば、

hello というブロックをつくって、内ない

容よう

を「こんにち

は」という吹ふ

き出だ

しが表ひょう

示じ

されるようにしておく。

スプライトがクリックされたら、hello というブ

ロックを実じっ

行こう

するようにしたのと

同おな

じことだよ。少すこ

し違ちが

うのは、今こん

回かい

つくった HTML では、ボタンと

いう別べつ

の部ぶ

品ひん

（スプライト）がク

リックされたら hello という関かん

数すう

（ブロック）を実じっ

行こう

できるように

したことだね。

❻ ❽❼

❾

JavaScript だと…

Scratch のブロックだと…

❷ 関かん

数すう

をつくる（定てい

義ぎ

する）

❸ 関かん

数すう

の呼よ

び出だ

し

　さて、今いま

のままではボタンを押お

してもな

にもおこらないし、index.html を保ほ

存ぞん

す

るとアラートが表ひょう

示じ

されてしまうね。これを改かい

善ぜん

してみよう。

　まずは、JavaScript のアラートを表ひょう

示じ

している部ぶ

分ぶん

を「関かん

数すう

」として書か

き直なお

す必ひつ

要よう

が

ある。関かん

数すう

というのは、プログラムの処しょ

理り

をまとめて、名な

前まえ

をつけたものだよ。今こん

回かい

は、

アラートを表ひょう

示じ

する処しょ

理り

をまとめて、hello という名な

前まえ

をつけた関かん

数すう

をつくってみよう

❹。関かん

数すう

のつくり方かた

の基き

本ほん

は右みぎ

の図ず

の

通とお

りだ。関かん

数すう

をつくることを、関かん

数すう

を

「定てい

義ぎ

する」ともいうよ。関かん

数すう

の名な

前まえ

は

半はん

角かく

英えい

数すう

でつけることに注ちゅう

意い

しよう。

　hello という名な

前まえ

の関かん

数すう

がつくれたら、ファイルを保ほ

存ぞん

しよう。ファイルを保ほ

存ぞん

しても

アラートは表ひょう

示じ

されなくなったね。関かん

数すう

をつくっただけでは、関かん

数すう

としてまとめた処しょ

理り

は実じっ

行こう

されないんだ。関かん

数すう

の名な

前まえ

を指し

定てい

して「呼よ

び出だ

し」をすると、関かん

数すう

としてまとめた

処しょ

理り

が実じっ

行こう

されるようになるぞ。

　今こん

回かい

は、ボタンが押お

されたらこの hello という関かん

数すう

を呼よ

び出だ

すようにしてみる❺。ボ

タンの HTML にクリックされたイベントを調しら

べて、hello という関かん

数すう

を呼よ

び出だ

すような

しくみを追つい

加か

しよう。ここでは、ボタンの HTML に onclick という部ぶ

分ぶん

を追つい

加か

して、

hello という名な

前まえ

の関かん

数すう

を呼よ

び出だ

すようにしているよ。

❹

❺

カッコを忘わす

れないように

ダブルクオーテーションで囲かこ

む

hello という関かん

数すう

の呼よ

び出だ

し半はん

角かく

スペース

function 関かん

数すう

の名な

前まえ

(){

　　　関かん

数すう

としてまとめたい処しょ

理り

}インデント { と } を対

たい応おう

させ、

この間あいだ

に関かん

数すう

として

まとめたい処しょ

理り

を書か

く

半はん

角かく

のスペース

165164 Part 5　スマホアプリをつくろう

❹ クリックして確かく

認にん

関かん

数すう

呼よ

び出だ

しの

書か

き方かた

さい後ご

はセミコロンを

忘わす

れない

関かん

数すう

の名な

前まえ

();

合あい

は =（イコール）を使つか

う。この場ば

合あい

は、ユーザーが入にゅう

力りょく

用よう

のボックス（プロンプト）に入にゅう

力りょく

した文も

字じ

列れつ

（名な

前まえ

）を

代だい

入にゅう

している。Scratch の場ば

合あい

は「=」の記き

号ごう

は代だい

入にゅう

では

なく、比ひ

較かく

をするときに使つか

っていたから注ちゅう

意い

しよう。

　13 行ぎょう

目め

では、変へん

数すう

name には、入にゅう

力りょく

された名な

前まえ

が代だい

入にゅう

されているから、これと「さん、こんにちは」という文も

字じ

列れつ

をつなげて表ひょう

示じ

している。変へん

数すう

と文も

字じ

列れつ

をつなげるために +（プラス）の記き

号ごう

を使つか

うよ。

　Scratch にも入にゅう

力りょく

用よう

のボックスを表ひょう

示じ

するための、「と聞き

いて待ま

つ」というブロックが

用よう

意い

されているから、ほとんど同おな

じことができる。参さん

考こう

のために Scratch で同おな

じことを

した場ば

合あい

のスクリプトも載の

せておくね⓬。Scratch の場ば

合あい

は、入にゅう

力りょく

された文も

字じ

列れつ

は「答こた

え」という変へん

数すう

に代だい

入にゅう

されるようになっているのが JavaScript と違ちが

うところだね。

Scratch のブロックだと…

⓫

⓬

❺ 入にゅう

力りょく

の受う

け取と

り

　さい

後ご

の 仕し

上あ

げ に、162 ペ ー ジ の

HTML と JavaScript からさらに、自じ

分ぶん

の名な

前まえ

を入にゅう

力りょく

して、あいさつに含ふく

めるようにしてみよう。➓のように

書か

いていくよ。完かん

成せい

した動どう

作さ

は⓫の

ようになる。Monaca デバッガーで

も、名な

前まえ

を入にゅう

力りょく

してあいさつを表ひょう

示じ

させることができるぞ。

　では、書か

いたプログラムのポイン

ト を 解かい

説せつ

し て い こ う。ユ ー

ザーからの入にゅう

力りょく

を受う

け取と

ると

きは、「prompt」という命めい

令れい

を使つか

うよ。そして、JavaScript

でも Scratch と同おな

じように変へん

数すう

を使つか

うことができるぞ。

　12 行ぎょう

目め

は入にゅう

力りょく

された名な

前まえ

を保ほ

存ぞん

しておく部ぶ

分ぶん

だね。こ

こでは名な

前まえ

を保ほ

存ぞん

しておくた

めに name という変へん

数すう

を用よう

意い

し た。JavaScript の 場ば

合あい

は、

➓

Scratch では…

JavaScript では…

name という名な

前まえ

の変へん

数すう

を用よう

意い

して、

杉すぎ

浦うら

という文も

字じ

列れつ

を代だい

入にゅう

する

var name = "杉すぎ

浦うら

";

var name = prompt("お名な

前まえ

は？");

半はん

角かく

のスペース 変へん

数すう

name に入にゅう

力りょく

された文も

字じ

列れつ

を代だい

入にゅう

さい後ご

はセミコロンを

忘わす

れない入にゅう

力りょく

用よう

のボックス

（プロンプト）を表ひょう

示じ

alert(name + "さん、こんにちは");

変へん

数すう

name の内ない

容よう

と

「さん、こんにちは」をつなげて表ひょう

示じ

する

変へん

数すう

と文も

字じ

をつなげる

var の 後あと

に 半はん

角かく

ス ペ ー ス を 入い

れ

て、変へん

数すう

の名な

前まえ

を書か

くよ。Scratch

の場ば

合あい

は、「変へん

数すう

を作つく

る」というボ

タンを押お

して、変へん

数すう

の名な

前まえ

を入にゅう

力りょく

したよね。JavaScript の場ば

合あい

は変へん

数すう

の準じゅん

備び

についても文も

字じ

で書か

く

ぞ。

　Scratch と違ちが

って、変へん

数すう

の名な

前まえ

に漢かん

字じ

やひらがなは使つか

えないから

注ちゅう

意い

しよう※。変へん

数すう

に代だい

入にゅう

する場ば

167166 Part 5　スマホアプリをつくろう

※関かん

数すう

や変へん

数すう

に名な

前まえ

をつけるときは、次つぎ

の 3 つのことに注ちゅう

意い

しよう。

①数すう

字じ

、英えい

字じ

、_ と $ の記き

号ごう

が使つか

える

② JavaScript の予よ

約やく

語ご

（特とく

別べつ

な意い

味み

を持も

つ単たん

語ご

）を名な

前まえ

にすることはできない

主おも

な予よ

約やく

語ご

break・case・catch・continue・default・delete・do・else・false・fi nally・for・function・if・in・instanceof・

new・null・return・switch・this・throw・true・try・typeof・var・void・while・with

③数すう

字じ

から始はじ

まる名な

前まえ

をつけることはできない

169168 Part 5　スマホアプリをつくろう

❷ 準じゅん

備び

しよう

No Framework を選せん

択たく

する

❷❸

❹

❺

❻

❼

quiz2.html と入にゅう

力りょく

❽

❾

❿

❶ クイズアプリの設せっ

計けい

　ここからは今いま

まで解かい

説せつ

したことも使つか

って、プログラミングに関かん

するクイズのアプリを

つくってみよう。ぜんぶで 4 つの画が

面めん

のアプリだ。

　まずはこれからつくるアプリの内ない

容よう

を整せい

理り

し

ておこう❶。アプリを起き

動どう

すると、クイズが 3

問もん

出しゅつ

題だい

される。さい

初しょ

の問もん

題だい

はボタンで答こた

える５

択たく

の問もん

題だい

だ。次つぎ

は絵え

をタップして答こた

える３択たく

の

問もん

題だい

。さい

後ご

は、答こた

えを文も

字じ

で入にゅう

力りょく

をして答こた

える

タイプの問もん

題だい

だよ。

　3 問もん

の問もん

題だい

に答こた

え終お

わると、さい

後ご

のページで

正せい

解かい

数すう

が表ひょう

示じ

され、正せい

解かい

数すう

によってコメントが

変か

わるようにしてみよう。

クイズアプリをつくろう

ボタンをクリックして

答こた

える

画が

像ぞう

をクリックして

答こた

える

入にゅう

力りょく

をして

答こた

える

正せい

解かい

数すう

でコメントが

変へん

化か

する

ここではプログラミングに

関かん

するクイズを例れい

にしたけど、

問もん

題だい

のテーマはなんでもいいよ！

やり方かた

がわかったらオリジナルの

クイズアプリをつくってみよう。

第だい

1 問もん

第だい

3 問もん

結けっ

果か

発はっ

表ぴょう

正せい

解かい

は X 問もん

でした

コメント

❶第だい

2 問もん

画が

像ぞう

画が

像ぞう

画が

像ぞう

「新あたら

しいプロジェクトを作つく

る」をクリックする❷。

あ い さ つ ア プ リ と 同おな

じ よ う に、No

Framework のさい

小しょう

限げん

のテンプレートを

選せん

択たく

して❸、作さく

成せい

をクリックしよう❹。

名な

前まえ

はクイズアプリにして、説せつ

明めい

もそえ

てプロジェクトを作さく

成せい

しよう❺。

さい初しょ

にクイズアプリに必ひつ

要よう

な HTML のファイル

をぜんぶ用よう

意い

しておこう。画が

面めん

左ひだり

のプロジェク

トパネルの index.html を右みぎ

クリックし、「ファ

イルをコピー」を選せん

択たく

しよう❼。

ファイル名めい

には quiz2.html（２問もん

目め

を出しゅつ

題だい

する

ページ）と入にゅう

力りょく

して❽、OKをクリックしよう❾。

同おな

じように index.html をコピーする作さ

業ぎょう

をし

て quiz3.html（3 問もん

目め

を 出しゅつ

題だい

す る ペ ー ジ ）と

record.html（結けっ

果か

を表ひょう

示じ

するページ）をつくろ

う❿。

プロジェクトがつくれたら、クラウド IDE で

開ひら

くをクリックして IDE を起き

動どう

するよ❻。

　次つぎ

に、ページを移い

動どう

するため

の処しょ

理り

を追つい

加か

するよ。今いま

つくっ

ているのはさい

初しょ

の問もん

題だい

を出しゅつ

題だい

す

るためのページだね。次つぎ

のペー

ジは quiz2.html というファイ

ル名めい

でつくってある。正せい

解かい

のと

き も 不ふ

正せい

解かい

の と き も、次つぎ

の

quiz2.html に 移い

動どう

す

るように処しょ

理り

を追つい

加か

し

よう。location.href に

移い

動どう

したいページの名な

　Monaca デバッガーでも同おな

じようにボタン

をタップして⓰、表ひょう

示じ

がでることを確かく

認にん

して

おこう⓱。

前まえ

を代だい

入にゅう

すると、ページを移い

動どう

することができる⓲。

　これも実じっ

際さい

にボタンを押お

して、動どう

作さ

確かく

認にん

をしておく

とよいね⓳。まだ quiz2.html のページは編へん

集しゅう

をして

いないから、ボタンを押お

して、「This is a template for

Monaca app.」と書か

かれた quiz2.html のページが表ひょう

示じ

されれば OK だ。

　プレビューの表ひょう

示じ

を index.html に戻もど

したいときは、更こう

新しん

ボタンを押お

せばいいぞ⓴。Monaca デバッガーの場ば

合あい

は、デバッガーメニューから

更こう

新しん

ボタンをタップしよう21。

❸ HTML の編へん

集しゅう

と正せい

解かい

判はん

定てい

　まずは 1 ページ目め

（index.html）から

つくっていくよ。HTML を編へん

集しゅう

して、問もん

題だい

と答こた

えを選えら

ぶボタンを表ひょう

示じ

させよう⓫。

これはこれまでの復ふく

習しゅう

だから簡かん

単たん

だね。

　次つぎ

にそれぞれのボタンを押お

したときに

実じっ

行こう

される関かん

数すう

をつくるよ。正せい

解かい

のボタ

ンは 5 つのうち 1 つだけだ。正せい

解かい

だった

と き に 実じっ

行こう

さ れ る 関かん

数すう

を correct（ 正せい

解かい

）、間ま

違ちが

いだったときに実じっ

行こう

される関かん

数すう

を incorrect（不ふ

正せい

解かい

）という名な

前まえ

でつ

くろう⓬。

　関かん

数すう

の内ない

容よう

として、正せい

解かい

か不ふ

正せい

解かい

かを

知し

らせるためのアラートを表ひょう

示じ

するよう

にしておこう。ちなみに、正せい

解かい

（日に

本ほん

で作つく

られたプログラミング言げん

語ご

）は Ruby だ。

　次つぎ

に HTML のボタンの部ぶ

分ぶん

に⓬でつ

くった関かん

数すう

の呼よ

び出だ

しを加くわ

えるよ⓭。

Ruby のボタンだけは correct 関かん

数すう

を呼よ

び出だ

すようにして、それ以い

外がい

のボタンは

みんな incorrect 関かん

数すう

を呼よ

び出だ

すように

すればいいね。この段だん

階かい

でボタンを押お

し

てみて⓮、正せい

解かい

（すごい！正せい

解かい

だよ！）

か不ふ

正せい

解かい

（残ざん

念ねん

！はずれ！）のアラート

が表ひょう

示じ

されることを確かく

認にん

しておこう⓯。

171170 Part 5　スマホアプリをつくろう

❹ ページを移い

動どう

する処しょ

理り

⓰

⓲

⓳

21

⓱

Ruby のボタンだけ correct 関かん

数すう

を

呼よ

び出だ

すようにする

⓫

⓬

⓭

⓯

⓮

この画が

面めん

を

つくるよ！

⓴

　Monaca デバッガーを使つか

っているときは、デバッガーの Resources というタブから

セッションストレージの内ない

容よう

を確かく

認にん

することができるぞ25。

1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, 6 <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: 7 <script src="components/loader.js"></script> 8 <link rel="stylesheet" href="components/loader.css"> 9 <link rel="stylesheet" href="css/style.css">10 <script>11 function correct(){12 alert("すごい！正解だよ！ ");13 location.href = "quiz2.html";14 sessionStorage.score = 1;15 }16 17 function incorrect(){18 alert("残念！はずれ！ ");19 location.href = "quiz2.html";20 sessionStorage.score = 0;21 }22 </script>23 </head>24 <body>25 <h1>第1問</h1>26 <p>日本で作られたプログラミング言語は？ </p>27 <button onclick="incorrect();">Scratch</button>28 <button onclick="incorrect();">Python</button>29 <button onclick="correct();">Ruby</button>30 <button onclick="incorrect();">Swift</button>31 <button onclick="incorrect();">Java</button>32 </body>33 </html>

❺ 正せい

解かい

数すう

のスコア記き

録ろく

　1 ページ目め

の製せい

作さく

の仕し

上あ

げとして、正せい

解かい

数すう

のスコアを

記き

録ろく

する方ほう

法ほう

について解かい

説せつ

するね。score という変へん

数すう

を

つくって、そこに正せい

解かい

数すう

を保ほ

存ぞん

すればよいのではないか

と思おも

うよね？ 基き

本ほん

的てき

な考かんが

え方かた

はその通とお

りだけれど、この

アプリではぜんぶで４ページの HTML を用よう

意い

して、順じゅん

番ばん

に表ひょう

示じ

していく。たとえば index.html のページで score

という変へん

数すう

を用よう

意い

して、score に数すう

字じ

を代だい

入にゅう

しても、次つぎ

の quiz2.html のページではこの score に代だい

入にゅう

されてい

る値あたい

を参さん

照しょう

する（読よ

み出だ

す）ことはできない22。

　そこで、「セッションストレージ」というしくみを使つか

っ

て正せい

解かい

数すう

のスコアを保ほ

存ぞん

することにするよ。このしくみ

を使つか

うと、開ひら

いたページをまたいで変へん

数すう

を使つか

うことがで

きるぞ。使つか

い方かた

は変へん

数すう

とほとんど同おな

じだけど、少すこ

しだけ

書か

き方かた

が違ちが

うよ。ここではセッションストレージの中なか

に

score という変へん

数すう

をつくって、そこに正せい

解かい

数すう

を保ほ

存ぞん

する

よ23。

　正せい

解かい

の場ば

合あい

は 1 を、不ふ

正せい

解かい

の場ば

合あい

は 0 を保ほ

存ぞん

しておこ

う24。

　さい

初しょ

のページ（index.html）の HTML と JavaScript を26にまとめておくね。

173172 Part 5　スマホアプリをつくろう

追つい

加か

した

JavaScript

追つい

加か

した

HTML

26

Session Storage の項こう

目もく

にある

Local Files を選せん

択たく

25

24

22var score;score = 1;

index.html quiz2.html

代だい

入にゅう

・参さん

照しょう

ができる

代だい

入にゅう

・参さん

照しょう

が

できない

第だい

1 問もん

第だい

2 問もん

画が

像ぞう

画が

像ぞう

画が

像ぞう

score

１

23sessionStorage.score = 1;

index.html quiz2.html

代だい

入にゅう

・参さん

照しょう

ができる

代だい

入にゅう

・参さん

照しょう

が

できる

第だい

1 問もん

第だい

2 問もん

画が

像ぞう

画が

像ぞう

画が

像ぞう

score

１sessionStorage

❼ 問もん

題だい

文ぶん

と画が

像ぞう

表ひょう

示じ

のタグ

　ファイルがアップロードできたら、問もん

題だい

文ぶん

と画が

像ぞう

を表ひょう

示じ

す

るためのタグを quiz2.html に書か

き加くわ

えよう。まずは quiz2.

html をダブルクリックして、エディターを開ひら

き、3 つの img

タグを加くわ

えるよ33。この画が

像ぞう

の表ひょう

示じ

の方ほう

法ほう

は Part 4 で解かい

説せつ

し

た内ない

容よう

だから、大だい

丈じょう

夫ぶ

だね。

　プレビューでは、常つね

に index.html の内ない

容よう

が表ひょう

示じ

されるよ

うになっている。今いま

つくっている quiz2.html の画が

面めん

を確かく

認にん

したい場ば

合あい

は、第だい

1 問もん

に回かい

答とう

をして、次つぎ

の第だい

2 問もん

に進すす

めば

quiz2.html の内ない

容よう

を確かく

認にん

することができるぞ。

　スマホは画が

面めん

が小ちい

さいので、一いち

列れつ

に３つの画が

像ぞう

が表ひょう

示じ

され

るように、画が

像ぞう

の横よこ

幅はば

を 90px（ピクセル）に指し

定てい

したよ。

width の前まえ

に半はん

角かく

でスペースを忘わす

れないように注ちゅう

意い

しよう。

使つか

っているスマホの画が

面めん

が狭せま

い場ば

合あい

は、90px という数すう

値ち

を

変か

える必ひつ

要よう

がある。実じっ

際さい

に Monaca デバッガーで確かく

認にん

してみ

るといいぞ34。　プロジェクトパネルに３つのファイルが追つい

加か

されているか確かく

認にん

しよう31。ファイルを

ダブルクリックすれば、画が

像ぞう

を見み

ることもできるよ32。

　次つぎ

は 2 ページ目め

（quiz2.html）をつ

くっていこう。まずはクイズの画が

像ぞう

を

用よう

意い

しておこう。今こん

回かい

は Scratch に登とう

場じょう

する３つのオリジナルキャラクター

の名な

前まえ

（ギガ、ナノ、ピコ）を当あ

てるク

イズにしたよ。用よう

意い

する画が

像ぞう

のファイ

ル名めい

は半はん

角かく

英えい

数すう

字じ

でつけておこう27。

これらの画が

像ぞう

の保ほ

存ぞん

場ば

所しょ

はデスクトッ

プにしておこう。

　この画が

像ぞう

ファイルを Monaca で使つか

う

には、ファイルをアップロードする必ひつ

要よう

がある。IDE の画が

面めん

の左ひだり

にあるプロ

ジ ェ ク ト パ ネ ル か ら、www と い う

フォルダーのアイコンを右みぎ

クリックし

てメニューを表ひょう

示じ

させ、「ファイルを

アップロード」を選せん

択たく

しよう28。表ひょう

示じ

されたウインドウの真ま

ん中なか

の部ぶ

分ぶん

に、

デスクトップにある画が

像ぞう

ファイルをド

ラッグするか、ファイル選せん

択たく

ボタンを

押お

して画が

像ぞう

ファイルを選せん

択たく

して、３枚まい

ともアップロードしよう29。

　アップロードが終お

わったら、×ボタンでウインドウは閉と

じておこう30。

175174 Part 5　スマホアプリをつくろう

33

34

❻ 画が

像ぞう

の準じゅん

備び

27

28

30

29

31

ダブルクリックすると、

画が

像ぞう

ファイルが確かく

認にん

できる

3 つの画が

像ぞう

ファイルを追つい

加か

追つい

加か

したい画が

像ぞう

ファイルを

ドラッグ & ドロップする

32

　39に第だい

2 問もん

のページ（quiz2.html）の HTML と JavaScript をまとめておくね。プレ

ビューでも動どう

作さ

を確かく

認にん

して、第だい

３問もん

のページに移い

動どう

することをチェックしておこう。

　次つぎ

に画が

像ぞう

をタップしたら実じっ

行こう

する関かん

数すう

を指し

定てい

しよう。ボタンと同おな

じように onclick を

追つい

加か

すれば、画が

像ぞう

をクリックしたときに実じっ

行こう

する関かん

数すう

を指し

定てい

することができるぞ。ピコ

の画が

像ぞう

（pico.png）だけは correct 関かん

数すう

を実じっ

行こう

するようにして、あとの 2 つは incorrect

関かん

数すう

を指し

定てい

すれば

よい38。

1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, 6 <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: 7 <script src="components/loader.js"></script> 8 <link rel="stylesheet" href="components/loader.css"> 9 <link rel="stylesheet" href="css/style.css">10 <script>11 function correct(){12 alert("すごい！正解だよ！ ");13 location.href = "quiz3.html";14 sessionStorage.score++;15 }16 17 function incorrect(){18 alert("残念！はずれ！ ");19 location.href = "quiz3.html";20 }21 </script>22 </head>23 <body>24 <h1>第2問</h1>25 <p>Scratchのキャラクター、ピコは？ </p>26 <img src="giga.png" width="90px" onclick="incorrect();">27 <img src="nano.png" width="90px" onclick="incorrect();">28 <img src="pico.png" width="90px" onclick="correct();">29 </body>30 </html>

　 次つぎ

に 関かん

数すう

を 用よう

意い

し よ う。じ つ は 関かん

数すう

の 中なか

身み

は

index.html でつくった JavaScript と同おな

じだから、

index.html でつくった２つの関かん

数すう

（correct 関かん

数すう

と

incorrect 関かん

数すう

）の文も

字じ

をドラックで選せん

択たく

して、Ctrl

キーと C のキー（Mac の場ば

合あい

は Command キーと

C のキー）を同どう

時じ

に押お

してコピーしよう35。そ

のまま quiz2.html に戻もど

って、11 行ぎょう

目め

にカーソ

ルを合あ

わせて、Ctrl キーと V のキー（Mac の場ば

合あい

は Command キーと V のキー）を同どう

時じ

に押お

し

て貼は

りつけよう36。タブを使つか

って２つのファイ

ルを切き

り替か

えることができるぞ。貼は

りつけたと

きにインデントがずれたら修しゅう

正せい

しておこう。

　correct 関かん

数すう

と incorrect 関かん

数すう

の内ない

容よう

を少すこ

しだけ変へん

更こう

しよう37。修しゅう

正せい

のポイントは２つ

だよ。1 つ目め

は、移い

動どう

するページの名な

前まえ

の変へん

更こう

だ。両りょう

方ほう

とも quiz3.html に移い

動どう

するよう

に変へん

更こう

しておこう。

　2 つ目め

は、スコアの計けい

算さん

。正せい

解かい

の場ば

合あい

は、第だい

1 問もん

で獲かく

得とく

したスコアに、第だい

2 問もん

で獲かく

得とく

した

スコアを足た

す必ひつ

要よう

がある。不ふ

正せい

解かい

の場ば

合あい

は、スコアは 0 から変へん

化か

しないから、incorrect

関かん

数すう

のスコアに関かん

する命めい

令れい

は消け

しておこう。

177176 Part 5　スマホアプリをつくろう

追つい

加か

した

JavaScript

追つい

加か

した

HTML

39

38

❽ 関かん

数すう

をコピーする

❾ 2 ページ目め

の仕し

上あ

げ

36

37

現げん

在ざい

の score に

1 を加くわ

える

Scratch の

ブロックだと…

index.html のタブを選せん

択たく

quiz2.html のタブを選せん

択たく

関かん

数すう

を選せん

択たく

して、

Ctrl キーと C のキーを同どう

時じ

に押お

してコピーする

11 行ぎょう

目め

にカーソルを合あ

わせて、

Ctrl キーと V のキーを同どう

時じ

に押お

して貼は

り付つ

ける

35

179178 Part 5　スマホアプリをつくろう

正せい

解かい

の var を入にゅう

力りょく

不ふ

正せい

解かい

の hen を入にゅう

力りょく43

⓫ 入にゅう

力りょく

の受う

け取と

り

41

40

Scratch の

ブロックだと…

このボタンを追つい

加か

42

　正せい

解かい

の var という文も

字じ

列れつ

を入にゅう

力りょく

すると、正せい

解かい

と表ひょう

示じ

されること。違ちが

う文も

字じ

列れつ

を入にゅう

力りょく

す

ると不ふ

正せい

解かい

となることを確かく

認にん

しておこう43。

　次つぎ

は quiz3 の関かん

数すう

をつくっていこう。プロンプトを表ひょう

示じ

して答こた

えを入にゅう

力りょく

してもらい、

それが正せい

解かい

かどうかを調しら

べる JavaScript を書か

いていくぞ41。プロンプトを表ひょう

示じ

して変へん

数すう

に代だい

入にゅう

するのは、あいさつアプリの応おう

用よう

だ。今こん

回かい

の変へん

数すう

名めい

は answer（答こた

え）にしたよ。

これで入にゅう

力りょく

された内ない

容よう

が answer という変へん

数すう

に代だい

入にゅう

できる。その answer の内ない

容よう

を調しら

べ

て、正せい

解かい

か不ふ

正せい

解かい

かを判はん

断だん

する必ひつ

要よう

があるね。

　JavaScript では if という命めい

令れい

を使つか

って「条じょう

件けん

分ぶん

岐き

」（41 ページ参さん

照しょう

）を書か

くぞ。上うえ

に条じょう

件けん

分ぶん

岐き

の書か

き方かた

をまとめたので参さん

考こう

にしよう。Scratch のブロックと比くら

べてみたのが42

だ。Scratch と違ちが

うのは、入にゅう

力りょく

された答こた

えを保ほ

存ぞん

しておく変へん

数すう

answer を自じ

分ぶん

で用よう

意い

して

いることと、答こた

えを調しら

べるときの記き

号ごう

が == になっていることだね。

➓ 3 ページ目め

の HTML の編へん

集しゅう

　第だい

3 問もん

のページをつくっていこう。まずは HTML か

らだね。問もん

題だい

文ぶん

と、答こた

えを入にゅう

力りょく

するためのボタンを表ひょう

示じ

するようにしたよ40。ボタンを押お

して実じっ

行こう

する関かん

数すう

は quiz3 という名な

前まえ

にしたぞ。

if(条じょう

件けん

){

　　条じょう

件けん

が成せい

立りつ

するの処しょ

理り

}else{

　　条じょう

件けん

が不ふ

成せい

立りつ

のときの処しょ

理り

}

インデント

インデント

条じょう

件けん

分ぶん

岐き

の書か

き方かた

{ と } を対たい

応おう

させ、この間あいだ

に

条じょう

件けん

の成せい

立りつ

・不ふ

成せい

立りつ

のそれぞれの

場ば

合あい

にしたい処しょ

理り

を書か

く

　45に 第だい

３ 問もん

の ペ ー ジ（quiz3.

html）の HTML と JavaScript を

まとめておくね。

　正せい

解かい

の場ば

合あい

も不ふ

正せい

解かい

の場ば

合あい

も、さい

後ご

のページの record.html に移い

動どう

する。また、正せい

解かい

の場ば

合あい

はスコ

アを増ふ

やすという処しょ

理り

を追つい

加か

しよ

う44。

181180 Part 5　スマホアプリをつくろう

⓮ コメント表ひょう

示じ

　次つぎ

はスコアに応おう

じたコメントを表ひょう

示じ

する部ぶ

分ぶん

をつくろう。関かん

数すう

として

つくった処しょ

理り

は、ページが読よ

み込こ

まれたときには実じっ

行こう

されず、関かん

数すう

を呼よ

び出だ

すことが必ひつ

要よう

だったね。script のタグに書か

かれた JavaScript の命めい

令れい

は関かん

数すう

としてつくった以い

外がい

の部ぶ

分ぶん

の命めい

令れい

は、ページが読よ

み込こ

まれたときに実じっ

行こう

される。さい

初しょ

に結けっ

果か

発はっ

表ぴょう

という文も

字じ

を画が

面めん

に表ひょう

示じ

する命めい

令れい

をつけ加くわ

えて、動どう

作さ

を確かく

認にん

してみよう47。追つい

加か

するのは、document.

　いよいよさい

後ご

の結けっ

果か

表ひょう

示じ

（record.html）のページだ。

　まずはもう一いち

度ど

クイズに挑ちょう

戦せん

できるようにするためのボタンを用よう

意い

して、そのボタン

が 押お

さ れ た ら 実じっ

行こう

さ れ る

reset という名な

前まえ

の関かん

数すう

をつ

くろう。reset の関かん

数すう

では、第だい

１問もん

を出しゅつ

題だい

する index.html

に戻もど

るようにして、スコアを

0 に戻もど

しておくよ46。

⓭ 再さい

挑ちょう

戦せん

ボタンの作さく

成せい

⓬ 3 ページ目め

の仕し

上あ

げ

ページが読よ

み込こ

まれたら実じっ

行こう

reset 関かん

数すう

の呼よ

び出だ

しがあるまで実じっ

行こう

されない

48

47

46

write という命めい

令れい

だよ。これは画が

面めん

に指し

定てい

し

た 文も

字じ

列れつ

を 表ひょう

示じ

す る も の だ。こ の 命めい

令れい

は

reset 関かん

数すう

の上うえ

に書か

いてあるぞ。script タグ

の中なか

に書か

かれた命めい

令れい

は基き

本ほん

的てき

には上うえ

から順じゅん

番ばん

に実じっ

行こう

されていくけれど、関かん

数すう

としてつくっ

た部ぶ

分ぶん

は呼よ

び出だ

しがなければ実じっ

行こう

はされない

48。

再さい

挑ちょう

戦せん

のボタン

1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, 6 <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: 7 <script src="components/loader.js"></script> 8 <link rel="stylesheet" href="components/loader.css"> 9 <link rel="stylesheet" href="css/style.css">10 <script>11 function quiz3(){12 var answer = prompt("ヒント：英語で3文字だよ");13 if(answer == "var"){14 alert("すごい！正解だよ！ ");15 location.href = "record.html";16 sessionStorage.score++;17 }else{18 alert("残念！はずれ！ ");19 location.href = "record.html";20 }21 }22 </script>23 </head>24 <body>25 <h1>第3問</h1>26 <p>JavaScriptで変数を作るときに使う命令は？ </p>27 <button onclick="quiz3();">答えを入力</button>28 </body>29 </html>

追つい

加か

した

JavaScript

追つい

加か

した

HTML

45

44

183182 Part 5　スマホアプリをつくろう

⓯ 動どう

作さ

結けっ

果か

をチェック

　これでクイズアプリは完かん

成せい

だ。Monaca デバッガーを使つか

って、全ぜん

問もん

正せい

解かい

の場ば

合あい

51、そ

うでない場ば

合あい

の両りょう

方ほう

の動どう

作さ

確かく

認にん

をしておこう。

51

var を入にゅう

力りょく

　Monaca デバッガーでもアプリの動どう

作さ

を確かく

認にん

すること

ができるけれど、Android のスマホを使つか

っている場ば

合あい

、

ほかのアプリと同おな

じように、クイズアプリとして動どう

作さ

させることができるぞ。必ひつ

要よう

な

ファイルを準じゅん

備び

して、アプリの準じゅん

備び

をすることを「ビルド」というよ。

　まずはビルドのメニューから「Android アプリのビルド」を選せん

択たく

しよう52。

　アプリの設せっ

定てい

の Android の項こう

目もく

を選せん

択たく

して53、アプリケーション名めい

とパッケージ名めい

を

変へん

更こう

しよう。パッケージ名めい

は元もと

から入にゅう

力りょく

されている

「com.example.helloworld」

を少すこ

し変へん

更こう

するだけで大だい

丈じょう

夫ぶ

だよ54。

⓰ アプリのビルドの準じゅん

備び

52

53 クイズアプリと入にゅう

力りょく

com.example.quiz と入にゅう

力りょく

54　ではスコアとそれに応

おう

じたコメントを表ひょう

示じ

する部ぶ

分ぶん

をつけ加くわ

えよう。今こん

回かい

はシンプル

に 3 問もん

正せい

解かい

だった場ば

合あい

とそれ以い

外がい

の場ば

合あい

に分わ

けてみたよ50。record.html については、

HTML と JavaScript のまとめはないけれど、50をよく見み

て確かく

認にん

しよう。クイズアプリで

つくる HTML と JavaScript は、8 ページで紹しょう

介かい

しているサポートページからダウンロー

ドもできるよ。うまく動どう

作さ

しないときはサポートページを見み

てね。

　script タグの後あと

の HTML も上うえ

から順じゅん

番ばん

に表ひょう

示じ

されていくから、今こん

回かい

は結けっ

果か

発はっ

表ぴょう

という

文も

字じ

は JavaScript で表ひょう

示じ

させて、ボタンは HTML で表ひょう

示じ

させているということになる

ね49。

　なぜこんなことをしているかというと、結けっ

果か

発はっ

表ぴょう

という表ひょう

示じ

は毎まい

回かい

共きょう

通つう

だけれど、ス

コアは sessionStorage.score に保ほ

存ぞん

してあり、コメントはその値あたい

によって変へん

化か

をさせ

る必ひつ

要よう

があるからだ。HTML にスコアに関かん

するコメントを書か

いてしまっては、毎まい

回かい

同おな

じ

表ひょう

示じ

になってしまう。だから JavaScript からコメントを表ひょう

示じ

させる必ひつ

要よう

があるんだね。

JavaScript で表ひょう

示じ

した文も

字じ49

50

HTML で

表ひょう

示じ

したボタン

185184 Part 5　スマホアプリをつくろう

　ほかのアプリと同おな

じようにクイズアプリが使つか

えるようになるぞ63。なお、今いま

使つか

ってい

る無む

料りょう

のプランだと、1 日にち

に 3 回かい

までしかビルドができないから注ちゅう

意い

しよう。

　iPhone などの iOS が動どう

作さ

しているスマートフォンについては、ビルドにアップル社しゃ

から発はっ

行こう

してもらう証しょう

明めい

書しょ

が必ひつ

要よう

なので、少すこ

し準じゅん

備び

が大たい

変へん

だよ。詳くわ

しい方ほう

法ほう

については

以い

下か

の Monaca のマニュアルを見み

てみよう。

スマホアプリをつくるのはどうだったかな？

シンプルなクイズアプリをつくってみたけれど、

いろいろ改かい

造ぞう

して、オリジナルの

クイズアプリにしてみよう！

63

60

61 62

クイズアプリが

一いち

覧らん

に表ひょう

示じ

される

　QR コードを読よ

み取と

れば、アプリのファイルがダウンロードできるよ※。ダウンロード

したファイルを選せん

択たく

して60、インストールをタップしよう61。ダウンロードの際さい

に、

Monaca のサイトにサインインす

るように指し

示じ

された場ば

合あい

は、メー

ルアドレスとパスワードを入にゅう

力りょく

し

よう。「アプリをインストールし

ました。」の表ひょう

示じ

がでれば、アプリ

のインストールは完かん

了りょう

だね62。

⓱ アイコンの設せっ

定てい

55

56

デバッグビルドを選せん

択たく

QR コードを

スマートフォンで読よ

み取と

る

57

58

59

　次つぎ

にアプリのアイコンを設せっ

定てい

しよう。アイコン

にしたい画が

像ぞう

を png 形けい

式しき

で用よう

意い

しよう。ある程てい

度ど

の大おお

きさの画が

像ぞう

を用よう

意い

して、一いっ

括かつ

で設せっ

定てい

するの下した

にある「アップロード」を選せん

択たく

し55、アイコンと

して設せっ

定てい

したい画が

像ぞう

ファイルを選せん

択たく

しよう。

　クイズアプリなので、はてなマークの画が

像ぞう

を

アップしているよ。アイコンの設せっ

定てい

が終お

わったら

「保ほ

存ぞん

する」をクリックしよう56。

⓲ ビルドの開かい

始し

とインストール

　画が

面めん

の左ひだり

から、ビルド / ビル

ド 設せっ

定てい

の Android を 選せん

択たく

し よ

う。デバッグビルドを選せん

択たく

して

57、「ビルドを開かい

始し

する」のボタ

ンを押お

すよ58。新あたら

しい画が

面めん

が開ひら

いて処しょ

理り

がはじまるので、しば

らく待ま

とう。

　ビルドがうまくいくと、QR

コードなどが表ひょう

示じ

されたページ

に切き

り替か

わるぞ。一いち

番ばん

手て

軽がる

なの

は、画が

面めん

に表ひょう

示じ

された QR コー

ドをスマホで読よ

み取と

ってアプリ

をインストールする方ほう

法ほう

だ59。

https://docs.monaca.io/ja/monaca_ide/manual/build/ios/build_ios/

※ アプリがインストールできない場ば

合あい

は、「設せっ

定てい

」のメニューから「ユーザ設せっ

定てい

」の「セキュリティ」を選せん

択たく

し、「提てい

供きょう

元もと

不ふ

明めい

のアプリ」を一いち

時じ

的てき

に許きょ

可か

しよう。インストールが完かん

了りょう

したら「提てい

供きょう

元もと

不ふ

明めい

のアプリ」の設せっ

定てい

は元もと

に戻もど

すようにすること。