あなたにも出来る!XPages &...
-
Upload
tetsuji-hayashi -
Category
Documents
-
view
3.621 -
download
1
Transcript of あなたにも出来る!XPages &...
![Page 1: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/1.jpg)
あなたにも出来る!
XPages & jQueryMobileで作る スマートフォン、タブレットUX
ジョンソンコントロールズ株式会社
林 哲司
XPagesDay2013
B-2
![Page 2: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/2.jpg)
1.XPages開発が難しいのはなぜ? 巷にあふれるHTMLサンプル動かないのは何で?
2
![Page 3: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/3.jpg)
Notes/Domino9使ってますか?
3
![Page 4: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/4.jpg)
何と言っても モバイルコントロール
4
![Page 5: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/5.jpg)
ページ見出し (Page Heading)
5
ページのヘッダーです ボタンも配置することが出来ます
![Page 6: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/6.jpg)
リスト項目 (Static Line Item)
6
スマホと言えばこのリスト表示 メニューもビューもこれで作る 1行目- Labelだけ 2行目-moveToで次の画面(XPages)を指定すると「>」が付く 3行目-rightText追加すると青文字で右に文字列を表示 ビューを実現するにはこのリスト項目と繰り返しコントロールを使いこなす必要がある
Notes9では「角を丸くしたリスト項目」と書いてある
![Page 7: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/7.jpg)
角を丸くしたリスト (Rounded List)
7
これもよくあるスマホデザイン 単独で使う物ではなく、中にリスト項目 などを配置して使う メニューとか画面をデザインするためによく使う
Rounded List
Static Line Item
![Page 8: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/8.jpg)
タブバー&タブバーボタン (Tab Bar&Tab Bar Button)
8
外側がタブバー タブバーの内側にタブバーボタンを配置します タブバーボタンのアイコンは自分で用意する必要があります 機能を切り替えるためによく使われます (最近減ってきた気も・・・)
Tab Bar Tab Bar Button
![Page 9: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/9.jpg)
ツールバーボタン
9
Notes9から搭載
ページ見出し上にボタンを複数配置できます。 順番は決まっていて一つ目は右端、二つ目は左端、三つ目は左端の次 三つ目のボタンを配置するとページ見出しのLabelがずれるのはご愛敬!
![Page 10: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/10.jpg)
切り替えスイッチ (Mobile Switch)
10
ON、OFFスイッチです フィールドをバインドできますが、 バインドされるのは初期値です。 選択状態をフィールドに保存するには onStateChangedイベントで別フィール ドに値を書き込む処理が必要です。
重要!テストに出ます!
![Page 11: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/11.jpg)
以上!!
11
![Page 12: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/12.jpg)
ちなみに編集ボックスやボタンを そのまま配置すると
12
編集ボックス ボタン
![Page 13: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/13.jpg)
あとは・・・
13
![Page 14: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/14.jpg)
ほら、Dojoのドキュメント(英語) を読んで
14
![Page 15: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/15.jpg)
ソースタブでガンガン書けば・・・
15
![Page 16: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/16.jpg)
可能性は無限大!
16
![Page 17: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/17.jpg)
って
17
![Page 18: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/18.jpg)
そんな夜中のテレショップみたいな事 言われても・・・
18
![Page 19: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/19.jpg)
最初の敵は
19
開発情報の不足 &
English
![Page 20: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/20.jpg)
Next Enemy!!!
20
![Page 21: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/21.jpg)
例えば、WebでHTMLサンプルを見つけて
21
やりたいこと ソース
![Page 22: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/22.jpg)
XPagesのソースタブに組み込んでみる
22
![Page 23: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/23.jpg)
動かない orz
23
前回コンパイル(プレビューなど)が成功した時の状態が表示される
![Page 24: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/24.jpg)
Why?
24
![Page 25: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/25.jpg)
XPagesはXML(HTMLではない)なので 終端タグがないと動かない
25
もしくは <input type="checkbox" name="checkbox-0" />Check me
![Page 26: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/26.jpg)
HTMLとしては怪しいが動く!
26
![Page 27: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/27.jpg)
でも フィールドをバインドできないとね
27
![Page 28: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/28.jpg)
おっしゃる通り!!
28
![Page 29: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/29.jpg)
そこで意識しないといけないのは
29
![Page 30: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/30.jpg)
コアコントロールが どんなHTMLとして出力されるのか?
30
![Page 31: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/31.jpg)
コアコントロールと出力されるHTML
31
コアコントロール 出力されるHTMLタグ 備考
編集ボックス <input type="text“>
リッチテキスト <textarea rows="1" cols="1"> CKEditorを使用
複数行編集ボックス <textarea>
ボタン <button type="button">
リストボックス <select size="3">
コンボボックス <select size="1">
チェックボックス <input type="checkbox"> 選択肢は一つだけ
ラジオボタン <input type="radio"> 〃
チェックボックス グループ
<fieldset> <input type="checkbox">
複数の選択肢を設定できる 前後に<td>タグが付く
ラジオボタングループ <fieldset><input type="radio“>
〃
リンク <a>
ラベル <span>
![Page 32: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/32.jpg)
先ほどのチェックボックスを 例にすると?
32
![Page 33: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/33.jpg)
先ほどのチェックボックスのHTML部分に「チェックボックス」を配置
33
コアコントロールから「チェックボックス」をドラッグ&ドロップで配置し、ラベルを設定し、データバインディングでフィールド(document1.Field01)を割り当て
![Page 34: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/34.jpg)
ほら出来た!!
34
この状態だとフィールドには”true” or “false”が保存されます
![Page 35: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/35.jpg)
第二の敵は
35
XPagesはHTMLじゃない 攻略には試行錯誤が必要!!
※バージョンが変わると攻略パラメータも変わる
![Page 36: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/36.jpg)
2. Notesでは作れなかったUIをXPages&jQueryMobileで作ってみよう
36
![Page 37: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/37.jpg)
国内スマホ普及率は28.2% 流通マネーは4兆円突破
37
国内スマホ普及率は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_Q3A830C1000000/
![Page 38: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/38.jpg)
ユーザーさんも普通にスマホ 使っています
38
![Page 39: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/39.jpg)
アレみたいに出来ないの? って言われませんか?
39
![Page 40: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/40.jpg)
Notesのセクションみたいなものとか
40
↑XPagesで実装されています
➀クリックすると
②ミョーン
![Page 41: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/41.jpg)
画像付きビューとか
41
Notesクライアントでは出来なかった!
![Page 42: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/42.jpg)
Facebookっぽいパネルとか
42
➀クリックすると
②ミョーン
ナビゲータの代わりに使える
![Page 43: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/43.jpg)
使ってみたくないですか?
43
![Page 44: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/44.jpg)
ご安心ください!
今から解説するXPages with jQueryMobileの基本を知れば
誰でも実装できるようになります
44
![Page 45: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/45.jpg)
でも・・・
45
![Page 46: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/46.jpg)
jQueryMobileって結局Dojoと 同じじゃないの?
46
IBMさんはDojo推進してるし・・・
![Page 47: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/47.jpg)
というあなた!
47
![Page 48: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/48.jpg)
確かにJavaScriptのライブラリ という意味では同じですが・・
48
![Page 49: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/49.jpg)
jQueryMobileは
49
![Page 50: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/50.jpg)
日本語ドキュメントが豊富です!
50
MSさんも jQueryMobile派です
ライセンスは、MIT Licenseなので無償です
![Page 51: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/51.jpg)
jQueryMobile
51
イェェ~イ♪ \(≧∇≦)/
![Page 52: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/52.jpg)
3.jQueryMobieを組み込む
52
![Page 53: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/53.jpg)
どんな物を作る?
53
どんな美味しい料理でも、イメージできないと 「食べたい!」って思わないですよね!!
![Page 54: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/54.jpg)
こんなの!
54
➀カテゴリを表示 ②文書名を表示 ③フォームを表示
URL引数でタップした カテゴリを引き渡す(categoryFillter)
URL引数で文書IDを引き渡す
![Page 55: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/55.jpg)
最初に用意する物
55
![Page 56: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/56.jpg)
動作環境
56
Notes/Domino8.5.3 FP4で作ってます ※8.5.3以降じゃないと使えないプロパティ-属性リスト(attrs)を使っています
Notes/Domino9でも動きます ※jQueryMobile用 JavaScript(略称:js)ライブラリファイルの読込方法が違います
スマートフォンの動作テストはAndroid4.2(SH-06E)を使用しています ※スマートフォン-PCミラーリングケーブル(JUC600など)があると便利です
PC上での動作テストはGoogleChromeを使用しています ※Chrome-Googleが無料公開しているブラウザ
![Page 57: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/57.jpg)
この2つは必須!ないとデバッグできません
事前準備
57
エディタの行番号を表示 Designer のプリファレンスの [一般]-[エディター]-[テキスト・エディター] 内にある「行番号の表示」にチェックを付ける
エラーを表示 DB内の[アプリケーションプロパティ]-[XPages実行時エラーページを表示]にチェックを付ける
IBMさん デフォルトONで良いのでは
![Page 58: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/58.jpg)
フォーム
58
Notes文書
フォーム設計
Notes9では添付画像に サムネイルが表示される
ようになりました!
![Page 59: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/59.jpg)
ビュー
59
カテゴリを表示 文書名を表示
![Page 60: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/60.jpg)
次に
60
![Page 61: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/61.jpg)
jQueryをダウンロード
61
1. jquery.com/downloadからjQuery1.10.2圧縮版(jquery-1.10.2.min.js)をダウンロード
jQueryMobileはjQueryを使ったモバイルUIライブラリなのでjQueryがないと動きません。
![Page 62: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/62.jpg)
jQueryMobileをダウンロード
62
1. jQueryMobile.com/downloadからjQueryMobile1.3.2(jquery.mobile-1.3.2.zip)をダウンロード
![Page 63: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/63.jpg)
jsファイルをファイルリソースとして インポート
63
1. jQuery(jquery-1.10.2.min.js)はそのままインポート 2. jquery.mobile-1.3.2.zipを解凍し、jquery-mobile-1.3.2.min.jsを
インポート
jsファイルをスクリプトライブラリにコピペで取り込むと、構文エラーで保存できないので、この方法で。
![Page 64: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/64.jpg)
cssファイルをスタイルシートに インポート
64
1. jquery.mobile-1.3.2.zipを解凍し、jquery-mobile-1.3.2.min.cssをインポート
![Page 65: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/65.jpg)
画像ファイルをイメージリソースとしてインポート
65
1. jquery.mobile-1.3.2.zipを解凍し、imagesフォルダにあるgifファイル1つとpngファイル4つをインポート(ファイル選択ダイアログにpngファイルが表示されない場合、ファイル名に「*.*」と入力し、すべてのファイルを表示させる)
2. インポートされたファイル名の前に「images/」というフォルダ名を追加
![Page 66: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/66.jpg)
下ごしらえ完了
66
![Page 67: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/67.jpg)
jQueryMobile基本構文
67
「data-XXXX」という拡張タグがjQueryMobileの正体!! それぞれの拡張タグに値をセットすると勝手にデザインしてくれる
<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>
ListView HTMLソース
![Page 68: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/68.jpg)
XPagesを作成し、読み込む
68
1. XPagesを新規作成し、ソースタブを開く
2. <xp:view>と</xp:view>タグの間に、下記のコードを書き込む
Domino 8.5.3
![Page 69: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/69.jpg)
XPagesを作成し、読み込む
69
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
Domino 9.0
![Page 70: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/70.jpg)
XPagesを作成し、読み込む
70
1. DB内のアプリケーションプロパティ-XPagesタブにある「実行時最適化JavaScriptおよびCSSリソースの使用」のチェックを外す
2. AMDを停止させるJavaScriptと起動させるJavaScriptをファイル(amd_stop.js、amd_start.js)を作成する
【amd_stop.js】 【amd_start.js】
Domino 9.0
if(define && tempAmd){ // restore define.amd object define.amd = tempAmd; delete tempAmd; }
if(define && define.amd){ // undefine define.amd while loading jquery modules so as not to use amd loader var tempAmd = define.amd; define.amd = undefined; }
![Page 71: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/71.jpg)
XPagesを作成し、読み込む
71
3. 1で作成した2つのJavaScriptファイルをファイルリソースとしてインポートする
4. XPagesを新規作成し、ソースタブを開く 5. <xp:view>と</xp:view>タグの間に、下記のコードを書き込む
Dojo道場 ~ 第11回「Dojo 最新動向 - Asynchronous Module Definition」 http://codezine.jp/article/detail/6482
Domino 9.0
![Page 72: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/72.jpg)
XPages with jQueryMobile基本のキ
72
1. 先ほど書き込んだ</xp:this.resources>の下に下記のコードを書き込む
</xp:this.resources> <!-- サイズをデバイスの幅に設定、倍率を固定--> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- ページ --> <div data-role="page"> <!-- ヘッダー --> <header data-role="header"> <h3>ヘッダー</h3> </header> <!-- コンテンツ --> <article data-role="content"> </article> <!-- フッター --> <footer data-role="footer"> <h3>フッター</h3> </footer> </div> </xp:view>
<header> <article> <footer>の部分は すべて<div>でもかまいませんが、HTML5では文書構造を定義できるようになったため、この書き方がオススメ!
<article>タグの間にビューやフォームとなる部品を配置していきます
今回のサンプルではテーマカラーを青にするため、ページ部分にテーマカラーを設定しています <div data-role="page" data-theme="b">
![Page 73: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/73.jpg)
ここまでをひな形にしておくと便利
こうなる
73
<div data-role="page">
<!-- ヘッダー --> <header data-role="header"> <h3>ヘッダー</h3> </header> <!-- コンテンツ --> <article data-role="content"> </article> <!-- フッター --> <footer data-role="footer"> <h3>フッター</h3> </footer>
![Page 74: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/74.jpg)
4.画像付きビューを作る (画像は添付ファイル)
74
![Page 75: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/75.jpg)
XPages攻略 基本技 ソースタブ ドラッグ&ドロップ
75
XPagesの完全攻略にはソースタブにコントロールをドラッグ&ドロップで配置し、ソースやプロパティを変更するという技が必要です
![Page 76: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/76.jpg)
カテゴリビューを作る➀
76
1. 新規XPagesを作成(名前:xp_vw_group1.xsp) 2. データソースの追加ボタンを押し、“Dominoビュー”を選択、事前準
備で用意したビューとデータソース名を指定
3. 展開レベルに1を指定カテゴリのみ表示するため、データソースプロパティの「expandLevel」に“1”を指定
4. ひな形のタグ(リソース読込、jQueryMobileの基本構造)を書き込み、フッターを削除
5. <header><h3>タグの内側を“ヘッダー”→”種別“に変更
![Page 77: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/77.jpg)
カテゴリビューを作る②ソース
77
<?xml version="1.0" encoding="UTF-8"?> <xp:view xmlns:xp="http://www.ibm.com/xsp/core"> <xp:this.data> <xp:dominoView var="view1" viewName="SysGroupVw“ expandLevel="1"></xp:dominoView> </xp:this.data> <!-- jQueryMobile読み込み--> <xp:this.resources> <xp:script src="/jquery-1.10.2.min.js" clientSide="true"></xp:script> <xp:script src=“/jquery.mobile-1.3.2.min.js” clientSide="true"></xp:script> <xp:styleSheet href="/jquery.mobile-1.3.2.min.css"></xp:styleSheet> </xp:this.resources> <!-- サイズをデバイスの幅に設定、倍率を固定--> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- ページ --> <div data-role="page" data-theme="b"> <!-- ヘッダー --> <header data-role="header"> <h3>種別</h3> </header> <!-- コンテンツ --> <article data-role="content"> </article> </div> </xp:view>
![Page 78: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/78.jpg)
カテゴリビューを作る③
78
6. <article></article>タグの内側に<ul data-role=“listview”>タグを配置
7. <ul></ul>タグの内側にコンテナコントロール-繰り返しコントロールをドラッグ&ドロップで配置
8. 繰り返しコントロール<xp:repeat>を選択し、単純データバインディングでデータソースに”view1”を指定(バインド先は空白)
<article data-role="content"> <ul data-role="listview"> </ul> </article>
<ul data-role="listview"> <xp:repeat id="repeat1" rows="30" value="#{view1}"> </xp:repeat> </ul>
![Page 79: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/79.jpg)
カテゴリビューを作る④
79
9. 繰り返しコントロールタグ<xp:repeat>を選択し、名前を削除(名前が残っているとjquery mobileのスタイルが反映されません)
10. ページ替えをさせないため、オプションの繰り返し頻度には大きな値を入れ(例では9999)、コレクション名を設定
11. 繰り返しコントロール<xp:repeat></xp:repeat>タグの内側に<li>タグを追加
<xp:repeat rows="9999" value="#{view1}" var="dataRow"> <li> </li> </xp:repeat>
![Page 80: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/80.jpg)
カテゴリビューを作る⑤
80
12. <li></li>タグの内側にコアコントロール-リンクをドラッグ&ドロップで配置し、ラベルを消す
12. リンク<xp:link> </xp:link>タグの内側にコアコントロール-計算
結果フィールドをドラッグ&ドロップで追加
13. リンクコントロール<xp:link>を選択し、オプション-リンクタイプ-URLの横にある◇をクリックし、値の計算を選択する
<li> <xp:link escape="true" id="link1"> <xp:text escape="true" id="computedField1"></xp:text> </xp:link> </li>
![Page 81: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/81.jpg)
カテゴリビューを作る⑥
81
15. SSJS(ServerSideJavaScript)に次に表示するのビュー用XPagesを指定し、URL引数にcategoryFillterを設定
16. 計算結果フィールド<xp:text>を選択し、値-使用するバインドデータに「JavaScript」を選択し、カテゴリがある場合のみ値を表示するSSJSを書き込む
dataRow.isCategory() ? dataRow.getColumnValues().get(0) : null
"/xp_vw_group2.xsp?OpenXpage&categoryFilter=" + dataRow.getColumnValues().get(0)
![Page 82: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/82.jpg)
カテゴリビューを作る⑦完成形
82
![Page 83: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/83.jpg)
画像付きビューを作る➀
83
1. 先ほど作ったカテゴリ用ビューXPages(xp_vw_group1.xsp)をコピーして、xp_vw_group2.xspにリネームする
2. <header><h3>タグの内側を”分類“→”品名“に変更 3. ヘッダーに戻るボタンを作るため、<header>タグの内側に “<a
href=”“ data-rel=”back“ data-icon=”arrow-l“>戻る</a>”を追加
4. リンクコントロール<xp:link>を選択し、オプション-リンクタイプ-URLの横にある◇をクリックし、”値の計算”を選択
5. SSJSに次に表示するのフォーム用XPagesを指定し、URL引数にdocumentIdを設定
<header data-role="header"> <a href="" data-rel="back" data-icon="arrow-l">戻る</a> <h3>品名</h3> </header>
"/xp_frm_menu.xsp?OpenXpage&documentId="+dataRow.getDocument().getUniversalID();
![Page 84: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/84.jpg)
画像付きビューを作る②
84
6. リンクコントロール<xp:link>を選択し、オプション-にイメージを表示にチェックを付け、イメージの横にある◇をクリックし、”値の計算“を選択
7. SSJSに一つ目の添付ファイルパスを指定する式を設定
"/"+dataRow.getDocument().getUniversalID()+"/$File/"+@Subset(dataRow.getDocument().getItemValue("ImageFileNameList"),1)
![Page 85: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/85.jpg)
画像付きビューを作る③
85
8. 計算結果フィールド<xp:text>を選択し、値で単純データバインディングを選択、データソース「dataRow」、バインド先「Subject(件名)」を指定
9. 文字を大きくするために計算結果フィールド<xp:text>を<h3></h3>タグで囲う
<h3> <xp:text escape="true" id="computedField1" value="#{dataRow.Subject}"> </xp:text> </h3>
![Page 86: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/86.jpg)
画像付きビューを作る③
86
10. 先ほど追加した</h3>タグの後ろにコアコントロール-計算結果フィールドを追加し、値で単純データバインディングを選択、データソース「dataRow」、バインド先「Price(金額)」、表示タイプ「数値」、表示形式「通貨」、通貨のシンボル「¥」を指定
11. 説明用のタグにするために計算結果フィールド<xp:text>を<p></p>タグで囲う
<p> <xp:text escape="true" id="computedField2" value="#{dataRow.Price}"> <xp:this.converter> <xp:convertNumber type="currency" currencySymbol="¥"> </xp:convertNumber> </xp:this.converter> </xp:text> </p>
![Page 87: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/87.jpg)
画像付きビューを作る⑦完成形
87
![Page 88: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/88.jpg)
使用上の注意
88
![Page 89: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/89.jpg)
注意➀
89
複数階層のカテゴリビューをcategoryFillter=A¥Bで実現はできないと思います Domino8.5.3FP4でやってみましたが、データが数十件程度なら表示されますが、それ以上にデータ件数が多くなるとカテゴリが表示されません 表示される場合と、されない場合がある←こういうの困る! この場合、繰り返しコントロールのバインドデータにServerSideJavaScriptでNotesViewEntryで取得したデータを配列に格納して使用する必要があると思います
![Page 90: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/90.jpg)
注意②
90
1つのビューに何千件も表示しようというのは、Coolな実装ではありません 端末のブラウザがJavaScirptを解釈して描画を行いますので、一定のデータ件数を超えるとスクロールがパラパラマンガのようになります ユーザーが
本当に何を求めているのか? この先、何をしたいのか? 再度、見つめ直してください
![Page 91: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/91.jpg)
5.ビューから簡単検索
91
超簡単!!
![Page 92: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/92.jpg)
<ul>タグにdata-filter=“true”を追加
92
1. 先ほど作った画像付きビューXPages(xp_vw_group2.xsp)に簡易検索機能をつけるには<ul>タグにdata-filter=“true”属性を追加
<!-- コンテンツ --> <article data-role="content"> <ul data-role="listview" data-filter="true"> <xp:repeat rows="9999" value="#{view1}" var="dataRow">
![Page 93: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/93.jpg)
簡単検索 完成形
93
![Page 94: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/94.jpg)
使用上の注意
94
![Page 95: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/95.jpg)
注意
95
1. ビューに表示されるすべての文字列が検索対象になります
2. ブラウザの機能で検索するので、データ件数が増えすぎるとパフォーマンスが悪くなります
![Page 96: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/96.jpg)
6.フォーム画面とタッチ、タップ入力
96
![Page 97: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/97.jpg)
フォームを作る➀
97
1. 新規XPagesを作成(名前:xp_fmr_menu.xsp) 2. データソースの追加ボタンを押し、“Domino文書”を選択、事前準備
で用意したフォームとデータソース名を指定、デフォルトのアクションは「文書を開く」を指定
3. ひな形のタグ(リソース読込、jQueryMobileの基本構造)を書き込む 4. <header><h3>タグの内側を“ヘッダー”→”メニュー“に変更 5. <article></article>タグの内側に<div class=“ui-bar ui-bar-b”
style=“margin:-15px;”>タグを配置(品名の枠を作る) <article data-role="content"> <!-- 品名 --> <div class="ui-bar ui-bar-b" style="margin:-15px;"> </div> </article>
![Page 98: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/98.jpg)
フォームを作る②
98
6. 5で作った<div>タグの内側に<h3 style="font-size:120%;">タグを配置
7. 6で作った<h3>タグの内側にコアコントロール-計算結果フィールドをドラッグ&ドロップで配置
8. 計算結果フィールド<xp:text>を選択し、値で単純データバインディングを選択、データソース「document1」、バインド先「Subject(件名)」を指定
<div class="ui-bar ui-bar-b" style="margin:-15px;"> <h3 style="font-size:120%;"> </h3> </div>
![Page 99: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/99.jpg)
フォームを作る③
99
9. 5で作った</div>(終端タグ)の下にコアコントロール-イメージをドラッグ&ドロップで配置(画像の選択画面では“イメージプレースホルダーの使用”を選択)
10. イメージ<xp:image>を選択し、オプション-イメージリソースの横にある◇をクリックし、”値の計算”を選択
11. SSJSに添付ファイル画像の一つ目のファイルパスを取得する式を記述
12. イメージ<xp:image>を選択し、widthを”100パーセント”に指定
"/"+document1.getDocument().getUniversalID()+"/$File/"+@Subset(document1.getItemValue("ImageFileNameList"),1);
![Page 100: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/100.jpg)
フォームを作る④完成形
100
ここまでできれば、後は自力で実装できるはず
![Page 101: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/101.jpg)
jQueryMobile版 フォーム部品作成ガイド
101
![Page 102: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/102.jpg)
普通の入力フィールド
102
1. <article>タグの間に、コアコントロール-編集ボックスをドラッグ&ドロップ
2. 単純データバインディングでフィールドを割り当てる
<!-- コンテンツ --> <article data-role="content"> <xp:inputText id="inputText1" value="#{document1.Field01}"> </xp:inputText> </article>
![Page 103: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/103.jpg)
ボタン(保存ボタン➀)
103
1. <article></article>タグの間に、コアコントロール-ボタンをドラッグ&ドロップ
2. ラベルに「保存」と指定
3. イベントのonClickにサーバータブ-シンプルアクションでアクションの追加ボタンを押し、カテゴリ-「文書」、アクション-「文書の保存」を指定
![Page 104: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/104.jpg)
なんて簡単! コアコントロールにプロパティを
セットしただけ!!
104
![Page 105: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/105.jpg)
ボタン(保存ボタン②)
105
4. ボタンを文字の幅にするには、ソースタブでボタンコントロール<xp:button>を選択し、属性リスト(すべてのプロパティ-基本-attrs)に+ボタンで下記の属性を追加
name data-inline
value true
重要!XPages攻略のポイント!
![Page 106: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/106.jpg)
大事なことなので2回言います
106
出力されるHTML <button class="xspButtonCommand" type="button" name="view:_id1:button1" id="view:_id1:button1" data-inline="true">
1. 属性リスト(すべてのプロパティ-基本-attrs)の[+]ボタンを押す
2. 追加された属性のnameとvalueにjQueryMobileの拡張タグを設定する
![Page 107: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/107.jpg)
ボタン(キャンセルボタン)
107
1. 先ほど追加したボタンコントロール終端タグ<xp:button>の後ろに同じようにコアコントロール-ボタンをドラッグ&ドロップで配置
2. ラベルに「キャンセル」と指定 3. イベントのonClickにサーバータブ-
シンプルアクションでアクションの追加ボタンを押し、カテゴリ-「基本」、アクション-「ページを開く」を指定、「開くページの名前」にビュー用のXPagesを指定
4. 保存ボタンと同じく、属性リスト(attrs)に「data-inline」タグを追加し、”true“を設定
![Page 108: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/108.jpg)
フリップスイッチ➀
108
フリップスイッチはコアコントロールの「リストボックス」で作ります。 1. <article>タグの間に、コアコント
ロール-リストボックスをドラッグ&ドロップ
2. 単純データバインディングでフィールドを割り当てる
3. プロパティの値タブで項目の追加ボタンを押し、選択肢のラベルと値を設定
![Page 109: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/109.jpg)
フリップスイッチ②
109
4. 属性リスト(attrs)に+ボタンで下記の属性を追加
name data-role
value slider
こんな風にも使える
![Page 110: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/110.jpg)
セレクトメニュー
110
セレクトメニューはコアコントロールの「リストボックス」で作ります。 1. <article>タグの間に、コアコント
ロールのリストボックスをドラッグ&ドロップ
2. 単純データバインディングでフィールドを割り当てる
3. プロパティの値タブで項目の追加ボタンを押し、選択肢のラベルと値を設定
4. XPagesのテーマをオフにするためすべてのプロパティ-スタイル-disableThemeに”true”を設定
タップすると
![Page 111: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/111.jpg)
ラジオボタン(縦並び)
111
ラジオボタンはコアコントロールの「ラジオボタン」で作ります。 ※ラジオボタングループでは作れません。 1. <article>タグの間に、<fieldset
data-role=“controlgroup“>タグを追加
2. <fieldset>タグの間にコアコントロール-ラジオボタンをドラッグ&ドロップ
3. 単純データバインディングでフィールドを割り当てる
<!-- コンテンツ --> <article data-role="content"> <fieldset data-role="controlgroup"> </fieldset>
![Page 112: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/112.jpg)
ラジオボタン(縦並び)
112
4. ラジオボタンタブ-ラベルプロパティに表示用の選択肢、ラジオグループ名にグループ名を設定
5. データタブ-選択時の値を設定
6. ラジオボタン<xp:>の下に必要な数だけ、ラジオボタンを配置し、2~5の操作を繰り返す(4のラジオグループ名は同じにする)
別フォームのフィールドに設定した内容や一度入力したキーワードを選択肢と出す場合(@Dblookupや@DbColumnを使用)、繰り返しコントロールと組み合わせる
![Page 113: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/113.jpg)
ラジオボタン(横並び)
113
1. ラジオボタン(縦並び)と同じ方法でラジオボタンを作る
2. <fieldset>タグにdata-type=“horizontal“を追加する <!-- コンテンツ -->
<article data-role="content"> <fieldset data-role="controlgroup“ data-type="horizontal"> </fieldset>
![Page 114: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/114.jpg)
スライダー➀
114
スライダーはコアコントロールの「編集ボックス」で作ります。 1. <article>タグの間に、コアコント
ロールの編集ボックスをドラッグ&ドロップ
2. 単純データバインディングでフィールドを割り当てる
3. すべてのプロパティ-typeに”range”を指定
![Page 115: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/115.jpg)
data-highlight=false data-highlight=true
スライダー②
115
4. 属性リスト(attrs)に+ボタンで下記の属性を追加
name max
value 5
name min
value 1
name value
value 1
name data-highlight
value true
![Page 116: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/116.jpg)
7.カメラ連携
116
![Page 117: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/117.jpg)
リッチテキストに画像を添付する➀
117
1. <article>タグの間に、コアコントロール-ファイルのアップロードをドラッグ&ドロップ
2. 単純データバインディングでフィールド(リッチテキスト)を割り当てる
3. 属性リスト(attrs)に下記の属性を追加
name accrpt
value image/*
属性リスト(attrs)のすぐ上にacceptというプロパティがありますが、ここに設定しても
タグが出力されません
![Page 118: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/118.jpg)
リッチテキストに画像を添付する②
118
4. フォーム上に計算結果フィールドがある場合は、プロパティ-データタブ-フォーム検証の実行に「文書保存時」を設定
![Page 119: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/119.jpg)
リッチテキストに画像を添付する③
119
Android2.2以降、iOS6以降で動作可能
![Page 120: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/120.jpg)
8.XPages開発の良いところ
120
![Page 121: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/121.jpg)
既存のDBに手を加えることなく Web対応、モバイル対応可能
121
※ビュー(データソース用)の変更が不要な場合
既存DB モバイル
用DB
Notes用設計 &
DATA
XPages設計のみ
データソースと して参照
DATAは空っぽ
Notesクライアント Webブラウザ
![Page 122: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/122.jpg)
またまたぁ、Notesのことだから 参照だけでしょ!
122
![Page 123: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/123.jpg)
いえいえ、更新もできます!
123
既存の設計もゴチャゴチャにならず スマートにモバイル対応するならこれ!
![Page 124: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/124.jpg)
面倒な処理が不要
124
• SQLインジェクション対策
• クロスサイトスクリプティング対策(<script>alert(‘XSS’);</script>のような物)
• テーブル設計(ちゃんと考える必要はありますよ)
![Page 125: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/125.jpg)
@式が超便利!
125
LotusScriptやJavaScriptだと、ループさせて、何行も書いて、エラー処理も・・・
@式なら1行ってことも @式は文字列操作が得意!(ループ不要)
![Page 126: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/126.jpg)
@式でできることは@式でやる できないことはスクリプト言語で
開発工数は最小化し、お客様との対話、 新しい価値を創造する部分にパワーを!
126
![Page 127: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/127.jpg)
127
オールインワンのDominoが最適!!
変化が早い時代には 容易にスクラッチ&ビルドし、
変化に対応、創造していく必要がある
余計なことを考えなくて済む
※ユーザーにとっては業務要件を満たしていれば、どんなアーキテクチャーを使っているかは問題ではない
![Page 128: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/128.jpg)
9.UXって何?
128
![Page 129: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/129.jpg)
もしかして UI≒UXだと思っていませんか?
129
![Page 130: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/130.jpg)
もしかして ヌルヌル動くカッコイイ
ギミックだと思っていませんか?
130
![Page 131: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/131.jpg)
UXとはUserExperienceの略ですね
131
![Page 132: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/132.jpg)
ちなみに Experience(経験)は
Expertise(専門知識)と同じ語源 だそうです
132
![Page 133: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/133.jpg)
UserExperienceは 日本語では
ユーザー体験 という意味ですね
133
![Page 134: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/134.jpg)
業務アプリでは
134
![Page 135: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/135.jpg)
問題解決そのもの だと思います
135
![Page 136: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/136.jpg)
つまり ユーザーが何をしたいのか?
136
![Page 137: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/137.jpg)
そして ユーザー自身ではない開発者が
それをどうとらえ、 一緒に解決していくか?
をデザインする
137
![Page 138: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/138.jpg)
138
UXとは
UI
業務 知識
認知 工学
ネットワーク
セキュリティ
誠実
ビジ ョン
心理学
Other
これじゃ ないかな?
![Page 139: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/139.jpg)
今、起きていること
139
![Page 140: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/140.jpg)
Natural User Interfaceへの進化
140
CUI GUI NUI
MS-DOS、
UNIX
Windows、
MacOS
iOS、Android、
Win8
情報量
小
情報量
多
情報量
小
PCだけでなく、ゲーム、家電など、液晶画面は表示装置からNUIのInterfaceへ
変化は機会であり、チャンス!!
![Page 141: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/141.jpg)
タップを想定すると必然的に 情報量は少なくなる
141
何が重要?何のために?どんな活用シーン? を見極める必要がある
![Page 142: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/142.jpg)
142
何を表示すべきか?何がしたいのか? 設計はより本質的に!
※NotesクライアントっぽいUIを目指してはいけません!
![Page 143: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/143.jpg)
10.まとめ
143
![Page 144: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/144.jpg)
コアコントロールが どんなHTMLに変換されるのか?
を意識する
144
Point 1
![Page 145: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/145.jpg)
jQueryMobile用拡張タグは 属性リスト(attrs)
に追加
145
Point 2
※属性リストはNotes8.5.3以降有効
![Page 146: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/146.jpg)
この2つの基本技を身につければ 他のコントロールも実装できるはずです
146
たぶん・・・・
![Page 147: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/147.jpg)
ところで レスポンシブデザイン ってご存じですか?
147
![Page 148: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/148.jpg)
最近のWebアプリの課題
148
同じWebアプリなのにPC用、タブレット用、スマートフォン用で3つもHTMLファイルやCSSファイルを作るのはもったいないよね それぞれにデザイン作ってたら工数も3倍かかる コンテンツが一緒なんだったら、自動的にレイアウト変えてくれると良いのに・・・
![Page 149: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/149.jpg)
これを解決する1つの方法が レスポンシブデザイン
149
![Page 150: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/150.jpg)
簡単に実現してくれる フレームワークには
jQueryMobile(1.3以降)や Twitter Bootstrap
150
他にもいろいろあります
![Page 151: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/151.jpg)
レスポンシブデザイン-サンプル jQueryMobileのサイトより
151
スマートフォン
タブレット
![Page 152: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/152.jpg)
こういうのも作れます レスポンシブデザイン
152
タブレット横
![Page 153: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/153.jpg)
こういうのも作れます レスポンシブデザイン
153
タブレット縦
![Page 154: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/154.jpg)
こういうのも作れます レスポンシブデザイン
154
スマートフォン
![Page 155: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/155.jpg)
情報量は減らし 必要なことだけを表示
操作は最短のアクションで
155
Point 3
![Page 156: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/156.jpg)
156
Everything should be made as simple as possible, but not simpler. すべてのものはできるだけシンプルに作られるべきだ。しかし手抜きであってはいけない。
![Page 157: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/157.jpg)
ありがとうございました
157
m(_ _)m ペコリ
![Page 158: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/158.jpg)
jQueryMobileに関する情報
158
Android/iPhone/Windows Phone対応 jQuery Mobileスマートフォンアプリ開発 岡本 隆史・梶原 直人・田中 智文 著 大型本: 368ページ 出版社: ソフトバンククリエイティブ (2012/6/20)
ドットインストール 3分動画でマスターする初心者向けプログラミング学習サイト
http://dotinstall.com/
SlideShareを”jQueryMobile”で検索すると素晴らしいスライドがたくさんあります(日本語で) http://www.slideshare.net/
jQueryVaridationによる入力チェック jqPlotによるグラフ描画
パフォーマンスチューニング などノウハウ満載です
![Page 159: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/159.jpg)
Webデザインに関する情報
159
Webデザインレシピ CSSでレイアウトするなら絶対覚えておきたい配置のルール:フロートや絶対配置、z-index とかいろいろ http://webdesignrecipes.com/css-visual-formating-model/
![Page 160: あなたにも出来る!XPages & jQueryMobileで作るスマートフォン、タブレットUX開発](https://reader033.fdocuments.net/reader033/viewer/2022050713/55780c21d8b42aa5488b5107/html5/thumbnails/160.jpg)
Special Thanks
160
Atsushi Ono(IBM Japan) AMD(Asynchronous Module Definition)に関する素晴らしい情報をいただきました
Atsushi Sato(IBM Japan) 急なメールにも関わらず小野さんへの連係、コーディネイトをしていただきました
Universal Concept Tea Corporation SPOON GARDEN RESTAURANT ECHELON Tea House 料理の画像と資料を作る場所、また素晴らしい紅茶と顧客サービスを提供していただきました
http://www.spoon-table.co.jp/ https://www.facebook.com/pages/SPOON-GARDEN-RESTAURANT/581995871819388 https://www.facebook.com/pages/ECHELON-Tea-House/121534168014070