はじめに


本教材の目的

21世紀の現在,インターネット(The Internet)は,ビジネスから私生活に至るあらゆる目的で,通信可能なあらゆる場所で使われています。

そのためインターネット上でサービスを提供できるWebアプリケーションは必要不可欠なものとなっています。

この教材は,HTML,CSS,JavaScript,PHP,MySQL等を活用した動的Webページの作成方法を学び,複雑なWebアプリケーションを作成できるスキルを身につけることを最終目標としています。

Webアプリケーションの概略

ここではWebアプリケーション(Web Application),ネイティブ(native) アプリケーションとは何か,またその仕組みについて説明します。

端的には次のように分類されます。

この二つのアプリケーションの違いをソフトウェア階層図として表現したものが下記になります。

上の図はWebアプリケーションとネイティブアプリケーションの仕組みの違いを表したものです。

ネイティブアプリケーションはハードウェア及びOS上で動作するのに対し, WebアプリケーションはWebサーバ上に設置され,ブラウザからの要求を受けてサービスを提供します。 こちらはWebサーバソフトとブラウザをLANで結び,情報をやり取りすることで成り立っています。

Webアプリケーションの長所・短所

Webアプリケーションはブラウザと(Web)サーバとの協調によって構築されたサービスなので,次のような長所と短所があります。

 
Webアプリケーションの長所
   
― ブラウザとサーバでコンピュータ資源を分担しあえる
   
― ダウンロードやインストールをする必要がない
  
― ひとつのWebアプリでいろいろな端末(OS)に対応させることができる
 
Webアプリケーションの短所
   
― ネイティブアプリケーションに比べて処理が遅い
   
― 端末の機能(例:スマートフォンのカメラなど)を活かしづらい

ネイティブアプリケーションは,単独のハードウェア上で動作するシンプルなソフトウェアなので,Webアプリケーションと比べると,次のような長所と短所があります。

 
ネイティブアプリケーションの長所
   
― 処理が速い
   
― 端末の機能を活かしやすい
 
ネイティブアプリケーションの短所
   
― 端末やOSによって別々に開発しなければならない場合がある

Webアプリケーションとネイティブアプリケーションには,以上のような特徴があり,作成するシステムの内容によって使い分ける必要があります。この教材ではWebアプリケーションについての勉強をしていきます。


主要なWebサーバソフトウェアとブラウザ

Web(World Wide Web)というThe Internet上のサービスが登場して以来,Webサーバとブラウザは,激しいシェア争いを経て,数種類のソフトウェアのみが生き残り,今日もバージョンアップをし続けています。ここでは,主要なWebサーバソフトウェアとブラウザについて簡単に紹介します。

Webサーバ側で動作する主要ソフトウェア

Webサーバ側では,Webサーバに加え,スクリプト実行コア,RDBMS(Relational DataBase Management System)というソフトウェアが必要になります。

上記3種類の主要ソフトウェアを,既存のOSと組み合わせて,例えば,下記の図に示すようなWebサーバのソフトウェアスタック(階層)が構成できます。

近年は,スクリプト言語パッケージに,簡易的なWebサーバ機能を備えた

等の開発環境の利用も進んできました。この場合は,下記の図のように,それぞれのスクリプト言語環境下で動作するWebサーバが同梱されていることになります。

これ以外にも,Javaを中核としたWebアプリケーションも官公庁を中心に導入されていますが,この教材では扱いません。

主要Webブラウザとレンダリングエンジン

Webページそのものは,下記の3つの要素で構成されたテキストファイル(+画像・動画ファイル等)となります。

HTMLに記述されたDOM構造,CSSで指定されたデザイン,そしてJavaScriptで規定された動的な動作を一手に引き受けて画面に表現するソフトウェアがWebブラウザ(Web browser)です。

現在,PCやスマートフォンで使われている主要な(Web)ブラウザは,Chrome, Firefox, Internet Explorer(もしくはEdge)です。iPhoneではSafariがデフォルトで導入されています。

上記は3つの主要ブラウザの表示画面ですが,どれも同じWebページを閲覧しているにもかかわらず,微妙に画面表示が異なっていることが分かります。ユーザーの設定でどうとでも変更はできますが,デフォルト状態でもこのような違いが出るのは,画面表示を司るレンダリングエンジンがそれぞれ異なっていることにも起因します。

Webアプリケーションを作る際には,ブラウザ間の画面表示の違い,サポートしているHTML, JavaScript, CSSの違いについても気にかけるようにして下さい。


XAMPP for Windowsのインストール

本教材では,Webサーバ側で動作するWebアプリケーション作成に際しては,XAMPP for Windowsを利用したApache + PHP + MySQL(MariaDB)によるWebプログラミング開発環境を利用します。基本的にはバックアップのしやすいポータブル版を使っていきますので,必ず適当なドライブのトップフォルダに"xampp"をインストールして下さい。インストール方法はこちらを参照して下さい

また,今後作成する全てのテキストファイルやスクリプトは,UTF-8(8bit単位のUnicode)を使用して記述します。UTF-8を使用できる最新のWeb開発用のエディタ(下記参照)を使用するようにして下さい。

SPAとハイブリッドアプリケーションについて

ブラウザ側のみで動作が完結するWebアプリケーション,特に,シングルページアプリケーション(SPA, Single Page Application)を作成するにあたっては,UTF-8が使用できるテキストエディタと,動作確認用のブラウザがあれば,HTML+CSS+JavaScriptの開発は可能となりますので,最小限の環境としては十分です。

近年は,ブラウザのレンダリングエンジンを組み合わせたJavaScript開発環境,Node.jsの利用が盛んになっており,SPAにこのNode.jsのレンダリングエンジンを組み合わせてAndroidやiOS用のネイティブアプリケーションの開発ができる,ハイブリッドアプリケーション手法が注目されています。その際には,エディタとブラウザに加えて,Apache Cordovaのようなハイブリッドアプリケーション開発環境や,Android Studioのようなスマートフォンアプリの開発環境が必要になります。Windows環境での環境構築方法についてはこちらを参照してください。


Copyright (c) 2014-2018 幸谷研究室 @ 静岡理工科大学 All rights reserved.
Copyright (c) 2014-2018 T.Kouya Laboratory @ Shizuoka Institute of Science and Technology. All rights reserved.