Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

4,516 views

Published on

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

Published in: Technology

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

  1. 1. XPagesDay 2013 【B-3】 XPages開発を始める Notes技術者のための Web技術概論 2013年11月7日 海老原 賢次 リコーITソリューションズ株式会社 07/11/2013 1
  2. 2. 自己紹介  海老原 賢次  リコーITソリューションズ株式会社  XPagesをはじめ、Webアプリ開発を多数手がけてます XPagesは2009年から取り組んでいます  鹿児島の事業所からお送りしております  最近降灰がひどいです 桜島 今年 775回 の爆発 (11月7日時点) 07/11/2013 2
  3. 3. 内容  XPagesを本格的に作成を始めると、どうしてもWeb関連の知識 が必要になります  もちろん、ここで全てを紹介できないのですが、開発や学習の足が かりになれば幸いです  質問がございましたら、私のブログに専用トピックを作成しましたの で、こちらへコメントをお寄せ下さい XPagesで行こう!(IBM developerWorks内) http://goo.gl/fS44AH 07/11/2013 3
  4. 4. 内容 HTML,CSS JavaScript Dojo と jQuery ライフサイクル 07/11/2013 4
  5. 5. XPages技術俯瞰図 サーバー リクエスト ページ・コントロール イベント処理 JavaScript (サーバーサイド) クライアント (ブラウザ) HTML ライフサイクル 装飾 CSS 取得・更新 レスポンス 変更 JavaScript (クライアントサイド) Dojo NotesDocument, NotesView等 07/11/2013 jQuery 5
  6. 6. HTML,CSS 2013/11/7 6
  7. 7. HTML,CSS  いまさらですが・・・  HTMLとは? ­ 文書の内容の一部にマークアップによって、 文字に意味を持たせる言語 ­ なので、本来そこには見た目を直接定義する要素はない 07/11/2013 7
  8. 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. 9. HTML,CSS  HTMLの仕様をきちんと理解しましょう! ­ 例えば・・・ ­ タグの種類はブロックレベル要素とインライン要素がある ­ ブロックレベル要素の前後で改行される(CSSで調整可能) • <div><p><ul><table>など ­ インライン要素は行の中にある要素なので、前後では改行されない(CSS で調整可能) • <span><img><a>など ­ インライン要素の中にブロック要素を入れることはできない ­ <p>の中にはブロック要素を入れることはできない、などタグによっての制限 もある ­ などなど 07/11/2013 9
  10. 10. HTML,CSS  正しいHTML、CSSのお作法を知っておきましょう! ­ 仕様に沿っていないHTMLはブラウザやバージョンによって表現が異なる ­ ブラウザ間互換やバージョンアップで痛い目を見る ­ HTMLリファレンスは、少なくともブロックレベル要素/インライン要素について 言及しているものを参考にする  昔HTMLをやってたけど暫く触っていない、 なんとなくでHTMLを覚えている、 という人は再度確認しましょう! 07/11/2013 10
  11. 11. HTML,CSS  CSS ­ HTMLの各要素の表示位置や装飾を定義 ­ 通常は、HTMLとは別のCSSファイルで管理される (各コントロールのプロパティ(style属性)で設定できるけど、 おすすめしない) ここ↓で指定するのはおすすめしません 07/11/2013 11
  12. 12. HTML,CSS CSSファイルを作成して Xpageにリソースとして追加 07/11/2013 12
  13. 13. HTML,CSS  なぜ分けるのか?  それぞれの役割を明確にする → 構造化するという意味ももちろんあるけど・・・ メンテナンスが楽!というメリットが大きい ­ 同じような要素に対して一元的に管理できる ­ ページ毎に再定義する必要がない →変更に強い! 07/11/2013 13
  14. 14. HTML,CSS  class の利用 ­ 同じ種類の要素を同じ class 名をつけておき、CSSファイルでそのクラスの デザインを定義すると それらのデザインを一括で変更することができる  CSSファイルでスタイルを定義できるのは id や class だけでない 07/11/2013 14
  15. 15. HTML,CSS  セレクタ ­ CSSファイル内でHTMLのどの要素に対しての定義なのかを指示するモノ ­ セレクタの指定に一致した全ての要素がその定義の対象となる。 07/11/2013 15
  16. 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. 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. 18. HTML,CSS  CSS3 ­ CSS2.1が主流 ­ セレクタが増えている ­ 表現が増えている • 角丸やグラデーションも画像なしで、CSSのみで表現できる! ­ でも・・・ ­ HTML5同様、ブラウザが全て実装できていない! ­ ブラウザの種類、バージョンによっても差異がある! ­ 使用するときは対応状況を要チェック! 07/11/2013 18
  19. 19. HTML,CSS  ブラウザの開発者ツール ­ タグやCSSの解析 どのタグにどのCSS定義があたっているかなどの確認ができる JavaScriptで変更された最新のHTMLを解析できる ­ JavaScriptのデバッグ  起動方法 ­ IE (8以降), chrome, Firefox (Firebug) F12 ]キーで起動! 全部[ 07/11/2013 19
  20. 20. HTML,CSS  テーブルレイアウト ­ <table></table>を使って画面のレイアウトをデザインする技 ­ 単純なところがいいのですが・・・変更にめっぽう弱い ­ 一般向けサイトでは採用されることは多く無い 主流はCSSによるレイアウト ­ 素人っぽい ­ 使うのなら限定的に  レイアウトはCSSで! ­ float などを利用します。 ­ 詳しくはWebで->[CSS レイアウト]や[CSS 段組]で検索! ­ XPagesでの画面全体のレイアウトは、Extension Library の 「ApplicationLayout 」を使用するのがオススメ! 07/11/2013 20
  21. 21. JavaScript 2013/11/7 21
  22. 22. JavaScript  XPagesではクライアントはもちろん、サーバー側でも使用する。 →超重要! ­ 他のプラットフォームでは、サーバー側はJavaやC#などのため、別な言語 が必要だけど・・・  XPagesは、JavaScriptをマスターすると、どっちでも使える! →超お得! 07/11/2013 22
  23. 23. JavaScript 覚えておくと便利な仕様  オブジェクト・リテラル ­ オブジェクトを直接ソースコードに記述する事ができる。 ­ 定数の宣言 ­ 関数の引数が多くなる場合にまとめることで、引数の順番に配慮する必要はない var hoge = { name: 'ebihara', old: 35} print(hoge.name); // ebihara  名前空間パターン(オブジェクトリテラルの応用) ­ メソッドをグループ化することができる。メソッド名カブりの心配がなくなる。 var myNameSapce = {}; //名前空間の宣言 myNameSapce.getName = function(){ //メソッドの内容 }; 07/11/2013 23
  24. 24. JavaScript JavaScriptって・・・ ­ クラスを作れない? • クラスっぽいものが作れます!(コンストラクタ関数) ­ クラスの継承できない? • prototypeをつかえば継承できます! 07/11/2013 24
  25. 25. JavaScript より高度な使用方法については、私のブログで紹 介しています。ぜひ見てやって下さい! XPagesで行こう!(IBM developerWorks内) http://goo.gl/TKOnf0 07/11/2013 25
  26. 26. Dojo と jQuery 07/11/2013 26
  27. 27. Dojo と jQuery  クライアントのHTMLを操作するのに、既存のオブジェクトやメソッ ドだけでは不便  Dojo や jQueryといったJavaScriptライブラリを利用するの が便利  ブラウザ間の差異を吸収してくれる  一般的に、これらを使用しないWebアプリはない、といってもいいく らい 07/11/2013 27
  28. 28. Dojo と jQuery  Dojo ­ 利点 • XPagesに組み込まれていて、何もしなくても利用可能 • jQueryに比べ、動作が早い場合が多い ­ 欠点 • 情報が少なく、英語が多い(日本語の記事は殆ど無い・・・) • “dojo”で検索したら“道場”が検索される (Webでの検索が地味にめんどくさい) 2013/11/7 28
  29. 29. Dojo と jQuery  jQuery ­ 利点 • 多くのWebアプリで利用されており、デファクト・スタンダードといって良い • 情報が多く、日本語の書籍も多数ある • Dojoより使いやすい(個人の感想です) ­ 欠点 • DBの設計に追加する必要がある • Dojoと混在することになる 競合による不具合を発生することはないが、jQueryを読み込む分、ロードに 時間がかかる 2013/11/7 29
  30. 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. 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. 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. 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. 34. Dojo と jQuery  jQueryをNotesDBに組み込む XPagesで行こう! 連載:ちょっとディープなXPages コラム2 http://goo.gl/XJMfAp 07/11/2013 34
  35. 35. ライフサイクル 2013/11/7 35
  36. 36. ライフサイクル  ライフサイクルとは・・・ ­ クライアントからサーバーにリクエストを送り、サーバーが決まった順番で処理 をしてHTMLを生成して、クライアントに返すまでの一連の流れ  理解しておく必要がある理由 ­ サーバーで処理すべきか、クライアントJavaScriptのみで処理できるのか、 その判断の重要な要素となる ­ 処理の内容から、それをどこに記述するのが最も好ましいのかを判断できる ­ 不具合があった時にどこに問題があるのか、切り分けができる 2013/11/7 36
  37. 37. ライフサイクル  ページを開いた時 $式・・・ページ読み込み時に計算 #式・・・動的に計算 HTTPリクエスト (GET) beforPageLoad 後ほど説明します (ページ内の$式) afterPageLoad afterRestoreView beforRenderResponse 後ほど説明します HTTPレスポンス 07/11/2013 (ページ内の#式・HTMLの生成) afterRenderResponse 37
  38. 38. ライフサイクル  開いた後にサーバーイベントのあるボタンなどを押した時(ポストバック) ボタンのイベントで「すべて更新」でも「部分更新」でも違いはありません。*1 (クライアントイベント処理) HTTPリクエスト (POST) クライアントのonClickなどの処理 beforPageLoad (ページ内の$式) afterPageLoad afterRestoreView サーバーサイドのonClickなどの処理 (コントロールイベント処理) beforRenderResponse (ページ内の#式・HTMLの生成) HTTPレスポンス afterRenderResponse 07/11/2013 *1 「部分実行モードの設定」をしている場合は異なります。 38
  39. 39. ライフサイクル  #式 と $式 ­ コントロールのプロパティで「値の計算」とした時の処理タイミング ­ $式 ・・・ ページを開いた時のみ実行 ­ #式 ・・・ ページを開いと時とポストバック時に実行 07/11/2013 39
  40. 40. ライフサイクル  ページイベント ­ ページを開いた時の初期処理 • beforPageLoad または afterPageLoad ­ 文書のフィールドに初期値を与えるなどの処理 ­ beforPageLoadでは、サーバーコントロールのオブジェクトがまだないので注意 • 「開いた時」というのは新しくブラウザを起動したときではなく、URLの入力、他 のページのリンク、content.redirectToPage()等で遷移してきた時などです。 ­ イベントの度に実行する処理 • beforRenderResponse ­ フィールド値の変更により、別な値を変更したり、表示/非表示を切り替えるなどの 処理 ­ コントロール内の#式でも良いけど、処理をまとめて書きたいときに便利。 複雑なことをしない限りは、これだけでOK 07/11/2013 40
  41. 41. デモ  最近開発したXPagesアプリケーションをご紹介します 07/11/2013 41
  42. 42. 最後に  XPagesは、これまでNotesを中心に開発してきた人には、少々 難しいかもしれません。  しかし、新しい技術を身につけるチャンスです。  これを機会に新たなステージにジャンプアップしましょう! 07/11/2013 42
  43. 43. ご視聴、ありがとうございました。 2013/11/7 43
  44. 44. 07/11/2013 Version: [###] Classification: Internal Owner: [Insert name] 44

×