SIC - 上級プログラミング2(第 回)masaomi/java2/adv_prog2_07.pdfAjaxやWebsocket...

39
上級プログラミング2(第7回) 工学部 情報工学科 木村昌臣

Transcript of SIC - 上級プログラミング2(第 回)masaomi/java2/adv_prog2_07.pdfAjaxやWebsocket...

Page 1: SIC - 上級プログラミング2(第 回)masaomi/java2/adv_prog2_07.pdfAjaxやWebsocket WebブラウザとWebサーバー間のページ遷移な しの通信を利用したプログラムを実現

上級プログラミング2(第7回)

工学部 情報工学科

木村昌臣

Page 2: SIC - 上級プログラミング2(第 回)masaomi/java2/adv_prog2_07.pdfAjaxやWebsocket WebブラウザとWebサーバー間のページ遷移な しの通信を利用したプログラムを実現

今日のテーマ

Webアプリケーションとは Webアプリケーションとはなにか

Webアプリケーションの仕組み

三層アプリケーション

サーブレット、JSP、JavaBeans

MVCモデル

Webアプリケーションの環境構築 Webサーバー(Apache)

Webアプリケーションサーバー(Tomcat)

Page 3: SIC - 上級プログラミング2(第 回)masaomi/java2/adv_prog2_07.pdfAjaxやWebsocket WebブラウザとWebサーバー間のページ遷移な しの通信を利用したプログラムを実現

Webアプリケーションとは

Page 4: SIC - 上級プログラミング2(第 回)masaomi/java2/adv_prog2_07.pdfAjaxやWebsocket WebブラウザとWebサーバー間のページ遷移な しの通信を利用したプログラムを実現

Webアプリケーションとはなにか

実際の処理を行うサーバーとのデータのやり取りやユーザーインターフェイスとしてWeb技術を利用したもの

Webブラウザ Webサーバー

Webアプリケーションサーバー

HTTP

Page 5: SIC - 上級プログラミング2(第 回)masaomi/java2/adv_prog2_07.pdfAjaxやWebsocket WebブラウザとWebサーバー間のページ遷移な しの通信を利用したプログラムを実現

Webアプリケーションの仕組み

WebブラウザWebサーバー

Webアプリケーションサーバー

HTTP

アプリケーションが動作

(Javaプログラム等)

ユーザーインターフェイス

HTTP-アプリケーション間インターフェイス

接続には専用のモジュールが必要

Page 6: SIC - 上級プログラミング2(第 回)masaomi/java2/adv_prog2_07.pdfAjaxやWebsocket WebブラウザとWebサーバー間のページ遷移な しの通信を利用したプログラムを実現

三層アプリケーション

WebブラウザWebサーバー/

Webアプリケーションサーバー

HTTP

DBサーバー

JDBCなど

第一層 第二層 第三層

ビジネスロジックプレゼンテーション

Page 7: SIC - 上級プログラミング2(第 回)masaomi/java2/adv_prog2_07.pdfAjaxやWebsocket WebブラウザとWebサーバー間のページ遷移な しの通信を利用したプログラムを実現

【参考】従来のクライアント・サーバーアプリケーション(二層アプリケーション)

サーバー

DBサーバー

第一層 第二層

クライアント

ビジネスロジック

プレゼンテーション

Page 8: SIC - 上級プログラミング2(第 回)masaomi/java2/adv_prog2_07.pdfAjaxやWebsocket WebブラウザとWebサーバー間のページ遷移な しの通信を利用したプログラムを実現

従来のクライアント・サーバーモデルと比べて三層アプリケーションモデルのうれしい点

表示(プレゼンテーション)とデータ処理(ビジネスロジック)の分離

ブラウザさえあればクライアントをインストールする必要がない

(それゆえに)クライアントの更新が不要

データベースなどの基幹システムに対してクライアントから直接アクセスすることがない(アクセスはWebアプリケーションサーバのみ)のでセキュリティが向上

Page 9: SIC - 上級プログラミング2(第 回)masaomi/java2/adv_prog2_07.pdfAjaxやWebsocket WebブラウザとWebサーバー間のページ遷移な しの通信を利用したプログラムを実現

サーブレット(Servlet)

Webアプリケーションサーバーで動作するJavaプログラム

HttpServletクラスを継承して作る

次の三つのパッケージはインポートする必要あり

java.io.*

javax.servlet.*

javax.servlet.http.*

HttpServletRequestで入力、HttpServletResponseで出力を行う

Page 10: SIC - 上級プログラミング2(第 回)masaomi/java2/adv_prog2_07.pdfAjaxやWebsocket WebブラウザとWebサーバー間のページ遷移な しの通信を利用したプログラムを実現

JSP

Java Server Page

HTMLにJavaプログラムによる処理を付け加えたもの

サーブレットは最終的にHTML形式で出力するが、JavaのプログラムではHTMLのレイアウトの調整を詳細に行うことは困難

同様のことを、HTMLをベースにし、必要な処理を付け加えることにより実現したものがJSP

Page 11: SIC - 上級プログラミング2(第 回)masaomi/java2/adv_prog2_07.pdfAjaxやWebsocket WebブラウザとWebサーバー間のページ遷移な しの通信を利用したプログラムを実現

JavaBeans

いろいろなWebアプリケーションで共通に使われるJavaクラス群をモジュール化してまとめたもの

データ接続用など

クラスのプロパティ(変数)にアクセスするときには、直接、変数にアクセスするのではなく、メソッド経由でアクセスする

set変数名()・・・・変数に値のセット

get変数名()・・・・変数の値を取得

Page 12: SIC - 上級プログラミング2(第 回)masaomi/java2/adv_prog2_07.pdfAjaxやWebsocket WebブラウザとWebサーバー間のページ遷移な しの通信を利用したプログラムを実現

DBサーバー

それぞれの役割(検索エンジンを例として)

サーブレット

JavaBeans

検索語の入力検索処理の指示

JSP

表示用処理の指示

検索処理結果の取得

表示

※ただし、JavaBeansやJSPの役割をサーブレットだけで実現することもある

Page 13: SIC - 上級プログラミング2(第 回)masaomi/java2/adv_prog2_07.pdfAjaxやWebsocket WebブラウザとWebサーバー間のページ遷移な しの通信を利用したプログラムを実現

MVCモデル

サーブレット

JavaBeans

JSP

適切な出力の指示を行う

Control

ビジネスロジックのモデリングを行う

Model出力を行う

View

Page 14: SIC - 上級プログラミング2(第 回)masaomi/java2/adv_prog2_07.pdfAjaxやWebsocket WebブラウザとWebサーバー間のページ遷移な しの通信を利用したプログラムを実現

MVCモデルにのっとったWebアプリケーションを設計する利点

規模が大きいアプリケーションに向いている

役割別に分類されているため、異なる役割の人が開発に参画しやすい

M(モデル): 共通部品開発者

V(ビュー): 画面デザイナー

C(コントロール): アプリケーション開発者

Page 15: SIC - 上級プログラミング2(第 回)masaomi/java2/adv_prog2_07.pdfAjaxやWebsocket WebブラウザとWebサーバー間のページ遷移な しの通信を利用したプログラムを実現

Webアプリケーションの作り方の変化

従来のWebアプリケーションの困難

従来のWebアプリケーションでは、1画面に対してWebページ 1つが対応

ユーザーがページ遷移を待たなければならず、user experience的によくない(使いづらい)

Webブラウザの「戻る」ボタンを押されると処理の流れが断ち切られるため、別途対応が必要

AjaxやWebsocket

WebブラウザとWebサーバー間のページ遷移なしの通信を利用したプログラムを実現

Page 16: SIC - 上級プログラミング2(第 回)masaomi/java2/adv_prog2_07.pdfAjaxやWebsocket WebブラウザとWebサーバー間のページ遷移な しの通信を利用したプログラムを実現

Single Page Application (SPA)

HTML5で高度な処理をJavaScriptで行うことができるようになったことが背景

HTMLからページ遷移なしにHTTPでサーバーとデータのやり取りが可能(Ajax)

描画方法が豊かになったので、いろいろなUI部品が簡単に使用可能

ひとつのWebページのみでアプリケーションの全ての画面を実現

Webアプリケーションとネイティブアプリケーションのいいとこ取り

参考文献:https://arxiv.org/ftp/cs/papers/0610/0610094.pdf

Page 17: SIC - 上級プログラミング2(第 回)masaomi/java2/adv_prog2_07.pdfAjaxやWebsocket WebブラウザとWebサーバー間のページ遷移な しの通信を利用したプログラムを実現

SPAの例

ブラウザ上でExcelが動いていることに

注意

https://blogs.office.com/2014/04/14/more-office-online-commenting-printing-tell-me-and-more/

Page 18: SIC - 上級プログラミング2(第 回)masaomi/java2/adv_prog2_07.pdfAjaxやWebsocket WebブラウザとWebサーバー間のページ遷移な しの通信を利用したプログラムを実現

以降、この講義では

サーブレット、JSP、BeansによるMVCモデルを元に説明

Javaだけで話を閉じるために

SPAではJavaScriptの活用が不可欠

Page 19: SIC - 上級プログラミング2(第 回)masaomi/java2/adv_prog2_07.pdfAjaxやWebsocket WebブラウザとWebサーバー間のページ遷移な しの通信を利用したプログラムを実現

Webアプリケーションの環境構築

Page 20: SIC - 上級プログラミング2(第 回)masaomi/java2/adv_prog2_07.pdfAjaxやWebsocket WebブラウザとWebサーバー間のページ遷移な しの通信を利用したプログラムを実現

Webアプリケーションの実行環境例

Webブラウザ Webサーバー

Webアプリケーションサーバー

HTTP

TomcatApache

接続には専用のモジュールが必要

Page 21: SIC - 上級プログラミング2(第 回)masaomi/java2/adv_prog2_07.pdfAjaxやWebsocket WebブラウザとWebサーバー間のページ遷移な しの通信を利用したプログラムを実現

Webアプリケーションの実行環境

Webサーバー

Apache (Apache Software foundation)

IIS (Microsoft)

IHS (IBM)

Web アプリケーションサーバー

Tomcat (Jakarta Apache Project)

WebSphere Application Server (IBM)

など

Page 22: SIC - 上級プログラミング2(第 回)masaomi/java2/adv_prog2_07.pdfAjaxやWebsocket WebブラウザとWebサーバー間のページ遷移な しの通信を利用したプログラムを実現

Apacheの入手

http://httpd.apache.org/docs/current/platform/windows.html#downのリンクからダウンロード

Page 23: SIC - 上級プログラミング2(第 回)masaomi/java2/adv_prog2_07.pdfAjaxやWebsocket WebブラウザとWebサーバー間のページ遷移な しの通信を利用したプログラムを実現

Apacheのインストール

インストーラを実行(デフォルトでよい)

サービスとして実行

ネットワークドメイン

サーバー名

Page 24: SIC - 上級プログラミング2(第 回)masaomi/java2/adv_prog2_07.pdfAjaxやWebsocket WebブラウザとWebサーバー間のページ遷移な しの通信を利用したプログラムを実現

正しくインストールできるとこの画面が見れる

ブラウザでhttp://localhost/

にアクセス

Page 25: SIC - 上級プログラミング2(第 回)masaomi/java2/adv_prog2_07.pdfAjaxやWebsocket WebブラウザとWebサーバー間のページ遷移な しの通信を利用したプログラムを実現

Tomcatの入手

http://ring.shibaura-it.ac.jp/archives/net/apache/dist/tomcat/tomcat-9/v9.0.10/bin/からダウンロード

Page 26: SIC - 上級プログラミング2(第 回)masaomi/java2/adv_prog2_07.pdfAjaxやWebsocket WebブラウザとWebサーバー間のページ遷移な しの通信を利用したプログラムを実現

環境変数JAVA_HOMEを設定

「マイコンピュータ」を右クリックし、「プロパティ」→「詳細設定」タブ→「環境変数」ボタンを押す

「システム環境変数」の「新規ボタン」を押して、環境変数JAVA_HOMEにjdkのインストールディレクトリを設定する

Page 27: SIC - 上級プログラミング2(第 回)masaomi/java2/adv_prog2_07.pdfAjaxやWebsocket WebブラウザとWebサーバー間のページ遷移な しの通信を利用したプログラムを実現

Tomcatのインストール(1)

基本的にデフォルトでOK

ServiceStart Menu ItemsDocumentation

Examplesにチェック

Page 28: SIC - 上級プログラミング2(第 回)masaomi/java2/adv_prog2_07.pdfAjaxやWebsocket WebブラウザとWebサーバー間のページ遷移な しの通信を利用したプログラムを実現

Tomcatのインストール(2)

Tomcatの使用ポートは8080

管理パスワードをつけておく

Page 29: SIC - 上級プログラミング2(第 回)masaomi/java2/adv_prog2_07.pdfAjaxやWebsocket WebブラウザとWebサーバー間のページ遷移な しの通信を利用したプログラムを実現

Tomcatのインストール(2)

JRE(Java Runtime環境)のインストールディレクトリを指定

Page 30: SIC - 上級プログラミング2(第 回)masaomi/java2/adv_prog2_07.pdfAjaxやWebsocket WebブラウザとWebサーバー間のページ遷移な しの通信を利用したプログラムを実現

成功するとhttp://localhost:8080/で以下の画面が表示される

Page 31: SIC - 上級プログラミング2(第 回)masaomi/java2/adv_prog2_07.pdfAjaxやWebsocket WebブラウザとWebサーバー間のページ遷移な しの通信を利用したプログラムを実現

コネクタ(mod_jk)

Webサーバー

Webアプリケーションサーバー

接続用の専用モジュール=コネクタ

mod_jkというモジュールを使ってWebサーバーとWebアプリケーションサーバーを連携させる

※mod_jk2やwebapp

Page 32: SIC - 上級プログラミング2(第 回)masaomi/java2/adv_prog2_07.pdfAjaxやWebsocket WebブラウザとWebサーバー間のページ遷移な しの通信を利用したプログラムを実現

mod_jkの入手

http://ring.shibaura-it.ac.jp/archives/net/apache/dist/tomcat/tomcat-connectors/jk/binaries/win32/jk-1.2.15/から mod_jk-apache-2.0.55.so をダウンロード

Page 33: SIC - 上級プログラミング2(第 回)masaomi/java2/adv_prog2_07.pdfAjaxやWebsocket WebブラウザとWebサーバー間のページ遷移な しの通信を利用したプログラムを実現

mod_jkの導入

名前をmod_jk.soに変更し次のディレクトリにコピーC:¥Program Files¥Apache Group¥Apache2¥modules

Page 34: SIC - 上級プログラミング2(第 回)masaomi/java2/adv_prog2_07.pdfAjaxやWebsocket WebブラウザとWebサーバー間のページ遷移な しの通信を利用したプログラムを実現

mod_jkが使えるように設定

Webアプリケーションのログ取得用ディレクトリを作成

C:¥logs

mod_jkの設定ファイルを用意(workers.properties) C:¥Program Files¥Apache Group¥Apache2¥confの直下に置く(内容は次のみ)

C:¥Program Files¥Apache Group¥Apache2¥confにあるhttpd.confを次ページのように編集

worker.list=worker1worker.worker1.type=ajp13worker.worker1.host=localhostworker.worker1.port=8009

Page 35: SIC - 上級プログラミング2(第 回)masaomi/java2/adv_prog2_07.pdfAjaxやWebsocket WebブラウザとWebサーバー間のページ遷移な しの通信を利用したプログラムを実現

## httpd.confの最後に追加# #################################### mod_jkの設定#################################### mod_jkモジュールをロードLoadModule jk_module modules/mod_jk.so

# mod_jkの設定ファイル(workers.properties)の場所JkWorkersFile "C:/Program Files/Apache Group/Apache2/conf/workers.properties"

# ログファイルの場所JkLogFile "C:/logs/mod_jk.log"

# ログ取得レベルJkLogLevel info

## URLとWebアプリケーションの対応付け###自分で作ったプログラムを入れる場所JkMount /webapps/* worker1##サンプル(JSP)JkMount /jsp-examples/* worker1##サンプル(サーブレット)JkMount /servlets-examples/* worker1

Page 36: SIC - 上級プログラミング2(第 回)masaomi/java2/adv_prog2_07.pdfAjaxやWebsocket WebブラウザとWebサーバー間のページ遷移な しの通信を利用したプログラムを実現

動作確認(サンプルプログラムを動かしてみる)

Page 37: SIC - 上級プログラミング2(第 回)masaomi/java2/adv_prog2_07.pdfAjaxやWebsocket WebブラウザとWebサーバー間のページ遷移な しの通信を利用したプログラムを実現

import java.io.*;import java.util.*;import javax.servlet.*;import javax.servlet.http.*;

public class HelloWorld extends HttpServlet {public void doGet(HttpServletRequest request,

HttpServletResponse response)throws IOException, ServletException

{PrintWriter out = response.getWriter();out.println("<html><head>");out.println("<title>Hello world</title></head>");out.println("<body><h1> Hello world! </h1>");out.println("</body>");out.println("</html>");

}}

Page 38: SIC - 上級プログラミング2(第 回)masaomi/java2/adv_prog2_07.pdfAjaxやWebsocket WebブラウザとWebサーバー間のページ遷移な しの通信を利用したプログラムを実現

実行結果

Page 39: SIC - 上級プログラミング2(第 回)masaomi/java2/adv_prog2_07.pdfAjaxやWebsocket WebブラウザとWebサーバー間のページ遷移な しの通信を利用したプログラムを実現

参考URL

http://programnet.hp.infoseek.co.jp/jsp&servlet/tomcat.html

http://www.hellohiro.com/servletwebxml.htm

http://www.castle.flnet.org/pw/?Java%2FTomcat5.5%2Fmod_jk