--- title: XPages with jQueryMobile BADプラクティスガイド tags: #xpages #xpage #notes #domino #jquerymobile author: [t_rf900](https://www.docswell.com/user/trf900) site: [Docswell](https://www.docswell.com/) thumbnail: https://bcdn.docswell.com/page/63JKP8DD7D.jpg?width=480 description: XPagesDay 2014 発表資料 published: April 22, 22 canonical: https://www.docswell.com/s/trf900/K7LV1K-2022-04-22-220325 --- # Page. 1 ![Page Image](https://bcdn.docswell.com/page/63JKP8DD7D.jpg) 2014 A4 2014/11/18 16:00-17:00 XPages with jQueryMobile プラクティスガイド モバイルアプリケーション開発のコツ 所属：ジョンソンコントロールズ(株) 林 哲司 # Page. 2 ![Page Image](https://bcdn.docswell.com/page/4LE3X2RP75.jpg) 本日のアジェンダ 序 ：XPages開発能力を上げるには？ 破 ：XPagesでjQueryMobileを使うには Ｑ ：jQueryMobile設計BADプラクティス :|| ：絶対にやってはいけない設計 ：まとめ 2 # Page. 3 ![Page Image](https://bcdn.docswell.com/page/V8ED2ZY3EG.jpg) 個人的 本日のMission 3 # Page. 4 ![Page Image](https://bcdn.docswell.com/page/4V7P1D6PE8.jpg) XPages開発に対するイメージを変え Notes開発者を元気にする 現在 未来 本日のMission 4 # Page. 5 ![Page Image](https://bcdn.docswell.com/page/L2JVY13VJQ.jpg) 序 XPages開発能力を上げるには？ 5 # Page. 6 ![Page Image](https://bcdn.docswell.com/page/Z5EG92317L.jpg) 質問１：料理が上達するには？ １.高級料理店 に行く ２.レシピ本を 読む ３.シェフと 話してみる ４.料理を 作ってみる 6 # Page. 7 ![Page Image](https://bcdn.docswell.com/page/V4JQWP5NJP.jpg) 質問２：プログラミングが上達するには？ １.アプリを使う ２.プログラミン グの本を読む ３.開発者と 話してみる ４.アプリを 開発してみる 7 # Page. 8 ![Page Image](https://bcdn.docswell.com/page/DK74KY93E1.jpg) なぜ、実践すると上達する？ 実践 (体験) 失敗 上達 これしかないんです！でも・・・・ 食べたいのに、痩せたいんです 練習したくないのに、勝ちたいんです 楽したいのに、儲けたいんです そんなことできると思いますか？ できる人がいたら、こっそり教えて下さい 8 # Page. 9 ![Page Image](https://bcdn.docswell.com/page/PLJ1X6KZJG.jpg) 失敗後のプロセス 最も重要!! 実践 (体験) 失敗 考える 気づく 上達 大切なのは・・・ Google先生に聞くこと? ではなく 自分で考えて、気づくこと そのためのツールとして、基礎技術をしっかり学ぶこと これをやらずして上達はあり得ないし、XPagesも楽しくなりません! 9 # Page. 10 ![Page Image](https://bcdn.docswell.com/page/8GJWNWD6J2.jpg) なぜ プラクティスなのか？ 赤ちゃんが、ハイハイを始めて、失敗したら 「私はなんてダメなんだろう？私の人生は終わりだわ」 なんて思うでしょうか？ 「思わない」って大人は知ってますね でも、自分のことだと大人は「失敗だ!」と決めつけるんです 大人がBADだ! 失敗だ!と決めつけているのは 気づきのタネ なんです 10 # Page. 11 ![Page Image](https://bcdn.docswell.com/page/W4EZ35GRE3.jpg) 今でしょ! XPagesは「難しい!」「情報がない!」 と言ってる暇があったら まずはやってみましょう! 基礎をしっかり学びましょう! 11 # Page. 12 ![Page Image](https://bcdn.docswell.com/page/KY76X9Y1JV.jpg) XPagesDay2013の おさらい 破 XPagesでjQueryMobileを使うには 参考リンク：XPagesDay2013 あなたにも出来る！ XPages & jQueryMobileで作るスマートフォン、タブレットUX開発 http://www.slideshare.net/tetsujihayashi16/x-pages-day2013-27989624 12 # Page. 13 ![Page Image](https://bcdn.docswell.com/page/5G75XNGLE4.jpg) 動作環境 開発環境 • • • Notes/Domino 8.5.3 FP5 jQuery 2.1.1 jQueryMobile 1.4.5 稼働テスト環境 • Notes/Domino 9.0.1 13 # Page. 14 ![Page Image](https://bcdn.docswell.com/page/V9J2X5Y37R.jpg) あきらめないといけないこと XPagesの設計タブ(GUIによるデザイン) XPages with jQueryMobileの開発では、設計タブは使いません。 新しいフレームワーク、開発手法がどんどん出てくる時代になりました。 最新技術を取り入れて行くには、GUIツールの登場を待っている時間がありません。 ※例えばjQuery互換でモバイルに最適化されたZepto.jsとか・・・ 14 # Page. 15 ![Page Image](https://bcdn.docswell.com/page/5DEY8KG8EM.jpg) 前提として 知っておいた方がいい知識 ・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 # Page. 16 ![Page Image](https://bcdn.docswell.com/page/2VJNQRG9J8.jpg) あった方が良いツール ・恋するエディタ SublimeText デザイン(HTML,CSS)は先にこれで作って、XPage上でコントロー ルを貼り付けていくのがオススメ マルチカーソルが超便利 使い方はドットインストールで ドットインストール：Sublime Text 2入門 ・j5 create Android Mirror USBアダプター JUC600 USBで接続し、Android端末の画面をPCに複製できるツール PCのキーボードが使える PCをプロジェクタに繋いで、ユーザーに説明する時にも便利!! ・フルHDのモニタ フルHDじゃないとDominoDesignerのプロパティ画面が見えない 16 # Page. 17 ![Page Image](https://bcdn.docswell.com/page/GYE9DMW3J3.jpg) SublimeTextマルチカーソル 17 # Page. 18 ![Page Image](https://bcdn.docswell.com/page/5GE83LNL7D.jpg) DominoDesignerの設定 １．エディタの行番号を表示 Designer のプリファレンスの [一般]-[エディター]-[テキスト・エディター] 内にある「行番号の表示」 にチェックを付ける ２．エラーを表示 DB内の[アプリケーションプロパティ]-[XPages実行時エラーページを表示]にチェックを付ける ３．「自動的にビルド」にチェック ファイルメニューからプロジェクト(P)>自動的にビルドにチェックを付ける 18 # Page. 19 ![Page Image](https://bcdn.docswell.com/page/MLELVLPQ7R.jpg) dojoデザインを読み込まない設定 １．xsp.propertiesにxsp.theme=<empty>を追加 アプリケーションをパッケージエクスプローラで開き、WebContent>WEB-INF> xsp.propertiesを開き、 ソースタブに xsp.theme=<empty> という1行を追加 設定あり 設定なし ③ ② おわかりいただけ ただろうか？ ① jQueryMobileのCSSを正しく設定すれば問題ないと思いますが、 標準のCSSを適用させないようにして、はまるポイントを減らしましょう 19 # Page. 20 ![Page Image](https://bcdn.docswell.com/page/54JMGM2KJW.jpg) 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 # Page. 21 ![Page Image](https://bcdn.docswell.com/page/ZPJRZVM679.jpg) 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 # Page. 22 ![Page Image](https://bcdn.docswell.com/page/NPEX9ZVDJX.jpg) 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 # Page. 23 ![Page Image](https://bcdn.docswell.com/page/63EKP8QDJD.jpg) 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 # Page. 24 ![Page Image](https://bcdn.docswell.com/page/4L73X2PPJ5.jpg) 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 # Page. 25 ![Page Image](https://bcdn.docswell.com/page/V87D2ZL37G.jpg) 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 # Page. 26 ![Page Image](https://bcdn.docswell.com/page/4VJP1D2P78.jpg) 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 # Page. 27 ![Page Image](https://bcdn.docswell.com/page/L2EVY1DVEQ.jpg) 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 # Page. 28 ![Page Image](https://bcdn.docswell.com/page/Z57G92Y1JL.jpg) 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 # Page. 29 ![Page Image](https://bcdn.docswell.com/page/V4EQWPMNEP.jpg) こうなる <div data-role="page"> <!-- ヘッダー --> <header data-role="header"> <h3>ヘッダー</h3> </header> <!-- コンテンツ --> <article data-role="content"> </article> <!-- フッター --> <footer data-role="footer"> <h3>フッター</h3> </footer> 29 # Page. 30 ![Page Image](https://bcdn.docswell.com/page/DKJ4KYV371.jpg) 作り方の基本① デザイン 1. 入力タグ以外は<article>タグの間にタグを直接記入します 2. 入力タグはコアコントロールをドラッグ&ドロップし、プロパティを 設定していくのが基本の流れになります DominoDesigner 完成形 30 # Page. 31 ![Page Image](https://bcdn.docswell.com/page/PLE1X63ZEG.jpg) 作り方の基本② XPages攻略のポイント! 拡張タグの設定 jQueryMobileのキモである<data-xxxx>という拡張タグをコアコント ロールに設定するには 1. コントロールを選択し、属性リスト(すべてのプロパ ティ－基本－attrs)に+ボタンで下記の属性を追加 name data-mini value true 出力されるHTML <div class=“ui-select ui-mini”> 完成形 31 # Page. 32 ![Page Image](https://bcdn.docswell.com/page/8GEWNWP6E2.jpg) 作り方の基本③ コアコントロールと出力される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 # Page. 33 ![Page Image](https://bcdn.docswell.com/page/W47Z35KR73.jpg) はまるポイント① jQueryMobileのサンプルが動かない まずは「HTMLのサンプルをそのまま動作させてみたい」ということがあ ると思います やりたいこと HTMLソース XPageソース(そのまま貼り付け) エラーが出る XPagesはHTMLではないので、<input>などの閉じたタグのないものは 終端タグ/を入れましょう。 33 # Page. 34 ![Page Image](https://bcdn.docswell.com/page/KYJ6X9Q1EV.jpg) はまるポイント① jQueryMobileのサンプルが動かない XPageソース(修正版) 動いた!! XPagesはHTMLではなく、XMLなので終端タグが必要です <input>など終端タグの無いものは終端タグ/を付けましょう 34 # Page. 35 ![Page Image](https://bcdn.docswell.com/page/5GJ5XNRL74.jpg) はまるポイント② jQueryMobileのCSSが適用されない すべてのプロパティ>スタイル>styleClassにCSSを設定する ※outerStyeleClassは上位に<div>タグが生成され、その<div>タグにclassがされる 設定例 出力されるHTML 35 # Page. 36 ![Page Image](https://bcdn.docswell.com/page/4LE3X2PD75.jpg) はまるポイント③ XPageが生成するIDがわからない IDを指定して、jQueryからコントロールを制御したい場合、はまります XPages 普通は名前がIDになる このidをそのままjQueryのIDタグとして使えれば良いんだけど、動かない 例) $(“#Subject").css("color","pink"); 出力されるHTML じゃぁ、HTMLに出力されるidを使えば良いんじゃない？と思うんだけど、動かない 例) $("#view:_id1:Subject").css("color","pink"); 36 # Page. 37 ![Page Image](https://bcdn.docswell.com/page/V8ED2ZL2EG.jpg) はまるポイント③ XPageが生成するIDがわからない ここでポイントとなるのはid名”view:_id1:Subject”の中に入っているコ ロン”:”です。このコロンがCSSの疑似クラスで使われている区切り記号と 判断され、正常に要素を選択することができなくなってしまっています。 【CSSの疑似クラス例】 要素名:hover マウスカーソルが乗っている要素 要素名:first-child 要素名に一致する最初の子要素 回避するにはコロンの前にバックスラッシュ(¥マーク)を二つ重ねてエスケープ これなら動く でもこの方法は先頭部分(view:_id1:Subject)の生成法則が不明確なので、 XPagesの標準で書かれている下記の形式にチャレンジします XPagesの標準的なID指定方法 document.getElementById("#{id:Subject}").value; 37 # Page. 38 ![Page Image](https://bcdn.docswell.com/page/4V7P1D2LE8.jpg) はまるポイント③ 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 # Page. 39 ![Page Image](https://bcdn.docswell.com/page/L2JVY1D6JQ.jpg) はまるポイント④ 単独ページでは問題なかったが、ページを繋 げると動かない 次のページを呼び出す<a>アンカータグに拡張タグdata-ajax=“false“を追加 フォーム→保存→ビュー 新規ボタンに<a>タグ追加 <a>タグにdata-ajax=“false“ 39 # Page. 40 ![Page Image](https://bcdn.docswell.com/page/Z5EG92Y27L.jpg) はまるポイント④ 単独ページでは問題なかったが、ページを繋 げると動かない <!-- ヘッダー --> <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 # Page. 41 ![Page Image](https://bcdn.docswell.com/page/V4JQWPM9JP.jpg) はまるポイント④ 単独ページでは問題なかったが、ページを繋 げると動かない ただし・・・・ エフェクト 個人的には エフェクトは最初の1回だけは 「ほぉ～」って思うけど、毎日 使うツールではうっとうしくな るので適材適所だと思います。 画面遷移にエフェクトをかけている場合、動かなくなるので 何でもかんでもこの方法にすれば良い訳ではありません 41 # Page. 42 ![Page Image](https://bcdn.docswell.com/page/DK74KY4RE1.jpg) はまるポイント⑤ 正しく設定、変更したはずなのに 変更が反映されない ちょっと変更→動作確認、ちょっと変更→動作確認を繰り返すと、ソース は正しいのに変更が実行結果に反映されない場合があります。そんな時は 下記の方法を試して下さい。 1. アプリケーションをすべて閉じて(Designer上の設計タブ、Notesク ライアント上のビューなどすべてのタブ)、アプリケーションを開き直 して下さい 2. Designerでプロジェクト>クリーンを選択 42 # Page. 43 ![Page Image](https://bcdn.docswell.com/page/PLJ1X64VJG.jpg) Q jQueryMobile設計 プラクティス 43 # Page. 44 ![Page Image](https://bcdn.docswell.com/page/8GJWNWX3J2.jpg) ここから先は設計の話 なぜ設計が大切かというと 設計の段階で • 完成後のユーザー体験や満足 • パフォーマンス • 開発効率 などなど、ほとんどの要素が決まってしまうからです 44 # Page. 45 ![Page Image](https://bcdn.docswell.com/page/W4EZ356GE3.jpg) シーン１： 確認か？通知か？ 保存１ 保存２ モーダルメッセージ モードレスメッセージ 45 # Page. 46 ![Page Image](https://bcdn.docswell.com/page/KY76X92QJV.jpg) シーン１： 確認か？通知か？ 確認を必要とする場面と 通知だけで良い場面は違う よく検討し、 ユーザーの操作を阻害しない ことを心がけろ！ 46 # Page. 47 ![Page Image](https://bcdn.docswell.com/page/5G75XN22E4.jpg) シーン２： 汎用的すぎる① 自由に設定、選択できる 「選択肢はユーザー側で自由に設 定できます」 テスト環境) • 11のセクション • セクションごとに11個のチェックボックス • CPU iCore5-2520M さて、表示に何秒かかるでしょう？ PC版Chrome(サーバー上) 5min iPod touch(第3世代) 31min SH-06E(Android4.2) 31min 自由に設定した結果、選択肢が多くなりすぎるとjQueryMobileでは DOMを操作してコントロールを描画するため、表示に時間がかかります。 ※DOM - Document Object Model 47 # Page. 48 ![Page Image](https://bcdn.docswell.com/page/V9J2X5417R.jpg) シーン２： 汎用的すぎる① 「選択肢は自由に設定して下さい」 は逃げてるだけじゃないのか？ 設定値の最大件数はユーザーに 確認するんだ!! 48 # Page. 49 ![Page Image](https://bcdn.docswell.com/page/5DEY8KM4EM.jpg) シーン３： 汎用的すぎる② すべてのデータ ビューにすべてのデータが表示される テスト環境) • 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 # Page. 50 ![Page Image](https://bcdn.docswell.com/page/2VJNQRW6J8.jpg) シーン３： 汎用的すぎる② すべてのデータを表示する必要があ るのか？ 一覧画面の後、ユーザーがどんな 操作をしたいのか聞くんだ!! 50 # Page. 51 ![Page Image](https://bcdn.docswell.com/page/GYE9DMXRJ3.jpg) シーン４： マルチデバイス対応(解像度問題) Nexus5 iPhone5 iPhone6 ボタンの折返しだけでなく、横向きで使用した場合、タブレットで使用した場合 など、サポートする環境、端末を明確にし、事前に確認しましょう 51 # Page. 52 ![Page Image](https://bcdn.docswell.com/page/5GE83L2G7D.jpg) シーン４： マルチデバイス対応(解像度問題) Chrome開発モード 実機 Chromeの開発者モードでは綺麗に表 示されるのに実機ではレイアウトが 崩れることがあります (ChromeとWebkitの違い) Chromeの開発者モードはあくまで解像度のエミュレーションであり、エンジンは Chromeです。jQueryMobileにカスタムCSSを適用する場合や、CSS自体を独自 に定義した場合は必ず実機でテストしておきましょう。 52 # Page. 53 ![Page Image](https://bcdn.docswell.com/page/MLELVL2X7R.jpg) シーン４： マルチデバイス対応(解像度問題) テストの段階で解像度問題が発覚 すると手戻りが発生する 設計の段階で実機を使ってレイア ウトを確認しておくんだ 53 # Page. 54 ![Page Image](https://bcdn.docswell.com/page/54JMGM83JW.jpg) :|| 絶対にやってはいけない設計 54 # Page. 55 ![Page Image](https://bcdn.docswell.com/page/ZPJRZV5R79.jpg) 絶対にやってはいけない設計 Notesクライアントアプリの機能、入力項目を そのままモバイル化しない!! 55 # Page. 56 ![Page Image](https://bcdn.docswell.com/page/NPEX9ZKYJX.jpg) 具体的には？ Notes君の良いところ クライアントサーバーなのでセキュリティなんかは考えなく て良い デザインは一定の形が決まっているので、それに準拠すれば そんなにデザインに悩まなくて良い バージョンが決まっている PC＆マウス操作なので画面が広くて、文字もたくさん出せる etc・・・ モバイルちゃんの良いところ タッチインターフェースで簡単入力 カメラなどの各種センサー、固有の機能が使える どこにでも持ち運べてすぐ使える デザインの自由度が高い etc・・・ もっと見つけてあげて下さい 兄弟でもそれぞれ良いところが違うように、それぞれ良いところは違います。 お父さん、お母さん(開発者)はそれぞれの 良いところを見つけて、生かしてあげる設計をしましょう!!56 # Page. 57 ![Page Image](https://bcdn.docswell.com/page/63EKP854JD.jpg) そのために必要なことは？ ユーザーさんと、きちんと対話しましょう 思い込みで設計していませんか？ 本当は何がしたいのか？を話し合いましたか？ ユーザーの発言＝要望だと思っていませんか？ ユーザーさんが見えていないリスクについても話し合いましたか？ 57 # Page. 58 ![Page Image](https://bcdn.docswell.com/page/4L73X2KDJ5.jpg) まとめ 58 # Page. 59 ![Page Image](https://bcdn.docswell.com/page/V87D2Z327G.jpg) ご覧になって下さった方々へ 私の知り得る情報はキーワードとしてちりばめておきました この資料だけで何でも作れるようになれるわけではありません このキーワードをきっかけに、まずは基礎を勉強し、深く知っていって下さ い また、Google先生を使って、誰かの知見を受け取るだけではなく、「こん な時にはこんな風に解決しましたよ」と発信していって下さい あなたがBADプラクティスから得た気づきは 必ず誰かの助けになります 59 # Page. 60 ![Page Image](https://bcdn.docswell.com/page/4VJP1D4L78.jpg) Let’s Enjoy XPages