えんたまの理

〜エンジニアを目指す男の成長日記〜

今日の学び:Webアプリケーションを構成する要素etc...

こんにちは、えんたまです。

昨日手も足も出なかったWebアプリケーションのマインドマップ

今日はそのWebアプリケーションについて学んだことを書いていきたいと思います。

 

そもそもWebアプリケーションとは?

ブラウザから使用可能なアプリケーション・サービスのこと
クライアント(使用者)側のブラウザ側とサーバー側のアプリケーションサーバなどのプログラムが、互いに通信を行うことでサービスを実現する


一般的なクライアントとサーバーの構成

f:id:masa-def91:20181113234221p:plain

画像出典:http://rucio.o.oo7.jp/VBhtml/HTML06.htm

クライアントでは、IEFirefoxなどのWEBブラウザが動作。 ブラウザがユーザとのインタフェースとなる

サーバでは、データの蓄積のためにデータベースサーバが動作

これらのデータを処理するロジックとして、アプリケーション (及び、それを動作させるプラットフォームとして、アプリケーションサーバ) が動作

サーバは、ブラウザから受信したリクエストに応じて処理をおこない、 ユーザに提示すべき内容などをレスポンスとしてクライアントに送信

 


Webアプリケーションの構成要素

・HTML/CSS

Webページの見た目を形づくるマークアップ言語と呼ばれるもの
HTMLで表示する文字や大まかな構成を決定
CSSで文字のフォントや大きさ、領域の高さや横幅を決定

 →HTML(エイチティーエムエル、HyperText Markup Language)は、ウェブページを作成するために開発された言語

 →CSSCascading Style Sheets、カスケーディング・スタイル・シート)とは、ウェブページのスタイルを指定するための言語

 

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

→ユーザーからリクエストがあったときにWebサーバー上で動作
 HTML文書を作り出すプログラム
 URLが示すHTMLファイルの名前やHTTPの情報をもとに
サーバーサイドスクリプトを実行してその場でHTMLを作成してWebブラウザーに渡す

 

クライアント-サーバ間の通信

WEBアプリケーションの場所を示したり、WEBアプリケーションに対して値を渡す場合にはURL(Uniform Resource Locator) が使用される

URLは、一般的に以下のような形式で表現される

絶対URL表現
http://(サーバ名)[:(ポート番号)]/(絶対パス)[?(クエリ)]

相対URL表現
(相対パス)[?(クエリ)]

絶対URL表現 とは、サーバの場所からパスまで、リソースの識別に必要なすべての情報をURLとして記述する方法 
ユーザがブラウザにURLを入力しリソースにアクセスする場合は、絶対URL表現によってリソースの位置が指定される 
また、あるリソースから別のサーバにあるリソースを参照する場合なども、絶対URL表現が使用される 

相対URL表現 とは、あるリソースを起点に別のリソースの相対的な位置をURLとして記述する方法 
主に、あるリソースから、同じサーバにある別のリソースを参照する場合に使用される

 

リソースとは•••ウェブサイトを構成するもの一般(文書(HTML,CSS)・画像・動画・音楽その他諸々のデータファイルなど)

 

 

HTTP
クライアント-サーバ間のリクエスおよびレスポンスは HTTP(HyperText Transfer Protocol) に則って表現される。
リクエスおよびレスポンスは、一般的に以下のような形式で表現される。
リクエス
(メソッド) (リクエストパス) HTTP/1.1
(ヘッダ名): (値)
...
(メッセージ本体)

レスポンス
HTTP/1.1 (ステータスコード) (ステータス文字列)
(ヘッダ名): (値)
...
(メッセージ本体)

リクエスト・レスポンスともに、大きく分けてヘッダ部とメッセージ本体の2箇所からなる
ヘッダ部にはリクエスト・レスポンスに関する情報が文字列で記述され、
メッセージ本体にはリクエスト・レスポンスのデータが記述される

 

今日やった事のメモ

Sublime Textの設定

変更した内容は「command + s 」で保存
以下のパッケージをインストール
HTML5 ・・・ HTMLタグの入力を補完

CSS Snippets ・・・ CSSの入力を補完

・TrailingSpaces・・・不要な半角、全角スペースに色を付ける

Ruby Debugger ・・・Rubyの構文をチェックし、間違った箇所を指摘