Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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)...
角を丸くしたリスト
(Rounded List)
これもよくあるスマホデザイン
単独で使う物ではなく、中にリスト項目
などを配置して使う
メニューとか画面をデザインするためによ
く使う

Static Line Item
Rounded Lis...
タブバー&タブバーボタン
(Tab Bar&Tab Bar Button)
外側がタブバー
タブバーの内側にタブバーボタンを配置し
ます
タブバーボタンのアイコンは自分で用意す
る必要があります

Tab Bar Tab Bar Button
...
ツールバーボタン

Notes9から搭載

ページ見出し上にボタンを複数配置できま
す。
順番は決まっていて一つ目は右端、二つ目
は左端、三つ目は左端の次

三つ目のボタンを配置するとページ見出し
のLabelがずれるのはご愛敬!

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

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

複数行編集ボックス

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

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

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

この状態だとフィールドには”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%に達した...
ユーザーさんも普通にスマホ
使っています

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用

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

エラーを表示
DB内の[アプリケーションプロパティ]-[XPages実行...
フォーム
Notes文書
Notes9では添付画像に
サムネイルが表示される
ようになりました!

フォーム設計

58
ビュー

カテゴリを表示

文書名を表示

59
次に

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

jQueryMobileはjQueryを使ったモバイルUIライブラリなのでjQ...
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....
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
ファイルが表示されな...
下ごしらえ完了

66
jQueryMobile基本構文
ListView

HTMLソース
<ul data-role="listview" data-inset="true">
<li><a href="#">Acura</a></li>
<li><a href=...
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の...
Domino
9.0

XPagesを作成し、読み込む

1. DB内のアプリケーションプロパティ-XPagesタブにある「実行時最適
化JavaScriptおよびCSSリソースの使用」のチェックを外す

2. AMDを停止させるJavaScr...
Domino
9.0

XPagesを作成し、読み込む

3. 1で作成した2つのJavaScriptファイルをファイルリソースとしてイ
ンポートする
4. XPagesを新規作成し、ソースタブを開く
5. <xp:view>と</xp:vie...
XPages with jQueryMobile基本のキ
1. 先ほど書き込んだ</xp:this.resources>の下に下記のコードを書き込
む
</xp:this.resources>

<!-- サイズをデバイスの幅に設定、倍率を固定...
こうなる
<div data-role="page">
<!-- ヘッダー -->
<header data-role="header">
<h3>ヘッダー</h3>
</header>
<!-- コンテンツ -->
<article data...
4.画像付きビューを作る
(画像は添付ファイル)

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

75
カテゴリビューを作る➀
1. 新規XPagesを作成(名前:xp_vw_group1.xsp)
2. データソースの追加ボタンを押し、“Dominoビュー”を選択、事前準
備で用意したビューとデータソース名を指定

3. 展開レベルに1を指定カ...
カテゴリビューを作る②ソース
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:this.data>
<xp:...
カテゴリビューを作る③
6. <article></article>タグの内側に<ul data-role=“listview”>タグを
配置
<article data-role="content">
<ul data-role="listv...
カテゴリビューを作る④
9. 繰り返しコントロールタグ<xp:repeat>を選択し、名前を削除(名前
が残っているとjquery mobileのスタイルが反映されません)

10. ページ替えをさせないため、オプションの繰り返し頻度には大きな...
カテゴリビューを作る⑤
12. <li></li>タグの内側にコアコントロール-リンクをドラッグ&ド
ロップで配置し、ラベルを消す

12. リンク<xp:link> </xp:link>タグの内側にコアコントロール-計算
結果フィールドをドラ...
カテゴリビューを作る⑥
15. SSJS(ServerSideJavaScript)に次に表示するのビュー用XPagesを指
定し、URL引数にcategoryFillterを設定

"/xp_vw_group2.xsp?OpenXpage&c...
カテゴリビューを作る⑦完成形

82
画像付きビューを作る➀
1. 先ほど作ったカテゴリ用ビューXPages(xp_vw_group1.xsp)をコ
ピーして、xp_vw_group2.xspにリネームする
2. <header><h3>タグの内側を”分類“→”品名“に変更
3. ...
画像付きビューを作る②
6. リンクコントロール<xp:link>を選択し、オプション-にイメージを
表示にチェックを付け、イメージの横にある◇をクリックし、”値の計
算“を選択

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

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

9. 文字を大きくするために計算結果フィールド<x...
画像付きビューを作る③
10. 先ほど追加した</h3>タグの後ろにコアコントロール-計算結果
フィールドを追加し、値で単純データバインディングを選択、データ
ソース「dataRow」、バインド先「Price(金額)」、表示タイプ「数
値」、表...
画像付きビューを作る⑦完成形

87
使用上の注意

88
注意➀
複数階層のカテゴリビューをcategoryFillter=A¥Bで
実現はできないと思います
Domino8.5.3FP4でやってみましたが、データが数十件程度なら表示されますが、
それ以上にデータ件数が多くなるとカテゴリが表示されませ...
注意②
1つのビューに何千件も表示しようというのは、Cool
な実装ではありません
端末のブラウザがJavaScirptを解釈して描画を行いますので、一定のデータ件数を
超えるとスクロールがパラパラマンガのようになります
ユーザーが

本当に何...
超簡単!!

5.ビューから簡単検索

91
<ul>タグにdata-filter=“true”を追加
1. 先ほど作った画像付きビューXPages(xp_vw_group2.xsp)に簡易検
索機能をつけるには<ul>タグにdata-filter=“true”属性を追加
<!-- コンテ...
簡単検索 完成形

93
使用上の注意

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

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

96
フォームを作る➀
1. 新規XPagesを作成(名前:xp_fmr_menu.xsp)
2. データソースの追加ボタンを押し、“Domino文書”を選択、事前準備
で用意したフォームとデータソース名を指定、デフォルトのアクショ
ンは「文書を開く...
フォームを作る②
6. 5で作った<div>タグの内側に<h3 style="font-size:120%;">タグ
を配置
<div class="ui-bar ui-bar-b" style="margin:-15px;">
<h3 sty...
フォームを作る③
9. 5で作った</div>(終端タグ)の下にコアコントロール-イメージをド
ラッグ&ドロップで配置(画像の選択画面では“イメージプレースホル
ダーの使用”を選択)
10. イメージ<xp:image>を選択し、オプション-イ...
フォームを作る④完成形
ここまでできれば、後は自力で実装できるはず

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

101
普通の入力フィールド
1. <article>タグの間に、コアコント
ロール-編集ボックスをドラッグ&ド
ロップ
<!-- コンテンツ -->
<article data-role="content">
<xp:inputText id="in...
ボタン(保存ボタン➀)
1. <article></article>タグの間に、コ
アコントロール-ボタンをドラッグ&
ドロップ
2. ラベルに「保存」と指定

3. イベントのonClickにサーバータブ-
シンプルアクションでアクションの追...
なんて簡単!
コアコントロールにプロパティを
セットしただけ!!

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

data-inline
...
大事なことなので2回言います
1. 属性リスト(すべてのプロ
パティ-基本-attrs)の
[+]ボタンを押す

2. 追加された属性のname
とvalueにjQueryMobile
の拡張タグを設定する

出力されるHTML
<button...
ボタン(キャンセルボタン)
1. 先ほど追加したボタンコントロール終
端タグ<xp:button>の後ろに同じよ
うにコアコントロール-ボタンをド
ラッグ&ドロップで配置
2. ラベルに「キャンセル」と指定
3. イベントのonClickにサー...
フリップスイッチ➀
フリップスイッチはコアコントロールの
「リストボックス」で作ります。
1. <article>タグの間に、コアコント
ロール-リストボックスをドラッグ&
ドロップ
2. 単純データバインディングでフィール
ドを割り当てる

...
フリップスイッチ②
4. 属性リスト(attrs)に+ボタンで下記の
属性を追加
name

data-role

value

slider

こんな風にも使える

109
セレクトメニュー
セレクトメニューはコアコントロールの
「リストボックス」で作ります。
1. <article>タグの間に、コアコント
ロールのリストボックスをドラッグ&
ドロップ
2. 単純データバインディングでフィール
ドを割り当てる
3....
ラジオボタン(縦並び)
ラジオボタンはコアコントロールの「ラジ
オボタン」で作ります。
※ラジオボタングループでは作れません。

1. <article>タグの間に、<fieldset
data-role=“controlgroup“>タグを追...
ラジオボタン(縦並び)
4. ラジオボタンタブ-ラベルプロパティ
に表示用の選択肢、ラジオグループ名
にグループ名を設定

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

6. ラジオボタン<xp:>の下に必要な数だ
け、ラジオボタンを配置し、2~5の操...
ラジオボタン(横並び)
1. ラジオボタン(縦並び)と同じ方法でラ
ジオボタンを作る
2. <fieldset>タグにdatatype=“horizontal“を追加する
<!-- コンテンツ -->
<article data-role="c...
スライダー➀
スライダーはコアコントロールの「編集
ボックス」で作ります。
1. <article>タグの間に、コアコント
ロールの編集ボックスをドラッグ&ド
ロップ
2. 単純データバインディングでフィール
ドを割り当てる
3. すべてのプロ...
スライダー②
4. 属性リスト(attrs)に+ボタンで下記の
属性を追加
name

data-highlight

value

true

name

max

value

5

name

min

value

1

name

v...
7.カメラ連携

116
リッチテキストに画像を添付する➀
1. <article>タグの間に、コアコント
ロール-ファイルのアップロードをド
ラッグ&ドロップ
2. 単純データバインディングでフィール
ド(リッチテキスト)を割り当てる

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

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

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

120
既存のDBに手を加えることなく
Web対応、モバイル対応可能
※ビュー(データソース用)の変更が不要な場合

Notes用設計
&
DATA

XPages設計のみ

モバイル
用DB

既存DB

DATAは空っぽ

データソースと
して参照...
またまたぁ、Notesのことだから
参照だけでしょ!

122
いえいえ、更新もできます!

既存の設計もゴチャゴチャにならず
スマートにモバイル対応するならこれ!
123
面倒な処理が不要
• SQLインジェクション対策

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

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

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

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

126
変化が早い時代には
容易にスクラッチ&ビルドし、
変化に対応、創造していく必要がある

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

オールインワンのDominoが最適!!
※ユーザーにとっては業務要件を満たしていれば、どんなアーキテクチャーを使っ
ているかは...
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
...
タップを想定すると必然的に
情報量は少なくなる

何が重要?何のために?どんな活用シーン?
を見極める必要がある
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倍かかる

コンテンツが一緒なんだったら、自動的に...
これを解決する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ページ
出版社: ソフトバンククリ...
Webデザインに関する情報
Webデザインレシピ
CSSでレイアウトするなら絶対覚えておきたい配置のルール:フロートや絶対配置、z-index とかいろい
ろ
http://webdesignrecipes.com/css-visual-for...
Special Thanks
Atsushi Ono(IBM Japan)
AMD(Asynchronous Module Definition)に関する素晴らしい情報をいただきました

Atsushi Sato(IBM Japan)
急なメー...
Upcoming SlideShare
Loading in …5
×

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

6,063 views

Published on

  • Sex in your area is here: ♥♥♥ http://bit.ly/39sFWPG ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Follow the link, new dating source: ❤❤❤ http://bit.ly/39sFWPG ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

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

×