XPages&jQueryMobileで作るスマートフォン、タブレットUX

XPagesDay2013 B-2 あなたにも出来る！ XPages & jQueryMobileで作る スマートフォン、タブレットUX ジョンソンコントロールズ株式会社 林 哲司

1.XPages開発が難しいのはなぜ？ 巷にあふれるHTMLサンプル動かないのは何で？ 2

Notes/Domino9使ってますか？ 3

何と言っても モバイルコントロール 4

ページ見出し (Page Heading) ページのヘッダーです ボタンも配置することが出来ます 5

リスト項目 (Static Line Item) Notes9では「角を丸くした リスト項目」と書いてある スマホと言えばこのリスト表示 メニューもビューもこれで作る 1行目－ Labelだけ 2行目－moveToで次の画面(XPages)を指 定すると「>」が付く 3行目－rightText追加すると青文字で右に 文字列を表示 ビューを実現するにはこのリスト項目と繰 り返しコントロールを使いこなす必要があ る 6

角を丸くしたリスト (Rounded List) これもよくあるスマホデザイン 単独で使う物ではなく、中にリスト項目 などを配置して使う メニューとか画面をデザインするためによ く使う Static Line Item Rounded List 7

タブバー&タブバーボタン (Tab Bar&Tab Bar Button) 外側がタブバー タブバーの内側にタブバーボタンを配置し ます タブバーボタンのアイコンは自分で用意す る必要があります Tab Bar Tab Bar Button 機能を切り替えるためによく使われます (最近減ってきた気も・・・) 8

ツールバーボタン Notes9から搭載 ページ見出し上にボタンを複数配置できま す。 順番は決まっていて一つ目は右端、二つ目 は左端、三つ目は左端の次 三つ目のボタンを配置するとページ見出し のLabelがずれるのはご愛敬！ 9

切り替えスイッチ (Mobile Switch) ON、OFFスイッチです フィールドをバインドできますが、 バインドされるのは初期値です。 選択状態をフィールドに保存するには onStateChangedイベントで別フィール ドに値を書き込む処理が必要です。 重要！テストに出ます！ 10

以上！！ 11

ちなみに編集ボックスやボタンを そのまま配置すると 編集ボックス ボタン 12

あとは・・・ 13

ほら、Dojoのドキュメント(英語) を読んで 14

ソースタブでガンガン書けば・・・ 15

可能性は無限大！ 16

って 17

そんな夜中のテレショップみたいな事 言われても・・・ 18

最初の敵は 開発情報の不足 & English 19

Next Enemy！！！ 20

例えば、WebでHTMLサンプルを見つけて やりたいこと ソース 21

XPagesのソースタブに組み込んでみる 22

動かない orz 前回コンパイル(プレビューなど)が成功した時の状態 が表示される 23

Why? 24

XPagesはXML(HTMLではない)なので 終端タグがないと動かない もしくは <input type="checkbox" name="checkbox-0" />Check me 25

HTMLとしては怪しいが動く！ 26

でも フィールドをバインドできないとね 27

おっしゃる通り！！ 28

そこで意識しないといけないのは 29

コアコントロールが どんなHTMLとして出力されるのか？ 30

コアコントロールと出力されるHTML コアコントロール 出力されるHTMLタグ 編集ボックス <input type="text“> リッチテキスト <textarea rows="1" cols="1"> 複数行編集ボックス <textarea> ボタン <button type="button"> リストボックス <select size="3"> コンボボックス <select size="1"> チェックボックス <input type="checkbox"> ラジオボタン <input type="radio"> チェックボックス グループ <fieldset> <input type="checkbox"> ラジオボタングループ <fieldset><input type="radio“> リンク <a> ラベル <span> 備考 CKEditorを使用 選択肢は一つだけ 〃 複数の選択肢を設定できる 前後に<td>タグが付く 〃 31

先ほどのチェックボックスを 例にすると？ 32

先ほどのチェックボックスのHTML部分 に「チェックボックス」を配置 コアコントロールから「チェックボックス」をドラッグ&ドロップで配置 し、ラベルを設定し、データバインディングでフィールド (document1.Field01)を割り当て 33

ほら出来た！！ この状態だとフィールドには”true” or “false”が保存されます 34

第二の敵は XPagesはHTMLじゃない 攻略には試行錯誤が必要！！ ※バージョンが変わると攻略パラメータも変わる 35

2. Notesでは作れなかったUIを XPages&jQueryMobileで作ってみよう 36

国内スマホ普及率は28.2％ 流通マネーは4兆円突破 国内スマホ普及率は28.2％ 流通マネーは4兆円突破 2013/9/1 6:30 日経BPコンサルティングは2013年8月30日、国内のスマートフォン （スマホ）普及率が28.2％に達したとの調査結果を発表した。今年7 月上旬から中旬にかけての調査で、約1年前の前回調査（18.0％）か ら10ポイント増加した。また、携帯電話・スマートフォンを介して行 われる購買である「携帯・スマホ流通マネー」の規模が4兆円を突破 した。 http://www.nikkei.com/article/DGXNASFK3004E_Q3A830C100 0000/ 37

• http://www.nikkei.com/article/DGXNASFK3004E_Q3A830C100

ユーザーさんも普通にスマホ 使っています 38

アレみたいに出来ないの？ って言われませんか？ 39

Notesのセクションみたいなものとか ➀クリックすると ②ミョーン ↑XPagesで実装されています 40

画像付きビューとか Notesクライアントでは出来なかった！ 41

Facebookっぽいパネルとか ➀クリックすると ②ミョーン ナビゲータの代わりに使える 42

使ってみたくないですか？ 43

ご安心ください！ 今から解説するXPages with jQueryMobileの基本を知れば 誰でも実装できるようになります 44

でも・・・ 45

jQueryMobileって結局Dojoと 同じじゃないの？ IBMさんはDojo推進して るし・・・ 46

というあなた！ 47

確かにJavaScriptのライブラリ という意味では同じですが・・ 48

jQueryMobileは 49

日本語ドキュメントが豊富です！ MSさんも jQueryMobile派です ライセンスは、MIT Licenseなので無償です 50

jQueryMobile イェェ～イ♪ ＼(≧∇≦)／ 51

3.jQueryMobieを組み込む 52

どんな物を作る？ どんな美味しい料理でも、イメージできないと 「食べたい！」って思わないですよね！！ 53

こんなの！ ➀カテゴリを表示 ②文書名を表示 URL引数でタップした カテゴリを引き渡す (categoryFillter) ③フォームを表示 URL引数で文書IDを引き渡す 54

最初に用意する物 55

動作環境 Notes/Domino8.5.3 FP4で作ってます ※8.5.3以降じゃないと使えないプロパティ－属性リスト(attrs)を使っています Notes/Domino9でも動きます ※jQueryMobile用 JavaScript(略称：js)ライブラリファイルの読込方法が違います スマートフォンの動作テストはAndroid4.2(SH06E)を使用しています ※スマートフォン-PCミラーリングケーブル(JUC600など)があると便利です PC上での動作テストはGoogleChromeを使用してい ます ※Chrome－Googleが無料公開しているブラウザ 56

事前準備 エディタの行番号を表示 Designer のプリファレンスの [一般]-[エディター]-[テキスト・エディター] 内にある「行 番号の表示」にチェックを付ける エラーを表示 DB内の[アプリケーションプロパティ]-[XPages実行時エラーページを表示]にチェックを付 ける IBMさん デフォルトONで良いのでは この2つは必須！ないとデバッグできません 57

フォーム Notes文書 Notes9では添付画像に サムネイルが表示される ようになりました！ フォーム設計 58

ビュー カテゴリを表示 文書名を表示 59

次に 60

jQueryをダウンロード 1. jquery.com/downloadからjQuery1.10.2圧縮版(jquery1.10.2.min.js)をダウンロード jQueryMobileはjQueryを使ったモバイルUIライブラリなのでjQueryがな いと動きません。 61

jQueryMobileをダウンロード 1. jQueryMobile.com/downloadから jQueryMobile1.3.2(jquery.mobile-1.3.2.zip)をダウンロード 62

jsファイルをファイルリソースとして インポート 1. jQuery(jquery-1.10.2.min.js)はそのままインポート 2. jquery.mobile-1.3.2.zipを解凍し、jquery-mobile-1.3.2.min.jsを インポート jsファイルをスクリプトライブラリにコピペで取り込むと、構文エラーで 保存できないので、この方法で。 63

cssファイルをスタイルシートに インポート 1. jquery.mobile-1.3.2.zipを解凍し、jquery-mobile-1.3.2.min.cssを インポート 64

画像ファイルをイメージリソースとして インポート 1. jquery.mobile-1.3.2.zipを解凍し、imagesフォルダにあるgifファイ ル1つとpngファイル4つをインポート(ファイル選択ダイアログにpng ファイルが表示されない場合、ファイル名に「*.*」と入力し、すべ てのファイルを表示させる) 2. インポートされたファイル名の前に「images/」というフォルダ名を 追加 65

下ごしらえ完了 66

jQueryMobile基本構文 ListView HTMLソース <ul data-role="listview" data-inset="true"> <li><a href="#">Acura</a></li> <li><a href="#">Audi</a></li> <li><a href="#">BMW</a></li> <li><a href="#">Cadillac</a></li> <li><a href="#">Ferrari</a></li> </ul> 「data-XXXX」という拡張タグ がjQueryMobileの正体!! それぞれの拡張タグに値をセットすると勝手に デザインしてくれる 67

Domino 8.5.3 XPagesを作成し、読み込む 1. XPagesを新規作成し、ソースタブを開く 2. <xp:view>と</xp:view>タグの間に､下記のコードを書き込む 68

Domino 9.0 XPagesを作成し、読み込む 1. XPagesを新規作成し、ソースタブを開く 2. <xp:view>と</xp:view>タグの間に､下記のコードを書き込む Domino9 with jQueryMobileの読込問題についての詳細はこちら(英語) XPages: Dojo 1.8.1 & jQuery Mobile 1.3.1 http://hasselba.ch/blog/?p=1216 69

• http://hasselba.ch/blog/?p=1216

Domino 9.0 XPagesを作成し、読み込む 1. DB内のアプリケーションプロパティ-XPagesタブにある「実行時最適 化JavaScriptおよびCSSリソースの使用」のチェックを外す 2. AMDを停止させるJavaScriptと起動させるJavaScriptをファイル (amd_stop.js、amd_start.js)を作成する 【amd_stop.js】 if(define && define.amd){