Google App Engine のクライアント環境とクラウド環境での開発 (1/2)

◆文字コードの設定

今回は、pirka を Google App Engine（GAE）に載せる時に発生した文字化けについて、話したいと思います。

最初に簡単な Web アプリ、文字列の入力が2つとボタン1つの画面を作成しました。GAE 対応のアプリケーションを開発するため、GAE の開発環境を、Google からダウンロードし、Eclipse に設定します。

このセットアップ自体は、特に問題なく完了しました。（注：Eclipse の詳細設定方法は、http://app.oarts.jp/cc/startドキュメントセンターを参照）

pirka は HTML ファイルが JSP（JAVAServerPage：JAVA 言語で作成した HTML を出力するためのアーキテクチャ名前）の代わりを担うので、先ほど作成した HTML とその対応クラス（一応画面クラスと読んでいます。HTML 画面とその画面に対応した JAVA のクラスでプログラムができあがる構造です）を、先ほど作成した Eclipse の GAE プロジェクトの src フォルダーにコピーします。

GAE の開発環境は特別に難しいこともなく、Tomcat プロジェクトと似たような感じで行えます。実行は、プロジェクト名―＞右プルダウンメニュー―＞Debug As、または Run As を選択すると、Google のマークが先頭にある Web Application がありますので、それを選択します。

実行すると、コンソールに URL が出てきますので、ブラウザからその URL を指定しま
す。URL の指定方法で jetty と Tomcat プロジェクトの大きく違うところは、プロジェクト名が省略されることです。

GAE プロジェクトは、1つのプロジェクトで1つのローカルなアプリケーションサーバーを保持しているみたいで、以下のような URL になります。

Tomcat Project = http://xxxxxxxxxxxx:8080/project_name/url-pattern
GAE Project = http://xxxxxxxxxxxx:8080/url-pattern

↑ここでの url-pattern とは、Web.xml で記述する Servlet の呼び出し名のことです。

url-pattern に書かれた文字列と、最初に呼び出す JAVA クラス名とが結びつきます。Web.xml とは、デプロイメントデスクリプタと言い、アプリケーションサーバーに Web アプリケーションを配備するための設定ファイルのことです。

ブラウザを開いて URL を指定し実行すると、先ほど作成した HTML 画面が現れ、日本語も正しく表示されました。ここまでは順調です。

次に、Text エリアに日本語を入力し、Submit ボタン（Submit ボタンとは、ブラウザからアプリケーションサーバーに入力された情報を送信する意味のボタンを指します）を押下します。Submit ボタンを押された場合のアプリケーションサーバー側の処理は、入力された Text エリアから文字列を取り出し、もう1つの Text エリアにコピーを行い、再度同じ画面を呼び出す処理としています。

入力した日本語は「あいうえお」です。そうすると、文字化けした文字列が入力したほうの Text エリアと、サーバー側でコピーした Text エリア、ともに表示されます。

ここで、サーバーで取り出したときに文字化けを起こしていたか、または文字列を取り出し後、ブラウザに返す時に文字化けしたかのどちらかだと、推測が付きます。

まず、pirka が HTML ファイルを取り込み、その後ブラウザからアプリケーションサーバーまでの流れを追いました。

（注：POST とは HTML 通信を行うときに、アプリケーションサーバーに要求する手続きのひとつ）

1．JSP の代役 HTML ファイルの取り込み
（pirka が HTML ファイルを読み込み、文字コード変換がされるとき）

HTML ファイル
↓
JAVA（pirka）    　        　　　＜―コード変換1

2．ブラウザが POST でリクエスト電文にするとき
（ブラウザに表示されている画面の Submit ボタンを押下したとき）

ブラウザ　　　　　　　　　　　　　　　　　＜―コード変換2
↓
リクエスト電文へ
（アプリケーションサーバーに要求する HTML 情報を指す）

3．POST されたリクエスト電文からアプリケーションサーバーに取り込むまで

リクエスト電文へ
↓
JAVA（pirka ＋アプリケーションサーバー）　＜―コード変換3

4．アプリケーションサーバからブラウザに返すレスポンス処理

ＪＡＶＡ（pirka＋アプリケーションサーバ）　＜―コード変換4
↓
レスポンス電文へ                   

5．レスポンス電文をブラウザが取り込む時と表示まで

レスポンス電文
↓
ブラウザ            　　　　    ＜―コード変換5


上記のような流れに分解できます。上の流れにコード変換1〜5までの矢印を付けました。