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){ // 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

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

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

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

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

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

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

カテゴリビューを作る②ソース
<?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

カテゴリビューを作る③
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

カテゴリビューを作る④
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

カテゴリビューを作る⑤ 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

カテゴリビューを作る⑥ 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

画像付きビューを作る➀
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

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

画像付きビューを作る③
8. 計算結果フィールド<xp:text>を選択し、値で単純データバインディ
ングを選択、データソース「dataRow」、バインド先「Subject(件
名)」を指定

9. 文字を大きくするために計算結果フィールド<xp:text>を
<h3></h3>タグで囲う
<h3>
<xp:text escape="true" id="computedField1"
value="#{dataRow.Subject}">
</xp:text>
</h3>

85

画像付きビューを作る③
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

使用上の注意 88

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

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

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

<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

使用上の注意 94

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

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

フォームを作る➀
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

フォームを作る②
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

フォームを作る③
9. ５で作った</div>(終端タグ)の下にコアコントロール－イメージをド
ラッグ&ドロップで配置(画像の選択画面では“イメージプレースホル
ダーの使用”を選択)
10. イメージ<xp:image>を選択し、オプション－イメージリソースの横
にある◇をクリックし、”値の計算”を選択

11. SSJSに添付ファイル画像の一つ目のファイルパスを取得する式を記述
"/"+document1.getDocument().getUniversalID()+"/$File/"[email protected](document1.getItemValue("ImageFileNameList"),1
);

12. イメージ<xp:image>を選択し、widthを”100パーセント”に指定

99

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

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

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

2. 単純データバインディングでフィール
ドを割り当てる

102

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

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

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

大事なことなので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

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

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

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

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

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

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

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

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

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

7.カメラ連携 116

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

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

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

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

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

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

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

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

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

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

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

9.UXって何？ 128

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

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

UXとはUserExperienceの略ですね 131

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

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

業務アプリでは 134

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

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

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

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

今、起きていること 139

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

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

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

10.まとめ 143

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• http://www.spoon-table.co.jp