XPages開発を始める Notes技術者のためのWeb技術概論

1. XPagesDay
2013
【B-3】
XPages開発を始める Notes技術者のための
Web技術概論
2013年11月7日
海老原 賢次
リコーITソリューションズ株式会社
07/11/2013
1

2. 自己紹介
 海老原 賢次
 リコーITソリューションズ株式会社
 XPagesをはじめ、Webアプリ開発を多数手がけてます
XPagesは2009年から取り組んでいます
 鹿児島の事業所からお送りしております
 最近降灰がひどいです
桜島 今年 775回 の爆発 (11月7日時点)
07/11/2013
2

3. 内容
 XPagesを本格的に作成を始めると、どうしてもWeb関連の知識
が必要になります
 もちろん、ここで全てを紹介できないのですが、開発や学習の足が
かりになれば幸いです
 質問がございましたら、私のブログに専用トピックを作成しましたの
で、こちらへコメントをお寄せ下さい
XPagesで行こう！(IBM developerWorks内)
http://goo.gl/fS44AH
07/11/2013
3

4. 内容
HTML,CSS
JavaScript
Dojo と jQuery
ライフサイクル
07/11/2013
4

5. XPages技術俯瞰図
サーバー
リクエスト
ページ・コントロール
イベント処理
JavaScript
(サーバーサイド)
クライアント
(ブラウザ)
HTML
ライフサイクル
装飾
CSS
取得・更新
レスポンス
変更
JavaScript
(クライアントサイド)
Dojo
NotesDocument,
NotesView等
07/11/2013
jQuery
5

6. HTML,CSS
2013/11/7
6

7. HTML,CSS
 いまさらですが・・・
 HTMLとは？
­ 文書の内容の一部にマークアップによって、
文字に意味を持たせる言語
­ なので、本来そこには見た目を直接定義する要素はない
07/11/2013
7

8. HTML,CSS
 HTMLのバージョン
­ HTML 4.01：ちょっと前の標準
­ XHTML1.0, 1.1: XMLに準拠。標準になりそこねた（XHTML5に継承）
­ (X)HTML5: 最近の流行。モバイル系では当たり前。
でもデスクトップではこれから？(古いブラウザが多いため)
­ 新しいバージョンほどデザイン的な要素の排除を図っている
• HTML5で廃止になったタグ・属性（大半はHTML 4.01で非推奨）
­ frame, frameset, font, center, strike などのタグ
­ width, height, bgcolor , color, link などの属性も廃止
­ HTML5はこれからの主流だが、すべての仕様をブラウザが対応しているわ
けではない。ブラウザ毎の実装状況を要チェック！
07/11/2013
8

9. HTML,CSS
 HTMLの仕様をきちんと理解しましょう！
­ 例えば・・・
­ タグの種類はブロックレベル要素とインライン要素がある
­ ブロックレベル要素の前後で改行される(CSSで調整可能)
• <div><p><ul><table>など
­ インライン要素は行の中にある要素なので、前後では改行されない(CSS
で調整可能)
• <span><img><a>など
­ インライン要素の中にブロック要素を入れることはできない
­ <p>の中にはブロック要素を入れることはできない、などタグによっての制限
もある
­ などなど
07/11/2013
9

10. HTML,CSS
 正しいHTML、CSSのお作法を知っておきましょう！
­ 仕様に沿っていないHTMLはブラウザやバージョンによって表現が異なる
­ ブラウザ間互換やバージョンアップで痛い目を見る
­ HTMLリファレンスは、少なくともブロックレベル要素/インライン要素について
言及しているものを参考にする
 昔HTMLをやってたけど暫く触っていない、
なんとなくでHTMLを覚えている、
という人は再度確認しましょう！
07/11/2013
10

11. HTML,CSS
 CSS
­ HTMLの各要素の表示位置や装飾を定義
­ 通常は、HTMLとは別のCSSファイルで管理される
(各コントロールのプロパティ(style属性)で設定できるけど、
おすすめしない)
ここ↓で指定するのはおすすめしません
07/11/2013
11

12. HTML,CSS
CSSファイルを作成して
Xpageにリソースとして追加
07/11/2013
12

13. HTML,CSS
 なぜ分けるのか？
 それぞれの役割を明確にする →
構造化するという意味ももちろんあるけど・・・
メンテナンスが楽！というメリットが大きい
­ 同じような要素に対して一元的に管理できる
­ ページ毎に再定義する必要がない
→変更に強い！
07/11/2013
13

14. HTML,CSS
 class の利用
­ 同じ種類の要素を同じ class 名をつけておき、CSSファイルでそのクラスの
デザインを定義すると
それらのデザインを一括で変更することができる
 CSSファイルでスタイルを定義できるのは id や class だけでない
07/11/2013
14

15. HTML,CSS
 セレクタ
­ CSSファイル内でHTMLのどの要素に対しての定義なのかを指示するモノ
­ セレクタの指定に一致した全ての要素がその定義の対象となる。
07/11/2013
15

16. HTML,CSS
 セレクタ
­ 使いこなせると、スタイルを管理しやすくなります。
(斜体がセレクタが一致する場所です)
class:
.hoge { color: red; } /* <div class="hoge"> */
(要素名): div { color: red; } /* <div class="hoge"> */
Id:
#sp { color: red; } /* <div id=“sp"> */
属性:
[type=button] { color: red;} /*<input type="button">*/
合わせ技*1: input.hoge[type=button] { color: red;}
/*<input class="hoge" type="button">*/
/* input要素で且つclassが"hoge"で且つtypeが"button" */
*1 スペースを開けないこと！
07/11/2013
16

17. HTML,CSS
 セレクタ
子孫: #sp .hoge { color: red; }
//id="sp"のタグの下にある(孫以降でも良い)class="hoge"の要素
//※id="sp"のタグは対象ではない
子:
#sp > .hoge { color: red; }
// id="sp"のタグの直下にある(子のみ孫以降は対象外)class="hoge"の要素
弟(CSS3): #sp ~ .hoge { color: red; }
// id="sp"のタグと同じ階層でこれ以降にある class="hoge" の要素
or:
#sp, .hoge { color: red; }
// id="sp" または class="hoge"の要素
­ などなど・・・他にもいろいろ有ります
­ Webで検索 -> [CSS セレクタ]
07/11/2013
17

18. HTML,CSS
 CSS3
­ CSS2.1が主流
­ セレクタが増えている
­ 表現が増えている
• 角丸やグラデーションも画像なしで、CSSのみで表現できる！
­ でも・・・
­ HTML5同様、ブラウザが全て実装できていない！
­ ブラウザの種類、バージョンによっても差異がある！
­ 使用するときは対応状況を要チェック！
07/11/2013
18

19. HTML,CSS
 ブラウザの開発者ツール
­ タグやCSSの解析
どのタグにどのCSS定義があたっているかなどの確認ができる
JavaScriptで変更された最新のHTMLを解析できる
­ JavaScriptのデバッグ
 起動方法
­ IE
(8以降),
chrome, Firefox
(Firebug)
F12 ]キーで起動！
全部[
07/11/2013
19

20. HTML,CSS
 テーブルレイアウト
­ <table></table>を使って画面のレイアウトをデザインする技
­ 単純なところがいいのですが・・・変更にめっぽう弱い
­ 一般向けサイトでは採用されることは多く無い
主流はCSSによるレイアウト
­
素人っぽい
­ 使うのなら限定的に
 レイアウトはCSSで！
­ float などを利用します。
­ 詳しくはWebで->[CSS レイアウト]や[CSS 段組]で検索！
­ XPagesでの画面全体のレイアウトは、Extension Library の
「ApplicationLayout 」を使用するのがオススメ！
07/11/2013
20

21. JavaScript
2013/11/7
21

22. JavaScript
 XPagesではクライアントはもちろん、サーバー側でも使用する。
→超重要！
­ 他のプラットフォームでは、サーバー側はJavaやC#などのため、別な言語
が必要だけど・・・
 XPagesは、JavaScriptをマスターすると、どっちでも使える！
→超お得！
07/11/2013
22

23. JavaScript
覚えておくと便利な仕様
 オブジェクト・リテラル
­ オブジェクトを直接ソースコードに記述する事ができる。
­ 定数の宣言
­ 関数の引数が多くなる場合にまとめることで、引数の順番に配慮する必要はない
var hoge = { name: 'ebihara', old: 35}
print(hoge.name); // ebihara
 名前空間パターン(オブジェクトリテラルの応用)
­ メソッドをグループ化することができる。メソッド名カブりの心配がなくなる。
var myNameSapce = {}; //名前空間の宣言
myNameSapce.getName = function(){
//メソッドの内容
};
07/11/2013
23

24. JavaScript
JavaScriptって・・・
­ クラスを作れない？
• クラスっぽいものが作れます！(コンストラクタ関数)
­ クラスの継承できない？
• prototypeをつかえば継承できます！
07/11/2013
24

25. JavaScript
より高度な使用方法については、私のブログで紹
介しています。ぜひ見てやって下さい！
XPagesで行こう！(IBM developerWorks内)
http://goo.gl/TKOnf0
07/11/2013
25

26. Dojo と jQuery
07/11/2013
26

27. Dojo と jQuery
 クライアントのHTMLを操作するのに、既存のオブジェクトやメソッ
ドだけでは不便
 Dojo や jQueryといったJavaScriptライブラリを利用するの
が便利
 ブラウザ間の差異を吸収してくれる
 一般的に、これらを使用しないWebアプリはない、といってもいいく
らい
07/11/2013
27

28. Dojo と jQuery
 Dojo
­ 利点
• XPagesに組み込まれていて、何もしなくても利用可能
• jQueryに比べ、動作が早い場合が多い
­ 欠点
• 情報が少なく、英語が多い（日本語の記事は殆ど無い・・・）
• “dojo”で検索したら“道場”が検索される
（Webでの検索が地味にめんどくさい）
2013/11/7
28

29. Dojo と jQuery
 jQuery
­ 利点
• 多くのWebアプリで利用されており、デファクト・スタンダードといって良い
• 情報が多く、日本語の書籍も多数ある
• Dojoより使いやすい（個人の感想です）
­ 欠点
• DBの設計に追加する必要がある
• Dojoと混在することになる
競合による不具合を発生することはないが、jQueryを読み込む分、ロードに
時間がかかる
2013/11/7
29

30. Dojo と jQuery
 HTML要素のアクセス方法の比較(ブログにサンプル有ります)
例）下記のクラス名"dox1"のdiv(複数の可能性がある)の下にある、クラス名"text1"の
span(複数の可能性がある)の中にテキスト"uga"を"hoge"に入れ替え、文字色を赤で太
字にする
<div class="box1">
<span class="text1">uga</span> <!-- 対象 -->
<span class="text2">:</span> <!-- 対象外 -->
<span class="text1">uga</span> <!-- 対象 -->
</div>
<div>
<span class="text1">消さないで</span> <!-- 対象外 -->
</div>
<div class="box1">
<span class="text1">uga</span> <!-- 対象 -->
</div>
2013/11/7
30

31. Dojo と jQuery
 ライブラリなし
var boxes = document.getElementsByClassName('box1');
var i, j, div, spans, spanText1;
for(i=0, max=boxes.length; i < max; i++){
div = boxes[i];
if(div.tagName === 'DIV'){
spans = div.getElementsByTagName('SPAN');
for(j=0, max=spans.length; j < max; j++){
spanText1 = spans[j];
if(spanText1.className === 'text1'){
spanText1.innerText = 'hoge';
spanText1.style.color = 'red';
spanText1.style.fontWeight = 'bold';
}
}
}
}
2013/11/7
31

32. Dojo と jQuery
 Dojo
dojo.query('div.box1 span.text1')
.forEach(function(spanText1){
spanText1.innerText = 'hoge';
spanText1.style.color = 'red';
spanText1.style.fontWeight = 'bold';
});
※CSSセレクタと同じ記述で要素の指定ができる！
2013/11/7
32

33. Dojo と jQuery
 jQuery
$('div.box1 span.text1‘)
.text('hoge')
.css({color: 'red',
'font-weight': 'bold'});
※‘font-weight‘ は ’’無しで fontWeight でも良いです
※jQueryも CSSセレクタで要素の指定ができる！
ね、簡単でしょ？
2013/11/7
Version: [###] Classification: Internal Owner: [Insert name]
33

34. Dojo と jQuery
 jQueryをNotesDBに組み込む
XPagesで行こう！
連載：ちょっとディープなXPages コラム2
http://goo.gl/XJMfAp
07/11/2013
34

35. ライフサイクル
2013/11/7
35

36. ライフサイクル
 ライフサイクルとは・・・
­ クライアントからサーバーにリクエストを送り、サーバーが決まった順番で処理
をしてHTMLを生成して、クライアントに返すまでの一連の流れ
 理解しておく必要がある理由
­ サーバーで処理すべきか、クライアントJavaScriptのみで処理できるのか、
その判断の重要な要素となる
­ 処理の内容から、それをどこに記述するのが最も好ましいのかを判断できる
­ 不具合があった時にどこに問題があるのか、切り分けができる
2013/11/7
36

37. ライフサイクル
 ページを開いた時
$式・・・ページ読み込み時に計算
#式・・・動的に計算
HTTPリクエスト
(GET)
beforPageLoad
後ほど説明します
(ページ内の$式)
afterPageLoad
afterRestoreView
beforRenderResponse
後ほど説明します
HTTPレスポンス
07/11/2013
(ページ内の#式・HTMLの生成)
afterRenderResponse
37

38. ライフサイクル
 開いた後にサーバーイベントのあるボタンなどを押した時(ポストバック)
ボタンのイベントで「すべて更新」でも「部分更新」でも違いはありません。*1
(クライアントイベント処理)
HTTPリクエスト
(POST)
クライアントのonClickなどの処理
beforPageLoad
(ページ内の$式)
afterPageLoad
afterRestoreView
サーバーサイドのonClickなどの処理
(コントロールイベント処理)
beforRenderResponse
(ページ内の#式・HTMLの生成)
HTTPレスポンス
afterRenderResponse
07/11/2013
*1 「部分実行モードの設定」をしている場合は異なります。
38

39. ライフサイクル
 ＃式 と $式
­ コントロールのプロパティで「値の計算」とした時の処理タイミング
­ $式 ・・・ ページを開いた時のみ実行
­ #式 ・・・ ページを開いと時とポストバック時に実行
07/11/2013
39

40. ライフサイクル
 ページイベント
­ ページを開いた時の初期処理
• beforPageLoad または afterPageLoad
­ 文書のフィールドに初期値を与えるなどの処理
­ beforPageLoadでは、サーバーコントロールのオブジェクトがまだないので注意
• 「開いた時」というのは新しくブラウザを起動したときではなく、URLの入力、他
のページのリンク、content.redirectToPage()等で遷移してきた時などです。
­ イベントの度に実行する処理
• beforRenderResponse
­ フィールド値の変更により、別な値を変更したり、表示/非表示を切り替えるなどの
処理
­ コントロール内の#式でも良いけど、処理をまとめて書きたいときに便利。
複雑なことをしない限りは、これだけでOK
07/11/2013
40

41. デモ
 最近開発したXPagesアプリケーションをご紹介します
07/11/2013
41

42. 最後に
 XPagesは、これまでNotesを中心に開発してきた人には、少々
難しいかもしれません。
 しかし、新しい技術を身につけるチャンスです。
 これを機会に新たなステージにジャンプアップしましょう！
07/11/2013
42

43. ご視聴、ありがとうございました。
2013/11/7
43

44. 07/11/2013
Version: [###] Classification: Internal Owner: [Insert name]
44