X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)
•
5 j'aime•3,726 vues
XPagesDay2015 2015/11/18(水) 10:30- 発表資料
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
En vedette (20)
Similaire à X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)
Similaire à X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用) (20)
X pages day2015_みんな大好き@式とbootstrapで作る簡単coolなxpagesアプリ(公開用)
- 2. お断り 2
- 3. お断り • @式の知識は最大限利用しますが、@式だけでXPagesアプリが作れるわけでは ありません。 • Notesクライアント用アプリやVB開発のように、WYSIWYG的に画面が開発出来 るわけではありません。 • XPages開発時は設計タブは使いません。ソースタブオンリーです。 ソースタブの使い方を覚えれば どんなWebライブラリが出てきても適用出来ます Notesクライアントアプリ開発は 簡単すぎました！ 3
- 7. Webアプリのメリット • クライアントにNotesをインストールする必要がない • PC、スマホ、タブレットなど様々なデバイスから使える • UI、UXデザインの自由度が高い • フリーのライブラリなど最新Webトレンドを採用可能 7
- 8. Webアプリのデメリット • HTML5対応と言ってもブラウザによって動作が違う – マルチスクリーン対応とかやるとスゲー工数がかかる – それが利益の柱である企業は問題ない(社運をかけてやるしかない) • スマートフォン、タブレットを想定するのであれば、回線速度、端末 のCPUパワーを考慮する必要がある • SSLなどセキュリティの仕様が変わるので対応を余儀なくされる – SHA-2なんかはIBMの実装が遅い(IISではIIS6.0(2003年)対応済み、Dominoは 8.5.3(2012年)でも未対応) – 「Notesは大丈夫！」と言う割に、割り当てている人的リソースが足りないんじゃな いですか？IBMさん • Edge(Windows10)はまだまだバグが多く落ちる ブラウザアプリをやるなら 開発し続ける、保守し続ける覚悟が必要！！ 8
- 9. Notesアプリのメリット • バージョンが特定されている – 勝手にバージョンアップされたりしない • 開発がメッチャ簡単 – おかしな動作をすることもあるが、デバッガーも付いているしWebアプリ開発より すごく楽 – テーブル設計の知識もSQLの知識も要らない – 設計置換すれば新しい設計に置き換え可能 • フォーム、ビュー、ナビゲーターという画面構成が決まっている – １からデザインしなくて良いので、ゴリゴリの開発者じゃなくてもデザインできる – どのアプリも似たデザインになるので、操作を１から教育しなくて良い • ユーザー認証がある – Webアプリだとユーザー認証から作る必要がある – ユーザーIDとパスワードが乱立する • アプリケーションの入口(共通のメニュー、ワークスペース)がある – 機能単位でリリース可能 10年間塩漬けしてても、まだ使える 9
- 10. XPages開発のメリット • 認証システムが既にある • テーブル設計の知識、SQLの知識が不要 • 既存のNotes技術(@式、LotusScriptなど)を利用可能 • 編集モードと参照モードが元からある • アプリケーションの設計をNSFファイルとして管理可能 • フリーのライブラリなど流行のWeb技術を導入可能 • 開発サンプル、バックエンドロジックをフォームとビューで作れる • 部分更新(Ajax的動作)が圧倒的に容易に実現可能 • テストデータはNotesクライアントから登録可能 Notes開発者なら XPagesを使わないという選択はない！！ 1からPHPや.NETを学んで 作っても良いけど、どんな技 術も何でも簡単に実現してく れるわけではない 10 Notes上でテスト実 装してから、 XPagesへ移植する のが効率的
- 11. 他人の芝生は青い？？？ 他人の旦那は優しい？他人の奥さんの方がきれい？ • 他のプラットフォームの方がもっと楽に、凄いアプリケーションを作れるん じゃないか？ • 自分は取り残されているんじゃないか？ • Notesをやり続けていることに漠然とした不安 不安だったら他の技術をガッツリ学んでみたら？ 各社抱えている課題はそれぞれなので 自分で決めましょう！ 他を知れば、Notesの方が優れている点 他の技術の方が優れている点が見えてきます 11
- 20. Bootstrap概要 【概要】 • Webアプリケーションを作りやすくするためのJavaScriptフレームワーク • レスポンシブデザインを作りやすくする段組 • Coolなデザインを作る入力コントロールやボタン 【サポート環境】 ・Chrome、Safari、Firefox、Operaの最新版 ・IE8以降 【ライセンス】 ・MITライセンスで商用利用可能 20
- 21. Bootstrapのメリット • 入力コンポーネントのサイズが大きいので、タブレット対応がやりやすい • 標準コントロールよりデザインがわかりやすい • jQueryMobileはスマホに特化しているが、Bootstrapなら＋αすれば3スクリーン 対応もやりやすい • 多くのサイトで使われているので情報が多い(追加コンポーネント、カスタマイ ズ情報もある) XPages標準 Bootstrap 21
- 22. Bootstrapのデメリット • スマホを想定した入力用コンポーネントが少ない – スマホだけを対象にするならjQueryMobileの方が使いやすいと思います – 例えばチェックボックスとか 22
- 24. 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
- 25. Chrome開発ツールって使ってますか？ • Chromeの開発ツールは必須 • 知らない人はドットインストールへGo！！ Chrome Developer Tools入門 (全10回) http://dotinstall.com/lessons/basic_chrome_dev_v2 25
- 26. 前準備 26
- 27. 【サーバー環境】 【クライアント環境】 開発環境・動作環境 環境 バージョン 備考 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
- 28. データベースプロパティの設定 • 「XPages実行時エラーページを生成」は必ずチェック • 「エンコード」はUTF-8、「HTML doctype」はHTML5で良いんじゃないかな 28
- 30. 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
- 32. 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
- 33. 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
- 36. 全部インポートするとこんな感じ • ファイルリソース • スタイルシート • イメージリソース 36
- 57. ビューを作る① 1. 元となるビュー 2. ひな形のXPagesにデータソースとなるビューを指定する 3. <body>タグの内側にデータソースからビューをドラッグ&ドロップする ソースタブにドラッグ＆ドロップできない時は一旦設計タブにドロップし、ソースタブに移動 57
- 58. ビューを作る② 4. 幅を100%に設定(オリジナルのCSSにclassを定義しても良い) 5. すべてのプロパティ－スタイル－dataTableStyleClassに「table table-bordered table-striped」を指定する 6. 完成 58
- 59. テキストフィールドを作る① 1. ひな形のXPagesにデータソースとなるフォームを指定する 2. 計算結果フィールドやフィールドのデフォルト値を使う場合は「フォーム検証 の実行」を選択する 3. <body>タグの内側に編集ボックスコントロールをドラッグ&ドロップで配置 する 通常のBootstrapは画面幅いっぱいになるのでcontainerクラスでくくっています 59
- 60. テキストフィールドを作る② 4. データバインディングでフィールドを割り当てる 5. すべてのプロパティ－スタイル－styleClassに「form-control」を指定する 6. 完成 60
- 61. 1. <body>タグの内側にボタンコントロールをドラッグ&ドロップで配置する 2. 名前とラベルを設定する 3. クリックイベントにアクションを設定する ボタンを作る① 61
- 62. 4. すべてのプロパティ－スタイル－styleClassに「btn btn-primary」を指定する 5. 完成！！ ボタンを作る② 62
- 63. 日付フィールド① 1. Bootstrap-datepickerを呼び出すための関数を定義するスクリプトライブラリを 作る 2. jQueryを使って、 Bootstrap-datepickerを呼び出す関数を定義 63
- 64. 日付フィールド② 3. ひな形のXPagesにBootstrap-datepickerのJavaScript、CSS、追加したスクリプト ライブラリを追加する 4. <body>タグの内側に編集ボックスコントロールをドラッグ&ドロップで配置す る 5. データバインディングでフィールドを割り当てる 64
- 68. 入力チェック 1. 入力エラーを受け取るためのフィールドをフォーム上に作成 2. 計算結果フィールドコントロールをドラッグ&ドロップで配置する 3. データバインディングでフィールドを割り当てる 4. コンテンツの種類を「HTML」に変更 重要 68
- 70. 入力チェック 7. 保存ボタンで実行される関数を記述 @式でエラーチェックを行い、エラーがある場合はエラーメッセージ用フィールドに値を書き込む 8. 保存ボタンで作成した関数を呼び出す try catchは書いた方がデバッグが断然早いです ここが@式になる エラーがある 場合 エラーがない 場合 70
- 74. 排他制御 • ロックされている場合の動作イメージ • 排他制御は@式では実現できないと思います(できた人がいたら来年発表をお願 いしますm(_ _)m) 74 ロックしている文書で 編集ボタンを押すと
- 80. 排他制御(最新状文書を編集モードで開く) • ユーザーAとユーザーBが同時に参照モードで開いていて、ユーザーAが編集、 保存を行った後、ユーザーBが編集、保存を押すと競合が発生する • これは文書(NotesDocument)を開いた瞬間、UI文書(NotesUIDocument)がメモ リ上に作られるためである 文書A UIDoc ロック 文書A ユーザーA ユーザーB 文書A UIDoc DB 文書A doc UIDoc(文書A)はメモリ 上で別の文書 ロック 文書 競合 発生 編集ボタンが押 された時に再度 docA(文書A)を 開き直す 80
- 86. コードはどうやってクリーンに保つ？ • 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
- 88. まとめ 88
- 89. 技術って何だろう？ 学習 実践 理解 知識 体験 気づき 知ってるだけ やってみる 自分なりの知 識が生まれる ここが技術 試行 錯誤 89
- 90. 技術って何でしょう 技術を身につけるとは「知識の循環」 学習 実践 理解 知識 体験 気づき 知ってるだけ やってみる 自分なりの知 識が生まれる 90
- 91. ちなみに・・・ 実践だけで結果を得る人は コピペ職人 学習 実践 理解 知識 体験 気づき 知ってるだけ やってみる 自分なりの知 識が生まれる 91
- 92. まとめ • XPages開発のキモは@式の活用です • ゴリゴリCSJSやSSJSで書くのではなく、いかにデータソース(フォーム、 ビュー)側で処理できるか？をまず考えましょう • あなたの知恵と工夫で、XPages開発はもっと簡単になります • Googleで何でも検索できる時代だからこそ、あなたの知恵と工夫が大切 になります。(Googleで検索してできることは誰でもできます) • 他人の芝生がきれいに見える人は、他の技術を学んでみましょう 今、やるべきなのは 悩むことではなく 自分のやりたいことをトコトンやること！！ 92 やりたいことが見つからない人は、 気になったところへ行く 気にやったことをやってみては？