Google App EngineとSlim3で始める携帯Web入門：クラウドとフレームワークで超簡単ケータイ開発（1）（2/3 ページ）

[森俊夫，＠IT]

GAE/J開発環境の構築

　GAE/Jの開発環境は、以下の記事を参照して、構築してください（※GAE上で開発するためのGAEのアカウントと開発環境（Eclipseとプラグイン）が整っていることを前提とします）。

Google App Engineで手軽に試すJavaクラウド via kwout

Firefoxの拡張で携帯端末シミュレート

　FirefoxのアドオンであるFireMobileSimulatorをインストールします。携帯端末ブラウザをシミュレートし、絵文字表示、位置情報送信機能がFirefoxから使えるようになります。

Top - FireMobileSimulator.org via kwout

「FireMobileSimulator.org」からアドオンをダウンロードして、インストールしてください。

Slim3ブランクプロジェクトの作成

　簡単にGAE/Jのプロジェクトを作成するために、Slim3のサイトで配布しているブランクプロジェクトを使用します（※今回は、Slim3のホットリローディング機能を使うだけなので、最低限の設定のみ行います。Slim3 Datastoreなどの機能を使用したい方は、Slim3のサイトまたは、「Slim3日本語サイト（非公式）」を参照してください）。

　Slim3のダウンロードページから、最新のブランクプロジェクトをダウンロードします。「Summary+Labels」の列の「slim3-blank-xxx」（xxxはバージョン番号）となっているファイルから最新のファイルを選択してください（※本稿では、2010年10月28日現在の最新ファイル「slim3-blank-1.0.5.zip」を使っています）。

　ダウンロードしたファイルを解凍し、Eclipseにインポートし、「Refactor（リファクタ）］→［Rename（リネーム）］でプロジェクトをリネームしてください（今回は、「gpstweet」とします）。

　「war/WEB-INF/web.xml」の中でパラメータ「slim3.rootPackage」を「com.hayato.gpstweet」に設定します。

【略】
  
<context-param>
  <param-name>slim3.rootPackage</param-name>
  <param-value>com.hayato.gpstweet</param-value>
</context-param>

【略】

web.xml（一部抜粋）

　「war/WEB-INF/appengine-web.xml」を以下のように設定します。

<?xml version="1.0" encoding="utf-8"?>
<appengine-web-app xmlns="http://appengine.google.com/ns/1.0">
  <application>gpstweet</application>
  <version>1</version>
  <precompilation-enabled>true</precompilation-enabled>
  <system-properties>
    <!-- Slim3のホットリローディングの設定 -->
    <property name="slim3.hotReloading" value="true"/>
    <property name="java.util.logging.config.file" value="WEB-INF/classes/logging.properties"/>
  </system-properties>
  <!-- セッションを有効にする -->
  <sessions-enabled>true</sessions-enabled>
</appengine-web-app>

appengine-web.xml

　開発中は、Slim3のホットリローディングを有効にしますが、デプロイ時に無効にしてください（※）。

※編集部追記（2011年1月12日）：Slim3開発者のひがやすを氏に「Slim3 はクラウド上では自動的にHOT reloadingはオフになるのでデプロイ時にオフにしなくても大丈夫ですよ」と指摘をいただいています。ご注意ください。ご指摘いただきありがとうございました

Mobyletの設定

　ケータイサイト作成のためのフレームワークMobyletの設定を行います。Mobyletのダウンロードページから、以下のファイルをダウンロードしてください。

• mobylet-core（Mobyletの必須コアライブラリ）
• mobylet-charset（絵文字などを処理する文字コードライブラリ）
• mobylet-taglibs（Mobyletの有用なtaglibを使うためのライブラリ）
• mobylet-gaeextension（Google App Engine for JavaでMobyletを使うためのライブラリ）

　ダウンロードしたファイルを「war/WEB-INF/lib」に配置し、ビルドパスを設定します。

　次に、MobyletのGAE/J版ブランクプロジェクトをダウンロードし、リソースファイルを「war/WEB-INF/resources」にコピーしましょう。ブランクプロジェクトは、「mobylet-blank-t2gae project」から「mobylet-blank-t2gae.zip」をダウンロードします。メールは使用しないため、「war/WEB-INF/resources/mobylet.xml」の「org.mobylet.mail.initializer.MobyletMailInitializer」をコメントアウトしてください。

<?xml version="1.0" encoding="UTF-8"?>
<mobylet>
  <initializers>
    <chain>org.mobylet.core.initializer.impl.MobyletInitializerImpl</chain>
<!--
    <chain>org.mobylet.mail.initializer.MobyletMailInitializer</chain>
-->
    <chain>org.mobylet.gae.initializer.GaeMobyletInitializer</chain>
  </initializers>
  <device>
    <basedir>device/</basedir>
  </device>
  <emoji>
    <basedir>emoji/</basedir>
  </emoji>
</mobylet>

mobylet.xml

　「war/WEB-INF/web.xml」に以下のように<filter><filter-mapping>要素を追加します。

【略】
  
    <filter>
      <filter-name>mobyletFilter</filter-name>
      <filter-class>org.mobylet.core.http.MobyletFilter</filter-class>
      <init-param>
        <param-name>mobylet.config.dir</param-name>
        <param-value>WEB-INF/resources/</param-value>
      </init-param>
    </filter>
    <filter>
      <filter-name>FrontController</filter-name>
      <filter-class>org.slim3.controller.FrontController</filter-class>
    </filter>
  
【略】
  
    <filter-mapping>
      <filter-name>mobyletFilter</filter-name>
      <url-pattern>/*</url-pattern>
    </filter-mapping>
    <filter-mapping>
      <filter-name>FrontController</filter-name>
      <url-pattern>/*</url-pattern>
      <dispatcher>REQUEST</dispatcher>
      <dispatcher>FORWARD</dispatcher>
      <dispatcher>INCLUDE</dispatcher>
      <dispatcher>ERROR</dispatcher>
    </filter-mapping>
  
【略】

web.xml（一部抜粋）

　<filter-name>「mobyletFilter」の設定は、必ず「FrontController」の前に追加してください。FrontControllerが処理を行う前に、mobyletFilterでケータイサイトへの変換処理を行うためです。

まずは起動してプロジェクト完成

　Eclipseの実行メニューから、［デバッグ］→［Webアプリケーション］で、開発用サーバを起動できます。

　Slim3のホットリローディング機能により、アプリケーションの再起動をせずに更新が反映されます。

　以上で、プロジェクトは完成です。

文字コードと絵文字問題を解決するMobylet

　絵文字を表示するページを作成し、ケータイで確認してみましょう。その前に、ケータイの文字コードや絵文字について触れておきます。

文字コードについて

　ケータイサイトは、文字コードを「Shift_JIS」で作成すると聞いたことはないでしょうか？

　これは、日本の携帯大手3キャリアが、「Shift_JIS」に対応しているためです。機種によっては、「UTF-8」に対応している場合がありますが、昔の機種をサポートしたい場合、文字コードを「Shift_JIS」で扱う必要があります。開発言語として、Javaを使う場合、文字は内部的に「Unicode」で保存されます。

　そのため、「Shift_JIS」と「Unicode」間の変換が必要となります。また、絵文字コードという厄介な問題もあります。この文字コードの問題は、「Mobylet」を使うことにより、開発者は気にせずに済むようになります。変換処理を「mobyletFilter」が行います。これにより、プロジェクトで作成するファイルは、すべて「UTF-8」で作成できます。

絵文字について

　Shift_JISを使っていても、絵文字の問題により、一部の文字が化けてしまう場合があります。絵文字の文字コード体系は各キャリアで統一されておりません。しかも、絵文字は通常の「Shift_JIS」のコード外に設定されており、そのまま「Shift_JIS」を使っていては、変換に失敗し文字化けが発生します。

　ケータイサイトで絵文字を取り扱うには、各キャリアの絵文字が設定されている外字領域を考慮して変換する必要があります。また、キャリアごとに同じ絵文字を意味する文字コードも、別コードとなっているため、各キャリアの対応表を考慮してマッピングする必要があります。

　つまり、太陽の絵文字でも各キャリアによって、文字コードが違うため、それを考慮して変換する必要があります。絵文字って、面倒くさいですね。しかし、そんなときに「Mobylet」です。「mobyletFilter」が自動的に変換してくれるので、開発者は何も気にする必要はありません。いかに簡単かを次ページで解説します。