テクてく大阪20150522 xpagesblast 発表用資料
TRANSCRIPT
テクてくLotus技術者夜会 in OSAKA
XPages BLAST
2015/05/22(Fri) Tetsuji Hayashi
1
今、Notes開発者に求められていること って何だろう？
• 大量のDBをテンプレート化する能力? • 文書数が増えたDBのパフォーマンスを上げる魔法? • NotesDBをXPages化する能力? • ユーザー部門の無理難題を押さえ込む交渉力? • ○ffice365、○ボウズに変えたいという経営層を説得する力?
etc etc
はたしてそうだろうか？ 2
Notes開発者に求められている力
ずばり
デザイン力
3
デザインとは？
1.センス 2.絵を描く能力
3.Photoshop、Illustratorを
自在に使える力
4.神の 与えたもうた力
理系の自分には無理 orz
4
デザインとは？
1.センス 2.絵を描く能力
3.Photoshop、Illustratorを
自在に使える力
4.神の 与えたもうた力
理系の自分には無理 orz
5
デザイン力とは？
1. 人間が心地よいと感じる基本法則を知っていること
今できなくても
学べば誰でも出来ます
独りよがりの
かっこよさは デザインではありません
2. 情報の中から、何が重要で、何が不要かを識別できること
3. それらを組み合わせることができること
6
参考図書
伝わるデザインの基本 高橋 佑磨 , 片山 なつ (著)
技術評論社
7
表現方法としての 技術は必要なので
ここからは
具体的なテクニック
と言っても・・・
開発環境はDomino 8.5.3FP5 Domino9.0.1でも動作確認済 8
まずは
基本テク
9
テクてく1
ビューコントロールってダサくない？
テクてく1
XPagesって最終的にHTMLになるんやろ
オリジナルのCSSを当てればええんちゃう？ 10
マウスホバーに CSSを割当て選択位置をわかりやすく
テクてく1
11
スタイルシートを作る
1. スタイルシート(original.css)をテキストエディタ(SublimeTextなど)で作成する
/* 全体 */
@charset "UTF-8"; /* NOTES VIEW */ .notes_view {width: 100%; background-color: #fff; font-size: 120%; } .notes_view_hover:hover {background-color: #4682B4; color: #fff; } .notes_view_hover:hover a {color: #fff; }
ビュー全体のデザイン
マウスホバーした時のデザイン
テクてく1
12
ビューコントロールに スタイルシートのクラスを割り当てる
2. 作成したスタイルシートをリソースに読み込む
3. 読み込んだスタイルシートをXPageに追加する
4. viewStyleClass－ビュー全体と、rowClasses－列のプロパティにスタイルを割当て
ビュー全体のクラス
マウスホバーした時のクラス
テクてく1
13
そんなテクどうやって見つけるの？
ブラウザの開発者ツールを使って
HTMLを構造解析
テクてく1
14
続いて
これでええのか？変態テク
15
テクてく2
全文検索結果はハイライトされないの？
テクてく2
16
XPagesって最終的にHTMLになるんやろ
直接タグを追加したらええんちゃう？
Notesクライアントでは検索結果がハイライトされる
ClientSideJavaScript でHTMLを書き換える
テクてく2
17
Webでも検索結果を
ハイライトしたい
ビュー用 検索ボックスとボタンを作る
1. 編集ボックスコントロールを配置し、スコープ変数に「セッションの範囲」を指定
2. ボタンコントロールを配置し、ボタンの種類に「送信」を指定
セッションにするのは次の画面に検索条件を渡したいため
テクてく2
18
ビュー用 検索条件にセッション変数を割り当てる
3. XPageのonLoadイベントにCSJS(ClientSideJavaScript)で、検索条件を取得し、条件に一致した文字の前後に<mark>タグを追加
テクてく2
//全文検索の条件をセッション変数から取得
sessionScope.s_searchFormula; 19
ビュー用 ビューコントロールのHTMLを書き換える 4. XPageのonLoadイベントにCSJS(ClientSideJavaScript)で、検索条
件を取得し、条件に一致した文字の前後に<mark>タグを追加
//検索条件に入力された文字列をキーにHTMLを書き換え、タグを書き込む
var key = document.getElementById(‘#{id:searchFormula}’).value; if(key!=""){ var newbody = document.getElementById(‘#{id:viewPanel1}’).innerHTML.replace(new RegExp(key, 'g'), '<mark>' + key + '</mark>'); document.getElementById(‘#{id:viewPanel1}’).innerHTML = newbody; }
テクてく2
20
フォーム用 検索条件を取得するフィールドを作る
テクてく2
5. 計算結果フィールドコントロールを配置し、セッション変数から検索条件を取得する
21
フォーム用 編集モードを取得するフィールドを作る
テクてく2
6. 計算結果フィールドコントロールを配置し、SSJS(ServerSideJavaScirpt)でモードを取得する
7. フォームは書換範囲を特定するコントロール(タグ)がないので、ソースページに<div>タグを追加
document1.isEditable();
22
フォーム用 追加した<div>タグ内側を書き換える
テクてく2
8. XPageのonLoadイベントにCSJS(ClientSideJavaScript)で、検索条件を取得し、条件に一致した文字の前後に<mark>タグを追加
//文書が表示モードの場合のみキーワードを取得し、<mark>タグを書き込む
var docEditModeFlg = document.getElementById(‘#{id:docEditModeFlg}’).innerText; if(docEditModeFlg===‘false’){ var key = document.getElementById(‘#{id:searchFormula}’).innerText; if(key!=‘’){ var newbody = document.getElementById(‘contents’).innerHTML.replace(new RegExp(key, 'g'), '<mark>' + key + '</mark>'); document.getElementById(‘contents’).innerHTML = newbody; } }
モード判定
<div> id=contentsの内側を書き換える
23
でも・・・ この方法には欠点が・・・
テクてく2
24
やむを得まい
検索キーワードを2バイトに制限しよう
<を検索するとエラー
半角文字はHTMLタグ自体を書き換えて
しまう
1. 検索ボックスのonChangeイベントで1バイト文字をヌルに変換し、検索ボックスに書き戻し
1バイト文字をヌルに変換する関数追加
テクてく2
/*検索キーワードから半角文字を削除し書き込み*/
var searchKey = document.getElementById(‘#{id:searchFormula}’).value; document.getElementById(‘#{id:searchFormula}’).value = trimHankaku(searchKey); /*引数で渡された文字列から半角文字を削除し、返す*/
function trimHankaku(argStr){ argStr= argStr.replace(new RegExp('[ -~]','g'),''); return argStr; } 25
完全体！！
テクてく2
26
半角文字はヌルに変換
まとめ
• XPagesを使えば、Web技術はすべて取り込めます(COOLなあのHPも、ヌルヌル動くあのモバイルUIもすべて実現できます)
• 別に○Pointや、○force、○ボウズが優れているわけではありません
必要なのは
「楽しいと感じる心」と「想像力」 27
Let’s Enjoy XPages
ありがとうございました 28