あなたに次の選択肢を用意するサイト
Thoth Coworker
~ プログラミングの次++ ~
For
新社会人 / 新学生 / 新院生 / 新研究者
カテゴリ
WebサーバなしでWebページを見てみる
Facebookシェア Twitterツイート LINEで送る
Links
ThothChildren
Thoth VisAlgo
Thoth YOSO
Top Views
New
Top
Web
Webサーバを学ぶ
WebサーバなしでWebページを見てみる
P
ポイント
WebサーバなしでWebページを見てみる
Webサーバを立てずに自作Webサイトを見てみますための記事
  • Point 1
    Webサーバを使わずWebページ
    Webサーバは様々なことを処理しますが、まず何よりもWebページを見たい人にWebページを送ってくれます.今回はWebサーバを使わずにページを見てみることを確認します.
  • Point 2
    自分のパソコンでHTMLを書く
    自分のパソコンで自分のページを簡単に作ってみます.HTMLファイルさえつくれば誰でもWebサイトを見れます
  • Point 3
    ブラウザで確認
    ブラウザで自分で作ったページを確認してみます.Webサーバがなくとも表示を確認することはできます.ただし、Webサーバがないため自分しか見れません.
P
ステップ概要
WebサーバなしでWebページを見てみる
Step
1
まずは自分のサイトをHTMLで書いてみる
自分のHTMLファイルを作成しパソコンに保存します
Step
2
書いたファイルをWebブラウザで表示
書いたファイルをWebブラウザにドラッグ&ドロップして表示します
Step
3
Webサーバのファイルを送る機能とは
Webサーバのファイルを送ってくれる機能について理解します.
Step
1
まずは自分のサイトをHTMLで書いてみる
Webサーバはユーザから要求されたページをネット越しにユーザに渡して、ユーザの環境で表示してもらいます.今回はWebサーバを使わずに自分でページを渡してみます.
自分でファイルを書いてそれをブラウザにドラッグ&ドロップを行います.(※ChromeやInternetExplorerなどWebサイトを表示するソフト) これはまさにWebサーバがページをブラウザに送って表示するのを自分でやっているのと同じです.

それでは早速HTMLファイルを書いて自分の初めてのWebサイトを作ってみましょう.

メモ帳を開いて以下の中身を貼り付け、index.htmlとして保存してください.
HTML : 初めての自分のページを作る
index.html
    
<html>
  <head>
  </head>
  <body>
    <h2>
       自分の初めてのWebサイト
    </h2>
    <div style='color:red'>
        私の名前はThoth Childrenです!
    </div>  
  </body>
</html>
これで表示するWebサイトは書けました.上のファイルを色々編集すれば、自分用のカスタマイズしたWebページを作れるので、色々試してみてください.
Step
2
書いたファイルをWebブラウザで表示
先ほど作ったindex.htmlを実際に表示してみましょう.

まず、自分のパソコンにインストールされているChrome、Safari、InternetExplorer、Firefox、Edgeを開いてください.
そしたら、先ほど作ったindex.htmlをその上にドラッグアンドドロップを行います.
それか、以下のようにファイルを右クリックしてどれかのブラウザを選択するでも問題ありません.Macの場合は、「アプリケーションで開く」からChromeやFirefoxを選んでください.Windowsの場合は、「プログラムから開く」になります.


index.htmlをブラウザで開く画面
すると以下のような画面が表示されます.


index.htmlを開いた画面
これで初めて作ったWebサイトが自分しか見れませんが表示できました.
実際にindex.htmlを編集してブラウザで読み込みをし直すと適切に反映できることが確認できます
文字列を色々変えてみて、実際にページの文字列が変わることを確認しましょう.redをgreenやblueにしても面白いかもしれません.
Step
3
Webサーバのファイルを送る機能とは
さて、Webサーバを使わずにWebページを表示してみました.

今回はWebサーバの代わりに自分でファイルをWebブラウザにHTMLファイルを表示しましたが、このファイルをブラウザに渡す作業こそがWebサーバが行っていることです. 以下に違いをまとめます.
Webサーバのありなしの経路の違い
また自分で今回index.htmlを編集していろいろな表示ができたと思います.しかし、これもWebサーバは行います.WebサーバはHTMLファイルを書き換えてそれぞれの人のページを作る作業もしているのです.このようにWebサーバでは、ページを送り届けたり、それぞれの人の特別なページを用意したりするなど様々な仕事をこなしています.

ポイント : Webサーバの仕事
  • WebサイトのHTMLなどページをユーザに届ける
  • 各ユーザにカスタマイズしたページを作る
  • URLに対応したページを返す
  • 等々
Webサーバにはページを届ける以外にも様々なことを行っています.
例えば, http://thothchildren.com/topとhttp://thothchildren.com/coworkerでは全く異なったページを送らなくてはなりません. そのためユーザに言われたURLに応じてどのファイルを返すかといった処理もWebサーバが担っています.


URLに応じて表示するWebサイトを変更
また人によって挨拶文を変えたかったりもします(例:Aさん!こんにちわ).それも同じように図にすると以下のようなことです.
ユーザによってWebサイトの内容を変更
今回はWebサーバを立てませんでしたが、Webサーバが何をやっているかを本当に理解する初めの一歩になれば幸いです.
Done