Zenn
🔖

Web技術とは

2023/02/18に公開
Web
tech

Web（World Wide Web）とは

文章の公開閲覧のためのシステムをWebという。
以下のようなことができます。

  • インターネットの復旧で最新のニュースを調べること
  • 自分の調べたいものなどの文章を見つけること
  • SNSで自分の文章や動画などを公開することが容易になる

ハイパーテキスト

Webの文章はハイパーテキストという言語で合成されている。
その中にハイパーリンク（Webページの参照）を埋め込むことができ、一つのWebページで複数のWebページと関連でけることで、全体で大きな情報の集合体とすることができる

  • 例）1つのWebページでリンクをクリックする事でたくさんのページに遷移が可能な状態。

ユーザーインターフェイス

  • コンピューターの機能とユーザーのやり取りを橋渡しする機能をユーザーインターフェイスと呼ぶ
  • 例）Webメールはハイパーテキストを用いて、メールの編集一覧などを表示する事でユーザーがメールサーバの中のメールを表示したり操作したりするための橋渡しをします。
    具体的には、ユーザーがメールの操作を行なった際にユーザーの代わりに、Webサーバーがメールサーバーに伝え、メールの操作などを行うこと。

プログラム用API

  • ソフトウェア同士のやり取りの橋渡しをする機能をAPI（アプリケーションプログラミングインターフェイス）という。
    -　天気予報アプリだと、アプリが送信した地域情報をプログラム用APIの役割を持つWEBサーバーが受け取る
    Webサーバーは受け取った地域情報情報に対応する、天気予報のデータをアプリに返すという使い方がされている。

配信プログラムとWebサーバー

  • WebサーバーはWebプラウザからコンテンツ（内容）の要求があると、必要なコンテンツをネットワークを通じてWebプラウザに送信する役割がある
  • コンテンツはWebサーバーによって配信されることでWebページと呼ばれるようになる。
  • コンテンツを持っていない時は持っていないとWebサーバーが返すこともある。

やり取りの手順　HTTPとは

  • Webページが表示される際は、WebブラウザからWebサーバーにコンテンツを要求し、Webサーバーが要求されたコンテンツをWebプラウザに送信するやり取りが行われている。
  • コンテンツのやり取りの手順、書式は世界共通の仕様として決められている。
  • この世界共通のハイパーテキストのやりとりの手順をHTTP(Hypertext Transfer Protocol)と言います

URLを使ってWebサーバーにアクセス。

  • Webページを取得する時、最初に「http://app.the-online-class.com/top.html」
    のようなURLで取得したい。WebページをWebプラウザに指定します。
  • URLには「どのやりとりの手順？」「どのWEBサーバーに？」「何のコンテンツを？」取りに行くかという情報が含まれていて、Webプラウザはこの情報をもとに要求を送ります。
  • Webプラウザは指定されたURLをもとに指定されたやりとりの手順で、Webサーバーからコンテンツを転送してもらいます。
  • Webで使われるやりとりの手順はHTTPと、HTTPのセキュリティを高めた手順であるHTTPSがあります。
  • オンクラスのURL
    https://app.the-online-class.com/top.html

Webブラウザで解釈

  • 転送されたコンテンツはWebブラウザがHTMLの内容を解釈し、タグによって与えられた意味を参考に、人間の見やすい形に整形して表示します。
  • 例）見出しの文章が大きめにに表示する事もWebブラウザで解釈している（h１タグ）

画像などの転送

  • 一度のコンテンツの転送で送られるファイルは一つです。HTMLの解釈の結果、画像などの他のファイルが必要になった場合は、再度Webサーバーにそのファイルの転送を要求し、転送してもらったファイルをHTMLの表示画面に埋め込みます。
  • 画像ファイルの転送にもHTTPやHTTPSが使われる。
  • 上記を繰り返し、全ての必要なファイルを揃えることができればWebページの表示が完了する。

静的ページ

  • 何度もアクセスしても毎回同じものが表示されるWebページ(企業や団体の紹介サイト、情報提供サイトなど)
  • いつも同じ情報を提供する必要があるため一般的に静的ページで構成される

動的ページ

  • アクセスした時の状況に応じて異なる内容が表示されるWebページを動的ページと呼びます。
  • GoogleやYahooのような検索サイトの検索結果が動的ページになります。
  • 掲示板サイト（ユーザーが書き込む事に内容が増えていくサイト）も動的ページになります
  • 会員サイト（ログインするユーザー毎に異なる情報）も動的ページになります

検索の仕組み

  • 検索サイトではユーザーから、Webブラウザを通じて、送られてくるデータ（検索文字列）それをもとにWebサーバーが検索処理を実施します。その後検索検索結果を表示するためのHTMLファイルをWebサーバが作成し、Webブラウザに送信します。
  • 上記を行うことでユーザーが入力した検索文字列に対し、毎回最新の検索結果の情報を返信できます。

動的ページの仕組み

CGI（Common Gateway Interface）

  • WebサーバーがWebブラウザからの要求に応じて、プログラムをを起動させるための仕組みをCGI
    （Common Gateway Interface）と呼びます。
  • 動的ページを利用する際は、Webプラウザは CGIによってプログラムが起動します。プログラムはWebブラウザから送信されてきたデータやWebプラウザ自身が持っているデータなどからHTMLファイルを作り出し、Webサーバーを通じて、Webブラウザに送信されます。
  • Webブラウザから同じ要求が送られてきても、Webサーバーからは毎回異なったコンテンツを送信することができます。

サーバーサイド・スクリプト

  • CGIから呼び出されるプログラムはサーバーサイド・スクリプトと呼ばれます。
    基本的にはどんなプログラミング言語を用いて記述しても大丈夫ですが、一般的には文字列扱いを得意とするスプリクト言語と呼ばれる言語で記述されます。
    具体的には、Perl、Ruby、Python、PHP、JavaScriptなどが挙げられます。

クライアントサイド・スクリプト

  • サーバーサイド・スクリプトに対し、HTMLに埋め込まれて、Webブラウザによって埋め込まれる際に実行されるものをクライアントサイド・スクリプトというものがあります。
    Webブラウザの設定によっては埋め込まれたプログラムが動かないこともあるため、使用する際には注意が必要
  • 主にJavaScriptがなどが挙げられる。

Webの標準化

  • HTMLのようなWebで用いられる技術は、Webの発展に伴って、機能拡張や新技術の開発が行われてきました。例えば、
  • HTMLは文章を表示するだけの機能だったが、現在では表示する色を変更したり、表組みを作ったり、音や映像を扱ったりする機能が追加されています。
  • 開発者が独自に拡張機能を独自におこなってしまうと、しっかりとした規定が決まらなくなり、しっかりとした規定が決まらず、開発者はどの機能までを処理するのが正しいのか分からなくなり、状態が表現できなくなるため、しっかりとした規定を決める必要がある。

Webで使える新しい言語

  • CSS（Cascading Style Sheet）
    • HTMLの表示スタイルを指定する言語
  • XML(Extensible Markup Language)
    • マークアップ言語
  • XHMTML（HyperText Markup Language）
    • マークアップ言語（XMLの仕様に従って定義しなおした言語）
      Webの標準化を進める団体が、Webの生みの親ティム・バーナーズ＝リーが創設したWC#（World Wide Web Consortium）です。
      W3CはHTMLの標準化したものは「勧告」という形で発表され、従うことは強制ではありません。
      しかし、「どのWebプラウザでも同じようにWebページが表示される」状態を実現するため、今やほとんどのWebサイトがW3C標準準拠しております。

Restful

  • REST(Representational State Transfer)とは、４つの原則からなるシンプルな設計を指します。
  • このRESTの原則に従って設計されたシステムをRESTfulなシステムと呼びます。
    • RESTの原則
      • 統一インターフェース
        • あらかじめ定義、共有された方法(WebであればHTTP)で情報がやり取りされる
      • アドレス可能性
        -　全ての情報が一意なURLの構文で示される
        -　接続性
        -　やりとりされる情報にはリンクを含めることができる
        -　ストレートレス
        -　やりとりは１回ごとに完結し、前のやり取りの結果に影響を受けない!

  • セマンティックWeb
  • ティム・バーナーズ=リーが提唱している構造で。Webページの情報に意味（セマンティック）を付け加えたものです。
  • コンピューターが自律的に情報の意味を理解して 処理できるようになることが期待できる
  • XMLという言語によって構成されている。（HTMLでは意味を付与することはできないため）
    • XMLの文章の中にRDFという言語で意味を記述し、言葉の相合関係などはOWLという言語で記述し、このような情報に関する意味を示す情報をメタデータと呼びます。W3Cで標準化が進められている。
  • セッティングWebでは、情報を検索する時の精度を上げることができたり、Webの中から特定の種類の情報を集めて活用することができるようになります。

Discussion