x pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)

みんな大好き

@式とBootstrapで作る

簡単CoolなXPagesアプリ

2015.11.18

Tetsuji Hayashi

2015

1

お断り

2

お断り

• @式の知識は最大限利用しますが、@式だけでXPagesアプリが作れるわけではありません。

• Notesクライアント用アプリやVB開発のように、WYSIWYG的に画面が開発出来るわけではありません。

• XPages開発時は設計タブは使いません。ソースタブオンリーです。

ソースタブの使い方を覚えれば どんなWebライブラリが出てきても適用出来ます

Notesクライアントアプリ開発は 簡単すぎました！

3

XPages開発やってますか？

4

Notes

Client

Domino

Server

XPagesはいつ使う？

Dominoサーバー&Notesクライアントのみの構成

どうしてもWeb化する理由、ビジョンがないなら

Notesアプリで良いんじゃね？(工数は圧倒的に低)

Standardクライアントが入っているなら、今まで実現できなかった機能をXPages

で実現するのはあり！！

5

SmartPhone、

Tablet

Notes

Client

Domino

Server

XPagesはいつ使う？

WiFi接続やインターネットへの接続がある

PC、タブレット

Internet

業務フローを再構築して

XPagesで新しい価値を創造しよう！！ 6

Webアプリのメリット

• クライアントにNotesをインストールする必要がない

• PC、スマホ、タブレットなど様々なデバイスから使える

• UI、UXデザインの自由度が高い

• フリーのライブラリなど最新Webトレンドを採用可能

7

Webアプリのデメリット

• HTML5対応と言ってもブラウザによって動作が違う

– マルチスクリーン対応とかやるとスゲー工数がかかる

– それが利益の柱である企業は問題ない(社運をかけてやるしかない)

• スマートフォン、タブレットを想定するのであれば、回線速度、端末のCPUパワーを考慮する必要がある

• SSLなどセキュリティの仕様が変わるので対応を余儀なくされる

– SHA-2なんかはIBMの実装が遅い(IISではIIS6.0(2003年)対応済み、Dominoは8.5.3(2012年)でも未対応)

– 「Notesは大丈夫！」と言う割に、割り当てている人的リソースが足りないんじゃないですか？IBMさん

• Edge(Windows10)はまだまだバグが多く落ちる

ブラウザアプリをやるなら

開発し続ける、保守し続ける覚悟が必要！！ 8

Notesアプリのメリット

• バージョンが特定されている

– 勝手にバージョンアップされたりしない

• 開発がメッチャ簡単

– おかしな動作をすることもあるが、デバッガーも付いているしWebアプリ開発よりすごく楽

– テーブル設計の知識もSQLの知識も要らない

– 設計置換すれば新しい設計に置き換え可能

• フォーム、ビュー、ナビゲーターという画面構成が決まっている

– １からデザインしなくて良いので、ゴリゴリの開発者じゃなくてもデザインできる

– どのアプリも似たデザインになるので、操作を１から教育しなくて良い

• ユーザー認証がある

– Webアプリだとユーザー認証から作る必要がある

– ユーザーIDとパスワードが乱立する

• アプリケーションの入口(共通のメニュー、ワークスペース)がある

– 機能単位でリリース可能

10年間塩漬けしてても、まだ使える 9

XPages開発のメリット

• 認証システムが既にある

• テーブル設計の知識、SQLの知識が不要

• 既存のNotes技術(@式、LotusScriptなど)を利用可能

• 編集モードと参照モードが元からある

• アプリケーションの設計をNSFファイルとして管理可能

• フリーのライブラリなど流行のWeb技術を導入可能

• 開発サンプル、バックエンドロジックをフォームとビューで作れる

• 部分更新(Ajax的動作)が圧倒的に容易に実現可能

• テストデータはNotesクライアントから登録可能

Notes開発者なら

XPagesを使わないという選択はない！！

1からPHPや.NETを学んで作っても良いけど、どんな技術も何でも簡単に実現してく

れるわけではない

10

Notes上でテスト実装してから、

XPagesへ移植するのが効率的

他人の芝生は青い？？？ 他人の旦那は優しい？他人の奥さんの方がきれい？

• 他のプラットフォームの方がもっと楽に、凄いアプリケーションを作れるんじゃないか？

• 自分は取り残されているんじゃないか？

• Notesをやり続けていることに漠然とした不安

不安だったら他の技術をガッツリ学んでみたら？

各社抱えている課題はそれぞれなので 自分で決めましょう！

他を知れば、Notesの方が優れている点

他の技術の方が優れている点が見えてきます

11

ところで・・・

超高速開発ってご存じですか？

12

超高速開発

Toolの範囲

超高速開発について私が思うこと

簡易な

入力画面

簡易な

一覧画面

簡易な

CSV出力

Notesなら

25年前から実現できています

サバクラ構成だけど・・ (ブラウザにする意味ある？)

データ

ベース

13

今やるべきこと 今やるべきこと 超高速開発

Toolの範囲

超高速開発について私が思うこと

データ

ベース

簡易な

入力画面

簡易な

一覧画面

簡易な

CSV出力

新しい業務フロー

新しい業務ロジック

直感的なUI

創造性を高

めるUX

今求められているのはコスト削減ではなく

新しい価値の創造 14

組織の仕組みの再設計、必要なプラットフォームの構築

超高速開発について私が思うこと

データ

ベース

簡易な

入力画面

簡易な

一覧画面

簡易な

CSV出力

新しい業務フロー

新しい業務ロジック

直感的なUI

創造性を高

めるUX

15

超高速開発について私が思うこと

仮に超高速開発ツールの導入がうまくいって、どんどんWebアプリを量産できるようになったらどうなるか？

次に来るのは

アプリケーションの乱立

開発効率が上がるとどこでも同じ問題が起きる Notes≒悪、Web≒善と言うことではない

16

Bootstrapって何がおいしいの？

17

どんなアプリが作れる？

• フォームサンプル

システム名

タブレットにも対応できるデザイン 18

どんなアプリが作れる？

• ビューサンプル

システム名

年、月を選択する

選択した月の報告書件数(提出状況)が表示される

報告書一覧

この範囲が部分更新

19

Bootstrap概要

【概要】

• Webアプリケーションを作りやすくするためのJavaScriptフレームワーク

• レスポンシブデザインを作りやすくする段組

• Coolなデザインを作る入力コントロールやボタン

【サポート環境】

・Chrome、Safari、Firefox、Operaの最新版

・IE8以降

【ライセンス】

・MITライセンスで商用利用可能

20

Bootstrapのメリット

• 入力コンポーネントのサイズが大きいので、タブレット対応がやりやすい

• 標準コントロールよりデザインがわかりやすい

• jQueryMobileはスマホに特化しているが、Bootstrapなら＋αすれば3スクリーン対応もやりやすい

• 多くのサイトで使われているので情報が多い(追加コンポーネント、カスタマイズ情報もある)

XPages標準

Bootstrap

21

Bootstrapのデメリット

• スマホを想定した入力用コンポーネントが少ない

– スマホだけを対象にするならjQueryMobileの方が使いやすいと思います

– 例えばチェックボックスとか

22

これからBootstrapを始める方へ

• まずはドットインストールか？書籍を1冊買って、PureHTMLで打ち込みをして下さい

Webサイト見て、いきなりXPagesに取り込んではダメ

まずは基礎固めから

ドットインストール http://dotinstall.com/

UIまで手の回らないプログラマのための

Bootstrap 3実用ガイド 翔泳社

23

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

Chrome開発ツールって使ってますか？

• Chromeの開発ツールは必須

• 知らない人はドットインストールへGo！！

Chrome Developer Tools入門 (全10回)

http://dotinstall.com/lessons/basic_chrome_dev_v2

25

前準備

26

【サーバー環境】

【クライアント環境】

開発環境・動作環境

環境 バージョン 備考

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

データベースプロパティの設定

• 「XPages実行時エラーページを生成」は必ずチェック

• 「エンコード」はUTF-8、「HTML doctype」はHTML5で良いんじゃないかな

28

データベースプロパティの設定

• アプリケーションのテーマは自分が作るアプリの仕様によって選択

アプリケーションテーマ：<empty>の場合

アプリケーションテーマ：サーバーのでフォルト(Web標準)の場合

サーバーのでフォルトを使うとXPages標準のCSSも適用される

ブラウザの開発ツールを使って影響範囲を見極める 29

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

Bootstrapのダウンロードとインポート

1. http://getbootstrap.com/getting-started/からbootstrap-3.3.5-dist.zipをダウンロードする

2. ダウンロードしたファイルを解凍し、それぞれ下記の場所にインポートする(次ページ参照)

拡張子.mapファイルはCSSのソースマップなので不要です bootstrap-theme.cssはフラットデザインを使わない場合のスタイルシートです 31

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

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

スライムがあらわれた イメージリソースにファイルが出てこない

Copyright SQUARE ENIX. 34

イメージリソースにファイルが出てこない

• イメージリソースのインポートは「GIF、JPEG、BMP」の拡張子を想定しているので、対応していない拡張子をインポートするにはファイル名に「*」を入力し、開くボタンを押す

35

全部インポートするとこんな感じ

• ファイルリソース

• スタイルシート

• イメージリソース

36

XPagesへの組み込みと動作確認

1. 新規XPagesを作成し、ソースタブに下記ソースを書き込む

jQuery、Bootstrapの読み込み

テスト用コード

ソース解説

37

リソースの追加機能でスラッシュ付きのスタイルシートを追加する・・・

• リソースの追加機能でスラッシュ付きのスタイルシートを追加すると・・・

こうなる

(゜Д゜)!!!

38

スライムなかまをよびよせた リソースの追加機能でスラッシュ付きのCSSファイルを読み込むとバグる

Copyright SQUARE ENIX. 39

リソースの追加機能でスラッシュ付きのスタイルシートを追加するとバグる

• リソースの追加機能でスラッシュ付きのスタイルシートを追加すると・・・

こうなる

ソースタブに直接書いた方が早いというのが おわかりいただけただろうか？

40

XPagesへの組み込みと動作確認

• こうなる

勇者はスライムを倒した Bootstrapを動かすことができた！！

41

でも

本気で使うならオリジナルのCSSも

読み込みたいですよね

42

XPagesへの組み込みと動作確認

• やっぱりオリジナルのCSSも組み込みたい

※original.cssには文字が赤くなるclassを定義しています

オリジナルのCSSを追加

追加したClassを設定

43

XPagesへの組み込みと動作確認

• こうなる

(゜Д゜)！！

44

スライムがあらわれた Bootstrapのglyphicon(アイコン)が表示されない！！

Copyright SQUARE ENIX. 45

• Chromeの開発ツールで見ると・・・

• 仕方がないのでオリジナルのCSSは通常のHTMLとして読み込む

オリジナルのCSSを読み込むとglyphiconが表示されない

46

XPagesへの組み込みと動作確認

• こうなる

勇者はスライムを倒した オリジナルのCSSを読み込むことができた！！

47

でも

アプリケーションとして公開する時には

プロパティで「ブラウザで開いた時」の

設定をしますよね

48

• アプリケーションのプロパティで「ブラウザで開いた時」に「指定されたXPagesを開く」を設定

XPagesへの組み込みと動作確認

49

XPagesへの組み込みと動作確認

• 「http://xpages/bootstrap5.nsf/」で開く

• 「http://xpages/bootstrap5.nsf」で開く

(゜Д゜)！！

50

スライムがあらわれた オリジナルCSSが適用されない・・・・

Copyright SQUARE ENIX. 51

• Chromeの開発ツールで見ると・・・

• 仕方がないのでリダイレクト用XPages(redirect.xsp)を作成し、onClientLoadイベントにシンプルアクションの追加を行い、「指定されたXPageを開く」に設定する

指定したXPageを開くを使うとスラッシュで相対パスの基点が変わる

52

XPagesへの組み込みと動作確認

• やっと完成！！！

53

リダイレクトされる

勇者はレベルアップがあがった！！ Bootstrapのつるぎを手に入れた

Copyright SQUARE ENIX. 54

BootstrapでXPagesアプリを作るひな形

• <body>タグの内側にアプリケーション用のタグを追加していきます

←この部分にコアコントロール、コンテナコントロールをドラッグ&ドロップで配置していく

55

XPages with Bootstrapの実装

56

ビューを作る①

1. 元となるビュー

2. ひな形のXPagesにデータソースとなるビューを指定する

3. <body>タグの内側にデータソースからビューをドラッグ&ドロップする

ソースタブにドラッグ＆ドロップできない時は一旦設計タブにドロップし、ソースタブに移動 57

ビューを作る②

4. 幅を100%に設定(オリジナルのCSSにclassを定義しても良い)

5. すべてのプロパティ－スタイル－dataTableStyleClassに「table table-bordered

table-striped」を指定する

6. 完成

58

テキストフィールドを作る①

1. ひな形のXPagesにデータソースとなるフォームを指定する

2. 計算結果フィールドやフィールドのデフォルト値を使う場合は「フォーム検証の実行」を選択する

3. <body>タグの内側に編集ボックスコントロールをドラッグ&ドロップで配置する

通常のBootstrapは画面幅いっぱいになるのでcontainerクラスでくくっています 59

テキストフィールドを作る②

4. データバインディングでフィールドを割り当てる

5. すべてのプロパティ－スタイル－styleClassに「form-control」を指定する

6. 完成

60

1. <body>タグの内側にボタンコントロールをドラッグ&ドロップで配置する

2. 名前とラベルを設定する

3. クリックイベントにアクションを設定する

ボタンを作る①

61

4. すべてのプロパティ－スタイル－styleClassに「btn btn-primary」を指定する

5. 完成！！

ボタンを作る②

62

日付フィールド①

1. Bootstrap-datepickerを呼び出すための関数を定義するスクリプトライブラリを作る

2. jQueryを使って、 Bootstrap-datepickerを呼び出す関数を定義

63

日付フィールド②

3. ひな形のXPagesにBootstrap-datepickerのJavaScript、CSS、追加したスクリプトライブラリを追加する

4. <body>タグの内側に編集ボックスコントロールをドラッグ&ドロップで配置する

5. データバインディングでフィールドを割り当てる

64

日付フィールド③

4. すべてのプロパティ－スタイル－styleClassに「form-control org_datepicker」を指定する

6. 完成！！！

65

ところで入力チェックは

フロントエンド(ブラウザ)で行っていますか？

バックエンド(サーバー)で行っていますか？

66

入力チェック

• 必須入力などの簡単なチェックなら「妥当性検査」を使って実現できます

が

そんな簡単なチェックだけで終わるアプリはありません！

私の場合、下記の理由でフロントエンドでの入力チェックは行いません

・JavaScript(jQuery)でゴリゴリ書くのが面倒

・チェックロジックがユーザー側に丸見え(セキュアではない)

・開発効率が悪い(コードが長くなる)

Notes開発者なら

@式を使おう 67

入力チェック

1. 入力エラーを受け取るためのフィールドをフォーム上に作成

2. 計算結果フィールドコントロールをドラッグ&ドロップで配置する

3. データバインディングでフィールドを割り当てる

4. コンテンツの種類を「HTML」に変更 重要

68

入力チェック

5. スクリプトライブラリにServerSideJavaScript(以後SSJS)を追加

6. 作成したSSJSをリソースとして追加

画面固有のSSJSは画面ごとに作ります 画面ごとにSSJSを作るのは、XPagesのソースをクリーンに保ち、保守性を上げるためです ※共通で使う関数などはssjs_common.jssなどを作ります 69

入力チェック

7. 保存ボタンで実行される関数を記述 @式でエラーチェックを行い、エラーがある場合はエラーメッセージ用フィールドに値を書き込む

8. 保存ボタンで作成した関数を呼び出す

try catchは書いた方がデバッグが断然早いです

ここが@式になる

エラーがある場合

エラーがない場合

70

入力チェック

9. 完成！！！

71

排他制御はどうやってます？？？

72

排他制御

• 排他ロック用文書を作り、排他ロック文書が自分の作成した物でない場合、編集モードへの移行を禁止する

文書A ロック文書A

①編集ボタンを押す

②文書Aの文書IDとユーザーAのIDを持ったロック文書を作る

ユーザーA ユーザーB

文書A

③編集ボタンを押す

④文書Aの文書IDとユーザーBのIDからロック文書を検索

⑤ロック文書が自分の物ではないのでエラーを表示

⑥保存ボタンを押す

⑦文書IDとユーザーIDからロック文書を検索 文書Aを保存し、ロック文書Aを削除

73

排他制御

• ロックされている場合の動作イメージ

• 排他制御は@式では実現できないと思います(できた人がいたら来年発表をお願いしますm(_ _)m)

74

ロックしている文書で 編集ボタンを押すと

排他制御

• ロック用フォーム

• ロック用ビュー

75

排他制御

• ロック開始関数－SSJS

76

排他制御

• ロック解除関数－SSJS

77

排他制御

• 編集ボタン－ロック開始

文書IDとUserIDでロック関数実行

排他権がなければエラー

78

排他制御

• 保存ボタン－ロック解除

文書IDとUserIDでロック関数実行

79

排他制御(最新状文書を編集モードで開く)

• ユーザーAとユーザーBが同時に参照モードで開いていて、ユーザーAが編集、保存を行った後、ユーザーBが編集、保存を押すと競合が発生する

• これは文書(NotesDocument)を開いた瞬間、UI文書(NotesUIDocument)がメモリ上に作られるためである

文書A

UIDoc

ロック文書A

ユーザーA ユーザーB

文書A

UIDoc

DB

文書A

doc UIDoc(文書A)はメモリ

上で別の文書

ロック文書

競合

発生

編集ボタンが押された時に再度docA(文書A)を

開き直す

80

排他制御(最新状文書を編集モードで開く)

• 最新のバックエンド文書から編集モードで開く

URLを取得し、パラメーターを

editDocumentにしてリダイレクト

81

XPagesアプリ設計のキモ

82

私が設計で心がけていること

最も短いソース、最もエレガントな仕組みで、

お客様の期待以上のものを実現する

そのためには

高い技術力、事前の試行錯誤が必要

開発者が自分自身を守るために仕様を縮小したり、簡易な実装にするのはカッコ悪い

正直、ソースは1行も書きたくない

83

カテゴリビューは使わない

• Notesと言えばカテゴリビューですが、Webアプリではページ替えが発生するので、カテゴリビューは便利さよりも不便さが目立つ

• カテゴリビューは全文検索時に、カテゴリが非表示になるというデメリットがある

NotesにはNotesの、WebにはWebの得意分野がある

Notesの機能をWebで実現しようとするとハマる 84

バックエンド

処理はどこで実行させる？

フロントエンド？、バックエンド？

• 皆さんなら設計する際、どの技術を使って実装しますか？

NSF

RDB

@式

シンプル

アクション

Lotus

Script

ServerSide

JavaScript

フロントエンド

HTML

CSS

ClientSide

JavaScript

HTTP

1 2

3 4

5

6

7

Notesクラスと@式どっちでも同じ処理が書けるなら

@で書く デフォルト値の設定をCSJSで書くとかあり得ない 85

コードはどうやってクリーンに保つ？

• 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

コードはどうやってクリーンに保つ？

• XPages内に書くSSJS、CSJSなどは基本1行とし、2行以上になる場合は、画面固有のライブラリに記述する

• 実装段階では、XPages内に書いて良いが、コードが完成した段階で必ずライブラリに移す

【XPagesソース】

【onClickイベント】

XPagesソースも非常にエレガント 87

まとめ

88

技術って何だろう？

学習 実践 理解

知識 体験 気づき

知ってるだけ やってみる 自分なりの知識が生まれる

ここが技術

試行

錯誤

89

技術って何でしょう

技術を身につけるとは「知識の循環」

学習 実践 理解

知識 体験 気づき

知ってるだけ やってみる 自分なりの知識が生まれる

90

ちなみに・・・

実践だけで結果を得る人は

コピペ職人

学習 実践 理解

知識 体験 気づき

知ってるだけ やってみる 自分なりの知識が生まれる

91

まとめ

• XPages開発のキモは@式の活用です • ゴリゴリCSJSやSSJSで書くのではなく、いかにデータソース(フォーム、

ビュー)側で処理できるか？をまず考えましょう • あなたの知恵と工夫で、XPages開発はもっと簡単になります • Googleで何でも検索できる時代だからこそ、あなたの知恵と工夫が大切

になります。(Googleで検索してできることは誰でもできます) • 他人の芝生がきれいに見える人は、他の技術を学んでみましょう 今、やるべきなのは

悩むことではなく

自分のやりたいことをトコトンやること！！ 92

やりたいことが見つからない人は、気になったところへ行く

気にやったことをやってみては？

Let’s Enjoy XPages

ありがとうございました 93