![Page 1: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/1.jpg)
みんな大好き
@式とBootstrapで作る
簡単CoolなXPagesアプリ
2015.11.18
Tetsuji Hayashi
2015
1
![Page 2: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/2.jpg)
お断り
2
![Page 3: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/3.jpg)
お断り
• @式の知識は最大限利用しますが、@式だけでXPagesアプリが作れるわけではありません。
• Notesクライアント用アプリやVB開発のように、WYSIWYG的に画面が開発出来るわけではありません。
• XPages開発時は設計タブは使いません。ソースタブオンリーです。
ソースタブの使い方を覚えれば どんなWebライブラリが出てきても適用出来ます
Notesクライアントアプリ開発は 簡単すぎました!
3
![Page 4: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/4.jpg)
XPages開発やってますか?
4
![Page 5: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/5.jpg)
Notes
Client
Domino
Server
XPagesはいつ使う?
Dominoサーバー&Notesクライアントのみの構成
どうしてもWeb化する理由、ビジョンがないなら
Notesアプリで良いんじゃね?(工数は圧倒的に低)
Standardクライアントが入っているなら、今まで実現できなかった機能をXPages
で実現するのはあり!!
5
![Page 6: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/6.jpg)
SmartPhone、
Tablet
Notes
Client
Domino
Server
XPagesはいつ使う?
WiFi接続やインターネットへの接続がある
PC、タブレット
Internet
業務フローを再構築して
XPagesで新しい価値を創造しよう!! 6
![Page 7: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/7.jpg)
Webアプリのメリット
• クライアントにNotesをインストールする必要がない
• PC、スマホ、タブレットなど様々なデバイスから使える
• UI、UXデザインの自由度が高い
• フリーのライブラリなど最新Webトレンドを採用可能
7
![Page 8: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/8.jpg)
Webアプリのデメリット
• HTML5対応と言ってもブラウザによって動作が違う
– マルチスクリーン対応とかやるとスゲー工数がかかる
– それが利益の柱である企業は問題ない(社運をかけてやるしかない)
• スマートフォン、タブレットを想定するのであれば、回線速度、端末のCPUパワーを考慮する必要がある
• SSLなどセキュリティの仕様が変わるので対応を余儀なくされる
– SHA-2なんかはIBMの実装が遅い(IISではIIS6.0(2003年)対応済み、Dominoは8.5.3(2012年)でも未対応)
– 「Notesは大丈夫!」と言う割に、割り当てている人的リソースが足りないんじゃないですか?IBMさん
• Edge(Windows10)はまだまだバグが多く落ちる
ブラウザアプリをやるなら
開発し続ける、保守し続ける覚悟が必要!! 8
![Page 9: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/9.jpg)
Notesアプリのメリット
• バージョンが特定されている
– 勝手にバージョンアップされたりしない
• 開発がメッチャ簡単
– おかしな動作をすることもあるが、デバッガーも付いているしWebアプリ開発よりすごく楽
– テーブル設計の知識もSQLの知識も要らない
– 設計置換すれば新しい設計に置き換え可能
• フォーム、ビュー、ナビゲーターという画面構成が決まっている
– 1からデザインしなくて良いので、ゴリゴリの開発者じゃなくてもデザインできる
– どのアプリも似たデザインになるので、操作を1から教育しなくて良い
• ユーザー認証がある
– Webアプリだとユーザー認証から作る必要がある
– ユーザーIDとパスワードが乱立する
• アプリケーションの入口(共通のメニュー、ワークスペース)がある
– 機能単位でリリース可能
10年間塩漬けしてても、まだ使える 9
![Page 10: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/10.jpg)
XPages開発のメリット
• 認証システムが既にある
• テーブル設計の知識、SQLの知識が不要
• 既存のNotes技術(@式、LotusScriptなど)を利用可能
• 編集モードと参照モードが元からある
• アプリケーションの設計をNSFファイルとして管理可能
• フリーのライブラリなど流行のWeb技術を導入可能
• 開発サンプル、バックエンドロジックをフォームとビューで作れる
• 部分更新(Ajax的動作)が圧倒的に容易に実現可能
• テストデータはNotesクライアントから登録可能
Notes開発者なら
XPagesを使わないという選択はない!!
1からPHPや.NETを学んで作っても良いけど、どんな技術も何でも簡単に実現してく
れるわけではない
10
Notes上でテスト実装してから、
XPagesへ移植するのが効率的
![Page 11: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/11.jpg)
他人の芝生は青い??? 他人の旦那は優しい?他人の奥さんの方がきれい?
• 他のプラットフォームの方がもっと楽に、凄いアプリケーションを作れるんじゃないか?
• 自分は取り残されているんじゃないか?
• Notesをやり続けていることに漠然とした不安
不安だったら他の技術をガッツリ学んでみたら?
各社抱えている課題はそれぞれなので 自分で決めましょう!
他を知れば、Notesの方が優れている点
他の技術の方が優れている点が見えてきます
11
![Page 12: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/12.jpg)
ところで・・・
超高速開発ってご存じですか?
12
![Page 13: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/13.jpg)
超高速開発
Toolの範囲
超高速開発について私が思うこと
簡易な
入力画面
簡易な
一覧画面
簡易な
CSV出力
Notesなら
25年前から実現できています
サバクラ構成だけど・・ (ブラウザにする意味ある?)
データ
ベース
13
![Page 14: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/14.jpg)
今やるべきこと 今やるべきこと 超高速開発
Toolの範囲
超高速開発について私が思うこと
データ
ベース
簡易な
入力画面
簡易な
一覧画面
簡易な
CSV出力
新しい業務フロー
新しい業務ロジック
直感的なUI
創造性を高
めるUX
今求められているのはコスト削減ではなく
新しい価値の創造 14
![Page 15: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/15.jpg)
組織の仕組みの再設計、必要なプラットフォームの構築
超高速開発について私が思うこと
データ
ベース
簡易な
入力画面
簡易な
一覧画面
簡易な
CSV出力
新しい業務フロー
新しい業務ロジック
直感的なUI
創造性を高
めるUX
15
![Page 16: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/16.jpg)
超高速開発について私が思うこと
仮に超高速開発ツールの導入がうまくいって、どんどんWebアプリを量産できるようになったらどうなるか?
次に来るのは
アプリケーションの乱立
開発効率が上がるとどこでも同じ問題が起きる Notes≒悪、Web≒善と言うことではない
16
![Page 17: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/17.jpg)
Bootstrapって何がおいしいの?
17
![Page 18: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/18.jpg)
どんなアプリが作れる?
• フォームサンプル
システム名
タブレットにも対応できるデザイン 18
![Page 19: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/19.jpg)
どんなアプリが作れる?
• ビューサンプル
システム名
年、月を選択する
選択した月の報告書件数(提出状況)が表示される
報告書一覧
この範囲が部分更新
19
![Page 20: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/20.jpg)
Bootstrap概要
【概要】
• Webアプリケーションを作りやすくするためのJavaScriptフレームワーク
• レスポンシブデザインを作りやすくする段組
• Coolなデザインを作る入力コントロールやボタン
【サポート環境】
・Chrome、Safari、Firefox、Operaの最新版
・IE8以降
【ライセンス】
・MITライセンスで商用利用可能
20
![Page 21: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/21.jpg)
Bootstrapのメリット
• 入力コンポーネントのサイズが大きいので、タブレット対応がやりやすい
• 標準コントロールよりデザインがわかりやすい
• jQueryMobileはスマホに特化しているが、Bootstrapなら+αすれば3スクリーン対応もやりやすい
• 多くのサイトで使われているので情報が多い(追加コンポーネント、カスタマイズ情報もある)
XPages標準
Bootstrap
21
![Page 22: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/22.jpg)
Bootstrapのデメリット
• スマホを想定した入力用コンポーネントが少ない
– スマホだけを対象にするならjQueryMobileの方が使いやすいと思います
– 例えばチェックボックスとか
22
![Page 23: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/23.jpg)
これからBootstrapを始める方へ
• まずはドットインストールか?書籍を1冊買って、PureHTMLで打ち込みをして下さい
Webサイト見て、いきなりXPagesに取り込んではダメ
まずは基礎固めから
ドットインストール http://dotinstall.com/
UIまで手の回らないプログラマのための
Bootstrap 3実用ガイド 翔泳社
23
![Page 24: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/24.jpg)
XPages with Bootstrapで気をつけること
• 段組のレイアウトなどほとんどのタグ、ClassはHTMLをXPagesのソースタブにそのまま書けば動きます
• 気をつけないといけないのは入力コンポーネントをどうやってBootstrap対応させるか?
• そのために大切なのは、やっぱりコントロールがどのHTMLになるか?
コアコントロール 出力されるHTMLタグ 備考
編集ボックス <input type="text“>
リッチテキスト <textarea rows="1" cols="1"> CKEditorを使用
複数行編集ボックス <textarea>
ボタン <button type="button">
リストボックス <select size="3">
コンボボックス <select size="1">
チェックボックス <input type="checkbox"> 選択肢は一つだけ
ラジオボタン <input type="radio"> 〃
チェックボックス グループ
<fieldset> <input type="checkbox">
複数の選択肢を設定できる 前後に<td>タグが付く
ラジオボタングループ <fieldset><input type="radio“> 〃 24
![Page 25: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/25.jpg)
Chrome開発ツールって使ってますか?
• Chromeの開発ツールは必須
• 知らない人はドットインストールへGo!!
Chrome Developer Tools入門 (全10回)
http://dotinstall.com/lessons/basic_chrome_dev_v2
25
![Page 26: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/26.jpg)
前準備
26
![Page 27: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/27.jpg)
【サーバー環境】
【クライアント環境】
開発環境・動作環境
環境 バージョン 備考
Domino 9.0.1 FP2
8.5.3 FP6
jQuery 2.1.4 IE9を以降サポート
Bootstrap 3.3.5
Bootstrap-datepicker 1.5.0
環境 バージョン 備考
Windows 10
IE 11
Chrome 46
27
![Page 28: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/28.jpg)
データベースプロパティの設定
• 「XPages実行時エラーページを生成」は必ずチェック
• 「エンコード」はUTF-8、「HTML doctype」はHTML5で良いんじゃないかな
28
![Page 29: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/29.jpg)
データベースプロパティの設定
• アプリケーションのテーマは自分が作るアプリの仕様によって選択
アプリケーションテーマ:<empty>の場合
アプリケーションテーマ:サーバーのでフォルト(Web標準)の場合
サーバーのでフォルトを使うとXPages標準のCSSも適用される
ブラウザの開発ツールを使って影響範囲を見極める 29
![Page 30: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/30.jpg)
jQueryのダウンロードとインポート
1. https://jquery.com/downloadからjQuery2.1.4圧縮版(jquery-2.1.4.min.js)をダウンロード
2. 対象DBを開き、ファイルリソースにインポートを行う。インポート後ファイル名の先頭に”js/”を付加する
ファイルパス インポート先 インポート後の名前
jquery-2.1.4.min.js ファイルリソース js/jquery-2.1.4.min.js
30
![Page 31: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/31.jpg)
Bootstrapのダウンロードとインポート
1. http://getbootstrap.com/getting-started/からbootstrap-3.3.5-dist.zipをダウンロードする
2. ダウンロードしたファイルを解凍し、それぞれ下記の場所にインポートする(次ページ参照)
拡張子.mapファイルはCSSのソースマップなので不要です bootstrap-theme.cssはフラットデザインを使わない場合のスタイルシートです 31
![Page 32: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/32.jpg)
Bootstrapのダウンロードとインポート
• Bootstrapインポートファイル一覧
ファイルパス インポート先 インポート後の名前
js/bootstrap.min.js ファイルリソース js/bootstrap.min.js
fonts/glyphicons-halflings-regular.eot イメージリソース fonts/glyphicons-halflings-regular.eot
fonts/glyphicons-halflings-regular.svg イメージリソース fonts/glyphicons-halflings-regular.svg
fonts/glyphicons-halflings-regular.ttf イメージリソース fonts/glyphicons-halflings-regular.ttf
fonts/glyphicons-halflings-regular.woff イメージリソース fonts/glyphicons-halflings-regular.woff
fonts/glyphicons-halflings-regular.woff2 イメージリソース fonts/glyphicons-halflings-regular.woff2
css/bootstrap.min.css スタイルシート css/bootstrap.min.css
インポート後の名前の先頭にフォルダ名を付けるのはファイルリソースの中をエレガントに保つためです フォルダ名を付けないとファイル名順になるのでメンテナンス効率が下がります 32
![Page 33: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/33.jpg)
Bootstrap-datepickerの
ダウンロードとインポート
1. https://eternicode.github.io/bootstrap-datepicker/からbootstrap-datepicker-
1.5.0-dist.zipをダウンロード
2. ダウンロードしたファイルを解凍し、それぞれ下記の場所にインポートする
ファイルパス インポート先 インポート後の名前
js/bootstrap-datepicker.min.js ファイルリソース js/bootstrap-datepicker.min.js
locales/bootstrap-datepicker.ja.min.js ファイルリソース locales/bootstrap-datepicker.ja.min.js
css/bootstrap-datepicker.min.css スタイルシート css/bootstrap-datepicker.min.css
33
![Page 34: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/34.jpg)
スライムがあらわれた イメージリソースにファイルが出てこない
Copyright SQUARE ENIX. 34
![Page 35: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/35.jpg)
イメージリソースにファイルが出てこない
• イメージリソースのインポートは「GIF、JPEG、BMP」の拡張子を想定しているので、対応していない拡張子をインポートするにはファイル名に「*」を入力し、開くボタンを押す
35
![Page 36: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/36.jpg)
全部インポートするとこんな感じ
• ファイルリソース
• スタイルシート
• イメージリソース
36
![Page 37: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/37.jpg)
XPagesへの組み込みと動作確認
1. 新規XPagesを作成し、ソースタブに下記ソースを書き込む
jQuery、Bootstrapの読み込み
テスト用コード
ソース解説
37
![Page 38: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/38.jpg)
リソースの追加機能でスラッシュ付きのスタイルシートを追加する・・・
• リソースの追加機能でスラッシュ付きのスタイルシートを追加すると・・・
こうなる
(゜Д゜)!!!
38
![Page 39: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/39.jpg)
スライムなかまをよびよせた リソースの追加機能でスラッシュ付きのCSSファイルを読み込むとバグる
Copyright SQUARE ENIX. 39
![Page 40: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/40.jpg)
リソースの追加機能でスラッシュ付きのスタイルシートを追加するとバグる
• リソースの追加機能でスラッシュ付きのスタイルシートを追加すると・・・
こうなる
ソースタブに直接書いた方が早いというのが おわかりいただけただろうか?
40
![Page 41: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/41.jpg)
XPagesへの組み込みと動作確認
• こうなる
勇者はスライムを倒した Bootstrapを動かすことができた!!
41
![Page 42: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/42.jpg)
でも
本気で使うならオリジナルのCSSも
読み込みたいですよね
42
![Page 43: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/43.jpg)
XPagesへの組み込みと動作確認
• やっぱりオリジナルのCSSも組み込みたい
※original.cssには文字が赤くなるclassを定義しています
オリジナルのCSSを追加
追加したClassを設定
43
![Page 44: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/44.jpg)
XPagesへの組み込みと動作確認
• こうなる
(゜Д゜)!!
44
![Page 45: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/45.jpg)
スライムがあらわれた Bootstrapのglyphicon(アイコン)が表示されない!!
Copyright SQUARE ENIX. 45
![Page 46: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/46.jpg)
• Chromeの開発ツールで見ると・・・
• 仕方がないのでオリジナルのCSSは通常のHTMLとして読み込む
オリジナルのCSSを読み込むとglyphiconが表示されない
46
![Page 47: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/47.jpg)
XPagesへの組み込みと動作確認
• こうなる
勇者はスライムを倒した オリジナルのCSSを読み込むことができた!!
47
![Page 48: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/48.jpg)
でも
アプリケーションとして公開する時には
プロパティで「ブラウザで開いた時」の
設定をしますよね
48
![Page 49: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/49.jpg)
• アプリケーションのプロパティで「ブラウザで開いた時」に「指定されたXPagesを開く」を設定
XPagesへの組み込みと動作確認
49
![Page 50: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/50.jpg)
XPagesへの組み込みと動作確認
• 「http://xpages/bootstrap5.nsf/」で開く
• 「http://xpages/bootstrap5.nsf」で開く
(゜Д゜)!!
50
![Page 51: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/51.jpg)
スライムがあらわれた オリジナルCSSが適用されない・・・・
Copyright SQUARE ENIX. 51
![Page 52: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/52.jpg)
• Chromeの開発ツールで見ると・・・
• 仕方がないのでリダイレクト用XPages(redirect.xsp)を作成し、onClientLoadイベントにシンプルアクションの追加を行い、「指定されたXPageを開く」に設定する
指定したXPageを開くを使うとスラッシュで相対パスの基点が変わる
52
![Page 53: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/53.jpg)
XPagesへの組み込みと動作確認
• やっと完成!!!
53
リダイレクトされる
![Page 54: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/54.jpg)
勇者はレベルアップがあがった!! Bootstrapのつるぎを手に入れた
Copyright SQUARE ENIX. 54
![Page 55: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/55.jpg)
BootstrapでXPagesアプリを作るひな形
• <body>タグの内側にアプリケーション用のタグを追加していきます
←この部分にコアコントロール、コンテナコントロールをドラッグ&ドロップで配置していく
55
![Page 56: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/56.jpg)
XPages with Bootstrapの実装
56
![Page 57: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/57.jpg)
ビューを作る①
1. 元となるビュー
2. ひな形のXPagesにデータソースとなるビューを指定する
3. <body>タグの内側にデータソースからビューをドラッグ&ドロップする
ソースタブにドラッグ&ドロップできない時は一旦設計タブにドロップし、ソースタブに移動 57
![Page 58: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/58.jpg)
ビューを作る②
4. 幅を100%に設定(オリジナルのCSSにclassを定義しても良い)
5. すべてのプロパティ-スタイル-dataTableStyleClassに「table table-bordered
table-striped」を指定する
6. 完成
58
![Page 59: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/59.jpg)
テキストフィールドを作る①
1. ひな形のXPagesにデータソースとなるフォームを指定する
2. 計算結果フィールドやフィールドのデフォルト値を使う場合は「フォーム検証の実行」を選択する
3. <body>タグの内側に編集ボックスコントロールをドラッグ&ドロップで配置する
通常のBootstrapは画面幅いっぱいになるのでcontainerクラスでくくっています 59
![Page 60: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/60.jpg)
テキストフィールドを作る②
4. データバインディングでフィールドを割り当てる
5. すべてのプロパティ-スタイル-styleClassに「form-control」を指定する
6. 完成
60
![Page 61: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/61.jpg)
1. <body>タグの内側にボタンコントロールをドラッグ&ドロップで配置する
2. 名前とラベルを設定する
3. クリックイベントにアクションを設定する
ボタンを作る①
61
![Page 62: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/62.jpg)
4. すべてのプロパティ-スタイル-styleClassに「btn btn-primary」を指定する
5. 完成!!
ボタンを作る②
62
![Page 63: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/63.jpg)
日付フィールド①
1. Bootstrap-datepickerを呼び出すための関数を定義するスクリプトライブラリを作る
2. jQueryを使って、 Bootstrap-datepickerを呼び出す関数を定義
63
![Page 64: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/64.jpg)
日付フィールド②
3. ひな形のXPagesにBootstrap-datepickerのJavaScript、CSS、追加したスクリプトライブラリを追加する
4. <body>タグの内側に編集ボックスコントロールをドラッグ&ドロップで配置する
5. データバインディングでフィールドを割り当てる
64
![Page 65: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/65.jpg)
日付フィールド③
4. すべてのプロパティ-スタイル-styleClassに「form-control org_datepicker」を指定する
6. 完成!!!
65
![Page 66: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/66.jpg)
ところで入力チェックは
フロントエンド(ブラウザ)で行っていますか?
バックエンド(サーバー)で行っていますか?
66
![Page 67: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/67.jpg)
入力チェック
• 必須入力などの簡単なチェックなら「妥当性検査」を使って実現できます
が
そんな簡単なチェックだけで終わるアプリはありません!
私の場合、下記の理由でフロントエンドでの入力チェックは行いません
・JavaScript(jQuery)でゴリゴリ書くのが面倒
・チェックロジックがユーザー側に丸見え(セキュアではない)
・開発効率が悪い(コードが長くなる)
Notes開発者なら
@式を使おう 67
![Page 68: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/68.jpg)
入力チェック
1. 入力エラーを受け取るためのフィールドをフォーム上に作成
2. 計算結果フィールドコントロールをドラッグ&ドロップで配置する
3. データバインディングでフィールドを割り当てる
4. コンテンツの種類を「HTML」に変更 重要
68
![Page 69: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/69.jpg)
入力チェック
5. スクリプトライブラリにServerSideJavaScript(以後SSJS)を追加
6. 作成したSSJSをリソースとして追加
画面固有のSSJSは画面ごとに作ります 画面ごとにSSJSを作るのは、XPagesのソースをクリーンに保ち、保守性を上げるためです ※共通で使う関数などはssjs_common.jssなどを作ります 69
![Page 70: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/70.jpg)
入力チェック
7. 保存ボタンで実行される関数を記述 @式でエラーチェックを行い、エラーがある場合はエラーメッセージ用フィールドに値を書き込む
8. 保存ボタンで作成した関数を呼び出す
try catchは書いた方がデバッグが断然早いです
ここが@式になる
エラーがある場合
エラーがない場合
70
![Page 71: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/71.jpg)
入力チェック
9. 完成!!!
71
![Page 72: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/72.jpg)
排他制御はどうやってます???
72
![Page 73: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/73.jpg)
排他制御
• 排他ロック用文書を作り、排他ロック文書が自分の作成した物でない場合、編集モードへの移行を禁止する
文書A ロック文書A
①編集ボタンを押す
②文書Aの文書IDとユーザーAのIDを持ったロック文書を作る
ユーザーA ユーザーB
文書A
③編集ボタンを押す
④文書Aの文書IDとユーザーBのIDからロック文書を検索
⑤ロック文書が自分の物ではないのでエラーを表示
⑥保存ボタンを押す
⑦文書IDとユーザーIDからロック文書を検索 文書Aを保存し、ロック文書Aを削除
73
![Page 74: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/74.jpg)
排他制御
• ロックされている場合の動作イメージ
• 排他制御は@式では実現できないと思います(できた人がいたら来年発表をお願いしますm(_ _)m)
74
ロックしている文書で 編集ボタンを押すと
![Page 75: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/75.jpg)
排他制御
• ロック用フォーム
• ロック用ビュー
75
![Page 76: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/76.jpg)
排他制御
• ロック開始関数-SSJS
76
![Page 77: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/77.jpg)
排他制御
• ロック解除関数-SSJS
77
![Page 78: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/78.jpg)
排他制御
• 編集ボタン-ロック開始
文書IDとUserIDでロック関数実行
排他権がなければエラー
78
![Page 79: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/79.jpg)
排他制御
• 保存ボタン-ロック解除
文書IDとUserIDでロック関数実行
79
![Page 80: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/80.jpg)
排他制御(最新状文書を編集モードで開く)
• ユーザーAとユーザーBが同時に参照モードで開いていて、ユーザーAが編集、保存を行った後、ユーザーBが編集、保存を押すと競合が発生する
• これは文書(NotesDocument)を開いた瞬間、UI文書(NotesUIDocument)がメモリ上に作られるためである
文書A
UIDoc
ロック文書A
ユーザーA ユーザーB
文書A
UIDoc
DB
文書A
doc UIDoc(文書A)はメモリ
上で別の文書
ロック文書
競合
発生
編集ボタンが押された時に再度docA(文書A)を
開き直す
80
![Page 81: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/81.jpg)
排他制御(最新状文書を編集モードで開く)
• 最新のバックエンド文書から編集モードで開く
URLを取得し、パラメーターを
editDocumentにしてリダイレクト
81
![Page 82: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/82.jpg)
XPagesアプリ設計のキモ
82
![Page 83: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/83.jpg)
私が設計で心がけていること
最も短いソース、最もエレガントな仕組みで、
お客様の期待以上のものを実現する
そのためには
高い技術力、事前の試行錯誤が必要
開発者が自分自身を守るために仕様を縮小したり、簡易な実装にするのはカッコ悪い
正直、ソースは1行も書きたくない
83
![Page 84: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/84.jpg)
カテゴリビューは使わない
• Notesと言えばカテゴリビューですが、Webアプリではページ替えが発生するので、カテゴリビューは便利さよりも不便さが目立つ
• カテゴリビューは全文検索時に、カテゴリが非表示になるというデメリットがある
NotesにはNotesの、WebにはWebの得意分野がある
Notesの機能をWebで実現しようとするとハマる 84
![Page 85: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/85.jpg)
バックエンド
処理はどこで実行させる?
フロントエンド?、バックエンド?
• 皆さんなら設計する際、どの技術を使って実装しますか?
NSF
RDB
@式
シンプル
アクション
Lotus
Script
ServerSide
JavaScript
フロントエンド
HTML
CSS
ClientSide
JavaScript
HTTP
1 2
3 4
5
6
7
Notesクラスと@式どっちでも同じ処理が書けるなら
@で書く デフォルト値の設定をCSJSで書くとかあり得ない 85
![Page 86: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/86.jpg)
コードはどうやってクリーンに保つ?
• XPagesはHTML、CSJS、SSJSなどが一つページに書くことが可能です
分類 設計要素 設計名称 備考
画面固有 フォーム frmUser
XPages frmUser フォームならfrm、ビューならvwを先頭に付ける
SSJS ssjs_frmUser ssjs_とかを付けないとスクリプトライブラリがわかりづらくなる
CSJS csjs_frmUser
CSS frmUser 共通度が高ければcommonでOK
DB共通内 SSJS ssjs_common
CSJS csjs_common
排他制御 SSJS ssjs_LockControl 排他制御は独立性が高いので分ける
が
それをやるとXPagesソースがグチャグチャで
メンテナンス性が著しく下がります
私がやっているモジュール分け
画面固有のロジックは関連がわかるように名前を付ける
86
![Page 87: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/87.jpg)
コードはどうやってクリーンに保つ?
• XPages内に書くSSJS、CSJSなどは基本1行とし、2行以上になる場合は、画面固有のライブラリに記述する
• 実装段階では、XPages内に書いて良いが、コードが完成した段階で必ずライブラリに移す
【XPagesソース】
【onClickイベント】
XPagesソースも非常にエレガント 87
![Page 88: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/88.jpg)
まとめ
88
![Page 89: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/89.jpg)
技術って何だろう?
学習 実践 理解
知識 体験 気づき
知ってるだけ やってみる 自分なりの知識が生まれる
ここが技術
試行
錯誤
89
![Page 90: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/90.jpg)
技術って何でしょう
技術を身につけるとは「知識の循環」
学習 実践 理解
知識 体験 気づき
知ってるだけ やってみる 自分なりの知識が生まれる
90
![Page 91: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/91.jpg)
ちなみに・・・
実践だけで結果を得る人は
コピペ職人
学習 実践 理解
知識 体験 気づき
知ってるだけ やってみる 自分なりの知識が生まれる
91
![Page 92: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/92.jpg)
まとめ
• XPages開発のキモは@式の活用です • ゴリゴリCSJSやSSJSで書くのではなく、いかにデータソース(フォーム、
ビュー)側で処理できるか?をまず考えましょう • あなたの知恵と工夫で、XPages開発はもっと簡単になります • Googleで何でも検索できる時代だからこそ、あなたの知恵と工夫が大切
になります。(Googleで検索してできることは誰でもできます) • 他人の芝生がきれいに見える人は、他の技術を学んでみましょう 今、やるべきなのは
悩むことではなく
自分のやりたいことをトコトンやること!! 92
やりたいことが見つからない人は、気になったところへ行く
気にやったことをやってみては?
![Page 93: X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)](https://reader034.vdocuments.net/reader034/viewer/2022050613/58896b981a28ab44758b580f/html5/thumbnails/93.jpg)
Let’s Enjoy XPages
ありがとうございました 93