Oracle APEXデモンストレーション手順

Oracle APEX 20.2で作成したデモンストレーション手順になります。

スライドの表示と説明文にしたがって作業ができますので、ハンズオンの資料としても利用可能です。

ノート付き

Transcript

1. Oracle Cloud Free TierのATPに実装されたOracle APEX 20.2でのデモンストレーショ ン手順。 スクリプト通りに話して、30分から40分、くらいは時間が必要でしょう。 1
2. (ExcelでCSVファイルProject_and_Tasks.csvを開く) それではこれから、Oracle APEXのデモを始めます。 こちらのCSVファイルをアップロードして、アプリケーションを作成します。 元になるCSVには、プロジェクト名とタスク名、開始日と終了日、ステータス、タス クにアサインされた人、コストと、バジェットの情報が含まれています。 先頭行にカラム名が設定され、全部で７３行データが含まれています。 --- CSVファイルを取得する操作 Project_and_Tasks.csvは以下からダウンロードします。ログインはdemo/demo https://apex.oracle.com/pls/apex/dbcloud_demo/r/jp-tasks-spreadsheet/jareport 画面右上のCSVダウンロードをクリックし、Project_and_Tasks.csvをダウンロードし ます。 2
3. （Oracle APEXの開発環境にサインインします。） アプリケーション・ビルダーを開いて、作成、ファイルから、を呼び出します。 3
4. ファイルの選択をクリックして、先程ののCSVファイルを選択し、アップロードしま す。 4
5. 文字が化けているので、ファイル・エンコーディングを日本語(Shift-JIS)にします。 プレビューが正しく日本語で表示されます。ここに表示されているデータがデータ ベースに取り込まれます。 ロード先は新規に表を作成するので、新規表とし、表名はTASKSとします。 最初の行はヘッダーですので、最初の行にヘッダーが含まれる、のチェックはそのま まにしておきます。 (画面のどこかをクリックすると、構成ボタンが現れます） 構成をクリックして、作成される表の定義を確認します。 5
6. プレビューしたデータから、列名が先頭行から決まっていること、 START_DATEとEND_DATEはDATE型、 BudgetとCostにはNUMBER型が選ばれていることが確認できます。 特に変更は不要なので、そのまま、ダイアログを閉じます。 6
7. データ・ロードを実行します。 含まれている行数が73行なので、全件ロードができています。 ロードされたデータを元に、アプリケーションの作成を実行します。 7
8. アプリケーション作成ウィザードが開きます。 アプリケーションの名前をタスクとします。 ５種類のページが、自動的に作成されます。 どのようなページが作成されるかは、アプリケーションを作成したのちに確認しま す。 アプリケーション作成ウィザードによって生成される機能は、すべてチェックしま す。 アプリケーションの作成を実行します。 ここでは、コードを生成しているのではなく、アプリケーションとなるメタデータを 生成しています。 8
9. 29のページが自動的に生成されました。 作成されたアプリケーションを実行します。 9
10. アプリケーションにサインインします。 ホーム・ページです。それぞれ、ダッシュボード、検索画面、編集を行う画面、カレ ンダー表示を行う画面へのリンクが作成されています。 また、これはサイドメニューのナビゲーションからもアクセスできるようになってい ます。 --- (追加説明はじまり) --- 少々、横道にそれて、先ほどのユーザー認証について説明します。 デフォルトではOracle APEXに登録されているユーザーで認証されますが、認証に使 う方式は、別の組み込みのスキームも使用できますし、カスタムで作り込むことも可 能です。 10
11. 共有コンポーネントに認証スキームというのがあり、標準ではApplication Expressア カウントです。 作成、をクリックし、 (認証スキームのメソッドをギャラリからの事前構成済みスキームに基づくのまま、次 へすすんで) スキームタイプとして、色々と標準で使える認証スキームがありますが、この中で、 ソーシャル・サインインというのがあります。そちらを選んでみます。 認証プロバイダとして、OpenID Connect、汎用OAuth2といった認証プロトコルをあ らかじめ組み込まれています。 Oracle APEXの将来のバージョンでは、SAML認証もサポートされる予定です。 アプリケーションで一番最初に気になる認証について、少々触れてみました。 （実行済みのアプリケーションのタブ、タスクと表示されているタブへ戻る) 11
12. --- (追加説明はじまり) --- では、作成されたアプリケーションの説明に戻ります。 --- (追加説明おわり) --- まず、ダッシュボードページを見てみましょう。 12
13. 与えられたデータ、今回はプロジェクトとタスクの情報が含まれたCSVファイルです が、そのデータの型や、データそれ自体から、できるだけ推測してチャートを自動生 成しています。 プロジェクトはプロジェクトごとに含まれるタスクの数を棒グラフにしています。 ステータスはそれぞれのステータスの割合をパイチャートにしています。 Assigned Toは、担当者に割りあっているタスクの数を多い順から棒グラフにしてい ます。 最後にCostは、コストごとのタスクの数を棒グラフにしています。 自動的に生成されたチャートが有益でない場合は、もちろん、修正することができま す。 --- (追加説明はじまり) --- https://apex.oracle.com/charts (別のタブで開く) Oracle APEXの組み込みのチャート・コンポーネントです。エリア・チャート、 バー・チャート、その他、色々な種類のチャートが提供されています。 https://apex.oracle.com/pls/apex/f?p=18290:1:::::: (別のタブで開く) 標準のチャート以外でも、例えば有名なD3などのチャートをプラグインとして組み込 13
14. んで利用している方もいらっしゃいます。 --- (追加説明おわり) --- Costのグラフは、今一つであることは確かなので、プロジェクトごとのコストの合 算に変更してみます。 クイック編集から、Costを選びます。 13
15. シリーズのSQLを更新します。 select project, sum(cost) value from TASKS group by project order by 2 desc ラベルをPROJECTにします。 保存します。 14
16. では、先ほどのプロジェクトのアプリケーションを開きます。 (ダッシュボードのタブを開く) リフレッシュするだけで、変更が反映されます。 (ブラウザの画面からリロードを行う) プロジェクトごとのコストの合計がチャート表示されています。 15
17. ダッシュボードの次に、検索ページを見てみましょう。 Tasks検索を開きます。ファセット検索のページが自動的に作成されています。 16
18. ファセット検索は、ECサイトなどによく使われている検索ページの形式になります。 ファセットとして、Assigned To、Budget、Project、Status、Costがあります。 これらの検索条件は、データベースに保存されているデータ型や統計情報から導き出 されています。 Oracle APEX 20.2の新機能として、それぞれのファセットごとにグラフ表示を行う機 能も追加されています。 Assigned Toを開いて確認すると、北本さんと田中さんがそれぞれ１４件で一番多く タスクがアサインされていることが確認できます。 プロジェクトをレガシー・サーバー移行に絞ってみると、グラフの表示が変わりま す。 パイチャートに変更することもできます。 (チャートを閉じる) ファセットの指定により、レポートのリストも変更されています。 17
19. バジェットが2000ドルを超えているタスクが４件あるので、それをリストしましょ う。 18
20. このように自動的に作成されているファセット検索のページですが、ファセットやレ ポートなどをカスタマイズすることが可能です。 レポートをリセットします。 (コストは一番下にあるのでスクロールさせる) 例えばコストですが、1000以上ではなく、1000-2000のレンジと2000以上に分割し てみます。 クイック編集でファセットを選びます。 19
21. P3_COSTを選択します。LOVのタイプの静的値を開きます。 レンジを指定する行を追加します。変更を保存し、アプリケーションのページに戻り ます。 (Tasks検索のタブに移動する) 20
22. (ブラウザからリロードする) (見づらいのでAssigned Toのファセットを閉じる) アプリケーションをリフレッシュし、コストをみると変更されていることが確認でき ます。コストが2000ドル以上のものは８件です。 21
23. (ホームに戻って) では次に、データの編集画面を確認します。Tasksレポートを開きます。 レポートと編集フォームのページが作成されています。 22
24. 例えば、一番上のプロジェクト、APEXウェブサイト構築、タスク名のパイロット・ ワークスペース作成のバジェットを100から200へ変更します。 編集アイコンをクリックし、開いたフォームから、100を200へ変更します。変更の 適用をクリックすると、バジェットが変更されたことが確認できます。 23
25. レポートのページとして対話モード・レポートというコンポーネントが使用されてい ます。 このコンポーネントでは、表示形式の色々なカスタマイズ方法が提供されています。 アクションメニューのデータのソートから、バジェットの多い順番にタスクを並び替 えてみます。 Budgetを選んで、方向を降順にします。12000ドルが一番多いバジェットで、降順に ならんでいることが確認できます。 24
26. コストが10000ドルを超えるものをハイライトします。 書式からハイライトを選び、 名前はコスト多い、として、 バックグランドカラーを選んで、 列にCost を選んで、演算子は、>= (大なりイコール) 、式には、10000を指定しま す。 適用をクリックすると、一件だけハイライトされました。 25
27. これらのリストをプロジェクトごとの表示に切り替えます。 アクションから書式、コントロール・ブレークを選びます。 列の指定で、Projectを選んで、適用をクリックします。 プロジェクトごとのリストになりました。 26
28. プロジェクトごとのコストの合計とバジェットの合計も加えてみます。 アクションのデータの集計より、Costをまず追加して、つぎにBudgetを追加します。 集計結果が表示されています。 27
29. このレポートをExcel形式でダウンロードします。 アクション・メニューからダウンロードを選び、Excelを選択します。 そして、ダウンロードを実行します。 Excelファイルがダウンロードされたので、ファイルを開いて確認します。 画面上に設定したとおりにExcelのファイルが作成されていることが確認できました。 (確認したら、ダウンロードのダイアログは閉じる) 28
30. このように登録したレポートの形式を保存することができます。 アクションのレポートのレポートの保存を選びます。 名前を、プロジェクトごとの集計、とし、 適用をクリックします。 レポートが保存されました。 一旦、プライマリ・レポートに戻り、リセットをします。 それから保存したレポートを呼び出すと、設定した形式のレポートが復元されます。 29
31. (画面はレポートをリセットしているが、リセットしなくてもよい) このレポートとフォームのページも、カスタマイズすることができます。 フォームを開きます。 簡単なところでは、ステータスですが、現在は文字列による入力になっています。 クイック編集をクリックし、ステータスを選択します。 30
32. クイック編集からページ・デザイナを開いたので、P5_STATUSが選択済みで、そのタ イプがテキスト・フィールドになっていることが確認できます。 このタイプを選択リストに変更するのですが、今回はLOVを共通コンポーネントとし て作成します。 共有コンポーネントを呼び出します。 31
33. 他のコンポーネントに含まれる、LOVを開きます。 新規にLOVを作成するので、作成をクリックします。 LOVの作成は、最初から行います。そのまま、次へ進みます。 名前をSTATUS_LOVとし、LOVはSQLから作るので、タイプはDynamicのままにしま す。 次をクリックします。 データ・ソースはローカル・データベースのままで、ソース・タイプをSQL Queryと します。 表TASKSより、STATUSを取得するSQLを入力します。 次をクリックします。 戻り列としてRを選択します。表示列はDです。最後に、作成をクリックします。 ---- SQL自体はデモのための便宜的なものです。 通常は select id r, status d from status_table 32
34. のように、返り値はID、表示値は名前、となるSQLを指定します。 または、このようにLOVを保持している表である場合はSQLを記述せず、表自体を ソースとして指定できます。 このデモでは、LOVを保持している表がありません。 32
35. LOVの一覧にSTATUS_LOVがあることを確認します。 ページの編集５をクリックし、ページ・デザイナに戻ります。 33
36. ページ・アイテムのP5_STATUSを選択し、 タイプを選択リストに切り替えます。 そして、LOVのタイプを共有コンポーネントに変更し、 LOVとして先程作成した、STATUS_LOVを選びます。 保存を行います。 Tasksレポートのタブに切り替え、フォームを一旦閉じます。 再度、フォームを開き、ステータスが選択リストになっていることを確認します。 34
37. (フォームを閉じて、ホームに戻る) 次にカレンダのページを確認します。 アップロードしたプロジェクトとタスクのデータにStart Dateという日付データが含 まれているので、カレンダも自動的に生成されています。 --- (追加説明はじまり) --- カレンダ上の項目をクリックすることで、編集フォームが開くようにします。(クリッ クしても、今は開かない) ページの編集をクリックします。 35
38. カレンダ・リージョンを選択し、プロパティ・エディタよりAttributesを開きます。 リンクの生成をページ５にします。 リンクの表示/編集をページ５、 フォームに渡す値はP5_ID、＆ID.とします。 保存して、カレンダのタブに切り替えます。 36
39. （ページをリロードします) 項目をクリックしてフォームを開きます。フォームが開くことが確認できます。 これでレポートからだけでなく、カレンダからもタスクの編集が可能になりました。 （しなくても良いが、取り消しをクリックして、フォームを閉じます。） 37
40. (ページ・デザイナにタブを切り替えます） 今まで紹介したページの他に、使い勝手のよいコンポーネントとして対話グリッドが あります。 対話グリッドのページを追加してみましょう。 ＋プラス・メニューからページを実行し、ページの作成を開始します。 フォームから編集可能対話グリッドを選びます。 ページ名をグリッド編集として、新規ナビゲーションメニューエントリの作成を選び ます。 次へ移り、編集対象を表として、TASKSを選んで、編集が有効であることを確認して 作成を実行します。 ページが作成されました。実行してみます。 38
41. 対話グリッドの画面です。対話グリッドでは、表示されているレポートのデータを直 接、編集できます。 --- (追加説明はじまり) --- 先程作成した、共有コンポーネントのSTATUS_LOVですが、対話グリッドでも利用で きます。 ページの編集をクリックします。 39
42. 列にあるSTATUSを選択し、 タイプを選択リストに切り替えます。 そして、LOVのタイプを共有コンポーネントに変更し、 LOVとして、STATUS_LOVを選びます。 保存を行います。 グリッド編集のタブに切り替え、一旦、ブラウザをリロードします。 対話グリッド上のステータスをダブルクリックすると、選択リストになっていること を確認できます。 40
43. いわゆる、ユーザーが利用するアプリケーションとして生成されたページについて説 明してきましたが、 アプリケーションを作成する際に、機能として追加したものが管理メニューに作成さ れています。 サイド・メニューを開いて、管理を選びます。 --- (スキップのための説明) --- アプリケーション作成ウィザードで指定した、いろいろな機能が提供されています。 41
44. 機能としてフィードバックを指定しているので、こちらにフィードバックへのリンク があります。 フィードバックを入れてみましょう。 エクスペリエンスに笑顔を選択して、フィードバックとして、デモ実施、と入れま す。 フィードバックの作成をクリックします。フィードバックが発行されました、と表示 されました。 画面をリフレッシュして、フィードバックが登録されていることが確認できます。 入力されたフィードバックはユーザー・フィードバックから確認できます。 (取り消し、クローズを行って、フォームを閉じます。) 42
45. ユーザー・インターフェースも変更することができます。 （では、ユーザー・インターフェースを変更してみましょう。） テーマ・スタイルの選択をクリックします。 デクストップ・テーマ・スタイルよりRedwood Lightを選択します。 変更の適用をクリックします。 見た目が変更されることが確認できます。 これらは、開発ツールを使うことでも実施可能な作業ですが、機能として追加するこ とで、開発者ツールにアクセスできないアプリケーション管理者でも作業をすること を可能にしています。 43
46. 利用状況のレポートや、 (個別のレポートについては説明を省きます) 44
47. 組み込みのアクセス制御に、ユーザーを追加したり、 リーダー権限を明示的に割り当てていなくても、アプリケーションにアクセス可能に するといった設定ができます。 45
48. (ページ・デザイナのタブに切り替えます) このアプリケーションは、アップロードしたCSVファイルから作成しましたが、それ 以外の方法でもアプリケーションを作成することができます。 SQLワークショップより、作成済みの表TASKSを選びます。既存の表をもとに、アプ リケーションの作成を行います。 46
49. アプリケーションを実行します。 実際は先ほどと同じアプリケーションが出来上がっています。 47
50. このほかには、表定義をもとにアプリケーションを作成することもできます。 SQLワークショップのユーティリィに含まれる、クイックSQLを開きます。 そして表の定義を入力します。 SQLの生成をクリックします。 SQLスクリプトの保存をクリックし、スクリプト名をtasksとし、一旦、スクリプトを 保存します。 スクリプトを保存したのち、レビューおよび実行、をクリックします。 48
51. スクリプトの実行、即時実行、そこからアプリケーションの生成を呼び出します。 名前はTasks2とします。 この場合は、ページの自動生成をするには情報が不足しているため、レポートと フォームのページのみ自動生成されています。 アプリケーションの作成をクリックします。 49
52. (最初に作成したアプリケーションが開いているタブに切り替える) 作成されたアプリケーションですが、デベロッパーツールを動かして、iPhoneでの見 え方を確認してみます。 (Chromeの場合)表示、から、開発/管理、デベロッパー・ツールを実行します。デバ イスの選択メニューが表示されるので、何かスマホ(iPhoneでなくても良い)を選びま す。 “Toggle Device Toolbar”のアイコンをクリックし、デバイス・ツール・バーを表示さ せます。 (デモの最後なので、以下は適当に操作をして、それぞれ見え方を確認します。iPadな ど、デバイスを切り替えるのもよいでしょう。) ダッシュボードはこのように表示されます。ファセット検索はこのように表示されま す。レポートとフォーム、カレンダは、こう。 このように、アプリケーションにはレスポンシブ・デザインが採用されており、その ままの状態で小さい画面でも適切に表示されるようになっています。 50