introduction to web development 1

24
Introduction to Web development 1 Hideaki Honda

Upload: hideaki-honda

Post on 18-Jul-2015

4.178 views

Category:

Technology


1 download

TRANSCRIPT

Introduction to Web development 1

Hideaki Honda

Page 2

contents

Webアプリケーションとは何か?

どのように発展してきたのか見てみよう!

Webアプリケーションを構成する要素を理解しよう!

Webアプリケーションとは何か?

デスクトップアプリケーション

普段良く使われているExcelやWordなど

がこれにあたります。CDやインストーラ

から「インストール」をして、初めて使う

ことが出来るようになります。インストー

ルをしたPCでのみ利用可能です。

Webアプリケーション

代表的なものでは、Google MapやYahooの

乗換案内サービスなどがあります。

「インストール」をすることもないので、

普段はアプリケーションだと意識するこ

とは無いかもしれません。ブラウザさえ

あれば、どこからでも利用可能です。

Page 4

Webアプリケーションとは何か(1)

アプリケーション(ソフトウェア)には、大きく以下の2つに分かれます。

インストール

Page 5

Webアプリケーションとは何か(2)

デスクトップアプリケーション Webアプリケーション

処理しているところ 作業しているPC サーバ

画面の表示 OS上で表示 Webブラウザ上で表示

インストール 必要 不要

インターネットへの接続 不要 必要(※)

デスクトップアプリケーションとWebアプリケーションの違いをまとめると、 以下のようになります。

※最近では、Gmailのようにオフラインに対応しているものも増えています。

PC・ブラウザの性能向上とともに、デスクトップ・Webアプリケー

ションの両方の形態を取る製品も増えてきています。

MicrosoftのOfficeも、昨年に「 Office 365 」という製品名で、Webアプリケー

ション版がリリースされています。

どのように発展してきたのか見てみよう!

Page 7

Webの基礎 ・クライアント・サーバモデルとは

まずはじめに、Webの世界では大きな前提があります。

それは、クライアントとサーバが存在しているということです。

この仕組みを、「クライアント・サーバモデル」と呼びます。

クライアント側(サイド)、サーバ側(サイド)のそれぞれで技術的な発展を

遂げていっているのです。

Page 8

Webの基礎 ・クライアントサイドについて

では、クライアントを見てみましょう。 クライアントとは、「アプリケーションを使う側」のことを指します。 実際にアプリを使うのは人間ですが、システム的に見ると、「Webブラウザ」を介してアプリケーションが動作するので「Webブラウザ」がクライアントということになります。 ブラウザは、ユーザからの操作を受け付け、サーバに情報の要求を行います。 Webブラウザも1種のアプリケーションで代表的なものでは、IEやFirefox等があります。 また、単にクライアントと呼ぶこともあれば、「Httpクライアント」「Webクライアント」と呼ぶこともあります。

Page 9

Webの基礎 ・サーバサイドについて

では、サーバを見てみましょう。 サーバとは、「アプリケーションを提供する側」のことを指します。 サーバには「Webアプリケーション」が入っていて、クライアントから要求(リクエスト)があった時に「Webアプリケーション」が動いて、応答結果(レスポンス)を返します。 クライアントが要求している結果(ファイルやデータ)を作成するのは、「Webアプリケーション」になりますが、クライアントとのやり取りを行うために「Apache」や「IIS」などのサーバ用アプリケーションが必要となります。このアプリケーションを、「Httpサーバ」や「Webサーバ」と呼びます。

Page 10

Webの基礎 ・クライアントとサーバを繋ぐHTTPについて

クライアントとサーバがあるだけでは、Webアプリケーションは動きません。 その間にはインターネットで繋がっていて、通信が行われます。 その通信では、どのように情報をやりとりするかという取り決めが必要に なり、この取り決めを「通信プロトコル」と呼びます。 Webアプリケーションでは「HTTP」が使用されます。 ※HTTPについては、内容が大きいので、また別の機会に詳細を説明します。

Page 11

クライアント技術の発展について(1)

クライアント技術の発展は、ユーザの操作性をいかに向上させるかに力を注がれてきました。多くの技術が生まれ、定着したもの、そうでないもの様々です。

HTML

applet

Flash

HTMLだけでも画面は作れますが、操作性が良いとは言えません。 それは、もともとが文章のやりとりをするために考えだされたものだからです。 また、HTMLを解釈するブラウザの実装がベンダごとに異なるため、 同じHTMLでも表示が異なることが良くあり、問題となっています。

ブラウザ上で動くJavaのプログラムです。グラフィカルな表現や複雑な ロジックを組むことも出来るのですが、発表された当時のネット環境では 満足に動作させることが出来ず、いまひとつ普及しませんでした。

きれいなアニメーションを作れるとあって一時ものすごく人気がありました。 Adobeが開発していて、動作にはブラウザにプラグイン(Player)が必要となり ます。ここ最近では、脱Flashを図るWebサイトも多くなっており衰退傾向に あります。その理由は、後述するHTML5の登場により、HTMLそのものでも 十分な表現が出来る様になりつつあるためです。モバイルの分野では、 iPhoneがFlash非対応としたことや、Adobeがモバイル向けPlayerの開発を 中止したことにより、とても厳しい状況にあります。 今後は、Webだけでなくゲームのアニメーションにも利用されていきそうです。

Page 12

クライアント技術の発展について(2)

リッチクライアント

HTML5

シンクライアント

非常に多くの技術が生まれています。大きく分けると3つのタイプに分かれます。 1. Javascript型・・・Ajax(prototype.js、jQuery.jsなど) 2.プラグイン型・・・Flex、Silverlight、JavaFXなど 3.インストール型・・・AIR、Curlなど いずれも高い表現力、操作性を持たせることが出来ますが、そのための 開発(コーディング)が当然必要になってきます。 高品質なWebアプリケーションを開発するためには外せない技術で、 HTML+αという位置づけになっています。

Webクライアント(ブラウザのこと)での操作性を高めるのではなく、 ユーザが使用するPCのリソースを必要最低限にして、ネットワークを介して サーバ上でアプリケーションを使用する方法です。クライアントPCに データを保持しないことによりセキュリティ向上につながります。 ※技術の発展というよりは、方式の進化といった気がします。

HTMLのVer.5にあたるものです。まだ仕様は確定していませんが、 先行でサポートしているブラウザもあります。徐々にFlashからHTML5 への転換が進んでいることからわかるように、HTMLだけでもリッチな画面を 作成できるよう進化を遂げています。Webの世界では、今一番ホットなテーマと言えるでしょう。詳細はまた別の機会に。

Page 13

サーバ技術の発展について

サーバ技術の発展は、いかに効率良く開発して動かすかというところが ポイントになります。

CGI

Servlet/JSP

フレームワーク

クライアントからの要求を受けて、CやPerlなどで書かれたプログラムを 動かすための仕組みです。今でも掲示板やアクセスカウンタなどに、 利用されています。ただ、開発のし難さや、サーバのリソースを消費しやすい といった問題から、大規模なシステムには向きませんでした。

CGIの問題点を補うことと、開発言語であるJavaの利点とあいまって、 サーバサイド技術といえば、Servlet/JSPと言われるぐらい主流となっています。 ただ、動作させるには、APサーバ(Tomcatが有名)の構築が必要となるなど 敷居が高く、個人レベルというよりは企業システム向けと言えます。

ServletやJSPだけでも開発は出来ますが、もっと楽に効率良く開発出来ないか という目的で考えだされたのが、フレームワークです。フレームワークが アプリケーションのベースとして存在していて、必要な部分だけを開発して いけば、より短い時間で作ることが出来るようになる、という仕組みです。 実際はフレームワークを習得する必要が出てくるのでそう上手くはいきません。 Javaの世界では、StrutsやSpringが良く使われています。

PHP/Ruby より簡単に開発するために、比較的容易に技術習得出来るPHPやRubyでの 開発も増えています。ただ、深刻なセキュリティホールが見つかるなど、 セキュリティ面での課題もあるため、企業システムの分野では、いまひとつ といった感じです。

Page 14

Webアプリケーションを構成する技術

CSS

Ajax

Servlet/JSP

Curl

PHP

SQL

Framework

Ruby

Flash

AIR

.Net

Applet

DBMS

HTML

CGI

JavaFX

※私が主観で決めた、技術の配置図です。

Webアプリケーションを構成する要素を 理解しよう!

Page 16

Webアプリケーションの構成を理解する 静的コンテンツの提供

ここまでで、クライアントとサーバが存在していて、それぞれに様々な 技術があって、成り立っているということが分かって頂けたと思います。 ではここからサーバサイドについてより詳しく見ていきましょう。

<静的なコンテンツを提供する場合のサーバ構成> あらかじめ用意しておいたホームページ(これを静的コンテンツと呼ぶ)を、 表示させたい(提供したい)場合には、Webサーバがあれば事足ります。 Webサーバ上にコンテンツとなるファイルを置いておき、アクセスをすれば ブラウザにはそのコンテンツが表示されるようになります。

Page 17

Webアプリケーションの構成を理解する 動的コンテンツの提供とAPサーバの登場

動的なコンテンツとは、ユーザの入力したデータを解釈して、動的に生成された コンテンツのことを言います。Google Mapを例に考えてみましょう。 住所や地名を入力すると、動的にページを変化させて、目的の場所を表示してくれます。これは、サーバサイドでプログラムが動いて、処理した結果が表示されているのです。

<動的なコンテンツを提供する場合のサーバ構成> これまではWebサーバだけでしたが、新たにAP(アプリケーション)サーバが登場します。 このサーバに、Webアプリケーションを置く(※)ことにより、プログラムを動かせるのです。 APサーバの詳細は、後述の「APサーバの代表的なソフトウェア」を参照してください。 ※サーバにWebアプリケーションを配置することを「デプロイする」と言います。

Page 18

Webアプリケーションの構成を理解する データを保存しておくためのDBサーバ

Webアプリケーションが高度化してくると、使用するデータも増えていきます。 そこで登場するのが、DB(データベース)サーバです。 DBサーバにデータを蓄積することにより、Webアプリケーションから効率よく 活用することが出来るようになります。

<DBサーバを使用する場合のサーバ構成> 下の図のように、「Webサーバ」「APサーバ」「DBサーバ」の3つで構成されていることを、 「三層構成」と呼ばれ、最も一般的な構成です。システムの規模を変更するときには、 各層のサーバを増やすことで、処理を分散させたり、故障に備えやすくなります。

Page 19

Webサーバについて

製品名 開発元 ライセンス 特徴

Apache HTTP Server

Apache Software Foundation

Apache License 世界中で最も良く使われていて、市場の7割を占めています。個人レベルから大企業まで幅広く利用されています。オープンソースであるため、無償で利用可能です。 最新バージョンは、2.4系です。

IIS (Internet Information Services)

Microsoft 匿名アクセスであれば必要無し

市場では2割のシェアを占めています。 設定のハードルが高いため、企業や上級ユーザに人気です。最新バージョンは、7.5系です。

役割 Webクライアントからの要求に応じてデータを送信する役割を担う。 補足 ※Webサーバという呼び方ですが、ApacheやIISなどのソフトウェアを 指すこともあれば、それが稼働するコンピュータを指すこともあります。

Webサーバの代表的なソフトウェア

Page 20

APサーバについて

製品名 開発元 ライセンス 特徴

Tomcat Apache Software Foundation

Apache License オープンソースであるため、無償で利用可能です。インストールが簡単で使いやすい。 最新バージョンは、7.0系。

Oracle WebLogic Server

Oracle プロプライエタリ 各種設定やデプロイを画面から行うことができ、操作が分かりやすいです。 最新バージョンは、12.0系。

JBoss Red Hat GNU LPGL オープンソースであるにもかかわらず、 商用サポートが受けられる点が人気となっています。動作も軽快です。

GlassFish Oracle CDDL ,GNU GPL 小規模から大規模まで拡張性が高い。 商用サポートを受けることが可能。

WebSphere IBM プロプライエタリ 大規模システムでの実績が高く、多くの企業で採用されています。

役割 プログラムの実行とデータベースへの接続機能を提供する。 Webサーバほどの高機能ではないが、Webサーバとしての機能も持つ。

APサーバの代表的なソフトウェア

Page 21

DBサーバについて

製品名 開発元 ライセンス 特徴

Oracle Oracle プロプライエタリ

幅広いプラットフォームをサポートするRDBMS。商用DBとして最大シェアを誇る。 最新バージョンは11g。

SQL Server Microsoft Microsoft EULA .Netとの親和性が高く、小規模から大規模まで広く使うことが出来ます。

DB2 IBM プロプライエタリ 多くのプラットフォームで動作します。

Netezza IBM プロプライエタリ 速度がウリのRDBMSです。

PostgreSQL PostgreSQL Global Develo pment Group

BSD MySQLと同じオープンソースのDBですが、 日本で特に人気が高く、海外ではあまり 使われていないようです。

MySQL Oracle GPL オープンソースのDBとして、世界中で人気があります。

役割 データの保持と管理(取得・追加・削除・更新)を担う。

DBサーバの代表的なソフトウェア

Page 22

Webブラウザについて

製品名 開発元 特徴

Internet Explorer Microsoft Windows環境の標準ブラウザ。 シェアNo1のブラウザです。

Google chrome Google 非常に軽快な動作で使いやすいです。 アドオンをいれることで機能を拡張できます。

Firefox Mozilla Foundation IEに続いて2番目のシェアを占めています。 様々なカスタマイズが可能です。

Safari Apple Mac環境の標準ブラウザ。 開発者向けの機能が充実しています。

Opera Opera Software ASA

パソコンだけでなく、ゲーム機やテレビなど 多くのプラットフォームで利用されています。

Webブラウザの代表的なソフトウェア

役割 ユーザからの操作を受け付け、Webサーバへのリクエスト送信、画面の 描画等を担っている。

終わりです。 次は、 「Webアプリケーションの中身」 「HTTPとは?」「セキュリティ対策」 「アーキテクチャ」・・・ を予定しています。

Page 24

参考書籍

「プロになるためのWeb技術入門」小森 裕介 技術評論社

「HTTP & Web」日経BP社