てけとーぶろぐ。

ソフトウェアの開発と、お絵かきと、雑記と。

AndroidでWebサイトを作る(4)

Android Termux
JSファイルの作成

続けてJSファイルにプログラムを書いてみましょう。JSファイルはJavaScriptというプログラミング言語で記述します。「script.js」を以下の内容にします。

alert('Hello, JS!');

「alert()」は指定された内容を持つダイアログを表示する命令です。

JavaScriptの動作を確認

Webサーバーを起動してWebブラウザーでWebサイトにアクセスして動作を確認してみてください。アクセスするとすぐにダイアログが表示されます。

関数の定義

次に関数を定義してみます。関数とは処理のまとまりに名前をつけたものと考えてください。

function 関数名() { 処理 }

という書式で関数を定義します。例えば「script.js」を以下の内容にしてみましょう。

function myFunction() {
  alert('Hello, Function!');
}

「myFunction」という名前の関数を定義し、その処理内容として「aler()」で「Hello, Function!」と表示するようにしています。

これを実行すると、つまりWebブラウザーでWebサイトにアクセスするとどうなるでしょうか？予想した上で、実際に試してみてください。

試してみると分かるかと思いますが、何も起きずダイアログが表示されることもありません。というのも「function myFunction() { … }」という記述は関数の定義にすぎないからです。「処理」の部分に書かれた一連の処理に「myFunction」という名前をつけただけなのです。

ではこの「処理」の部分に書かれた一連の処理は一体いつ実行されるのかと言いますと、関数が呼び出された時に実行されます。

実際にやってみましょう。先程の「script.js」の末尾に関数の呼び出しを書き加えます。「script.js」全体は以下のようになります。

function myFunction() {
  alert('Hello, Function!');
}

myFunction();

「myFunction();」の部分が関数の呼び出しです。「function myFunction() { … }」で定義された関数「myFunction()」が「myFunction();」の行で実行され、それによってその処理内容である「alert('Hello, Function!');」が実行されます。

動作を確認してみましょう。

ここで、定義した関数の呼び出しと「alert()」の呼び出しで書式が似ていることに気づいたかと思います。「alert()」ははじめから用意されている命令です。一方で自分でも命令と似た関数を作れるわけです。そしてあらかじめ用意されている命令や、自分で作った関数を呼び出すような処理内容の新しい関数を作ることもできます。

イベントハンドラー

関数「myFunction()」を定義し、その呼び出しを行いました。呼び出しは「script.js」から行いました。 さてこのように「script.js」に「function 関数名() { … }」で囲むことなく直接書いた処理は、「script.js」の内容が実行されるWebサイトの読み込み時に一度実行されるだけです。 しかし、ユーザーが何らかの操作を行ったらその操作に対応した処理を行う、といった仕組みがあった方が分かりやすくプログラムを書けそうではないでしょうか？アプリ的な機能を持つWebアプリでは特にそうです。 その仕組みにあたるのがイベントハンドラーという仕組みです。

ユーザーからの操作などの出来事をイベントと呼び、そのイベントを処理するものということでイベントハンドラーという名前がついています。具体的にどんなものであるかは実際に使ってみたほうが分かりやすいかと思います。試しにイベントハンドラーを使ってユーザーがWebサイトの画面をタップしたら「alert()」で「Touched!」と表示するようにしてみましょう。

まず画面がタップされた時に実行したい処理を持った関数を定義します。関数名は何でもいいですがタップのイベントで呼び出される関数なので「handleTouch()」としましょう。実行したい処理も書けるかと思います。ということで「script.js」は以下の内容になります。

function handleTouch() {
  alert('Touched!');
}

以下のURLからコピーできます。

https://github.com/kurima-yoshida/web-dev-on-android/blob/main/js-sample/script.js

あとはこの「handleTouch()」がタップされた時に呼び出されるようにすればいいわけです。これにはHTMLファイル「index.html」を編集することになります。「index.html」の「<html lang="ja">」を「<html lang="ja" ontouchStart="handleTouch()">」としましょう。「index.html」全体としては以下のようになります。

<!DOCTYPE html>
<html lang="ja" ontouchstart="handleTouch()">

<head>
  <meta charset="utf-8">
  <meta name="viewport"
    content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <title>title</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  Hello!
</body>

</html>

以下のURLからコピーできます。

https://github.com/kurima-yoshida/web-dev-on-android/blob/main/js-sample/index.html

この記述の意味としては「touchstart」イベントが起きたら「handleTouch()」を実行する、つまり「handleTouch()」を呼び出す、です。そしてこの「ontouchstart」がイベントハンドラーです。

「touchstart」イベントはユーザーに対象の要素がタップされたら、正確には画面に指が触れたら起きるイベントです。イベントには様々な種類があり、例えば、画面から指が離れたら起きる「touchend」イベント、画面上で指が動かされたら起きる「touchmove」イベントなどもあります。そしてこれらのイベントにはそれぞれ対応するイベントハンドラーがあります。

「script.js」「index.html」を編集できたら動作を確認してみましょう。画面のタップでダイアログが表示されたでしょうか？

画面の更新

もう少しだけ手を入れてみましょう。現状Webサイトの画面には「Hello!」と表示しています。これを、ユーザーに画面をタップされたら「Hello!」の代わりに「1」だとか「2」だとかユーザーが画面をタップした回数を表示するようにしてみましょう。

まず「index.html」の「<body>」を「<body id="score-value">」としましょう。「index.html」全体としては以下のようになります。

<!DOCTYPE html>
<html lang="ja" ontouchstart="handleTouch()">

<head>
  <meta charset="utf-8">
  <meta name="viewport"
    content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <title>title</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body id="score-value">
  Hello!
</body>

</html>

以下のURLからコピーできます。

https://github.com/kurima-yoshida/web-dev-on-android/blob/main/js-sample/index.html

これは「<body>」と「</body>」で囲われた「<body>」要素の中の「Hello!」をプログラムで書き換える際に、この「<body>」要素を参照しやすいように「<body>」要素に「score-value」というIDを振っています。

次に「script.js」を以下の内容にします。

var touchNumber = 0;

function handleTouch() {
  touchNumber = touchNumber + 1;
  document.getElementById('score-value').innerText = touchNumber;
}

以下のURLからコピーできます。

https://github.com/kurima-yoshida/web-dev-on-android/blob/main/js-sample-2/script.js

内容について簡単に説明します。「var touchNumber = 0;」では「touchNumber」という名前のタップされた回数を保存するための変数(入れ物)を用意しています。

画面タップで呼び出される「handleTouch()」の中で「touchNumber = touchNumber + 1;」としてタップされた回数を1増やしています。そして「document.getElementById('score-value').innerText = touchNumber;」でタップされた回数を表示します。「document.getElementById('score-value')」の部分でHTMLの中の「score-value」というIDを持った要素を取得しています。この要素はつまり先程「index.html」で「score-value」というIDを振った「」要素ですね。「.innerText」は要素の中のテキストを意味し、ここでは「<body>」要素の中のテキストになります。このテキストは「index.html」で「Hello!」と指定されているので何もしなければ「Hello!」です。それを「touchNumber」の内容であるタップされた回数に書き換えています。

つまりユーザーが画面をタップするたびに、タップされた回数である「touchNumber」が1増え、「<body>」要素の中のテキストが「touchNumber」の内容で書き換えられ、結果としてタップされた回数が画面に表示されます。

「script.js」「index.html」を編集できたら動作を確認してみましょう。画面をタップしたらタップした回数が表示されたでしょうか？タップするたびに表示されている回数が増えたでしょうか？

イベントハンドラーによってユーザーから操作を受け付け、何らかの処理を行い、画面の要素を変更して表示を更新する…みなさんが普段使われているWebアプリもこのようにして動いています。

さて、ほんの少しだけゲームっぽくなりました。Webサイト/Webアプリ作成を公開まで含めて一通りを示すのが目的なので、Webサイトの作り込みは一旦この辺にして出来上がったWebサイトを世界に公開してみましょう。