@式とBootstrapで作る簡単CoolなXPagesアプリ

2015 みんな大好き @式とBootstrapで作る 簡単CoolなXPagesアプリ 2015.11.18 Tetsuji Hayashi1

お断り 2

お断り • • • @式の知識は最大限利用しますが、@式だけでXPagesアプリが作れるわけでは ありません。 Notesクライアント用アプリやVB開発のように、WYSIWYG的に画面が開発出来 るわけではありません。 XPages開発時は設計タブは使いません。ソースタブオンリーです。 Notesクライアントアプリ開発は 簡単すぎました！ ソースタブの使い方を覚えれば どんなWebライブラリが出てきても適用出来ます 3

XPages開発やってますか？ 4

XPagesはいつ使う？ Dominoサーバー&Notesクライアントのみの構成 Domino Server Notes Client Standardクライアントが 入っているなら、今まで実現 できなかった機能をXPages で実現するのはあり！！ どうしてもWeb化する理由、ビジョンがないなら Notesアプリで良いんじゃね？(工数は圧倒的に低) 5

XPagesはいつ使う？ WiFi接続やインターネットへの接続がある SmartPhone、 Tablet PC、タブレット Domino Server Internet Notes Client 業務フローを再構築して 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上でテスト実 既存のNotes技術(@式、LotusScriptなど)を利用可能 装してから、 XPagesへ移植する 編集モードと参照モードが元からある のが効率的 アプリケーションの設計をNSFファイルとして管理可能 フリーのライブラリなど流行のWeb技術を導入可能 開発サンプル、バックエンドロジックをフォームとビューで作れる 部分更新(Ajax的動作)が圧倒的に容易に実現可能 テストデータはNotesクライアントから登録可能 1からPHPや.NETを学んで 作っても良いけど、どんな技 術も何でも簡単に実現してく れるわけではない Notes開発者なら XPagesを使わないという選択はない！！ 10

他人の芝生は青い？？？ 他人の旦那は優しい？他人の奥さんの方がきれい？ • • • 他のプラットフォームの方がもっと楽に、凄いアプリケーションを作れるん じゃないか？ 自分は取り残されているんじゃないか？ Notesをやり続けていることに漠然とした不安 不安だったら他の技術をガッツリ学んでみたら？ 他を知れば、Notesの方が優れている点 他の技術の方が優れている点が見えてきます 各社抱えている課題はそれぞれなので 自分で決めましょう！ 11

ところで・・・ 超高速開発ってご存じですか？ 12

超高速開発について私が思うこと 超高速開発 Toolの範囲 簡易な 入力画面 データ ベース 簡易な 一覧画面 簡易な CSV出力 Notesなら サバクラ構成だけど・・ (ブラウザにする意味ある？) 25年前から実現できています 13

超高速開発について私が思うこと 今やるべきこと 超高速開発 Toolの範囲 今やるべきこと 簡易な 入力画面 データ ベース 新しい業務 フロー 新しい業務 ロジック 直感的なUI 簡易な 一覧画面 創造性を高 めるUX 簡易な CSV出力 今求められているのはコスト削減ではなく 新しい価値の創造 14

超高速開発について私が思うこと 組織の仕組みの再設計、必要なプラットフォームの構築 簡易な 入力画面 データ ベース 新しい業務 フロー 新しい業務 ロジック 直感的なUI 簡易な 一覧画面 創造性を高 めるUX 簡易な CSV出力 15

超高速開発について私が思うこと 仮に超高速開発ツールの導入がうまくいって、どんどんWebアプリを量産 できるようになったらどうなるか？ 次に来るのは アプリケーションの乱立 開発効率が上がるとどこでも同じ問題が起きる Notes≒悪、Web≒善と言うことではない 16

Bootstrapって何がおいしいの？ 17

どんなアプリが作れる？ • フォームサンプル システム名 タブレットにも対応できるデザイン 18

どんなアプリが作れる？ • ビューサンプル システム名 この範囲が部分 更新 年、月を選択する 選択した月の報告書件数(提出状況)が表示される 報告書一覧 19

Bootstrap概要 【概要】 • Webアプリケーションを作りやすくするためのJavaScriptフレームワーク • レスポンシブデザインを作りやすくする段組 • Coolなデザインを作る入力コントロールやボタン 【サポート環境】 ・Chrome、Safari、Firefox、Operaの最新版 ・IE8以降 【ライセンス】 ・MITライセンスで商用利用可能 20

Bootstrapのメリット • • 入力コンポーネントのサイズが大きいので、タブレット対応がやりやすい 標準コントロールよりデザインがわかりやすい XPages標準 Bootstrap • • jQueryMobileはスマホに特化しているが、Bootstrapなら＋αすれば3スクリーン 対応もやりやすい 多くのサイトで使われているので情報が多い(追加コンポーネント、カスタマイ ズ情報もある) 21

Bootstrapのデメリット • スマホを想定した入力用コンポーネントが少ない – スマホだけを対象にするならjQueryMobileの方が使いやすいと思います – 例えばチェックボックスとか 22

これからBootstrapを始める方へ • まずはドットインストールか？書籍を1冊買って、PureHTMLで打ち込みをして 下さい UIまで手の回らないプログラマのための Bootstrap 3実用ガイド 翔泳社 ドットインストール http://dotinstall.com/ Webサイト見て、いきなりXPagesに取り込んではダメ まずは基礎固めから 23

XPages with Bootstrapで気をつけること • • • 段組のレイアウトなどほとんどのタグ、ClassはHTMLをXPagesのソースタブに そのまま書けば動きます 気をつけないといけないのは入力コンポーネントをどうやってBootstrap対応さ せるか？ そのために大切なのは、やっぱりコントロールがどのHTMLになるか？ コアコントロール 出力されるHTMLタグ 編集ボックス <input type="text“> リッチテキスト <textarea rows="1" cols="1"> 複数行編集ボックス <textarea> ボタン <button type="button"> リストボックス <select size="3"> コンボボックス <select size="1"> チェックボックス <input type="checkbox"> ラジオボタン <input type="radio"> チェックボックス グループ <fieldset> <input type="checkbox"> ラジオボタングループ <fieldset><input type="radio“> 備考 CKEditorを使用 選択肢は一つだけ 〃 複数の選択肢を設定できる 前後に<td>タグが付く 〃 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 Bootstrap 3.3.5 Bootstrap-datepicker 1.5.0 備考 IE9を以降サポート 【クライアント環境】 環境 バージョン 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-datepicker1.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も組み込みたい オリジナルのCSSを追加 追加したClassを設定 ※original.cssには文字が赤くなるclassを定義しています 43

XPagesへの組み込みと動作確認 • こうなる (゜Д゜)！！ 44

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

オリジナルのCSSを読み込むとglyphiconが 表示されない • Chromeの開発ツールで見ると・・・ • 仕方がないのでオリジナルのCSSは通常のHTMLとして読み込む 46

XPagesへの組み込みと動作確認 • こうなる 勇者はスライムを倒した オリジナルのCSSを読み込むことができた！！ 47

でも アプリケーションとして公開する時には プロパティで「ブラウザで開いた時」の 設定をしますよね 48

XPagesへの組み込みと動作確認 • アプリケーションのプロパティで「ブラウザで開いた時」に「指定された XPagesを開く」を設定 49

XPagesへの組み込みと動作確認 • 「http://xpages/bootstrap5.nsf/」で開く • 「http://xpages/bootstrap5.nsf」で開く (゜Д゜)！！ 50

• http://xpages/bootstrap5.nsf/
• http://xpages/bootstrap5.nsf

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

指定したXPageを開くを使うとスラッシュで 相対パスの基点が変わる • Chromeの開発ツールで見ると・・・ • 仕方がないのでリダイレクト用XPages(redirect.xsp)を作成し、onClientLoadイ ベントにシンプルアクションの追加を行い、「指定された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. 計算結果フィールドやフィールドのデフォルト値を使う場合は「フォーム検証 の実行」を選択する <body>タグの内側に編集ボックスコントロールをドラッグ&ドロップで配置 する 3. 通常の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の文書IDと ユーザーAのIDを持っ たロック文書を作る 文書A ①編集ボタン を押す ④文書Aの文書IDと ユーザーBのIDから ロック文書を検索 ロック 文書A ⑥保存ボタン を押す ⑦文書IDとユーザーIDからロック文書を 検索 文書Aを保存し、ロック文書Aを削除 ユーザーA 文書A ③編集ボタン を押す ⑤ロック文書が自分の物で はないのでエラーを表示 ユーザーB 73

排他制御 • • ロックされている場合の動作イメージ 排他制御は@式では実現できないと思います(できた人がいたら来年発表をお願 いしますm(_ _)m) ロックしている文書で 編集ボタンを押すと 74

排他制御 • ロック用フォーム • ロック用ビュー 75

排他制御 • ロック開始関数－SSJS 76

排他制御 • ロック解除関数－SSJS 77

排他制御 • 編集ボタン－ロック開始 文書IDと UserIDでロッ ク関数実行 排他権がなけ ればエラー 78

排他制御 • 保存ボタン－ロック解除 文書IDと UserIDでロッ ク関数実行 79

排他制御(最新状文書を編集モードで開く) • • ユーザーAとユーザーBが同時に参照モードで開いていて、ユーザーAが編集、 保存を行った後、ユーザーBが編集、保存を押すと競合が発生する これは文書(NotesDocument)を開いた瞬間、UI文書(NotesUIDocument)がメモ リ上に作られるためである 文書A doc 文書A UIDoc UIDoc(文書A)はメモリ 上で別の文書 DB ロック 文書 文書A 文書A UIDoc 編集ボタンが押 された時に再度 docA(文書A)を 開き直す 競合 発生 ユーザーA ユーザーB 80

排他制御(最新状文書を編集モードで開く) • 最新のバックエンド文書から編集モードで開く URLを取得し、 パラメーター を editDocument にしてリダイ レクト 81

XPagesアプリ設計のキモ 82

私が設計で心がけていること 最も短いソース、最もエレガントな仕組みで、 お客様の期待以上のものを実現する 正直、ソースは1行も書きたくない 開発者が自分自身を守るため に仕様を縮小したり、簡易な 実装にするのはカッコ悪い そのためには 高い技術力、事前の試行錯誤が必要 83

カテゴリビューは使わない • • Notesと言えばカテゴリビューですが、Webアプリではページ替えが発生する ので、カテゴリビューは便利さよりも不便さが目立つ カテゴリビューは全文検索時に、カテゴリが非表示になるというデメリットが ある NotesにはNotesの、WebにはWebの得意分野がある Notesの機能をWebで実現しようとするとハマる 84

処理はどこで実行させる？ フロントエンド？、バックエンド？ • 皆さんなら設計する際、どの技術を使って実装しますか？ バックエンド 2 4 NSF RDB 5 フロントエンド 1 シンプル アクション @式 HTML 3 HTTP 7 Lotus Script CSS ClientSide JavaScript 6 ServerSide JavaScript Notesクラスと@式どっちでも同じ処理が書けるなら @で書く デフォルト値の設定をCSJSで書くとかあり得ない 85

コードはどうやってクリーンに保つ？ • XPagesはHTML、CSJS、SSJSなどが一つページに書くことが可能です が それをやるとXPagesソースがグチャグチャで メンテナンス性が著しく下がります 私がやっているモジュール分け 分類 設計要素 設計名称 画面固有 フォーム frmUser 画面固有のロジッ クは関連がわかる ように名前を付け る XPages frmUser フォームならfrm、ビューならvwを先 頭に付ける SSJS ssjs_frmUser ssjs_とかを付けないとスクリプトライ ブラリがわかりづらくなる CSJS csjs_frmUser CSS frmUser SSJS ssjs_common CSJS csjs_common SSJS ssjs_LockControl DB共通内 排他制御 備考 共通度が高ければcommonでOK 排他制御は独立性が高いので分ける 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