xpagesday2012 3-a titanium mobileによるモバイルアプリケーションとxpages連携

58
1-A Titanium Mobileによるモバイルア プリケーションとXPages連携 ジョンソンコントロールズ(株) システムエンジニア 哲司 3-A

Upload: tetsuji-hayashi

Post on 08-Jul-2015

370 views

Category:

Mobile


8 download

DESCRIPTION

XPagesDay2012 3-Aセッション資料

TRANSCRIPT

Page 1: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

1-A

Titanium MobileによるモバイルアプリケーションとXPages連携

ジョンソンコントロールズ(株)

システムエンジニア

林 哲司

3-A

Page 2: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

今日のテーマ

• Titanium Mobile&XPagesでどんな物が作れる?

• モバイルアプリケーションの開発手法比較

• Dominoでモバイル対応と言えば、UpgradePack(DojoMobile)じゃないの?

• Titanium Mobile開発基礎

• JSONって?

• JSONによるTitanium MobileとXPagesアプリのデータ連係

Page 3: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

Titanium Mobile&XPagesで どんな物が作れる?

Page 4: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

Titanium&XPagesでどんな物が作れる?

DEMO

Page 5: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

システム構成、技術構成

SQLite

DB

Notes

DB

Android

Server

ClientPC

WiFi

Titanium Mobile

Notes Client

Domino Server

JSON

JSChart

JSChart WiFi Rooter

Page 6: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

モバイルアプリケーションの開発手法

Page 7: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

モバイルに向いているアプリ

• 参照もの

• つぶやきもの

• 数値、記号入力もの

• ゲーム(ライトな物)

通常のNotesアプリのように文書情報をがっつり入力するのは今のところ面倒 ※手がフリックネイティブな人除く ※iPhone4Sユーザーの方はSiriを使えば出来る??

今後はゲームのようにタップやタッチを生かした業務アプリケーションが増えていく(はず)

Page 8: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

モバイルアプリケーション開発の方法

• Webアプリ(HTML5&CSS3) • Webサーバー上にあるHTMLファイルを参照する

• ネイティブ(Objective-C、Java) • Objective-CやJavaで記述され、モバイル端末にインストールするアプリ

• ハイブリッド(JavaScript、HTML+インストール可) • HTMLやJavaScriptで記述されているが、モバイル端末にインストール可能なアプリ

TitaniumMobile jQueryMobile

XCode(Objective-C) Java

DojoMobile

PhoneGap HTML5+CSS3

Silverlight

SenchaTouch

Page 9: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

Webアプリの特徴

• HTML5 & CSS3

• Domino UpgradePackもこれ

• 要ネットワーク環境

• パフォーマンス低(HTTP通信が発生)

• iOS Android両対応可

• ストア不可 • PhoneGap:buildとか使うと出来そうだけど・・・詳しくはわかりません。

• m(_ _)m

見るだけアプリならこれでOK! ちょっと凝ろうとするとたちまち面倒な事態に

Page 10: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

ネイティブの特徴

• Java/Objective-C

• スタンドアロン動作可

• パフォーマンス高

• 端末の機能をフルに使える(カメラ、GPS、センサー)

• iOS Androidは個別開発

• ストア可

ちょっとしたアプリでも、それなりの技術力が要求される

Page 11: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

ハイブリッドの特徴

• JavaScriptのみ(Titaniumの場合)

• スタンドアロン動作可

• パフォーマンス中(ほぼ高)

• 端末の機能が使える

• iOS,Android両対応可

• ストア可

• アプリサイズはネイティブに比べると大きくなる傾向

スタンドアロン動作が必要な要件、ネイティブ機能を簡単に呼び出したい場合はコレ!

Page 12: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

比較表

Webアプリ ネイティブ ハイブリッド

開発言語 HTML5/CSS3 Objective-C Java

JavaScript

パフォーマンス 低 高 中

開発容易性 ○ × ◎

iOS、Android両対応

◎ × ○

端末固有の機能が使えるか

○ ◎ ◎

要ネットワーク 要 不要 不要

Page 13: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

Dominoでスマホ対応って言ったら、UpgradePackじゃないの?

Page 14: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

UpgradePack1によるDesignerの進化

• ドラッグ&ドロップでコンポーネントを配置してデザインできるようになりました

大きな進歩です<( ̄^ ̄)>

Mobile コントロール

Page 15: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

でもね

• アウトラインビューを使ってコンポーネントを正確に入れ子にしないといけません!

• ちょっと複雑なことをしようとすると、プロパティではなく「ソースを解析して、いじってください」ってなります

• エラーになった場合には、ブラウザに何も表示されません(Domino8.5.3+UpGradePack1現在)

コンポーネントは正確に入れ子にしないといけません! (大切だから2回言いました!)

開発者はXPagesやDojo技術を極めたいわけではなく、アプリを作りたいのです!

Page 16: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

で作れるアプリはと言うと

• UpgradePackを使ったモバイルアプリって言うと・・・

Simple is BEST! スマホ対応黎明期なデザイン

Page 17: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

ちまたのモバイル用Webサイトは?

• こんな感じ

ここまでとは言わずとも、もう少しCoolにならないものか?

Page 18: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

100歩譲って「デザインはシンプルに行きましょう!」となった場合

• DojoMobile、UpgradePackの情報が少なすぎます

• カメラ、GPS、バイブレーション、センサーなど端末の機能を使いたい場合は?(PhoneGap?)

• ローカルレプリカのような動作をさせたい場合は?(電波がある時にローカルに一気にデータを持ってくる)

• 最新のDojo1.7も使えるが、情報が少なく、Dominoにインポートするとサポートが受けられなくなる

┐(‘~`;)┌

Page 19: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

XPagesのモバイルアプリ開発に必要な物

1. 英語サイトを検索する力(エキサイト先生可)

2. 試行錯誤する時間

3. 忍耐

Page 20: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

Titanium Mobile

そういう方に

\(^-^)/

高パフォーマンスなアプリを作りたい方はObjective-C/Java 簡単に業務アプリを作りたい方はTitanium

Page 21: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

Titanium Mobile開発基礎

Page 22: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

TitaniumMobileって?

• appcelerator(アプセラレータ)が開発したJavaScriptのみでiOS&Androidアプリが開発できる開発環境

• フリーで使える(有償サポートあり)

• Eclipseをベースとした統合開発環境あり

• JavaScriptのみでGUIとロジックを記述する

• 技術習得が簡単!

• 日本語コミュニティーが充実

Page 23: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

TitaniumMobile動作の仕組み

• JavaScriptコンパイラからコードをコンパイルし、ネイティブ機能を実行する(らしい)

Page 24: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

Titaniumでどんなアプリが作れる?①

• MogSnap-食べた物の画像とコメント

をアップし、ネット上で共有、評価(食べたいなど)を行う〈for iPhone〉

• 映画情報「myシアター」-新作

映画の紹介、予告を見たり、オンラインでチケットも買える〈for Android〉

• AKB前田敦子Maeda-1グランプ

リ-萌えアプリ? 〈for iPhone〉

Page 25: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

Titaniumでどんなアプリが作れる?②

• サイボウズLiveクライアント-スケジュール、ファイル共有、掲示板、

ToDoリストのクライアント〈for iPhone、Android〉

Page 26: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

開発環境の構築(Window+Android)

1. JDK(JavaSE)をインストール 1. JDKは1.7系ではなく、1.6系で

2. 64bit版Windows7の場合もJDKは32bit版で

2. Windowsの環境変数でパスを通す

3. Android SDKをインストール

4. appceleratorからTitanium Studio(Eclipseベース)をダウンロード(要ユーザー登録)して、インストール

5. Android端末のドライバをインストールし、PCにUSBケーブルで接続(Androidエミュレータはとにかく重い)

6. Android端末の設定画面で「提供元不明のアプリ」を許可、開発オプションの「USBデバッグ」をON

Mac+iOSの方、ゴメンナサイm(_ _)m 書籍を買うか?ググってください

Page 27: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

開発DEMO(実演)

• プロジェクトの作成

• 入力画面の作り方

DEMO

Page 28: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

Titaniumの「大変良く出来ました」

• とにかく短いコードで、パフォーマンスの高いアプリが作れる

• 画面とロジックを同じJavaScriptで書けるので容易に習得できる • 画面はXML、ロジックはJavaとかじゃない

• JavaScriptなので他のJavaScriptライブラリが使える

• ブラウザも呼べる

• 追加モジュール(有料、無料)で拡張可能(カメラでバーコードを読むライブラリとか)

AndroidとiOSのどちらのアプリも作れる! \(^-^)/

Page 29: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

Titaniumの「頑張りましょう」①

• iOSとAndroidの両対応するには、一部ロジックを変える必要がある(そもそもOS自体の設計思想が違う)

• iOSだけの機能もあります • 開発のベースがiOSを作ってからAndroidに対応させているから仕方がない

• 両対応のアプリを作るのであれば、両対応しているメソッドかを確認

仕様を機能が少ないAndroid側に合わせるのも良い (ニーズを次第でiOS用、Android用のクラスを定義する必要があるかも・・・)

iOSとAndroidの二つの開発環境を習得するのは大変!

Page 30: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

Titaniumの「頑張りましょう」②

• 画面の縦横比率が違う場合には工夫が必要

16:9 1280×720

4:3 960×640

15:9 800×480

480×320

960×540

854×480

Android系 iOS系

ロジック用とデザイン用のコードを分離し、機種によって読込むデザインを切り替える形が妥当

Page 31: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

Titaniumの「頑張りましょう」③

• 書き方によって発生しないイベントなどもあるので、仕様を決める前に単機能テストしておく必要がある(iOSでは発生するのかもしれません。)

Page 32: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

Titaniumに関する技術情報

• 書籍「TitaniumMobileで開発するiPhone/Androidアプリ」 北尾雅人著 翔泳社 • これ1冊でほぼカバーできる

• APIのリファレンスにAndroidのみ、iOSのみの表記あり

• 実機で動くかどうかをテストしていくのは現実的ではない

• グローバルナレッジチャンネル-Appcelerator Titanium Mobile ご紹介セミナー(USTREAM) • http://www.ustream.tv/recorded/16861889

• どっといんすとーる-Titanium Mobileの基礎 (全28回) • http://dotinstall.com/lessons/basic_titanium

• 仕組みがわかるスライド(Appceleratorの日本人社員@masuidrive作成) • http://public.iwork.com/document/ja/?d=TItanium_Mobile_Workshop_2011_47_02_47_16

.key&a=p278287629

• 連載 :Titanium Mobileで作る! iPhone/Androidアプリ • http://gihyo.jp/dev/serial/01/titanium

オススメ❤

Page 33: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

JSON(ジェイソン)って?

Page 34: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

JSONとは

• JavaScript Object Notationの略

• XMLなどと同様のテキストベースのデータフォーマット

• Ajax開発でデータ交換フォーマットとしてよく利用される

• XMLと比べると簡潔で人間が理解しやすい(フィールド名、値、配列などが明確)

AjaxはAsynchronous JavaScript + XMLの略

■JSONの例 [

{ “name”:”綾波レイ”, “machine”:”零号機”, }, { “name”:”式波アスカラングレー”, “machine”:”弐号機”, }

]

■XMLの例 <children>

<child> <name>綾波レイ</name> <machine>零号機</machine>

</child> <child>

<name>式波アスカラングレー</name> <machine>弐号機</machine>

</child> </children>

フィールド名 値 フィールド名 値

Page 35: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

JSONの記述方法 ■オブジェクト { "プロパティ1 " : 値1, "プロパティ2 " : 値2 }

■オブジェクトと配列のネスト {"children":[ {"name":"綾波レイ","age":14}, {"name":"碇シンジ","age":14}, {"name":"式波アスカラングレー ","age":14} ]}

中括弧{}で全体を囲み、プロパティ名(Notesだとフィールド名)と値をコロンで区切る 複数値データの場合には、カンマで区切る

■配列 [ "項目1 " , "項目2 " ]

大括弧で囲い、項目と項目はカンマで区切る

所詮ただのテキスト!怖れることはない!

ノーツで言うとオブジェクト1つで1文書

Page 36: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

Notesの文書だと

• JSON形式で文書を出力するXPagesを作成します

• 呼出し方法は普通にURLでXPagesを呼び出す

■出力結果 {"entries":[

{"Field01":"零号機","Field02":"綾波レイ"}, {"Field01":"初号機","Field02":"碇シンジ"}, {"Field01":"2号機","Field02":"式波アスカラングレー "}, {"Field01":"6号機","Field02":"渚カヲル"}

]}

http://xpages/jsonhttp.nsf/download.xsp

Page 37: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

DominoUpgradePackではJSON形式で 出力できるんじゃなかった?

• できます(Dominoデータサービス)

■出力結果(一部を抜粋) [ { "@href":"http:¥/¥/xpages:80¥/jsonhttp.nsf¥/api¥/data¥/collections¥/name¥/jsontestvw¥/unid¥/5B49802D91867C00492578D60017CC58", "@link": { "rel":"document", "href":"http:¥/¥/xpages:80¥/jsonhttp.nsf¥/api¥/data¥/documents¥/unid¥/5B49802D91867C00492578D60017CC58" }, "@entryid":"1-5B49802D91867C00492578D60017CC58", "@unid":"5B49802D91867C00492578D60017CC58", "@noteid":"8F6", "@position":"1", "@siblings":4, "@form":"TestFrm", "Field01":"¥u96F6¥u53F7¥u6A5F", "Field02":"¥u7DBE¥u6CE2¥u30EC¥u30A4" },

2バイト文字はエンコードされています ←零号機 ←綾波レイ

個人的には自前でコードを書いた方がシンプルでわかりやすいと思います

Page 38: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

Dominoデータサービスの使い方

1. サーバー文書-インターネットプロトコル-DominoWebEngine-Dominoアクセスサービスの「有効なサービス」に“データ | Data”と入力

2. Webサイト文書-設定-Dominoアクセスサービスの「有効なサービス」に“データ | Data”と入力

3. データベースのプロパティ-詳細タブ-LotusDominoデータサービスを許可に“ビューのみ”or”ビューと文書”のどちらかを選択

4. ビューのプロパティ-詳細タブ-Webアクセス-LotusDominoデータサービスの操作を許可にチェックをつける

5. ビューからのデータ出力の場合、下記のようなURLを指定 http://{host}/{database}/api/data/collections/name/{viewname} ※2のWebサイト文書は設定しなくても動作する 【IBMサポート技術情報】 日本語版 Lotus Domino で Domino データサービス (DDS) が利用できない http://www-01.ibm.com/support/docview.wss?uid=swg21587846

Page 39: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

JSONってどう使えるの?何が便利?

• XMLに比べてデータ量が少ない(サンドイッチしなくて良い)

• JavaScriptのevalを使うと、LotusScriptのDocumentクラスのようにデータを扱える • JSON.parseがある場合は、セキュリティリスク(クロスサイトスクリプティング)を考慮してJSON.parseを使って下さい

• evalは文字列を式として評価する関数です

Page 40: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

JSONによるTitanium MobileとXPagesアプリのデータ連係

Page 41: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

Dominoとのデータ交換(前準備)

• サーバー側ロジックはXPagesで記述します

• 新規のXPagesを作成し、「すべてのプロパティ-rendered」に”false”を設定

• コードはサーバーサードスクリプトの「afterRenderResponse」イベントに記述

普通の地球人にはわかりません! 神様であるIBM佐藤さんのチームに教えていただきました

Page 42: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

Dominoとのデータ交換(Download①) サーバー側コード(XPages-JavaScript)

//レスポンスのContentType、Cache-Controlヘッダを指定 var response = facesContext.getExternalContext().getResponse(); response.setContentType("text/plain"); response.setHeader("Cache-Control","no-cache"); //ResponseWriterにデータを書きだす(書き出すデータは関数で生成) var writer= facesContext.getResponseWriter(); writer.append(listViewEntries()); writer.flush(); writer.endDocument(); //JSONデータ出力関数 function listViewEntries(){ var viewArray = new Array(); var db:NotesDatabase = session.getDatabase(@Subset(@DbName(), 1),@Subset(@DbName(), -1)); var vw:NotesView = db.getView("TestVw"); var entries:NotesViewEntryCollection = vw.getAllEntries(); var entry:NotesViewEntry = entries.getFirstEntry(); while(entry){ var doc:NotesDocument = entry.getDocument(); var array= new Array(); array.push('Field01:"' + doc.getItemValueString("Field01")+'"'); array.push('Field02:"' + doc.getItemValueString("Field02")+'"'); viewArray.push("{"+array.join(",")+"}");

doc.recycle(); entry = entries.getNextEntry(); } entries.recycle(); vw.recycle(); db.recycle(); return ‘{“entries”:[¥n¥t’ + viewArray.join(‘,¥n¥t’)+’¥n]}’; }

後でソースは公開します

Page 43: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

Dominoとのデータ交換(Download②) サーバー側コード(XPages-JavaScript)

<呪文省略> function listViewEntries(){ var viewArray = new Array(); var db:NotesDatabase = session.getDatabase(@Subset(@DbName(), 1),@Subset(@DbName(), -1)); var vw:NotesView = db.getView("TestVw"); var entries:NotesViewEntryCollection = vw.getAllEntries(); var entry:NotesViewEntry = entries.getFirstEntry(); while(entry){ var doc:NotesDocument = entry.getDocument(); var array= new Array(); array.push(‘"Field01":"' + doc.getItemValueString("Field01")+'"'); array.push('"Field02":"' + doc.getItemValueString("Field02")+'"'); viewArray.push("{"+array.join(",")+"}"); doc.recycle(); entry = entries.getNextEntry(); } entries.recycle(); vw.recycle(); db.recycle(); return "{entries:[¥n¥t" + viewArray.join(',¥n¥t')+'¥n]}'; }

出力されるJSON配列を作成 データベースを開く ビューを開く ビューエントリーを取得する エントリーがなくなるまでLoop データの中身用配列を作成 配列にフィールド名、値をPush 出力用配列に中身用配列をPush JSON形式で出力

Notesクラスを指定するとコードの補完機能が働く

Page 44: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

Dominoとのデータ交換(Download③) クライアント側コード(Titanium Mobile-JavaScript)

btnDownload.addEventListener('click', function() { //HTTPオブジェクト作成 var xhr = Ti.Network.createHTTPClient(); xhr.open('GET','http://192.168.1.1/jsonhttp.nsf/download.xsp?OpenXPage'); //レスポンス受取イベント定義 xhr.onload = function(){ var json = JSON.parse(this.responseText); var pos; for( pos=0; pos < json.entries.length; pos++){ alert(json.entries[pos].Field01+'¥n'+ json.entries[pos].Field02); }; }; //リクエスト送信 xhr.send(); });

通信オブジェクトを作成 URLを指定(GET) 受け取ったレスポンスをJSONオブジェクトに変換 ループ リクエスト送信

NotesDocumentの

doc.Field01に近い

Page 45: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

Dominoとのデータ交換(Upload①) サーバー側コード(XPages-JavaScript)

//POSTされたリクエストを読み込み var request = facesContext.getExternalContext().getRequest(); if("POST"==request.getMethod()){ try{ var stream = request.getInputStream(); var out = new java.io.ByteArrayOutputStream(); var buf = new byte[1024]; var num; while((num = stream.readLine(buf,0,1024))!=-1){ out.write(buf,0,num); } //POSTされたJSON形式文字列をJSONオブジェクトに変換 var data = eval("(" + out.toString("UTF-8") + ")"); //POSTされたデータから文書を作成し、戻り値をResponseWriterに データ書き出し var writer = facesContext.getResponseWriter(); writer.write(createEntry(data)); writer.flush(); writer.endDocument(); }catch(e){ print(e); } }

HTTPリクエスト受取 <呪文> UTF-8でデコードして変換 createEntry関数にデコードしたデータを引き渡し 文書作成の本体はこ

の自作関数

Page 46: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

Dominoとのデータ交換(Upload②) サーバー側コード(XPages-JavaScript)

//POSTされたデータから文書を作成 function createEntry(data){ if(data){ var db:NotesDatabase = session.getDatabase(@Subset(@DbName(), 1),@Subset(@DbName(), -1)); var doc:NotesDocument = db.createDocument(); doc.replaceItemValue("Form","TestFrm"); doc.replaceItemValue("Field01",data.Field01); doc.replaceItemValue("Field02",data.Field02); doc.computeWithForm(true,false); doc.save(); //Notesオブジェクトを解放 var documentid = doc.getUniversalID(); doc.recycle(); db.recycle(); //作成した文書のUniversalIDを返す return "{status: ¥"success¥",documentid:¥"" + documentid + "¥"}"; }else{ return "{status:¥"error¥"}"; } }

文書作成 フォーム指定 フィールドに値を書込 文書再計算 保存 Notesオブジェクトを解放 文書IDを返す (別に返さなくてもよい)

Page 47: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

Dominoとのデータ交換(Upload③) クライアント側コード(Titanium Mobile-JavaScript)

btnUpload.addEventListener('click', function() { //HTTPオブジェクト作成 var xhr = Ti.Network.createHTTPClient(); xhr.open('POST','http://192.168.1.1/jsonhttp.nsf/upload.xsp?OpenXPage'); //レスポンス受取イベント定義 xhr.onload = function(){ alert(this.responseText); }; //送信用パラメータ(登録データ)定義 var params = '{"Field01":“6号機","Field02":"渚カヲル"}'; //リクエスト送信 xhr.setRequestHeader('Content-Type','text/xml'); xhr.send(params); });

通信オブジェクトを作成 URLを指定(POST) 受け取ったレスポンスを表示 送信するデータを設定(フィールド名:値) リクエスト送信

フィールド名と値をJSON形式で渡す

Page 48: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

Dominoとのデータ交換(FileUpload①) サーバー側コード(XPages-JavaScript)

var extContext = facesContext.getExternalContext(); var request:javax.servlet.http.HttpServletRequest = extContext.getRequest(); if ("POST" == request.getMethod()) { //JSON形式でPOSTされたファイル、パラメータを取得 var fileData:com.ibm.xsp.http.UploadedFile = request.getParameterMap().get("fileobj"); var tmpFile:java.io.File = fileData.getServerFile(); var fileName = request.getParameter("filename"); var field01 = request.getParameter("field01"); var field02 = request.getParameter("field02"); //一時ファイルとしてアップロードされた画像を元のファイル名をつけ、移動 var correctedFile = new java.io.File( tmpFile.getParentFile().getAbsolutePath() + java.io.File.separator + fileName ); var success = tmpFile.renameTo(correctedFile); //パラメータで渡された点検日時、ポイントIDからデータ文書を特定 var doc:NotesDocument = database.createDocument(); doc.replaceItemValue("Form", "TestFrm"); doc.replaceItemValue("Field01", field01); doc.replaceItemValue("Field02", field02);

添付ファイル取得 一時ファイル取得 パラメータ(フィールド)取得 一時ファイルに元のファイル名をつけ移動 文書作成 フィールド書込 〃 〃

Page 49: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

Dominoとのデータ交換(FileUpload②) サーバー側コード(XPages-JavaScript)

<続き> var fileRichText:NotesRichTextItem = doc.getFirstItem("ImageBody"); if (fileRichText == null){ var fileRichText:fileRichText = doc.createRichTextItem("ImageBody"); } //リッチテキストフィールドにファイルを添付 fileRichText.embedObject(1454, "", correctedFile.getAbsolutePath(), null); // //画像ファイルを一時ファイルにリネーム(削除はOSのキャッシュ削除に任せる) correctedFile.renameTo(tmpFile); doc.save(); var documentid = doc.getUniversalID(); doc.recycle(); }

リッチテキストアイテム取得 ファイル添付実行 文書保存

Page 50: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

Dominoとのデータ交換(FileUpload③) クライアント側コード(Titanium Mobile-JavaScript)

btnFileUpload.addEventListener('click', function() { Ti.Media.openPhotoGallery({ //PhotoGallery:選択時の動作 success: function(event) { var image; image = event.media; //選択した画像を取得 var filePath = image.nativePath; var fileName = filePath.substring(filePath.lastIndexOf('/')+1); //HTTPオブジェクト作成 var xhr = Ti.Network.createHTTPClient(); xhr.open('POST','http://192.168.1.1/jsonhttp.nsf/httpfileupload.xsp?OpenXPage'); //HTTPリクエスト送信 xhr.send({fileobj:image,filename:fileName,field01:‘3号機’,field02:‘鈴原トウジ'}); }, // PhotoGallery:キャンセル時の動作 cancel: function() { return false; }, // PhotoGallery:選択可能なメディア種別を配列で指定 mediaTypes:[Ti.Media.MEDIA_TYPE_PHOTO], }); }

選択した画像を取得 画像ファイルパス取得 画像ファイル名取得 HTTPオブジェクト作成 URL指定 画像ファイル、フィールドなどをJSON配列で送信

Page 51: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

おまけ IBMさんへの要望

Page 52: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

要望①:最新版での体系的な開発情報

• Domino8.5.3+UpgradePackをベースとしたXPagesを体系的に学べる日本語の情報を出して下さい

• 初期のXPagesとUpgradePack付きではかなり開発環境が変わってしまいました

• ググると古いOneUIの作り方(複雑にコントロールを配置するか?意味不明のソースと格闘)が出てきたり・・・

【@IT】XPagesでLotus Notes/Dominoアプリ開発入門(1) http://www.atmarkit.co.jp/fjava/rensai4/xpages01/01.html 5/11 IBM佐藤さん連載開始 期待してます! (UpgradePackのリファレンスも作って下さいね。何ができるコンポーネントか?)

Page 53: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

要望②:リファレンスにはサンプルコードを

• XPagesのリファレンスにサンプルコードをつけて欲しい

• 技術セミナーは動画でUstreamやニコニコ動画で配信して欲しい

• 1000円以下なら有料でも良いです

Page 54: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

要望③:一番欲しい物・・

• でもやっぱり今、一番欲しいのは・・・

今すぐ!

XPagesアプリをアップできるLotusLiveを 課金システム付きで構築して欲しい

Page 55: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

ありがとうございました

• 本日はご清聴ありがとうございました

ミ★(*^-゚)v Thanks!!★彡

Page 56: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

付録:Titaniumコーディング Tips①

• ソースコード内に配置したSQLiteDBを読み込むには下記のコードで読み込む

• 一度読み込むと、内蔵メモリに読み込まれ、再度同じコード実行された場合には、メモリ内DBが優先される

• 再度ソース内DBを開くには、メモリ内DBを削除するか、アプリ自体をアンインストールする必要がある

• ソースが正しいのにDBを読み込めない場合には、メモリ内DBを削除してみる

ソース内DB

メモリ内DB

var db= Ti.Database.install('db/database.db',‘database1');

インストールするとコピーされ、メモリ内DBが開かれる

db.remove();

Page 57: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

付録:Titaniumコーディング Tips②

• メモリ内DBをSDカードに出力するには下記のように記述する

//メモリ上にコピーされたデータベースファイルを取得 var dbDir= 'file:///data/data/' + Ti.App.getID() + '/databases/'; var dbFile= Ti.Filesystem.getFile( dbDir + ‘database1' ); //SDカード上のSQLiteDBを取得 var sdDir= Ti.Filesystem.getFile(Ti.Filesystem.externalStorageDirectory); var sdFile = Ti.Filesystem.getFile(sdDir.nativePath + '/', ‘database.db'); //ファイルをコピー var resources =dbFile.read(); sdFile.write(resources);

Page 58: XPagesDay2012 3-A Titanium mobileによるモバイルアプリケーションとXPages連携

付録:Titaniumコーディング Tips③

• アプリをSDカードにインストール可能にするには、Titaniumプロジェクトの設定ファイルであるtiapp.xmlのソースに下記の項目を追加する

• SONY MobileのXperiaはカメラアプリの作り込みが特殊なので、呼出方を工夫する必要がある

<!--SD Cardへのインストール許可(Android2.2(API Ver8)以降)--> <android xmlns:android="http://schemas.android.com/apk/res/android"> <tool-api-level>8</tool-api-level> <manifest android:installLocation="auto"> <uses-sdk android:minSdkVersion="7"/> </manifest> </android>