これからのNOTESモバイルアプリはこう作れ後悔しない技術の選択とその開発方法

チームスタジオジャパン株式会社Technical Director

加藤満 (mitsuru_katoh@teamstudio.com)

@katoman

前置き

• 「モバイルアプリケーション」はスマートフォン、タブレット上で動作する業務アプリケーションの意味として

• 業務アプリケーションは IBM Notes/Domino のデータベースをもとにしたカスタム「nsf」アプリケーション(Traveler、iNotesといったメール/カレンダーのような標準機能のお話ではありません)

AGENDA

• 自分にあった最適なモバイルアプリ開発手法を探る

• Teamstudio Unplugged について

モバイルアプリの2つのタイプ

モバイルアプリ開発の3つのタイプ

• モバイルWebアプリケーション• HTML + JavaScript + CSS

• モバイルアプリ用にユーザーインターフェースを整形するフレームワーク利用

• ハイブリッド(Hybrid)• HTML + JavaScript + CSS でコーディング

• ファクトリーツールを使って、ネイティブアプリを生成

• ネイティブ(Native)

• ハイブリッドとネイティブの違いは開発方法（言語）とそれぞれのデバイスへの最適化具合• 例）ちょっと前まで「Facebook」アプリはハイブリッド型で作成されていました。

開発手法選択の際の比較検討要因

• 開発技術の習得難易度

• パフォーマンス

• アプリ配布の容易性

• 開発ライフサイクル

• 開発時間（コスト）

• デバイス機能へのアクセス

• オフライン機能

開発技術の習得

• モバイルWeb

• Domino を Webサーバーとした Web アプリケーション

• UIコンポーネントはCSSやJavaScriptを使用

• XPages - Domino Designer 8.5.x/9.0

• 既知の技術で開発できるという大きなメリット

• ハイブリッド/ネイティブ• ハイブリッドの雄としてPhoneGapやTitanium。

• HTML5+CSS+JavaScript → ネイティブアプリ

• Objective CやJava言語によるネイティブアプリ作成

• REST API を使ってドミノにアクセス、情報のやり取り。難しい。

• 専用の言語や開発環境の習得が必須

モバイルWeb ハイブリッド ネイティブ

容易 容易 難しい

パフォーマンス

• モバイルWeb

• 常にサーバーとトラフィックのラウンドトリップが発生

• デザイン(HTML、スクリプト、スタイル)とデータの両方を常にやり取り

• ハイブリッド/ネイティブ

• アプリケーションのデザインはネイティブ、既にインストールされているので残りのデータのやり取り発生。

モバイルWeb ハイブリッド ネイティブ

悪い 普通 良い

アプリ配布

• モバイルWeb

• 作成してすぐ公開できる

• Dominoサーバーへのアクセス、Domino Designer で開発

• ハイブリッド/ネイティブ• ストア(Apple/iOSの場合、Enterprise ストアなど)へのアプリ配布

• Androidの場合は独自で配布の仕組みを

• お客様のスキルによっては、ストアもSIerがお客様にかわって面倒見ないといけない

モバイルWeb ハイブリッド ネイティブ

容易 難しい 難しい

開発ライフサイクル

• モバイルWeb

• 作成してすぐテスト、公開できる

• Dominoサーバーへのアクセス、Domino Designer で開発

• ハイブリッド/ネイティブ• テストにせよ煩わしい。

• 問題が発生してもすぐには解決できない

モバイルWeb ハイブリッド ネイティブ

短期間 長期間 長期間

開発時間(コスト)

• モバイルWeb

• モバイル用のフレームワークをマスターすれば(XPagesはもちろん)、わずか数日

• iOS、Androidでも同じアプリが使える

• ハイブリッド/ネイティブ• 前出の新たな開発技術の習得にかかる時間/コスト

• それぞれのデバイス用に作成する必要あり

• Notes/Domino以外以外でもモバイル分野に本格参入したいのであれば

モバイルWeb ハイブリッド ネイティブ

短く安価 長期で高額 長期で高額

デバイス機能へのアクセス

• モバイルWeb

• (ほとんど)できない

• 写真などのアップロードもダメ

• ハイブリッド/ネイティブ

• ネイティブアプリであればデバイスの機能にアクセスできるが、Dominoアプリのモバイル化でその必要性がある？

モバイルWeb ハイブリッド ネイティブ

難しい 普通 普通

オフライン機能

• モバイルWeb

• 最近ではHTML5対応で対応可能と言われている

• でも実際はキャッシュ程度と考えたほうがよい

• 基本的に苦労すれど身にならない

• ハイブリッド/ネイティブ• アプリに別のデータベースあるいはストレージを持つ

• デバイス上のデータベースの設計や管理がまた必要

• スペシャリスト以外には敷居が高い

モバイルWeb ハイブリッド ネイティブ

なし 可能、でも難しい 可能、でも難しい

タイプ別モバイルアプリ比較サマリー

モバイルWeb ハイブリッド ネイティブ

開発技術の習得難易度

容易 容易 難しい

パフォーマンス 悪い 普通 良い

アプリ配布が容易か?

容易 難しい 難しい

開発ライフサイクル

短期間 長期間 長期間

開発時間(コスト) 短く安価 長期で高額 長期で高額

デバイス機能へのアクセス

難しい 普通 普通

オフライン機能 なし 可能、でも難しい 可能、でも難しい

開発プロジェクトでのその他考慮事項

• 一次的要因• デバイスの特別な機能(カメラ、フラッシュ、アクセロメーター

etc...)を使う必要があるか？

• 二次的要因• 予算

• すべてのモバイルデバイスをターゲットにする必要があるか？

• 電波状況によってデバイスが使えない場合の機会損失は?

• スピードやパフォーマンスはどれぐらい重要な要素か？

• 自分が扱えるプログラミング言語は？

アプリの利用形態の側面から考えてみよう

利用形態 ユーザー 端末 技術

BYOD 一般 スマートフォン Webモバイル + セキュリティ

会社支給 幹部 スマートフォン Webモバイル + セキュリティ + MDM

会社支給 特別な業務で使用

iPad、タブレット データ同期 + MDM

導入事例から学ぶ典型的な利用形態

Responsive Web Design

• PC、スマートフォン、タブレットそれぞれの画面サイズに合うレイアウトを自動生成• Write once, run anywhere

• 2013年はResponsive Web Design 元年

• 有名なフレームワークはすでに対応 jQuery Mobile、Twitter

Bootstrapなど

• 対応している身近なサイトの例

• http://view.jquerymobile.com/demos/

• http://mashable.com/

• http://ja.collaborationtoday.info/

結論

Notes/Domino アプリケーションのモバイル化はどうしたらいい？

• まずは XPages による Web モバイルアプリケーションを作成

• Responsive Web Design 対応のフレームワークを使う

なぜ？

• 一言で言えば、「後でつぶしが効く」

いつ作るか？

• 「今でしょ！」

ところでIBMモバイル戦略と言えば...

• IBM Worklight

• Domino + Worklight はプラン中

• 2012年5月 Ed Brill のプレゼンでは...• http://www.slideshare.net/edbrill/ibm-mobile-strategy-for-social-business-may-2012

• “IBM Lotus Domino and IBM Worklight used together will allow you to

reuse parts of your Domino XPages mobile application investment with

the on-device experience”

• 現時点では Domino Designer/XPages との統合の具体的な話は聞こえてこない。

2013

IBM Collaboration

Solutions

for Mobile Device

Award

WINNER 受賞

タイプ別モバイルアプリ比較

モバイルWeb ハイブリッド/

ネイティブTeamstudio

Unplugged

開発技術の習得難易度

○ ×

パフォーマンス × ○

アプリ配布が容易か?

○ ×

開発ライフサイクル

○ ×

開発時間(コスト) ○ ×

デバイス機能へのアクセス

× ○

オフライン機能 × ○

Teamstudio Unpluggedは各ストアからダウンロード可能

Teamstudio Unpluggedの３つの特徴

• オフライン機能

• XPagesアプリケーション

• 簡単な導入

オフライン機能

• ノーツデータ、XPages設計、リソースファイルを端末に同期

• ユーザー識別(ノーツアカウントとHTTPパスワード)はデバイス上に

• 「まるで、ノーツクライアントの複製のよう!!!」

XPagesアプリケーション

• 余分な投資が不要

• 自由なアプリケーションUI

• フレームワーク利用で開発工数省力化

XPagesアプリケーション

• 余分な投資が不要• Domino Designerで開発、他の余分なSDKは一切必要なし

• 自由なアプリケーションUI

• フレームワーク利用で開発工数省力化

XPagesアプリケーション

• 余分な投資が不要

• 自由なアプリケーションUI

• フィールドマッピング型の簡易ソリューションではないのでフレームワーク利用でこんな特殊なことも実現可能

• フレームワーク利用で開発工数省力化

XPagesアプリケーション

• 余分な投資が不要

• 自由なアプリケーションUI

• フレームワーク利用で開発工数省力化• jQuery MobileなどJavaScript+CSSで構成されるフレームワーク

簡単な導入

システム構成

• Domino 8.5.1以降

• Domino Designer 8.5.1以降

• 対応プラットフォーム

• Dominoサーバーに2つのデータベース(設定とログ)

DEMO

ご覧いただいたとおり...

• Unplugged アプリケーションは XPages で作成• XPages でWeb モバイルアプリがあれば、簡単に「Unplugged

化」

• オフライン機能のメリット• 機敏な動作

• ユーザー識別の保持

• 簡単な導入• 設定データベースで使用ユーザー/アプリケーション配布の管理

参考URL

• Teamstudio Unplugged 公式サイト• http://unplugged.teamstudio.com

• YouTube TSUnpluggedJapan チャンネル• http://www.youtube.com/user/TSUnpluggedJapan

• Unplugged かんたんスタートガイド• https://teamstudio.box.com/unpluggedstartguidejp

• notes/domino liaison

• http://notesdominoliaison.blogspot.jp

• OpenNTF Unplugged XPages Mobile Controls• http://www.openntf.org/internal/home.nsf/project.xsp?action=openDocument&name

=Unplugged%20XPages%20Mobile%20Controls