『子供と1分間プログラミング』ーインターネットの仕組みを子供と一緒に勉強：ウェブサイトってどうやって動いているのか教えてあげる！

2020年8月22日 13:23

今回はインターネットの基本について子供に教えてあげます。

携帯やタブレットなどで普段何気なく見ているウェブページですが、どういう仕組みや決まりで動いているのか知らないお子さんがほとんどでしょう。そこで今回は、ウェッブページがどうやって動いているか、どうして誰かがデザインしたサイトが自分のPCや携帯で見ることができるのか、インターネットの基本に関する所を実際のサイトを作って説明していきます。

『今すぐ書ける 1分間プログラミング』ではC#を使っているので、WebアプリといえばASP.Netを使うのですが、今回のプロジェクトでやるデモはセキュリティなどの制約から煩雑な事前環境設定が必要となるので、ここではJavaScriptを使います。

今回の作業の流れはこんな感じです。

❶ 子供に見せる簡単なサイトをHTMLとJavaScriptで作る。
▶ クリックすると「〇〇ちゃん、こんにちは」と話しかける。
▶ 「話す」ボタンを押すと入力した文字をしゃべる。
❷ 自分のマシンで動いている（ホストされている）そのページを子供のマシンや携帯で見てもらう。
❸ ウェブページを”ホスト”するということがどういうことか説明。
❹ IPアドレスについて説明する。
❺ HTMLというコードでウェブサイトが作られることを見せる。

ウェブサイトを動く仕組みというのはよく知らない方も多いと思いますので、これを機会にご自分でも実体験してみてください。ネットワークの基礎を知るうえでとても重要な知識ですので必ずどこかで役に立つはずです。

今回の開発環境はVisual Studio Code

これまでは通常のVisual Studio 2019 を使ってきましたが、今回はウェブページを簡単に自分のマシンでホストするためにVisual Studio Codeという開発エディタを使います。とても柔軟性が高く、様々な環境（Mac、Linux、Windows)や言語に対応しているツールで、HTMLやJavaScriptを書くにもとても便利なので、まだ使ったことがない方は是非やってみてください。

ステップ１：Visual Studio Codeのインストールと設定

まずは開発ツールのインストールです。Mac版もWindows版もありますので、環境は問いません。Visual Studio Codeのインストール方法はこのnoteで詳しく説明していますので、そちらをご覧ください。ここではステップ１とステップ２の日本語をインストールするところまでやってください。C＃環境のインストールは不要です。

ステップ２：Preview on Web Serverをインストール

ここではもう一つ、拡張機能でPerview on Web Serverというのをインストールします。これで自分が書いたHTMLコードを自分のマシンでホストします。今回のプロジェクトでキモとなる部分ですので必ず用意してください。

ではステップ２で日本語追加機能を検索した時の要領で、今度はPreview on Web Serverを検索してみてください。日本語の時と同様、インストールボタンを押すだけです（注：下のスクリーンではすでにインストール済みになっています）

インストールが終わればコーディング準備完了です。ではさっそくウェブサイト作りを始めましょう。

ステップ３：シンプルなサイトをHTMLで作る

まずはベースとなるサイトを作ります。ここではビデオが背景に流れる簡単なサイトを作ってみます。

❶ プロジェクトフォルダを作る

まずどこでもよいのでプロジェクトファイルを入れるフォルダを作ってください。例えばデスクトップにWebSiteというフォルダを作ったとします。次はVS Codeの「ファイル」メニューから「フォルダを開く」を選び、作ったWebSiteフォルダを選択してください。

これでVSCodeで作ったファイル類はすべてこのフォルダに作成・保存されます。

❷ index.htmlとstyle.cssファイルを作る

ではウェブページとなるHTMLファイルを作ります。VSCodeの左上にファイルが二枚重なったファイルエクスプローラーのアイコンがあります。そこをクリックします。次に＋印がついたアイコンをクリックすると新しいファイルがエクスプローラー内できます。すぐにindex.htmlという名前を付けてください。

さらにもう一つ、style.cssというファイルも追加してください。最終的インこうなります。

❸ HTMLとCSSコードを入れる

ではindex.htmlをクリックして、右側のコーディングスペースに次のコードをコピペしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="style.css">
   <title>おしゃべりウェブサイト</title>
</head>
<body>
   <section class="wholesecion">=
       <div class="video-container">
           <video src="https://traversymedia.com/downloads/video.mov" autoplay muted loop></video>
       </div>
       <div class="content">
           <!-- 適当なテキストに変更してください-->
           <h1 onclick="Speak('みきちゃん、こんにちは');">みきちゃん、こんにちは！</h1>
           <input type='text' name='textbox' size='30' placeholder="話したいことを入れてください"></input>
           <br/> <br/>
           <button class="rounded-corner" onclick="Speak(document.getElementsByName('textbox')[0].value);">話す</button>
           <div id="output"></div>
       </div>
   </section>

   <script>
       var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition

       //音声合成でしゃべるメソッド
       function Speak (text) {
           let uttearnce = new SpeechSynthesisUtterance();
           uttearnce.text = text;
           uttearnce.volume = 1;
           uttearnce.rate = 1;
           uttearnce.pitch = 1;
           uttearnce.lang = 'ja-JP'
           window.speechSynthesis.speak(uttearnce);
       }
   </script>
</body>
</html>

コードを貼り付けたら、まずはCntl+S（もしくは「ファイル」メニューから「保存」を選択します）で中身を保存してください。VSCおでではコードを変更するたびに必ず自分で保存するようにしてください。

次にstyle.cssの中身はこれです。同様にコピペしてください。

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap');

:root {
	--primary-color: #3a4052 ;
}

* {
	box-sizing: border-box;
	margin: 0;
   padding: 0;
}

body {
	font-family: 'Open Sans', sans-serif;
   line-height: 1.5;
}

a {
	text-decoration: none;
	color: var(--primary-color);
}

h1 {
	font-weight: 300;
	font-size: 40px;
	line-height: 1.2;
	margin-bottom: 15px;
}

h2 {
	font-weight: 300;
	font-size: 24px;
	line-height: 1.2;
}

.wholesecion {
	height: 100vh;
	display: flex;
   justify-content: center;
	text-align: center;
   align-items: center;
	color: rgb(200, 226, 151);
	padding: 0 20px;
}

.video-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.rounded-corner {
	background-color: #0a458a ;
	width: 200px;
	height: 100px;
	color: #FFFFFF ;
	font-size: 24px;
	outline:none;
 }

.video-container video {
	min-width: 100%;
	min-height: 100%;
 position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	object-fit: cover;
}

.header {
   z-index: 2;
   align-items: center;
}

.content {
   z-index: 2;
   align-items: center;
}

.output {
   z-index: 2;
   align-items: center;
}

.btn {
	display: inline-block;
	padding: 10px 30px;
	background: var(--primary-color);
	color: #fff ;
	border-radius: 5px;
	border: solid #fff  1px;
	margin-top: 25px;
	opacity: 0.7;
}

.btn:hover {
	transform: scale(0.98);
}

ここでもまたCntl+Sで中身を保存します。

❹ ウェブサイトを立ち上げる

ウェブファイルが完成したらまずはブラウザで表示させてみましょう。やり方は簡単で、index.htmlをクリックして開いた状態にし（注：style.cssを開いた状態ではありません）、Cntl+Shift＋Lを押します（CntlキーとShifキーを同時に押しながらLキーを押してください）。

これでindex.htmlがお使いのブラウザーの中で自動的に開かれます。こんなページが出てくるはずです。

「おしゃべりウェブサイト」の解説

さて、このサイトの説明をします。今回はHTMLやJavaScriptの勉強が目的ではないのでコードの解説は省きます。ただ、サイトがどう動くかだけはきtちんと理解しておいたほうがよいでしょう。

まずこのサイトは背景がビデオになっています。このため画面を眺めているだけで臨場感があると思います。子供が飽きないようにするちょっとした工夫です。

そしてタイトルに「みきちゃん、こんにちは」とあります。これは皆さんが”自作した感”を出すためです。もちろんここにはお子さんの名前を入れてください。やり方はHTMLファイルの中で「みきちゃん、こんにちは」と書いてある二か所を次の文字列を変更するだけです。

 <!-- 適当なテキストに変更してください-->
 <h1 onclick="Speak('みきちゃん、こんにちは');">みきちゃん、こんにちは！</h1>

変更したら必ずCntl＋Sで保存してください。するとブラウザの中身も自動的に変更されます。ブラウザの中で自分が変更したタイトルになっているかどうか確認してください。

次に、「みきちゃん、こんにちは」とあるテキストをブラウザ内でクリックしてみてください。するとコンピューターが「みきちゃん、こんにちは」と話すはずです。もし音声が聞こえない場合はボリュームが上がっているか確認してください。ブラウザはChrome、Safari、Edgeのいずれでも構いません。

もう一つ、テキストボックスに何か入力し、「話す」ボタンをクリックするとタイプ入力したことをそのまま話ます。これも確認してください。

要は、タイトルにあるテキストをクリックで話すというのと、テキストボックスの中身を話すという２つの機能がある点をおさえてください。

デモ❶：まずはウェブサイトを見せてあげます

VSCodeのインストールから始めた方はとても時間がかかったかもしれませんが、これでデモの準備は完了です！ 早速子供を呼んでデモを始めましょう。

今回はお父さんが、娘さんの「みきちゃん」に教えてあげるという設定で会話を進めていきます。今回もインターネットの仕組みというちょっと難しい話なので小学校の高学年以上が対象でしょうか。でもどんな年齢でも丁寧に説明すると分かってくれるはずです。

では始めます！

お父さん：ねえ、みきちゃん。ちょっとこれみて。お父さんが作ったウェブサイトなんだよ。
みきちゃん：へぇー。「みきちゃん」って書いてあるよ。
お父さん：じゃあさ、この「みきちゃん」のところをクリックしてみて。
みきちゃん：（クリックする）
パソコン：「みきちゃん、こんにちは」
みきちゃん：あっ、しゃべった。
お父さん：もう一回やってみて。
みきちゃん：（クリック）へー、しゃべるんだ。
お父さん：じゃあ、ここにさ、「おはよう」って入力するよ。そして「話す」ボタンをクリックすると…。
パソコン：「おはよう」
みきちゃん：うぁー、書いたことをしゃべるんだ。じゃあ、「おなかがすいたよ」って入れてみて…。

こんな感じで、このサイトがどんなことをするか説明してあげてください。サイトでちょっと楽しめれば十分です。今回の目的はこのサイトそのものではありません。あくまでウェブページがどう動いているかを理解するのがメインです。

ミキちゃんのパソコンでも見ることができるよ

皆さんがPreview on Web ServerでHTMLページを開くと、それは単にブラウザを立ち上げただけではありません。皆さんのマシンにウェブサーバーが実際に立ち上がっているのです。

まず、開いたサイトのアドレスに注目してください。

http://localhost:8080/index.html

このlocalhostというのはこのウェブサイトの「アドレス」です。つまり皆さんが最初に作ったフォルダ、WebSiteという「場所（サイト）」を特定するものです。ちなみにこのlocalhostには127.0.01という番号の「IPアドレス」が割り付けられています。ためにしに次のようにアドレスを変更してEnterキーを押してみてください。

http://127.0.0.1:8080/index.html

まったく同じサイトが開かれたと思います。ここは単純にこう考えてください。ウェブサイトには番号で指定するIP アドレスと、文字で指定するアドレスの両方があるということです。

もう少し具体的に理解してみます。例としてAsahiのニュースサイト、www.asahi.comを例に考えてみます。このwww.asahi.comという文字列のアドレスにも、番号のIPアドレスというものがあります。これを調べるためにプロンプト画面を開けてみてください（検索ボックスに「コマンドプロンプト」と入れると出てきます）。

そこにping www.asahi.comと入力してEnerキーを押してください。

注：MacOSではターミナルからping -c 4 www.asahi.comとしてください。

Microsoft Windows [Version 10.0.18363.959]
(c) 2019 Microsoft Corporation. All rights reserved.
C:\Users>ping www.asahi.com
Pinging e10474.b.akamaiedge.net [23.193.148.220] with 32 bytes of data:
Reply from 23.193.148.220: bytes=32 time=21ms TTL=56
Reply from 23.193.148.220: bytes=32 time=18ms TTL=56
Reply from 23.193.148.220: bytes=32 time=16ms TTL=56
Reply from 23.193.148.220: bytes=32 time=14ms TTL=56
Ping statistics for 23.193.148.220:
   Packets: Sent = 4, Received = 4, Lost = 0 (0% loss),
Approximate round trip times in milli-seconds:
   Minimum = 14ms, Maximum = 21ms, Average = 17ms
C:\Users>

これは朝日のサイトにpingというコマンドでちょっとしたデータを送ってみたわけです（ハッキングとかではありませんのでご安心を）。pingはドアをノックして「誰かいますか」と尋ねているようなもので、サーバーが存在すると返事が返ってきます。

Reply from 23.193.148.220: bytes=32 time=21ms TTL=56

この23.193.148.220が実はwww.asahi.comのIPアドレスなのです。

つまり、

皆さんのWebSite：
IPアドレス：127.0.0.1
文字アドレス：localhost

Asahi.comのサイト
IPアドレス：23.193.148.220
文字アドレス：www.asahi.com

このAsahiのIPアドレスは全世界で唯一存在する数字で、世界のどこからでもこの番号でアクセスできます。電話番号みたいなものです。ただ、この数字を打ち込むのは面倒なのでwww.asahi.comという文字、つまりURLが割り当てられ、これも世界で唯一存在するものです。ウェブサイトがどこにいてもアクセスできるのはインターネットにこうしたIPアドレスと文字の対応がしっかりと登録されているためです。

では皆さんのサイト、127.0.01というのはどうなんでしょう。これはもちろん世界で唯一存在する番号ではありません。これは、自分でWebサーバーを立ち上げたときに、「自分のアドレス」を示す既定の番号です。127.0.0.1とlocalhostという文字列は誰がサーバーを立ち上げても同じ番号で認識できます。ですので、これは皆さんのマシンの中だけで通用するIPアドレスです。

でも今回は、皆さんのお子さんが使うPCや携帯でこのウェブページを開いてもらいます。そのためにはお子さんのマシンでからもアクセスできるIPアドレスが必要となります。実はそのようなIPアドレスは、ご家庭でWiFiを設定していれば自動的に作ってくれています。

そこでまたコマンドプロンプトに戻って、今度はこのコマンドを入れてください。

ipconfig

注：MacOSではターミナルからifconfig en0と入力します。こちらを参考にしてみてください。

私のマシンではこんな結果になります。

Microsoft Windows [Version 10.0.18363.959]
(c) 2019 Microsoft Corporation. All rights reserved.

C:\Users>ipconfig

Windows IP Configuration


Wireless LAN adapter Local Area Connection* 3:

  Media State . . . . . . . . . . . : Media disconnected
  Connection-specific DNS Suffix  . :

Wireless LAN adapter Local Area Connection* 4:

  Media State . . . . . . . . . . . : Media disconnected
  Connection-specific DNS Suffix  . :

Wireless LAN adapter Wi-Fi:

  Connection-specific DNS Suffix  . :
  Link-local IPv6 Address . . . . . : fe80::
  IPv4 Address. . . . . . . . . . . : 192.168.196.211
  Subnet Mask . . . . . . . . . . . : 255.255.255.0
  Default Gateway . . . . . . . . . : 192.168.196.1

Ethernet adapter Bluetooth Network Connection:

  Media State . . . . . . . . . . . : Media disconnected
  Connection-specific DNS Suffix  . :

C:\Users>

ここで注目してほしいのはIPアドレスの部分です。

IPv4 Address. . . . . . . . . . . : 192.168.196.211

実はこのIPアドレスが皆さんのマシンのアドレスなのです。携帯からでもWiFiに接続すればそれも固有のアドレスが割り振られます。お子さんのPCも、WiFiにつなげればIPアドレスが付与されます。家庭内WiFiのすべての接続機器に必ず固有のIPアドレスが割り当てられます。それをPCの場合はipconfigというコマンドで確認することができるのです。

家庭内でWiFiにつながっている機器は携帯でもPCでもすべてこのIPアドレスがあるということは、例えばある携帯から、あるPCでホストしているウェブサイトにアクセスすることも可能ということです。次はこのステップをやってみます。

子供のマシンからWebページを開いてみる

自分のマシンは、自分からはlocalhost (127.0.01)でアクセスすることができますが、他のマシンから接続するにはipconfigを使って調べたIPアドレス、192.169.196.211（繰り返しますが、これは私の家庭内ネットで割り当てられたIPなので皆さんは別のアドレスがあります）を使ってアクセスすることができます。ただ、数字を入れるのは面倒なので、asahi.comのように文字のアドレスも調べてみます。今度は、ipconfig /all というコマンドを入れてみてください。我が家ではこんな結果になっています。

Microsoft Windows [Version 10.0.18363.1016]
(c) 2019 Microsoft Corporation. All rights reserved.

C:\Users>ipconfig /all

Windows IP Configuration

  Host Name . . . . . . . . . . . . : LG-GRAM17
  Primary Dns Suffix  . . . . . . . :
  Node Type . . . . . . . . . . . . : Hybrid
  IP Routing Enabled. . . . . . . . : No
  WINS Proxy Enabled. . . . . . . . : No

Wireless LAN adapter Local Area Connection* 3:

  Media State . . . . . . . . . . . : Media disconnected
  Connection-specific DNS Suffix  . :
  Description . . . . . . . . . . . : Microsoft Wi-Fi Direct Virtual Adapter #3 
  Physical Address. . . . . . . . . : 
  DHCP Enabled. . . . . . . . . . . : Yes
  Autoconfiguration Enabled . . . . : Yes

Wireless LAN adapter Local Area Connection* 4:

＝＝＝ 途中は省略 ＝＝＝

  DHCP Enabled. . . . . . . . . . . : Yes
  Autoconfiguration Enabled . . . . : Yes

C:\Users\tomak>

ここに出てくる次の行に注目してください。

Host Name . . . . . . . . . . . . : LG-GRAM17

このホスト名、"LG-GRAM17"というのは私のマシン名です。つまりマシン名がホスト名ということです。つまりこういうことです。

皆さんのWebSite：
IPアドレス：192.168.195.211
文字アドレス：LG-GRAM17

何を言っているかというと、Preview on Web Serverを立ち上げて開いたウェブサイトは、最初はlocalhost:8080で開かれていましたが、実はこれはlg-gram:8080でも開くことができます。

では、VSCodeからサイトを立ち上げた状態にし、別のPCあるいは携帯やタブレットなど、家庭内WiFiにつながっている機器でブラウザを立ち上げてみてください。例えば携帯のChromeブラウザを開いて皆さんのホスト名でサイトを開いてみてください。

lg-gram17:8080

httpのとこと、index.htmlは省略してかまいません。LG-GRAM17というホスト名の小文字、大文字は問いません。すると私の携帯ではこんな感じでページが表示されます。

この段階で何が起きているか理解できますか？まずVSCodeで作ったWebサイトは、Preview on Web Siteという簡易ウェブサーバーでホストされています。これはwww.asahi.comの最初のホームページがとあるウェブサーバーで管理されているのとまったく同じです。皆さんはWebサイトをホストしているんだということをまずはしっかりと理解してください。

そこでそのウェブサイトに別のマシンからアクセスするのですが、その際に入れるページのURLは、家庭内ではマシン名がホスト名になっていたので、それを利用して、私の場合はlg-gram17を使います。

注：ホスト名の後の8080というのポート番号というもので、ここでは説明は省きますが、ネットワークでマシンに接続する際に特定の番号を指定しないといけないという決まりがあります。Webサイトにはこの8080という番号がよく使われます。ここはあまり気にせず、必ずこの番号をコロンに続けて入れてください。

まだピンとこないかたは、他の機器、例えばタブレットがあれがその中のブラウザを開いて同じようにアドレスを入れてみてください。ご家族のだれかの携帯があればそれを使っても構いません。とにかくどのマシンからもこのlg-gram17:8080を使って、自分で作ったウェブサイトを開くことができるのです。普段は何気なく入力している「ホームページのアドレス」というのはこのようにIPアドレスという番号の決まりに基づいて特定のサイトにアクセス仕組みがあるから利用できるものなのです。それを自分の家庭内のWiFiネットワーク内でシミュレーションしているのがこの作業です。

デモ❷：みきちゃんのパソコンから開いてみる

お父さん：じゃあさ、このウェブページ、みきちゃんのパソコンから見てみようか。
みきちゃん：えっ、そんなことできるの？
お父さん：パソコンでブラウザを開いてみて。アドレスのところにこれを入れてみて。LG-GRAM17:8080。
みきちゃん：入れたよ。エンター押すの？
お父さん：そう。
みきちゃん：ほんとうだ、同じのが出てきた。
お父さん：ママの携帯からでも見られつよ。
みきちゃん：ママ、携帯見せて！（ママの携帯のブラウザでも開いてみる）
みきちゃん：携帯でも見られるよ！

ここではまず、できるだけ多くのマシンや携帯、タブレットを動員してウェブサイトを開いてみてください。皆さんがPC上でウェブサイトをホストすると、一つのアドレスを通してどこからも（家庭内のみですが）アクセスできるということを体感してもらいたいのです。

一つ注意するのは、家庭内のWiFiネットに複数のアクセスポイントがあると、それをまたがって接続はできません。例えば私のWiFiルーターにはHome 2.4というのとHome 5.0という２種類が存在します。その場合は必ず１つのアクセスポイントを使ってください。

HTMLの内容を変更してみる

ウェブページへの接続のイメージがつかめたら、今度はウェブページの中身がどんな感じで作られているか教えてあげます。簡単なのは現在のHTMLをちょっと変更してみることです。

例えば、「みきちゃんこんにちは」のテキストを変更するのが一番簡単でしょう。

  <!-- 適当なテキストに変更してください-->
  <h1 onclick="Speak('ごはんはできましたか');">ごはんはできましたか？</h1>

こうすると「ごはんはできましたか？」というテキストに変わり、そこをクリックするとテキストを読むようになります。

デモ❸：サイトのHTMLを変更してみる

お父さん：じゃあね、ウェブページをちょっと変えてみようか。これ見て（VSCodeのHTMLを見せてあげる）。
みきちゃん：なんだか難しいコードがいっぱい。
お父さん：でもここみて。「みきちゃん、こんにちは」って書いてあるでしょ。これを「ごはんはできましたか」に変えてみるよ。
みきちゃん：なんで？
お父さん：まあ見てて。こっちのテキストも変えるよ。
みきちゃん：そうだね。
お父さん：じゃあ変更したのを保存するね（Cntl+Sを忘れずに）。じゃあさ、みきちゃんのマシンを見てみて。
みきちゃん：あっ、こっちも変わってるよ。すごい！
お父さん：そうなんだよ。お父さんのマシンでこのウェブサイトは動いているので、お父さんが中身を変えると、そこにつながっているみきちゃんのページも変わるということなんだよ。

Preview on Web Serverでは、VSCodeでHTMLの内容を変更して保存すると、そこに接続してみているすべてのページも自動的に変更されます。このシンクロ感を見せると、お父さんのマシンで起きていることが中心となっているということが理解できるでしょう。

ここで注意点をもう一つ。皆さんのPCでのサイトを閉じるとWeb Serverも終了します。これによって接続している各マシンのサイトも動かなくなるのが普通なのですが、JavaScriptのサイトはブラウザにすべてキャッシュ（一時保存）されるので、実は動き続けます。サーバーが終了すると動かなくなることをデモしたい場合は一度も開いたことがないマシンを使うか、ブラウザの設定から一時保存したページをすべて消すという作業をするとできます。ただ、ちょっと面等なので、いつか子供さんが「お父さん、例のページが開かないよ」と、キャッシュが無効になった段階で問題に直面した時に、「お父さんのほうでまたサーバーを立ち上げないとだめなんだよ」と教えてあげる程度でよいでしょう。

デモのまとめ

今回は、普段何気なく見ているウェブサイトの裏側にはIPアドレスという電話番号にような仕組みがあって、それによってどこからでもウェブサイトが見られるということを理解してもらうのがまず一つ。それを家庭内の小さなネットワークで確かめてみるというのがポイントです。

恐らく子供の反応としては「自分でもウェブページを作ってみたい」というものが出てくれば大成功です。皆さんが作った「おしゃべりウェブサイト」みたいなものが自分でも作れると気が付くでしょうから、その場合はHTMLの書き方など基本から教えてあげるのがよいと思います。簡単なウェブページはVSCodeで十分に作ってホストできるので、とても楽しい作業になると思います。

HTMLに興味を持てば、簡単な教則本を使ってすぐにちょっとしたサイトは作れるようになると思います。子供向けのHTMLチュートリアルサイトもたくさんありますのでそれを利用してもよいでしょう。

もしウェブサイトやHTMLなどに興味がわかない場合は次の要領でこのサイトで遊んでみてください。

デモ❹：音声機能を使って遊んでみる

このデモは番外編です。

皆さんが事前にこのサイトを実験してみて気付いたと思いますが、例えばテキストをクリックして「みきちゃん、こんにちは」としゃべる声が聞こえるのは、ホストマシンでも、接続したマシンでも起きるのです。ホストマシンでしゃべったことは、接続マシンもしゃべります。つまりちょっとした「糸電話状態」になっているのに気がづきましたか？

これを利用してこんな遊びはいかがでしょうか。先の「ごはんはできましたか」の続きとしてやってみてください。

お父さん：みきちゃんのマシンで「ごはんはできましたか？」のところをクリックしてみて。
みきちゃん：（クリック）あれ？お父さんのマシンもしゃべったよ。
お父さん：こっちもクリックしてみるよ。
みきちゃん：あれ、みきのマシンもしゃべった。どうして？
お父さん：じゃあさ、お父さん、台所（どこか家の中でちょっと離れたところ）に行ってみるよ。そこでもこうなるのか確かめてみよう。（台所に移動）みきちゃん、クリックしてみて。
みきちゃん：（テキストをクリック）こっちはしゃべったよ。
お父さん：こっちもしゃべったよ。ちょっと待ってね。（テキストボックスに「こっちもしゃべったよ」とタイプして「話す」ボタンをクリック）
みきちゃん：あっ、「こっちもしゃべったよ」って言った。
お父さん：みきちゃん、テキストボックスになにか入力してボタン押してみて。
みきちゃん：（「おとうさん、げんき」とタイプしてクリック）
お父さん：（「げんきだよ」とタイプしてクリック）
みきちゃん：なんだか面白い！離れてお話ができるね。

このサイトにつながっているすべてのマシンで音声が出てきます（ただし、iPhoneのChromeではちょっと動作が異なるようです）。つまり、家の中で離れていても、お互い音声でしゃべるという体験を同時に共有できます。例えば「ごはんはできましたか？」と誰かが部屋のPCでクリックしてしゃべらせると、台所のお母さんが携帯で「まだですよ」としゃべる返すこともできます。

ただ、これをやるにはすべてのマシンでウェブサイトを開いている必要があります。バックグラウンドになっているとしゃべりませんので注意してください。

こんなトランシーバーみたいな機能はあまり意味がないのですが、ちょっと工夫次第で面白いサイトができそうな感じがしませんか？ここからは皆さんのほうで工夫してやってみてください。

この記事が気に入ったらサポートをしてみませんか？