XPages with jQueryMobile BADプラクティスガイド

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

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

個人的 本日のMission 3

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

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

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

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

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

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

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

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

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

動作環境 開発環境 • • • 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の開発ツールも同じ感じ 知っていると開発効率 が3倍違います ・jQueryについて Kindle書籍：jQuery入門道場 ※なんと350円!!この情報量、わかりやすさでこの価格は絶対安い!! ・jQueryとjQueryMobile、CSSについて ドットインストール：jQuery入門 ドットインストール：jQuery Mobile入門 ドットインストール：CSS入門 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圧縮版(jquery2.1.1.min.js)をダウンロード 2. jQueryMobile.com/downloadから jQueryMobile1.4.5(jquery.mobile-1.4.5.zip)をダウンロード 20

jQuery、jQueryMobileのインポート① 1. ファイルリソースにダウンロードしたjQuery(jquery-2.1.1.min.js) をインポートする 2. ファイルリソースにダウンロードしたjQueryMobile(jquery.mobile1.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.icons1.4.5.min.cssをインポートする アプリ単独で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基本構文 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 の正体!! それぞれの拡張タグに値をセットすると勝手にデザインしてく れる jQueryMobile1.4.xでは、高速化のため一部の拡張タグがclass に変更されました ex) 小さいボタン 1.3.x系 data-role=“button” data-mini=“true” 1.4.x系 class=“ui-btn ui-mini” 23

Domino 8.5.3 XPagesへの組み込み 1. XPagesを新規作成し、ソースタブを開く 2. <xp:view>と</xp:view>タグの間に､下記のコードを書き込む <?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> 24

Domino 9.0 XPagesへの読み込み 1. XPagesを新規作成し、ソースタブを開く 2. <xp:view>と</xp:view>タグの間に､下記のコードを書き込む <?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> Domino9 with jQueryMobileの読込問題についての詳細はこちら(英語) XPages: Dojo 1.8.1 & jQuery Mobile 1.3.1 http://hasselba.ch/blog/?p=1216 25

• http://hasselba.ch/blog/?p=1216

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

Domino 9.0 XPagesへの読み込み 3. １で作成した2つのJavaScriptファイルをファイルリソースとしてイ ンポートする 4. XPagesを新規作成し、ソースタブを開く 5. <xp:view>と</xp:view>タグの間に､下記のコードを書き込む <?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> Dojo道場 ～ 第11回「Dojo 最新動向 - Asynchronous Module Definition」 http://codezine.jp/article/detail/6482 27

XPages with jQueryMobileのひな形
</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>

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

<!-- フッター -->
<footer data-role="footer">
<h3>フッター</h3>
</footer>
</div>
</xp:view>

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

作り方の基本② XPages攻略のポイント! 拡張タグの設定 jQueryMobileのキモである<data-xxxx>という拡張タグをコアコント ロールに設定するには 1. コントロールを選択し、属性リスト(すべてのプロパ ティ－基本－attrs)に+ボタンで下記の属性を追加 name data-mini value true 出力されるHTML <div class=“ui-select ui-mini”> 完成形 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"> チェックボックス グループ 備考 CKEditorを使用 選択肢は一つだけ 〃 <fieldset> 複数の選択肢を設定できる <input type="checkbox"> 前後に<table><td>タグが <table>タグが入るので、jQueryMobile 付く のデザインは適用できない気がします ラジオボタングループ <fieldset><input type="radio“> リンク <a> ラベル <span> 〃 32

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

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

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

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

Browser

必要なID

HTML出力されるID
変換

コロンをバックスラッシュ×2＋
コロンに変換する関数

view:_id1:Subject

変換

view¥¥:_id1¥¥:Subject

コロン→バックスラッシュ×2
＋コロンに変換すれば良い

function x$(idTag){
//正規表現を使って:を¥¥:に変換
idTag = idTag.replace(/:/g,"¥¥:");
//変換結果の先頭に#を付けid指定とし、$()で囲むことでjQueryオブジェクトを返す
return($("#"+idTag));
};

関数を使ったXPages上の指定例

参考：ブログ書いてます
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/
38

はまるポイント④ 単独ページでは問題なかったが、ページを繋 げると動かない 次のページを呼び出す<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”) falseにすると 非同期通信しない ビュー用XPage フォーム用XPage ①タップ 論理的なページA ②非同期通信 論理的なページX 論理的なページB ③ツリーに読込 論理的なページX ④ページの非表示 を切替 jQuery Mobileでは、同一ドメインに対するリンクは、 自動的にAjax式リンクとなります。Ajax式リンクでは、 リンク先のページをいったん非同期通信で現在の文 書ツリーに取り込んだ上で、表示を切り替えます 40

はまるポイント④ 単独ページでは問題なかったが、ページを繋 げると動かない ただし・・・・ エフェクト 個人的には エフェクトは最初の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