これは、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つの方法があります。
- PhoneGap（Cordova）のライブラリをAPEXに組み込む
- ローカルHTMLのIFRAME内でAPEXのWebページを表示し、クロスドキュメントメッセージングを使ってイベントをADF Mobileに伝播する
- 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!
