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

812 Views

April 22, 22

スライド概要

XPagesDay 2014 発表資料

profile-image

Slideshare有料化に伴い過去の資料をこちらのアップします。

シェア

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

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

2.

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

3.

個人的 本日のMission 3

4.

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

5.

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

6.

質問1:料理が上達するには? 1.高級料理店 に行く 2.レシピ本を 読む 3.シェフと 話してみる 4.料理を 作ってみる 6

7.

質問2:プログラミングが上達するには? 1.アプリを使う 2.プログラミン グの本を読む 3.開発者と 話してみる 4.アプリを 開発してみる 7

8.

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

9.

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

10.

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

11.

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

12.

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

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の開発ツールも同じ感じ 知っていると開発効率 が3倍違います ・jQueryについて Kindle書籍:jQuery入門道場 ※なんと350円!!この情報量、わかりやすさでこの価格は絶対安い!! ・jQueryとjQueryMobile、CSSについて ドットインストール:jQuery入門 ドットインストール:jQuery Mobile入門 ドットインストール:CSS入門 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の設定 1.エディタの行番号を表示 Designer のプリファレンスの [一般]-[エディター]-[テキスト・エディター] 内にある「行番号の表示」 にチェックを付ける 2.エラーを表示 DB内の[アプリケーションプロパティ]-[XPages実行時エラーページを表示]にチェックを付ける 3.「自動的にビルド」にチェック ファイルメニューからプロジェクト(P)>自動的にビルドにチェックを付ける 18

19.

dojoデザインを読み込まない設定 1.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圧縮版(jquery2.1.1.min.js)をダウンロード 2. jQueryMobile.com/downloadから jQueryMobile1.4.5(jquery.mobile-1.4.5.zip)をダウンロード 20

21.

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

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基本構文 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

24.

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

25.

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

26.

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

27.

Domino 9.0 XPagesへの読み込み 3. 1で作成した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

28.
[beta]
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>でもかまいませんが、
HTML5では文書構造を定義できるよう
になったため、この書き方がオススメ!
<article>タグの間にビューやフォーム
となる部品を配置していきます

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

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.

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

32.

作り方の基本③ コアコントロールと出力される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

33.

はまるポイント① jQueryMobileのサンプルが動かない まずは「HTMLのサンプルをそのまま動作させてみたい」ということがあ ると思います やりたいこと HTMLソース XPageソース(そのまま貼り付け) エラーが出る XPagesはHTMLではないので、<input>などの閉じたタグのないものは 終端タグ/を入れましょう。 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 普通は名前がIDになる このidをそのままjQueryのIDタグとして使えれば良いんだけど、動かない 例) $(“#Subject").css("color","pink"); 出力されるHTML じゃぁ、HTMLに出力されるidを使えば良いんじゃない?と思うんだけど、動かない 例) $("#view:_id1:Subject").css("color","pink"); 36

37.
[beta]
はまるポイント③

XPageが生成するIDがわからない
ここでポイントとなるのはid名”view:_id1:Subject”の中に入っているコ
ロン”:”です。このコロンがCSSの疑似クラスで使われている区切り記号と
判断され、正常に要素を選択することができなくなってしまっています。
【CSSの疑似クラス例】
要素名:hover
マウスカーソルが乗っている要素
要素名:first-child
要素名に一致する最初の子要素

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

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

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

38.
[beta]
はまるポイント③

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

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

41.

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

42.

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

43.

Q jQueryMobile設計 プラクティス 43

44.

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

45.

シーン1: 確認か?通知か? 保存1 保存2 モーダルメッセージ モードレスメッセージ 45

46.

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

47.

シーン2: 汎用的すぎる① 自由に設定、選択できる 「選択肢はユーザー側で自由に設 定できます」 テスト環境) • 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.

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

49.

シーン3: 汎用的すぎる② すべてのデータ ビューにすべてのデータが表示される テスト環境) • 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.

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

51.

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

52.

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

53.

シーン4: マルチデバイス対応(解像度問題) テストの段階で解像度問題が発覚 すると手戻りが発生する 設計の段階で実機を使ってレイア ウトを確認しておくんだ 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