テクてく大阪20150522 XPagesBLAST 発表用資料
•
0 likes•585 views
2015/05/22(金)に開催された 「テクてく Lotus 技術者夜会 in OSAKA XPages BLAST」 の資料です
Recommended
More Related Content
Similar to テクてく大阪20150522 XPagesBLAST 発表用資料
Similar to テクてく大阪20150522 XPagesBLAST 発表用資料 (20)
More from Tetsuji Hayashi
More from Tetsuji Hayashi (6)
テクてく大阪20150522 XPagesBLAST 発表用資料
- 1. テクてくLotus技術者夜会 in OSAKA XPages BLAST 2015/05/22(Fri) Tetsuji Hayashi 1
- 2. 今、Notes開発者に求められていること って何だろう？ • 大量のDBをテンプレート化する能力? • 文書数が増えたDBのパフォーマンスを上げる魔法? • NotesDBをXPages化する能力? • ユーザー部門の無理難題を押さえ込む交渉力? • ○ffice365、○ボウズに変えたいという経営層を説 得する力? etc etc はたしてそうだろうか？ 2
- 6. デザイン力とは？ 1. 人間が心地よいと感じる基本法則を知っているこ と 今できなくても 学べば誰でも出来ます 独りよがりの かっこよさは デザインではありません 2. 情報の中から、何が重要で、何が不要かを識別で きること 3. それらを組み合わせることができること 6
- 7. 参考図書 伝わるデザインの基本 高橋 佑磨 , 片山 なつ (著) 技術評論社 7
- 12. スタイルシートを作る 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
- 13. ビューコントロールに スタイルシートのクラスを割り当てる 2. 作成したスタイルシートをリソースに読み込む 3. 読み込んだスタイルシートをXPageに追加する 4. viewStyleClass－ビュー全体と、rowClasses－列のプロパティにスタイル を割当て ビュー全体のクラス マウスホバーした時のクラス テクてく1 13
- 16. 全文検索結果はハイライトされないの？ テクてく2 16 XPagesって最終的にHTMLになるんやろ 直接タグを追加したらええんちゃう？ Notesクライアント では検索結果がハ イライトされる
- 20. ビュー用 ビューコントロールの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
- 23. フォーム用 追加した<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=content sの内側を書 き換える 23
- 25. 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