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

Slide 1

Slide 1 text

みなさん、こんにちは。本セッションに、ご参加いただき、ありがとうございます。本⽇は、オラクル・コーポレーションが開発している、ローコード・アプリケーション開発プラットフォームである、Oracle APEXを使って、ウェブ・アプリケーションを開発する⽅法を紹介いたします。アプリケーションの開発は、０から始めて、このセッションの持ち時間である６０分以内に完了します。 1

Slide 2

Slide 2 text

本⽇のアジェンダになります。最初に、Oracle APEXについて、簡単に紹介いたします。続いて、今季のF1グランプリのデータを元に、⼀通りの機能を持ったウェブ・アプリケーションを、Oracle APEXを使って開発します。最後に、Oracle APEXを使ってみようと思われた⽅に向けて、役に⽴つリンクや情報を紹介いたします。 2

Slide 3

Slide 3 text

はじめに、アプリケーションの作成に⼊る前に、少しだけ、製品について紹介させていただきます。 Oracle APEXはOracle Databaseで動作する、エンタープライズ・アプリケーション向けのローコード・アプリケーション開発プラットフォームです。 Oracle Databaseとブラウザだけで、アプリケーションの開発、および開発したアプリケーションの実⾏を⾏います。 Oracle APEXは、Oracle Databaseの無償オプションとして、すべてのエディションに含まれています。無料で利⽤できるOracle Database Express Editionでも、使うことができます。また、Oracle Cloudで提供している、期限なしで無料で利⽤できる、Always FreeのAutonomous Database上でも利⽤できます。機能制限のない環境を無料で使え、また、その環境もすぐに作成できます。 3

Slide 4

Slide 4 text

簡単に使い始めることができ、実機で学習を進めることができます。 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

Slide 5

Slide 5 text

英語: 4:48 では、ここから実際にアプリケーションの開発を始めます。 4

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

開催都市と、その都市の緯度経度、開催国、開催国の国旗の画像が、含まれます。 2022年のシーズンは、全部で22のレースが予定されています。これから作成するアプリケーションは、データベースに投⼊された、これらのデータを使って、⾊々な条件でレースを検索し、選択できるようにします。そして、世界中のあらゆる場所から、レースについて、コメントの投稿、および、参照がができるようにします。では、Oracle APEXに移り、このアプリケーションの作成を進めます。 5

Slide 8

Slide 8 text

Act(1): apex.oracle.com を開く。今回は最新バージョンのAPEX 22.1にアップグレードされた、 APEX.oracle.comの検証環境を使って、アプリケーションを開発します。サインインします。 Act(2): サインインをクリックする。 Act(3): ワークスペースのリクエストにポインタを当てる。検証環境を使⽤するにあたって、事前にワークスペースをリクエストする必要があります。ワークスペースは、メール・アドレスだけで、無料で取得できます。今回は、すでに取得済みのワークスペースを使います。 Act(4): ワークスペース名、ユーザー名、パスワードを⼊⼒して、サインインをクリックする。 6

Slide 9

Slide 9 text

Oracle APEXの先頭画⾯です。 6

Slide 10

Slide 10 text

では、開発を始めましょう。 Act(1): アプリケーション・ビルダーのアイコンにポインタを当てる。アプリケーションの開発には、こちらのアプリケーション・ビルダーを使⽤します。 Act(2): SQLワークショップのアイコンにポインタを当てる。となりにあるSQLワークショップは、主にオラクル・データベースのオブジェクトの操作とSQLの実⾏を⾏います。 Act(3): チーム開発のアイコンにポインタを当てる。チーム開発は、機能拡張や不具合の管理など、共同開発を⽀援するための機能を提供しています。 Act(4): ギャラリのアイコンにポインタを当てる。 7

Slide 11

Slide 11 text

ギャラリーからは、サンプルとしてインストールできる、アプリケーションが提供されています。 /********************************** 時間が⾜りない場合はスキップする。 *********************************/ Act: 余裕があれば、それぞれ、１レベル下の画⾯を開いて戻る。 7

Slide 12

Slide 12 text

では、アプリケーションを新規作成をします。 Act(1): アプリケーション・ビルダーをクリックする。アプリケーション・ビルダーを開いて、 Act(2) 作成、にポインタを合わせる。アプリケーションの作成を実⾏します。（作成のクリックは、説明の後に⾏う。） Act(3): インポート、にポインタを合わせる。アプリケーションの作成⽅法としては、新規に作成する以外に、ファイルからインポートして作成することもできます。インポートに使うファイルは、完成したアプリケーションを、ファイルにエクスポートして作成します。 8

Slide 13

Slide 13 text

Act(4): 作成をクリックする。アプリケーションを作成する⽅法は、いくつかあります。 Act(5): ファイルから、にポインタを合わせる。今回は、元となるデータが、JSONファイルとしてあるので、ファイルから、を選択してアプリケーション作成を始めます。（まだクリックしない） Act(6): 新規アプリケーション、にポインタを合わせる。データベースに保存されている表のデータや、REST APIを呼び出した結果を使う場合は、こちらの新規アプリケーションを選択します。 Act(7): スターター・アプリケーション、にポインタを合わせる。スターター・アプリケーションは、ギャラリとして提供されているサンプル・アプリケーションのことです。 Act(8): ファイルから、をクリックする。では、先ほどのJSONファイルを元にして、アプリケーションの作成を⾏います。 8

Slide 14

Slide 14 text

ファイルのアップロード、または、データをコピー・アンド・ペーストする画⾯が開きます。今回のアプリケーションの元となるJSONファイルを選択します。 Act(1): JSONファイルをドラッグ＆ドロップするか、ファイルの選択をクリックして、JSONファイルを選択する。表の指定画⾯が開く。アップロードされたデータを確認します。 Act(2): プレビューをクリックする。開いた画⾯を上下にスクロールさせる。アップロードされたJSONファイルの内容が、プレビューされています。 URL、CITY、FLAG、IMAGE、などが確認できます。 Act(3): ダイアログを閉じるをクリックする。 9

Slide 15

Slide 15 text

では、このデータを投⼊する表の名前を⼊⼒します。 Act(4): ロード先の新規表にポインタを合わせる。データを保存する表は、新規に作成します。 Act(5): 表名にRACESと⼊⼒する。表の名前はRACESとします。これで、アップロードされたデータは、データベースにある表RACESに保存されます。では、データのロードを開始します。 Act(6): データのロードをクリックする。 9

Slide 16

Slide 16 text

スピナーが表⽰される。データのロードが⾏われています。 22⾏を含む表RACESが作成されました。と表⽰される。データのロードが完了しました。表RACESが作成されて、２２⾏のデータ、つまり、それぞれのレースの情報が、作成された表に保存されています。では、これから、この表を元にした、アプリケーションの作成に移ります。 Act(1): アプリケーションの作成をクリックする。しばらく待つ。アプリケーション作成ウィザードが起動される。アプリケーション作成ウィザードが起動しました。 10

Slide 17

Slide 17 text

アプリケーション作成ウィザードでは、これから作成するアプリケーションの設定を⾏います。これらの設定は、アプリケーションを作成した後でも、⾃由に変更できます。 Act(1): 新規アイコンの選択をクリックして、アプリケーション・アイコンを開く。提供されているアイコンから、アプリケーションのアイコンを選んだり、独⾃のアイコンをアップロードすることができます。 Act(2): 取消をクリックして、ダイアログを閉じる。 Act(3): 名前の先頭にF1-を⼊⼒する。作成するアプリケーションの名前を設定します。名前はF1-Racesとします。 11

Slide 18

Slide 18 text

アプリケーションの⾒た⽬、外観を変更します。 Act(4): 外観を開く。いくつかの選択肢から、テーマ・スタイルを選択できます。今回はVita ‒ ダークを選択します。 Act(5): Vita ‒ ダークを選択する。ナビゲーションは、サイド・メニューを選択します。 Act(6): サイド・メニューを選択する。サイド・メニューの他には、画⾯の上にメニューを表⽰する、トップ・メニュー、ひとつの⼤きなメニューを表⽰させるメガ・メニュー、なども選ぶことができます。 Act(7): スクロールしてメガメニューを表⽰させる。変更を保存します。 Act(8): 変更の保存をクリックする。ページには、これから作成されるアプリケーションに含まれるページがリストされています。 Act(9): 下にスクロールして、機能と設定を画⾯に表⽰させる。機能として、Oracle APEXが標準で提供している、アプリケーションに組み込み可能な機能を選択することができます。例えばプログレッシブ・ウェブ・アプリケーションのインストールを選択すると、スマートフォンやタブレットのホーム画⾯に、このアプリケーションのアイコンを作成することができます。 Act(10): プログレッシブ・ウェブ・アプリケーションにチェックを⼊れる。その他にも、組み込みのアクセス制御などの機能もあります。 Act(11): アクセス制御にポインタを合わせる。チェックはしない。 11

Slide 19

Slide 19 text

Act(12): 設定にポインタを合わせる。設定では、アプリケーションの⾔語を選んだり、アプリケーションを認証する⽅式なども選ぶことができます。 Act(13): ⾔語のセレクト・リストを開く。⽇本語から変更はしない。 Act(14): 認証のセレクト・リストを開く。Oracle APEXアカウントから変更はしない。 11

Slide 20

Slide 20 text

これから、作成するページを調整します。 Act(1): スクロールして、ページの⼀覧に表⽰を戻す。作成するアプリケーションには、ファセット検索のページ、対話モード・レポートとフォームのページ、カレンダのページ、それと地図のページを含めるようにします。 Act(2): ホーム・ページにポインタを当てる。ホーム・ページには、他に作成されているページへの、ナビゲーションが作 12

Slide 21

Slide 21 text

成されます。これは削除します。ホーム・ページの編集をクリックします。 Act(3): ホームの編集をクリックする。削除をクリックします。 Act(4): 削除をクリックする。ダイアログが閉じ、元の画⾯に戻る。続いて、ダッシュボードのページを削除します。編集をクリックします。 Act(5): ダッシュボードの編集をクリックする。ダッシュボードには、⾯、棒、折れ線、円といったチャートが⾃動的に⽣成されるようになっていますが、これ以外にも⾊々な形式のチャートが利⽤可能です。今回のデモでは、チャートのページの作成⽅法については触れないので、削除します。 Act(6): 削除をクリックする。 12

Slide 22

Slide 22 text

⾃動的に⽣成されるページを、改良します。まずは、ファセット検索のページを改良します。ファセット検索の、編集をクリックします。 Act(1): ファセット検索の編集をクリックする。検索結果の表⽰を、レポートからカードに変更します。画像を含んだ表⽰は、カードの⽅が向いています。 Act(2): カードを選択する。表⽰形式の選択肢が表⽰される。表⽰されるカードのレイアウトが選択できます。今回はグリッドのまま変更しません。 Act(3): グリッドがデフォルトだが、グリッドをクリックする。 13

Slide 23

Slide 23 text

続いて、カードに表⽰する項⽬ですが、タイトル列として、COUNTRYを選択します。 Act(4): タイトル列をクリックして、COUNTRYを選択する。ここで設定するのはこれだけで、後はアプリケーションを作成した後に改良します。変更を保存します。 Act(5): 変更の保存をクリックする。 13

Slide 24

Slide 24 text

次に、対話モード・レポートとフォームを編集します。 Act(1): 対話モード・レポートの編集をクリックする。 Act(2): 表またはビューにポインタを置いた後、表またはビューのRACESへポインタを移動する。データ・ソースは表RACESになります。 Act(3): 対話モード・レポートにポインタを置く。レポートの形式として、対話モード・レポートを選択します。 Act(4): フォームを含める、にポインタを置く。フォームを含める、にチェックが⼊っているので、表RACESの内容を⼀覧する、対話モード・レポートに加えて、 14

Slide 25

Slide 25 text

表RACESに保存されている、データの編集に使う、フォームも作成されます。 Act(5): 取消をクリックする。 14

Slide 26

Slide 26 text

最後に、カレンダのページを編集します。 Act(1): カレンダの編集をクリックする。カレンダに表⽰する項⽬ですが、表⽰列として、TITLEを選択します。 Act(2): 表⽰列にTITLEを選択する。開始⽇列として、STARTDATEを選択します。 Act(3): 開始⽇列にSTARTDATEを選択する。終了⽇列として、ENDDATEを選択します。 Act(4): 終了⽇列にENDDATEを選択する。以上で、変更を保存します。 15

Slide 27

Slide 27 text

Act(5): 変更の保存をクリックする。 15

Slide 28

Slide 28 text

ひとつ、アプリケーションにページを追加します。追加するのは、地図上に開催地を表⽰するページです。 Act(1): ページの追加をクリックする。マップを選択します。 Act(2): マップを選択する。ページの設定画⾯が表⽰される。ページ名は、レース開催地とします。 Act(3): ページ名に、レース開催地と⼊⼒する。開催地の位置の情報は、表RACESから取り出します。 Act(4): 表としてRACESを選択する。表RACESには、ジオメトリ列として、緯度LATITUDEと、経度LOGITUDEの 16

Slide 29

Slide 29 text

情報が、それぞれ数値として保存されています。そのため、ジオメトリ列タイプとして、２つの数値列を選択します。 Act(5): ジオメトリ列で２つの数値列を選択する。経度の列として、LONG_を選択します。 Act(6): 経度列にLONG_を選択する。緯度の列として、LATを選択します。 Act(7): 緯度列にLATを選択する。さらに、ツールチップとして、レースのタイトルが表⽰されるようにします。 Act(8): ツールチップ列にTITLEを選択する。以上でページの追加を実⾏します。 Act(9): ページの追加をクリックする。地図のページとして、レース開催地が追加されました。 16

Slide 30

Slide 30 text

アプリケーションの作成を実⾏します。 Act(1): アプリケーションの作成をクリックする。アプリケーションの作成が開始されます。アプリケーションが作成される。アプリケーションが作成されました。まずは、アプリケーションを実⾏してみましょう。 Act: 実⾏をクリックする。注意：セッション動画では、アプリケーション定義の簡易URLをOFFに切り替えていますが、これは収録時にapex.oracle.comで障害が発⽣していたためで、それがなければ不要な操作です。 17

Slide 31

Slide 31 text

サインインの画⾯が開きます。ユーザー名とパスワードを⼊⼒します。 Act(1): ユーザー名とパスワードを⼊⼒する。サインインを実⾏します。 Act(2): サインインをクリックする。 18

Slide 32

Slide 32 text

最初に表⽰されているのは、ファセット検索の画⾯です。左側にファセットと呼ばれる、検索条件の設定があります。ファセットに設定した条件で検索した結果が、右側にカードとして⼀覧されます。ファセットを使って、簡単に検索条件を設定できます。 Act(1): Countryのうち、United Statesにチェックを⼊れる。設定した条件は、すぐにカードの⼀覧に反映されます。 Act(2): Countryのクリアをクリックして、検索条件をクリアする。これから、もっとファセット検索の画⾯を使いやすくします。 /********************************** 時間が⾜りない場合はスキップする。 *********************************/ 19

Slide 33

Slide 33 text

Act(3): もう⼀度、United Statesにチェックを⼊れる。 Act(4): Lat、Long、Flagのファセットにポインタを当てる。例えば、こちらの緯度経度に国旗のURLは、ファセットとしては役に⽴ちません。 Act(5): カードにポインタを当てる。表⽰されているカードも、国の名前だけでは情報が⾜りていません。これから、ファセットとカードの表⽰をカスタマイズします。 /* ************************************************************************ ************************ */ 19

Slide 34

Slide 34 text

ファセット検索のページを編集します。 Oracle APEXのワークスペースに、開発者としてサインインしていると、実⾏しているアプリケーションに開発者ツール・バーが表⽰されます。 Act(1): 開発者ツール・バーにポインタを当てる。開発者ツール・バーからは、⾊々な開発機能を呼び出すことができます。 Act(2): 開発者ツール・バーのそれぞれの機能にポインタを当てる。アプリケーションやページの編集画⾯、セッションやデバッグの情報を表⽰する画⾯、デバッグ・ログの出⼒の開始や停⽌などです。では、このファセット検索のページを編集します。ページ１をクリックします。 Act(3): 開発者ツール・バーのページ１をクリックする。 20

Slide 35

Slide 35 text

ページ・デザイナが起動し、ファセット検索のページが開かれています。ページの編集は、このページ・デザイナにて作業を⾏います。 Act(1): 左ペインにポインタを載せる。左側のペインには、ページに含まれるコンポーネントがツリー形式で表⽰されます。 Act(1): レンダリング・ビューを開く。（デフォルトで開いているはず）これは、レンダリング・ビューです。レンダリング・ビューでは、画⾯に表⽰されるコンポーネントが⼀覧されます。 Act(2): 動的アクション・ビューを開く動的アクションが⼀覧されるビューです。 21

Slide 36

Slide 36 text

動的アクションは、ブラウザで実⾏されるJavaScriptの処理です。 Act(3): プロセス・ビューを開くプロセスが⼀覧されるビューです。プロセスは、サーバーで実⾏されるPL/SQLの処理です。 Act(4): 共有コンポーネント・ビューを開く共有コンポーネント・ビューです。このページが参照している共有コンポーネントが⼀覧されます。 Act(5): レイアウト・ビューにポインタを合わせる。真ん中は、レイアウト・ビューやヘルプが表⽰されます。下の部分に、コンポーネント・ギャラリーがあり、レイアウト・ビューにドラッグ・アンド・ドロップすることで、ページに新たにコンポーネントを配置することができます。 Act(6): コンポーネント・ギャラリーから適当に選んで、レイアウト・ビューに重ねる。ただし配置はしない。 Act(7): プロパティ・ビューにポインタを合わせる。右ペインはプロパティ・エディタです。選択したコンポーネントの属性の編集を⾏います。今回はファセット検索を編集するので、検索を選択します。 Act(8): レンダリング・ビューで検索を選択する。 Act(9): リージョン・タブをクリックする。リージョン・タブには、ファセットに限らず、リージョンの⼀般的な属性が含まれます。 Act(10): 属性タブをクリックする。 21

Slide 37

Slide 37 text

属性タブには、ファセットに特化した属性が含まれます。 21

Slide 38

Slide 38 text

Act(1): アプリケーションに移り、ファセット検索の画⾯を表⽰する。 Act(2):合計⾏数: 22にポインタを当てる。まず、ここに表⽰されている合計⾏数というラベルですが、より適切な、レース数、というラベルに変更します。次に、ファセットにはチャートを表⽰する機能があります。 Act(3): Countryのファセットのメニューから、チャートの表⽰を実⾏する。国別でのレース数が表⽰されますが、同じ国で開催されるレースは多くても２つですから、あまり役に⽴つチャートではありません。これらを変更します。 Act(4): 別のタブで開いているページ・デザイナに戻る。（リージョン検索の属性が開いている） 22

Slide 39

Slide 39 text

総⾏数ラベルに、レース数と⼊⼒し、チャートの表⽰をNo（ノー)に変更します。 Act(6): レース数の⼊⼒、チャートの表⽰をNoにする。これで⼀旦、変更を保存して、ページを実⾏します。ページの保存と実⾏をクリックします。 Act(7): ページの保存と実⾏をクリックする。 22

Slide 40

Slide 40 text

アプリケーションの変更を確認します。 Act(1): レース数のラベルにポインタを当てる。検索結果の⾏数が、レース数というラベルに変わっています。 Act(2): Countryのメニューを開く。ファセットのメニューに、チャートの表⽰が無くなっていることも確認できます。次に、ファセットを変更します。今の所、ファセットとしてLat、Long、Flagがあります。緯度、経度、国旗です。 Act(3): ファセットLat、Long、Flagにポインタを当てる。これは、あまり役に⽴たないので削除します。 23

Slide 41

Slide 41 text

代わりに、開催する⽉（つき）を選択する、ファセットを追加します。 Act(4): ページ・デザイナのタブに移る。 23

Slide 42

Slide 42 text

レンダリング・ビューから、不要なファセットを削除します。ファセットをひとつづつ削除することもできますが、今回は３つ⼀度に削除します。 Act(1): Shiftを押しながら、P1_LAT、P1_LONG_、P1_FLAGのファセットを選択する。選択したら、コンテキスト・メニューを開きます。 Act(2): 選択したファセット上で、右クリック（⼆本指クリック - Mac）を⾏い、コンテキスト・メニューを表⽰させる。削除を実⾏します。 Act(3): メニュー上の、削除をクリックする。不要なファセットが削除されました。 24

Slide 43

Slide 43 text

これからファセットを追加します。その前に、表RACESには、開催⽉の列がありません。開催⽉が、列の情報として得られるように、検索結果のソースを変更します。開催⽉だけではなく、開催期間も列として追加します。リージョン検索結果を選択します。 Act(1): レンダリング・ビューで検索結果を選択する。ソースのタイプを、表/ビューから、SQL問合せに変更します。 Act(2): プロパティ・エディタのソースのタイプをSQL問合せに変更する。 Act(3): SELECT⽂にポインタを当てる。表の指定と同じ結果が得られる、SELECT⽂に置き換わります。 25

Slide 44

Slide 44 text

Act(4): コード・エディタを開く。この画⾯から直接SELECT⽂を変更できますが、変更したSQLを実⾏したいので、このSQLをクリップボードにコピーします。 Act(5): SELECT ⽂を選択し、クリップボードをコピーする。コピーしたSQLは、SQLワークショップのSQLコマンドで実⾏します。 Act(6): 取消をクリックする。 Act(7): 変更を保存し、SQLワークショップからSQLコマンドを実⾏する。 25

Slide 45

Slide 45 text

コピーした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

Slide 46

Slide 46 text

開催⽉、開催期間ともに期待通りに表⽰されています。では、このSELECT⽂をファセット検索のソースに戻します。 SELECT⽂をコピーします。 Act(5): SELECT⽂をコピーする。アプリケーション・ビルダーに戻り、ページ・デザイナでファセット検索のページをを開いて、検索結果のソースのSQL問合せを開きます。 Act(6): アプリケーション・ビルダーに戻り、アプリケーションを選択して開く。ページ番号１のファセット検索のページをページ・デザイナで開く。 Act(7): ソースのSQL問合せを開く。さきほど、検索結果を確認した、SELECT⽂に⼊れ替えます。 Act(8): SELECT⽂を選択して、ペーストを実⾏して内容を⼊れ替える。 SELECT⽂が⼊れ替わったので、検証をしてみます。 Act(9): 検証をクリックする。検証成功と表⽰されるはず。検証が成功しました。 SELECT⽂に問題がないことが確認できたので、OKをクリックして、保存します。 Act: OKをクリックする。 26

Slide 47

Slide 47 text

それでは、追加した列MONTHを使ったファセットを作成します。レンダリング・ビューのファセット上で、コンテキスト・メニューを表⽰させ、ファセットの作成を実⾏します。 Act(1): レンダリング・ビューのファセット上で、コンテキスト・メニューを表⽰させる。 Act(2) ファセットの作成を実⾏する。ファセットが作成されます。このファセットの名前は、P1_MONTHとします。 Act(2): 名前にP1_MONTHを⼊⼒する。 MONTHという名前をつけているので、ソースの列としてMONTHが設定されます。 27

Slide 48

Slide 48 text

Act(4): ソースを表⽰させる。タイプは、チェック・ボックス・グループです。 Act(5): タイプにポインタを当てる。ラベルは開催⽉とします。 Act(6): ラベルに開催⽉を⼊⼒する。 LOVのタイプとして、個別値を選択します。 Act(7): LOVのタイプに個別値を選択する。以上で、開催⽉のファセットが作成できました。ページを実⾏して、動作を確認してみます。 Act(8): ページを実⾏する。 27

Slide 49

Slide 49 text

更新されたページが、表⽰されています。 Act(1): 開催⽉のファセットにポインタを当てる。開催⽉のファセットが追加されています。 10⽉に開催されるレースを確認してみましょう。 Act(2): 10⽉にチェックを⼊れる。 10⽉には、⽇本、アメリカそれとメキシコでレースが開催される予定です。さて、こちらのカードとして表⽰されている検索結果ですが、少し情報が少ないです。 Act(3): カード・リージョンにポインタを当てる。これから、このカードの表⽰をもっと効果的にしていきます。 28

Slide 50

Slide 50 text

Act(4): 開発者ツール・バーからページ・デザイナを呼び出すか、ページ・デザイナのタブに移る。 28

Slide 51

Slide 51 text

こちらの検索結果が、カード・リージョンなので、これを選択します。 Act(1): レンダリング・ビューの検索結果を選択する。プロパティ・エディタの属性を開きます。 Act(2): プロパティ・エディタの属性タブをクリックする。 Act(3): タイトルの列にポインタを当てる。タイトルは、COUNTRYなので変更はしません。サブタイトルの列はTITLEにします。 Act(4): サブタイトルの列としてTITLEを選択する。本体は、拡張フォーマットにします。単に列を選択するのでは無く、HTML を記述します。 29

Slide 52

Slide 52 text

Act(5): 本体の拡張フォーマットをONにする。列MONTH_DAYを表⽰させます。 Act(6): クイック選択（HTML式の右上にあるリストのアイコン）をクリックして、MONTH_DAYを選択する。 MONTH_DAYが表⽰されるようになりましたが、これを太字で表⽰するようにします。 Act(7): MONTH_DAYの前後にとを記述する。アイコンとして、国旗を表⽰させます。アイコン・ソースとして、イメージURLを選択します。 Act(8) アイコン・ソースとして、イメージURLを選択する。イメージURLとして、表RACESの列FLAGを使います。 Act(9): イメージURLとして、FLAGを選択する。&FLAG.が設定される。アイコン位置はトップにします。 Act(10): アイコン位置として、トップを選択する。バッジとして開催都市を表⽰させます。 Act(11): バッジ列として、CITYを選択する。変更は以上です。とりあえず、どのように表⽰が変わったか確認してみましょう。変更を保存します。 Act(12): 保存をクリックする。アプリケーションに戻ります。 Act(13): アプリケーションのタブに移る。まだ変更前の表⽰です。このページをリロードします。 29

Slide 53

Slide 53 text

Act(14): ブラウザのリロードを実⾏する。変更した設定で表⽰されました。さきほどよりも、ずっと良くなりました。 Oracle APEXではこのように、アプリケーションへの変更は、即座に反映されます。もうちょっと、カードを改良してみます。 Act(15): ページ・デザイナのタブに移る。 29

Slide 54

Slide 54 text

カードに、コースの画像を表⽰させます。メディアを設定します。 Act(1) プロパティ・エディタで、メディアを中央に表⽰させる。ソースとして、URL列を選択します。 Act(2): ソースにURL列を選択する。コースのイメージは列IMAGEに登録されています。 Act(3): URL列として、IMAGEを選択する。位置は、本体にします。 Act(4): 位置として、本体を選択する。外観は、ワイドスクリーンにします。 30

Slide 55

Slide 55 text

Act(5): 外観として、ワイドスクリーンを選択する。サイズ指定は、カバーにします。 Act(6): サイズ指定として、カバーを選択する。これでページを確認します。変更を保存します。 Act(7): 保存をクリックする。 Act(8): アプリケーションのタブに移り、ページをリロードする。いい感じになりました。 Act(9) 10⽉のフィルタの X をクリックして、フィルタを外す。 Act(10): 上下にスクロールする。すべてのレースが表⽰されています。 /********************************** 時間が⾜りない場合、クイック編集はパスする。 *********************************/ さらに表⽰を改良してみましょう。 30

Slide 56

Slide 56 text

/********************************** 時間が⾜りない場合はスキップする。 *********************************/ 開発者ツール・バーから、クイック編集を実⾏します。クイック編集をクリックして、 Act(1):クイック編集をクリックする。（スパナ・アイコンをクリックすれば、カード・リージョンのライブ・テンプレート・オプションが開かれるはずだが、 APE_X 22.1では並替え基準のアイテムがあるせいで、そちらが選択されてしまい、カード・リージョンのライブ・テンプレート・オプションが開けない。） Act(1): カード・リージョンをフォーカスする。 Act(1): キーボードのTabを⼊⼒し、レンチがフォーカスするのを確認する。 31

Slide 57

Slide 57 text

レンチのアイコンにフォーカスを当てて、 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

Slide 58

Slide 58 text

これから、それぞれのレースのカードをクリックしたときに、レースの詳細ページを開くようにします。 Act(1): ページ・デザイナのタブへ移る。カードにアクションを作成します。 Act(2): アクションを選択し、コンテキスト・メニューを表⽰して、アクションの作成を実⾏する。作成されたアクションの識別のタイプは、カード全体とします。 Act(3): 識別のタイプを、カード全体にする。これで、カードのどこをクリックしても、そのレースの詳細が開かれます。リンクのタイプにURLにリダイレクトを選択し、 32

Slide 59

Slide 59 text

Act(4): ターゲットに、URLにリダイレクトを選択する。ターゲットとして、列URLを使います。 Act(5) : ターゲットをクリックして、ダイアログを開き、URLに&URL.と⼊⼒する。OKをクリックして閉じる。レース詳細が、アプリケーションとは別のタブで開かれるように、リンク属性を設定します。 Act(6): リンク属性をフォーカスする（ヘルプを開くため） Act(7): 中央ペインのヘルプを開く。新規ウィンドウでのリンクのオープン⽅法が説明されています。これをコピーして、リンク属性として設定します。 Act(8): target=“_blank”をコピーして、リンク属性に貼り付ける。アクションの作成は、以上で終了です。保存して、動作を確認します。 Act(9): 保存をクリックする。 32

Slide 60

Slide 60 text

では、変更を確認します。 Act(1): アプリケーションのタブに移り、ページのリロードを実⾏する。バーレーンを開いてみます。 Act(2): バーレーンをクリックし、バーレーンの詳細が新しいタブで開くことを確認する。バーレーンでは、フェラーリが１、２フィニッシュだったんですよね。⽇本を開いてみましょう。 Act(3): 下の⽅に移動して、Japanを探して開く。本戦が10⽉9⽇で、開催地は三重県の鈴⿅サーキットですね。 Act(4): バーレーンと鈴⿅のレース詳細のタブを閉じる。 33

Slide 61

Slide 61 text

/********************************** 時間が⾜りない場合はスキップする。 *********************************/ Act(1): ページ・デザイナのタブに移る。これは、最近リリースされたAPEX22.1の新機能なのですが、カードの表⽰順序が制御できるようになりました。検索結果のリージョンの、Sort OrderのP1_ORDER_BYを選択します。 Act(2): P1_ORDER_BYを選択する。 LOVの設定を開き、 Act(3): プロパティ・エディタより、LOVの静的値をクリックして開く。並べ替えの選択肢を設定します。表⽰値は、開催⽇ ‒ 昇順として、戻り値をSTARTDATE-ASC、 34

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

/********************************** 時間が⾜りない場合はスキップする。 *********************************/ ページを変更したので、まずはリロードします。 Act(1): ページをリロードする。並替え基準が開始⽇ ‒ 昇順のときは、バーレンから始まり、最後はアブダビになります。 Act(2): アブダビまでスクロールする。並替え基準を開始⽇ ‒ 降順に変更します。 Act(3): 並替え基準を開始⽇ ‒ 降順に変更する。開始⽇の降順で並び替えたので、今度はアブダビが最初でバーレンが最後になります。 35

Slide 64

Slide 64 text

Act(4): バーレンまでスクロールする。 Act(5): 設定を開始⽇ ‒ 昇順に戻す。以上で、ファセット検索のページは完成です。さて、これから、ファセット検索以外のページも⾒てみましょう。 35

Slide 65

Slide 65 text

このアプリケーションには、対話モード・レポートとフォームのページが作成されています。 Act(1): サイド・メニューを開く。 Racesレポートを開きます。 Act(2): Racesレポートをクリックする。開催されるレースの⼀覧が、レポート形式で表⽰されました。 Act(3): サイド・メニューを閉じる。今の所、データベースの表RACESに保存されている内容が、そのまま表⽰されています。 Act(4): 上下左右にレポートをスクロールさせる。すこし、レポートとして⾒やすくなるように、表⽰を変更してみましょう。 36

Slide 66

Slide 66 text

対話モード・レポートの、アクション・メニューから列を実⾏します。 Act(1): アクション・メニューを開いて、列を実⾏する。レポートから画像の表⽰に使っていたり、詳細ページへのリンクとなっているURLの表⽰を除きます。 Act(2): 列URL、Flag、Imageを表⽰しないに移動する。緯度経度の情報も、表⽰から外しましょう。 Act(3): 列Lat、Longも表⽰しないに移動する。表⽰する列の、Titleは先頭にしましょう。 Act(4): Titleを⼀番上に移動する。 Countryは２番⽬、開催都市のCityは３番⽬、StartdateをEnddateの上に配置します。 37

Slide 67

Slide 67 text

Act(5): Country、City、Startdate、Enddateの順番に配置する。レポートの表⽰はこれでよいので、適⽤します。 Act(6): 適⽤をクリックする。レポートが再表⽰される。 Title、Country、City、Startdate、Enddateの順になっています。ずっとレポートが⾒やすくなりました。これをデフォルトのレイアウトとして、すべてのユーザーに適⽤します。アクション・メニューから、。レポートの保存を実⾏します。 Act(7): アクション・メニューからレポートを開く。レポートの保存が表⽰されるので、それを実⾏する。保存は、デフォルトのレポート設定として保存を選びます。 Act(8): デフォルトのレポート設定として保存を選び、適⽤をクリックする。デフォルトのレポート・タイプをとして主を選択します。これで、すべての利⽤者を対象とした、デフォルトのレポート・フォーマットとして保存されます。 Act(9): 主を選択して、適⽤をクリックする。 37

Slide 68

Slide 68 text

対話モード・レポートには、他に⾊々な機能があります。 Act(1): 以下、アクション・メニューを開いて、順番に紹介する。 /********************************** 時間が⾜りない場合はスキップする。 *********************************/ ただし、時間がないので実際の操作は⾏わず、説明するだけです。フィルタを使うと、表⽰される⾏に条件を与えることができます。データからは、ソート、集計、計算、フラッシュバックといった機能が実⾏できます。書式として、コントロール・ブレークや、⾏や列のハイライト、チャートでは、バーチャートや、折線グラフ、パイ・チャートなども表⽰させることもできます。 38

Slide 69

Slide 69 text

グループ化は、いわゆるSQLのGROUP BY句の指定です。ピボットによって、⾏と列を⼊れ替えることもできます。最後にダウンロードを使うと、レポートの表⽰内容を、CSV、HTML、Excel またはPDF形式にしてダウンロードすることもできます。 /****************************************** 以下は短縮した説明 ************************************ */ （説明の短縮版 ‒ アクション・メニューを開きっぱなしで説明する。) ⾏をフィルタしたり、データの、ソートや集計、表⽰書式の設定、チャートでの表⽰、 SQL でいうところのGroup Byの適⽤、ピボット、つまり、⾏と列の⼊れ替え、 CSV、Excel、HTML、PDF形式のダウンロードといった機能が標準で提供されています。 38

Slide 70

Slide 70 text

対話モード・レポートを作成するときに、フォームのページも同時に作成しています。そのため、対話モード・レポートには、表RACESに⾏を新規に作成するボタンや、それぞれの編集リンクが含まれています。例えば、作成を実⾏してみます。 Act(1): 作成をクリックする。 URL、City、Flagなど、表RACESの列の情報を⼊⼒して、作成をクリックすれば、表に⾏が挿⼊されます。 Act(2): 取消をクリックして、ダイアログを閉じる。すでにある⾏を、開いてみます。 Act(3): JAPANESE GRAND PRIXの編集アイコンをクリックする。 39

Slide 71

Slide 71 text

登録済みの情報を編集することができます。ただ、ちょっと画⾯が⼊⼒しずらい感じです。このページも改良します。ページ・デザイナを開きます。 Act(4): 開発者ツール・バーのページ３をクリックする。 39

Slide 72

Slide 72 text

編集するリージョンである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

Slide 73

Slide 73 text

Act(4): ページ・アイテムを上記のように配置する。変更を保存します。 Act(5): 保存をクリックする。（画⾯の表⽰どおり、レイアウトが保存されていない場合があるので、保存を実⾏した後、ページ番号横の実⾏をクリックする） Act(6):ページ番号横の実⾏をクリックする。（レイアウトが設定通りになるまで、調整を繰り返す。) ページ・アイテムの再配置が完了しました。アプリケーションを確認してみます。 Act(7): アプリケーションのタブに移る。 40

Slide 74

Slide 74 text

Act(1): フォームが開いていたら閉じる。再度、フォームを開きます。鈴⿅のレースを選択します。 Act(2): JAPANESE GRAND PRIXを開く。ずっと⼊⼒しやすくなりました。開始⽇と終了⽇は、データ型がDATE型なので、それが認識されて⽇付ピッカーになっています。 Act(3): Startdateの⽇付ピッカーを開く。Escで閉じる。緯度経度はNUMBER型なので数値として認識され、⽂字型とは違って右に寄っています。 Act(4): Latの数値部分にポインタを当てる。フォームの変更はこれで完了です。 41

Slide 75

Slide 75 text

Act(5): 取消をクリックして、画⾯を閉じる。次はカレンダーのページを改良しましょう。 41

Slide 76

Slide 76 text

Act(1): サイド・メニューを広げて、カレンダを選択する。⽇本での開催⽇を⾒てみましょう。 Act(2): 右 > を複数回クリックして、2022年10⽉を表⽰させる。⽇本グランプリは、１０⽉の第２週に開催されます。 Act(3): サイド・メニューを閉じる。（サイド・メニューが開いていると、カレンダにスクロール・バーが現れる）項⽬にポインタを合わせると、レースの詳細が表⽰されます。 Act(4): JAPANESE GRAND PRIX 2022にポインタを当てる。（ブラウザのウィンドウがアクティブになっていること（要画⾯クリック）。ダイアログが開くまでに、⼀呼吸かかる。）レースのタイトルと、開催期間が表⽰されます。 42

Slide 77

Slide 77 text

すこし、情報が寂しいので、表⽰される情報を追加します。 /********************************** 時間が⾜りない場合はスキップする。 *********************************/ それと、レースの⽇程をクリックしたときに、レースの詳細が表⽰されるようにします。 /* ************************************************************************ ************************ */ ページ・デザイナを呼び出します。 Act(5): 開発者ツール・バーのページ４をクリックする。（すでに開いているタブに移ると、カレンダのページは開いていないはず。なので、開発者ツール・バーから開く。） 42

Slide 78

Slide 78 text

カレンダのリージョンを選択します。 Act(1): レンダリング・ビューのカレンダを選択する。 Act(2): プロパティ・エディタで属性を開く。 Act(3): プロパティ・エディタの設定にポインタを当てる。現在は、表⽰列がTITLE、開始⽇列がSTARTDATE、終了⽇列がENDDATEとして表⽰される設定になっています。これに、補⾜情報として、開催国と開催都市も表⽰されるようにします。 Act(4): 開催国、開催都市の記述を、補⾜情報にコピペする。 /********************************** 時間が⾜りない場合はスキップする。 *********************************/ 続いて、クリックしたときに表⽰されるリンクを定義します。 43

Slide 79

Slide 79 text

リンクの表⽰/編集を開きます。 Act(5): リンクの表⽰/編集をクリックする。ターゲットのタイプはURLです。 Act(6): タイプにURLを選択する。 URLには表RACESの列URLを使います。 Act(7): URLに&URL.を⼊⼒する。 Act(8): OKでリンク・ビルダー・ターゲットを閉じる。 /*********************************************************************** ************************ */ 以上で編集は完了です。保存します。 Act(9): 保存をクリックする。ページを実⾏して、結果を確認してみましょう。 Act(10): カレンダが開いているタブに表⽰を切り替える。 43

Slide 80

Slide 80 text

Act(1): 変更を反映させるため、カレンダのページをリロードする。変更を確認してみます。 Act(2): JAPANESE GRAND PRIX 2022にポインタを当てる。（ブラウザがアクティブ・ウィンドウになるよう、クリックしておく）開催国がJapan、開催都市がSuzukaと表⽰されます。 /********************************** 時間が⾜りない場合はスキップする。 *********************************/ クリックしてみます。 Act(3): JAPANESE GRAND PRIX 2022をクリックする。⽇本グランプリの詳細ページに⾶びました。 44

Slide 81

Slide 81 text

Act(4): 詳細ページを上下にスクロールする。 Act(5): ブラウザのバックボタンでカレンダの表⽰に戻る。 /*********************************************************************** ************************** */ カレンダのページの編集は以上です。次は地図のページを確認してみます。 44

Slide 82

Slide 82 text

Act(1): サイド・メニューを開いて、レース開催地をクリックする。地図が表⽰されて、レースの開催地にピンが⽴っています。 Act(2): ⽇本を探して、鈴⿅にポインタを当てる。ここが鈴⿅ですね。レースのタイトルが表⽰されています。 /********************************** 時間が⾜りない場合はスキップする。 *********************************/ レイヤーが、レース開催地となっています。 Act(3): レイヤーのレース開催地のチェックを外す。今はレイヤーがひとつだけですが、複数のレイヤーを作成して、重ねて表⽰させることができます。 45

Slide 83

Slide 83 text

Act(4): レイヤーのレース開催地にチェックを⼊れる。 /*********************************************************************** *************************** */ Act(5): 再度、鈴⿅にポインタを当てる。地図のページも、少し改良してみます。詳細に開催期間が表⽰されるようにします。それと、バックグラウンドの地図も変えてみます。 Act(6): 開発者ツール・バーのページ５をクリックする。 45

Slide 84

Slide 84 text

まず、マップ・リージョンの編集を⾏います。 Act(1): リージョン（レイヤーではない）のレース開催地を選択する。属性を開きます。 Act: プロパティ・エディタで属性タブを選択する。表⽰している背景を、デフォルトからカスタムに変えます。 Act(3): 背景をカスタムにする。今は、OpenStreetMapが背景になっています。OpenStreetMapの他には Oracle World Mapが選択できます。 Act(4): Oracle World Mapを選択する。（Oracle Word MapはOpenStreetMapより地図の情報は少ない。ただ、 OpenStreetMapで現在位置を表⽰すると、 46

Slide 85

Slide 85 text

本当に現在位置がわかってしまうのでそれを避けるためにOracle World Map に変更している。) コントロールのオプションとして、マウス・ホイール・ズームとブラウザの位置の取得にチェックを⼊れます。 Act(5): マウス・ホイール・ズームとブラウザの位置の取得にチェックを⼊れる。地図の表⽰にはMapLibreという、オープンソースのコンポーネントが使⽤されています。なので、このあたりのコントロールは、MapLibreで実装されている機能の中から、使⽤するものを選んでいます。ブラウザから位置情報を取得するようにします。 Act(6): ブラウザから位置情報を取得をONにする。実際にアプリケーションで、位置情報取得するには、ブラウザが動いている PCやスマホのセキュリティの設定で、位置情報の取得が許可されている必要があります。（レイヤーの編集に移る） 46

Slide 86

Slide 86 text

/********************************** 時間が⾜りない場合はスキップする。 *********************************/ Act(1): レイヤーのレース開催地を選択する。レースなので、位置の表⽰を、旗に変更してみます。ポイント・オブジェクトの形状をフラッグ・ペナントにします。 Act(2): ポイント・オブジェクトの形状を、フラッグ・ペナントに変更する。続いて、ポインタが当たったときに表⽰される内容を編集します。 /*********************************************************************** ************************** */ ツールチップを変更します。 Act(3): プロパティ・エディタでツールチップを表⽰させる。 47

Slide 87

Slide 87 text

今はタイトルだけが表⽰されていいます。ツールチップの拡張フォーマットをONにします。 Act(4): ツールチップの拡張フォーマットをONにする。タイトルと開催期間が表⽰されるように、HTML式に記述します。 Act(5): HTML式にコピペーする。以上で、地図の編集は完了です。ページを保存して、変更を確認してみます。 Act(6): 保存をクリックする。 Act(7): レース開催地のタブに移る。 47

Slide 88

Slide 88 text

（ブラウザで位置情報が取得できるよう、セキュリティの設定で許可されている必要があります。） Act(1): 変更を反映させるため、ブラウザをリロードする。利⽤者の現在地の情報が取得できるようにしたので、こちらの現在の位置のボタンが使えます。 Act(2): 現在の位置をクリックする。現在の位置を中⼼として、地図がズームされます。 Act(3): 鈴⿅が表⽰されるまで、ズーム・アウトする。 /********************************** 時間が⾜りない場合はスキップする。 *********************************/ マウス・ホイール・ズームを有効にしているので、マウスやトラックパッドの操作で、ズーム・インやズーム・アウトができます。 48

Slide 89

Slide 89 text

鈴⿅に旗が⽴っています。位置を⽰す記号が旗になっています。 /*********************************************************************** *************************** */ Act(4): 鈴⿅の旗に、ポインタを当てる。ツールチップの表⽰も、タイトルに開催期間が追加されています。 Act(5): 世界中が表⽰されるまで、ズームアウトする。地図のページの編集は、これで完了です。 48

Slide 90

Slide 90 text

Act(1): 対話モード・レポートのページを開く。今までは、アプリケーション作成ウィザードで作成したページを、よりよく⾒せるための編集を⾏ってきました。これから、アプリケーションに新規の機能を追加します。 Act(2): （できればJAPANESE GRAND PRIX 2022の)レースのアイコンをクリックし、編集ダイアログを開く。ここに、すでに作成されているレースの編集画⾯がありますが、この下の部分に、レースにコメントを⼊⼒する機能を追加します。 Act(3): Lat、Longの下、ボタンの上あたりをポインタで領域を⽰す。このあたりです。 Act(4): 取消をクリックして、ダイアログを閉じる。 49

Slide 91

Slide 91 text

まず、最初にコメントを保存するために使う、表を作成します。表の作成には、Oracle APEXに含まれているツールの、クイックSQLを使います。 49

Slide 92

Slide 92 text

Act(1): アプリケーション・ビルダーのタブに移る。クイックSQLはSQLワークショップのユーティリティに含まれます。 Act(2): SQLワークショップのメニューを開き、ユーティリティも開く。クイックSQLがあるので、これを実⾏します。 Act(3): クイックSQLを実⾏する。 50

Slide 93

Slide 93 text

クイックSQLでは、簡単な記述で表を定義することができます。コメントを保存する表はREMARKSとします。 Act(1): remarksと⼊⼒する。それぞれのレースにたいしてコメントを⼊⼒するので、列としてレースIDを含めます。 Act(2): インデントをつけてrace_idと⼊⼒する。レースIDは表RACESのIDを参照するよう、外部キー制約をつけます。 Act(3): /fk racesと⼊⼒する。コメントを保存する列はremakとします。 Act(3): remakと⼊⼒する。 51

Slide 94

Slide 94 text

表の定義はこれで完了です。この表に監査列を追加します。 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

Slide 95

Slide 95 text

Act(11): 開いたダイアログで、即時実⾏をクリックする。 Act(12); フィードバックの位置にポインタを当てる。表、索引、トリガーが作成されています。以上で、表の準備は完了です。 /********************************** 時間が⾜りない場合はスキップする。 *********************************/ 作成された表を、オブジェクト・ブラウザから確認してみます。 /*********************************************************************** *************************** */ 51

Slide 96

Slide 96 text

/********************************** 時間が⾜りない場合はスキップする。 *********************************/ オブジェクト・ブラウザを開きます。 Act(1): SQLワークショップからオブジェクト・ブラウザを呼び出す。表REMARKSが作成されています。 Act(2): REMARKSを選択する。列として、ID、RACE_ID、REMARK、それに監査列があります。 /* (制約の表⽰に時間がかかるので、スキップしてもよい。) 制約を⾒てみます。 52

Slide 97

Slide 97 text

Act(3): 制約のタブをクリックする。外部キー制約も作成されています。 */ オブジェクト・ブラウザでは、このようにデータベースのオブジェクトを確認するだけではなく、作成や更新、削除といった操作を⾏うこともできます。 /*********************************************************************** ************************* */ 52

Slide 98

Slide 98 text

では、この表を使って、APEXの画⾯に機能を追加しましょう。ページ・デザイナで、フォームのページを開きます。 Act(1): アプリケーションのタブに移って、フォームを開き、開発者ツール・バーよりページ３を実⾏する。新規に対話グリッドを、フォームに配置します。 Act(2): リージョンのパレットから対話グリッドを掴んで、レイアウト・ビューのリージョンRaceのSUB REGIONSにドロップする。これで新規に対話グリッドが、フォームに配置されました。 53

Slide 99

Slide 99 text

新しく作った対話グリッドを編集します。 Act(1): レンダリング・ビューの対話グリッドを選択する。タイトルはコメントとします。 Act(2): タイトルにコメントする。表はREMARKSです。 Act(3): 表名の選択リストを開いて、REMARKSを選択する。 WHERE句として、RACE_ID = :P3_IDを⼊⼒します。 Act(4): WHERE句にRACE_ID = :P3_IDを⼊⼒する。表REMARKSにはすべてのレースのコメントが保存されますが、このフォームで表⽰するのは、ここで選択されているレースのコメントに限定しています。 54

Slide 100

Slide 100 text

次に編集を有効にします。 Act(5): 属性タブを開く。編集の有効をONにします。 Act(6): 編集の有効をONにする。 54

Slide 101

Slide 101 text

対話グリッドの列を編集します。 Act(1): 対話グリッドの列をクリックして開く。列IDは⾮表⽰にして、主キーをONにします。 Act(2): 列IDを選択し、タイプを⾮表⽰に変更する。 Act(3): 主キーをONにする。列RACE_IDも⾮表⽰にして、デフォルト値をアイテムに変更します。 Act(4): 列RACE_IDを選択し、タイプを⾮表⽰にする。 Act(5); デフォルトのタイプをアイテムにする。アイテムはフォームに含まれているアイテムP3_IDを選択します。これは、レースのIDなので、コメントが保存されるときは常に、このフォームで表⽰されているレースのIDが保存されます。 55

Slide 102

Slide 102 text

Act(6): アイテムにP3_IDを選択する。監査列はすべてコメント・アウトします。 Act(7): ４つの監査列をすべて選択し、ビルド・オプションをコメント・アウトにする。列の設定は、これで完了です。最後にプロセスを編集します。 55

Slide 103

Slide 103 text

プロセス・ビューを開きます。 Act(1): 左ペインでプロセス・ビューのアイコンをクリックする。対話グリッドの処理を⾏うプロセスが、ダイアログを閉じてから実⾏される位置にあります。これだと処理されないので、フォームの処理の後、ダイアログが閉じる前に実⾏されるよう、移動します。 Act(2): コメント ‒ 対話グリッド・データの保存を掴んで、位置を移動する。以上で、コメント機能の実装は完了です。保存して、動作を確認します。 Act(3): 保存をクリックする。 Act(4): アプリケーションが開いているタブに移る。 56

Slide 104

Slide 104 text

Act(1): ダイアログが開いていれば、閉じる。コメントを⼊⼒してみます。 Act(2): JAPENESE GRND PRIX 2022の編集アイコンをクリックする。コメントを⼊⼒する、対話グリッドが追加されています。コメントを⼊れてみましょう。 Act(3): Remarkのフィールドをクリックする。 Act(4): Maxは⼊賞するかな？と⼊⼒する。（どんなコメントでも良い。）コメントを⼊⼒したので、変更の適⽤をクリックして保存します。 Act(5): 変更の適⽤をクリックする。きちんとコメントが保存されているか確認します。 57

Slide 105

Slide 105 text

Act(6): 再度、JAPANESE GRND PRIX 2022の編集ダイアログを開く。さきほど⼊⼒したコメントが確認できます。以上で、コメント機能の追加も完了です。 57

Slide 106

Slide 106 text

以上で、アプリケーションは完成です。ファセットを使った検索ページ、 Act(1): Race検索を開く。レポートとフォームを使ったデータの編集ページ Act(2): Raceレポートを開く。カレンダ Act(3): カレンダを開く。地図のページ Act(4): レース開催地を開く。これらの機能を持ったアプリケーションが作成できました。 58

Slide 107

Slide 107 text

/********************************** 時間が⾜りない場合はスキップする。 *********************************/ アプリケーションは、出来上がりました。これから、すこし⾒た⽬の変更や使い勝⼿を良くしてみます。開発者ツール・バーにカスタマイズという機能があります。ここから、最初にテーマ・ローラーを呼び出してみます。 Act(1): テーマを選択にポインタを当てる。今、選択されているテーマはVita ‒ Darkになっています。これは、アプリケーションを作成したときに選んだテーマです。ここで、テーマを変えることができます。 Act(2): Vita , Vita‒ Red, Vita ‒ Slateと変更する。 59

Slide 108

Slide 108 text

⾒た⽬の変更は、即座に適⽤されます。これらの⾒た⽬の変更は、それぞれ細かく設定することもできます。 Act(3): コンテナを開く。例えば、アイテムの⾓を丸めます。 Act(4): コンテナ枠の⾓の丸を最⼤に変更する。⾒えづらいですが、並替え基準の⾓が丸まっていることがわかるかと思います。⾊も全体ではなく、個別に設定できます。 Act(5): ヘッダーを⻩⾊にする。ヘッダーだけ⾊を変えました。これで保存を⾏うと、アプリケーションに変更が保存されます。今回は保存せずに、もとに戻します。 Act(6): テーマ・ローラーの X をクリックして、閉じる。 59

Slide 109

Slide 109 text

/********************************** 時間が⾜りない場合はスキップする。 *********************************/ ロゴのカスタマイズを⾏います。 Act(1): 開発者ツール・バーのカスタマイズから、ロゴの編集を選択する。タイプをイメージとテキストに変更します。 Act(2): タイプをイメージとテキストに変更する。テキストは、F1レースにして、 Act(3): テキストにF1レースと⼊⼒する。イメージを設定します。 Act(4): ドラッグ・アンド・ドロップをクリックして、ファイルの選択画⾯を表⽰させ、TheO_cmyk_0_86_100_0.pngのオラクルのロゴを選択する。 60

Slide 110

Slide 110 text

会社のロゴを選択してみました。画⾯を⾒ると、ロゴの部分が変更されていことが確認できます。 Act(5): ロゴの部分にポインタを当てる。この変更は保存します。 Act(6): 保存をクリックする。 60

Slide 111

Slide 111 text

/********************************** 時間が⾜りない場合はスキップする。 *********************************/ アプリケーション・アイコンも会社のロゴに変更します。カスタマイズのアプリケーション・アイコンの変更を呼び出します。 Act(1): 開発者ツール・バーのカスタマイズから、アプリケーション・アイコンの変更を実⾏する。アイコンをアップロードします。 Act(2): 新規アイコンをアップロードします、をクリックして、ファイルの選択画⾯を表⽰させ、TheO_cmyk_0_86_100_0.pngのオラクルのロゴを選択する。これも保存します。 Act(3): 保存をクリックする。 61

Slide 112

Slide 112 text

Act(4): ブレッドクラムのアイコン表⽰にポインタを当てる。アイコンが変更されました。作成したアプリケーションを、誰でも参照できるように、ユーザー認証を解除します。アプリケーション・ビルダーに移ります。 Act(5): 開発者ツール・バーのアプリケーションをクリックして、アプリケーション・ビルダーを開く。 61

Slide 113

Slide 113 text

/********************************** 時間が⾜りない場合はスキップする。 *********************************/ Oracle APEXのアプリケーションは、ページを単位として開発しますが、アプリケーション全体で利⽤するコンポーネントは、共有コンポーネントに含まれます。認証の設定も共有コンポーネントです。 Act(1): 共有コンポーネントをクリックする。認証スキームを開きます。 Act(2): 認証スキームをクリックする。現在は、Oracle APEXアカウントが登録されています。新規に、ユーザー認証を⾏わない認証スキームを作成します。 62

Slide 114

Slide 114 text

作成をクリックします。 Act(3): 作成をクリックする。新規作成とします。 Act(4): ダイアログのメソッドはコピーとして作るかどうかなので、デフォルトの新規作成のままにして、次をクリックする。認証スキームの名前は、認証なし、 Act(5): 名前に認証なしを⼊⼒する。スキーム・タイプは、認証なしとします。 Act(6): スキーム・タイプに認証なしを選択する。認証スキームを作成します。 Act(7): 認証スキームの作成をクリックする。ユーザー認証をしないスキームが作成されて、アプリケーションで使われるようになりました。 62

Slide 115

Slide 115 text

/********************************** 時間が⾜りない場合はスキップする。 *********************************/ デモではiPhoneシミュレーターを使いますが、すでにどこからでもアプリにアクセスできるようになっています。作成したアプリケーションをスマホからアクセスしてみます。 Act: iPhoneシミュレーターを起動する。アプリケーションはapex.oracle.comに作成しているので、URLは以下でアクセスできる状態です。 https://apex.oracle.com/pls/apex/r/取得したワークスペース名/f1-races/ なので、iPhoneに限らずAndoroidでも、シミュレーターを使わず実機で確認することができます。 Act: ナビゲーションを開いて、それぞれのページを表⽰する。 63

Slide 116

Slide 116 text

/********************************** 時間が⾜りない場合はスキップする。 *********************************/ ランドスケープに切り替えてみます。 Act: ランドスケープにして、それぞれのページを表⽰する。 64

Slide 117

Slide 117 text

/********************************** 時間が⾜りない場合はスキップする。 *********************************/ このアプリケーションを作成するときに、Progressive Web Appの機能にチェックを⼊れていたので、アプリケーションのインストールができます。 Act: 画⾯上の雲にダウンロードのアイコンをクリックする。 Andoroidだと違うようなのですが、iPhoneでのインストール⼿順は、Web ページをホーム画⾯に配置する⼿順と同じです。共有をクリックして、 Act: 共有をクリックする。追加をクリックします。 Act: 追加をクリックする。 65

Slide 118

Slide 118 text

ホーム画⾯にアプリが追加されました。 65

Slide 119

Slide 119 text

/********************************** 時間が⾜りない場合はスキップする。 *********************************/ iPhoneの場合、アプリケーションのインストール⼿順は、ウェブ・ページのホーム画⾯への登録と⼿順が同じなので、何がインストールされたか分かりません。 Safariの開発ツールを開いて確認してみると、サービス・ワーカーがインストールされていることが確認できます。デフォルトでは、コンテンツのキャッシュのみを実⾏します。 66

Slide 120

Slide 120 text

Oracle APEXのデモンストレーションは以上です。では、ラップアップです。 67

Slide 121

Slide 121 text

Oracle APEXに関するに⽇本語の情報は apex.oracle.com/go/japan にまとまっています。英語の情報へのリンク、学習⽤のビデオ・コンテンツ、サンプル・アプリケーション、技術ブログなど、⾊々な情報が紹介されています。もっとOracle APEXについて知りたいという⽅は、ぜひアクセスしてみてください。 68

Slide 122

Slide 122 text

以上になります。本⽇はセッションにご参加いただき、ありがとうございました。 69