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.

XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド

2,204 views

Published on

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

Published in: Mobile
  • Hello there! Get Your Professional Job-Winning Resume Here! http://bit.ly/topresum
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド

  1. 1. XPages with jQueryMobile プラクティスガイド 所属:ジョンソンコントロールズ(株) 林 哲司 2014 A4 2014/11/18 16:00-17:00 モバイルアプリケーション開発のコツ
  2. 2. 本日のアジェンダ 序 :XPages開発能力を上げるには? 破 :XPagesでjQueryMobileを使うには Q :jQueryMobile設計BADプラクティス :|| :絶対にやってはいけない設計 :まとめ 2
  3. 3. 本日のMission 個人的 3
  4. 4. XPages開発に対するイメージを変え Notes開発者を元気にする 現在 未来 本日のMission 4
  5. 5. 序 XPages開発能力を上げるには? 5
  6. 6. 質問1:料理が上達するには? 1.高級料理店 に行く 2.レシピ本を 読む 3.シェフと 話してみる 4.料理を 作ってみる 6
  7. 7. 質問2:プログラミングが上達するには? 1.アプリを使う 2.プログラミン グの本を読む 3.開発者と 話してみる 4.アプリを 開発してみる 7
  8. 8. なぜ、実践すると上達する? これしかないんです!でも・・・・ 実践 (体験) 食べたいのに、痩せたいんです 練習したくないのに、勝ちたいんです 楽したいのに、儲けたいんです 上達 失敗 そんなことできると思いますか? できる人がいたら、こっそり教えて下さい 8
  9. 9. 最も重要!! 失敗後のプロセス 実践 (体験) 気づく 考える 上達 失敗 大切なのは・・・ Google先生に聞くこと? ではなく 自分で考えて、気づくこと そのためのツールとして、基礎技術をしっかり学ぶこと これをやらずして上達はあり得ないし、XPagesも楽しくなりません! 9
  10. 10. なぜ プラクティスなのか? 赤ちゃんが、ハイハイを始めて、失敗したら 「私はなんてダメなんだろう?私の人生は終わりだわ」 なんて思うでしょうか? 「思わない」って大人は知ってますね でも、自分のことだと大人は「失敗だ!」と決めつけるんです 大人がBADだ! 失敗だ!と決めつけているのは 気づきのタネ なんです 10
  11. 11. 今でしょ! XPagesは「難しい!」「情報がない!」 と言ってる暇があったら まずはやってみましょう! 基礎をしっかり学びましょう! 11
  12. 12. 破 XPagesでjQueryMobileを使うには XPagesDay2013の おさらい 12 参考リンク:XPagesDay2013 あなたにも出来る! XPages & jQueryMobileで作るスマートフォン、タブレットUX開発 http://www.slideshare.net/tetsujihayashi16/x-pages-day2013-27989624
  13. 13. 動作環境 開発環境 •Notes/Domino 8.5.3 FP5 •jQuery 2.1.1 •jQueryMobile 1.4.5 稼働テスト環境 •Notes/Domino 9.0.1 13
  14. 14. あきらめないといけないこと XPagesの設計タブ(GUIによるデザイン) XPages with jQueryMobileの開発では、設計タブは使いません。 新しいフレームワーク、開発手法がどんどん出てくる時代になりました。 最新技術を取り入れて行くには、GUIツールの登場を待っている時間がありません。 ※例えばjQuery互換でモバイルに最適化されたZepto.jsとか・・・ 14
  15. 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. 16. あった方が良いツール ・恋するエディタ SublimeText デザイン(HTML,CSS)は先にこれで作って、XPage上でコントロー ルを貼り付けていくのがオススメ マルチカーソルが超便利 使い方はドットインストールで ドットインストール:Sublime Text 2入門 ・j5 create Android Mirror USBアダプター JUC600 USBで接続し、Android端末の画面をPCに複製できるツール PCのキーボードが使える PCをプロジェクタに繋いで、ユーザーに説明する時にも便利!! ・フルHDのモニタ フルHDじゃないとDominoDesignerのプロパティ画面が見えない 16
  17. 17. SublimeTextマルチカーソル 17
  18. 18. DominoDesignerの設定 1.エディタの行番号を表示 Designer のプリファレンスの [一般]-[エディター]-[テキスト・エディター] 内にある「行番号の表示」 にチェックを付ける 2.エラーを表示 DB内の[アプリケーションプロパティ]-[XPages実行時エラーページを表示]にチェックを付ける 3.「自動的にビルド」にチェック ファイルメニューからプロジェクト(P)>自動的にビルドにチェックを付ける 18
  19. 19. dojoデザインを読み込まない設定 1.xsp.propertiesにxsp.theme=<empty>を追加 アプリケーションをパッケージエクスプローラで開き、WebContent>WEB-INF> xsp.propertiesを開き、 ソースタブに xsp.theme=<empty> という1行を追加 ① ③ ② 設定あり 設定なし jQueryMobileのCSSを正しく設定すれば問題ないと思いますが、 標準のCSSを適用させないようにして、はまるポイントを減らしましょう おわかりいただけ ただろうか? 19
  20. 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. 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. 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. 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. 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. 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. 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. 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.1で作成した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. 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>でもかまいませんが、 HTML5では文書構造を定義できるよう になったため、この書き方がオススメ! <article>タグの間にビューやフォーム となる部品を配置していきます 28
  29. 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. 30. 作り方の基本① デザイン 1.入力タグ以外は<article>タグの間にタグを直接記入します 2.入力タグはコアコントロールをドラッグ&ドロップし、プロパティを 設定していくのが基本の流れになります DominoDesigner 完成形 30
  31. 31. 作り方の基本② 拡張タグの設定 jQueryMobileのキモである<data-xxxx>という拡張タグをコアコント ロールに設定するには 1.コントロールを選択し、属性リスト(すべてのプロパ ティ-基本-attrs)に+ボタンで下記の属性を追加 name data-mini value true 完成形 出力されるHTML <div class=“ui-select ui-mini”> XPages攻略のポイント! 31
  32. 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. 33. はまるポイント① jQueryMobileのサンプルが動かない XPagesはHTMLではないので、<input>などの閉じたタグのないものは 終端タグ/を入れましょう。 まずは「HTMLのサンプルをそのまま動作させてみたい」ということがあ ると思います やりたいこと HTMLソース XPageソース(そのまま貼り付け) エラーが出る 33
  34. 34. はまるポイント① jQueryMobileのサンプルが動かない XPageソース(修正版) 動いた!! XPagesはHTMLではなく、XMLなので終端タグが必要です <input>など終端タグの無いものは終端タグ/を付けましょう 34
  35. 35. はまるポイント② jQueryMobileのCSSが適用されない すべてのプロパティ>スタイル>styleClassにCSSを設定する ※outerStyeleClassは上位に<div>タグが生成され、その<div>タグにclassがされる 設定例 出力されるHTML 35
  36. 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. 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. 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. 39. はまるポイント④ 単独ページでは問題なかったが、ページを繋 げると動かない 次のページを呼び出す<a>アンカータグに拡張タグdata-ajax=“false“を追加 フォーム→保存→ビュー 新規ボタンに<a>タグ追加 <a>タグにdata-ajax=“false“ 39
  40. 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. 41. はまるポイント④ 単独ページでは問題なかったが、ページを繋 げると動かない ただし・・・・ エフェクト 画面遷移にエフェクトをかけている場合、動かなくなるので 何でもかんでもこの方法にすれば良い訳ではありません 個人的には エフェクトは最初の1回だけは 「ほぉ~」って思うけど、毎日 使うツールではうっとうしくな るので適材適所だと思います。 41
  42. 42. はまるポイント⑤ 正しく設定、変更したはずなのに 変更が反映されない ちょっと変更→動作確認、ちょっと変更→動作確認を繰り返すと、ソース は正しいのに変更が実行結果に反映されない場合があります。そんな時は 下記の方法を試して下さい。 1.アプリケーションをすべて閉じて(Designer上の設計タブ、Notesク ライアント上のビューなどすべてのタブ)、アプリケーションを開き直 して下さい 2.Designerでプロジェクト>クリーンを選択 42
  43. 43. Q jQueryMobile設計 プラクティス 43
  44. 44. ここから先は設計の話 なぜ設計が大切かというと 設計の段階で •完成後のユーザー体験や満足 •パフォーマンス •開発効率 などなど、ほとんどの要素が決まってしまうからです 44
  45. 45. シーン1: 確認か?通知か? 保存1 保存2 モーダルメッセージ モードレスメッセージ 45
  46. 46. シーン1: 確認か?通知か? 確認を必要とする場面と 通知だけで良い場面は違う よく検討し、 ユーザーの操作を阻害しない ことを心がけろ! 46
  47. 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. 48. シーン2: 汎用的すぎる① 「選択肢は自由に設定して下さい」 は逃げてるだけじゃないのか? 設定値の最大件数はユーザーに 確認するんだ!! 48
  49. 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. 50. シーン3: 汎用的すぎる② すべてのデータを表示する必要があ るのか? 一覧画面の後、ユーザーがどんな 操作をしたいのか聞くんだ!! 50
  51. 51. シーン4: マルチデバイス対応(解像度問題) Nexus5 iPhone5 iPhone6 ボタンの折返しだけでなく、横向きで使用した場合、タブレットで使用した場合 など、サポートする環境、端末を明確にし、事前に確認しましょう 51
  52. 52. シーン4: マルチデバイス対応(解像度問題) Chrome開発モード 実機 Chromeの開発者モードでは綺麗に表 示されるのに実機ではレイアウトが 崩れることがあります (ChromeとWebkitの違い) Chromeの開発者モードはあくまで解像度のエミュレーションであり、エンジンは Chromeです。jQueryMobileにカスタムCSSを適用する場合や、CSS自体を独自 に定義した場合は必ず実機でテストしておきましょう。 52
  53. 53. シーン4: マルチデバイス対応(解像度問題) テストの段階で解像度問題が発覚 すると手戻りが発生する 設計の段階で実機を使ってレイア ウトを確認しておくんだ 53
  54. 54. :|| 絶対にやってはいけない設計 54
  55. 55. 絶対にやってはいけない設計 Notesクライアントアプリの機能、入力項目を そのままモバイル化しない!! 55
  56. 56. 具体的には? Notes君の良いところ クライアントサーバーなのでセキュリティなんかは考えなく て良い デザインは一定の形が決まっているので、それに準拠すれば そんなにデザインに悩まなくて良い バージョンが決まっている PC&マウス操作なので画面が広くて、文字もたくさん出せる etc・・・ モバイルちゃんの良いところ タッチインターフェースで簡単入力 カメラなどの各種センサー、固有の機能が使える どこにでも持ち運べてすぐ使える デザインの自由度が高い etc・・・ もっと見つけてあげて下さい 兄弟でもそれぞれ良いところが違うように、それぞれ良いところは違います。 お父さん、お母さん(開発者)はそれぞれの 良いところを見つけて、生かしてあげる設計をしましょう!! 56
  57. 57. そのために必要なことは? ユーザーさんと、きちんと対話しましょう 思い込みで設計していませんか? 本当は何がしたいのか?を話し合いましたか? ユーザーの発言=要望だと思っていませんか? ユーザーさんが見えていないリスクについても話し合いましたか? 57
  58. 58. まとめ 58
  59. 59. ご覧になって下さった方々へ 私の知り得る情報はキーワードとしてちりばめておきました この資料だけで何でも作れるようになれるわけではありません このキーワードをきっかけに、まずは基礎を勉強し、深く知っていって下さ い また、Google先生を使って、誰かの知見を受け取るだけではなく、「こん な時にはこんな風に解決しましたよ」と発信していって下さい あなたがBADプラクティスから得た気づきは 必ず誰かの助けになります 59
  60. 60. Let’s Enjoy XPages

×