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

Slide 1

Slide 1 text

Oracle Cloud Free TierのATPに実装されたOracle APEX 20.2でのデモンストレーション手順。スクリプト通りに話して、30分から40分、くらいは時間が必要でしょう。 1

Slide 2

Slide 2 text

(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

Slide 3

Slide 3 text

（Oracle APEXの開発環境にサインインします。）アプリケーション・ビルダーを開いて、作成、ファイルから、を呼び出します。 3

Slide 4

Slide 4 text

ファイルの選択をクリックして、先程ののCSVファイルを選択し、アップロードします。 4

Slide 5

Slide 5 text

文字が化けているので、ファイル・エンコーディングを日本語(Shift-JIS)にします。プレビューが正しく日本語で表示されます。ここに表示されているデータがデータベースに取り込まれます。ロード先は新規に表を作成するので、新規表とし、表名はTASKSとします。最初の行はヘッダーですので、最初の行にヘッダーが含まれる、のチェックはそのままにしておきます。 (画面のどこかをクリックすると、構成ボタンが現れます）構成をクリックして、作成される表の定義を確認します。 5

Slide 6

Slide 6 text

プレビューしたデータから、列名が先頭行から決まっていること、 START_DATEとEND_DATEはDATE型、 BudgetとCostにはNUMBER型が選ばれていることが確認できます。特に変更は不要なので、そのまま、ダイアログを閉じます。 6

Slide 7

Slide 7 text

データ・ロードを実行します。含まれている行数が73行なので、全件ロードができています。ロードされたデータを元に、アプリケーションの作成を実行します。 7

Slide 8

Slide 8 text

アプリケーション作成ウィザードが開きます。アプリケーションの名前をタスクとします。５種類のページが、自動的に作成されます。どのようなページが作成されるかは、アプリケーションを作成したのちに確認します。アプリケーション作成ウィザードによって生成される機能は、すべてチェックします。アプリケーションの作成を実行します。ここでは、コードを生成しているのではなく、アプリケーションとなるメタデータを生成しています。 8

Slide 9

Slide 9 text

29のページが自動的に生成されました。作成されたアプリケーションを実行します。 9

Slide 10

Slide 10 text

アプリケーションにサインインします。ホーム・ページです。それぞれ、ダッシュボード、検索画面、編集を行う画面、カレンダー表示を行う画面へのリンクが作成されています。また、これはサイドメニューのナビゲーションからもアクセスできるようになっています。 --- (追加説明はじまり) --- 少々、横道にそれて、先ほどのユーザー認証について説明します。デフォルトではOracle APEXに登録されているユーザーで認証されますが、認証に使う方式は、別の組み込みのスキームも使用できますし、カスタムで作り込むことも可能です。 10

Slide 11

Slide 11 text

共有コンポーネントに認証スキームというのがあり、標準ではApplication Expressアカウントです。作成、をクリックし、 (認証スキームのメソッドをギャラリからの事前構成済みスキームに基づくのまま、次へすすんで) スキームタイプとして、色々と標準で使える認証スキームがありますが、この中で、ソーシャル・サインインというのがあります。そちらを選んでみます。認証プロバイダとして、OpenID Connect、汎用OAuth2といった認証プロトコルをあらかじめ組み込まれています。 Oracle APEXの将来のバージョンでは、SAML認証もサポートされる予定です。アプリケーションで一番最初に気になる認証について、少々触れてみました。（実行済みのアプリケーションのタブ、タスクと表示されているタブへ戻る) 11

Slide 12

Slide 12 text

--- (追加説明はじまり) --- では、作成されたアプリケーションの説明に戻ります。 --- (追加説明おわり) --- まず、ダッシュボードページを見てみましょう。 12

Slide 13

Slide 13 text

与えられたデータ、今回はプロジェクトとタスクの情報が含まれたCSVファイルですが、そのデータの型や、データそれ自体から、できるだけ推測してチャートを自動生成しています。プロジェクトはプロジェクトごとに含まれるタスクの数を棒グラフにしています。ステータスはそれぞれのステータスの割合をパイチャートにしています。 Assigned Toは、担当者に割りあっているタスクの数を多い順から棒グラフにしています。最後にCostは、コストごとのタスクの数を棒グラフにしています。自動的に生成されたチャートが有益でない場合は、もちろん、修正することができます。 --- (追加説明はじまり) --- https://apex.oracle.com/charts (別のタブで開く) Oracle APEXの組み込みのチャート・コンポーネントです。エリア・チャート、バー・チャート、その他、色々な種類のチャートが提供されています。 https://apex.oracle.com/pls/apex/f?p=18290:1:::::: (別のタブで開く) 標準のチャート以外でも、例えば有名なD3などのチャートをプラグインとして組み込 13

Slide 14

Slide 14 text

んで利用している方もいらっしゃいます。 --- (追加説明おわり) --- Costのグラフは、今一つであることは確かなので、プロジェクトごとのコストの合算に変更してみます。クイック編集から、Costを選びます。 13

Slide 15

Slide 15 text

シリーズのSQLを更新します。 select project, sum(cost) value from TASKS group by project order by 2 desc ラベルをPROJECTにします。保存します。 14

Slide 16

Slide 16 text

では、先ほどのプロジェクトのアプリケーションを開きます。 (ダッシュボードのタブを開く) リフレッシュするだけで、変更が反映されます。 (ブラウザの画面からリロードを行う) プロジェクトごとのコストの合計がチャート表示されています。 15

Slide 17

Slide 17 text

ダッシュボードの次に、検索ページを見てみましょう。 Tasks検索を開きます。ファセット検索のページが自動的に作成されています。 16

Slide 18

Slide 18 text

ファセット検索は、ECサイトなどによく使われている検索ページの形式になります。ファセットとして、Assigned To、Budget、Project、Status、Costがあります。これらの検索条件は、データベースに保存されているデータ型や統計情報から導き出されています。 Oracle APEX 20.2の新機能として、それぞれのファセットごとにグラフ表示を行う機能も追加されています。 Assigned Toを開いて確認すると、北本さんと田中さんがそれぞれ１４件で一番多くタスクがアサインされていることが確認できます。プロジェクトをレガシー・サーバー移行に絞ってみると、グラフの表示が変わります。パイチャートに変更することもできます。 (チャートを閉じる) ファセットの指定により、レポートのリストも変更されています。 17

Slide 19

Slide 19 text

バジェットが2000ドルを超えているタスクが４件あるので、それをリストしましょう。 18

Slide 20

Slide 20 text

このように自動的に作成されているファセット検索のページですが、ファセットやレポートなどをカスタマイズすることが可能です。レポートをリセットします。 (コストは一番下にあるのでスクロールさせる) 例えばコストですが、1000以上ではなく、1000-2000のレンジと2000以上に分割してみます。クイック編集でファセットを選びます。 19

Slide 21

Slide 21 text

P3_COSTを選択します。LOVのタイプの静的値を開きます。レンジを指定する行を追加します。変更を保存し、アプリケーションのページに戻ります。 (Tasks検索のタブに移動する) 20

Slide 22

Slide 22 text

(ブラウザからリロードする) (見づらいのでAssigned Toのファセットを閉じる) アプリケーションをリフレッシュし、コストをみると変更されていることが確認できます。コストが2000ドル以上のものは８件です。 21

Slide 23

Slide 23 text

(ホームに戻って) では次に、データの編集画面を確認します。Tasksレポートを開きます。レポートと編集フォームのページが作成されています。 22

Slide 24

Slide 24 text

例えば、一番上のプロジェクト、APEXウェブサイト構築、タスク名のパイロット・ワークスペース作成のバジェットを100から200へ変更します。編集アイコンをクリックし、開いたフォームから、100を200へ変更します。変更の適用をクリックすると、バジェットが変更されたことが確認できます。 23

Slide 25

Slide 25 text

レポートのページとして対話モード・レポートというコンポーネントが使用されています。このコンポーネントでは、表示形式の色々なカスタマイズ方法が提供されています。アクションメニューのデータのソートから、バジェットの多い順番にタスクを並び替えてみます。 Budgetを選んで、方向を降順にします。12000ドルが一番多いバジェットで、降順にならんでいることが確認できます。 24

Slide 26

Slide 26 text

コストが10000ドルを超えるものをハイライトします。書式からハイライトを選び、名前はコスト多い、として、バックグランドカラーを選んで、列にCost を選んで、演算子は、>= (大なりイコール) 、式には、10000を指定します。適用をクリックすると、一件だけハイライトされました。 25

Slide 27

Slide 27 text

これらのリストをプロジェクトごとの表示に切り替えます。アクションから書式、コントロール・ブレークを選びます。列の指定で、Projectを選んで、適用をクリックします。プロジェクトごとのリストになりました。 26

Slide 28

Slide 28 text

プロジェクトごとのコストの合計とバジェットの合計も加えてみます。アクションのデータの集計より、Costをまず追加して、つぎにBudgetを追加します。集計結果が表示されています。 27

Slide 29

Slide 29 text

このレポートをExcel形式でダウンロードします。アクション・メニューからダウンロードを選び、Excelを選択します。そして、ダウンロードを実行します。 Excelファイルがダウンロードされたので、ファイルを開いて確認します。画面上に設定したとおりにExcelのファイルが作成されていることが確認できました。 (確認したら、ダウンロードのダイアログは閉じる) 28

Slide 30

Slide 30 text

このように登録したレポートの形式を保存することができます。アクションのレポートのレポートの保存を選びます。名前を、プロジェクトごとの集計、とし、適用をクリックします。レポートが保存されました。一旦、プライマリ・レポートに戻り、リセットをします。それから保存したレポートを呼び出すと、設定した形式のレポートが復元されます。 29

Slide 31

Slide 31 text

(画面はレポートをリセットしているが、リセットしなくてもよい) このレポートとフォームのページも、カスタマイズすることができます。フォームを開きます。簡単なところでは、ステータスですが、現在は文字列による入力になっています。クイック編集をクリックし、ステータスを選択します。 30

Slide 32

Slide 32 text

クイック編集からページ・デザイナを開いたので、P5_STATUSが選択済みで、そのタイプがテキスト・フィールドになっていることが確認できます。このタイプを選択リストに変更するのですが、今回はLOVを共通コンポーネントとして作成します。共有コンポーネントを呼び出します。 31

Slide 33

Slide 33 text

他のコンポーネントに含まれる、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

Slide 34

Slide 34 text

のように、返り値はID、表示値は名前、となるSQLを指定します。または、このようにLOVを保持している表である場合はSQLを記述せず、表自体をソースとして指定できます。このデモでは、LOVを保持している表がありません。 32

Slide 35

Slide 35 text

LOVの一覧にSTATUS_LOVがあることを確認します。ページの編集５をクリックし、ページ・デザイナに戻ります。 33

Slide 36

Slide 36 text

ページ・アイテムのP5_STATUSを選択し、タイプを選択リストに切り替えます。そして、LOVのタイプを共有コンポーネントに変更し、 LOVとして先程作成した、STATUS_LOVを選びます。保存を行います。 Tasksレポートのタブに切り替え、フォームを一旦閉じます。再度、フォームを開き、ステータスが選択リストになっていることを確認します。 34

Slide 37

Slide 37 text

(フォームを閉じて、ホームに戻る) 次にカレンダのページを確認します。アップロードしたプロジェクトとタスクのデータにStart Dateという日付データが含まれているので、カレンダも自動的に生成されています。 --- (追加説明はじまり) --- カレンダ上の項目をクリックすることで、編集フォームが開くようにします。(クリックしても、今は開かない) ページの編集をクリックします。 35

Slide 38

Slide 38 text

カレンダ・リージョンを選択し、プロパティ・エディタよりAttributesを開きます。リンクの生成をページ５にします。リンクの表示/編集をページ５、フォームに渡す値はP5_ID、＆ID.とします。保存して、カレンダのタブに切り替えます。 36

Slide 39

Slide 39 text

（ページをリロードします) 項目をクリックしてフォームを開きます。フォームが開くことが確認できます。これでレポートからだけでなく、カレンダからもタスクの編集が可能になりました。（しなくても良いが、取り消しをクリックして、フォームを閉じます。） 37

Slide 40

Slide 40 text

(ページ・デザイナにタブを切り替えます）今まで紹介したページの他に、使い勝手のよいコンポーネントとして対話グリッドがあります。対話グリッドのページを追加してみましょう。＋プラス・メニューからページを実行し、ページの作成を開始します。フォームから編集可能対話グリッドを選びます。ページ名をグリッド編集として、新規ナビゲーションメニューエントリの作成を選びます。次へ移り、編集対象を表として、TASKSを選んで、編集が有効であることを確認して作成を実行します。ページが作成されました。実行してみます。 38

Slide 41

Slide 41 text

対話グリッドの画面です。対話グリッドでは、表示されているレポートのデータを直接、編集できます。 --- (追加説明はじまり) --- 先程作成した、共有コンポーネントのSTATUS_LOVですが、対話グリッドでも利用できます。ページの編集をクリックします。 39

Slide 42

Slide 42 text

列にあるSTATUSを選択し、タイプを選択リストに切り替えます。そして、LOVのタイプを共有コンポーネントに変更し、 LOVとして、STATUS_LOVを選びます。保存を行います。グリッド編集のタブに切り替え、一旦、ブラウザをリロードします。対話グリッド上のステータスをダブルクリックすると、選択リストになっていることを確認できます。 40

Slide 43

Slide 43 text

いわゆる、ユーザーが利用するアプリケーションとして生成されたページについて説明してきましたが、アプリケーションを作成する際に、機能として追加したものが管理メニューに作成されています。サイド・メニューを開いて、管理を選びます。 --- (スキップのための説明) --- アプリケーション作成ウィザードで指定した、いろいろな機能が提供されています。 41

Slide 44

Slide 44 text

機能としてフィードバックを指定しているので、こちらにフィードバックへのリンクがあります。フィードバックを入れてみましょう。エクスペリエンスに笑顔を選択して、フィードバックとして、デモ実施、と入れます。フィードバックの作成をクリックします。フィードバックが発行されました、と表示されました。画面をリフレッシュして、フィードバックが登録されていることが確認できます。入力されたフィードバックはユーザー・フィードバックから確認できます。 (取り消し、クローズを行って、フォームを閉じます。) 42

Slide 45

Slide 45 text

ユーザー・インターフェースも変更することができます。（では、ユーザー・インターフェースを変更してみましょう。）テーマ・スタイルの選択をクリックします。デクストップ・テーマ・スタイルよりRedwood Lightを選択します。変更の適用をクリックします。見た目が変更されることが確認できます。これらは、開発ツールを使うことでも実施可能な作業ですが、機能として追加することで、開発者ツールにアクセスできないアプリケーション管理者でも作業をすることを可能にしています。 43

Slide 46

Slide 46 text

利用状況のレポートや、 (個別のレポートについては説明を省きます) 44

Slide 47

Slide 47 text

組み込みのアクセス制御に、ユーザーを追加したり、リーダー権限を明示的に割り当てていなくても、アプリケーションにアクセス可能にするといった設定ができます。 45

Slide 48

Slide 48 text

(ページ・デザイナのタブに切り替えます) このアプリケーションは、アップロードしたCSVファイルから作成しましたが、それ以外の方法でもアプリケーションを作成することができます。 SQLワークショップより、作成済みの表TASKSを選びます。既存の表をもとに、アプリケーションの作成を行います。 46

Slide 49

Slide 49 text

アプリケーションを実行します。実際は先ほどと同じアプリケーションが出来上がっています。 47

Slide 50

Slide 50 text

このほかには、表定義をもとにアプリケーションを作成することもできます。 SQLワークショップのユーティリィに含まれる、クイックSQLを開きます。そして表の定義を入力します。 SQLの生成をクリックします。 SQLスクリプトの保存をクリックし、スクリプト名をtasksとし、一旦、スクリプトを保存します。スクリプトを保存したのち、レビューおよび実行、をクリックします。 48

Slide 51

Slide 51 text

スクリプトの実行、即時実行、そこからアプリケーションの生成を呼び出します。名前はTasks2とします。この場合は、ページの自動生成をするには情報が不足しているため、レポートとフォームのページのみ自動生成されています。アプリケーションの作成をクリックします。 49

Slide 52

Slide 52 text

(最初に作成したアプリケーションが開いているタブに切り替える) 作成されたアプリケーションですが、デベロッパーツールを動かして、iPhoneでの見え方を確認してみます。 (Chromeの場合)表示、から、開発/管理、デベロッパー・ツールを実行します。デバイスの選択メニューが表示されるので、何かスマホ(iPhoneでなくても良い)を選びます。 “Toggle Device Toolbar”のアイコンをクリックし、デバイス・ツール・バーを表示させます。 (デモの最後なので、以下は適当に操作をして、それぞれ見え方を確認します。iPadなど、デバイスを切り替えるのもよいでしょう。) ダッシュボードはこのように表示されます。ファセット検索はこのように表示されます。レポートとフォーム、カレンダは、こう。このように、アプリケーションにはレスポンシブ・デザインが採用されており、そのままの状態で小さい画面でも適切に表示されるようになっています。 50