XPagesDay 2014 でのセッション

1. 【B-‐‑‒1】最新のモバイル UI を瞬時に作成
〜～XControlsのご紹介〜～
チームスタジオジャパン株式会社
加藤満

3. iOS7

4. Dojo モバイルて、どうよ？
■IBM Worklight でさえ使われる機会が少ない(予想)
■iOS 8 になってから動かなかった(笑) ⇒ Dojoのバグと判明(事実)
■Dojoモバイル使っている開発者みたことない(⾃自分に友達が少ない
だけかも)
■既にモバイル開発を成功させたところは、jQueryMobileや他のフ
レームワークを使っている(確信)
■もしくは、Web化しただけのNotesWebでモバイル化したと勘違い
して喜んでいる(偏⾒見見)

5. なにか他にいいものを探さなければ。。。

6. ■OpenNTF で公開されているオープンソース
■http://openntf.org/main.nsf/project.xsp?r=project/
XControls

7. ■あらゆるデバイスにフィットするWeb UIを提供
■デスクトップ
■モバイル
■タブレット
■XPages 開発専⽤用
■Notes/Domino 8.5.3 以降降
■Dojo は使っていません
■⾃自分のHTML/CSS/JSで追加してどんどん拡張できる
■情報をカード形式に

8. 「カード」についてもう少し
■ UIはすべてカードに
■ ビューはリスト
■ フォームはカード
■ TwitterとGoogleはカードパターンのヘ
ビーユーザー
■ http://insideintercom.io/why-‐‑‒
cards-‐‑‒are-‐‑‒the-‐‑‒future-‐‑‒of-‐‑‒the-‐‑‒web/
■ http://smashinghub.com/9-‐‑‒
inspirational-‐‑‒cards-‐‑‒ui-‐‑‒design-‐‑‒
example.htm
■ https://dev.twitter.com/cards/
overview
■ http://www.pinterest.com/
flexewebs/cards-‐‑‒ui/

9. IBM Verse (IBM Mail Next の正式名)
■ これもカードっぽっくねぇ？
■ フラットデザインっぽくねぇ？

10. ■最新のオープンフレームワークを使⽤用
■Bootstrap 3 http://getbootstrap.com/
■Font Awesome http://fortawesome.github.io/Font-‐‑‒Awesome/icons/
■Bootcards (Bootstrapを拡張) http://bootcards.org/
■その他もろもろ

12. XControls
Bootcards
XControls
Unplugged
Unplugged Server

13. XControls
Bootcards
XControls

14. XControlsの⼀一覧
■ モバイル／Webアプリ作成に必要なものは Domino Designer で使
用するカスタムコントロールとリソースで構成されている
AccordionView Alert Calendar Carousel
DebugToolbar Dialog Files FlatView
Footer FormEditor FormViewer Header
ImageViewer Navigator PhotoUpload Resources
RichTextEdit RichTextRead Workspace

15. リソース
■ すべてのコンテンツを「リソース¥ファイル」に集約
■ ファイル、カスタムコントール、Unpで始まるすべてのXPageをデータベー
スにコピーするだけ
■ OneUIを無効にするテーマが必要（「blank」というテーマが⽤用意されてい
る）

16. 新規モバイルアプリの作成をするには
■ OpneNTFからこのコントロール(NTF)をダウンロード
■ 以下の設計をみなさんのアプリケーションにコピー
■ リソース¥ファイルをすべて
■ UnpBoot で始まるすべてのカスタムコントロール
■ 「blank」テーマ設計（DBプロパティで使⽤用するように指定）
■ Unp で始まるすべてのXPage設計

17. 共通のヘッダー(commonheader)

18. 共通のヘッダー(commonheader)
■ commonheaderとcommonfooterというカスタムコントールを新規に
作成して、すべてのXPageに追加することを推奨
■ 「UnpBootResource」カスタムコントールを追加
■ これで必要なCSS、JavaScript、SSJSを追加することになりま
す
■ 「UnpBootNavigator」と「UnpBootHeader」を追加
■ menuitems、navitemsのカスタムプロパティにメニュー項目を
追加
■ 「pagetitle」カスタムプロパティ、UnpBootNavigator上のタイトルな
ど指定
■ 詳細はサンプルコードにて

19. 共通のヘッダー(commonheader)

20. 共通のヘッダー(commonheader)

21. 共通のフッター(commonfooter)
■ Unplugged アプリには同期のタイプを指定可能。フッタータブも
■ 詳細は次のサンプルコード

22. 最初のページ (社員⼀一覧を想定)
■ Unplugged アプリには「UnpMain」という名前のXPageが必要。
Webモバイルアプリ、デスクトップアプリは自由。
■ 初めに、ヘッダーとフッターを配置

23. 最初のページ
■ リストとカードの構成でひとつのページを
■ 初めに、FlatViewを配置

24. 最初のページ
■ 文書カードは「employeeviewer」というカスタムコントロールにし
て、再利用できるように。その中でFormViewerコントロールを使
用
■ 詳細は次ページのコード

25. employeeviewer
カスタムコントロールのコード

26. 最初のページ完成

27. ⽂文書の編集
■ FormViewerコントロールのshowbuttonsをtrueにすると編集のた
めのEditボタンが自動的に表示される
■ FormEditorコントロールをもつXPageでページを作成
(EmployeeEdit.xsp)
■ 様式はBootstrapの作法に則って、フィールドラベルとフィールドを
追加

28. ⽂文書の編集

29. ⽂文書の編集

30. 次のサイトをチェックしてください
■ OpenNTF - http://www.openntf.org/main.nsf/project.xsp?
r=project/XControls
■ XContorlsドキュメント - http://xcontrols.org/
■ GitHub - https://github.com/unplugged/xcontrols-domino
■ Bootcards - http://bootcards.org/

31. ご静聴ありがとうございました