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

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

3. Notes/Domino9使ってますか？
3

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

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

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

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

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

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

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

11. 以上！！
11

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

13. あとは・・・
13

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

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

16. 可能性は無限大！
16

17. って
17

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

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

20. Next Enemy！！！
20

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

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

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

24. Why?
24

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

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

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

28. おっしゃる通り！！
28

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

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

31. コアコントロールと出力される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. 先ほどのチェックボックスを
例にすると？
32

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

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

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

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

37. 国内スマホ普及率は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

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

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

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

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

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

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

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

45. でも・・・
45

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

47. というあなた！
47

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

49. jQueryMobileは
49

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

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

52. 3.jQueryMobieを組み込む
52

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

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

55. 最初に用意する物
55

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

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

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

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

60. 次に
60

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

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

63. 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

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

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

66. 下ごしらえ完了
66

67. 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

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

69. 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

70. 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){
// undefine define.amd while loading jquery modules so as not to use amd loader
var tempAmd = define.amd;
define.amd = undefined;
}
【amd_start.js】
if(define && tempAmd){
// restore define.amd object
define.amd = tempAmd;
delete tempAmd;
}
70

71. Domino
9.0
XPagesを作成し、読み込む
3. １で作成した2つのJavaScriptファイルをファイルリソースとしてイ
ンポートする
4. XPagesを新規作成し、ソースタブを開く
5. <xp:view>と</xp:view>タグの間に､下記のコードを書き込む
Dojo道場 ～ 第11回「Dojo 最新動向 - Asynchronous Module
Definition」
http://codezine.jp/article/detail/6482
71

72. XPages with jQueryMobile基本のキ
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>でもかまいませんが、
HTML５では文書構造を定義できるよう
になったため、この書き方がオススメ!
<article>タグの間にビューやフォーム
となる部品を配置していきます
今回のサンプルではテーマカラーを青に
するため、ページ部分にテーマカラーを
設定しています
<div data-role="page" datatheme="b">
72

73. こうなる
<div data-role="page">
<!-- ヘッダー -->
<header data-role="header">
<h3>ヘッダー</h3>
</header>
<!-- コンテンツ -->
<article data-role="content">
</article>
<!-- フッター -->
<footer data-role="footer">
<h3>フッター</h3>
</footer>
ここまでをひな形にしておくと便利
73

74. 4.画像付きビューを作る
(画像は添付ファイル)
74

75. XPages攻略 基本技
ソースタブ ドラッグ&ドロップ
XPagesの完全攻略にはソースタブにコントロールをドラッグ&ドロップで
配置し、ソースやプロパティを変更するという技が必要です
75

76. カテゴリビューを作る➀
1. 新規XPagesを作成(名前：xp_vw_group1.xsp)
2. データソースの追加ボタンを押し、“Dominoビュー”を選択、事前準
備で用意したビューとデータソース名を指定
3. 展開レベルに１を指定カテゴリのみ表示するため、データソースプロ
パティの「expandLevel」に“１”を指定
4. ひな形のタグ(リソース読込、jQueryMobileの基本構造)を書き込み、
フッターを削除
76
5. <header><h3>タグの内側を“ヘッダー”→”種別“に変更

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>
77

78. カテゴリビューを作る③
6. <article></article>タグの内側に<ul data-role=“listview”>タグを
配置
<article data-role="content">
<ul data-role="listview">
</ul>
</article>
7. <ul></ul>タグの内側にコンテナコントロール－繰り返しコントロー
ルをドラッグ&ドロップで配置
<ul data-role="listview">
<xp:repeat id="repeat1" rows="30" value="#{view1}">
</xp:repeat>
</ul>
8. 繰り返しコントロール<xp:repeat>を選択し、単純データバインディ
ングでデータソースに”view1”を指定(バインド先は空白)
78

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>
79

80. カテゴリビューを作る⑤
12. <li></li>タグの内側にコアコントロール－リンクをドラッグ＆ド
ロップで配置し、ラベルを消す
12. リンク<xp:link> </xp:link>タグの内側にコアコントロール－計算
結果フィールドをドラッグ＆ドロップで追加
<li>
<xp:link escape="true" id="link1">
<xp:text escape="true" id="computedField1"></xp:text>
</xp:link>
</li>
13. リンクコントロール<xp:link>を選択し、オプション－リンクタイプ
－URLの横にある◇をクリックし、値の計算を選択する
80

81. カテゴリビューを作る⑥
15. SSJS(ServerSideJavaScript)に次に表示するのビュー用XPagesを指
定し、URL引数にcategoryFillterを設定
"/xp_vw_group2.xsp?OpenXpage&categoryFilter=" + dataRow.getColumnValues().get(0)
16. 計算結果フィールド<xp:text>を選択し、値－使用するバインドデー
タに「JavaScript」を選択し、カテゴリがある場合のみ値を表示する
SSJSを書き込む
dataRow.isCategory() ? dataRow.getColumnValues().get(0) : null
81

82. カテゴリビューを作る⑦完成形
82

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>”を追加
<header data-role="header">
<a href="" data-rel="back" data-icon="arrow-l">戻る</a>
<h3>品名</h3>
</header>
4. リンクコントロール<xp:link>を選択し、オプション－リンクタイプ
－URLの横にある◇をクリックし、”値の計算”を選択
5. SSJSに次に表示するのフォーム用XPagesを指定し、URL引数に
documentIdを設定
"/xp_frm_menu.xsp?OpenXpage&documentId="+dataRow.getDocument().getUniversalID();
83

84. 画像付きビューを作る②
6. リンクコントロール<xp:link>を選択し、オプション－にイメージを
表示にチェックを付け、イメージの横にある◇をクリックし、”値の計
算“を選択
7. SSJSに一つ目の添付ファイルパスを指定する式を設定
"/"+dataRow.getDocument().getUniversalID()+"/$File/"+@Subset(dataRow.getDocument().getItemValue("ImageFileN
ameList"),1)
84

85. 画像付きビューを作る③
8. 計算結果フィールド<xp:text>を選択し、値で単純データバインディ
ングを選択、データソース「dataRow」、バインド先「Subject(件
名)」を指定
9. 文字を大きくするために計算結果フィールド<xp:text>を
<h3></h3>タグで囲う
<h3>
<xp:text escape="true" id="computedField1"
value="#{dataRow.Subject}">
</xp:text>
</h3>
85

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>
86

87. 画像付きビューを作る⑦完成形
87

88. 使用上の注意
88

89. 注意➀
複数階層のカテゴリビューをcategoryFillter=A¥Bで
実現はできないと思います
Domino8.5.3FP4でやってみましたが、データが数十件程度なら表示されますが、
それ以上にデータ件数が多くなるとカテゴリが表示されません
表示される場合と、されない場合がある←こういうの困る！
この場合、繰り返しコントロールのバインドデータにServerSideJavaScriptで
NotesViewEntryで取得したデータを配列に格納して使用する必要があると思いま
す
89

90. 注意②
1つのビューに何千件も表示しようというのは、Cool
な実装ではありません
端末のブラウザがJavaScirptを解釈して描画を行いますので、一定のデータ件数を
超えるとスクロールがパラパラマンガのようになります
ユーザーが
本当に何を求めているのか？
この先、何をしたいのか？
再度、見つめ直してください
90

91. 超簡単!!
5.ビューから簡単検索
91

92. <ul>タグにdata-filter=“true”を追加
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">
92

93. 簡単検索 完成形
93

94. 使用上の注意
94

95. 注意
1. ビューに表示されるすべての文字列が検索対象になります
2. ブラウザの機能で検索するので、データ件数が増えすぎる
とパフォーマンスが悪くなります
95

96. 6.フォーム画面とタッチ、タップ入力
96

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>
97

98. フォームを作る②
6. 5で作った<div>タグの内側に<h3 style="font-size:120%;">タグ
を配置
<div class="ui-bar ui-bar-b" style="margin:-15px;">
<h3 style="font-size:120%;">
</h3>
</div>
7. 6で作った<h3>タグの内側にコアコントロール－計算結果フィールド
をドラッグ&ドロップで配置
8. 計算結果フィールド<xp:text>を選択し、値で単純データバインディ
ングを選択、データソース「document1」、バインド先
「Subject(件名)」を指定
98

99. フォームを作る③
9. ５で作った</div>(終端タグ)の下にコアコントロール－イメージをド
ラッグ&ドロップで配置(画像の選択画面では“イメージプレースホル
ダーの使用”を選択)
10. イメージ<xp:image>を選択し、オプション－イメージリソースの横
にある◇をクリックし、”値の計算”を選択
11. SSJSに添付ファイル画像の一つ目のファイルパスを取得する式を記述
"/"+document1.getDocument().getUniversalID()+"/$File/"+@Subset(document1.getItemValue("ImageFileNameList"),1
);
12. イメージ<xp:image>を選択し、widthを”100パーセント”に指定
99

100. フォームを作る④完成形
ここまでできれば、後は自力で実装できるはず
100

101. jQueryMobile版
フォーム部品作成ガイド
101

102. 普通の入力フィールド
1. <article>タグの間に、コアコント
ロール－編集ボックスをドラッグ&ド
ロップ
<!-- コンテンツ -->
<article data-role="content">
<xp:inputText id="inputText1"
value="#{document1.Field01}">
</xp:inputText>
</article>
2. 単純データバインディングでフィール
ドを割り当てる
102

103. ボタン(保存ボタン➀)
1. <article></article>タグの間に、コ
アコントロール－ボタンをドラッグ&
ドロップ
2. ラベルに「保存」と指定
3. イベントのonClickにサーバータブ－
シンプルアクションでアクションの追
加ボタンを押し、カテゴリ－「文書」、
アクション－「文書の保存」を指定
103

104. なんて簡単！
コアコントロールにプロパティを
セットしただけ！！
104

105. ボタン(保存ボタン②)
4. ボタンを文字の幅にするには、ソース
タブでボタンコントロール
<xp:button>を選択し、属性リスト
(すべてのプロパティ－基本－attrs)に
+ボタンで下記の属性を追加
name
data-inline
value
true
重要！XPages攻略のポイント!
105

106. 大事なことなので2回言います
1. 属性リスト(すべてのプロ
パティ－基本－attrs)の
[＋]ボタンを押す
2. 追加された属性のname
とvalueにjQueryMobile
の拡張タグを設定する
出力されるHTML
<button class="xspButtonCommand" type="button" name="view:_id1:button1"
id="view:_id1:button1" data-inline="true">
106

107. ボタン(キャンセルボタン)
1. 先ほど追加したボタンコントロール終
端タグ<xp:button>の後ろに同じよ
うにコアコントロール－ボタンをド
ラッグ&ドロップで配置
2. ラベルに「キャンセル」と指定
3. イベントのonClickにサーバータブ－
シンプルアクションでアクションの追
加ボタンを押し、カテゴリ－「基本」、
アクション－「ページを開く」を指定、
「開くページの名前」にビュー用の
XPagesを指定
4. 保存ボタンと同じく、属性リスト
(attrs)に「data-inline」タグを追加
し、”true“を設定
107

108. フリップスイッチ➀
フリップスイッチはコアコントロールの
「リストボックス」で作ります。
1. <article>タグの間に、コアコント
ロール－リストボックスをドラッグ&
ドロップ
2. 単純データバインディングでフィール
ドを割り当てる
3. プロパティの値タブで項目の追加ボタ
ンを押し、選択肢のラベルと値を設定
108

109. フリップスイッチ②
4. 属性リスト(attrs)に+ボタンで下記の
属性を追加
name
data-role
value
slider
こんな風にも使える
109

110. セレクトメニュー
セレクトメニューはコアコントロールの
「リストボックス」で作ります。
1. <article>タグの間に、コアコント
ロールのリストボックスをドラッグ&
ドロップ
2. 単純データバインディングでフィール
ドを割り当てる
3. プロパティの値タブで項目の追加ボタ
ンを押し、選択肢のラベルと値を設定
4. XPagesのテーマをオフにするためす
べてのプロパティ－スタイル－
disableThemeに”true”を設定
タップすると
110

111. ラジオボタン(縦並び)
ラジオボタンはコアコントロールの「ラジ
オボタン」で作ります。
※ラジオボタングループでは作れません。
1. <article>タグの間に、<fieldset
data-role=“controlgroup“>タグを追
加
<!-- コンテンツ -->
<article data-role="content">
<fieldset data-role="controlgroup">
</fieldset>
2. <fieldset>タグの間にコアコントロー
ル－ラジオボタンをドラッグ&ドロッ
プ
3. 単純データバインディングでフィール
ドを割り当てる
111

112. ラジオボタン(縦並び)
4. ラジオボタンタブ－ラベルプロパティ
に表示用の選択肢、ラジオグループ名
にグループ名を設定
5. データタブ－選択時の値を設定
6. ラジオボタン<xp:>の下に必要な数だ
け、ラジオボタンを配置し、2～5の操
作を繰り返す(4のラジオグループ名は
同じにする)
別フォームのフィールドに設定した内容や一度入力したキーワードを選択
肢と出す場合(@Dblookupや@DbColumnを使用)、繰り返しコントロー
ルと組み合わせる
112

113. ラジオボタン(横並び)
1. ラジオボタン(縦並び)と同じ方法でラ
ジオボタンを作る
2. <fieldset>タグにdatatype=“horizontal“を追加する
<!-- コンテンツ -->
<article data-role="content">
<fieldset data-role="controlgroup“ data-type="horizontal">
</fieldset>
113

114. スライダー➀
スライダーはコアコントロールの「編集
ボックス」で作ります。
1. <article>タグの間に、コアコント
ロールの編集ボックスをドラッグ&ド
ロップ
2. 単純データバインディングでフィール
ドを割り当てる
3. すべてのプロパティ－typeに”range”
を指定
114

115. スライダー②
4. 属性リスト(attrs)に+ボタンで下記の
属性を追加
name
data-highlight
value
true
name
max
value
5
name
min
value
1
name
value
value
data-highlight=false
1
data-highlight=true
115

116. 7.カメラ連携
116

117. リッチテキストに画像を添付する➀
1. <article>タグの間に、コアコント
ロール－ファイルのアップロードをド
ラッグ&ドロップ
2. 単純データバインディングでフィール
ド(リッチテキスト)を割り当てる
3. 属性リスト(attrs)に下記の属性を追加
name
accrpt
value
image/*
属性リスト(attrs)のすぐ上に
acceptというプロパティがあ
りますが、ここに設定しても
タグが出力されません 117

118. リッチテキストに画像を添付する②
4. フォーム上に計算結果フィールドがある場合
は、プロパティ-データタブ-フォーム検証の
実行に「文書保存時」を設定
118

119. リッチテキストに画像を添付する③
Android2.2以降、iOS6以降で動作可能
119

120. 8.XPages開発の良いところ
120

121. 既存のDBに手を加えることなく
Web対応、モバイル対応可能
※ビュー(データソース用)の変更が不要な場合
Notes用設計
&
DATA
XPages設計のみ
モバイル
用DB
既存DB
DATAは空っぽ
データソースと
して参照
Notesクライアント
Webブラウザ
121

122. またまたぁ、Notesのことだから
参照だけでしょ！
122

123. いえいえ、更新もできます！
既存の設計もゴチャゴチャにならず
スマートにモバイル対応するならこれ！
123

124. 面倒な処理が不要
• SQLインジェクション対策
• クロスサイトスクリプティング対策
(<script>alert(‘XSS’);</script>のような物)
• テーブル設計(ちゃんと考える必要はありますよ)
124

125. @式が超便利！
LotusScriptやJavaScriptだと、ループさ
せて、何行も書いて、エラー処理
も・・・
@式なら1行ってことも
@式は文字列操作が得意！(ループ不要)
125

126. @式でできることは@式でやる
できないことはスクリプト言語で
開発工数は最小化し、お客様との対話、
新しい価値を創造する部分にパワーを！
126

127. 変化が早い時代には
容易にスクラッチ＆ビルドし、
変化に対応、創造していく必要がある
余計なことを考えなくて済む
オールインワンのDominoが最適!!
※ユーザーにとっては業務要件を満たしていれば、どんなアーキテクチャーを使っ
ているかは問題ではない
127

128. 9.UXって何？
128

129. もしかして
UI≒UXだと思っていませんか？
129

130. もしかして
ヌルヌル動くカッコイイ
ギミックだと思っていませんか？
130

131. UXとはUserExperienceの略ですね
131

132. ちなみに
Experience(経験)は
Expertise(専門知識)と同じ語源
だそうです
132

133. UserExperienceは
日本語では
ユーザー体験
という意味ですね
133

134. 業務アプリでは
134

135. 問題解決そのもの
だと思います
135

136. つまり
ユーザーが何をしたいのか？
136

137. そして
ユーザー自身ではない開発者が
それをどうとらえ、
一緒に解決していくか？
をデザインする
137

138. UXとは
ネット
ワーク
誠実
これじゃ
ないかな？
セキュ
リティ
ビジ
ョン
Other
UI
業務
知識
認知
工学
心理学
138

139. 今、起きていること
139

140. Natural User Interfaceへの進化
PCだけでなく、ゲーム、家電など、液晶画面は表示
装置からNUIのInterfaceへ
MS-DOS、
Windows、
iOS、Android、
UNIX
MacOS
Win8
情報量
情報量
情報量
小
多
小
CUI
GUI
NUI
変化は機会であり、チャンス!!
140

141. タップを想定すると必然的に
情報量は少なくなる
何が重要？何のために？どんな活用シーン？
を見極める必要がある
141

142. 何を表示すべきか？何がしたいのか？
設計はより本質的に！
※NotesクライアントっぽいUIを目指してはいけません!
142

143. 10.まとめ
143

144. Point 1
コアコントロールが
どんなHTMLに変換されるのか？
を意識する
144

145. Point 2
jQueryMobile用拡張タグは
属性リスト(attrs)
に追加
※属性リストはNotes8.5.3以降有効
145

146. この2つの基本技を身につければ
他のコントロールも実装できるはずです
たぶん・・・・
146

147. ところで
レスポンシブデザイン
ってご存じですか？
147

148. 最近のWebアプリの課題
同じWebアプリなのにPC用、タブレット用、スマー
トフォン用で3つもHTMLファイルやCSSファイルを
作るのはもったいないよね
それぞれにデザイン作ってたら工数も3倍かかる
コンテンツが一緒なんだったら、自動的にレイアウ
ト変えてくれると良いのに・・・
148

149. これを解決する1つの方法が
レスポンシブデザイン
149

150. 簡単に実現してくれる
フレームワークには
jQueryMobile(1.3以降)や
Twitter Bootstrap
他にもいろいろあります
150

151. レスポンシブデザイン-サンプル
jQueryMobileのサイトより
タブレット
スマートフォン
151

152. こういうのも作れます
レスポンシブデザイン
タブレット横
152

153. こういうのも作れます
レスポンシブデザイン
タブレット縦
153

154. こういうのも作れます
レスポンシブデザイン
スマートフォン
154

155. Point 3
情報量は減らし
必要なことだけを表示
操作は最短のアクションで
155

156. Everything should be made as simple as
possible, but not simpler.
すべてのものはできるだけシンプルに作られるべきだ。しかし手抜きであっては
いけない。
156

157. ありがとうございました
m(_ _)m
ペコリ
157

158. jQueryMobileに関する情報
Android/iPhone/Windows Phone対応 jQuery Mobileス
マートフォンアプリ開発
岡本 隆史・梶原 直人・田中 智文 著
大型本: 368ページ
出版社: ソフトバンククリエイティブ (2012/6/20)
jQueryVaridationによる入力チェック
jqPlotによるグラフ描画
パフォーマンスチューニング
などノウハウ満載です
ドットインストール
３分動画でマスターする初心者向けプログラミング学習サイト
http://dotinstall.com/
SlideShareを”jQueryMobile”で検索すると素晴らしいスライ
ドがたくさんあります(日本語で)
http://www.slideshare.net/
158

159. Webデザインに関する情報
Webデザインレシピ
CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろい
ろ
http://webdesignrecipes.com/css-visual-formating-model/
159

160. Special Thanks
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
160