初心者によるWebページ制作の一歩

5 min read読了の目安(約5300字

こんにちは、スネオです。ここ最近はQiitaとかZennなどでいろんな人の記事を読んでいるとレベルの高さに驚きます……。心がポキッと折れたりしますが、頑張っていきます。

この記事では以下の超適当に作ったHTMLファイルをブラウザで見れるようにするところまで頑張ります。

何かトンチンカンな事を書いてしまっていたら、教えていただけると嬉しいです。

とりあえず、いろいろ必要そうな知識を集める…

Web(World Wide Web)

インターネットという世界規模で繋がっているネットワークを利用して情報を発信したり閲覧したりするための仕組み

インターネット

地球規模で繋がっているネットワーク。インターネットを使うことによりオンラインゲームをしたり世界中のホームページを見ることができる。ネットワークに接続しているデバイスには、ネットワーク上のデバイスを識別するためのIPアドレス(Internet Protocol Address)というインターネット上の住所のような物が必ず割り当てられる。このIPアドレスはデータを送信したり受信したりする際に必要な情報である。

IPアドレスは各国ごとに世界レベルで管理されている。

組織名 区域 概要
ICANN 全世界 アイキャン。1998年に設立された。The Internet Corporation for Assigned Names and Numbersの略で、インターネットを全世界レベルで管理をしている組織。ドメイン名、IPアドレス、DNSサーバーなどを統括管理している。ICANNが組織の頂点 に、さらに5つの地域インターネットレジストリを傘下として配置している。
AfriNIC アフリカ ICANNの傘下の地域インターネットレジストリ。アフリカ地域のIPアドレス割り当てを行っている。
RIPE NCC ヨーロッパ 中東 中央アジア ICANNの傘下の地域インターネットレジストリ。ヨーロッパ、中東、中央アジア地域のIPアドレス割り当てを行っている
LACNIC 南アメリカ カリブ海地域 ICANNの傘下の地域インターネットレジストリ。南アメリカ、カリブ海地域のIPアドレス割り当てを行っている
ARIN 北アメリカ ICANNの傘下の地域インターネットレジストリ。北米、カリブ海と大西洋エリア、南極エリア地域のIPアドレス割り当てを行っている
APNIC アジア・太平洋 ICANNの傘下の地域インターネットレジストリ。東アジア、南アジア、太平洋エリアのIPアドレス割り当てを行っている。我が国”日本”はこの管轄に入っている
JPNIC 日本全国 日本ネットワークインフォメーションセンター。アジア・太平洋地域管轄のAPNICからIPアドレス割り振りしてもらい、さらに日本全国を管轄しているJPNICがIPアドレス管理指定業者に割り当て作業をしておる

日本でのIPアドレス割り当ては、ICANN → APNIC → JPNIC → IPアドレス管理指定業者 → ユーザー、このような感じになりそうですね!

IPアドレスの種類

種類 概要
グローバルIPアドレス インターネットに接続している端末を識別・特定をするための物。プロバイダー(ISP)からグローバルIPアドレスが割り当てられ、重複する事は無い。基本的にはグローバルIPアドレスはコロコロ変更される(変動グローバルIP)。サーバー用途などの場合は固定グローバルIPが使われる。ゲームでお友達がマルチプレイをする際に入力するIPアドレスもグローバルIPのはず…
プライベートIPアドレス ローカルIPアドレスとも呼ばれます。ローカルエリアネットワーク(LAN)という狭いネットワーク内で使われるアドレスで、定期的に変更されるらしい。インターネットに接続する際、ルーター(アクセスポイント)がプライベートIPアドレスをグローバルIPアドレスに変換してくれる
MACアドレス 製造段階でそれぞれの機器に付されるアドレスで、物理アドレス、イーサネットアドレス、Wi-Fiアドレスとも呼ばれる。AA-BB-CC-DD-EE-FFという感じの識別番号で表現される。前半のAA-BB-CCの部分はOUIと呼ばれていて、これはIEEEと呼ばれる組織が一元管理しており、全世界の通信装置メーカーへ割り当てを行っている。後半のDD-EE-FFの部分は各通信装置メーカー内で管理された番号となる。前半のOUIの部分はIEEEのサイトで通信装置メーカーを検索可能である。筆者はiPhoneを使っているがiPhoneのWi-Fiアドレスの前半部分を検索したら、通信装置メーカーはAppleと出てきた

インターネットサービスプロバイダー(ISP)、IPアドレス管理指定業者

契約してお金を払えば、家の回線をインターネットに繋げてくれるインターネット接続事業者。IPアドレスを管理している組織(日本だとJPNIC。)から各プロバイダーにIPアドレスが振り分けられている。JPNICのホームページでIPアドレス管理指定業者リストが公開されていて、そのリストの中にはソフトバンク、KDDI、NTTドコモ、ビッグローブ、スターキャットなどいろいろな会社が記載されておりました。

茶番劇1
スネオ「この前、うちのパパの友達がJPNICからIPアドレスを割り当ててもらって、インターネットサービスプロバイダー事業(ISP)を始めたんだ。君たちにもインターネットやりたければグローバルIPアドレス分けてあげるよ」
のび太「僕の分のグローバルIPアドレスもあるんだよね~?」
スネオ「悪いなぁ、のび太。残りのIPアドレスが3つ分しかないんだ。ボクとジャイアンとしずかちゃんで3つ。ハハハ!」
のび太「ドラえも~ん!」

インターネットエクスチェンジ(Internet eXchange)

インターネットサービスプロバイダー同士をくっつける役割を果たす。IXがある事によっていろんな人が契約しているプロバイダーがそれぞれ違っていても通信をする事ができる。

サーバー

サービスや機能、ファイルなどを提供してくれるコンピュータである。

種類 概要
Webサーバー Webページをインターネット上に公開するのに必要な物である。Webページを見る時にブラウザを使うが、そのブラウザの要求(リクエスト)に対して、Webサーバー上のWebサイト表示に必要なファイル(html、css、画像など…)をブラウザに送信(レスポンス)する
DNSサーバー IPアドレスとドメイン(wwwなんたらかんたら…) を結びつけるサーバーである。人間にとってわかりやすいのはドメイン表記だが、コンピューターにとってわかりやすいのはIPアドレス表記である

茶番劇2
ジャイアン「お!スネオのラジコンかっこいいじゃ~ん!俺にちょっと貸せよ!!貸さないとぶん殴るぞ!!(リクエスト)」
スネオ  「ぎゃあー!ジャイアン!!僕のラジコン貸します貸します…!!!どうぞ!!(レスポンス)」

インターネットを図にしてみるとこのような感じになるのでしょうか?

2、ブラウザ(Webクライアント) と URL。

Webサイトを閲覧する時に使うものですね。Internet Explorer、Firefox、Google Chrome、Microsoft Edge、などいろいろあります。今現在自分が記事を書いている時もブラウザを使っております。ブラウザには主に以下の機能があります。

1.HTTP(HyperText Transfer Protocol)という全世界共通の通信プロトコルを使ってWebサーバーと通信する。
2.Webサーバーから受け取ったファイル(html、css、画像…)を解析して画面に表示する。
3.スクリプトを実行する事(JavaScript…)
4.ブラウザを使うユーザーに対していろいろ機能を提供する。(進む、戻る、更新、設定機能、アドオン追加機能、拡大縮小機能…)

茶番劇3
ジャイアン「俺様の新曲のレビューについて検索するか。スネオブラウザで検索するか。https://www.google.com/ と入力してと…」
-------↓ジャイアンのコンピュータ↓-----
スネオ「https://www.google.com/ ってなんだ? IPアドレス表記じゃないとボクわからないなぁ。のび太いるかー?」
のび太「?」
スネオ「お前、このwww.google.com のIPアドレス表記をDNSサーバーに聞いてこい!人間の言葉じゃわからん!」
のび太「わかったー。もしもしDNSサーバーさんですか?www.google.com のIPアドレス表記が知りたいんですけど。216.58.197.132ですか、ありがとうございます」
スネオ「216.58.197.132だな! さっそく必要なファイルをサーバーから貰って、表示しなくちゃ」

URL(Uniform Resource Locator)


よくこのような文字の羅列を見かけます。これはIPアドレスを人間がわかりやすいように文字列にした物ですね。

4、適当に作ったHTMLをWebサーバーに送信して公開する。

1、Webページを公開するにはWebサーバーが必要だと言う事で、xfreeというところで登録作業をして無料のレンタルサーバーを借りることにしました。(SSLに対応していねえッ…!)有料レンタルサーバーも後日検討します。xfreeはエックスサーバー株式会社というところが運営しておりますが、これもJPNICのホームページのIPアドレス管理指定業者リストに記載されておりました。有料レンタルサーバーの会社なんかも記載されているのを見つけました。

2、登録したら次にFTPクライアントソフトをダウンロードして導入していきます。
自分の場合は仕事でも使った事のあるWinSCPというソフトを使う事にしました。

3、ダウンロードしたら、ホスト名、ユーザー名、パスワードを入力してログイン。
xfreeだとブラウザでの設定画面のFTPアカウント設定というところでログインに必要な情報が見れます。

4.FTPクライアントソフトとWebサーバーが繋がったら、適当に作ったhtmlファイルをWebサーバーにぶん投げる。

5.ブラウザで表示確認をする。http://ドメイン名(webサーバー名)/フォルダディレクトリ/ファイル名

あまりにもしょぼいwebページではありますが、とりあえず表示されただけでも一歩前進といった感じです。

今後も自分なりに記事を書いてアウトプットしていきます。
ありがとうございました。