XPages with jQueryMobile

プラクティスガイド

所属：ジョンソンコントロールズ(株)

林 哲司

2014 A4

2014/11/18 16:00-17:00

モバイルアプリケーション開発のコツ

本日のアジェンダ

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

破 ：XPagesでjQueryMobileを使うには

Ｑ ：jQueryMobile設計BADプラクティス

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

：まとめ

2

本日のMission

個人的

3

XPages開発に対するイメージを変え Notes開発者を元気にする

現在 未来

本日のMission

4

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

5

質問１：料理が上達するには？

１.高級料理店 に行く

２.レシピ本を 読む

３.シェフと 話してみる

４.料理を 作ってみる

6

質問２：プログラミングが上達するには？

１.アプリを使う ２.プログラミングの本を読む

３.開発者と 話してみる

４.アプリを 開発してみる

7

なぜ、実践すると上達する？

これしかないんです！でも・・・・

実践 (体験)

食べたいのに、痩せたいんです 練習したくないのに、勝ちたいんです

楽したいのに、儲けたいんです

上達 失敗

そんなことできると思いますか？ できる人がいたら、こっそり教えて下さい

8

最も重要!!

失敗後のプロセス

実践 (体験)

気づく 考える 上達 失敗

大切なのは・・・

Google先生に聞くこと?

ではなく

自分で考えて、気づくこと そのためのツールとして、基礎技術をしっかり学ぶこと

これをやらずして上達はあり得ないし、XPagesも楽しくなりません! 9

なぜ プラクティスなのか？

赤ちゃんが、ハイハイを始めて、失敗したら 「私はなんてダメなんだろう？私の人生は終わりだわ」 なんて思うでしょうか？ 「思わない」って大人は知ってますね でも、自分のことだと大人は「失敗だ!」と決めつけるんです

大人がBADだ! 失敗だ!と決めつけているのは

気づきのタネ なんです

10

今でしょ!

XPagesは「難しい!」「情報がない!」 と言ってる暇があったら

まずはやってみましょう! 基礎をしっかり学びましょう!

11

破 XPagesでjQueryMobileを使うには

XPagesDay2013のおさらい

12

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

http://www.slideshare.net/tetsujihayashi16/x-pages-day2013-27989624

動作環境

開発環境 • Notes/Domino 8.5.3 FP5 • jQuery 2.1.1 • jQueryMobile 1.4.5

稼働テスト環境 • Notes/Domino 9.0.1

13

あきらめないといけないこと

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

14

知っておいた方がいい知識 前提として

・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

あった方が良いツール

・恋するエディタ SublimeText デザイン(HTML,CSS)は先にこれで作って、XPage上でコントロールを貼り付けていくのがオススメ マルチカーソルが超便利 使い方はドットインストールで ドットインストール：Sublime Text 2入門

・j5 create Android Mirror USBアダプター JUC600 USBで接続し、Android端末の画面をPCに複製できるツール PCのキーボードが使える PCをプロジェクタに繋いで、ユーザーに説明する時にも便利!!

・フルHDのモニタ フルHDじゃないとDominoDesignerのプロパティ画面が見えない

16

SublimeTextマルチカーソル

17

DominoDesignerの設定

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

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

３．「自動的にビルド」にチェック ファイルメニューからプロジェクト(P)>自動的にビルドにチェックを付ける

18

dojoデザインを読み込まない設定

１．xsp.propertiesにxsp.theme=<empty>を追加 アプリケーションをパッケージエクスプローラで開き、WebContent>WEB-INF> xsp.propertiesを開き、ソースタブに xsp.theme=<empty> という1行を追加

①

③

②

設定あり 設定なし

jQueryMobileのCSSを正しく設定すれば問題ないと思いますが、 標準のCSSを適用させないようにして、はまるポイントを減らしましょう

おわかりいただけただろうか？

19

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

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

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

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

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

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

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

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

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

こうなる

<div data-role="page">

<!-- ヘッダー --> <header data-role="header"> <h3>ヘッダー</h3> </header> <!-- コンテンツ --> <article data-role="content"> </article> <!-- フッター --> <footer data-role="footer"> <h3>フッター</h3> </footer>

29

作り方の基本①

デザイン 1. 入力タグ以外は<article>タグの間にタグを直接記入します 2. 入力タグはコアコントロールをドラッグ&ドロップし、プロパティを

設定していくのが基本の流れになります

DominoDesigner 完成形

30

作り方の基本②

拡張タグの設定 jQueryMobileのキモである<data-xxxx>という拡張タグをコアコントロールに設定するには

1. コントロールを選択し、属性リスト(すべてのプロパティ－基本－attrs)に+ボタンで下記の属性を追加

name data-mini

value true

完成形

出力されるHTML

<div class=“ui-select ui-mini”>

XPages攻略のポイント!

31

作り方の基本③

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

はまるポイント①

jQueryMobileのサンプルが動かない

XPagesはHTMLではないので、<input>などの閉じたタグのないものは 終端タグ/を入れましょう。

まずは「HTMLのサンプルをそのまま動作させてみたい」ということがあると思います

やりたいこと HTMLソース XPageソース(そのまま貼り付け)

エラーが出る

33

はまるポイント①

jQueryMobileのサンプルが動かない XPageソース(修正版) 動いた!!

XPagesはHTMLではなく、XMLなので終端タグが必要です <input>など終端タグの無いものは終端タグ/を付けましょう 34

はまるポイント②

jQueryMobileのCSSが適用されない すべてのプロパティ>スタイル>styleClassにCSSを設定する ※outerStyeleClassは上位に<div>タグが生成され、その<div>タグにclassがされる

設定例

出力されるHTML

35

はまるポイント③

XPageが生成するIDがわからない IDを指定して、jQueryからコントロールを制御したい場合、はまります

XPages

出力されるHTML

普通は名前がIDになる

このidをそのままjQueryのIDタグとして使えれば良いんだけど、動かない 例) $(“#Subject").css("color","pink");

じゃぁ、HTMLに出力されるidを使えば良いんじゃない？と思うんだけど、動かない 例) $("#view:_id1:Subject").css("color","pink");

36

はまるポイント③

XPageが生成するIDがわからない ここでポイントとなるのはid名”view:_id1:Subject”の中に入っているコロン”:”です。このコロンがCSSの疑似クラスで使われている区切り記号と判断され、正常に要素を選択することができなくなってしまっています。

【CSSの疑似クラス例】 要素名:hover マウスカーソルが乗っている要素 要素名:first-child 要素名に一致する最初の子要素

回避するにはコロンの前にバックスラッシュ(¥マーク)を二つ重ねてエスケープ

でもこの方法は先頭部分(view:_id1:Subject)の生成法則が不明確なので、XPagesの標準で書かれている下記の形式にチャレンジします

これなら動く

XPagesの標準的なID指定方法

document.getElementById("#{id:Subject}").value;

37

はまるポイント③

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/

はまるポイント④

単独ページでは問題なかったが、ページを繋げると動かない

次のページを呼び出す<a>アンカータグに拡張タグdata-ajax=“false“を追加

フォーム→保存→ビュー 新規ボタンに<a>タグ追加 <a>タグにdata-ajax=“false“

39

はまるポイント④

単独ページでは問題なかったが、ページを繋げると動かない

<!-- ヘッダー --> <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にすると 非同期通信しない

はまるポイント④

単独ページでは問題なかったが、ページを繋げると動かない

ただし・・・・ エフェクト

画面遷移にエフェクトをかけている場合、動かなくなるので 何でもかんでもこの方法にすれば良い訳ではありません

個人的には エフェクトは最初の1回だけは「ほぉ～」って思うけど、毎日使うツールではうっとうしくな

るので適材適所だと思います。

41

はまるポイント⑤

正しく設定、変更したはずなのに 変更が反映されない

ちょっと変更→動作確認、ちょっと変更→動作確認を繰り返すと、ソースは正しいのに変更が実行結果に反映されない場合があります。そんな時は下記の方法を試して下さい。

1. アプリケーションをすべて閉じて(Designer上の設計タブ、Notesクライアント上のビューなどすべてのタブ)、アプリケーションを開き直して下さい

2. Designerでプロジェクト>クリーンを選択

42

Q jQueryMobile設計 プラクティス

43

ここから先は設計の話

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

44

シーン１： 確認か？通知か？

保存１ 保存２

モーダルメッセージ モードレスメッセージ

45

シーン１： 確認か？通知か？

確認を必要とする場面と 通知だけで良い場面は違う

よく検討し、

ユーザーの操作を阻害しない ことを心がけろ！

46

シーン２： 汎用的すぎる①

「選択肢はユーザー側で自由に設定できます」 テスト環境) • 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

シーン３： 汎用的すぎる②

ビューにすべてのデータが表示される テスト環境) • 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

シーン４： マルチデバイス対応(解像度問題) Nexus5 iPhone5 iPhone6

ボタンの折返しだけでなく、横向きで使用した場合、タブレットで使用した場合 など、サポートする環境、端末を明確にし、事前に確認しましょう 51

シーン４： マルチデバイス対応(解像度問題)

Chrome開発モード 実機

Chromeの開発者モードでは綺麗に表示されるのに実機ではレイアウトが

崩れることがあります (ChromeとWebkitの違い)

Chromeの開発者モードはあくまで解像度のエミュレーションであり、エンジンはChromeです。jQueryMobileにカスタムCSSを適用する場合や、CSS自体を独自

に定義した場合は必ず実機でテストしておきましょう。 52

シーン４： マルチデバイス対応(解像度問題)

テストの段階で解像度問題が発覚すると手戻りが発生する 設計の段階で実機を使ってレイアウトを確認しておくんだ

53

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

54

絶対にやってはいけない設計

Notesクライアントアプリの機能、入力項目を そのままモバイル化しない!!

55

具体的には？

Notes君の良いところ

クライアントサーバーなのでセキュリティなんかは考えなくて良い デザインは一定の形が決まっているので、それに準拠すればそんなにデザインに悩まなくて良い バージョンが決まっている PC＆マウス操作なので画面が広くて、文字もたくさん出せる etc・・・

モバイルちゃんの良いところ

タッチインターフェースで簡単入力 カメラなどの各種センサー、固有の機能が使える どこにでも持ち運べてすぐ使える デザインの自由度が高い etc・・・

もっと見つけてあげて下さい

兄弟でもそれぞれ良いところが違うように、それぞれ良いところは違います。 お父さん、お母さん(開発者)はそれぞれの

良いところを見つけて、生かしてあげる設計をしましょう!! 56

そのために必要なことは？

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

57

まとめ

58

ご覧になって下さった方々へ

私の知り得る情報はキーワードとしてちりばめておきました この資料だけで何でも作れるようになれるわけではありません このキーワードをきっかけに、まずは基礎を勉強し、深く知っていって下さい また、Google先生を使って、誰かの知見を受け取るだけではなく、「こんな時にはこんな風に解決しましたよ」と発信していって下さい

あなたがBADプラクティスから得た気づきは 必ず誰かの助けになります

59

Let’s Enjoy XPages