Chapter5 Webアプリケーションの基本（12〜14）
12. マッシュアップ
#マッシュアップとは
複数のWebサービスを組み合わせて新たなWebサービスを生み出すこと
例：位置情報から取得した地図情報と天気予報情報を用いてその日に着る服をお勧めするサービス
#マッシュアップの注意点
各サービスのWeb APIの公開範囲や仕様についてはサービスを提供する各社の判断に委ねられているため、もとになっているサービスがWeb APIの公開を終了するとそのサービスを継続することはできない。また、Web APIの仕様が変更になるとそれに合わせて自分のサービスを修正する必要がある。
13. CGI
#CGIとは
Webサーバーがクライアントからの要求に応じてサーバーサイド・スクリプトを起動するための仕組み
#データの渡し方
クライアントがCGIの場所（URL）にアクセスすることで、対象となるプログラムが起動される。このアクセスの際、クライアントからをデータを送信できる。
データをCGIプログラムに直接渡す方法が「コマンドライン引数渡し」になる。
14. サーバー間の連携
#CGIを利用しない場合
CGIを利用せずにサーバーサイド・スクリプトを動作させる場合、WebサーバーがAPサーバーにデータ処理を依頼し、APサーバーがサーバーサイド・スクリプトを動作させる流れになる。
#サーバー同士の通信
サーバー同士の通信においてもリクエストを送信する側がクライアント、レスポンスを返す側がサーバーとなり、IPアドレスとポート番号を指定してTCP/IP 通信を行う。
#利用するプロトコル
Webサーバーに置けるHTTPのように、APサーバーやDBMSでもそれぞれ利用するプロトコルが決まっている。
APサーバーでは、HTTPの他にAJPやWebSocketが利用される。
DBMSではそれぞれ独自のプロトコルが採用されている。そのため、APサーバーとDBMS間で通信を行うためのODBC（Open Database Connectivity）というAPIが開発されている。
by Raumi-
Chapter5 Webアプリケーションの基本（09〜11）
目次
09 Ajax
●同期通信
同期通信：クライアントとサーバーが交互に処理を行い、同調して通信を行うこと
∟欠点：レスポンス待ちが発生
●Ajax（Asynchronous JavaScript + XML）
Ajax：同期通信の欠点を補うために登場。
HTMLそのものではなく、更新に必要なデータのみをやりとりするため、
送信するデータの量が少なくなり、サーバーへの負担が抑えられる
非同期通信：Webサーバーからのレスポンスを待つ間もクライアント側であるJavaScriptが
レスポンスに左右されない箇所のHTMLを更新したり、ユーザーからの入力を
受け付けることができる
10 Webプログラミング
Webプログラミング：プログラミング言語を使ってWebアプリケーションを開発すること
●サーバーサイドのプログラミング
サーバーサイド・スクリプト：多くのクライアントのリクエストを素早く処理することが
求められるため、効率的な手順で処理を行うことや、
サーバーのメモリを無駄遣いしないことが求められる
●クライアントサイドのプログラミング
クライアントサイド・スクリプト：ブラウザごとの動作の違いの吸収、
（Ajaxであれば）非同期処理の実装が求められる
11 Web API
Web API
（Application Program Interface）：Webを通じてユーザーではなくプログラムが
直接サービスを利用するための窓口
●プログラミング同士のデータのやりとり
XML-RPC：XMLを送信することで処理の実行を要求するプロトコル
担当：やし
Chapter5 Webアプリケーションの基本（05〜08）
05 Webクライアント
#Webクライアントとは
ユーザーとWebサーバーとの橋渡しを行い、Webシステムを利用するためのプログラム
#Webブラウザとは
Webアプリケーションを利用するためのWebクライアントとして最も使われているもの
#クライアントプログラムとは
Webブラウザでは利用できないものや、十分に機能を活かせないものに関しては専用のクライアントプログラムになる。
パソコン用であれば、デスクトップアプリ、スマートフォンようであればスマホアプリと呼ばれる。
06 アプリケーションサーバー
#Webアプリケーションとは
Webアプリケーションの中核となる業務処理を行うプログラム
動作させる機器にはサーバーサイド・スクリプトを動作させるためのメモリ容量やCPU性能が重視される。
#セッション管理機能
アプリケーションサーバーはクライアントごとに発行したセッションIDを通信データに含めることによって、同じクライアントからの通信を一つのセッションと呼ばれる単位で判別し、各クライアントのログイン状況などを把握する。
クライアントのログインからログアウトするまでの一連の通信がセッションであると考えるとわかりやすい。
#トランザクション管理機能
セッションの中で行われる一連の作業の最小単位をトランザクションと呼ぶ。
トランザクションの中には複数の処理が含まれているが、HTTPの通信は1リクエスト・1レスポンスで成り立っているため、アプリケーションサーバーはそれら複数の通信を1つのトランザクションとしてまとめて管理する。
07 データベース管理システム
#データベース管理システムとは
DBMS（Database Management System）のこと
DBMSを搭載したサーバー機器を一般にDBサーバーと呼ぶ
データ消失への対策の重要
#冗長化とデータの同期
データベースにとって保持するデータの保全は非常に重要なため、DBサーバーも基本的に冗長化構成をとる。冗長化方法は「ミラーリング」、「レプリケーション」、「シェアードディスク」がある。
①ミラーリング・・・データの更新命令を受けたDBMSが複数のデータベースに対して同時に同じ更新処理を行うこと
②レプリケーション・・・データの更新命令を受けたDBMSが更新内容を別のDBMSに連携し、連携を受けたDBMSが同じ内容の更新を自身の管理するデータベースに実施する。
③シェアードディスク・・・データベースを共用の機器にもち、複数のDBサーバーからそれを更新します。
08 キャッシュサーバー
#キャッシュサーバーとは
リクエストに対するレスポンスを覚えておくプログラム
動画といったコンテンツのキャッシュをコンテンツキャッシュ、DBMSのデータ検索要求の結果のキャッシュがクエリキャッシュ
#キャッシュの有効期限
キャッシュには有効期限を設定して起き、いったん記憶してもその期間が過ぎればキャッシュサーバーからその情報をクリアし、再度新しい情報を記憶し直すようにしておく必要がある。
#CDN（Contents Delivery Network）
CDNは世界各地に分散して配置されたキャッシュサーバーの集合体
CDN全体として1台キャッシュサーバーように動作する。
by Raumi-
Chapter5 Webアプリケーションの基本（01〜04）
目次
01 Webアプリケーションの３層構造
Webアプリケーション：ネットワークを介してWebブラウザ上で動作する
アプリケーション。
基本的に３層構造（３層アーキテクチャ）になっている
３層構造 ：アプリケーションの構造の考え方のひとつ。
「プレゼンテーション層」「アプリケーション層」
「データ層」に分かれる
プレゼンテーション層：UIとなる
アプリケーション層：業務処理を行う
データ層：データ処理や保管を行う
●負荷分散
複雑な処理→アプリケーション層とデータ層の負荷↑
アクセス集中→プレゼンテーション層の負荷↑
３層アーキテクチャでは層別に動作させるサーバー機器を分けることが可能
●改修範囲の限定
層別に分かれていると改修範囲が小さくなる
02 MVCモデル
MVCモデル：アプリケーションの構造の考え方のひとつ。
Model：アプリケーションの扱うデータと業務処理
View：ユーザーへの出力
Controller：必要な処理をModelやViewに伝える
●３層アーキテクチャとの違い
混同しやすいが、根本的に異なる
３層アーキテクチャ：階層構造の最上層「プレゼンテーション層」と最下層「データ層」が直接やりとりをすることはない
MVCモデル：各要素が相互にやりとりする
●MVCモデルの利点
開発や改修の分業が容易になる
要素ごとに個別の開発が可能
機能追加が容易
03 フレームワーク
フレームワーク：一般的な処理の流れを「雛形」として準備したもの。
Webアプリケーションごとの独自の内容を開発者が埋めることで
プログラムが開発できる
メリット：プログラム開発の手間を削減できる
比較的容易にプログラムの開発ができる
デメリット：雛形はMVCモデルのような特定のパターンで作られているため、
フレームワークを用いた開発では、その雛形に沿う形のプログラムしか
作れない
●いろいろなフレームワーク
Spring Boot
Cake PHP
04 Webサーバー
Webサーバー：Webアプリケーションにおいて、
Webクライアントに対する窓口の役割を果たすプログラム
冗長化：１台が故障しても別のサーバーだけでサービスが続けられるようにすること
●求められるサーバー機器の性能
利用者が多いWebアプリケーション：リクエストの量が増える
→レスポンス処理の速さが要求される
静的ページのリクエストが多い場合：静的ページを読み込むためのハードディスクの読み取りが速く、ハードディスクの読み取りをサポートするメモリの容量が大きいこと
動的ページのリクエストが多い場合：アプリケーションサーバーへのデータ連携処理を速くするため、CPUの性能が高いこと
●静的コンテンツの配置
静的コンテンツはWebサーバーと同じサーバー機器上に置かなくてもよい
別の機器であっても、Webサーバーからアクセスできる場所にあれば問題ない
△別のサーバー機器上にある場合、ネットワーク越しにコンテンツを取りに行くためレスポンスが遅くなる
複数台の機器でWebサーバーが動作しているときは、機器間で同じコンテンツを持つようにコンテンツの同期を行う方法を考える必要がある
担当：やし
Chapter4 Webのさまざまなデータ形式（10〜11）
#10 音声・動画配信
##エンドコードとデコード
音声・動画ファイル、画像ファイルと同様に、データを圧縮したうえで利用する。
圧縮することをエンコード、再生するために伸張することをデコード
データ圧縮にはコーデックと呼ばれるソフトウェア
##ダウンロード配信
音声・動画の配信方法は、大きく分けて2種類あります。
ダウンロード配信・・・Webサーバーからファイルをダウンロードしてもらい、それを再生する
プログレッシブダウンロード配信・・・ユーザー側で一度ファイル全体をダウンロードしてから
再生する方法と、ファイルをダウンロードしながら再生する方法
※どちらの方法も配信したファイルはユーザー側に残ってしまうため、著作権のあるデータの配信には向いてない。
##ストリーミング配信
ファイルを細かく分割し、細切れにしたデータをユーザーに配信して再生する。
再生したデータは都度削除されてしまうので、著作権の問題は解決する。
#11 メディアタイプ
##メディアタイプの種類
HTMLやCSS内で「メディアタイプ」として指定することができる。
・screen パコソンのスクリーン
・tty 文字幅が固定の機器
・tv テレビ
・projection プロジェクター
・handheld 携帯機器
・print プリンター
・braille 点字ディスプレイ
・embossed 点字プリンター
・aural、speech 音声合成機器
・all 全てのメディア
##機器ごとの表示の指定方法
HTMLやCSSに「このメディアタイプにはこの表示スタイル」という情報を
あらかじめ含めるおくことが可能
担当：らうみー
Chapter4 Webのさまざまなデータ形式（7〜9）
07 JSON〜JavaScriptから生まれた汎用データ形式
・JSON（JavaScript Object Notation）……構造化したデータを表すためのデータ記述言語の一種
※JavaScript専用ではない
・JavaScript以外にも多くのプログラミング言語がJSONの読み書きに対応している
●データ構造を表すのに使われる
JSONを利用することで、データを木構造で表現することができる
テキストにタグを付けることでデータの構造を表現するXMLと違い、JSONではデータを階層的に並べることで構造を表現する
・XML
・データとして文字列しか表すことができない
・すべての情報にタグを付ける必要があるため、データサイズが大きくなりがち
・テキストの任意の場所にタグ付けができる
・JSON
・データとして文字列以外に、数値や空を意味するデータなども扱うことができる
・データを括弧で囲んで構造を表すので、データファイルは小さめ
・タグによるマーク付けがないため、人間には読みにくいデータとなる
●Web上でのデータのやりとりによく使われる
・JSONはJavaScriptの書式に従っている
・JavaScriptで書かれたプログラムではJSONをそのままJavaScriptとして読み込むことができる
→XMLのようにDOMを利用する必要がない
・タグ名などでデータサイズが大きくなりがちなXMLよりもデータが小さく、そのぶんネットワークの転送速度が速くなる
→JavaScriptがよく利用されるWebの世界では選択されやすいデータ形式となっている
08フィード〜Webサイトの更新情報を配信する〜
フィード……Webサイトなどの更新履歴を配信するためのファイル
ブログやニュースサイトなど、頻繁に更新が発生するWebサイトで使われ、ユーザーはフィードをチェックすることでWebサイトにアクセスすることなく、最新の更新情報を確認することができる
フィードの中身……ハイパーリンクの集まりで、Webページの全体または一部が含まれている
フィードでは古くからある形式
現在は
という2つの系列に分裂して開発が進められている
RSS1.0……構文が複雑な反面、表現力が豊富
RSS2.0……豊富な表現力を放棄し、シンプルな構文を実現するという特徴がある
分裂して開発が進められるRSSの代わりになるものを作ろうという発想から、有志によりXMLをベースとしたAtomという形式も構築されている
Web上のフィードを取得し、管理するためのソフトウェアをフィードリーダー、もしくはフィードアグリゲーターと呼ぶ
フィードの形式としてRSSが先行してきたことから、RSSリーダーと呼ばれることも多い
複数の登録されたフィードを定期的にチェックし、
ポッドキャスト……Webサーバー上に音楽や動画を配置し、RSSを通してWeb上に公開することで音楽をインターネット上で配信する手法。RSSを使うことで、ブログのように手軽に音楽や映像を公開することができる
09 マイクロフォーマット
マイクロフォーマット……HTMLやXHTMLで記述されたWebページの中に意味を表現する記述を埋め込むための書式
担当：やし
Chapter4 Webのさまざまなデータ形式（4〜6）
●HTMLの体裁を記述
●WEBサイト内での共用
●クライアントごとに表示を変える
スクリプト言語：動的処理に使われる
クライアントサイド・スクリプト：分離してもしなくてもよい
ECMAScript：標準化されたJavaScript
Perl（パール）：文法の自由度が高く扱いやすい
Python（パイソン）：読みやすく簡潔なプログラムが書ける
サーバーサイド・スクリプトとして使うことができるのが特徴
06 DOM〜スクリプトからHTMLを操作する仕組み
●対象となる文書を階層構造として扱う
DOM：対象となる文書の各要素を抽出し、それらを階層構造として扱う。「DOMツリー」というツリー構造となっている。
枝葉部分は「ノード」と呼ばれる
担当：やし
