第54話 初めてのWeb公開
電車の中で千尋と並んで座っていると、千尋がじっと僕の顔を見つめてきた。
「健太さん、なんだか疲れてますね」
「え？」
「目にクマができてるし、なんだかぼーっとしてません？」
確かに、昨夜は深夜2時まで作業していた。Bootstrap学習に夢中になって時間を忘れてしまったのだ。
「実は……昨日、深夜までWebサイト作りをしてたんです」
「なんでそんなにおそくまで？」
千尋は心配そうな表情を浮かべた。
「はい。ちょっと長くなっちゃうんですが……
「僕、これまで水野屋のWebサイトを作るとき、Googleサイトとか他の会社のサービスで作ってたんですけど、もっとクオリティを出そうと思うとこのアプローチでは限界を感じてたんです。そこでどうしたものかなーって考えてたときに千尋さんのアドバイスを思い出したんですよ」
「私の、ですか？」
「ええ。周りを頼るっていう。そこで友人の山田に相談したら、うちの学校の情報の教師と卓也さんに聞いたらいいんじゃないかって……あ、卓也さんはウェブエンジニアらしくて」
「ウェブエンジニア！よくわからないけれどなんかすごそうですね」
「そうなんです！すごい技術力なんですけど……」
僕は苦笑いした。
「めちゃくちゃ辛辣な方で、最初すげー凹みました。『全然駄目だね』とか『ggrks』とか言われて。知ってます『ggrks』」
「ggrks？いえ、聞いたことないです。」
「『ググレカス』の略で……要するに『グーグルで自分で調べろ、カスが』って意味です」
千尋は困ったような顔をした。
「それは……ちょっと厳しすぎませんか？」
「正直ガチ凹みしました。でも、仰ってることはまあ、正論なんですよね。聞く前に調べろと。
これくらいできないと話にならない、みたいな感じに宿題出されて煽られましたよ。くっそーなんて思いながら、がむしゃらに頑張ってたんですが、そしたらなんだかんだで、だんだん楽しくなってきちゃいました。
あと情報の先生──小林先生にも頼ってみたのですが、こちらの先生は、逆にすごく優しく教えてくれるので勉強が捗ってます」
僕は画面を千尋に向けた。
「あ、そうそう見てください。昨日はBootstrapっていう技術を教わって、ついにここまで来ました」
僕は膝の上にノートパソコンを広げて、見せる。
「すごい……プロレベルじゃないですか」
千尋は感心したように画面を見つめた。
「流石にプロまではまだまだですが、以前に比べるとだいぶ近づいたかなと思ってますよ」
「健太さんが頑張ってるのは嬉しいけど、体調も大事にしてくださいね」
「ありがとうございます。今は楽しくていくらでもがんばれそうです」
電車が千尋の駅に着く。
「頑張って！でも無理は禁物ですよ」
千尋は心配そうに手を振って降りていった。
◆
放課後、また小林先生のもとを訪れた。
「先生、作ったサイトを公開するにはどうすればいいですか？」
「ああ、Web公開ね。Webサーバーにファイルをアップロードする必要があるよ」
小林先生は手振りを交えながら説明してくれた。
「学習用なら無料のレンタルサーバーがいくつかある。ファイルの転送にはFTPというプロトコルを使うんだ」
「FTP……ですか？」
「File Transfer Protocolの略で、ローカルのファイルをサーバーに転送する仕組みだね。今度はFTPクライアントソフトの使い方を覚える必要があるんだ」
「また新しい技術ですか……」
「まあそんなむずかしいものじゃないよ、君ならすぐに覚えられるよ」
小林先生はブラウザを開いて、無料ホスティングサービスの登録画面を見せてくれた。
「まず、ファイルサーバーの概念から説明するね。君のパソコンにあるHTMLファイルを、インターネット上のサーバーコンピューターに置くことで、世界中の人がアクセスできるようになるんだ」
小林先生は図を描きながら説明してくれた。
「例えば、君のパソコンは自分の部屋にある本棚みたいなもの。そこにある本（HTMLファイル）は、君しか読めない。でも、図書館にその本を置けば、誰でも読めるようになる」
「ああ、なるほど！」
「インターネットは、その図書館と君の部屋をつなぐ道路みたいなものかな。FTPは、君の部屋から図書館に本を運ぶトラックのような役割を果たすんだ」
「すごく分かりやすいです！」
「そして、その図書館に本を置いたら、今度は他の人がどうやって読みに来るかも説明するね」
小林先生は続けて図に書き加えた。
「千尋さんが君のサイトを見たいとする。千尋さんは自分のスマホのブラウザにURLを入力する。すると、インターネットという道路を通って図書館まで行き、君が置いた本（HTMLファイル）を読んで、それを自分のスマホに表示するんだ」
「なるほど！つまり、僕が図書館に本を置けば、千尋さんでも山田でも、世界中の誰でもその本を読めるようになるってことですね！」
「その通り！そして、その図書館の役割をしてくれるのがホスティングサービスなんだ。無料で図書館のスペースを貸してくれる会社があるんだよ」
いままで漠然とインターネットを利用していたが、この説明でやっと具体的なイメージがわいた。
「ホスティングサービスに登録すると、こういう設定情報がもらえる」
画面には見慣れない項目が並んでいた。
「ホスト名、ユーザー名、パスワード、ポート番号……」
「最初は戸惑うと思うけど、それぞれ意味があるんだ。ホスト名はサーバーの住所、ユーザー名とパスワードは君専用の部屋の鍵、ポート番号は入口の番号みたいなものかな。とりあえずこの情報をFTPクライアントツールに入力してみて」
「ええっと……ホスト名、ユーザー名、パスワード名……ポート番号は21番……」
で、接続。ぽちっとな。
「おお、つながったっぽい」
「じゃあここに作った適当なHTMLファイルをアップしてみてください」
ドラッグアンドドロップでHTMLファイルをクライアントツールのWindowに配置する。
「で、ホストのURLにブラウザで接続してみてください」
「えっと、スマホでもいいんですか？」
「はい、どうぞ」
僕はホスト名を入力する。
「おおお！！！」
僕が適当にhtmlに書いた、『ああああ』、という文字が手元で確認できた。
たかが『ああああ』、されど『ああああ』。
「おめでとうございます。こうやってデータの公開を行うんですよ。佐藤くんが作ったウェブサイトも同じようにアップしたらみれるはずです。やってみてください」
僕は力強くうなづいた。
帰宅後、同じ要領で無料ホスティングサービスのアカウントを取得した。
「今度こそ完璧に公開してやる……！」
小林先生に教わった通り、FTPクライアントソフトをダウンロードし、設定情報を入力する。ホスト名、ユーザー名、パスワード、ポート番号……。
接続に成功すると、慎重にこれまで作ったHTMLファイル、CSSファイル、画像ファイルをアップロードした。
そしていよいよ、ブラウザにURLを入力する。
「あ……繋がった！」
自分のサイトがインターネット上に表示される瞬間、鳥肌が立った。PC、スマホ両方で動作確認を行い、レスポンシブ対応も完璧だった。
「やった……本当にできた！」
家族や友人、そして世界中の誰もが、このURLを入力すれば僕が作った水野屋のサイトを見ることができる。この事実に、僕は深い感動を覚えた。
◆
翌朝、卓也さんへの最終報告の時が来た。
『山田さん、サイト公開完了しました』
公開URLを送信する。
数分後、返信が来た。
『……ほー、ちゃんと公開できたじゃん』
『はい、HTML、CSS、Bootstrap、FTPまで全部理解しました』
『見た目はまあまあだな。でも……』
『でも？』
嫌な予感がした。またダメ出しが来るのか。
『問い合わせフォームが動かないじゃん。送信ボタン押しても何も起こらない』
『あ……』
確かに、HTMLで作った問い合わせフォームは見た目だけで、実際には何も動作しない。
『ちゃんと動く問い合わせフォームまで作って初めて宿題完成だ』
部屋に戻り、自分のサイトのフォームを触ってみる。確かに送信ボタンを押しても何も起こらない。
『JavaScriptくらい使えないと話にならない』
「JavaScript……また新しい技術かよ」
やればやるほど、新しい技術や知識が必要だということがわかる。
もはや卓也さんを見返すとかどうでもいい。
オラ、ワクワクしてきたぞ！
