プログラミング入門1

作業について

今回の課題は以下のパッケージに作成してください。

作成するクラスの名前は問題ごとに指示があります。下記を参照してください

• クラスを作成する

課題の提出方法については下記を参照してください。

• 課題の提出方法

また、別のコンピューター上に移動する際には、下記を参考にプログラムを持ち帰ってください。

• プログラムを持ち帰る

新しい内容

インターネットを使った通信

この課題は、通信を取り扱うための仕組みを使います。最初に、インターネットを経由する通信を利用したプログラムの仕組みを説明します。

ここで説明するプログラムはWebアプリケーションと呼ばれています。Webアプリケーションとは、ブラウザーやインターネットの機能を利用して作られたプログラムのことです。Webアプリケーションの代表的な例としては、ショッピングサイトがあります。

以下の図は、Webアプリケーションの構成を示したものです。Webアプリケーションは、クライアントと呼ばれるコンピューターとサーバーと呼ばれるコンピューターがネットワークを介して通信し、様々な処理を行います。プログラムの動作の流れは、(1)から(6)で示しています。最初にクライアント、サーバー、通信の説明をしたあと、Webアプリケーションの動作の流れについて説明します。

図: Webアプリケーションの構成

Webアプリケーションでは、プログラム(アプリケーション)の画面はInternet ExplorerやFireFoxなどのブラウザーに表示されます。Webアプリケーションを動かす場合、クライアントではまずブラウザーを起動していることが必要となります。ブラウザーは、クライアントと呼ばれ、 利用者がプログラムの画面から、情報を入力する、ボタンを押すなどの操作を行います。

サーバーでは、クライアントからの要求を処理する「Webアプリケーションサーバー」というプログラムが動いています。ショピングサイトなどのプログラムはアプリケーションと呼ばれ、Webアプリケーションサーバーから実行されます。課題で作成するプログラムもこのサーバーブログラムを使って動作させています。本教材の課題では、このアプリケーションの部分を作成することになります。

アプリケーションのプログラムを作成して、ブラウザーから確認するという一連の手順をとります。クライアントからサーバーのアプリケーションを呼び出すことで最初の通信が行われます。この通信のことをリクエスト (要求)と呼びます。クライアントからの通信を受け取ったアプリケーションは、要求された処理 を行います。処理結果はサーバーからクライアントに送信され、最終的にクライアントのブラウザーに表示されます。この、サーバーからクライアントへの通信をレスポンス (応答)と呼びます。

つまり、Webアプリケーションの通信は、リクエストとそれに対応するレスポンスで成り立っているということになります。この通信にはHTTP(HyperText Transfer Protocol)と呼ばれる通信の手順(プロトコルとも呼ばれます)が使われています。HTTPは、Webアプリケーションを構成する重要な通信の手順です。

Webアプリケーションの動作の流れ

Webアプリケーションの動作の流れを詳しく見てみます。

• (1) 最初に、Webアプリケーションサーバーを起動します 。最初の通信はクライアントから行われますが、その前にサーバーのアプリケーションが起動していることが必要です。アプリケーションが起動していることで、クライアントからの通信(リクエスト)を受け付けることができるからです。ショッピングサイトなどのWebアプリケーションも最初にサーバーでアプリケーションが起動しています。そして利用者のリクエストを常に待っています。課題でも同様で、最初にWebアプリケーションサーバーを起動 しブラウザーから動作を確認するという手順になります。サーバーブログラムとアプリケーションを起動することを、単に「サーバーを起動する」ということがよくあります。課題でもこの用語を使います。
• (2) クライアントではブラウザーからWebアプリケーションを呼び出します。この呼び出しの過程でリクエストが発生し、 サーバーのアプリケーションが動きます。ブラウザーに表示される画面には、入力枠やメニューなどが表示されており利用者が情報を入力、選択してボタンを押します。リクエストは、「URLという形式でサーバーのプログラムを指定する」、「リンクを利用する」などの方法で行うこともありますが、Webアプリケーションではボタンを押したときに目的のプログラムが呼ばれるように作成することが多くなります。
• (3) ブラウザーでボタンが押されると、インターネットを介して通信が行われます。画面で入力した情報はリクエストと共にリクエストパラメーター と呼ばれるデータに整えられてサーバーに送られます。なお、パラメーターは引数のことなので、リクエストパラメーターは、ブラウザーからサーバーに送られる引数と考えることができます。
• (4) サーバーではサーバープログラムがリクエストを受け取ります。サーバーブログラムは、リクエストに対して適切なアプリケーションを呼び出します。アプリケーションは、処理に必要なリクエストパラメーターをサーバープログラムから取り出しながら、クライアントから要求された処理を行います 。アプリケーションはブラウザーに表示するための画面情報を実行中に作成します 。なお、課題では、このサーバーブログラムの仕組みを利用して、出題された問題をプログラミングしてゆきます。
• (5) アプリケーションの処理結果がレスポンスとしてクライアントのブラウザーに返されます。この通信の内容は、アプリケーションが作成した処理結果を含む画面となります。
• (6) クライアントでは、レスポンスとしてサーバーから返された画面情報をブラウザーに表示します。

以上が、Webアプリケーションの動作の流れです。この一連の動作は、通信という視点からみて、リクエスト/レスポンスと呼ばれます。リクエスト/レスポンスは、通信のひとつのまとまりとして完結していますが、Webアプリケーションでは画面を遷移しながら(切り替えながら)処理を行ってゆく場合も多くあります。図の(6)で表示された画面に入力枠とボタンがある場合、さらにリクエストを行うと、(2)から(6)の流れが繰り返されます。例えば、アプリケーションショッピングサイトなどでは、複数の画面が切り替わりながらデータを入力したりボタンを押したりします。これはリクエスト/レスポンスを複数回繰り返していることになります。

ポイント

以下にポイントをまとめます。

• 最初にサーバーでWebアプリケーションサーバーが起動している
• クライアントでは画面はすべてブラウザーで表示する
• 通信はリクエスト(要求)/レスポンス(応答)を行っている
• 画面の入力はリクエストパラメーターでサーバーに渡される
• 画面遷移を繰り返す場合、リクエスト/レスポンスもそのタイミングで繰り返される

課題の構成

課題では、1台のコンピューターでクライアントとサーバーを起動し、作成したプログラム(Webアプリケーション)の動作を確認します。最終的にサーバーを起動した他のコンピューターと通信し動作を確認する場合でも、作成中の動作確認は一般的にこの構成をとります。

図: 課題の構成

動作の流れは、Webアプリケーションの図と同じです。(1)サーバーを起動し、(2)ブラウザーから(3)リクエストを行い、(4)サーバーでアプリケーションが動作し(5)レスポンスを返します。(6)結果がブラウザーに表示されます。

通常のWebアプリケーションと違うところは、通信が「仮想的な通信」という特別な仕掛けで動作している点です。この場合、リクエスト/レスポンスの通信は正常に処理されるのですが、実際はネットワークにはデータは流れていません。サーバーが自分のコンピューターで起動しているため、仮想的に通信を行っているだけです。このようなサーバーをローカルホスト(localhost)と呼びます。

サーバープログラムを取り扱うための仕組み

この教材は、「ウェブページ(WebPage)」というサーバープログラムを取り扱うための仕組みを使って出題しています。Javaでは、他にもサーバープログラムを取り扱うための仕組みはありますが、この教材ではこれまでに教えた内容でウェブアプリケーションを作成できるような、簡単な仕組みを提供しています。

簡単なWebアプリケーションの例

それでは、簡単なWebアプリケーションを作成してみましょう。

1. ファイルを配置する

まずは、以下のファイルをコンピューターにダウンロードしてください。このファイルは、ブラウザーからプログラムを実行する際に利用する画面情報で、HTMLという形式で表示する内容を記載したものです。

ダウンロード方法はブラウザーによりますが、「startpage.html」の部分を右クリックしてメニューから「対象をファイルに保存」などを選択します。

ファイルをダウンロードしたら、さらにダウンロードしたファイルを右クリックして「コピー」を選択します。その後、Eclipseに作成した今週のパッケージ(j1.lesson04)を右クリックして「貼り付け (Paste)」を選択します。すると、プログラムのほかにダウンロードしたファイルが配置されるはずです。

これ以降の課題でも「プログラムを呼び出すための画面」と表示されているところでは、同様の方法でファイルを配置してください。

2. 例題のプログラムを作る

これまでと同じやり方でパッケージ「j1.lesson04」にクラス「FirstWebPage」を作成して下さい。クラスを作成したら、次のようなプログラムを作成します。

これまでの教材との違いは、プログラムの先頭に「import gpjava.WebPage;」というサーバープログラムを利用するための1行を追加し、WebPageの仕組みを利用している点です。

package j1.lesson04;

import gpjava.WebPage;

public class FirstWebPage {

    public static void main(String[] args) {
        new FirstWebPage().start();
    }

    void start() {
        WebPage.open("受け取ったメッセージ");
        String message = WebPage.getInput("message");
        WebPage.paragraph("メッセージ: " + message);
        WebPage.close();
    }
}

このプログラムは、ブラウザーに表示する画面を作成しています。void start() {…}の先頭の「WebPage.open("受け取ったメッセージ");」で、画面の作成を始めます。ここで指定している「"受け取ったメッセージ"」は、画面のタイトルになります。最後の行の「WebPage.close();」で、画面を表示するために生成した情報がクライアントにレスポンスとして返ります。画面を生成するプログラムは、必ずWebPage.open()で開始しWebPage.close()で終了して下さい。

WebPage.open()とWebPage.close()の間に、クライアント(ブラウザー)からの情報の取得や、画面に表示する内容を書いてゆきます。「WebPage.getInput("message");」は、ブラウザーで入力された文字列を取り出しています。ブラウザーから入力された文字列は「リクエストパラメーター(リクエスト引数)」と呼ばれ、Javaのメソッドの仮引数のように、呼び出されたアプリケーションから入力された値を使えます。「WebPage.getInput()」命令に指定している「"message"」は、このリクエストパラメーターを識別するための名前で、ここではクライアントから入力された「message」という名前のリクエストパラメーターを取り出しています。

次に、「WebPage.paragraph("メッセージ: " + message);」では、画面に表示する文字を指定しています。この命令で、「メッセージ: 」と「message」(入力された文字が格納されている)の内容を連結して出力することになります。

3. サーバーを起動する

プログラムが作成できたら、サーバーを起動します。プロジェクトを右クリックして「GP Javaツール」「教育用Webアプリケーションサーバー」「サーバーを起動する」の順に選択します。一度起動すれば、毎回起動する必要はありません。

図: サーバーを起動する

4. ブラウザーを起動する

サーバーが起動できたら、コンピューターにインストールされたブラウザーを起動します。Windowsのスタートメニューから「すべてのプログラム」を選択し、Internet ExplorerやFirefoxなどのブラウザーを選択してください。

5. URLを入力する

ブラウザー上部の「http://」等が表示された領域に、作成したプログラムを動作させてみるためのURLを入力します。

• http://localhost:8888/j1.lesson04/startpage.html

このうち、「http://localhost:8888/」の部分は先ほど起動したサーバーの位置を表しています。続いて「j1.lesson04/」は今回の課題のパッケージ、最後に「startpage.html」がダウンロードした画面の情報です。この画面の情報はEclipseに配置したものと同じですが、ファイルを直接ブラウザーで表示しているのではなく、

• ブラウザーがサーバーにstartpage.htmlの情報を要求 (リクエスト)
• サーバーがブラウザーにstartpage.htmlのデータを渡す (レスポンス)
• ブラウザーが受信したstartpage.htmlの内容を表示

という流れで処理されています。

この時点では、まだ作成したFirstWebPageのプログラムは動いていないことに注意してください。

次のような画面が表示されたら、文字を入力してボタンをクリックしてください。表示されない場合には、パッケージ名やダウンロードしたファイルの名前が間違っている可能性があります。間違っている部分を右クリックして、「リファクタリング」「名前の変更」を選択して正しい名前に変えてください。

図: startpage.htmlを表示した結果

以下のような画面が表示されれば成功です (「元気ですか?」と入力した場合の結果です)。表示されない場合には、プログラムの名前を確認してください。

図: ボタンをクリックした結果

6. プログラムをもう一度確認する

FirstWebPageのプログラムをもう一度確認してみましょう。

まず、以下の命令でブラウザに表示する画面の情報を作成しています。ここでは、画面のタイトルに「受け取ったメッセージ」と指定しています。

次に、手前の画面で入力したテキストを取り出しています。授業では入力ダイアログなどを使ってユーザーの入力を取り出していますが、Webアプリケーションではブラウザーに入力した内容を取り出して使うことになります。今回は「message」という名前の入力(手前の画面のテキストボックスに入力した文字列です)を利用するため、以下のように書いています。

次に、ブラウザーに表示させる内容に「メッセージ: (入力した内容)」を追加しています。授業ではメッセージダイアログを使ってメッセージを表示していましたが、Webアプリケーションではすべてがブラウザーに表示されるため、このような方法で表示する内容を作成していきます。今回は、WebPage.paragraph()という段落を表示する命令を使って、以下のように書いています。

最後に、ブラウザーに表示する画面の作成を終了させています。ブラウザーによってはこの処理を行わないと画面が正しく表示されないので、注意が必要です。

以上で簡単なプログラムの作成は終了です。

新しい内容のまとめ

画面の開始は、次のように書きます。

Webアプリケーションを作成する際には、プログラムの最初に必ずこの命令を入れてください。また、画面のタイトルに指定した文字列は、ブラウザーウィンドウの上部や、タブなどに表示されるはずです。

入力されたメッセージの取得は、次のように書きます。

リクエストパラメーターの取得は、このメソッドを利用します。

メッセージの表示は、次のように書きます。

メッセージを段落で表示するときは、このメソッドを利用します。

画面の終了は、次のように書きます。

問題

1. メッセージを表示する

画面から入力されたメッセージを表示するクラスMessageを作成して下さい。受け取ったメッセージのリクエストパラメーター名は「message」です。

なお、この課題では次のように画面が表示されるようにしてください。

図: Messageの表示

ヒント

ほとんど例題と同じですが、少しだけ表示が違います。「WebPage.paragraph()」命令を2回使って表示しましょう。

2. 2つのメッセージを表示する

画面から入力された2つのメッセージを表示するクラスMessage2を作成して下さい。受け取ったメッセージのリクエストパラメーター名は順に「message1」「message2」です。また、今週のメソッドを利用して、それぞれのリクエストパラメーターを表示するようにしてください。

なお、この課題では次のように画面が表示されるようにしてください。

図: Message2の表示

ヒント

メッセージごとに「メッセージの左側に表示する文字列」「リクエストパラメーター名」をそれぞれ引数にとるメソッドを作成すると、プログラムが読みやすくなります。