狠狠撸

XPagesDay
2013
【B-3】

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

1

自己紹介
? 海老原賢次
? リコーITソリューションズ株式会社
? XPagesをはじめ、Webアプリ開発を多数手がけてます
XPagesは2009年から取り組んでいます
? 鹿児島の事業所からお送りしております

? 最近降灰がひどいです

桜島今年 775回の爆発 (11月7日時点)

07/11/2013

2

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

XPagesで行こう！(IBM developerWorks内)
http://goo.gl/fS44AH
07/11/2013

3

内容

?HTML,CSS
?JavaScript
?Dojo と jQuery
?ライフサイクル

07/11/2013

4

XPages技術俯瞰図
サーバー
リクエスト
ページ?コントロール
イベント処理
JavaScript
(サーバーサイド)

クライアント
(ブラウザ)

HTML
ライフサイクル

装飾

CSS

取得?更新

レスポンス

変更

JavaScript
(クライアントサイド)
Dojo

NotesDocument,
NotesView等

07/11/2013

jQuery

5

HTML,CSS
? いまさらですが???

? HTMLとは？
? 文書の内容の一部にマークアップによって、
文字に意味を持たせる言語
? なので、本来そこには見た目を直接定義する要素はない

07/11/2013

7

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

HTML,CSS
? HTMLの仕様をきちんと理解しましょう！
? 例えば???

? タグの種類はブロックレベル要素とインライン要素がある
? ブロックレベル要素の前後で改行される(CSSで調整可能)
? <div><p><ul><table>など

? インライン要素は行の中にある要素なので、前後では改行されない(CSS
で調整可能)
? <span><img><a>など

? インライン要素の中にブロック要素を入れることはできない
? <p>の中にはブロック要素を入れることはできない、などタグによっての制限
もある
? などなど
07/11/2013

9

HTML,CSS
? 正しいHTML、CSSのお作法を知っておきましょう！
? 仕様に沿っていないHTMLはブラウザやバージョンによって表現が異なる

? ブラウザ間互換やバージョンアップで痛い目を見る
? HTMLリファレンスは、少なくともブロックレベル要素/インライン要素について
言及しているものを参考にする

? 昔HTMLをやってたけど暫く触っていない、
なんとなくでHTMLを覚えている、
という人は再度確認しましょう！

07/11/2013

10

HTML,CSS
? CSS
? HTMLの各要素の表示位置や装飾を定義

? 通常は、HTMLとは別のCSSファイルで管理される
(各コントロールのプロパティ(style属性)で設定できるけど、
おすすめしない)

ここ↓で指定するのはおすすめしません

07/11/2013

11

HTML,CSS
CSSファイルを作成して
Xpageにリソースとして追加

07/11/2013

12

HTML,CSS
? なぜ分けるのか？

? それぞれの役割を明確にする →
構造化するという意味ももちろんあるけど???

?メンテナンスが楽！というメリットが大きい
? 同じような要素に対して一元的に管理できる

? ページ毎に再定義する必要がない

→変更に強い！
07/11/2013

13

HTML,CSS
? class の利用
? 同じ種類の要素を同じ class 名をつけておき、CSSファイルでそのクラスの
デザインを定義すると
それらのデザインを一括で変更することができる

? CSSファイルでスタイルを定義できるのは id や class だけでない

07/11/2013

14

HTML,CSS
? セレクタ
? CSSファイル内でHTMLのどの要素に対しての定義なのかを指示するモノ

? セレクタの指定に一致した全ての要素がその定義の対象となる。

07/11/2013

15

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

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

HTML,CSS
? CSS3
? CSS2.1が主流

? セレクタが増えている
? 表現が増えている
? 角丸やグラデーションも画像なしで、CSSのみで表現できる！

? でも???
? HTML5同様、ブラウザが全て実装できていない！

? ブラウザの種類、バージョンによっても差異がある！

? 使用するときは対応状況を要チェック！
07/11/2013

18

HTML,CSS
? ブラウザの開発者ツール
? タグやCSSの解析
どのタグにどのCSS定義があたっているかなどの確認ができる
JavaScriptで変更された最新のHTMLを解析できる
? JavaScriptのデバッグ

? 起動方法
? IE

(8以降),

chrome, Firefox

(Firebug)

F12 ]キーで起動！

全部[

07/11/2013

19

HTML,CSS
? テーブルレイアウト
? <table></table>を使って画面のレイアウトをデザインする技
? 単純なところがいいのですが???変更にめっぽう弱い

? 一般向けサイトでは採用されることは多く無い
主流はCSSによるレイアウト
?

素人っぽい

? 使うのなら限定的に

? レイアウトはCSSで！
? float などを利用します。
? 詳しくはWebで->[CSS レイアウト]や[CSS 段組]で検索！
? XPagesでの画面全体のレイアウトは、Extension Library の
「ApplicationLayout 」を使用するのがオススメ！
07/11/2013

20

JavaScript
? XPagesではクライアントはもちろん、サーバー側でも使用する。

→超重要！

? 他のプラットフォームでは、サーバー側はJavaやC#などのため、別な言語
が必要だけど???

? XPagesは、JavaScriptをマスターすると、どっちでも使える！

→超お得！

07/11/2013

22

JavaScript
覚えておくと便利な仕様
? オブジェクト?リテラル
? オブジェクトを直接ソースコードに記述する事ができる。
? 定数の宣言
? 関数の引数が多くなる場合にまとめることで、引数の順番に配慮する必要はない

var hoge = { name: 'ebihara', old: 35}
print(hoge.name); // ebihara

? 名前空間パターン(オブジェクトリテラルの応用)
? メソッドをグループ化することができる。メソッド名カブりの心配がなくなる。
var myNameSapce = {}; //名前空間の宣言
myNameSapce.getName = function(){
//メソッドの内容
};
07/11/2013

23

JavaScript
?JavaScriptって???
? クラスを作れない？
? クラスっぽいものが作れます！(コンストラクタ関数)

? クラスの継承できない？
? prototypeをつかえば継承できます！

07/11/2013

24

JavaScript
?より高度な使用方法については、私のブログで紹
介しています。ぜひ見てやって下さい！

XPagesで行こう！(IBM developerWorks内)
http://goo.gl/TKOnf0

07/11/2013

25

Dojo と jQuery

07/11/2013

26

Dojo と jQuery
? クライアントのHTMLを操作するのに、既存のオブジェクトやメソッ
ドだけでは不便

? Dojo や jQueryといったJavaScriptライブラリを利用するの
が便利
? ブラウザ間の差異を吸収してくれる
? 一般的に、これらを使用しないWebアプリはない、といってもいいく
らい

07/11/2013

27

Dojo と jQuery
? Dojo
? 利点
? XPagesに組み込まれていて、何もしなくても利用可能
? jQueryに比べ、動作が早い場合が多い

? 欠点
? 情報が少なく、英語が多い（日本語の記事は殆ど無い???）
? “dojo”で検索したら“道場”が検索される
（Webでの検索が地味にめんどくさい）

2013/11/7

28

Dojo と jQuery
? jQuery
? 利点
? 多くのWebアプリで利用されており、デファクト?スタンダードといって良い
? 情報が多く、日本語の書籍も多数ある
? Dojoより使いやすい（個人の感想です）

? 欠点
? DBの設計に追加する必要がある
? Dojoと混在することになる
競合による不具合を発生することはないが、jQueryを読み込む分、ロードに
時間がかかる

2013/11/7

29

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

30

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

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

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

Dojo と jQuery
? jQueryをNotesDBに組み込む

XPagesで行こう！
連載：ちょっとディープなXPages コラム2

http://goo.gl/XJMfAp

07/11/2013

34


2013/11/7

35

? ライフサイクルとは???
? クライアントからサーバーにリクエストを送り、サーバーが決まった順番で処理
をしてHTMLを生成して、クライアントに返すまでの一連の流れ

? 理解しておく必要がある理由
? サーバーで処理すべきか、クライアントJavaScriptのみで処理できるのか、
その判断の重要な要素となる
? 処理の内容から、それをどこに記述するのが最も好ましいのかを判断できる
? 不具合があった時にどこに問題があるのか、切り分けができる

2013/11/7

36

? ページを開いた時

$式???ページ読み込み時に計算
#式???動的に計算
HTTPリクエスト
(GET)

beforPageLoad
後ほど説明します

(ページ内の$式)
afterPageLoad
afterRestoreView
beforRenderResponse

後ほど説明します
HTTPレスポンス
07/11/2013

(ページ内の#式?HTMLの生成)

afterRenderResponse
37

? 開いた後にサーバーイベントのあるボタンなどを押した時(ポストバック)
ボタンのイベントで「すべて更新」でも「部分更新」でも違いはありません。*1
(クライアントイベント処理)

HTTPリクエスト
(POST)

クライアントのonClickなどの処理

beforPageLoad
(ページ内の$式)

afterPageLoad
afterRestoreView
サーバーサイドのonClickなどの処理

(コントロールイベント処理)
beforRenderResponse
(ページ内の#式?HTMLの生成)

HTTPレスポンス

afterRenderResponse

07/11/2013

*1 「部分実行モードの設定」をしている場合は異なります。

38

? ＃式と $式

? コントロールのプロパティで「値の計算」とした時の処理タイミング
? $式 ??? ページを開いた時のみ実行
? #式 ??? ページを開いと時とポストバック時に実行

07/11/2013

39

? ページイベント
? ページを開いた時の初期処理
? beforPageLoad または afterPageLoad
? 文書のフィールドに初期値を与えるなどの処理
? beforPageLoadでは、サーバーコントロールのオブジェクトがまだないので注意

? 「開いた時」というのは新しくブラウザを起動したときではなく、URLの入力、他
のページのリンク、content.redirectToPage()等で遷移してきた時などです。

? イベントの度に実行する処理
? beforRenderResponse
? フィールド値の変更により、別な値を変更したり、表示/非表示を切り替えるなどの
処理
? コントロール内の#式でも良いけど、処理をまとめて書きたいときに便利。

複雑なことをしない限りは、これだけでOK
07/11/2013

40

デモ
? 最近開発したXPagesアプリケーションをご紹介します

07/11/2013

41

最後に
? XPagesは、これまでNotesを中心に開発してきた人には、少々
難しいかもしれません。
? しかし、新しい技術を身につけるチャンスです。

? これを機会に新たなステージにジャンプアップしましょう！

07/11/2013

42

ご視聴、ありがとうございました。

2013/11/7

43

07/11/2013

Version: [###] Classification: Internal Owner: [Insert name]

44

狠狠撸

XPages Day 2013 [B-3] XPages開発を始める Notes技術者のためのWeb技術概論

More Related Content

XPages Day 2013 [B-3] XPages開発を始める Notes技術者のためのWeb技術概論