あなたにも出来る！XPages & jQueryMobileで作るスマートフォン、タブレットUX開発

あなたにも出来る！

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

ジョンソンコントロールズ株式会社

林哲司

XPagesDay2013

B-2

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

2

Notes/Domino9使ってますか？

3

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

4

ページ見出し (Page Heading)

5

ページのヘッダーですボタンも配置することが出来ます

リスト項目 (Static Line Item)

6

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

Notes9では「角を丸くしたリスト項目」と書いてある

角を丸くしたリスト (Rounded List)

7

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

Rounded List

Static Line Item

タブバー&タブバーボタン (Tab Bar&Tab Bar Button)

8

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

Tab Bar Tab Bar Button

ツールバーボタン

9

Notes9から搭載

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

切り替えスイッチ (Mobile Switch)

10

ON、OFFスイッチですフィールドをバインドできますが、バインドされるのは初期値です。選択状態をフィールドに保存するには onStateChangedイベントで別フィールドに値を書き込む処理が必要です。

重要！テストに出ます！

以上！！

11

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

12

編集ボックスボタン

あとは・・・

13

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

14

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

15

可能性は無限大！

16

って

17

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

18

最初の敵は

19

開発情報の不足 &

English

Next Enemy！！！

20

例えば、WebでHTMLサンプルを見つけて

21

やりたいことソース

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

22

動かない orz

23

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

Why?

24

XPagesはXML(HTMLではない)なので終端タグがないと動かない

25

もしくは <input type="checkbox" name="checkbox-0" />Check me

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

26

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

27

おっしゃる通り！！

28

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

29

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

30

コアコントロールと出力される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>

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

32

先ほどのチェックボックスのHTML部分に「チェックボックス」を配置

33

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

ほら出来た！！

34

この状態だとフィールドには”true” or “false”が保存されます

第二の敵は

35

XPagesはHTMLじゃない攻略には試行錯誤が必要！！

※バージョンが変わると攻略パラメータも変わる

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

36

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

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

38

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

39

Notesのセクションみたいなものとか

40

↑XPagesで実装されています

➀クリックすると

②ミョーン

画像付きビューとか

41

Notesクライアントでは出来なかった！

Facebookっぽいパネルとか

42

➀クリックすると

②ミョーン

ナビゲータの代わりに使える

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

43

ご安心ください！

今から解説するXPages with jQueryMobileの基本を知れば

誰でも実装できるようになります

44

でも・・・

45

jQueryMobileって結局Dojoと同じじゃないの？

46

IBMさんはDojo推進してるし・・・

というあなた！

47

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

48

jQueryMobileは

49

日本語ドキュメントが豊富です！

50

MSさんも jQueryMobile派です

ライセンスは、MIT Licenseなので無償です

jQueryMobile

51

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

3.jQueryMobieを組み込む

52

どんな物を作る？

53

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

こんなの！

54

➀カテゴリを表示 ②文書名を表示 ③フォームを表示

URL引数でタップしたカテゴリを引き渡す(categoryFillter)

URL引数で文書IDを引き渡す

最初に用意する物

55

動作環境

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が無料公開しているブラウザ

この2つは必須！ないとデバッグできません

事前準備

57

エディタの行番号を表示 Designer のプリファレンスの [一般]-[エディター]-[テキスト・エディター] 内にある「行番号の表示」にチェックを付ける

エラーを表示 DB内の[アプリケーションプロパティ]-[XPages実行時エラーページを表示]にチェックを付ける

IBMさんデフォルトONで良いのでは

フォーム

58

Notes文書

フォーム設計

Notes9では添付画像にサムネイルが表示される

ようになりました！

ビュー

59

カテゴリを表示文書名を表示

次に

60

jQueryをダウンロード

61

1. jquery.com/downloadからjQuery1.10.2圧縮版(jquery-1.10.2.min.js)をダウンロード

jQueryMobileはjQueryを使ったモバイルUIライブラリなのでjQueryがないと動きません。

jQueryMobileをダウンロード

62

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

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ファイルをスクリプトライブラリにコピペで取り込むと、構文エラーで保存できないので、この方法で。

cssファイルをスタイルシートにインポート

64

1. jquery.mobile-1.3.2.zipを解凍し、jquery-mobile-1.3.2.min.cssをインポート

画像ファイルをイメージリソースとしてインポート

65

1. jquery.mobile-1.3.2.zipを解凍し、imagesフォルダにあるgifファイル1つとpngファイル4つをインポート(ファイル選択ダイアログにpngファイルが表示されない場合、ファイル名に「*.*」と入力し、すべてのファイルを表示させる)

2. インポートされたファイル名の前に「images/」というフォルダ名を追加

下ごしらえ完了

66

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ソース

XPagesを作成し、読み込む

68

1. XPagesを新規作成し、ソースタブを開く

2. <xp:view>と</xp:view>タグの間に､下記のコードを書き込む

Domino 8.5.3


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


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; }


71

3. １で作成した2つのJavaScriptファイルをファイルリソースとしてインポートする

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

Dojo道場～第11回「Dojo 最新動向 - Asynchronous Module Definition」 http://codezine.jp/article/detail/6482

Domino 9.0

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>でもかまいませんが、HTML５では文書構造を定義できるようになったため、この書き方がオススメ!

<article>タグの間にビューやフォームとなる部品を配置していきます

今回のサンプルではテーマカラーを青にするため、ページ部分にテーマカラーを設定しています <div data-role="page" data-theme="b">

ここまでをひな形にしておくと便利

こうなる

73

<div data-role="page">

 <header data-role="header"> <h3>ヘッダー</h3> </header>  <article data-role="content"> </article>  <footer data-role="footer"> <h3>フッター</h3> </footer>

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

74

XPages攻略基本技ソースタブドラッグ&ドロップ

75

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

カテゴリビューを作る➀

76

1. 新規XPagesを作成(名前：xp_vw_group1.xsp) 2. データソースの追加ボタンを押し、“Dominoビュー”を選択、事前準

備で用意したビューとデータソース名を指定

3. 展開レベルに１を指定カテゴリのみ表示するため、データソースプロパティの「expandLevel」に“１”を指定

4. ひな形のタグ(リソース読込、jQueryMobileの基本構造)を書き込み、フッターを削除

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

カテゴリビューを作る③

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>

カテゴリビューを作る④

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>

カテゴリビューを作る⑤

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>

カテゴリビューを作る⑥

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)

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

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>”を追加

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();

画像付きビューを作る②

84

6. リンクコントロール<xp:link>を選択し、オプション－にイメージを表示にチェックを付け、イメージの横にある◇をクリックし、”値の計算“を選択

7. SSJSに一つ目の添付ファイルパスを指定する式を設定

"/"+dataRow.getDocument().getUniversalID()+"/$File/"+@Subset(dataRow.getDocument().getItemValue("ImageFileNameList"),1)

画像付きビューを作る③

85

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

9. 文字を大きくするために計算結果フィールド<xp:text>を<h3></h3>タグで囲う

<h3> <xp:text escape="true" id="computedField1" value="#{dataRow.Subject}"> </xp:text> </h3>

画像付きビューを作る③

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>

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

87

使用上の注意

88

注意➀

89

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

注意②

90

1つのビューに何千件も表示しようというのは、Coolな実装ではありません端末のブラウザがJavaScirptを解釈して描画を行いますので、一定のデータ件数を超えるとスクロールがパラパラマンガのようになりますユーザーが

本当に何を求めているのか？この先、何をしたいのか？再度、見つめ直してください

5.ビューから簡単検索

91

超簡単!!

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

簡単検索完成形

93

使用上の注意

94

注意

95

1. ビューに表示されるすべての文字列が検索対象になります

2. ブラウザの機能で検索するので、データ件数が増えすぎるとパフォーマンスが悪くなります

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>

フォームを作る②

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>

フォームを作る③

99

9. ５で作った</div>(終端タグ)の下にコアコントロール－イメージをドラッグ&ドロップで配置(画像の選択画面では“イメージプレースホルダーの使用”を選択)

10. イメージ<xp:image>を選択し、オプション－イメージリソースの横にある◇をクリックし、”値の計算”を選択

11. SSJSに添付ファイル画像の一つ目のファイルパスを取得する式を記述

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

"/"+document1.getDocument().getUniversalID()+"/$File/"+@Subset(document1.getItemValue("ImageFileNameList"),1);

フォームを作る④完成形

100

ここまでできれば、後は自力で実装できるはず

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

101

普通の入力フィールド

102

1. <article>タグの間に、コアコントロール－編集ボックスをドラッグ&ドロップ

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

 <article data-role="content"> <xp:inputText id="inputText1" value="#{document1.Field01}"> </xp:inputText> </article>

ボタン(保存ボタン➀)

103

1. <article></article>タグの間に、コアコントロール－ボタンをドラッグ&ドロップ

2. ラベルに「保存」と指定

3. イベントのonClickにサーバータブ－シンプルアクションでアクションの追加ボタンを押し、カテゴリ－「文書」、アクション－「文書の保存」を指定

なんて簡単！コアコントロールにプロパティを

セットしただけ！！

104

ボタン(保存ボタン②)

105

4. ボタンを文字の幅にするには、ソースタブでボタンコントロール<xp:button>を選択し、属性リスト(すべてのプロパティ－基本－attrs)に+ボタンで下記の属性を追加

name data-inline

value true

重要！XPages攻略のポイント!

大事なことなので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の拡張タグを設定する

ボタン(キャンセルボタン)

107

1. 先ほど追加したボタンコントロール終端タグ<xp:button>の後ろに同じようにコアコントロール－ボタンをドラッグ&ドロップで配置

2. ラベルに「キャンセル」と指定 3. イベントのonClickにサーバータブ－

シンプルアクションでアクションの追加ボタンを押し、カテゴリ－「基本」、アクション－「ページを開く」を指定、「開くページの名前」にビュー用のXPagesを指定

4. 保存ボタンと同じく、属性リスト(attrs)に「data-inline」タグを追加し、”true“を設定

フリップスイッチ➀

108

フリップスイッチはコアコントロールの「リストボックス」で作ります。 1. <article>タグの間に、コアコント

ロール－リストボックスをドラッグ&ドロップ


3. プロパティの値タブで項目の追加ボタンを押し、選択肢のラベルと値を設定

フリップスイッチ②

109

4. 属性リスト(attrs)に+ボタンで下記の属性を追加

name data-role

value slider

こんな風にも使える

セレクトメニュー

110

セレクトメニューはコアコントロールの「リストボックス」で作ります。 1. <article>タグの間に、コアコント

ロールのリストボックスをドラッグ&ドロップ


3. プロパティの値タブで項目の追加ボタンを押し、選択肢のラベルと値を設定

4. XPagesのテーマをオフにするためすべてのプロパティ－スタイル－disableThemeに”true”を設定

タップすると

ラジオボタン(縦並び)

111

ラジオボタンはコアコントロールの「ラジオボタン」で作ります。 ※ラジオボタングループでは作れません。 1. <article>タグの間に、<fieldset

data-role=“controlgroup“>タグを追加

2. <fieldset>タグの間にコアコントロール－ラジオボタンをドラッグ&ドロップ


 <article data-role="content"> <fieldset data-role="controlgroup"> </fieldset>

ラジオボタン(縦並び)

112

4. ラジオボタンタブ－ラベルプロパティに表示用の選択肢、ラジオグループ名にグループ名を設定

5. データタブ－選択時の値を設定

6. ラジオボタン<xp:>の下に必要な数だけ、ラジオボタンを配置し、2～5の操作を繰り返す(4のラジオグループ名は同じにする)

別フォームのフィールドに設定した内容や一度入力したキーワードを選択肢と出す場合(@Dblookupや@DbColumnを使用)、繰り返しコントロールと組み合わせる

ラジオボタン(横並び)

113

1. ラジオボタン(縦並び)と同じ方法でラジオボタンを作る

2. <fieldset>タグにdata-type=“horizontal“を追加する 

<article data-role="content"> <fieldset data-role="controlgroup“ data-type="horizontal"> </fieldset>

スライダー➀

114

スライダーはコアコントロールの「編集ボックス」で作ります。 1. <article>タグの間に、コアコント

ロールの編集ボックスをドラッグ&ドロップ


3. すべてのプロパティ－typeに”range”を指定

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

7.カメラ連携

116

リッチテキストに画像を添付する➀

117

1. <article>タグの間に、コアコントロール－ファイルのアップロードをドラッグ&ドロップ

2. 単純データバインディングでフィールド(リッチテキスト)を割り当てる

3. 属性リスト(attrs)に下記の属性を追加

name accrpt

value image/*

属性リスト(attrs)のすぐ上にacceptというプロパティがありますが、ここに設定しても

タグが出力されません

リッチテキストに画像を添付する②

118

4. フォーム上に計算結果フィールドがある場合は、プロパティ-データタブ-フォーム検証の実行に「文書保存時」を設定

リッチテキストに画像を添付する③

119

Android2.2以降、iOS6以降で動作可能

8.XPages開発の良いところ

120

既存のDBに手を加えることなく Web対応、モバイル対応可能

121

※ビュー(データソース用)の変更が不要な場合

既存DB モバイル

用DB

Notes用設計 &

DATA

XPages設計のみ

データソースとして参照

DATAは空っぽ

Notesクライアント Webブラウザ

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

122

いえいえ、更新もできます！

123

既存の設計もゴチャゴチャにならずスマートにモバイル対応するならこれ！

面倒な処理が不要

124

• SQLインジェクション対策

• クロスサイトスクリプティング対策(<script>alert(‘XSS’);</script>のような物)

• テーブル設計(ちゃんと考える必要はありますよ)

@式が超便利！

125

LotusScriptやJavaScriptだと、ループさせて、何行も書いて、エラー処理も・・・

@式なら1行ってことも @式は文字列操作が得意！(ループ不要)

@式でできることは@式でやるできないことはスクリプト言語で

開発工数は最小化し、お客様との対話、新しい価値を創造する部分にパワーを！

126

127

オールインワンのDominoが最適!!

変化が早い時代には容易にスクラッチ＆ビルドし、

変化に対応、創造していく必要がある

余計なことを考えなくて済む

※ユーザーにとっては業務要件を満たしていれば、どんなアーキテクチャーを使っているかは問題ではない

9.UXって何？

128

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

129

もしかしてヌルヌル動くカッコイイ

ギミックだと思っていませんか？

130

UXとはUserExperienceの略ですね

131

ちなみに Experience(経験)は

Expertise(専門知識)と同じ語源だそうです

132

UserExperienceは日本語では

ユーザー体験という意味ですね

133

業務アプリでは

134

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

135

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

136

そしてユーザー自身ではない開発者が

それをどうとらえ、一緒に解決していくか？

をデザインする

137

138

UXとは

UI

業務知識

認知工学

ネットワーク

セキュリティ

誠実

ビジョン

心理学

Other

これじゃないかな？

今、起きていること

139

Natural User Interfaceへの進化

140

CUI GUI NUI

MS-DOS、

UNIX

Windows、

MacOS

iOS、Android、

Win8

情報量

小

情報量

多

情報量

小

PCだけでなく、ゲーム、家電など、液晶画面は表示装置からNUIのInterfaceへ

変化は機会であり、チャンス!!

タップを想定すると必然的に情報量は少なくなる

141

何が重要？何のために？どんな活用シーン？を見極める必要がある

142

何を表示すべきか？何がしたいのか？設計はより本質的に！

※NotesクライアントっぽいUIを目指してはいけません!

10.まとめ

143

コアコントロールがどんなHTMLに変換されるのか？

を意識する

144

Point 1

jQueryMobile用拡張タグは属性リスト(attrs)

に追加

145

Point 2

※属性リストはNotes8.5.3以降有効

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

146

たぶん・・・・

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

147

最近のWebアプリの課題

148

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

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

149

簡単に実現してくれるフレームワークには

jQueryMobile(1.3以降)や Twitter Bootstrap

150

他にもいろいろあります

レスポンシブデザイン-サンプル jQueryMobileのサイトより

151

スマートフォン

タブレット

こういうのも作れますレスポンシブデザイン

152

タブレット横


153

タブレット縦


154

スマートフォン

情報量は減らし必要なことだけを表示

操作は最短のアクションで

155

Point 3

156

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

ありがとうございました

157

m(_ _)m ペコリ

jQueryMobileに関する情報

158

Android/iPhone/Windows Phone対応 jQuery Mobileスマートフォンアプリ開発岡本隆史・梶原直人・田中智文著大型本: 368ページ出版社: ソフトバンククリエイティブ (2012/6/20)

ドットインストール３分動画でマスターする初心者向けプログラミング学習サイト

http://dotinstall.com/

SlideShareを”jQueryMobile”で検索すると素晴らしいスライドがたくさんあります(日本語で) http://www.slideshare.net/

jQueryVaridationによる入力チェック jqPlotによるグラフ描画

パフォーマンスチューニングなどノウハウ満載です

Webデザインに関する情報

159

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

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

Documents

あなたにも出来る！XPages & jQueryMobileで作るスマートフォン、タブレットUX開発