てくテク Lotus技術者夜会

テクてく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
テクてく1
まずは
基本テク
9
テクてく1
ビューコントロールってダサくない？
XPagesって最終的にHTMLになるんやろ
オリジナルのCSSを当てればええんちゃう？
10
マウスホバーに
CSSを割当て選択位置をわかりやすく
テクてく1
11
テクてく1
スタイルシートを作る
1.
スタイルシート(original.css)をテキストエディタ(SublimeTextなど)で作
成する
/* 全体 */
@charset "UTF-8";
/* NOTES VIEW */
.notes_view
.notes_view_hover:hover
.notes_view_hover:hover a
{width: 100%;
background-color: #fff;
font-size: 120%;
}
{background-color: #4682B4;
color: #fff;
}
{color: #fff;
}
ビュー全体のデザイン
マウスホバーした時のデザイン
12
ビューコントロールに
スタイルシートのクラスを割り当てる
テクてく1
2.
作成したスタイルシートをリソースに読み込む
3.
読み込んだスタイルシートをXPageに追加する
4.
viewStyleClass－ビュー全体と、rowClasses－列のプロパティにスタイル
を割当て
マウスホバーした時のクラス
ビュー全体のクラス
13
テクてく1
そんなテクどうやって見つけるの？
ブラウザの開発者ツールを使って
HTMLを構造解析
14
テクてく2
続いて
これでええのか？変態テク
15
テクてく2
全文検索結果はハイライトされないの？
Notesクライアント
では検索結果がハ
イライトされる
XPagesって最終的にHTMLになるんやろ
直接タグを追加したらええんちゃう？
16
テクてく2
ClientSideJavaScript
でHTMLを書き換える
Webでも検索結果
を
ハイライトしたい
17
テクてく2
ビュー用
検索ボックスとボタンを作る
1. 編集ボックスコントロールを配置し、スコープ変数に「セッションの
範囲」を指定
セッションにするのは次の画面
に検索条件を渡したいため
2. ボタンコントロールを配置し、ボタンの種類に「送信」を指定
18
ビュー用
検索条件にセッション変数を割り当てる
テクてく2
3. XPageのonLoadイベントにCSJS(ClientSideJavaScript)で、検索条
件を取得し、条件に一致した文字の前後に<mark>タグを追加
//全文検索の条件をセッション変数から取得
sessionScope.s_searchFormula;
19
ビュー用
ビューコントロールのHTMLを書き換える
テクてく2
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;
}
20
フォーム用
検索条件を取得するフィールドを作る
テクてく2
5.
計算結果フィールドコントロールを配置し、セッション変数から検索
条件を取得する
21
フォーム用
編集モードを取得するフィールドを作る
テクてく2
6. 計算結果フィールドコントロールを配置し、
SSJS(ServerSideJavaScirpt)でモードを取得する
document1.isEditable();
7. フォームは書換範囲を特定するコントロール(タグ)がないので、ソー
スページに<div>タグを追加
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>');
<div>
document.getElementById(‘contents’).innerHTML = newbody;
id=content
}
sの内側を書
}
き換える
23
テクてく2
でも・・・
この方法には欠点が・・・
<を検索するとエ
ラー
半角文字はHTMLタ
グ自体を書き換えて
しまう
やむを得まい
検索キーワードを2バイトに制限しよう
24
テクてく2
1バイト文字をヌルに変換する関数追加
1.
検索ボックスのonChangeイベントで1バイト文字をヌルに変換し、検
索ボックスに書き戻し
/*検索キーワードから半角文字を削除し書き込み*/
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

Download Report