F1より速く - F1グランプリのアプリをAPEXで作成する

2022年5月20日に開催されたOracle Developer Days 2022 Springのセッション資料です。

セッションで実施したアプリケーション作成の手順を記載しています。

1. みなさん、こんにちは。 本セッションに、ご参加いただき、ありがとうございます。 本⽇は、オラクル・コーポレーションが開発している、ローコード・アプリ ケーション開発プラットフォームである、Oracle APEXを使って、ウェブ・ アプリケーションを開発する⽅法を紹介いたします。 アプリケーションの開発は、０から始めて、このセッションの持ち時間であ る６０分以内に完了します。 1
2. 本⽇のアジェンダになります。 最初に、Oracle APEXについて、簡単に紹介いたします。 続いて、今季のF1グランプリのデータを元に、⼀通りの機能を持ったウェ ブ・アプリケーションを、Oracle APEXを使って開発します。 最後に、Oracle APEXを使ってみようと思われた⽅に向けて、役に⽴つリン クや情報を紹介いたします。 2
3. はじめに、アプリケーションの作成に⼊る前に、少しだけ、製品について紹 介させていただきます。 Oracle APEXはOracle Databaseで動作する、エンタープライズ・アプリケー ション向けのローコード・アプリケーション開発プラットフォームです。 Oracle Databaseとブラウザだけで、アプリケーションの開発、および開発し たアプリケーションの実⾏を⾏います。 Oracle APEXは、Oracle Databaseの無償オプションとして、すべてのエディ ションに含まれています。 無料で利⽤できるOracle Database Express Editionでも、使うことができま す。 また、Oracle Cloudで提供している、期限なしで無料で利⽤できる、Always FreeのAutonomous Database上でも利⽤できます。 機能制限のない環境を無料で使え、また、その環境もすぐに作成できます。 3
4. 簡単に使い始めることができ、実機で学習を進めることができます。 Oracle Database Express EditionやAlways FreeのAutonomous Databaseは、 オラクルからサポートは提供されませんが、利⽤に関してライセンス上の制 限はありません。 そのため、CPUやディスクのリソースが許す範囲で、作成したアプリケー ションを社内の業務で使⽤したり、社外向けのサービスとして使⽤すること も可能です。 データ・ソースとしては、SQL、つまりリレーショナル・データベースと、 REST APIの呼び出しによる、ネットワーク上のリソースを扱うことができま す。 APEXで作成したアプリケーションは、Oracle Database上で動作するため、 Oracle Databaseが提供する、スケーラビリティや、セキュリティの機能を、 そのまま利⽤できます。 それに加えて、APEXにより、レスポンシブなユーザー・インターフェースが 提供されます。 Oracle APEXは20年近く、Oracle Databaseの無料のオプションとして提供さ れており、世界中のOracle Databaseの導⼊先の、多くの利⽤者によって活⽤ されています。 3
5. 英語: 4:48 では、ここから実際にアプリケーションの開発を始めます。 4
6. Act(1): アプリケーションの元データとなるf1-races-2022.jsonを開く。 こちらのJSONのファイルを、データベースにインポートして、アプリケー ションの作成を始めます。 このJSONのファイルには、2022年のシーズンの、F1レースの開催データが 含まれています。 (拡⼤はMacのVS Codeでは Shift + Command + - (マイナス)、検索は Command + F) Act(2): Suzukaで検索し、JAPANESE GRAND PRIX 2022のデータを表⽰する。 それぞれのレースの 公式サイト上の、詳細ページへのリンク、 レースのタイトル、 コースの画像、 予選の開始⽇と本戦の終了⽇、 5
7. 開催都市と、その都市の緯度経度、 開催国、 開催国の国旗の画像 が、含まれます。 2022年のシーズンは、全部で22のレースが予定されています。 これから作成するアプリケーションは、データベースに投⼊された、これら のデータを使って、 ⾊々な条件でレースを検索し、選択できるようにします。 そして、世界中のあらゆる場所から、レースについて、コメントの投稿、お よび、参照がができるようにします。 では、Oracle APEXに移り、このアプリケーションの作成を進めます。 5
8. Act(1): apex.oracle.com を開く。 今回は最新バージョンのAPEX 22.1にアップグレードされた、 APEX.oracle.comの検証環境を使って、アプリケーションを開発します。 サインインします。 Act(2): サインインをクリックする。 Act(3): ワークスペースのリクエストにポインタを当てる。 検証環境を使⽤するにあたって、事前にワークスペースをリクエストする必 要があります。ワークスペースは、メール・アドレスだけで、無料で取得で きます。 今回は、すでに取得済みのワークスペースを使います。 Act(4): ワークスペース名、ユーザー名、パスワードを⼊⼒して、サインイン をクリックする。 6
9. Oracle APEXの先頭画⾯です。 6
10. では、開発を始めましょう。 Act(1): アプリケーション・ビルダーのアイコンにポインタを当てる。 アプリケーションの開発には、こちらのアプリケーション・ビルダーを使⽤ します。 Act(2): SQLワークショップのアイコンにポインタを当てる。 となりにあるSQLワークショップは、主にオラクル・データベースのオブ ジェクトの操作とSQLの実⾏を⾏います。 Act(3): チーム開発のアイコンにポインタを当てる。 チーム開発は、機能拡張や不具合の管理など、共同開発を⽀援するための機 能を提供しています。 Act(4): ギャラリのアイコンにポインタを当てる。 7
11. ギャラリーからは、サンプルとしてインストールできる、アプリケーション が提供されています。 /********************************** 時間が⾜りない場合はスキップする。 *********************************/ Act: 余裕があれば、それぞれ、１レベル下の画⾯を開いて戻る。 7
12. では、アプリケーションを新規作成をします。 Act(1): アプリケーション・ビルダーをクリックする。 アプリケーション・ビルダーを開いて、 Act(2) 作成、にポインタを合わせる。 アプリケーションの作成を実⾏します。（作成のクリックは、説明の後に⾏ う。） Act(3): インポート、にポインタを合わせる。 アプリケーションの作成⽅法としては、新規に作成する以外に、ファイルか らインポートして作成することもできます。 インポートに使うファイルは、完成したアプリケーションを、ファイルにエ クスポートして作成します。 8
13. Act(4): 作成をクリックする。 アプリケーションを作成する⽅法は、いくつかあります。 Act(5): ファイルから、にポインタを合わせる。 今回は、元となるデータが、JSONファイルとしてあるので、ファイルから、 を選択してアプリケーション作成を始めます。（まだクリックしない） Act(6): 新規アプリケーション、にポインタを合わせる。 データベースに保存されている表のデータや、REST APIを呼び出した結果を 使う場合は、こちらの新規アプリケーションを選択します。 Act(7): スターター・アプリケーション、にポインタを合わせる。 スターター・アプリケーションは、ギャラリとして提供されているサンプ ル・アプリケーションのことです。 Act(8): ファイルから、をクリックする。 では、先ほどのJSONファイルを元にして、アプリケーションの作成を⾏いま す。 8
14. ファイルのアップロード、または、データをコピー・アンド・ペーストする 画⾯が開きます。 今回のアプリケーションの元となるJSONファイルを選択します。 Act(1): JSONファイルをドラッグ＆ドロップするか、ファイルの選択をク リックして、JSONファイルを選択する。 表の指定画⾯が開く。 アップロードされたデータを確認します。 Act(2): プレビューをクリックする。開いた画⾯を上下にスクロールさせる。 アップロードされたJSONファイルの内容が、プレビューされています。 URL、CITY、FLAG、IMAGE、などが確認できます。 Act(3): ダイアログを閉じるをクリックする。 9
15. では、このデータを投⼊する表の名前を⼊⼒します。 Act(4): ロード先の新規表にポインタを合わせる。 データを保存する表は、新規に作成します。 Act(5): 表名にRACESと⼊⼒する。 表の名前はRACESとします。 これで、アップロードされたデータは、データベースにある表RACESに保存 されます。 では、データのロードを開始します。 Act(6): データのロードをクリックする。 9
16. スピナーが表⽰される。 データのロードが⾏われています。 22⾏を含む表RACESが作成されました。と表⽰される。 データのロードが完了しました。 表RACESが作成されて、２２⾏のデータ、つまり、それぞれのレースの情報 が、作成された表に保存されています。 では、これから、この表を元にした、アプリケーションの作成に移ります。 Act(1): アプリケーションの作成をクリックする。しばらく待つ。 アプリケーション作成ウィザードが起動される。 アプリケーション作成ウィザードが起動しました。 10
17. アプリケーション作成ウィザードでは、これから作成するアプリケーション の設定を⾏います。 これらの設定は、アプリケーションを作成した後でも、⾃由に変更できます。 Act(1): 新規アイコンの選択をクリックして、アプリケーション・アイコンを 開く。 提供されているアイコンから、アプリケーションのアイコンを選んだり、独 ⾃のアイコンをアップロードすることができます。 Act(2): 取消をクリックして、ダイアログを閉じる。 Act(3): 名前の先頭にF1-を⼊⼒する。 作成するアプリケーションの名前を設定します。 名前はF1-Racesとします。 11
18. アプリケーションの⾒た⽬、外観を変更します。 Act(4): 外観を開く。 いくつかの選択肢から、テーマ・スタイルを選択できます。 今回はVita ‒ ダークを選択します。 Act(5): Vita ‒ ダークを選択する。 ナビゲーションは、サイド・メニューを選択します。 Act(6): サイド・メニューを選択する。 サイド・メニューの他には、画⾯の上にメニューを表⽰する、トップ・メ ニュー、ひとつの⼤きなメニューを表⽰させるメガ・メニュー、なども選ぶ ことができます。 Act(7): スクロールしてメガメニューを表⽰させる。 変更を保存します。 Act(8): 変更の保存をクリックする。 ページには、これから作成されるアプリケーションに含まれるページがリス トされています。 Act(9): 下にスクロールして、機能と設定を画⾯に表⽰させる。 機能として、Oracle APEXが標準で提供している、アプリケーションに組み 込み可能な機能を選択することができます。 例えばプログレッシブ・ウェブ・アプリケーションのインストールを選択す ると、スマートフォンやタブレットのホーム画⾯に、このアプリケーション のアイコンを作成することができます。 Act(10): プログレッシブ・ウェブ・アプリケーションにチェックを⼊れる。 その他にも、組み込みのアクセス制御などの機能もあります。 Act(11): アクセス制御にポインタを合わせる。チェックはしない。 11
19. Act(12): 設定にポインタを合わせる。 設定では、アプリケーションの⾔語を選んだり、アプリケーションを認証す る⽅式なども選ぶことができます。 Act(13): ⾔語のセレクト・リストを開く。⽇本語から変更はしない。 Act(14): 認証のセレクト・リストを開く。Oracle APEXアカウントから変更 はしない。 11
20. これから、作成するページを調整します。 Act(1): スクロールして、ページの⼀覧に表⽰を戻す。 作成するアプリケーションには、 ファセット検索のページ、 対話モード・レポートとフォームのページ、 カレンダのページ、 それと地図のページ を含めるようにします。 Act(2): ホーム・ページにポインタを当てる。 ホーム・ページには、他に作成されているページへの、ナビゲーションが作 12
21. 成されます。 これは削除します。 ホーム・ページの編集をクリックします。 Act(3): ホームの編集をクリックする。 削除をクリックします。 Act(4): 削除をクリックする。 ダイアログが閉じ、元の画⾯に戻る。 続いて、ダッシュボードのページを削除します。 編集をクリックします。 Act(5): ダッシュボードの編集をクリックする。 ダッシュボードには、⾯、棒、折れ線、円といったチャートが⾃動的に⽣成 されるようになっていますが、これ以外にも⾊々な形式のチャートが利⽤可 能です。 今回のデモでは、チャートのページの作成⽅法については触れないので、削 除します。 Act(6): 削除をクリックする。 12
22. ⾃動的に⽣成されるページを、改良します。 まずは、ファセット検索のページを改良します。 ファセット検索の、編集をクリックします。 Act(1): ファセット検索の編集をクリックする。 検索結果の表⽰を、レポートからカードに変更します。 画像を含んだ表⽰は、カードの⽅が向いています。 Act(2): カードを選択する。表⽰形式の選択肢が表⽰される。 表⽰されるカードのレイアウトが選択できます。 今回はグリッドのまま変更しません。 Act(3): グリッドがデフォルトだが、グリッドをクリックする。 13
23. 続いて、カードに表⽰する項⽬ですが、 タイトル列として、COUNTRYを選択します。 Act(4): タイトル列をクリックして、COUNTRYを選択する。 ここで設定するのはこれだけで、後はアプリケーションを作成した後に改良 します。 変更を保存します。 Act(5): 変更の保存をクリックする。 13
24. 次に、対話モード・レポートとフォームを編集します。 Act(1): 対話モード・レポートの編集をクリックする。 Act(2): 表またはビューにポインタを置いた後、表またはビューのRACESへポ インタを移動する。 データ・ソースは表RACESになります。 Act(3): 対話モード・レポートにポインタを置く。 レポートの形式として、対話モード・レポートを選択します。 Act(4): フォームを含める、にポインタを置く。 フォームを含める、にチェックが⼊っているので、 表RACESの内容を⼀覧する、対話モード・レポートに加えて、 14
25. 表RACESに保存されている、データの編集に使う、フォームも作成されます。 Act(5): 取消をクリックする。 14
26. 最後に、カレンダのページを編集します。 Act(1): カレンダの編集をクリックする。 カレンダに表⽰する項⽬ですが、 表⽰列として、TITLEを選択します。 Act(2): 表⽰列にTITLEを選択する。 開始⽇列として、STARTDATEを選択します。 Act(3): 開始⽇列にSTARTDATEを選択する。 終了⽇列として、ENDDATEを選択します。 Act(4): 終了⽇列にENDDATEを選択する。 以上で、変更を保存します。 15
27. Act(5): 変更の保存をクリックする。 15
28. ひとつ、アプリケーションにページを追加します。 追加するのは、地図上に開催地を表⽰するページです。 Act(1): ページの追加をクリックする。 マップを選択します。 Act(2): マップを選択する。ページの設定画⾯が表⽰される。 ページ名は、レース開催地とします。 Act(3): ページ名に、レース開催地と⼊⼒する。 開催地の位置の情報は、表RACESから取り出します。 Act(4): 表としてRACESを選択する。 表RACESには、ジオメトリ列として、緯度LATITUDEと、経度LOGITUDEの 16
29. 情報が、それぞれ数値として保存されています。 そのため、ジオメトリ列タイプとして、２つの数値列を選択します。 Act(5): ジオメトリ列で２つの数値列を選択する。 経度の列として、LONG_を選択します。 Act(6): 経度列にLONG_を選択する。 緯度の列として、LATを選択します。 Act(7): 緯度列にLATを選択する。 さらに、ツールチップとして、レースのタイトルが表⽰されるようにします。 Act(8): ツールチップ列にTITLEを選択する。 以上でページの追加を実⾏します。 Act(9): ページの追加をクリックする。 地図のページとして、レース開催地が追加されました。 16
30. アプリケーションの作成を実⾏します。 Act(1): アプリケーションの作成をクリックする。 アプリケーションの作成が開始されます。 アプリケーションが作成される。 アプリケーションが作成されました。 まずは、アプリケーションを実⾏してみましょう。 Act: 実⾏をクリックする。 注意：セッション動画では、アプリケーション定義の簡易URLをOFFに切り 替えていますが、これは収録時にapex.oracle.comで障害が発⽣していたため で、それがなければ不要な操作です。 17
31. サインインの画⾯が開きます。 ユーザー名とパスワードを⼊⼒します。 Act(1): ユーザー名とパスワードを⼊⼒する。 サインインを実⾏します。 Act(2): サインインをクリックする。 18
32. 最初に表⽰されているのは、ファセット検索の画⾯です。 左側にファセットと呼ばれる、検索条件の設定があります。 ファセットに設定した条件で検索した結果が、右側にカードとして⼀覧され ます。 ファセットを使って、簡単に検索条件を設定できます。 Act(1): Countryのうち、United Statesにチェックを⼊れる。 設定した条件は、すぐにカードの⼀覧に反映されます。 Act(2): Countryのクリアをクリックして、検索条件をクリアする。 これから、もっとファセット検索の画⾯を使いやすくします。 /********************************** 時間が⾜りない場合はスキップする。 *********************************/ 19
33. Act(3): もう⼀度、United Statesにチェックを⼊れる。 Act(4): Lat、Long、Flagのファセットにポインタを当てる。 例えば、こちらの緯度経度に国旗のURLは、ファセットとしては役に⽴ちま せん。 Act(5): カードにポインタを当てる。 表⽰されているカードも、国の名前だけでは情報が⾜りていません。 これから、ファセットとカードの表⽰をカスタマイズします。 /* ************************************************************************ ************************ */ 19
34. ファセット検索のページを編集します。 Oracle APEXのワークスペースに、開発者としてサインインしていると、実 ⾏しているアプリケーションに開発者ツール・バーが表⽰されます。 Act(1): 開発者ツール・バーにポインタを当てる。 開発者ツール・バーからは、⾊々な開発機能を呼び出すことができます。 Act(2): 開発者ツール・バーのそれぞれの機能にポインタを当てる。 アプリケーションやページの編集画⾯、セッションやデバッグの情報を表⽰ する画⾯、デバッグ・ログの出⼒の開始や停⽌などです。 では、このファセット検索のページを編集します。 ページ１をクリックします。 Act(3): 開発者ツール・バーのページ１をクリックする。 20
35. ページ・デザイナが起動し、ファセット検索のページが開かれています。 ページの編集は、このページ・デザイナにて作業を⾏います。 Act(1): 左ペインにポインタを載せる。 左側のペインには、ページに含まれるコンポーネントがツリー形式で表⽰さ れます。 Act(1): レンダリング・ビューを開く。（デフォルトで開いているはず） これは、レンダリング・ビューです。 レンダリング・ビューでは、画⾯に表⽰されるコンポーネントが⼀覧されま す。 Act(2): 動的アクション・ビューを開く 動的アクションが⼀覧されるビューです。 21
36. 動的アクションは、ブラウザで実⾏されるJavaScriptの処理です。 Act(3): プロセス・ビューを開く プロセスが⼀覧されるビューです。 プロセスは、サーバーで実⾏されるPL/SQLの処理です。 Act(4): 共有コンポーネント・ビューを開く 共有コンポーネント・ビューです。 このページが参照している共有コンポーネントが⼀覧されます。 Act(5): レイアウト・ビューにポインタを合わせる。 真ん中は、レイアウト・ビューやヘルプが表⽰されます。 下の部分に、コンポーネント・ギャラリーがあり、レイアウト・ビューにド ラッグ・アンド・ドロップすることで、ページに新たにコンポーネントを配 置することができます。 Act(6): コンポーネント・ギャラリーから適当に選んで、レイアウト・ビュー に重ねる。ただし配置はしない。 Act(7): プロパティ・ビューにポインタを合わせる。 右ペインはプロパティ・エディタです。 選択したコンポーネントの属性の編集を⾏います。 今回はファセット検索を編集するので、検索を選択します。 Act(8): レンダリング・ビューで検索を選択する。 Act(9): リージョン・タブをクリックする。 リージョン・タブには、ファセットに限らず、リージョンの⼀般的な属性が 含まれます。 Act(10): 属性タブをクリックする。 21
37. 属性タブには、ファセットに特化した属性が含まれます。 21
38. Act(1): アプリケーションに移り、ファセット検索の画⾯を表⽰する。 Act(2):合計⾏数: 22にポインタを当てる。 まず、ここに表⽰されている合計⾏数というラベルですが、より適切な、 レース数、というラベルに変更します。 次に、ファセットにはチャートを表⽰する機能があります。 Act(3): Countryのファセットのメニューから、チャートの表⽰を実⾏する。 国別でのレース数が表⽰されますが、同じ国で開催されるレースは多くても ２つですから、あまり役に⽴つチャートではありません。 これらを変更します。 Act(4): 別のタブで開いているページ・デザイナに戻る。（リージョン検索の 属性が開いている） 22
39. 総⾏数ラベルに、レース数と⼊⼒し、チャートの表⽰をNo（ノー)に変更しま す。 Act(6): レース数の⼊⼒、チャートの表⽰をNoにする。 これで⼀旦、変更を保存して、ページを実⾏します。 ページの保存と実⾏をクリックします。 Act(7): ページの保存と実⾏をクリックする。 22
40. アプリケーションの変更を確認します。 Act(1): レース数のラベルにポインタを当てる。 検索結果の⾏数が、レース数というラベルに変わっています。 Act(2): Countryのメニューを開く。 ファセットのメニューに、チャートの表⽰が無くなっていることも確認でき ます。 次に、ファセットを変更します。 今の所、ファセットとしてLat、Long、Flagがあります。緯度、経度、国旗で す。 Act(3): ファセットLat、Long、Flagにポインタを当てる。 これは、あまり役に⽴たないので削除します。 23
41. 代わりに、開催する⽉（つき）を選択する、ファセットを追加します。 Act(4): ページ・デザイナのタブに移る。 23
42. レンダリング・ビューから、不要なファセットを削除します。 ファセットをひとつづつ削除することもできますが、今回は３つ⼀度に削除 します。 Act(1): Shiftを押しながら、P1_LAT、P1_LONG_、P1_FLAGのファセットを 選択する。 選択したら、コンテキスト・メニューを開きます。 Act(2): 選択したファセット上で、右クリック（⼆本指クリック - Mac）を⾏ い、コンテキスト・メニューを表⽰させる。 削除を実⾏します。 Act(3): メニュー上の、削除をクリックする。 不要なファセットが削除されました。 24
43. これからファセットを追加します。 その前に、表RACESには、開催⽉の列がありません。 開催⽉が、列の情報として得られるように、検索結果のソースを変更します。 開催⽉だけではなく、開催期間も列として追加します。 リージョン検索結果を選択します。 Act(1): レンダリング・ビューで検索結果を選択する。 ソースのタイプを、表/ビューから、SQL問合せに変更します。 Act(2): プロパティ・エディタのソースのタイプをSQL問合せに変更する。 Act(3): SELECT⽂にポインタを当てる。 表の指定と同じ結果が得られる、SELECT⽂に置き換わります。 25
44. Act(4): コード・エディタを開く。 この画⾯から直接SELECT⽂を変更できますが、変更したSQLを実⾏したいの で、このSQLをクリップボードにコピーします。 Act(5): SELECT ⽂を選択し、クリップボードをコピーする。 コピーしたSQLは、SQLワークショップのSQLコマンドで実⾏します。 Act(6): 取消をクリックする。 Act(7): 変更を保存し、SQLワークショップからSQLコマンドを実⾏する。 25
45. コピーしたSELECT⽂を、SQLコマンドに貼り付けます。 Act(1): SELECT⽂を貼り付ける。 このSELECT⽂に、開催⽉となる列MONTHと、開催期間となる列 MONT_DAYを追加します。 Act(2): SELECT⽂に列MONTH、MONTH_DAYの列を追加する。 これで、追加できました。SELECT⽂を実⾏して、結果を確認します。 実⾏をクリックします。 Act(3): 実⾏をクリックする。 検索結果を確認します。 Ac(4)t: 結果を右スクロールさせ、MONTHとMONTH_DAYを表⽰させる。 26
46. 開催⽉、開催期間ともに期待通りに表⽰されています。 では、このSELECT⽂をファセット検索のソースに戻します。 SELECT⽂をコピーします。 Act(5): SELECT⽂をコピーする。 アプリケーション・ビルダーに戻り、ページ・デザイナでファセット検索の ページをを開いて、検索結果のソースのSQL問合せを開きます。 Act(6): アプリケーション・ビルダーに戻り、アプリケーションを選択して開 く。ページ番号１のファセット検索のページをページ・デザイナで開く。 Act(7): ソースのSQL問合せを開く。 さきほど、検索結果を確認した、SELECT⽂に⼊れ替えます。 Act(8): SELECT⽂を選択して、ペーストを実⾏して内容を⼊れ替える。 SELECT⽂が⼊れ替わったので、検証をしてみます。 Act(9): 検証をクリックする。検証成功と表⽰されるはず。 検証が成功しました。 SELECT⽂に問題がないことが確認できたので、OKをクリックして、保存し ます。 Act: OKをクリックする。 26
47. それでは、追加した列MONTHを使ったファセットを作成します。 レンダリング・ビューのファセット上で、コンテキスト・メニューを表⽰さ せ、ファセットの作成を実⾏します。 Act(1): レンダリング・ビューのファセット上で、コンテキスト・メニューを 表⽰させる。 Act(2) ファセットの作成を実⾏する。 ファセットが作成されます。 このファセットの名前は、P1_MONTHとします。 Act(2): 名前にP1_MONTHを⼊⼒する。 MONTHという名前をつけているので、ソースの列としてMONTHが設定され ます。 27
48. Act(4): ソースを表⽰させる。 タイプは、チェック・ボックス・グループです。 Act(5): タイプにポインタを当てる。 ラベルは開催⽉とします。 Act(6): ラベルに開催⽉を⼊⼒する。 LOVのタイプとして、個別値を選択します。 Act(7): LOVのタイプに個別値を選択する。 以上で、開催⽉のファセットが作成できました。 ページを実⾏して、動作を確認してみます。 Act(8): ページを実⾏する。 27
49. 更新されたページが、表⽰されています。 Act(1): 開催⽉のファセットにポインタを当てる。 開催⽉のファセットが追加されています。 10⽉に開催されるレースを確認してみましょう。 Act(2): 10⽉にチェックを⼊れる。 10⽉には、⽇本、アメリカそれとメキシコでレースが開催される予定です。 さて、こちらのカードとして表⽰されている検索結果ですが、少し情報が少 ないです。 Act(3): カード・リージョンにポインタを当てる。 これから、このカードの表⽰をもっと効果的にしていきます。 28
50. Act(4): 開発者ツール・バーからページ・デザイナを呼び出すか、ページ・デ ザイナのタブに移る。 28
51. こちらの検索結果が、カード・リージョンなので、これを選択します。 Act(1): レンダリング・ビューの検索結果を選択する。 プロパティ・エディタの属性を開きます。 Act(2): プロパティ・エディタの属性タブをクリックする。 Act(3): タイトルの列にポインタを当てる。 タイトルは、COUNTRYなので変更はしません。 サブタイトルの列はTITLEにします。 Act(4): サブタイトルの列としてTITLEを選択する。 本体は、拡張フォーマットにします。単に列を選択するのでは無く、HTML を記述します。 29
52. Act(5): 本体の拡張フォーマットをONにする。 列MONTH_DAYを表⽰させます。 Act(6): クイック選択（HTML式の右上にあるリストのアイコン）をクリック して、MONTH_DAYを選択する。 MONTH_DAYが表⽰されるようになりましたが、これを太字で表⽰するよう にします。 Act(7): MONTH_DAYの前後に<b>と</b>を記述する。 アイコンとして、国旗を表⽰させます。 アイコン・ソースとして、イメージURLを選択します。 Act(8) アイコン・ソースとして、イメージURLを選択する。 イメージURLとして、表RACESの列FLAGを使います。 Act(9): イメージURLとして、FLAGを選択する。&FLAG.が設定される。 アイコン位置はトップにします。 Act(10): アイコン位置として、トップを選択する。 バッジとして開催都市を表⽰させます。 Act(11): バッジ列として、CITYを選択する。 変更は以上です。とりあえず、どのように表⽰が変わったか確認してみま しょう。 変更を保存します。 Act(12): 保存をクリックする。 アプリケーションに戻ります。 Act(13): アプリケーションのタブに移る。 まだ変更前の表⽰です。このページをリロードします。 29
53. Act(14): ブラウザのリロードを実⾏する。 変更した設定で表⽰されました。さきほどよりも、ずっと良くなりました。 Oracle APEXではこのように、アプリケーションへの変更は、即座に反映さ れます。 もうちょっと、カードを改良してみます。 Act(15): ページ・デザイナのタブに移る。 29
54. カードに、コースの画像を表⽰させます。 メディアを設定します。 Act(1) プロパティ・エディタで、メディアを中央に表⽰させる。 ソースとして、URL列を選択します。 Act(2): ソースにURL列を選択する。 コースのイメージは列IMAGEに登録されています。 Act(3): URL列として、IMAGEを選択する。 位置は、本体にします。 Act(4): 位置として、本体を選択する。 外観は、ワイドスクリーンにします。 30
55. Act(5): 外観として、ワイドスクリーンを選択する。 サイズ指定は、カバーにします。 Act(6): サイズ指定として、カバーを選択する。 これでページを確認します。変更を保存します。 Act(7): 保存をクリックする。 Act(8): アプリケーションのタブに移り、ページをリロードする。 いい感じになりました。 Act(9) 10⽉のフィルタの X をクリックして、フィルタを外す。 Act(10): 上下にスクロールする。 すべてのレースが表⽰されています。 /********************************** 時間が⾜りない場合、クイック編集は パスする。 *********************************/ さらに表⽰を改良してみましょう。 30
56. /********************************** 時間が⾜りない場合はスキップする。 *********************************/ 開発者ツール・バーから、クイック編集を実⾏します。 クイック編集をクリックして、 Act(1):クイック編集をクリックする。 （スパナ・アイコンをクリックすれば、カード・リージョンのライブ・テン プレート・オプションが開かれるはずだが、 APE_X 22.1では並替え基準のアイテムがあるせいで、そちらが選択されてし まい、カード・リージョンのライブ・テンプレート・オプションが開けな い。） Act(1): カード・リージョンをフォーカスする。 Act(1): キーボードのTabを⼊⼒し、レンチがフォーカスするのを確認する。 31
57. レンチのアイコンにフォーカスを当てて、 Act(1): Enterを⼊⼒して、ライブ・テンプレート・オプションを開く。 ライブ・テンプレート・オプションを開きます。 ライブ・テンプレート・オプションでの変更は、ページに即座に反映されま す。 例えば、スタイルを Act(2): Style Aに変更する。 Style Aだとこんな感じ、 Act(3): Style Bに変更する。 Style Bだとこんな感じ、 Act(4): Style Cに変更する。 Style Cだとこんな感じ、 このように表⽰が変わります。 Style Cが良さそうなので、この設定で保存します。 Act(5): 保存をクリックする。 ページの⾒た⽬の改良はこれくらいにして、今度はアクションを追加します。 31
58. これから、それぞれのレースのカードをクリックしたときに、レースの詳細 ページを開くようにします。 Act(1): ページ・デザイナのタブへ移る。 カードにアクションを作成します。 Act(2): アクションを選択し、コンテキスト・メニューを表⽰して、アクショ ンの作成を実⾏する。 作成されたアクションの 識別のタイプは、カード全体とします。 Act(3): 識別のタイプを、カード全体にする。 これで、カードのどこをクリックしても、そのレースの詳細が開かれます。 リンクのタイプにURLにリダイレクトを選択し、 32
59. Act(4): ターゲットに、URLにリダイレクトを選択する。 ターゲットとして、列URLを使います。 Act(5) : ターゲットをクリックして、ダイアログを開き、URLに&URL.と⼊⼒ する。OKをクリックして閉じる。 レース詳細が、アプリケーションとは別のタブで開かれるように、リンク属 性を設定します。 Act(6): リンク属性をフォーカスする（ヘルプを開くため） Act(7): 中央ペインのヘルプを開く。 新規ウィンドウでのリンクのオープン⽅法が説明されています。 これをコピーして、リンク属性として設定します。 Act(8): target=“_blank”をコピーして、リンク属性に貼り付ける。 アクションの作成は、以上で終了です。 保存して、動作を確認します。 Act(9): 保存をクリックする。 32
60. では、変更を確認します。 Act(1): アプリケーションのタブに移り、ページのリロードを実⾏する。 バーレーンを開いてみます。 Act(2): バーレーンをクリックし、バーレーンの詳細が新しいタブで開くこと を確認する。 バーレーンでは、フェラーリが１、２フィニッシュだったんですよね。 ⽇本を開いてみましょう。 Act(3): 下の⽅に移動して、Japanを探して開く。 本戦が10⽉9⽇で、開催地は三重県の鈴⿅サーキットですね。 Act(4): バーレーンと鈴⿅のレース詳細のタブを閉じる。 33
61. /********************************** 時間が⾜りない場合はスキップする。 *********************************/ Act(1): ページ・デザイナのタブに移る。 これは、最近リリースされたAPEX22.1の新機能なのですが、 カードの表⽰ 順序が制御できるようになりました。 検索結果のリージョンの、Sort OrderのP1_ORDER_BYを選択します。 Act(2): P1_ORDER_BYを選択する。 LOVの設定を開き、 Act(3): プロパティ・エディタより、LOVの静的値をクリックして開く。 並べ替えの選択肢を設定します。 表⽰値は、開催⽇ ‒ 昇順として、戻り値をSTARTDATE-ASC、 34
62. Act(4): 開催⽇ ‒昇順とSTARTDATE-ASCを⼊⼒する。 開催⽇ ‒ 降順に、STARTDATE-DESCとします。 Act(5): 開催⽇ ‒降順とSTARTDATE-DESCを⼊⼒する。 これで保存します。 Act(6): OKをクリックする。 次に、カード・リージョンのOrder By 項⽬を設定します。 Act(7): 検索結果を選択し、Order By 項⽬を開く。 Act(8): 最初の句として、startdate ascを⼊⼒する。 最初は、startdate asc Act(9): 次の句として、startdate descを⼊⼒する。 次の句はstartdate descになります。 以上で、保存します。 Act(10): OKをクリックする。 変更を保存して、ページを確認してみましょう。 Act(11): 保存をクリックすし、アプリケーションのタブに移る。 34
63. /********************************** 時間が⾜りない場合はスキップする。 *********************************/ ページを変更したので、まずはリロードします。 Act(1): ページをリロードする。 並替え基準が開始⽇ ‒ 昇順のときは、バーレンから始まり、最後はアブダビ になります。 Act(2): アブダビまでスクロールする。 並替え基準を開始⽇ ‒ 降順に変更します。 Act(3): 並替え基準を開始⽇ ‒ 降順に変更する。 開始⽇の降順で並び替えたので、今度はアブダビが最初でバーレンが最後に なります。 35
64. Act(4): バーレンまでスクロールする。 Act(5): 設定を開始⽇ ‒ 昇順に戻す。 以上で、ファセット検索のページは完成です。 さて、これから、ファセット検索以外のページも⾒てみましょう。 35
65. このアプリケーションには、対話モード・レポートとフォームのページが作 成されています。 Act(1): サイド・メニューを開く。 Racesレポートを開きます。 Act(2): Racesレポートをクリックする。 開催されるレースの⼀覧が、レポート形式で表⽰されました。 Act(3): サイド・メニューを閉じる。 今の所、データベースの表RACESに保存されている内容が、そのまま表⽰さ れています。 Act(4): 上下左右にレポートをスクロールさせる。 すこし、レポートとして⾒やすくなるように、表⽰を変更してみましょう。 36
66. 対話モード・レポートの、アクション・メニューから列を実⾏します。 Act(1): アクション・メニューを開いて、列を実⾏する。 レポートから画像の表⽰に使っていたり、詳細ページへのリンクとなってい るURLの表⽰を除きます。 Act(2): 列URL、Flag、Imageを表⽰しないに移動する。 緯度経度の情報も、表⽰から外しましょう。 Act(3): 列Lat、Longも表⽰しないに移動する。 表⽰する列の、Titleは先頭にしましょう。 Act(4): Titleを⼀番上に移動する。 Countryは２番⽬、開催都市のCityは３番⽬、StartdateをEnddateの上に配置 します。 37
67. Act(5): Country、City、Startdate、Enddateの順番に配置する。 レポートの表⽰はこれでよいので、適⽤します。 Act(6): 適⽤をクリックする。 レポートが再表⽰される。 Title、Country、City、Startdate、Enddateの順になっています。 ずっとレポートが⾒やすくなりました。 これをデフォルトのレイアウトとして、すべてのユーザーに適⽤します。 アクション・メニューから、。レポートの保存を実⾏します。 Act(7): アクション・メニューからレポートを開く。レポートの保存が表⽰さ れるので、それを実⾏する。 保存は、デフォルトのレポート設定として保存を選びます。 Act(8): デフォルトのレポート設定として保存を選び、適⽤をクリックする。 デフォルトのレポート・タイプをとして主を選択します。 これで、すべての利⽤者を対象とした、デフォルトのレポート・フォーマッ トとして保存されます。 Act(9): 主を選択して、適⽤をクリックする。 37
68. 対話モード・レポートには、他に⾊々な機能があります。 Act(1): 以下、アクション・メニューを開いて、順番に紹介する。 /********************************** 時間が⾜りない場合はスキップする。 *********************************/ ただし、時間がないので実際の操作は⾏わず、説明するだけです。 フィルタを使うと、表⽰される⾏に条件を与えることができます。 データからは、ソート、集計、計算、フラッシュバックといった機能が実⾏ できます。 書式として、コントロール・ブレークや、⾏や列のハイライト、 チャートでは、バーチャートや、折線グラフ、パイ・チャートなども表⽰さ せることもできます。 38
69. グループ化は、いわゆるSQLのGROUP BY句の指定です。 ピボットによって、⾏と列を⼊れ替えることもできます。 最後にダウンロードを使うと、レポートの表⽰内容を、CSV、HTML、Excel またはPDF形式にしてダウンロードすることもできます。 /****************************************** 以下は短縮した説明 ************************************ */ （説明の短縮版 ‒ アクション・メニューを開きっぱなしで説明する。) ⾏をフィルタしたり、 データの、ソートや集計、 表⽰書式の設定、 チャートでの表⽰、 SQL でいうところのGroup Byの適⽤、 ピボット、つまり、⾏と列の⼊れ替え、 CSV、Excel、HTML、PDF形式のダウンロード といった機能が標準で提供されています。 38
70. 対話モード・レポートを作成するときに、フォームのページも同時に作成し ています。 そのため、対話モード・レポートには、表RACESに⾏を新規に作成するボタ ンや、それぞれの編集リンクが含まれています。 例えば、作成を実⾏してみます。 Act(1): 作成をクリックする。 URL、City、Flagなど、表RACESの列の情報を⼊⼒して、作成をクリックす れば、表に⾏が挿⼊されます。 Act(2): 取消をクリックして、ダイアログを閉じる。 すでにある⾏を、開いてみます。 Act(3): JAPANESE GRAND PRIXの編集アイコンをクリックする。 39
71. 登録済みの情報を編集することができます。 ただ、ちょっと画⾯が⼊⼒しずらい感じです。 このページも改良します。 ページ・デザイナを開きます。 Act(4): 開発者ツール・バーのページ３をクリックする。 39
72. 編集するリージョンであるRaceを選択して、レイアウトを中央ペインに表⽰ させます。 Act(1): Raceを選択し、レイアウト・タブを選択する。最⼤化をクリックする。 これから、ページ・アイテムの配置を調整します。 Act(2): ページ・アイテムをクリックすると、プロパティ・エディタが開く。 ⼤きい場合は、サイズを調整する。 Act(3): ページ・アイテムを移動しながら、これをどこに置いて、といった話 をする。 P3_TITIE、P3_CITY P3_COUNTRY,P3_FLAG P3_URL,P3_IMAGE P3_STARTDATE、P3_ENDDATE P3_LAT、P3_LANG_ 40
73. Act(4): ページ・アイテムを上記のように配置する。 変更を保存します。 Act(5): 保存をクリックする。 （画⾯の表⽰どおり、レイアウトが保存されていない場合があるので、保存 を実⾏した後、ページ番号横の実⾏をクリックする） Act(6):ページ番号横の実⾏をクリックする。 （レイアウトが設定通りになるまで、調整を繰り返す。) ページ・アイテムの再配置が完了しました。アプリケーションを確認してみ ます。 Act(7): アプリケーションのタブに移る。 40
74. Act(1): フォームが開いていたら閉じる。 再度、フォームを開きます。鈴⿅のレースを選択します。 Act(2): JAPANESE GRAND PRIXを開く。 ずっと⼊⼒しやすくなりました。 開始⽇と終了⽇は、データ型がDATE型なので、それが認識されて⽇付ピッ カーになっています。 Act(3): Startdateの⽇付ピッカーを開く。Escで閉じる。 緯度経度はNUMBER型なので数値として認識され、⽂字型とは違って右に 寄っています。 Act(4): Latの数値部分にポインタを当てる。 フォームの変更はこれで完了です。 41
75. Act(5): 取消をクリックして、画⾯を閉じる。 次はカレンダーのページを改良しましょう。 41
76. Act(1): サイド・メニューを広げて、カレンダを選択する。 ⽇本での開催⽇を⾒てみましょう。 Act(2): 右 > を複数回クリックして、2022年10⽉を表⽰させる。 ⽇本グランプリは、１０⽉の第２週に開催されます。 Act(3): サイド・メニューを閉じる。（サイド・メニューが開いていると、カ レンダにスクロール・バーが現れる） 項⽬にポインタを合わせると、レースの詳細が表⽰されます。 Act(4): JAPANESE GRAND PRIX 2022にポインタを当てる。 （ブラウザのウィンドウがアクティブになっていること（要画⾯クリック）。 ダイアログが開くまでに、⼀呼吸かかる。） レースのタイトルと、開催期間が表⽰されます。 42
77. すこし、情報が寂しいので、表⽰される情報を追加します。 /********************************** 時間が⾜りない場合はスキップする。 *********************************/ それと、レースの⽇程をクリックしたときに、レースの詳細が表⽰されるよ うにします。 /* ************************************************************************ ************************ */ ページ・デザイナを呼び出します。 Act(5): 開発者ツール・バーのページ４をクリックする。 （すでに開いているタブに移ると、カレンダのページは開いていないはず。 なので、開発者ツール・バーから開く。） 42
78. カレンダのリージョンを選択します。 Act(1): レンダリング・ビューのカレンダを選択する。 Act(2): プロパティ・エディタで属性を開く。 Act(3): プロパティ・エディタの設定にポインタを当てる。 現在は、表⽰列がTITLE、開始⽇列がSTARTDATE、終了⽇列がENDDATEと して表⽰される設定になっています。 これに、補⾜情報として、開催国と開催都市も表⽰されるようにします。 Act(4): 開催国、開催都市の記述を、補⾜情報にコピペする。 /********************************** 時間が⾜りない場合はスキップする。 *********************************/ 続いて、クリックしたときに表⽰されるリンクを定義します。 43
79. リンクの表⽰/編集を開きます。 Act(5): リンクの表⽰/編集をクリックする。 ターゲットのタイプはURLです。 Act(6): タイプにURLを選択する。 URLには表RACESの列URLを使います。 Act(7): URLに&URL.を⼊⼒する。 Act(8): OKでリンク・ビルダー・ターゲットを閉じる。 /*********************************************************************** ************************ */ 以上で編集は完了です。 保存します。 Act(9): 保存をクリックする。 ページを実⾏して、結果を確認してみましょう。 Act(10): カレンダが開いているタブに表⽰を切り替える。 43
80. Act(1): 変更を反映させるため、カレンダのページをリロードする。 変更を確認してみます。 Act(2): JAPANESE GRAND PRIX 2022にポインタを当てる。 （ブラウザがアクティブ・ウィンドウになるよう、クリックしておく） 開催国がJapan、開催都市がSuzukaと表⽰されます。 /********************************** 時間が⾜りない場合はスキップする。 *********************************/ クリックしてみます。 Act(3): JAPANESE GRAND PRIX 2022をクリックする。 ⽇本グランプリの詳細ページに⾶びました。 44
81. Act(4): 詳細ページを上下にスクロールする。 Act(5): ブラウザのバックボタンでカレンダの表⽰に戻る。 /*********************************************************************** ************************** */ カレンダのページの編集は以上です。 次は地図のページを確認してみます。 44
82. Act(1): サイド・メニューを開いて、レース開催地をクリックする。 地図が表⽰されて、レースの開催地にピンが⽴っています。 Act(2): ⽇本を探して、鈴⿅にポインタを当てる。 ここが鈴⿅ですね。 レースのタイトルが表⽰されています。 /********************************** 時間が⾜りない場合はスキップする。 *********************************/ レイヤーが、レース開催地となっています。 Act(3): レイヤーのレース開催地のチェックを外す。 今はレイヤーがひとつだけですが、複数のレイヤーを作成して、重ねて表⽰ させることができます。 45
83. Act(4): レイヤーのレース開催地にチェックを⼊れる。 /*********************************************************************** *************************** */ Act(5): 再度、鈴⿅にポインタを当てる。 地図のページも、少し改良してみます。 詳細に開催期間が表⽰されるようにします。 それと、バックグラウンドの地図も変えてみます。 Act(6): 開発者ツール・バーのページ５をクリックする。 45
84. まず、マップ・リージョンの編集を⾏います。 Act(1): リージョン（レイヤーではない）のレース開催地を選択する。 属性を開きます。 Act: プロパティ・エディタで属性タブを選択する。 表⽰している背景を、デフォルトからカスタムに変えます。 Act(3): 背景をカスタムにする。 今は、OpenStreetMapが背景になっています。OpenStreetMapの他には Oracle World Mapが選択できます。 Act(4): Oracle World Mapを選択する。 （Oracle Word MapはOpenStreetMapより地図の情報は少ない。ただ、 OpenStreetMapで現在位置を表⽰すると、 46
85. 本当に現在位置がわかってしまうのでそれを避けるためにOracle World Map に変更している。) コントロールのオプションとして、 マウス・ホイール・ズームとブラウザの位置の取得にチェックを⼊れます。 Act(5): マウス・ホイール・ズームとブラウザの位置の取得にチェックを⼊れ る。 地図の表⽰にはMapLibreという、オープンソースのコンポーネントが使⽤さ れています。 なので、このあたりのコントロールは、MapLibreで実装されている機能の中 から、使⽤するものを選んでいます。 ブラウザから位置情報を取得するようにします。 Act(6): ブラウザから位置情報を取得をONにする。 実際にアプリケーションで、位置情報取得するには、ブラウザが動いている PCやスマホのセキュリティの設定で、位置情報の取得が許可されている必要 があります。 （レイヤーの編集に移る） 46
86. /********************************** 時間が⾜りない場合はスキップする。 *********************************/ Act(1): レイヤーのレース開催地を選択する。 レースなので、位置の表⽰を、旗に変更してみます。 ポイント・オブジェクトの形状をフラッグ・ペナントにします。 Act(2): ポイント・オブジェクトの形状を、フラッグ・ペナントに変更する。 続いて、ポインタが当たったときに表⽰される内容を編集します。 /*********************************************************************** ************************** */ ツールチップを変更します。 Act(3): プロパティ・エディタでツールチップを表⽰させる。 47
87. 今はタイトルだけが表⽰されていいます。ツールチップの拡張フォーマット をONにします。 Act(4): ツールチップの拡張フォーマットをONにする。 タイトルと開催期間が表⽰されるように、HTML式に記述します。 Act(5): HTML式にコピペーする。 以上で、地図の編集は完了です。ページを保存して、変更を確認してみます。 Act(6): 保存をクリックする。 Act(7): レース開催地のタブに移る。 47
88. （ブラウザで位置情報が取得できるよう、セキュリティの設定で許可されて いる必要があります。） Act(1): 変更を反映させるため、ブラウザをリロードする。 利⽤者の現在地の情報が取得できるようにしたので、こちらの現在の位置の ボタンが使えます。 Act(2): 現在の位置をクリックする。 現在の位置を中⼼として、地図がズームされます。 Act(3): 鈴⿅が表⽰されるまで、ズーム・アウトする。 /********************************** 時間が⾜りない場合はスキップする。 *********************************/ マウス・ホイール・ズームを有効にしているので、マウスやトラックパッド の操作で、ズーム・インやズーム・アウトができます。 48
89. 鈴⿅に旗が⽴っています。位置を⽰す記号が旗になっています。 /*********************************************************************** *************************** */ Act(4): 鈴⿅の旗に、ポインタを当てる。 ツールチップの表⽰も、タイトルに開催期間が追加されています。 Act(5): 世界中が表⽰されるまで、ズームアウトする。 地図のページの編集は、これで完了です。 48
90. Act(1): 対話モード・レポートのページを開く。 今までは、アプリケーション作成ウィザードで作成したページを、よりよく ⾒せるための編集を⾏ってきました。 これから、アプリケーションに新規の機能を追加します。 Act(2): （できればJAPANESE GRAND PRIX 2022の)レースのアイコンをク リックし、編集ダイアログを開く。 ここに、すでに作成されているレースの編集画⾯がありますが、この下の部 分に、レースにコメントを⼊⼒する機能を追加します。 Act(3): Lat、Longの下、ボタンの上あたりをポインタで領域を⽰す。 このあたりです。 Act(4): 取消をクリックして、ダイアログを閉じる。 49
91. まず、最初にコメントを保存するために使う、表を作成します。 表の作成には、Oracle APEXに含まれているツールの、クイックSQLを使いま す。 49
92. Act(1): アプリケーション・ビルダーのタブに移る。 クイックSQLはSQLワークショップのユーティリティに含まれます。 Act(2): SQLワークショップのメニューを開き、ユーティリティも開く。 クイックSQLがあるので、これを実⾏します。 Act(3): クイックSQLを実⾏する。 50
93. クイックSQLでは、簡単な記述で表を定義することができます。 コメントを保存する表はREMARKSとします。 Act(1): remarksと⼊⼒する。 それぞれのレースにたいしてコメントを⼊⼒するので、列としてレースIDを 含めます。 Act(2): インデントをつけてrace_idと⼊⼒する。 レースIDは表RACESのIDを参照するよう、外部キー制約をつけます。 Act(3): /fk racesと⼊⼒する。 コメントを保存する列はremakとします。 Act(3): remakと⼊⼒する。 51
94. 表の定義はこれで完了です。 この表に監査列を追加します。 Act(4): 設定をクリックする。 追加列の監査列にチェックを⼊れます。 Act(5): 監査列にチェックを⼊れて、保存。 (⾃動⽣成されていれば、スキップ) それでは、このクイックSQLのモデルか ら、表REMASKを作成するDDLを⽣成します。 Act(6): SQLの⽣成をクリックする。 SQLが⽣成されました。 ⽣成されたSQLスクリプトを保存します。 Act(7): SQLスクリプトを保存をクリックする。 Act(8): 開いたダイアログのスクリプト名のremaksと⼊⼒し、スクリプトを 保存をクリックする。 DDLを実⾏します。 Act(9): レビューおよび実⾏をクリックする。 （レビュー画⾯が開く。） 表REMARKSを作成するDDLです。 主キー列IDは⾃動的に定義されています。列RACE_IDがあって、references 句を⾒るとわかるように、表RACESを参照しています。 コメントを保存する列REMAKと、それ以下に監査列が定義されています。 監査列にはデフォルトで値が設定されるように、トリガーが作成されていま す。 では、このDDLを実⾏して表REMARKSを作成します。 Act(10): 実⾏をクリックする。 51
95. Act(11): 開いたダイアログで、即時実⾏をクリックする。 Act(12); フィードバックの位置にポインタを当てる。 表、索引、トリガーが作成されています。 以上で、表の準備は完了です。 /********************************** 時間が⾜りない場合はスキップする。 *********************************/ 作成された表を、オブジェクト・ブラウザから確認してみます。 /*********************************************************************** *************************** */ 51
96. /********************************** 時間が⾜りない場合はスキップする。 *********************************/ オブジェクト・ブラウザを開きます。 Act(1): SQLワークショップからオブジェクト・ブラウザを呼び出す。 表REMARKSが作成されています。 Act(2): REMARKSを選択する。 列として、ID、RACE_ID、REMARK、それに監査列があります。 /* (制約の表⽰に時間がかかるので、スキップしてもよい。) 制約を⾒てみます。 52
97. Act(3): 制約のタブをクリックする。 外部キー制約も作成されています。 */ オブジェクト・ブラウザでは、このようにデータベースのオブジェクトを確 認するだけではなく、作成や更新、削除といった操作を⾏うこともできます。 /*********************************************************************** ************************* */ 52
98. では、この表を使って、APEXの画⾯に機能を追加しましょう。 ページ・デザイナで、フォームのページを開きます。 Act(1): アプリケーションのタブに移って、フォームを開き、開発者ツール・ バーよりページ３を実⾏する。 新規に対話グリッドを、フォームに配置します。 Act(2): リージョンのパレットから対話グリッドを掴んで、レイアウト・ ビューのリージョンRaceのSUB REGIONSにドロップする。 これで新規に対話グリッドが、フォームに配置されました。 53
99. 新しく作った対話グリッドを編集します。 Act(1): レンダリング・ビューの対話グリッドを選択する。 タイトルはコメントとします。 Act(2): タイトルにコメントする。 表はREMARKSです。 Act(3): 表名の選択リストを開いて、REMARKSを選択する。 WHERE句として、RACE_ID = :P3_IDを⼊⼒します。 Act(4): WHERE句にRACE_ID = :P3_IDを⼊⼒する。 表REMARKSにはすべてのレースのコメントが保存されますが、このフォー ムで表⽰するのは、ここで選択されているレースのコメントに限定していま す。 54
100. 次に編集を有効にします。 Act(5): 属性タブを開く。 編集の有効をONにします。 Act(6): 編集の有効をONにする。 54
101. 対話グリッドの列を編集します。 Act(1): 対話グリッドの列をクリックして開く。 列IDは⾮表⽰にして、主キーをONにします。 Act(2): 列IDを選択し、タイプを⾮表⽰に変更する。 Act(3): 主キーをONにする。 列RACE_IDも⾮表⽰にして、デフォルト値をアイテムに変更します。 Act(4): 列RACE_IDを選択し、タイプを⾮表⽰にする。 Act(5); デフォルトのタイプをアイテムにする。 アイテムはフォームに含まれているアイテムP3_IDを選択します。 これは、レースのIDなので、コメントが保存されるときは常に、このフォー ムで表⽰されているレースのIDが保存されます。 55
102. Act(6): アイテムにP3_IDを選択する。 監査列はすべてコメント・アウトします。 Act(7): ４つの監査列をすべて選択し、ビルド・オプションをコメント・アウ トにする。 列の設定は、これで完了です。 最後にプロセスを編集します。 55
103. プロセス・ビューを開きます。 Act(1): 左ペインで プロセス・ビューのアイコンをクリックする。 対話グリッドの処理を⾏うプロセスが、ダイアログを閉じてから実⾏される 位置にあります。これだと処理されないので、フォームの処理の後、ダイア ログが閉じる前に実⾏されるよう、移動します。 Act(2): コメント ‒ 対話グリッド・データの保存を掴んで、位置を移動する。 以上で、コメント機能の実装は完了です。 保存して、動作を確認します。 Act(3): 保存をクリックする。 Act(4): アプリケーションが開いているタブに移る。 56
104. Act(1): ダイアログが開いていれば、閉じる。 コメントを⼊⼒してみます。 Act(2): JAPENESE GRND PRIX 2022の編集アイコンをクリックする。 コメントを⼊⼒する、対話グリッドが追加されています。 コメントを⼊れてみましょう。 Act(3): Remarkのフィールドをクリックする。 Act(4): Maxは⼊賞するかな？と⼊⼒する。（どんなコメントでも良い。） コメントを⼊⼒したので、変更の適⽤をクリックして保存します。 Act(5): 変更の適⽤をクリックする。 きちんとコメントが保存されているか確認します。 57
105. Act(6): 再度、JAPANESE GRND PRIX 2022の編集ダイアログを開く。 さきほど⼊⼒したコメントが確認できます。 以上で、コメント機能の追加も完了です。 57
106. 以上で、アプリケーションは完成です。 ファセットを使った検索ページ、 Act(1): Race検索を開く。 レポートとフォームを使ったデータの編集ページ Act(2): Raceレポートを開く。 カレンダ Act(3): カレンダを開く。 地図のページ Act(4): レース開催地を開く。 これらの機能を持ったアプリケーションが作成できました。 58
107. /********************************** 時間が⾜りない場合はスキップする。 *********************************/ アプリケーションは、出来上がりました。 これから、すこし⾒た⽬の変更や使い勝⼿を良くしてみます。 開発者ツール・バーにカスタマイズという機能があります。 ここから、最初にテーマ・ローラーを呼び出してみます。 Act(1): テーマを選択にポインタを当てる。 今、選択されているテーマはVita ‒ Darkになっています。これは、アプリ ケーションを作成したときに選んだテーマです。 ここで、テーマを変えることができます。 Act(2): Vita , Vita‒ Red, Vita ‒ Slateと変更する。 59
108. ⾒た⽬の変更は、即座に適⽤されます。 これらの⾒た⽬の変更は、それぞれ細かく設定することもできます。 Act(3): コンテナを開く。 例えば、アイテムの⾓を丸めます。 Act(4): コンテナ枠の⾓の丸を最⼤に変更する。 ⾒えづらいですが、並替え基準の⾓が丸まっていることがわかるかと思いま す。 ⾊も全体ではなく、個別に設定できます。 Act(5): ヘッダーを⻩⾊にする。 ヘッダーだけ⾊を変えました。 これで保存を⾏うと、アプリケーションに変更が保存されます。 今回は保存せずに、もとに戻します。 Act(6): テーマ・ローラーの X をクリックして、閉じる。 59
109. /********************************** 時間が⾜りない場合はスキップする。 *********************************/ ロゴのカスタマイズを⾏います。 Act(1): 開発者ツール・バーのカスタマイズから、ロゴの編集を選択する。 タイプをイメージとテキストに変更します。 Act(2): タイプをイメージとテキストに変更する。 テキストは、F1レースにして、 Act(3): テキストにF1レースと⼊⼒する。 イメージを設定します。 Act(4): ドラッグ・アンド・ドロップをクリックして、ファイルの選択画⾯を 表⽰させ、TheO_cmyk_0_86_100_0.pngのオラクルのロゴを選択する。 60
110. 会社のロゴを選択してみました。 画⾯を⾒ると、ロゴの部分が変更されていことが確認できます。 Act(5): ロゴの部分にポインタを当てる。 この変更は保存します。 Act(6): 保存をクリックする。 60
111. /********************************** 時間が⾜りない場合はスキップする。 *********************************/ アプリケーション・アイコンも会社のロゴに変更します。 カスタマイズのアプリケーション・アイコンの変更を呼び出します。 Act(1): 開発者ツール・バーのカスタマイズから、アプリケーション・アイコ ンの変更を実⾏する。 アイコンをアップロードします。 Act(2): 新規アイコンをアップロードします、をクリックして、ファイルの選 択画⾯を表⽰させ、TheO_cmyk_0_86_100_0.pngのオラクルのロゴを選択す る。 これも保存します。 Act(3): 保存をクリックする。 61
112. Act(4): ブレッドクラムのアイコン表⽰にポインタを当てる。 アイコンが変更されました。 作成したアプリケーションを、誰でも参照できるように、ユーザー認証を解 除します。 アプリケーション・ビルダーに移ります。 Act(5): 開発者ツール・バーのアプリケーションをクリックして、アプリケー ション・ビルダーを開く。 61
113. /********************************** 時間が⾜りない場合はスキップする。 *********************************/ Oracle APEXのアプリケーションは、ページを単位として開発しますが、ア プリケーション全体で利⽤するコンポーネントは、共有コンポーネントに含 まれます。 認証の設定も共有コンポーネントです。 Act(1): 共有コンポーネントをクリックする。 認証スキームを開きます。 Act(2): 認証スキームをクリックする。 現在は、Oracle APEXアカウントが登録されています。 新規に、ユーザー認証を⾏わない認証スキームを作成します。 62
114. 作成をクリックします。 Act(3): 作成をクリックする。 新規作成とします。 Act(4): ダイアログのメソッドはコピーとして作るかどうかなので、デフォル トの新規作成のままにして、次をクリックする。 認証スキームの名前は、認証なし、 Act(5): 名前に認証なしを⼊⼒する。 スキーム・タイプは、認証なしとします。 Act(6): スキーム・タイプに認証なしを選択する。 認証スキームを作成します。 Act(7): 認証スキームの作成をクリックする。 ユーザー認証をしないスキームが作成されて、アプリケーションで使われる ようになりました。 62
115. /********************************** 時間が⾜りない場合はスキップする。 *********************************/ デモではiPhoneシミュレーターを使いますが、すでにどこからでもアプリに アクセスできるようになっています。 作成したアプリケーションをスマホからアクセスしてみます。 Act: iPhoneシミュレーターを起動する。 アプリケーションはapex.oracle.comに作成しているので、URLは以下でアク セスできる状態です。 https://apex.oracle.com/pls/apex/r/取得したワークスペース名/f1-races/ なので、iPhoneに限らずAndoroidでも、シミュレーターを使わず実機で確認 することができます。 Act: ナビゲーションを開いて、それぞれのページを表⽰する。 63
116. /********************************** 時間が⾜りない場合はスキップする。 *********************************/ ランドスケープに切り替えてみます。 Act: ランドスケープにして、それぞれのページを表⽰する。 64
117. /********************************** 時間が⾜りない場合はスキップする。 *********************************/ このアプリケーションを作成するときに、Progressive Web Appの機能に チェックを⼊れていたので、アプリケーションのインストールができます。 Act: 画⾯上の雲にダウンロードのアイコンをクリックする。 Andoroidだと違うようなのですが、iPhoneでのインストール⼿順は、Web ページをホーム画⾯に配置する⼿順と同じです。 共有をクリックして、 Act: 共有をクリックする。 追加をクリックします。 Act: 追加をクリックする。 65
118. ホーム画⾯にアプリが追加されました。 65
119. /********************************** 時間が⾜りない場合はスキップする。 *********************************/ iPhoneの場合、アプリケーションのインストール⼿順は、ウェブ・ページの ホーム画⾯への登録と⼿順が同じなので、何がインストールされたか分かり ません。 Safariの開発ツールを開いて確認してみると、サービス・ワーカーがインス トールされていることが確認できます。 デフォルトでは、コンテンツのキャッシュのみを実⾏します。 66
120. Oracle APEXのデモンストレーションは以上です。 では、ラップアップです。 67
121. Oracle APEXに関するに⽇本語の情報は apex.oracle.com/go/japan にまとまっています。 英語の情報へのリンク、学習⽤のビデオ・コンテンツ、サンプル・アプリ ケーション、技術ブログなど、⾊々な情報が紹介されています。 もっとOracle APEXについて知りたいという⽅は、ぜひアクセスしてみてく ださい。 68
122. 以上になります。 本⽇はセッションにご参加いただき、ありがとうございました。 69