知的システム構築工房 　　Linux設定セミナーシリーズ 第5回　Webアプリ作成 2011年3月16日（水） 株式会社 アセンディア 1

目的 当セミナーを通して、 Webアプリケーションを開発する環境の構築手法を体得する。

目標 当セミナーを受講することにより 1.Webアプリを開発・動作する環境を構築できるように なること 　　なること 　2.フレームワークを使用したWebアプリの開発ができる 　　ようになること

セミナー内容 1．Webアプリが動作する仕組み Webサーバの仕組み Webアプリケーションの処理 Tomcatとは Tomcatのインストール EclipseとTomcatの連携 3．Webアプリケーションの作成 Webアプリケーションの構造 web.xmlファイル <servlet>タグと<servlet-mapping>タグの関係 Webサーブレットの作成 4．フレームワークを使用したWebアプリの作成 フレームワークについて Strutsについて Strutsを用いたWeb開発

1．Webアプリが動作する仕組み

Webサーバの仕組み Webブラウザを通してネットワークで繋がれたWebサーバへアクセスし、 様々な情報を取得します。 O S　（Linux) Apache HTTP Server Tomcat 認証システム Java VM ユーザID パスワード ネットワーク Database Java class JSP,HTML,CSS table,view クライアント Webサーバ

Webアプリケーションの処理 Webアプリケーションは一般的に要約すると、下記のようになります。 リンク ボタン 画面遷移 単純なリンクによる画面遷移 ボタン 画面１ アクション 処理結果 画面2 アクションに対応した処理

Webアプリケーションを実現するさまざまな言語や技術 Apache Tomcat IIS Glassfish : アプリケーションサーバ html JSP ASP css javaScript Ajax PHP CGI Flash : アクションに対応した処理 リンク アクション Framework Struts Spring .net Framework Hibernate Java .net Servlet : ボタン 画面１ driver jdbc,odbc,ODP.net・・ mail Database メール送信 Oracle MS SQLServer MySQL PostgreSQL : Sendmail qmail :

2．Web開発環境の構築

Tomcatとは Javaサーブレット、JSPを処理するアプリケーションソフトウェア。 　　Java VM上で動作し、ApacheやIISと連携し動的なWebサービスを提供する。 　　様々なOS（Linux,Windows,MacOS）で動作する。 　　オープンソースのソフトウェアです。 Webサーバ Apache HTTP Server Tomcat Java VM OS クライアント

Tomcatのインストール インストールの流れ １．プログラムソースを取得する ２．プログラムソースを解凍する ３．インストール 　１．プログラムソースを取得する 　２．プログラムソースを解凍する 　３．インストール 　４．動作確認

　１．プログラムソースを取得する http://tomcat.apache.org/

：　（中略） ：

ダウンロードしたファイルを /home/ユーザ名 配下へコピーします。 [sugiura@user01 ~]$ cp /home/sugiura/ダウンロード/apache-tomcat-6.0.32.tar.gz ./ [sugiura@user01 ~]$ gzip -d apache-tomcat-6.0.32.tar.gz [sugiura@user01 ~]$ tar -xvf apache-tomcat-6.0.32.tar [sugiura@user01 ~]$ mv apache-tomcat-6.0.32 tomcat6 ↑開発用のTomcatを/home/ユーザ名フォルダ配下に構築します。 rootユーザに替わり、ダウンロードしたファイルを /usr/local/src配下へコピーします この作業から、運用としてのTomcatインストールを行います。

２．プログラムソースを解凍する ３．インストール 　２．プログラムソースを解凍する [root@user01 src]# gzip -d apache-tomcat-6.0.32.tar.gz [root@user01 src]# tar -xvf apache-tomcat-6.0.32.tar 　３．インストール /opt/配下へコピーし、tomcat6とリネームします [root@user01 src]# pwd /usr/local/src [root@user01 src]# mv apache-tomcat-6.0.32 /opt/ [root@user01 src]# cd /opt/ [root@user01 opt]# mv apache-tomcat-6.0.32/ tomcat

４．動作確認 tomcatを起動します。 [root@user01 opt]# cd tomcat/ 　４．動作確認 tomcatを起動します。 [root@user01 opt]# cd tomcat/ [root@user01 tomcat]# ls LICENSE NOTICE RELEASE-NOTES RUNNING.txt bin conf lib logs temp webapps work [root@user01 tomcat]# cd bin/ [root@user01 bin]# ls bootstrap.jar cpappend.bat shutdown.sh tool-wrapper.sh catalina-tasks.xml digest.bat startup.bat version.bat catalina.bat digest.sh startup.sh version.sh catalina.sh setclasspath.bat tomcat-juli.jar commons-daemon-native.tar.gz setclasspath.sh tomcat-native.tar.gz commons-daemon.jar shutdown.bat tool-wrapper.bat [root@user01 bin]# ./startup.sh Using CATALINA_BASE: /opt/tomcat Using CATALINA_HOME: /opt/tomcat Using CATALINA_TMPDIR: /opt/tomcat/temp Using JRE_HOME: /usr/local/java Using CLASSPATH: /opt/tomcat/bin/bootstrap.jar ←/opt/tomcat フォルダへ入ります ←確認 ←binフォルダへ移動（binフォルダ内にプログラムがあります） ←起動シェルを実行します ←正常に起動した場合、このようなメッセージが 　　表示されます

http://localhost:8080/ へアクセスします このような画面が表示されます

このように表示されれば、正しく機能しています。

正しく動作した場合、一度 tomcatを停止します。 [root@user01 ~]# /opt/tomcat/bin/shutdown.sh Using CATALINA_BASE: /opt/tomcat Using CATALINA_HOME: /opt/tomcat Using CATALINA_TMPDIR: /opt/tomcat/temp Using JRE_HOME: /usr/local/java Using CLASSPATH: /opt/tomcat/bin/bootstrap.jar ←終了シェルを実行します ↑正常に終了した場合、このようなメッセージが表示されます

EclipseとTomcatの連携 Eclipse開発環境でTomcatのサービスを管理したり、プロセスをデバッグできる 非常に一般的なプラグインとして、Sysdeo Eclipse Tomcat Launcher plugin があります。 インストール方法 １．プログラムソースの取得 ２．プログラムソースの配置 ３．動作確認 ４．Eclipse環境設定

　１．プログラムソースを取得する http://www.eclipsetotale.com/tomcatPlugin.html

tomcatPluginV33.zipを選択肢、ダウンロードを行います。

２．プログラムソースの配置 ダウンロードしたソースを解凍します [root@user01 ~]# cd /usr/local/src/ 　　ダウンロードしたソースを解凍します [root@user01 ~]# cd /usr/local/src/ [root@user01 src]# mv /home/sugiura/ダウンロード/tomcatPluginV33.zip ./ [root@user01 src]# ls ImageMagick-6.6.7-10 httpd-2.2.17 openssl-1.0.0d.tar work2 ImageMagick.tar jdk-6u24-linux-i586.bin tomcatPluginV33.zip apache-tomcat-6.0.32.tar openssl-1.0.0d work [root@user01 src]# unzip tomcatPluginV33.zip [root@user01 src]# mv com.sysdeo.eclipse.tomcat_3.3.0/ /opt/eclipse/plugins/ ←/usr/local/srcフォルダへ入ります ↑ダウンロードしたファイルを移動 ←ダウンロードしたファイルを解凍 ↑ダウンロードしたファイルをeclipseのpluginフォルダへ移動

　３．動作確認 Eclipseを起動します 赤く囲まれている場所にTomcatプラグインが表示されていれば、正しくインストールされています。

　３．動作確認 Eclipseを起動します 赤く囲まれている場所にTomcatプラグインが表示されていれば、正しくインストールされています。

Tomcatプラグインが動作するように、Eclipseの環境設定を行います。 /home/ユーザ名配下のTomcatを指定

Tomcatを起動し、正しく動作するかを確認します。

３．Webアプリケーションの作成

Webアプリケーションの構造 http://サーバIPアドレス・ドメイン/lesson/ lesson src 一般的なサイトでの構造 トップフォルダ Webアプリケーションのコンテキスト名になります。 lesson WEB-INFフォルダ Webアプリケーションのプログラムやライブラリを配置します Webブラウザからはアクセスできません WEB-INF srcフォルダ プログラムのソースファイルを配置します（実運用では配置しません） src classesフォルダ プログラムのクラスファイルを配置します classes libフォルダ プログラムで利用するライブラリファイルを配置します lib viewフォルダ JSPファイルを配置します view 設定ファイル web.xml,struts-config.xml等Webアプリの設定ファイルを配置します コンテンツファイル htmlファイル、画像ファイル(jpg,gif)、テキストファイル等を配置します。　フォルダ分けします。

web.xmlファイル Webアプリケーションの各種設定は、web.xmlファイルに記述します。 web.xmlファイルは、拡張子がxmlであるように、XML形式で記述します。 <context-param>タグ：初期パラメータを設定 　　　　　　　　　　　<param-name>：パラメータ名 <param-value>: 値 <filter>タグ：HTTPリクエスト・レスポンス時に発生する処理を記述 <filter-name>：フィルター名 　 <filter-class>:フィルタークラス名 <servlet>タグ：Javaのクラスを設定 <servlet-name>:サーブレット名 <servlet-class>:Javaのクラスファイル名（拡張子はつけません） <servlet-mapping>タグ：<servlet>タグとURLとのマッピングを設定 <url-pattern>:URL名 ※タグはほんの一部です。

<servlet>タグと<servlet-mapping>タグの関係 例 <servlet> <servlet-name>Test</servlet-name> <servlet-class>ShowTest</servlet-class> </servlet> <servlet-mapping> <url-pattern>/showTest</url-pattern> </servlet-mapping> ShowTest 1.http://localhost:8080/lesson/showTest　でアクセスすると、 2.ShowTestが実行される

Webサーブレットの作成 作成するアプリケーション http://localhost:8080/lesson/ShowHello Hello!!

作成方法 ファイルから新規→プロジェクトを選択します Tomcatプロジェクトを選択し、次へを押下します

プロジェクト名にlessonと入力し、次へボタンを押下 コンテキスト～をチェックし、完了ボタンを押下

パッケージ・エクスプローラにlessonフォルダができていることを確認してください。

web.xmlの作成 <?xml version="1.0" encoding="Shift_JIS"?> <web-app xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd" version="2.4"> <servlet> <servlet-name>Hello</servlet-name> <servlet-class>HelloServlet</servlet-class> </servlet> <servlet-mapping> <url-pattern>/ShowHello</url-pattern> </servlet-mapping> </web-app>

import javax.servlet.*; import javax.servlet.http.*; Helloservlet.javaの作成 import java.io.*; import javax.servlet.*; import javax.servlet.http.*; public class HelloServlet extends HttpServlet { public void doGet( HttpServletRequest request, HttpServletResponse response ) throws IOException, ServletException { PrintWriter out = response.getWriter(); out.println("Hello!!"); } doGet()メソッドはHttpServletからオーバーライドするメソッドです。 ブラウザからサーブレットを呼び出したときにこのメソッドが呼ばれます。 リクエスト HttpServletRequest サーブレット ブラウザ レスポンス HttpServletResponse

動作確認 http://localhost:8080/lesson/ShowHello

GETとPOSTについて GETメソッド HTTPリクエストにおいて、引数をURLの後ろにパラメータとして送信する。 送信できる文字数の目安は２５５文字（ブラウザやサーバによって異なる） アドレスに引数情報が表示される。 　http://localhost/lesson/showTest?userId=999&name=%90%99%89Y&tel=09011112222 POSTメソッド 　　HTTPリクエストにおいて、引数はFormに埋め込まれており、Formデータ 　　として送信する。送信できる文字数に制限は無く、バイナリデータも 　　送信可能 リクエストパラメータ <form method="post" action="showTest"> ユーザID <input type="text" name="userId" size="30" maxlength="30"/> パスワード <input type="password" name="userPassword" size="30" maxlength="30" /> </form> 認証システム ユーザID パスワード

4．フレームワークを使用した 　　　Webアプリの作成

フレームワークについて フレームワークとは、システムにおいて共通的な機能や部品（画面表示、DBアクセス、IO処理等）を提供するものです。 コントローラ ユーザ ロジック 画面表示 DBアクセス IO処理 フレームワークとライブラリの違い ユーザプログラム 基本的な機能 フレームワーク 呼び出す この部分だけ開発 ライブラリ コントローラの定義付けに よってユーザロジックが呼び出される 機能 機能 フレームワーク：フレームワークがユーザPGを呼び出す ライブラリ：ユーザPGがライブラリを呼び出す

Strutsについて 特徴 Apache Tomcatなどのサーブレットコンテナ上で動作するWebアプリケーション フレームワークのひとつです。 特徴 1.MVC (Model-View-Controller)モデルを採用したフレームワーク 　⇒MVCモデルであるので、作業分担が容易な為、大きなシステム開発に 向いている。 2.仕様変更に対応しやすい 　⇒デザインの変更はViewを修正、データベースの変更はModel,Controller を修正,ロジックの変更はControllerを修正と、変更箇所が明確。 3.国際化対応 　⇒メッセージリソースを、各国に対応した言語に設定可能

Strutsを用いたWeb開発 作成するアプリケーション１ http://localhost:8080/lesson2/view/InputName.jsp ようこそ　○○さん

作成方法 ファイルから新規→プロジェクトを選択します Tomcatプロジェクトを選択し、次へを押下します

プロジェクト名にlesson2と入力し、次へボタンを押下 コンテキスト～をチェックし、完了ボタンを押下

パッケージ・エクスプローラにlesson2フォルダができていることを確認してください。

ウィンドウ⇒設定

以下は講師の指示に従って操作をおこなってください。 1.Strutsライブラリの移行 2.JSPファイルの移行 3.Javaプログラムの移行 4.Eclipse設定