Más contenido relacionado
La actualidad más candente (20)
Similar a XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド (20)
Más de Tetsuji Hayashi (6)
XPagesDay2014 A-4 XPages with jQueryMobile BADプラクティスガイド
- 9. 最も重要!!
失敗後のプロセス
実践
(体験)
気づく
考える
上達
失敗
大切なのは・・・
Google先生に聞くこと?
ではなく
自分で考えて、気づくこと
そのためのツールとして、基礎技術をしっかり学ぶこと
これをやらずして上達はあり得ないし、XPagesも楽しくなりません!
9
- 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. あった方が良いツール
・恋するエディタ SublimeText
デザイン(HTML,CSS)は先にこれで作って、XPage上でコントロー ルを貼り付けていくのがオススメ
マルチカーソルが超便利
使い方はドットインストールで
ドットインストール:Sublime Text 2入門
・j5 create Android Mirror USBアダプター JUC600
USBで接続し、Android端末の画面をPCに複製できるツール
PCのキーボードが使える
PCをプロジェクタに繋いで、ユーザーに説明する時にも便利!!
・フルHDのモニタ
フルHDじゃないとDominoDesignerのプロパティ画面が見えない
16
- 18. DominoDesignerの設定
1.エディタの行番号を表示 Designer のプリファレンスの [一般]-[エディター]-[テキスト・エディター] 内にある「行番号の表示」 にチェックを付ける 2.エラーを表示 DB内の[アプリケーションプロパティ]-[XPages実行時エラーページを表示]にチェックを付ける 3.「自動的にビルド」にチェック ファイルメニューからプロジェクト(P)>自動的にビルドにチェックを付ける
18
- 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. <?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. <?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. 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. <?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. </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. こうなる
<div data-role="page">
<!-- ヘッダー --> <header data-role="header"> <h3>ヘッダー</h3> </header> <!-- コンテンツ --> <article data-role="content"> </article> <!-- フッター --> <footer data-role="footer"> <h3>フッター</h3> </footer>
29
- 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
- 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. はまるポイント③
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/
- 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にすると 非同期通信しない
- 42. はまるポイント⑤ 正しく設定、変更したはずなのに 変更が反映されない
ちょっと変更→動作確認、ちょっと変更→動作確認を繰り返すと、ソース は正しいのに変更が実行結果に反映されない場合があります。そんな時は 下記の方法を試して下さい。
1.アプリケーションをすべて閉じて(Designer上の設計タブ、Notesク ライアント上のビューなどすべてのタブ)、アプリケーションを開き直 して下さい
2.Designerでプロジェクト>クリーンを選択
42
- 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
- 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
- 52. シーン4: マルチデバイス対応(解像度問題)
Chrome開発モード
実機
Chromeの開発者モードでは綺麗に表 示されるのに実機ではレイアウトが 崩れることがあります (ChromeとWebkitの違い)
Chromeの開発者モードはあくまで解像度のエミュレーションであり、エンジンは Chromeです。jQueryMobileにカスタムCSSを適用する場合や、CSS自体を独自 に定義した場合は必ず実機でテストしておきましょう。
52
- 56. 具体的には?
Notes君の良いところ
クライアントサーバーなのでセキュリティなんかは考えなく て良い
デザインは一定の形が決まっているので、それに準拠すれば そんなにデザインに悩まなくて良い
バージョンが決まっている
PC&マウス操作なので画面が広くて、文字もたくさん出せる etc・・・
モバイルちゃんの良いところ
タッチインターフェースで簡単入力 カメラなどの各種センサー、固有の機能が使える どこにでも持ち運べてすぐ使える デザインの自由度が高い etc・・・ もっと見つけてあげて下さい
兄弟でもそれぞれ良いところが違うように、それぞれ良いところは違います。 お父さん、お母さん(開発者)はそれぞれの 良いところを見つけて、生かしてあげる設計をしましょう!!
56