『子供とプログラミング』パート４ ー 作成したウェブページを外部サーバーに送る ー どこでも「おしゃべりウェブサイト」が見られるようにする！
前回パート３では、自分がしゃべったことをオウム返ししてくれるウェブサイトを作り、URLの文字列に言語コードを入れることで様々な外国語でもオウム返しができるようになる「URLパラメータ」の仕組みを理解しました。
パート２と３にわたってウェブの仕組みを勉強してきたわけですが、作ったウェブサイトは自宅のマシンで稼働しているウェブサーバー（Visual Studio CodeのPreview on Web Serverを使いました）でしか見ることができず、お子さんが作ったサイトを友達に見せようにも、自宅に呼ばないかぎり見せることはできません。そこで今回は、作ったウェブページをパブリックのウェブサーバーに置き、どこからでみサイトが見られるようにしてみましょう。
家の外でもウェブページが見られるようにするには？
まずウェブページを開く仕組みをもう一度おさらいします。
パート２でやったのは、まず自分のマシンでVisual Studio Codeをインストールし、そこでHTMLページを作成し、Preview on Web Serverという、VSCode内で簡単に立ち上げられる簡易ウェブサーバーを使ってページをブラウザで見ました。その際に、ウェブページを開くためのIPアドレスはLocalhost（127.0.0.1)という、最初から決められたものが使われ、PreviewではそのIPアドレスで開けましたが、同じ家のネットワーク内（お使いのWiFiネットワークです）で別のPCからはそのIPアドレスは通用しませんでした。つまり、開発マシン内でしか使えないIPアドレスということです（図の❶）。
そこでパート３では、PreviewサーバーにあるHTMLファイルを別PCからみるため、開発マシンのIPアドレス、LG-GRAM17(192.168.196.211)（注：これは皆さんのマシン名によって異なってきます）というものを使いました。これは家庭内のWiFiルーターにマシンをつなげると割り当てられるIP番号で、LG-GRAM17というのは開発PCの「マシン名」でした。これを使って、例えばお父さんのPCで書いたウェブページを、お子さんのPCから見る、ということが可能になりました。もちろんブラウザがあれば携帯でもタブレットでも見ることができます。ちょっとした家庭内ネットワークを体験してもらいました（図の❷）。
ところが、このPreviewでホストされているウェブページは家庭の外に出ると一切アクセスできません。実際に作ったWebサイトはクライアントのJavaScriptだけでできているので、ブラウザがキャッシュ（一時保存）することで動いているように見えましたが、一度キャッシュが消えるとページは二度と開きません。
そこで今回は、家庭内ネットワークの外で、だれからもアクセスできる場所にあるウェブサーバーに作ったウェブページを置き、どこからも閲覧できるようにします。こうすれば、お子さんも作ったウェブサイトを携帯などで見せることができるだけでなく、URLを教えてあげれば友達のマシンでも見ることができるようになります。つまり、”普通のウェブサイト”として運用するということです（図の❸）。
このためには、上記の図の右側にある「外部ネットワーク」を探してそこに作ったHTMLファイルを置いてもらいます。今回はこれがテーマです。
「ウェブホスト」というものを探す
自分でウェブを立ち上げるためにPervewi on Web Serverという簡易サーバーを使いましたが、外の世界ではだれがそんな面倒を見てくれるのでしょうか。実はウェブサイトを立ち上げるだけならお金は一切かかりません。簡単な例を挙げると２つあります。
❶ 無料ウェブホスティングのサービスを利用する
❷ クラウドサービスを利用する
（１）無料ウェブホスティング
ウェブサイトのファイルをサーバーに置いてくれるサービスです。「レンタルサーバー」というのも同じで、サーバーを使わせてくれると同時に、ウェブサイトをホストする仕組みも提供してくれます。
無料のサービスにはいくつか制限があり、特に自分のページに勝手に広告を入れるところが多いので、無料といってもちょっと使い勝手に難があるところも。ただ何と言っても無料なので、取っ掛かりとしては十分です。「無料ウェブホスティング」で検索すると多くのサービスが見つかります。まとめとしてはこんなサイト情報を参考にしてみてはどうでしょうか。
（２）クラウドサービスを使う
ウェブホスティングの場合、ウェブサイトを作る以外にあまり選択肢はありません。つまり”サーバー”というハードウェアを貸してくれるだけで、拡張性がないわけです。「じゃあ、それ以外に何が必要となるの？」と思うでしょうが、「サーバー」という世界でできることは星の数ほどあります。データの管理や処理、分析のほか、人工知能によるモノや音響の検知、セキュリティ、プライバシーなどなど、ITの世界で必要となる「機能」はごまんとあります。皆さんも一度は耳にしたことがある「クラウド」というのは、そういった多機能を取り揃えて提供してくれるサービスです。もちろん、ウェブページをホストするという機能もその一つで、個人で使う分には無料でウェブサイトを作ることができます。
クラウドサービスにはAmazonのAWSをはじめとして数多くありますが、歴史のあるものではHerokuなどがあります。
例えば、Herokuにウェブページを置く方法などは次のサイトなどを参考にしてみてください。
Azureクラウドを利用する
ここでは『今すぐ書ける 1分間プログラミング』でも解説したMicrosoftのAzure（アジュール）を利用します。簡単なウェブサイトのホストなら無料で使えることもありますが、これからサイトの機能を増やしていって、高度な音声認識や機械翻訳などを利用して英語学習アプリに仕立てていく予定で、それには高度な音声機能や言語処理機能が必要になってきます。『今すぐ書ける １分間プログラミング』ではすでにMacユーザー向けにAzureの無料アカウントの取得方法を解説していますので、その延長線としてAzureを使います。
本noteでも、Azureにアカウントを作って無料で音声機能を利用する手順について詳しく解説している記事がありますので、それも参考にしてください。
今回の作業の流れ
では、今回の作業を最初からやる場合の各ステップは以下のようになります。繰り返しますが、目的はパートで作った「おしゃべりウェブサイト」のHTML、CSS、JavaScriptの３つのファイルをAzureに展開して、どこからでもサイトが閲覧できるようにすることです。
❶ Azureアカウントを作成
❷ App Serviceの無料サブスクリプションを作成
❸ FTPツールをインストールしてファイルをAzureにアップロード
❹ PCやMac、携帯など様々なデバイスで確認する
今回はコーディング作業はありませんので、子供に説明するのは、ファイルをクラウドサーバーにアップロードするとどこからでもサイトが見られるというところです。世の中のすべてのウェブサイトが同じような手順で公開されているということを体験してもらえれば今回はそれで充分です。次回からは本格的なコーディング作業が入ってきます。
ステップ１：Azureポータルで新規サービスを作成
まずはAzureのアカウントを作ったら、https://portal.azure.com というポータルサイトにアクセスできるようになります。先に紹介した記事を参考にして、まずはこれができるようになってください。ポータルアクセスには当然、登録したIDとパスワードが必要です。作業はここから始まります。
皆さんのマシンでこのポータルが開けるようになったら次のステップに進んでください。
ステップ２：App Serviceのサブスクリプションを作る
ではウェブサイトをホストしてくれるサービスとして、App Serviceを作ります。ポータル上部のメニューからApp Serviceをクリックしてください。
出てきたページには過去に作ったウェブサイトがリストされますが、初めての場合は何もありません。そこでメニュー項目の一番左端の「追加＋」をクリックします。すると新規追加するApp Serviceの情報入力画面が現れます。
ここが一番面倒なところですが、一回きりの作業ですので次の方法で情報を入力していってください。
【サブスクリプション】ここは「従量課金」を選びます。サーバーの設定で「無料」を選択しますので、お金はかかりません。
【リソースグループ】Azureには数多くのサービスが提供されています。一つのアプリを作るのにデータベースやAI機能など様々なサービスを組み合わせて使います。このリソースグループという「フォルダ」や「プロジェクト」みたいなもので、言ってみて「まとめ役」のようなもので、これを定しておくと複数のサービスをまとめて利用状況を把握したり、最終的に削除したりすることができます。とても便利な機能で、どのサービスを利用するにしてもこのリソースグループを指定しないといけないので、ここでは「新規作成」をクリックして作成してください。例えばここではMyWebSiteとしていますが、名前は分かりやすいものなら何でも構いません。
【インスタンスの詳細：名前】これが一番大切です。ここで入れた名前が皆さんの今回のウェブサイトURLになるからです。パターンはhttps://[名前].azurewebsites.netとなります。例えば、上記では私の名前、itagakiを指定していますので、URLはhttps://itagaki.azurewebsites.netになります。あまり長いと人に伝えにくい一方、短いと二重登録で使えないので（このURLは世界に一つしかないものです）、ここは慎重に考えてください。とりあえず今回はテストですので、お薦めは名前＋test + 番号、例えばmasakitest100とか、mikichantest1などとすると覚えやすいのと、重複を避けることができると思います。すでに使われている名前の場合は赤字でエラーが表示されますので、重複エラーが消えるまで、いろんなパターンを入れてみてください。
【公開】これはそのまま「コード」を指定してください。
【ランタイムスタック】これはPHPやNode.js、Python、Rubyなどサーバーの環境を指定するものですが、今回の簡単なサイトには不要です。ただ、ここは指定が必要なので、とりあえずPHPの最も新しいバージョンでもしてしておいてください。
【オペレーティングシステム】これはデフォルトのLinixで構いません。
【地域】これはクラウドの場所を指定しますが、日本には東日本と西日本があります。ここでは東日本（Japan East)を選んでください。
【プラン】プラン名は自動的に作成されているはずです。ここもそのままの値を利用します。
【SKUとサイズ】ここで無料プランを指定します。必ず「サイズを変更します」をクリックしてプランを変更してください。
「スペックの選択」画面がでてきらた、「開発／テスト」をクリックし、そこの「F1 無料」というボックスをクリックして「適用」ボタンを押してください。
この無料プランでは、１日に１時間のアクセスに限るほかメモリなども制限されます。ただ、ちょっとしたサイトを上げてテストするには十分です。もし本格的に自分のウェブサイトを公開したい場合は別プランを利用してください。
すべての入力が終わったら「確認および作成」ボタンをクリックします。入力に問題があればここでエラーが表示されます。指示に従って問題を修正し、エラーが出なくなったら「作成」ボタンをクリックしてください。
この後ちょっとの間「デプロイが進行中です」というメッセージが表示されたページに移りますが、最終的に「デプロイが完了しました」というメッセージに変わります。これで作業完了です！
初めての”自分のウェブサイト”を確認する
これで初めてのの自分のウェブサイトができたので、実際にブラウザから覗いてみましょう。上記のサンプルの場合は、https://itagaki.azurewebsites.netです。ブラウザにURLを入力してEnterを押すとこうなります。
これはデフォルトのページ設定で、まだなにもファイルをアップロードしていない皆さんのサイトは空のはず。ただ変なエラーを出すより、このようなページを開く設定にしておくと、きちんとサイトが稼働しているのだということを確認できます。このページが見られたら作業は大成功です！
ステップ３：FTPツールを使ってファイルをアップロードする
ではいよいよ皆さんのサイトのファイルをアプロードします。この作業をデプロイ、または展開と言いますが、やっていることはアップロードなのです。そこで、デプロイの方法はいくつもありますが、ここでは一番簡単で分かりやすいFTP（File Transfer Protocol)という仕組みを使ってファイルをアップロードします。簡単にドラッグアンドドロップするだけです。
FTPというのは簡単に言うとサーバーにファイルをアプロードするツールです。アプリは数多くあり、どれを使っても構いません。例えば次のようなサイトを参考に選んでください。
ここではWindows上で使うWinSCPというアプリを利用します。設定はどのFTPアプリも似ているので、WinSCPの設定を参考に他のアプリでも簡単に設定できるはずです。
Windowsマシンを使っているかたはここからダウンロードしてインストールしてください。
WinSCPでやることは、左側に自分のマシンにあるウェブファイルを置いてあるフォルダを開き、右側にAzureに作ったApp Service（上記の場合はitagaki.azurewebsitesnetのウェブフォルダ）を開いたら、後はドラッグアンドドロップをするだけ。ファイルを変更したらまたドロップするという作業を続けるだけです。簡単でしょう？
FTPの設定
まずはWinSCPの設定で、Azureに作ったWeb Applicaitonの場所を教えてあげます。
（１）作ったitagakiウェブサイトの情報ページを開く
AzureポータルのHomeページ（常に左上にHomeというリンクがあります）から「リソースグループ」に移動してください。そこに先ほど作ったMyWebSite（皆さんが付けた名前に従ってください）をクリックします。すると出てきたリストにitragaki（これも皆さんが付けたアプリ名です）というサイトの名前がありあります。そこをクリックしてください。するとitagakiというApp Serviceの詳細画面が出てきます。そこの左端にあるメニューから「デプロイセンター」を選んでください。
デプロイセンターが右側に表示され、そこに「手動配置 (プッシュ/同期)」としてFTPという項目があるので、それをクリックし、「ダッシュボード」をクリックしてください。
するとFTPの詳細画面が出てきます。ここで３つの情報が必要となります。
FTPSエンドポイント、ユーザー名、パスワードです。それぞれテキストボックス右にある「コピー」アイコンをクリックするとクリップボードにコピーされます。それを利用してください。ちなみにどのFTPアプリでもこの３つの情報を入れればよいだけです。
ではこのサイトを開いたままにして、WinSCPを立ち上げます。
WINSCPを最初に立ち上げるとログイン設定画面が出てきますが、出てこない場合は「セッション」メニューから「新しいセッション」を選び、右のリストにある「新しいサイト」をクリックするとFTP入力画面がでてきます。ここに先の３つの情報をそのままコピーして入れるだけです。
コピペが終わったら「保存」をクリックして情報を保存しておきましょう。ここで「パスワードを保存する」をチェックしておくと次回からパスワードを入れる手間が省けますので、ここは✅を入れておいてください。では「自動ログイン」をクリックしてみます。
前にも説明した通り、左が皆さんのマシン、右がサーバーにあるディレクトリで、場所は常に/site/wwwrootとなっています。ここにファイルを置くと皆さんのウェブサイトに表示されるという仕組みです。
ところで、ここにすでにhostingstart.htmlというHTMLファイルが入っていますね。そうです、これが例のデフォルトのページなのです。
AzureのApp Serviceでは、新しいアプリが作成されたらウェブディレクトリにこのファイルを必ず置いてくれます。これでサイトが確定した時に変なエラーページが出なくなるわけです。ちなみにこのページは不要なので右クリックから削除してみてください。ファイルを消しても何も問題ないので安心して削除してください。そしてブラウザを開いて、https://[皆さんのサイト名].azurewebsites.netを開いてみて下さい。こんな醜いエラーページが表示されるはずです。
自分のファイルをデプロイする
ではサーバーのディレクトリが空になったところで、パート３で作った「おしゃべるウェブサイト」のファイルをサーバーにデプロイしてみましょう。
といっても単純な作業です。パート３で作ったindex.html, speech.js, style.cssの３つのファイルがあるフォルダを左サイドで開いたら、それを選択して、右側にずるずるとドラッグするだけです。するとコピーの進捗状況を表示するウィンドウが一瞬出てきて、すべてのファイルが右にも表れるはずです。たったこれだけ！
ではブラウザでサイトを開いてみましょう。
「こんいちは」など何か話しかけてみて、動作を確認したらお子さんを呼んでさっそくデモをやってみましょう。
デモ：デプロイしたサイトをいろんなデバイスで見てみる
お母さん：ねえみきちゃん、この前作った「おしゃべりウェブサイト」あるでしょ。あれね、どこからも使えるようにしてみたのよ。
みきちゃん：どういうこと？
お母さん：あれって、外からじゃ見られなかったでしょ。
みきちゃん：うちの中だけでしか開けなかったよね。学校で携帯使ってやったけどだめだったもん。
お母さん：それがね、どこからでも見られるようになったの。
みきちゃん：何をしたの？
お母さん：ほら、あの時はママのパソコンでウェブサーバーってのを立ち上げて、そこでウェブサイトのファイルを置いていたから、ママがいる家の中だけだったよね。
みきちゃん：そうだったね。
お母さん：でね、今回はクラウドっていう、みんながアクセスできるところにあのおしゃべりウェブサイトを置いたの。そうするとね、学校からでも、（近所の）さきちゃんの家でも、旅行で泊まったホテルの中からでも、とにかくどこからでも見られるのよ。
みきちゃん：すごい、じゃあ私の携帯からでも？
お母さん：そう、やってみようか。じゃあさ、携帯出して、Chromeブラウザ開けて。で、このアドレスのところをタップして、このアドレスを入れて。https://[自分の名前].azurewebsites.net。ちょっと長いけど気を付けて入れてみて。
みきちゃん：入れたよ。
お母さん：じゃあOKを押して。
みきちゃん：あっ、出てきた。
お母さん：「話す」をタップして話してみて。
みきちゃん：（クリック）おはようございます
携帯：「おはようございます」
みきちゃん：うわっ！じゃべった。なんだかPCの時とちょっと声が違うね。そうだ、さきちゃんにも教えてあげよう。
お母さん：さきちゃんにLineでリンクを送ってあげるといいよ。
ちょっと長いやりとりになってしまいましたが、一つ注意があります。携帯やタブレットを使う場合、必ずChromeを使ってください。そしてサイトを開くだけならAndrodiでもiPhoneでも構いませんが、音声認識については残念ながらAndroidのChromeでしか動作しないようです。iOSのセキュリティが高くなっているせいだと思います。
さて、会話でのポイントですが、まず、パート３で作ったサイトはあくまでも家の中だけでしか動きませんでしたが、クラウドにファイルを置くことで、世界のどこからでもアクセスができるようになるという点を教えてあげてください。世の中のウェブサイトは様々な形態でホストされています。自社で用意されたサーバー、ホスティング会社のサーバー、クラウドのサーバーなど。ただ共通しているのは、ホストしているサーバーが一般のインターネットにつながっていて、それにより世界のどこからでもホストされているウェブサイトにアクセスができるということです。
冒頭のダイアグラムでも示した通り、自分のマシンにあるウェブサーバーでは、”世界”はあくまで自分の家の中に限られていましたが、クラウドでホストすることによってその”世界”が文字通り全世界に広がるわけです。ウェブが動く仕組みの一つがこのIPアドレスによるサイトの管理なのです。
次回は・・・
ここまで自分が書いたHTMLなどのウェブファイルを公開するところまでやってきました。あとはウェブサイトのコンテンツで思いっきり遊ぶだけです！
次回からは「おしゃべりウェブサイト」を拡張して、簡単な「英語学習サイト」を作ってみます。例えば自分で覚えておきたい英単語リストを作っておきます。そしてその中からランダムに単語を選んで、例えば「花って英語でなんて言うの？」と質問が出てきて、「フラワー」と言うと、正解の英語とともにそれをきれいな英語で発音してくれる、みたいな感じです。これまで作ったJavaScriptを利用すればすぐにできます。自分独自の単語リストで勉強できるので、ちょっとしたテスト対策にもなるかもしれません。
では乞うご期待を！
この記事が気に入ったらサポートをしてみませんか？