[Mobile, Database, FMW] Application ExpressとADF Mobileを使ってモバイルアプリケーションを作る

これは、JPOUG Advent Calendarの2013年12月22日のエントリです。昨日は @YDYSK さんのエントリでした。

【Oracle】【性能】SQL_ID指定でトレースを設定する方法
http://blog.livedoor.jp/y_db_y/archives/2013-12-21.html

今日はOracle製品に含まれる機能を使って、モバイルデバイスの機能を利用するモバイルアプリケーション（具体的には、簡単な日記アプリケーション）を作るお作法をまとめてみました。

必要なもの

• Oracle Database + Oracle Database Application Express（以下、APEX）
• Oracle JDeveloper 11.1.2.4
• 各プラットフォームのSDK

APEX 4.2にはjQuery MobileのUIライブラリを含んでいるので、Responsive Designを持つWebアプリケーションを作ることができます。また、HTML5に対応したUIコントロールが使えたり、Canvasも使えたり、WebSocketで通信したり、なんてことも、もちろん可能です。
JDeveloper 11.1.2.4は、Oracleのモバイル向け開発フレームワークであるADF Mobileを開発するためのIDE（統合開発環境）です。このADF MobileがOSの違いを吸収し、Android、iOS上で動作するモバイルアプリケーションを作成することができます。UIの開発はJSF2ライクなADFを使って開発できますが、このエントリでは、APEXのUIを表示することにします。
なお、あみゅーさん（@amyu_san）がAndroidからJDBCでOracle Database 12cに接続したい、と仰有っていましたが、ADF MobileではJavaコードを実行することができますので、JDBCで接続するようなコードを書いてみる、なんてことも可能です。

Android と Oracle の仲直り（あみゅーの奮闘記）
http://orclemast.blog.fc2.com/blog-entry-315.html

（こっそり）
ロジ子としては、WebLogic ServerやGlassFishのようなアプリケーションサーバー、Coherenceのような分散キャッシュを使うことを推奨しますが、今回は「簡単に」作ることを意図しているので、このような構成にしています。実際に運用することを考慮すれば、セキュリティ要件も考慮する必要がありますので、「あー、こんな感じで作れるんだ」ぐらいに感じてもらえれば。

JDeveloper 11.1.2.4をダウンロード・インストールする

OTNからダウンロードするのですが、12cや11gR1 (11.1.1.7)用のJDeveloperではADF Mobileを使った開発ができませんので、ご注意ください。Mac OSXへのインストールはちょっと追加作業が必要なので、詳しくは以下のWikiを参考にして下さい。

Oracle ADF Mobile Mac Installation Guide
https://wikis.oracle.com/display/jdeveloperandadf/Oracle+ADF+Mobile+Mac+Installation+Guide

Android SDK、XCodeをインストールしておく

動作させたいプラットフォームのSDKを用意しておきましょう。動作保証済みのバージョンをお使い下さい。

APEXでMobile Webアプリケーションを作る

前述の通り、APEXにはモバイルWebアプリケーションを作成するための機能が備わっています。作り方はデスクトップWebアプリケーションと同じですが、UIのスキンをモバイルWebアプリケーション用に変更しましょう。あと、もう1点注意が必要な箇所があります。
日本語でAPEXを利用している場合、次のようなエラーが出てモバイルアプリケーションを作ることができない場合があります。スクリーンショットからもわかるように、日本語環境で作成すると、DISPLAY_NAMEが30Byteを超過してしまうというお粗末な例外が発生することがあります。これが発生する場合には、APEXを英語で利用し、アプリケーション作成ウィザードを進めてください。

モバイルデバイスの機能を使えるようにする

今回は、カメラで撮影した写真をデータベースにUpしたいのですが、ここで3つの方法があります。

1. PhoneGap（Cordova）のライブラリをAPEXに組み込む
2. ローカルHTMLのIFRAME内でAPEXのWebページを表示し、クロスドキュメントメッセージングを使ってイベントをADF Mobileに伝播する
3. ADF MobileでリモートHTMLを表示し、www/js/base.jsライブラリを参照する<script>タグを使う

1.はオーソドックスにPhonegap（Cordova）ライブラリをAPEXで利用できるようにする、というものです。この場合、Cordova.jsをそのままAPEXに組み込むため、初回のロードに時間がかかるというデメリットがあります。また、ライブラリはAndroid、iOSでモノが違うため、以下のような感じでUser Agentによってロードする対象を切り替える必要があります。

<script>
(function loadCordova() {
  
  //User Agentを小文字にして比較
  var uagent = navigator.userAgent.toLowerCase();
  
    if (uagent.search("android") > -1) {
       document.write('<script src="#WORKSPACE_IMAGES#cordova.android.js" type="text/javascript">' +
                      '<//script>');
    } else if (uagent.search("iphone") > -1) {
       document.write('<script type="text/javascript" ' +
                     'src="#WORKSPACE_IMAGES#cordova.ios.js">' +
                     '<//script>');
    }
   
})();
</script>

2はローカルHTMLに対しイベントを発行し、その結果を受け取る、というものです。IFRAME内のWebアプリケーションからは以下の方法でメッセージを送信することができます。

window.parent.postMessage({data: "yourData"}, "file://");
iframe.parent.postMessage({data: "rad"}, "http://yourdomain.com"); 

ローカルHTMLファイルには、イベントリスナーを登録しておき、メッセージを受け取ったあと、Cordova APIを呼べるようにしておきます。

window.addEventListener("message", function(event) {
  // 期待する送信元からのイベントかどうかをチェックする
  if (event.origin == url) {
    // メッセージの処理コードを追加
  }
}); 

3は、リモートURLをadfmf-feature.xmlに登録、ホワイトリストを設定するというもので、カメラを使うためのJavaScriptコードはAPEXに記載します。具体的にはADF Mobileのドキュメントにも記載されています。一番設定の手間が少ないので、こちらを利用されることをお勧めします。

Oracle® Fusion Middleware Oracle Application Development Frameworkモバイル開発者ガイド 11g リリース2 (11.1.2.4.0)
リモートURL実装によるApache Cordovaへのアクセスの有効化の概要
http://docs.oracle.com/cd/E48694_01/doc.111240/b70750/remoteurl.htm#BABCIBHE

1〜3のいずれも、あとはCordova APIを呼び出すだけです（2はイベントリスナーを実装する必要がありますが）。例えばこんなJavaScriptを作り、ボタンにバインドすれば、デバイスのカメラで写真を撮ることができます。

function capturePhoto() {
   // カメラで撮影した写真をBase64エンコードで読み出す
   navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
      quality: 50,
      destinationType: destinationType.DATA_URL
   });}

// 写真の読み取りに成功した場合
function onPhotoDataSuccess(imageData) {
   // console.log(imageData);
  
   // イメージ要素を表示
   $("#smallImage").css("display", "block");

   // 撮影した写真を表示
   $("#smallImage").attr("src", "data:image/jpg;base64," + imageData);
  
   // イメージデータをコピー
   staticImg = imageData;
}

// 何かおかしなことが起きた場合
function onFail(message) {
   alert('Failed because: ' + message);
   console.log('Failed because: ' + message);
}

その後、この写真をデータベースにアップロードすればいいですね。アップロードはAPEXのJavaScript APIを使ってもいいですし、プロシージャを作成してアップロードしてもよいでしょう。できたアプリはこんな感じです。

いかがでしょうか。案外簡単にできそうでしょ。
Oracleのツールだけでさらっとモバイルアプリを作ってみませんか。

明日は、 sh2nd さんのエントリです。
それでは、Happy Christmas!