XPagesDay2014 A-4セッション資料 XPagesでjQueryMobileを使う場合のポイント

1. XPages with jQueryMobile プラクティスガイド
所属：ジョンソンコントロールズ(株)
林 哲司
2014
A4
2014/11/18
16:00-17:00
モバイルアプリケーション開発のコツ

2. 本日のアジェンダ
序 ：XPages開発能力を上げるには？
破 ：XPagesでjQueryMobileを使うには
Ｑ ：jQueryMobile設計BADプラクティス
:|| ：絶対にやってはいけない設計
：まとめ
2

3. 本日のMission
個人的
3

4. XPages開発に対するイメージを変え Notes開発者を元気にする
現在
未来
本日のMission
4

5. 序 XPages開発能力を上げるには？
5

6. 質問１：料理が上達するには？
１.高級料理店
に行く
２.レシピ本を
読む
３.シェフと
話してみる
４.料理を
作ってみる
6

7. 質問２：プログラミングが上達するには？
１.アプリを使う
２.プログラミン グの本を読む
３.開発者と
話してみる
４.アプリを
開発してみる
7

8. なぜ、実践すると上達する？
これしかないんです！でも・・・・
実践
(体験)
食べたいのに、痩せたいんです
練習したくないのに、勝ちたいんです
楽したいのに、儲けたいんです
上達
失敗
そんなことできると思いますか？
できる人がいたら、こっそり教えて下さい
8

9. 最も重要!!
失敗後のプロセス
実践
(体験)
気づく
考える
上達
失敗
大切なのは・・・
Google先生に聞くこと?
ではなく
自分で考えて、気づくこと
そのためのツールとして、基礎技術をしっかり学ぶこと
これをやらずして上達はあり得ないし、XPagesも楽しくなりません!
9

10. なぜ プラクティスなのか？
赤ちゃんが、ハイハイを始めて、失敗したら
「私はなんてダメなんだろう？私の人生は終わりだわ」
なんて思うでしょうか？
「思わない」って大人は知ってますね
でも、自分のことだと大人は「失敗だ!」と決めつけるんです
大人がBADだ! 失敗だ!と決めつけているのは
気づきのタネ
なんです
10

11. 今でしょ!
XPagesは「難しい!」「情報がない!」
と言ってる暇があったら
まずはやってみましょう!
基礎をしっかり学びましょう!
11

12. 破 XPagesでjQueryMobileを使うには
XPagesDay2013の おさらい
12
参考リンク：XPagesDay2013 あなたにも出来る！
XPages & jQueryMobileで作るスマートフォン、タブレットUX開発
http://www.slideshare.net/tetsujihayashi16/x-pages-day2013-27989624

13. 動作環境
開発環境
•Notes/Domino 8.5.3 FP5
•jQuery 2.1.1
•jQueryMobile 1.4.5 稼働テスト環境
•Notes/Domino 9.0.1
13

14. あきらめないといけないこと
XPagesの設計タブ(GUIによるデザイン)
XPages with jQueryMobileの開発では、設計タブは使いません。
新しいフレームワーク、開発手法がどんどん出てくる時代になりました。
最新技術を取り入れて行くには、GUIツールの登場を待っている時間がありません。
※例えばjQuery互換でモバイルに最適化されたZepto.jsとか・・・
14

15. 知っておいた方がいい知識
前提として
・Chromeの開発ツール(F12)の使い方
ドットインストール：Chrome Developer Tools入門
http://dotinstall.com/lessons/basic_chrome_dev_v2
※FirebugもIEの開発ツールも同じ感じ
・jQueryについて
Kindle書籍：jQuery入門道場
※なんと350円!!この情報量、わかりやすさでこの価格は絶対安い!!
・jQueryとjQueryMobile、CSSについて
ドットインストール：jQuery入門
ドットインストール：jQuery Mobile入門
ドットインストール：CSS入門
知っていると開発効率 が3倍違います
15

16. あった方が良いツール
・恋するエディタ SublimeText
デザイン(HTML,CSS)は先にこれで作って、XPage上でコントロー ルを貼り付けていくのがオススメ
マルチカーソルが超便利
使い方はドットインストールで
ドットインストール：Sublime Text 2入門
・j5 create Android Mirror USBアダプター JUC600
USBで接続し、Android端末の画面をPCに複製できるツール
PCのキーボードが使える
PCをプロジェクタに繋いで、ユーザーに説明する時にも便利!!
・フルHDのモニタ
フルHDじゃないとDominoDesignerのプロパティ画面が見えない
16

17. SublimeTextマルチカーソル
17

18. DominoDesignerの設定
１．エディタの行番号を表示 Designer のプリファレンスの [一般]-[エディター]-[テキスト・エディター] 内にある「行番号の表示」 にチェックを付ける ２．エラーを表示 DB内の[アプリケーションプロパティ]-[XPages実行時エラーページを表示]にチェックを付ける ３．「自動的にビルド」にチェック ファイルメニューからプロジェクト(P)>自動的にビルドにチェックを付ける
18

19. dojoデザインを読み込まない設定
１．xsp.propertiesにxsp.theme=<empty>を追加
アプリケーションをパッケージエクスプローラで開き、WebContent>WEB-INF> xsp.propertiesを開き、 ソースタブに
xsp.theme=<empty>
という1行を追加
①
③
②
設定あり
設定なし
jQueryMobileのCSSを正しく設定すれば問題ないと思いますが、
標準のCSSを適用させないようにして、はまるポイントを減らしましょう
おわかりいただけ ただろうか？
19

20. jQuery、jQueryMobileのダウンロード
1.jquery.com/downloadからjQuery2.1.1圧縮版(jquery- 2.1.1.min.js)をダウンロード
2.jQueryMobile.com/downloadから jQueryMobile1.4.5(jquery.mobile-1.4.5.zip)をダウンロード
20

21. 1.ファイルリソースにダウンロードしたjQuery(jquery-2.1.1.min.js) をインポートする
2.ファイルリソースにダウンロードしたjQueryMobile(jquery.mobile- 1.4.5.zip)を解凍し、jquery-mobile-1.4.5.min.jsをインポートする
3.スタイルシートにjQueryMobile(jquery.mobile-1.4.5.zip)から解凍 したjquery.mobile.1.4.5.min.cssとjquery.mobile.icons- 1.4.5.min.cssをインポートする
jQuery、jQueryMobileのインポート①
アプリ単独でjQuery、jQueryMobileの環境を閉じたいのであれば上記の方法
サーバー全体で共有したいのであればサーバーに組み込んで下さい
21

22. jQuery、jQueryMobileのインポート②
1.イメージリソースにjQueryMobile(jquery.mobile-1.4.5.zip)から解 凍したimages/ajax-loader.gifとimages/icon-svg/フォルダのsvg ファイルをすべてインポートする
2.インポートした画像にはフォルダ名が入らないので、それぞれフォル ダ名を付けていく ex) images/ajax-loader.gif images/icon-svg/action-black.svg
22

23. jQueryMobile基本構文
「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ソース
jQueryMobile1.4.xでは、高速化のため一部の拡張タグがclass に変更されました
ex)
小さいボタン
1.3.x系 data-role=“button” data-mini=“true”
1.4.x系 class=“ui-btn ui-mini”
23

24. <?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:this.resources>
<xp:styleSheet href="/jquery.mobile-1.4.5.min.css"></xp:styleSheet>
<xp:styleSheet href="/jquery.mobile.icons-1.4.5.min.css"></xp:styleSheet>
<xp:script src="/jquery-2.1.1.min.js" clientSide="true"></xp:script>
<xp:script src=“/jquery.mobile-1.4.5.min.js” clientSide="true"></xp:script>
</xp:this.resources>
XPagesへの組み込み
Domino 8.5.3
1.XPagesを新規作成し、ソースタブを開く
2.<xp:view>と</xp:view>タグの間に､下記のコードを書き込む
24

25. <?xml version="1.0" encoding="UTF-8"?> <xp:view xmlns:xp="http://www.ibm.com/xsp/core"> <xp:this.resources> <xp:styleSheet href="/jquery.mobile-1.4.5.min.css"></xp:styleSheet> <xp:styleSheet href="/jquery.mobile.icons-1.4.5.min.css"></xp:styleSheet> <xp:headTag tagName="script"> <xp:this.attributes> <xp:parameter name="type" value="text/javascript" /> <xp:parameter name="src" value="jquery-2.1.1.min.js" /> </xp:this.attributes> </xp:headTag> <xp:headTag tagName="script"> <xp:this.attributes> <xp:parameter name="type" value="text/javascript" /> <xp:parameter name="src" value="jquery.mobile-1.4.5.min.js" /> </xp:this.attributes> </xp:headTag> </xp:this.resources>
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
Domino 9.0
25

26. XPagesへの読み込み
1.DB内のアプリケーション構成>Xspプロパティ>永続性タブの「実行 時最適化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;
}
26

27. <?xml version="1.0" encoding="UTF-8"?> <xp:view xmlns:xp="http://www.ibm.com/xsp/core"> <xp:this.resources> <xp:styleSheet href="/jquery.mobile-1.4.5.min.css"></xp:styleSheet> <xp:styleSheet href="/jquery.mobile.icons-1.4.5.min.css"></xp:styleSheet> <xp:script src="/amd_stop.js" clientSide="true"></xp:script> <xp:script src="/jquery-2.1.1.min.js" clientSide="true"></xp:script> <xp:script src=“/jquery.mobile-1.4.5.min.js” clientSide="true"></xp:script> <xp:script src="/amd_start.js" clientSide="true"></xp:script> </xp:this.resources>
XPagesへの読み込み
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
27

28. </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>
XPages with jQueryMobileのひな形
<header> <article> <footer>の部分は すべて<div>でもかまいませんが、 HTML５では文書構造を定義できるよう になったため、この書き方がオススメ!
<article>タグの間にビューやフォーム となる部品を配置していきます
28

29. こうなる
<div data-role="page">
<!-- ヘッダー --> <header data-role="header"> <h3>ヘッダー</h3> </header> <!-- コンテンツ --> <article data-role="content"> </article> <!-- フッター --> <footer data-role="footer"> <h3>フッター</h3> </footer>
29

30. 作り方の基本① デザイン
1.入力タグ以外は<article>タグの間にタグを直接記入します
2.入力タグはコアコントロールをドラッグ&ドロップし、プロパティを 設定していくのが基本の流れになります
DominoDesigner
完成形
30

31. 作り方の基本② 拡張タグの設定
jQueryMobileのキモである<data-xxxx>という拡張タグをコアコント ロールに設定するには
1.コントロールを選択し、属性リスト(すべてのプロパ ティ－基本－attrs)に+ボタンで下記の属性を追加
name
data-mini
value
true
完成形
出力されるHTML <div class=“ui-select ui-mini”>
XPages攻略のポイント!
31

32. 作り方の基本③ コアコントロールと出力されるHTML
コアコントロール
出力される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">
複数の選択肢を設定できる
前後に<table><td>タグが 付く
ラジオボタングループ
<fieldset><input type="radio“>
〃
リンク
<a>
ラベル
<span>
<table>タグが入るので、jQueryMobile のデザインは適用できない気がします
32

33. はまるポイント① jQueryMobileのサンプルが動かない
XPagesはHTMLではないので、<input>などの閉じたタグのないものは
終端タグ/を入れましょう。
まずは「HTMLのサンプルをそのまま動作させてみたい」ということがあ ると思います
やりたいこと
HTMLソース
XPageソース(そのまま貼り付け)
エラーが出る
33

34. はまるポイント① jQueryMobileのサンプルが動かない
XPageソース(修正版)
動いた!!
XPagesはHTMLではなく、XMLなので終端タグが必要です <input>など終端タグの無いものは終端タグ/を付けましょう
34

35. はまるポイント② jQueryMobileのCSSが適用されない
すべてのプロパティ>スタイル>styleClassにCSSを設定する ※outerStyeleClassは上位に<div>タグが生成され、その<div>タグにclassがされる
設定例
出力されるHTML
35

36. はまるポイント③ XPageが生成するIDがわからない
IDを指定して、jQueryからコントロールを制御したい場合、はまります
XPages
出力されるHTML
普通は名前がIDになる
このidをそのままjQueryのIDタグとして使えれば良いんだけど、動かない 例) $(“#Subject").css("color","pink");
じゃぁ、HTMLに出力されるidを使えば良いんじゃない？と思うんだけど、動かない 例) $("#view:_id1:Subject").css("color","pink");
36

37. はまるポイント③ XPageが生成するIDがわからない
ここでポイントとなるのはid名”view:_id1:Subject”の中に入っているコ ロン”:”です。このコロンがCSSの疑似クラスで使われている区切り記号と 判断され、正常に要素を選択することができなくなってしまっています。
【CSSの疑似クラス例】 要素名:hover マウスカーソルが乗っている要素 要素名:first-child 要素名に一致する最初の子要素
回避するにはコロンの前にバックスラッシュ(¥マーク)を二つ重ねてエスケープ
でもこの方法は先頭部分(view:_id1:Subject)の生成法則が不明確なので、 XPagesの標準で書かれている下記の形式にチャレンジします
これなら動く
XPagesの標準的なID指定方法
document.getElementById("#{id:Subject}").value;
37

38. はまるポイント③
XPageが生成するIDがわからない
XPages上のID指定 HTML出力されるID
#{id:Subject} view:_id1:Subject
必要なID
Domino
変換 view¥¥:_id1¥¥:Subject
Browser
変換
function x$(idTag){
//正規表現を使って:を¥¥:に変換
idTag = idTag.replace(/:/g,"¥¥:");
//変換結果の先頭に#を付けid指定とし、$()で囲むことでjQueryオブジェクトを返す
return($("#"+idTag));
};
関数を使ったXPages上の指定例
コロンをバックスラッシュ×2＋
コロンに変換する関数
コロン→バックスラッシュ×2
＋コロンに変換すれば良い
38
参考：ブログ書いてます
XPages with JQuery なぜID指定でJQuery!が動かないのか? PART1
http://enjoyxpages.sakura.ne.jp/wp1/xpages-with-jquery-why-jquery-part1/
XPages with JQuery なぜID指定でJQuery!が動かないのか? PART2
http://enjoyxpages.sakura.ne.jp/wp1/xpages-with-jquery-why-jquery-part2/

39. はまるポイント④ 単独ページでは問題なかったが、ページを繋 げると動かない
次のページを呼び出す<a>アンカータグに拡張タグdata-ajax=“false“を追加
フォーム→保存→ビュー
新規ボタンに<a>タグ追加
<a>タグにdata-ajax=“false“
39

40. はまるポイント④ 単独ページでは問題なかったが、ページを繋 げると動かない
<!-- ヘッダー -->
<header data-role="header">
<a href="frm2.xsp" class="ui-btn ui-btn-icon-left ui-icon-plus" data-ajax="false">新規</a>
<h3>ヘッダー</h3>
</header>
jQueryMobileの標準動作 (data-ajax=“true”)
ビュー用XPage
フォーム用XPage
論理的なページA
論理的なページB
論理的なページX
②非同期通信
論理的なページX
jQuery Mobileでは、同一ドメインに対するリンクは、 自動的にAjax式リンクとなります。Ajax式リンクでは、 リンク先のページをいったん非同期通信で現在の文 書ツリーに取り込んだ上で、表示を切り替えます
①タップ
③ツリーに読込
④ページの非表示
を切替
40
falseにすると 非同期通信しない

41. はまるポイント④ 単独ページでは問題なかったが、ページを繋 げると動かない
ただし・・・・
エフェクト
画面遷移にエフェクトをかけている場合、動かなくなるので
何でもかんでもこの方法にすれば良い訳ではありません
個人的には
エフェクトは最初の1回だけは 「ほぉ～」って思うけど、毎日 使うツールではうっとうしくな るので適材適所だと思います。
41

42. はまるポイント⑤ 正しく設定、変更したはずなのに 変更が反映されない
ちょっと変更→動作確認、ちょっと変更→動作確認を繰り返すと、ソース は正しいのに変更が実行結果に反映されない場合があります。そんな時は 下記の方法を試して下さい。
1.アプリケーションをすべて閉じて(Designer上の設計タブ、Notesク ライアント上のビューなどすべてのタブ)、アプリケーションを開き直 して下さい
2.Designerでプロジェクト>クリーンを選択
42

43. Q jQueryMobile設計 プラクティス
43

44. ここから先は設計の話
なぜ設計が大切かというと 設計の段階で
•完成後のユーザー体験や満足
•パフォーマンス
•開発効率 などなど、ほとんどの要素が決まってしまうからです
44

45. シーン１： 確認か？通知か？
保存１
保存２
モーダルメッセージ
モードレスメッセージ
45

46. シーン１： 確認か？通知か？
確認を必要とする場面と
通知だけで良い場面は違う
よく検討し、
ユーザーの操作を阻害しない
ことを心がけろ！
46

47. シーン２： 汎用的すぎる①
「選択肢はユーザー側で自由に設 定できます」 テスト環境)
•11のセクション
•セクションごとに11個のチェックボックス
•CPU iCore5-2520M
自由に設定、選択できる
さて、表示に何秒かかるでしょう？
PC版Chrome(サーバー上)
5min
iPod touch(第3世代)
31min
SH-06E(Android4.2)
31min
自由に設定した結果、選択肢が多くなりすぎるとjQueryMobileでは DOMを操作してコントロールを描画するため、表示に時間がかかります。
※DOM - Document Object Model
47

48. シーン２： 汎用的すぎる①
「選択肢は自由に設定して下さい」 は逃げてるだけじゃないのか？ 設定値の最大件数はユーザーに 確認するんだ!!
48

49. シーン３： 汎用的すぎる②
ビューにすべてのデータが表示される テスト環境)
•5000件のユーザー情報
•表示は3項目
•CPU iCore5-2520M
すべてのデータ
さて、表示に何秒かかるでしょう？
PC版Chrome(サーバー上)
11min
PC版Chrome(クライアント)
10min
iPod touch(第3世代)
58min
SH-06E(Android4.2)
52min
Chromeの開発ツールで見るとXPageの読込自体は2秒弱で終わっています
あとはjQueryMobileがDOMを捕まえてレンダリングする処理です
49

50. シーン３： 汎用的すぎる②
すべてのデータを表示する必要があ るのか？ 一覧画面の後、ユーザーがどんな 操作をしたいのか聞くんだ!!
50

51. シーン４： マルチデバイス対応(解像度問題)
Nexus5
iPhone5
iPhone6
ボタンの折返しだけでなく、横向きで使用した場合、タブレットで使用した場合
など、サポートする環境、端末を明確にし、事前に確認しましょう
51

52. シーン４： マルチデバイス対応(解像度問題)
Chrome開発モード
実機
Chromeの開発者モードでは綺麗に表 示されるのに実機ではレイアウトが 崩れることがあります (ChromeとWebkitの違い)
Chromeの開発者モードはあくまで解像度のエミュレーションであり、エンジンは Chromeです。jQueryMobileにカスタムCSSを適用する場合や、CSS自体を独自 に定義した場合は必ず実機でテストしておきましょう。
52

53. シーン４： マルチデバイス対応(解像度問題)
テストの段階で解像度問題が発覚 すると手戻りが発生する
設計の段階で実機を使ってレイア ウトを確認しておくんだ
53

54. :|| 絶対にやってはいけない設計
54

55. 絶対にやってはいけない設計
Notesクライアントアプリの機能、入力項目を
そのままモバイル化しない!!
55

56. 具体的には？
Notes君の良いところ
クライアントサーバーなのでセキュリティなんかは考えなく て良い
デザインは一定の形が決まっているので、それに準拠すれば そんなにデザインに悩まなくて良い
バージョンが決まっている
PC＆マウス操作なので画面が広くて、文字もたくさん出せる etc・・・
モバイルちゃんの良いところ
タッチインターフェースで簡単入力 カメラなどの各種センサー、固有の機能が使える どこにでも持ち運べてすぐ使える デザインの自由度が高い etc・・・ もっと見つけてあげて下さい
兄弟でもそれぞれ良いところが違うように、それぞれ良いところは違います。 お父さん、お母さん(開発者)はそれぞれの 良いところを見つけて、生かしてあげる設計をしましょう!!
56

57. そのために必要なことは？
ユーザーさんと、きちんと対話しましょう 思い込みで設計していませんか？ 本当は何がしたいのか？を話し合いましたか？ ユーザーの発言＝要望だと思っていませんか？ ユーザーさんが見えていないリスクについても話し合いましたか？
57

58. まとめ
58

59. ご覧になって下さった方々へ
私の知り得る情報はキーワードとしてちりばめておきました この資料だけで何でも作れるようになれるわけではありません このキーワードをきっかけに、まずは基礎を勉強し、深く知っていって下さ い また、Google先生を使って、誰かの知見を受け取るだけではなく、「こん な時にはこんな風に解決しましたよ」と発信していって下さい
あなたがBADプラクティスから得た気づきは 必ず誰かの助けになります
59

60. Let’s Enjoy XPages