53. Introduction to the server side

Tatsuya Asami

11 min readSep 20, 2018

【所要時間】

1時間50分(2018年9月20日)

【概要】

サーバーの動作について

【要約・学んだこと】

What is server-side website programming?

Webブラウザはweb serversとHTTPを使って通信する。リンクをクリックしたり、検索を実行するとき、HTTPリクエストがブラウザからターゲットのサーバーに送られる。

リクエストには影響を受けるリソースを識別するURL、リクエストしたアクション(get, delete, post the resourceなど)、URL parameters( query stringを介して送られたフィールドvalue ペア)内でエンコードされた追加情報もおそらく含み、POST data(HTTP POST methodによって送られたデータ),として、もしくはassociated cookies も含む。

ウェブサーバーはクライアントのリクエストメッセージを待ち、到着したら処理し、HTTPレスポンスメッセージをWebブラウザに返す。レスポンスはリクエストが成功したかどうかを示すstatus lineが含まれる。(e.g. “HTTP/1.1 200 OK” for success)

リクエストに成功したレスポンスのbodyは、リクエストされたリソース(a new HTML page, or an image, etc…)を含む。これはWebブラウザに表示することができる。

Static sites

static siteは特定のリソースがリクエストされるたびに、サーバーから同じハードコードコンテンツをreturnする。ユーザーがページをナビゲートしたければ、ブラウザはHTTP”GETリクエストを指定したURLに送る。

サーバーはファイルシステムからリクエストされたドキュメントを検索し、ドキュメントと success status (usually 200 OK)を含んだHTTPレスポンスを返す。
もしファイルがなんらかの理由で検索できなければ、エラーステータスを返す(see client error responses and server error responses)。

Dynamic sites

dynamicウェブサイトは、応答する内容が必要な時のみ動的に作られる。通常ダイナミックウェブサイトHTMLページは、データベースからHTMLテンプレート(staticウェブサイトよりもたくさんの保存されているコンテンツを効率的に使うことができる)のプレースホルダーにデータが挿入されることで作られる。

dynamicサイトはユーザーに提供された情報、保管された環境設定によって、URLの異なるデータを返すことができる。また、レスポンスの返答の一部として、他の操作をすることも可能。(e.g. sending notifications)

dynamicウェブサイトをサポートするためのコードのほとんどは、サイーバー場で実行されなければいけない。このコードは”server-side programming” (or sometimes “back-end scripting”)として知られる。

staticウェブサイトでは、ブラウザはHTTPリクエストをサーバーに送り、サーバーがリクエストを処理し、適切なHTTPレスポンスを返した。

staticリソースのリクエストは、staticサイト同じ方法で処理される。(static リソース変わらないファイルのことだ。一般的にはCSS,JavaScript,Imagesなど)

dynamicリソースのリクエストはサーバーサイドコードに転送される。
dynamicリクエストでは、サーバーはリクエストを解釈し、データベースからリクエストされた情報を読みとり、検索したデータとHTMLテンプレートを結合し、作成されたHTMLを含んだ応答を返す。

Are server-side and client-side programming the same?

サーバーサイドプログラミングは、ケースによって大きく異なる。

異なる目的と関係がある。
JavaScriptを除いて、一般的にプログラミング言語とは同じではない。
環境によって内部では異なるシステム処理を実行する。

ブラウザで実行されるコードはクライアントサイドコードとして知られ、見た目やWebページのレンダー動作に関係している。
一方で、サーバーサイドウェブサイトプログラミングは、どのコンテンツを選び、リクエストに応答し、ブラウザに返すかに関わっていてる。サーバーサイドコードは送られたデータやリクエストの認証、格納のためのデータベースの使用、データの検索、リクエストに応じてクライアントに正しいデータを送るといった処理を扱う。

クライアントサイドコードはHTML, CSS, JavaScriptなどだ。Webブラウザ内で実行され、ほとんど、もしくは全く下層処理システムにアクセスしない。(ファイルシステムへの制限されたアクセスを含む)

ウェブディベロッパーはユーザーが使うブラウザをコントロールできない。ブラウザのクライアントサイドコード機能との互換性は一貫していない。クライアントサイドプログラミングの難しい部分は、ブラウザサポートの違いを適切に処理することだ。

サーバーサイドコードは、PHP, Python, Ruby, C#, NodeJSなど、たくさんのプログラム言語で書かれている。サーバーサイドコードはサーバー処理システムにフルアクセスできる。ディベロッパーはプログラミング言語(そして特定のバージョン)を選ぶことができる。

一般的にディベロッパーはウェブフレームワークを使ってコードを書く。ウェブフレームワークは機能、object、ルール、その他よくある問題の解決のためのデザイン構成、開発速度アップ、特定のドメイン内の様々なタイプの単純化などを行う。

改めていうと、クライアントもサーバーサイドもフレームワークを使う。ドメインは異なるので、フレームワークも異なる。
クライアントサイドのウェブフレームワークは、レイアウトや表現のタスクを単純化し、サーバーサイドのウェブフレームワークは、もしなかったら自身でやらなければいけない、たくさんのよくあるウェブサーバー機能を処理する。(セッションのサポート、ユーザーと認証のサポート、データベースへの簡単なアクセス、テンプレートライブラリなど)

Note:
クライアントサイドのフレームワークは開発速度アップのためによく使われるが、全て手書きで書くこともできる。実際に、簡単なサイトUIを書く時などでは、手書きの方が早い。

対照的に、サーバーサイドウェブアプリをフレームワークなしで書くことは考えにくい。HTTPサーバーのような重要な実装をするのは、Pythonのように最初からやるのは難しいが、Djangoのようなフレームワークは、便利なツールなどがセットになっている。

What can you do on the server-side?

サーバーサイドプログラミングは、とても便利だ。効率的に情報を個々のユーザーに配信でき、そのためよりよいユーザー体験を作ることができる。

Amazonではサーバーサイドプログラミングをプロダクトの検索結果や、クライアントの好み、過去の習慣に基づいた製品の提案、購入の簡素化などで使っている。

銀行では、アカウント情報の保存や、認証されたユーザーのみが観覧したり、処理をおこなえる。Facebook, Twitter, Instagram, Wikipediaなどはハイライト、シェア、興味のあるコンテンツのアクセス管理などを行なっている。

一般的に使われるサーバーサイドプログラミングの利点を、下記に記す。

Efficient storage and delivery of information

AmazonやFacebookがそれぞれの製品やポストを全てstaticページで作るのは実用的でない。

サーバーサイドプログラミングは、代わりにデータベースに情報を保管し、動的に構成し、HTMLや他のファイル(PDF, 画像など)を返す。適切なクライアントサイドのウェブフレームワーク(これによりサーバーの処理負担と、送られるデータ量が軽減される)によって、単にデータ(JSON, XML, etc.)を返すことも可能。

サーバーはデータベースからの情報を送ることを制限しない。ソフトウェアツールの結果を返すか、通信サービスのデータを返す。コンテンツは受け取っているクライアントのサービスのタイプのターゲットになりうる。

なぜなら情報はデータベースにあり、より簡単に共有でき、他のビジネスシステムで更新するからだ。(例えば、製品がオンラインか店舗で売られる時、店舗は在庫のデータベースを更新する。)

Note:
例えばAmazonのウェブサイトを見て何かを検索すると、ページの構成は結果が違っても変わらない。

100万ほどのvalueが来ることもあるが、データベースを使うことが、これらを保管し、効率的にシェアすることを可能としている。また、たったの1ページで情報を表現できるようコントロールされている。

Customised user experience

サーバーは、利便性やカスタマイズされたユーザー体験を提供するためにクライアントの情報を保管し使うことができる。例えば、多くのサイトでクレジットカードの情報を保管し、詳細を再び入力しないでいいようにすることがある。Googleマップでは現在地を保存し、ルート情報などを提供する。

ユーザーの習慣を深く解析することが、彼らの関心を予想するのに使われ、さらなるレスポンスや通知のカスタマイズが可能。例えば以前の訪問者のリストや、おそらく見たいであろう地図上の人気スポットを提供できる。

Note:
Google Mapsは検索や訪問履歴を保存している。よく行く場所や、よく検索される場所は、他よりもハイライトされる。

グーグルサーチ結果は以前の検索に基づいて最適化されている。

Controlled access to content

サーバーサイドプログラミングは、ディベロッパーがセッションを利用することを可能にする。基本的に、サーバーがサイトの現在のユーザーの情報を保管するのを許可するメカニズムで、その情報に基づき、異なる応答を送る。

これは例えば、ユーザーを知るためのサイトが以前にログインしたことがあり、Eメールや注文履歴のリンクを表示し、おそらくシンプルなゲームの状態を保管し、ユーザーがサイトにもう一度訪れたときに、終了したところから実行できるようにする。といったことを許可する。

Note:
定期購読モデルのニュースサイトを閲覧し、タブを開く。数日後にサイトを訪れると、定期購読の仕方のページにとばされ、記事にはクセスできないだろう。この情報はクッキーに保存されたセッション情報の一例だ。

Notifications and communication

サーバーはウェブサイト自身、Eメール、SMSやコミュニケーションサービスを通じて、一般、またはユーザー固有の通知を送ることができる。

例:

FacebookやTwitterが新しいコミュニケーションを知らせるためにemailやSMSメッセージを送る。
Amazonが定期的に以前買われた商品に似ているものや、観覧した関心がありそうな商品をおすすめするEメールを送る。
サーバーがサイト管理者にサーバーのメモリ不足や怪しいユーザーアクティビティの警告メッセージを送る。

Note:
最も一般的な通知は登録確認だ。新いEメールアドレスを作った際などに、Eメールを受け取り、登録確認を行う。

Data analysis

ウェブサイトはユーザーについてのデータを集めることができる。何を検索したか、何を買ったか、何を褒めたか、どれくらいの時間ページにいたのか。サーバーサイドプログラミングはこのデータの解析を元に、レスポンスを磨くのに使用される。

例えば、AmazonとGoogleはどちらも過去の検索や購買を元に広告を出している。

Note:
Facebookでは、いくつかの投稿が投稿時間順に並んでいない。いいね！が多かい投稿は最近の投稿よりも先に来る。

また、どんな種類の広告が表示されているか。Facebookのアルゴリズムや広告は謎が多いが、閲覧履歴や好みによって変わる。

【わからなかったこと】

特になし

【感想】

よくウェブプログラミングに関する情報でPHPという言語を目にしていたが、サーバーサイド言語ということを初めて知った。