30
NOTES/DOMINO アアアアアアア アアアア アアアアアアアアアアアアアアア アア ア アア Notes/Domino Web アアアア 2015 ア 8 ア

Notes Dominoアプリのモバイル化戦略

Embed Size (px)

Citation preview

Page 1: Notes Dominoアプリのモバイル化戦略

NOTES/DOMINO アプリのモバイル化戦略チームスタジオジャパン株式会社加藤 満

月刊 Notes/Domino Web セミナー 2015 年 8 月

Page 2: Notes Dominoアプリのモバイル化戦略

本日のアジェンダ

【現状】 Domino Designer 標準機能でできるモバイルアプリ 【近い将来】時期リリース (9.0.2) のモバイルアプリ 【これまでも、これからも】知らないと損するモバイルアプリ開発手法

Page 3: Notes Dominoアプリのモバイル化戦略

【現状】 Domino Designer 標準機能でできるモバイルアプリ

Page 4: Notes Dominoアプリのモバイル化戦略

標準モバイルコントロール

Page 5: Notes Dominoアプリのモバイル化戦略

標準モバイルコントロールのインターフェース

Page 6: Notes Dominoアプリのモバイル化戦略

標準コントロール

iOS7

Page 7: Notes Dominoアプリのモバイル化戦略

標準モバイルコントロール

Dojo モバイルを使用 スマートフォン用に限定 iOS の UI と比較すると 3 世代以上前の UI 結局、 Dojo にやる気を感じないし、欧米開発コミュニティも三行半を突きつけた

Page 8: Notes Dominoアプリのモバイル化戦略

【近い将来】時期リリース (9.0.2)のモバイルアプリ

Page 9: Notes Dominoアプリのモバイル化戦略

先週行われた MWLUG 2015 App.NEXT The Future of Domino Application Development より

https://youtu.be/z3TuvmHY0_k

Page 10: Notes Dominoアプリのモバイル化戦略

【近い将来】時期リリース (9.0.2) のモバイルアプリ

IBM Notes/Domino 9.0.2 今年の後半に出荷される予定 現在の OpenNTF XPages Extension Library の機能がフィードバックを受け、日本語もされ実装されるはず

ビッグニュースは jQuery + Bootstrap の実装されるはず

Page 11: Notes Dominoアプリのモバイル化戦略

jQuery + Bootstrap

jQuery は Dojo に対抗するライブラリー http://jquery.com

Bootstrap の前提は jQuery http://getbootstrap.com Bootstrap をベースとして数多くの派生フレームワーク Bootstrap は Responsive Web Design

⇒ つまりデスクトップ用に作れば、スマホ/タブレットにも

Page 12: Notes Dominoアプリのモバイル化戦略

OpenNTF XPages Extension Library の入手とインストール

http://extlib.openntf.org 最新版「 901v00_13.20150611-0803 」 IBM Notes/Domino 9.0.1 用

インストール 「 OpenNTF XPages Extension Library のインストール方法」 Domino Designer Wiki

http://XPag.es/?1FDA

Page 13: Notes Dominoアプリのモバイル化戦略

既存のアプリを Bootstrap 仕立てに

「 XPages Extension Library で Bootstrap と Responsive Web Design を実装」 notes/domino liaison ブログより

http://XPag.es/?1FDE 「 XPages Extension Library で Bootstrap と

Responsive Web Design を実装 (2) 」 notes/domino liasion ブログより

http://XPag.es/?1FE2

Page 14: Notes Dominoアプリのモバイル化戦略

既存のアプリを Bootstrap 仕立てに

Page 15: Notes Dominoアプリのモバイル化戦略

従来からある OneUI のテーマ

Page 16: Notes Dominoアプリのモバイル化戦略

Bootstrap のテーマ適用後のデスクトップから見たアプリ

Page 17: Notes Dominoアプリのモバイル化戦略

Responsive Web Design 対応でモバイル端末で見た場合

Page 18: Notes Dominoアプリのモバイル化戦略

【これまでも、これからも】知らないと損するモバイルアプリ開発手法

Page 19: Notes Dominoアプリのモバイル化戦略

【これまでも、これからも】知らないと損するモバイルアプリ開発手法

モバイル化したいデータベースにフレームワーク(js+css) を実装する

8.5.3 以降 (attributes プロパティ、 tagName プロパティ によってフレームワーク実装が容易に ) 自分で探してきたフレームワークを利用する

Page 20: Notes Dominoアプリのモバイル化戦略

XControls

Page 21: Notes Dominoアプリのモバイル化戦略

XControls とは?

IBM Notes/Domino の XPages 開発専用のフレームワーク Teamstudio がイニシアチブをもって公開するオープンソース

あらゆるデバイスにフィットする Web UI を提供 デスクトップ スマートフォン タブレット

XPages 開発専用 Notes/Domino 8.5.3 以降 Dojo の使用はなし HTML/CSS/JS を自分自身で拡張可能

情報をカード形式で表示

Page 22: Notes Dominoアプリのモバイル化戦略

XControls を構成するリソースjQuery

Bootstrap

Bootcards

XControls XPages専用

Font Awesome

JS+CSS

JS+CSS

JS+CSS

XPages/カスタムコントロール

Page 23: Notes Dominoアプリのモバイル化戦略

XControls の入手方法

http://jp.teamstudio.com/resources/product-downloads

製品ダウンロード

Page 24: Notes Dominoアプリのモバイル化戦略
Page 25: Notes Dominoアプリのモバイル化戦略
Page 26: Notes Dominoアプリのモバイル化戦略

XControls の中身

Page 27: Notes Dominoアプリのモバイル化戦略

XControls のサンプルデータベースで遊んでみる

XControlsSampler_< バージョン番号 >.nsf 現時点での最新バージョンは 1.5 (2015 年 8 月 10 日時点 ) 使用する前に、すべての設計に署名

Page 28: Notes Dominoアプリのモバイル化戦略

XControls DEMO

Page 29: Notes Dominoアプリのモバイル化戦略

MDAP キャンペーン 2015 年 9 月末日まで http://

jp.teamstudio.com/modernization-campaign-0 開発を無料でサポートするコンサルティングサービス Web ブラウザ、モバイル環境に対応する開発をサポート

Page 30: Notes Dominoアプリのモバイル化戦略

ご静聴ありがとうございました ご質問をお受けします。 Webex の「 QA パネル」からどうぞ セッション退席後のアンケートにご忌憚のないご意見、ご希望を