Oracle APEXでソーシャル・メディア・アプリケーションを作成しよう！

Oracle APEXでソーシャル・メディア・アプリケーションを作成しよう︕ ハンズオン手順日本オラクル株式会社 2023年8月25日

アジェンダ 1. Oracle APEXの始め方 2. Oracle APEXの紹介 Lab 1:APEXアプリケーションの新規作成 Lab
2:データモデルの作成 Lab 3:APEXの開発ツールになれる Lab 4:ホーム・ページのカスタマイズ Lab 5:フォーム・リージョンの作成 Lab 6:カード・リージョンの作成 Lab 7:アクションを呼び出すボタンの作成 Lab 8:動的アクションの作成 Lab 9:⾒た⽬の改善 Lab 10:地図の追加 Lab 11:プッシュ通知の実装 Lab 12:HTML⽣成の仕組み 2 Copyright © 2023, Oracle and/or its affiliates

無料で始める方法は３通り 4 Copyright © 2023, Oracle and/or its affiliates 1.
https://apex.oracle.com/go/request-workspaceから無料のワークスペースを取得します。 2. https://signup.cloud.oracle.com/よりOracle Cloudのアカウントを取得し、Always Freeの Autonomous Databaseのインスタンスを作成します。 3. Oracle Database Express Editionのインスタンスを作成し、Oracle APEXをインストールします。 https://apex.oracle.comにアクセスし、今日から無料で開始をクリックします。

無料のワークスペースの取得 • 以下を入力し、Request Workspaceをクリックします。 • 名(First name)、姓(Last name) • メールアドレス(Email)
• 国(Your Location) • APEX使用経験の有無(Are you new to Oracle APEX?) • 授業や研修での使用かどうか(Do you plan to use APEX for education or training?) • 利用規約の承諾(I agree to the terms of the Oracle APEX Service Agreements) • 指定したメールアドレスにメールが届くので、Create Workspaceをクリックします。 • 検証用途に限定されています。 • 容量は50MBです。 • 不具合と思われる事象の再現ケースをOracle Supportと共有するためにも使用できます。 • 利用できる機能の制限はほぼありません。 5 Copyright © 2023, Oracle and/or its affiliates

Oracle CloudのAlways Free Autonomous Database • Oracle Cloud Free Tierのアカウントにサインアップします。
• 通常、本人確認のためにクレジットカード番号の入力を求められます。 • アカウントをアップグレードするまでは、クレジットカードに課金されることはありません。 • Always FreeのAutonomous Databaseは２インスタンスまで作成できます。 • 1 OCPU（オーバーサブスクリプションあり） • 容量は20GBまで。 • 機能制限はありません。 • 文字や数値データのみ、少人数での利用であれば、実用に耐える環境です。参考: The story behind a COVID-19 exposure-tracking application in Finland https://blogs.oracle.com/database/post/covid-19-tracking-app-finland On the busiest day recorded, the application had 600,000 distinct users, and the peak period had 300,000 users in a two-hour period, which the application was able to handle quickly. 6 Copyright © 2023, Oracle and/or its affiliates

Oracle Database 23c Free + Oracle APEX • Oracle Database
23c Free – Developer Releaseがインストールできる環境であれば、どこでも実装可能です。 • AWS、Google Cloud、MS Azure、VirtualBox、手元の LinuxやWindows(21c XE)マシンなど。 • Oracle Database 23c Free – Developer Releaseの制限 • CPUスレッド: 2 • ユーザー・データ: 12 GB • 利用可能なメモリ: 2 GB • 利用可能な機能に制限はありません。 • サポート契約がないため、パッチは適用できません。 • インストール、構成、管理を自分で行う必要があります。 • ライセンスについては、Oracle Free Use Terms and Conditionsを参照してください。 7 Copyright © 2023, Oracle and/or its affiliates REST Data Services、APEX、 Databaseが構成済みの VirtualBox仮想アプライアンスも提供されています。 https://www.oracle.com/database/technologies/databaseappdev-vm.html

Oracle APEXとは？ 9 Copyright © 2023, Oracle and/or its affiliates
• Oracle Databaseで動作するエンタープライズ・アプリケーション向けのローコード・アプリケーション・プラットフォーム（Low Code Application Platform – LCAP）です。 • アプリケーション開発ツール、各種ユーティリティ、アプリケーションの実行環境を含みます。開発者が作成したアプリケーションの実行開発を支援する各種ユーティリティアプリケーションを開発するツール

概要 10 Copyright © 2023, Oracle and/or its affiliates すべての処理、データ操作およびビジネス・ロジックは、データベースで実行されます。
WebブラウザからのHTTPリクエストはOracle REST Data Services (ORDS)に送信され、そこでアクション対象のOracle Databaseに渡されます。データベース内で、リクエストはOracle APEX によって処理されます。処理が完了すると、その結果はORDSを介してブラウザに戻されます。

ステートレス・アクセス 11 Copyright © 2023, Oracle and/or its affiliates POST
/ords/wwv_flow.accept GET /ords/r/… Call wwv_flow.show(…) Call wwv_flow.accept(…) POST /ords/wwv_flow.ajax Call wwv_flow.ajax(…) ページの表示フォームの送信データの要求セッションID Oracle REST Data Services (ORDS)は受け取ったURLとパラメータを引数に変えて、PL/SQLのプロシージャを呼び出します。セッションIDはつねにパラメータに含まれます。ORDSはステートを保持しません。

リファレンス・アーキテクチャ 12 Copyright © 2023, Oracle and/or its affiliates 参照（機械翻訳）:
https://docs.oracle.com/ja/solutions/deploy-ords-ha-oci/index.html Oracle REST Data Services(ORDS)は完全にステートレスであるため、ロード・バランサーの配下に複数配置することで可用性を確保できます。データベースの可用性は、Real Application Clusters(RAC)やData Guardの構成によって確保します。

メタデータ駆動 13 Copyright © 2023, Oracle and/or its affiliates コンポーネント
テンプレート SQL, PL/SQL セッション・ステート JavaScript, CSS メタデータ SELECT * FROM EMP SQLの実行結果をテンプレートに埋め込む (データベースにて実行）

メタデータとは？ Oracle APEXのすべてのデータ（ワークスペース、アプリケーション、ページ、コンポーネント設定、etc.）は、APEX_XX0X00（XX0X00はバージョン）スキーマに保存されています。メタデータを参照するビューが提供されています。アプリケーションID 140のページ2にある
対話モード・レポートに含まれる列とその型を一覧します。 14 Copyright © 2023, Oracle and/or its affiliates select region_name, form_label, column_type from APEX_APPLICATION_PAGE_IR_COL where application_id = 140 and page_id = 2 order by display_order

Oracle APEXの開発ツールもOracle APEXのアプリケーション 15 Copyright © 2023, Oracle and/or its
affiliates システム提供のメタデータ APEX_XX0X00スキーマユーザーデータアプリケーションのメタデータユーザーのスキーマ PL/SQLライブラリ Oracle APEXの開発ツールユーザーが開発したアプリケーション

はじめに • 本ハンズオンはOracle LiveLabsに掲載されているBuild a Social Media App Using Oracle
APEX!のハンズオンを日本語に翻訳したものです。 • 一部の設定や手順を変更しています。同じ手順ではありません。 • apex.oracle.comよりワークスペースを取得して作業を行なうことを想定していますが、Autonomous Databaseやその他の環境でも、ほぼ同じ手順で作業が可能です。 Build a Social Media App Using Oracle APEX! https://apexapps.oracle.com/pls/apex/r/dbpm/livelabs/view-workshop?wid=3620 SQL, JavaScriptなどのコピペ用スニペット https://apex.oracle.com/pls/apex/r/japancommunity/simcontents/download?id=apex-social-media- handson-snippet.txt 16 Copyright © 2023, Oracle and/or its affiliates [Date]

Lab 1:APEXアプリケーションの新規作成何も機能を実装していない空のAPEXアプリケーションを作成して実行します。 17 Copyright © 2023, Oracle and/or its
affiliates [Date]

ハンズオンを始めましょう 1. https://apex.oracle.com/ja/にアクセスします。 2. サインインをクリックします。 18 Copyright © 2023, Oracle
and/or its affiliates [Date] 2

Oracle APEXの開発環境にサインインします 1. ワークスペース名を入力します。 2. ユーザー名を入力します。 3. パスワードを入力します。 4. サインインをクリックします。
apex.oracle.comのワークスペースはあらかじめ取得しておきます。 19 Copyright © 2023, Oracle and/or its affiliates [Date] 1 2 3 4

Oracle APEXにサインインした直後の画面です Oracle APEXのホーム・ページです。それぞれの画面の説明は、Oracle APEXクイック・ガイドで説明されています。アプリケーションの開発を始めます。 1. アプリケーション・ビルダーを開きます。
20 Copyright © 2023, Oracle and/or its affiliates [Date] 1

アプリケーション・ビルダーの画面ですアプリケーションの作成を開始します。アプリケーションがひとつも作成されていないと、はじめにが表示されます。作成済みのアプリケーションがある場合は、アプリケーションが一覧されます。 1. 作成をクリックします。 21 Copyright
© 2023, Oracle and/or its affiliates [Date] 1 作成済みのアプリケーションが一覧されます

アプリケーション作成ウィザードが開きます初期アプリケーションを作成します。 1. アイコンをクリックして変更します。（手順は後続ページ） 2. 名前はAPEXソーシャルメディアとします。 3. 編集をクリックしページ名をタイムラインに変更します。（手順は後続ページ）
4. 機能よりプログレッシブWebアプリケーションのインストールをチェックします。 5. アプリケーションの作成をクリックします。 23 Copyright © 2023, Oracle and/or its affiliates [Date] 1 2 3 4 5

アイコンを変更します 1. アイコンの図柄を選択します。 2. アイコンの色を選択します。 3. アイコンの保存をクリックします。後続の作業には影響しません。好みのアイコンを選択してください。 24
Copyright © 2023, Oracle and/or its affiliates [Date] 1 2 3

ページの名前を変更します 1. ページ名をタイムラインに変更します。 2. 変更の保存をクリックします。 25 Copyright © 2023, Oracle
and/or its affiliates [Date] 1 2

サインインのページが開きますデフォルトで作成されているサインインのページが開きます。 Oracle APEXの開発環境にサインインしたアカウントでサインインします。 1. ユーザー名を入力します。 2. パスワードを入力します。
3. サインインをクリックします。 27 Copyright © 2023, Oracle and/or its affiliates [Date] 1 2 3

作成直後のアプリケーションの画面ですデフォルトで作成されている画面とナビゲーションを確認します。 1. 画面左上のハンバーガー・メニューをクリックします。 28 Copyright © 2023,
Oracle and/or its affiliates [Date] 1

ナビゲーション・メニューが開きます今回は１ページにすべての機能を実装します。ナビゲーション・メニューとブレッドクラムは後続の作業で削除します。 29 Copyright © 2023, Oracle and/or
its affiliates [Date]

アプリケーション別名を設定します 1. アプリケーションの別名としてapex-social- mediaを設定します。 2. 変更の適用をクリックします。アプリケーションの別名は小文字で入力しても、変更を適用した後は大文字になります。アプリケーション別名はアプリケーションにアクセスするURLに現れます。URLとして分かりやすい
名前にします。URLに現れる際は小文字になります。 31 Copyright © 2023, Oracle and/or its affiliates [Date] 1 2

Lab 2:データモデルの作成投稿を保存する表SM_POSTSと投稿へのリアクションを保存する表SM_REACTIONSを作成します。 32 Copyright © 2023, Oracle and/or its
affiliates [Date]

SQLワークショップを開きますクイックSQLを使って表を作成します。 SQLワークショップを開き、ユーティリティからクイックSQLを開きます。今回はナビゲーション・メニューからクイック SQLを開きます。（手順は後続ページ） 33 Copyright © 2023,
Oracle and/or its affiliates [Date]

クイックSQLを開きます 1. ナビゲーション・メニューからSQLワークショップを開きます。 2. 開いたメニューよりユーティリティを開きます。 3. クイックSQLを開きます。 34

クイックSQLのモデルを記述します 36 Copyright © 2023, Oracle and/or its affiliates [Date]
# prefix: sm # apex: true # auditcols: true posts post_comment vc4000 photo file lat num lon num post_owner vc80 /nn post_date reactions post_id /fk posts reaction vc16 reaction_owner vc80 /nn reaction_date lat num lon num # prefix: sm # apex: true # auditcols: true posts post_comment vc4000 photo file lat num lon num post_owner vc80 /nn post_date reactions reaction vc16 reaction_owner vc80 /nn reaction_date lat num lon num 親子関係の定義方法が異なりますが、同じDDLが生成されます。

モデルから表を作成するSQLスクリプト（DDL）を生成します 1. クイックSQLのモデルを入力します。 2. SQLの生成をクリックします。 37 Copyright © 2023, Oracle
and/or its affiliates [Date] # prefix: sm # apex: true # auditcols: true posts post_comment vc4000 photo file lat num lon num post_owner vc80 /nn post_date reactions reaction vc16 reaction_owner vc80 /nn reaction_date lat num lon num 1 2

生成されたSQLスクリプトを保存します 1. SQLスクリプトを保存をクリックします。 2. スクリプト名にpostsと入力します。 3. スクリプトを保存をクリックします。生成されたSQLスクリプトは、SQLワークショップのSQLスクリプトとして保存されます。 38

SQLスクリプトを実行します 1. レビューおよび実行をクリックします。 39 Copyright © 2023, Oracle and/or its
affiliates [Date] 1

SQLスクリプトのスクリプト・エディタから実行します画面がSQLスクリプトに移り、スクリプト・エディタで生成されたSQLスクリプトが表示されます。スクリプトの編集が可能ですが、今回はスクリプトの編集は不要です。 1. 実行をクリックします。 40 Copyright
© 2023, Oracle and/or its affiliates [Date] 1

即時実行します確認画面が開きます。 1. 即時実行をクリックします。 41 Copyright © 2023, Oracle and/or
its affiliates [Date] 1

表が作成されました表SM_POSTSとSM_REACTIONSが作成されたことを確認します。これから表SM_REACTIONSに一意制約を追加します。 SQLワークショップのオブジェクト・ブラウザを使用します。 42 Copyright ©
2023, Oracle and/or its affiliates [Date]

SQLワークショップを開きます 1. 画面左上のAPEXロゴをクリックし、ホーム・ページに戻ります。 2. SQLワークショップをクリックします。ナビゲーション・メニューから直接オブジェクト・ブラウザを呼び出すこともできます。 43 Copyright
© 2023, Oracle and/or its affiliates [Date] 2 1

オブジェクト・ブラウザを開きます 1. オブジェクト・ブラウザをクリックします。 44 Copyright © 2023, Oracle and/or its
affiliates [Date] 1

表SM_REACTIONSを選択します 1. 検索フィールドにオブジェクトの接頭辞SM_ を入力し、対象を絞り込みます。 2. 表のノードにあるSM_REACTIONSをクリックし、選択します。 45 Copyright ©
2023, Oracle and/or its affiliates [Date] 1 2

制約の作成を始めます 1. 作成をクリックします。 47 Copyright © 2023, Oracle and/or its
affiliates [Date] 1

制約を作成します 1. 制約のタイプとして一意を選択します。 2. 一意列1としてPOST_IDを選択します。 3. 一意列2としてREACTION_OWNERを選択します。 4. 適用をクリックします。
制約の名前はデフォルトのSM_REACTIONS_CONになります。一般的には制約名は開発規約に従って命名します。表SM_REACTIONSに列POST_ID、REACTION_OWNER での一意制約が作成されます。実行されるSQLは以下です。 alter table "WKSP_QFDA23411"."SM_REACTIONS" add constraint "SM_REACTIONS_CON" unique ( "POST_ID", "REACTION_OWNER" ); 48 Copyright © 2023, Oracle and/or its affiliates [Date] 1 2 3 4

制約が作成されました一意制約SM_REACTIONS_CONが作成されたことを確認します。データベース・オブジェクトの準備は以上で完了です。 49 Copyright © 2023, Oracle
and/or its affiliates [Date]

APEXのワークスペース・スキーマとデータを保存するスキーマは分けることを推奨します • Oracle APEXでは、アプリケーションの設計情報（誰がどのようなアプリケーションを作ったのか）、稼働情報（作成されたアプリケーションがどの程度使用されているのか）といった情報がリレーショナル・データベースに保存されています。
• APEXが提供しているビューを検索することで、それらの情報を確認できるため、アプリケーション開発の統制を取りやすいです。 • 単純にgrant文によるアクセス制御を行う場合を含め、Database Vault、仮想プライベート・データベース、Real Application Security、Data RedactionといったOracle Databaseが提供しているセキュリティ機能の適用を検討している場合は、APEXのワークスペース・スキーマ（アプリケーションが動作しているスキーマ）とは別にデータを保存するスキーマを作成することを勧めます。 • リレーショナル・データベースに作成した表やビューなどのオブジェクトはディクショナリから参照できるため、アプリケーション開発の統制をを取りやすいです。 50 Copyright © 2023, Oracle and/or its affiliates [Date]

Lab 4:ホーム・ページのカスタマイズホーム・ページからナビゲーション・メニューとブレッドクラムを削除します。 52 Copyright © 2023, Oracle and/or its
affiliates [Date]

ナビゲーション・メニューを削除します 1. レンダリング・ビュー上でページ1:タイムラインを選択します。 2. ナビゲーション・メニューのユーザー・インターフェース・レベルのオーバーライドをオンにします。 3. リストにナビゲーション・メニュー・リスト
を表示しないを選択します。 4. 保存をクリックします。 55 Copyright © 2023, Oracle and/or its affiliates [Date] 2 3 1 4

ブレッドクラムを削除します 1. Breadcrumb BarのノードにあるAPEXソーシャルメディア上でコンテキスト・メニューを開きます。 2. 削除を実行します。 56 Copyright

ブレッドクラムが削除されましたナビゲーション・メニューとブレッドクラムが削除されました。アプリケーションを実行し、変更されたページを確認します。 1. 保存と実行をクリックします。 57 Copyright ©
2023, Oracle and/or its affiliates [Date] 1

変更されたアプリケーションのページですナビゲーション・メニューとブレッドクラムがページ上から無くなっています。 58 Copyright © 2023, Oracle and/or its
affiliates [Date]

Lab 5:フォーム・リージョンの作成 59 Copyright © 2023, Oracle and/or its affiliates
[Date] 写真にコメントを付けて投稿するフォームを作成します。

リージョンを作成します 1. Body上でコンテキスト・メニューを開きます。 2. リージョンの作成を実行します。 60 Copyright © 2023,
Oracle and/or its affiliates [Date] 2 1

フォーム・リージョンに変更します 1. タイトルを投稿にします。 2. タイプをフォームにします。リージョンのタイプをフォームに変更すると、ソース（データ・ソース）の設定を要求されます。 61 Copyright

ソースに表を設定します 1. 表名の右端にあるハンバーガー・メニューをクリックします。 2. 検索フィールドにSM_を入力し、選択肢を絞り込みます。 3. SM_POSTSをクリックして選択します。 62

表がデータ・ソースとして認識されました Region Bodyに、表に含まれる列に対応したページ・アイテムが作成されます。この状態のページを確認します。 1. 保存と実行をクリックします。 63 Copyright ©
2023, Oracle and/or its affiliates [Date] 1

初期状態のページですこのページからカスタマイズを始めます。 64 Copyright © 2023, Oracle and/or its affiliates
[Date]

不要なページ・アイテムをコメント・アウトしますユーザーによるデータ入力の対象外のページ・アイテムをコメント・アウトします。 1. ページ・アイテムP1_PHOTO_FILENAME、 P1_PHOTO_MIMETYPE、P1_PHOTO_CHARSET、 P1_PHOTO_LASTUPD、P1_CREATED、 P1_CREATED_BY、P1_UPDATED、 P1_UPDATED_BYを選択します。 2.
ビルド・オプションをコメント・アウトに変更します。ページ・アイテムを削除すると、列の同期化を実行すると削除したページ・アテイムが再度作成されます。コメント・アウトはページ・アイテムは存在しない扱いですが、列の同期化で再作成はされません。 65 Copyright © 2023, Oracle and/or its affiliates [Date] 1 1 2

投稿のコメント入力欄を調整します 1. ページ・アイテムP1_POST_COMMENTを選択します。 2. タイプをテキスト・フィールドに変更します。 3. ラベルをコメントに変更します。 66

緯度経度のフィールドを非表示にします 1. ページ・アイテムP1_LAT、P1_LONを選択します。 2. タイプを非表示にします。 3. 保護された値をオフにします。緯度（P1_LAT）、経度（P1_LON）の値はデバイスまたはブラウザから動的アクション（JavaScriptの
実行）を使って設定します。そのため、保護された値をオフにする必要があります。 67 Copyright © 2023, Oracle and/or its affiliates [Date] 1 2 3

投稿者と投稿日を非表示にします 1. ページ・アイテムP1_POST_OWNER、 P1_POST_DATEを選択します。 2. タイプを非表示にします。投稿者（P1_POST_OWNER）、投稿日（P1_POST_DATE）はデータベースで実行するプロセスで設定します。そのため、保護された値はオフにする必要はありません。
68 Copyright © 2023, Oracle and/or its affiliates [Date] 1 2

ページ・アイテムの配置を変えます 1. ページ・アイテムP1_LAT、P1_LON、 P1_POST_OWNER、P1_POST_DATEを選択します。 2. ページ・アイテムP1_IDの下にドラッグ＆ドロップします。タイプが非表示のアイテムを上部にまとめます。機能的な違いは発生しません。
非表示のページ・アイテムなので、ページの表示も変わりません。 69 Copyright © 2023, Oracle and/or its affiliates [Date] 1 2

写真を投稿できるようにします 1. ページ・アイテムP1_PHOTOを選択します。 2. 属性として以下を設定します。タイプ：ファイル参照… ラベル：写真表示形式：Block Dropzone ドロップ・ゾーンのタイトル：投稿する写真を選ぶ
記憶域タイプ：BLOB column specified in Item Source attribute MIMEタイプ列：PHOTO_MIMETYPE ファイル名列：PHOTO_FILENAME 文字セット列：PHOTO_CHARSET BLOB最終更新列：PHOTO_LASTUPD ダウンロード・リンクの表示：オフファイルタイプ：image/* 最大ファイル・サイズ：10000 70 Copyright © 2023, Oracle and/or its affiliates [Date] 1 2 2 2 2

スマホのときは背面カメラを起動します 1. 詳細のカスタム属性にcapture="environment" を設定します。 2. 一旦保存と実行をクリックし、これまでの作業が反映された画面を見てみます。カスタム属性は、HTMLのタグにそのままの形で含まれます。 71
Copyright © 2023, Oracle and/or its affiliates [Date] 1 2

今までの作業結果の画面ですコメント入力は、写真の下に配置した方が良さそうです。 72 Copyright © 2023, Oracle and/or its
affiliates [Date]

コメントを写真の下に配置します 1. ページ・アイテムP1_POST_COMMENTをつかみ、P1_PHOTOの下に移動します。または、 1. ページ・アイテムP1_PHOTOをつかみ、 P1_POST_COMMENTの上に移動します。 73 Copyright

投稿フォームをインライン・ダイアログにします 1. リージョン投稿を選択します。 2. レイアウトの位置をDialogs, Drawers and Popupsに変更します。 3. 外観のテンプレートをInline
Dialogに変更します。 4. テンプレート・オプションをクリックして開きます。 Dialogs, Drawers and Popupsに配置されたリージョンは、デフォルト状態では非表示になります。 74 Copyright © 2023, Oracle and/or its affiliates [Date] 1 2 3 4

テンプレート・オプションを調整します 1. Auto Heightにチェックを入れます。 2. SizeはMedium (600x400)を選択します。 3. Heading LevelにH1を選択します。
4. OKをクリックします。見た目の調整はいつでも可能です。 75 Copyright © 2023, Oracle and/or its affiliates [Date] 1 2 3 4

今までの作業結果の画面ですフォームが表示されなくなっています。これからフォームを開くボタンを作成します。 76 Copyright © 2023, Oracle and/or its
affiliates [Date]

投稿を始めるボタンにします 1. 新規に作成されたボタンを選択します。 2. ボタンの属性として以下を設定します。ボタン名：ADD_POST ラベル：投稿します位置：After Logo ボタン・テンプレート：Text
with Icon CSSクラス：new-post-button アイコン：fa-plus 動作/アクション：動的アクションで定義 78 Copyright © 2023, Oracle and/or its affiliates [Date] 1 2 2 2 2 2

動的アクションが実行されるタイミングを指定します 1. 新規に作成された動的アクション（この時点では新規）を選択します。 2. 識別の名前として、投稿しますをクリックを設定します。ボタンに作成した動的アクションは、タイミングのイベントにクリックがデフォルトで設定されます。
80 Copyright © 2023, Oracle and/or its affiliates [Date] 1 2

投稿フォームを開くアクションを設定します 1. 新規に作成されたTRUEアクション（この時点では表示）を選択します。 2. 識別の名前として投稿ダイアログを開くを設定します。 3. アクションとしてリージョンを開くを選択します。
4. 影響を受ける要素の選択タイプとしてリージョンを選びます。 5. リージョンとして投稿を選択します。 6. 保存と実行をクリックして、今までの作業結果を確認します。 81 Copyright © 2023, Oracle and/or its affiliates [Date] 1 2 3 4 5 6

ボタンの属性を設定します 1. 新規に作成されたボタンを選択します。 2. 以下のプロパティをボタンに設定します。ボタン名：SAVE ラベル：投稿位置：Next ホット：オン CSSクラス：post-button
動作/アクション：動的アクションで定義データベース・アクション：SQL INSERT操作 3. テンプレート・オプションを開きます。 84 Copyright © 2023, Oracle and/or its affiliates [Date] 1 2 2 2 2 2 2 3

ボタンの大きさを調整します 1. SizeとしてLargeを選択します。 2. WidthにStretchを選択します。 3. OKをクリックして、変更を保存します。 85 Copyright ©
2023, Oracle and/or its affiliates [Date] 1 2 3

投稿を保存する動的アクションのプロパティを設定します 1. 作成された動的アクション（この時点では新規）を選択します。 2. 名前は投稿ボタンをクリックとします。 3. クライアント側の条件としてJavaScript式を選択します。 4.
JavaScript式として以下を記述します。タイミングのイベントはデフォルトのクリックです。クライアント側の条件は写真かコメントのどちらかが設定されていないと、ボタンを押しても投稿しない、という意味です。 87 Copyright © 2023, Oracle and/or its affiliates [Date] 1 2 3 4 apex.items.P1_PHOTO.value.length > 0 || apex.items.P1_POST_COMMENT.value.length > 0

TRUEアクションでページの送信を行います 1. 作成されたTRUEアクション（この時点では表示）を選択します。 2. 名前は投稿の保存とします。 3. アクションとしてページの送信を選択します。 4.
リクエスト/ボタン名としてSAVEを設定します。 88 Copyright © 2023, Oracle and/or its affiliates [Date] 1 2 3 4

投稿をデータベースに保存するプロセスを作成します 1. 左ペインでプロセス・ビューを開きます。 2. プロセスのノード上でコンテキスト・メニューを開きます。 3. プロセスの作成を実行します。 89 Copyright
© 2023, Oracle and/or its affiliates [Date] 1 2 3

投稿された内容をデータベースに保存します 1. 新規に作成されたプロセスを選択します。 2. 識別のタイプとしてフォーム – 行の自動処理 (DML)を選択します。 3. フォーム・リージョンに投稿を選択します。
4. 名前は投稿の保存とします。 5. 成功メッセージとして投稿しました！を設定します。 6. サーバー側の条件のボタン押下時にSAVEを選択します。 90 Copyright © 2023, Oracle and/or its affiliates [Date] 1 2 3 4 5 6

投稿者と投稿日を設定するプロセスを作成します。 1. 先ほどと同様にプロセスを作成し、プロセス投稿の保存の上に配置します。 2. 識別のタイプはコードを実行です。 3. 名前は投稿者と投稿日の設定とします。 4. ソースのPL/SQLコードとして以下を記述しま
す。 5. サーバー側の条件のボタン押下時にSAVEを設定します。 6. 以上で投稿フォームは完成です。保存と実行をクリックします。 91 Copyright © 2023, Oracle and/or its affiliates [Date] 1 2 3 4 5 :P1_POST_OWNER := :APP_USER; :P1_POST_DATE := sysdate; 6

写真にコメントをつけて投稿します 1. 画面左上の投稿しますをクリックし、投稿フォームを開きます。 2. ファイルの選択をクリックし、投稿する写真を選びます。 3. コメントを入力します。 4.
投稿ボタンをクリックします。 92 Copyright © 2023, Oracle and/or its affiliates [Date] 1 2 3 4

表SM_POSTSのデータを参照します 1. 検索フィールドにSM_を入力して、対象を絞り込みます。 2. 表よりSM_POSTSを選択します。 3. データ・タブを選択します。入力したデータが表示されます。コメントやアップロードした写真のファイル名、MIME_TYPE、そ
れとPOST_OWNERやPOST_DATEに値が記録されているか確認します。 95 Copyright © 2023, Oracle and/or its affiliates [Date] 1 2 3

Lab 6:カード・リージョンの作成 96 Copyright © 2023, Oracle and/or its affiliates
[Date] 投稿された写真とコメントをカードとして一覧します。

投稿を表示するリージョンを作成します 1. 左ペインにレンダリング・ビューを表示させます。 2. Bodyの上でコンテキスト・メニューを開きます。 3. リージョンの作成を実行します。 97

カード・リージョンのプロパティを設定します 1. 新規に作成されたリージョンを選択します。 2. 識別の名前はタイムラインとします。 3. タイプとしてカードを選択します。 4. ソースのタイプをSQL問合せに変更します。 5.
SQL問合せとして以下を記述します。 98 Copyright © 2023, Oracle and/or its affiliates [Date] 1 2 3 4 5 select p.id, p.post_owner AS user_name, p.post_comment AS comment_text, p.photo, p.photo_mimetype, p.photo_lastupd, apex_util.get_since(p.post_date) post_date, ( select count(*) from SM_REACTIONS smr where smr.post_id=p.id ) as REACTIONS, ( select 'user-has-liked' from SM_REACTIONS smr where smr.post_id=p.id and smr.reaction_owner=:APP_USER ) USER_REACTION_CSS from SM_POSTS p order by p.post_date desc

カード・リージョンの属性を設定します 1. プロパティ・エディタの属性タブを開きます。 2. カードの主キー列1としてIDを選択します。 3. タイトルの列としてUSER_NAMEを選択します。 4.
サブタイトルの列としてPOST_DATEを選択します。 100 Copyright © 2023, Oracle and/or its affiliates [Date] 2 3 4 1

カード・リージョンの属性を設定します（続き） 1. 本体の列としてCOMMENT_TEXTを選択します。 2. アイコンとバッジのアイコン・ソースとしてイニシャル、アイコン列としてUSER_NAMEを選択します。 101 Copyright

カード・リージョンの属性を設定します（写真） 1. メディアの属性を以下のように設定します。ソース：BLOB列 BLOB列：PHOTO 位置：最初外観：ワイドスクリーンサイズ指定：カバー CSSクラス：selectDisable イメージの説明：&COMMENT_TEXT.
2. BLOB属性を以下のように設定します。 MIMEタイプ列：PHOTO_MIMETYPE 最終更新列：PHOTO_LASTUPD 3. 保存と実行をクリックします。 102 Copyright © 2023, Oracle and/or its affiliates [Date] 1 2 3

カードの主キー列1を再設定しますメディアのソースを設定したときに、カードの主キー列1がリセットされることがあります。 1. メッセージの数を確認し、クリックします。メッセージが確認できます。 2. カードの主キー列1として再度IDを設定します。 3.
保存と実行をクリックします。 103 Copyright © 2023, Oracle and/or its affiliates [Date] 1 2 3

Lab 7:アクションを呼び出すボタンの作成 105 Copyright © 2023, Oracle and/or its affiliates
[Date] カード上に投稿にいいねをするボタンと投稿の削除を行なうボタンを作成します。

作成されたアクションはボタンにします 1. 識別のタイプとしてボタンを選択します。（これがデフォルトです）。アクションにはこの他に、カード全体、タイトル、サブタイトル、メディアを選ぶことができます。ボタンの場合はボタンが作成され、それをクリックしたときに実行する動作を定義します。それ以外は、それぞれのリージョンをクリックしたとき
に実行する動作を定義します。 107 Copyright © 2023, Oracle and/or its affiliates [Date] 1

呼び出される処理を指定します 1. ラベルとして&REACTIONS.を設定します。列 REACTIONSの値に置換されます。最後の.（ピリオド）をつけ忘れないようします。 2. リンクのタイプとしてURLにリダイレクトを選択します。このボタンをクリックしたときに、指定したURLにリダイレクトします。 3.
リダイレクト先のURLを指定するため、ターゲットを開きます。 108 Copyright © 2023, Oracle and/or its affiliates [Date] 1 2 3

呼び出されるJavaScriptのアクションを指定します 1. URLとして#action$like?id=&ID.を設定します。 2. OKをクリックします。 Oracle APEXは、 apex.actionというJavaScriptを実行するフレームワークを提供しています。このapex.actionに、likeという名前で作成したアク
ションを、引数idとして&ID.（列IDの値）を渡して呼び出します。このAPEXアクションのlikeは、後の手順で作成します。そのため、現時点ではいいねボタンを押しても、likeアクションが未定義のためエラーが発生します。 109 Copyright © 2023, Oracle and/or its affiliates [Date] 1 2

ボタンの見かけをいいねにします 1. 外観の表示タイプをアイコン付きテキストに変更します。 2. アイコンとしてfa-heart &USER_REACTION_CSS. を指定します。 3. CSSクラスとしてjs-heart-buttonを指定します。
4. 保存と実行をクリックします。 110 Copyright © 2023, Oracle and/or its affiliates [Date] 1 2 3 4

削除ボタンを作成します 1. カードにアクションを作成します。 2. ラベルを削除とします。 3. レイアウトの位置に２次を選びます。 4. リンクのタイプにURLにリダイレクトを選びます。
5. ターゲットに#action$delete?id=&ID.を設定します。 6. 外観の表示タイプとしてアイコンを選びます。 7. アイコンとしてfa-trash-oを設定します。 112 Copyright © 2023, Oracle and/or its affiliates [Date] 2 3 4 5 6 7 1

削除ボタンの表示条件を設定します 1. サーバー側の条件のタイプとして式を選択します。 2. 言語としてPL/SQLを選択します。 3. PL/SQL式として:USER_NAME=:APP_USERを設定します。 4.
実行条件として各行を選択します。 5. 保存と実行をクリックします。削除ボタンは、その投稿をした人にだけ表示されます。他人の投稿に削除ボタンは表示されません。 113 Copyright © 2023, Oracle and/or its affiliates [Date] 1 2 3 4 5

apex.actionとしてlikeとdeleteを作成します 115 Copyright © 2023, Oracle and/or its affiliates [Date]
apex.actions.add([ { name: "like", action: (event, element, args) => { apex.items.P1_ACTION_ID.value = args.id; apex.event.trigger(document, 'action-like'); } }, { name: "delete", action: (event, element, args) => { apex.items.P1_ACTION_ID.value = args.id; apex.event.trigger(document, 'action-delete'); } } ]);

ページ・アイテムのプロパティを設定します 1. 新規に作成されたページ・アイテム（この時点ではP1_NEW）を選択します。 2. 識別の名前をP1_ACTION_IDに変更します。 3. タイプを非表示にします。 4. 設定の保護された値をオフにします。
5. 保存します。 119 Copyright © 2023, Oracle and/or its affiliates [Date] 1 2 3 4 5

Lab 8:動的アクションの作成 121 Copyright © 2023, Oracle and/or its affiliates
[Date] いいねボタンと削除ボタンをクリックしたときに呼び出される動的アクションを作成します。

タイミングにカスタム・イベントを選択します 1. 作成された動的アクション（この時点では新規）を選択します。 2. 識別の名前はaction-likeとします。この名前は任意です。 3. タイミングのイベントとしてカスタムを選択します。
124 Copyright © 2023, Oracle and/or its affiliates [Date] 2 3 1

カスタム・イベントを設定します 1. カスタム・イベントとしてaction-likeを設定します。 2. 選択タイプとしてJavaScript式を選びます。 3. JavaScript式にdocumentと記述します。 apex.actionのlikeで発行される以下のイベントが、この動的アクションで処理されます。
125 Copyright © 2023, Oracle and/or its affiliates [Date] 1 2 3 apex.event.trigger(document, 'action-like');

カード上のいいねボタンを変更します（jQuery版） 126 Copyright © 2023, Oracle and/or its affiliates [Date]
const button = $('[data-id="'+ apex.items.P1_ACTION_ID.value +'"] .js-heart-button'); // get the card const label = button.find('.a-CardView-buttonLabel'); // get the likes count section const icon = button.find('.a-CardView-buttonIcon'); // gets the element if its liked already let likeCount = label.text(); // get the like count if (icon.hasClass('user-has-liked')) { // user has liked this already, and they are unliking it now -- decrement label.text(--likeCount); } else { // user is liking the post -- increment label.text(++likeCount); } icon.toggleClass('user-has-liked'); // either add this class or remove it

JavaScript版のコードです 127 Copyright © 2023, Oracle and/or its affiliates [Date]
const button = document.querySelector('[data-id="' + apex.items.P1_ACTION_ID.value +'"] .js-heart-button'); // get the card const label = button.querySelector(".a-CardView-buttonLabel"); // get the likes count section const icon = button.querySelector(".a-CardView-buttonIcon"); // gets the element if its liked already let likeCount = label.textContent; if (icon.classList.contains("user-has-liked")) { // user has liked this already, and they are unliking it now -- decrement label.textContent = --likeCount; } else { // user is liking the post -- increment label.textContent = ++likeCount; } icon.classList.toggle("user-has-liked"); // either add this class or remove it

TRUEアクションを設定します 1. 作成済みのTRUEアクション（この時点では表示）を選択します。 2. 識別の名前をいいね – UIの更新(件数 + ハート
の色)とします。 3. アクションとしてJavaScriptコードの実行を選択します。 4. 設定のコードに前出のコードを記述します。 128 Copyright © 2023, Oracle and/or its affiliates [Date] 2 3 4 1

データベースに保存されているいいねの数を更新します 129 Copyright © 2023, Oracle and/or its affiliates [Date]
begin -- try to store this posts' reaction from this user insert into SM_REACTIONS (post_id, reaction, reaction_owner, reaction_date, lat, lon) values (:P1_ACTION_ID, 'LIKED', :APP_USER, sysdate, :P1_LAT, :P1_LON); exception when dup_val_on_index then -- remove it as it already existed delete from SM_REACTIONS where post_id=:P1_ACTION_ID and reaction_owner=:APP_USER; end;

データベースに保存されているいいねの数を更新します 1. 作成されたTRUEアクション（この時点では表示）を選択します。 2. 識別の名前はいいね – DBの処理とします。 3. アクションとしてサーバー側のコードを実行
を選択します。 4. 設定の言語はPL/SQLです。 5. PL/SQLコードに前出のコードを記述します。 6. 送信するアイテムとしてP1_ACTION_ID、 P1_LAT、P1_LONを指定します。 7. 保存と実行をクリックします。 131 Copyright © 2023, Oracle and/or its affiliates [Date] 2 1 3 4 5 6 7

動的アクションのプロパティを設定します 1. 新規に作成された動的アクション（この時点では新規）を選択します。 2. 識別の名前はaction-deleteとします。 3. タイミングのイベントはカスタムです。 4. カスタム・イベントとしてaction-deleteを指定
します。 5. 選択タイプはJavaScript式です。 6. JavaScript式としてdocumentを記述します。 apex.actionのdeleteで発行される以下のイベントが、この動的アクションで処理されます。 136 Copyright © 2023, Oracle and/or its affiliates [Date] 2 3 4 5 6 apex.event.trigger(document, 'action-delete'); 1

確認ダイアログを開くようにTRUEアクションを設定します 1. 作成済みのTRUEアクション（この時点では表示）を選択します。 2. 識別の名前は削除 – 確認ダイアログとします。 3.
アクションとして確認を選択します。 4. 設定のタイトルは確認とします。 5. メッセージは投稿を削除しようとしています。本当に削除しますか？とします。確認のダイアログが開き、OKをクリックしたときのみ、後続のTRUEアクションが実行されます。 137 Copyright © 2023, Oracle and/or its affiliates [Date] 1 2 3 4 5

表SM_POSTSから投稿を削除します 1. 新たに作成されたTRUEアクション（この時点では表示）を選択します。 2. 識別の名前は削除 – DBの処理とします。 3. アクションとしてサーバー側のコードを実行
を選択します。 4. 設定の言語はPL/SQLとします。 5. PL/SQLコードとして以下を記述します。 6. 送信するアイテムにP1_ACTION_IDを設定します。 139 Copyright © 2023, Oracle and/or its affiliates [Date] 1 2 3 4 5 6 delete from SM_POSTS where id=:P1_ACTION_ID and post_owner=:APP_USER;

ページ上のカードを削除します 1. 新たに作成されたTRUEアクション（この時点では表示）を選択します。 2. 識別の名前は削除 – カードの削除とします。 3. アクションとしてJavaScriptコードの実行を選
択します。 4. 設定のコードに以下を記述します。またはjQueryを使わず 5. 保存と実行をクリックします。 141 Copyright © 2023, Oracle and/or its affiliates [Date] 1 2 3 4 $('[data-id="' + apex.items.P1_ACTION_ID.value + '"]').remove(); 5 document.querySelector('[data-id="' + apex.items.P1_ACTION_ID.value + '"]').remove();

以下のCSSの記述を追加します 147 Copyright © 2023, Oracle and/or its affiliates [Date]
.user-has-liked { color: red; } @media (max-width: 640px) { .new-post-button { position: fixed; bottom: 24px; right: 24px; z-index: 1000; } }

写真の投稿を変更します 1. ページ・アイテムP1_PHOTOを選択します。 2. 外観のテンプレートをHiddenに変更します。 3. CSSクラスにfile-uploadを指定します。 4. アイコンにfa-camera-retroを指定します。 5.
レイアウトのラベル列スパンとして0を指定します。 6. テンプレート・オプションを開きます。 150 Copyright © 2023, Oracle and/or its affiliates [Date] 1 2 3 4 6 5

マップ・リージョンを配置します中央ペインの下部にあるコンポーネント・パレットより、マップ・リージョンをページに配置します。 1. 中央ペインでレイアウトを表示します。 2. 左ペインを閉じます。 3. 右ペインを閉じます。
4. コンポーネント・パレットの領域を広げます。 5. コンポーネントとしてリージョンを選択します。 6. マップを掴みます。 155 Copyright © 2023, Oracle and/or its affiliates [Date] 2 3 1 4 5 6

マップをドラッグ＆ドロップします 1. マップを掴みます。 2. マップを掴んだまま、DIALOGS, DRAWERS AND POPUPSの領域までドラッグ＆ドロップします。 156

マップのソースとなるSQLを設定します 1. 作成されたマップ・リージョン（この時点では新規）を選択します。 2. 識別のタイトルは投稿といいねの地点とします。 3. ソースの位置としてローカル・データベースを選択します。
4. タイプにSQL問合せを選択します。 5. SQL問合せに以下を記述します。 158 Copyright © 2023, Oracle and/or its affiliates [Date] 1 2 3 4 5 select distinct lat, lon, user_name, apex_util.get_since(cdate) as since from ( select lat, lon, post_owner as user_name, post_date as cdate from SM_POSTS union select lat, lon, reaction_owner as user_name, reaction_date as cdate from SM_REACTIONS )

レイヤーを設定します 1. 作成済みのレイヤー（この時点では新規）を選択します。 2. 識別の名前は地点とします。 3. ソースの位置としてリージョン・ソースを選択します。 4.
列のマッピングのジオメトリ列のデータ型として経度/緯度を選択します。 5. 経度列としてLONを選択します。 6. 緯度列としてLATを選択します。 160 Copyright © 2023, Oracle and/or its affiliates [Date] 1 2 3 4 5 6

マップを開くエントリーを追加します 1. エントリの追加をクリックします。 2. 順序に15を入力します。 3. 名前に地図を入力します。 4. ターゲットに#action$open-mapを入力します。 5.
アイコンにfa-mapを入力します。 6. 変更の適用をクリックします。 166 Copyright © 2023, Oracle and/or its affiliates [Date] 2 1 3 4 5 6

apex.actionを追記します 1. ページを選択します。 2. JavaScriptのページ・ロード時に実行に記述されているJavaScriptに、以下のAPEXアクションの定義を追記します。アロー記法でなければならない、ということはありません。 168
Copyright © 2023, Oracle and/or its affiliates [Date] { name: "open-map", action: () => { apex.event.trigger(document, 'action-open-map'); } } 1 2

apex.actionの定義です 169 Copyright © 2023, Oracle and/or its affiliates [Date]
1 apex.actions.add([ { name: "like", action: (event, element, args) => { apex.items.P1_ACTION_ID.value = args.id; apex.event.trigger(document, 'action-like'); } }, { name: "delete", action: (event, element, args) => { apex.items.P1_ACTION_ID.value = args.id; apex.event.trigger(document, 'action-delete'); } }, { name: "open-map", action: () => { apex.event.trigger(document, 'action-open-map'); } } ]);

動的アクションを作成します 1. 動的アクション・ビューを開きます。 2. カスタム上でコンテキスト・メニューを表示させます。 3. 動的アクションの作成を実行します。 170 Copyright

動的アクションのプロパティを設定します 1. 作成された動的アクション（この時点では新規）を選択します。 2. 識別の名前はaction-open-mapとします。 3. タイミングのカスタム・イベントとして action-open-mapを指定します。 4.
選択タイプとしてJavaScript式を選びます。 5. JavaScript式としてdocumentを指定します。 APEXアクションopen-mapの以下の記述より呼び出される動的アクションです。 171 Copyright © 2023, Oracle and/or its affiliates [Date] 1 2 3 4 5 apex.event.trigger(document, 'action-open-map');

TRUEアクションで地図を開きます 1. 作成済みのTRUEアクション（この時点では表示）を選択します。 2. 識別の名前は地図を開くとします。 3. アクションとしてリージョンを開くを選択します。 4.
影響を受ける要素の選択タイプとしてリージョンを選びます。 5. リージョンとして投稿といいねの地点を選びます。 172 Copyright © 2023, Oracle and/or its affiliates [Date] 1 2 3 4 5

マップをリフレッシュするTRUEアクションを作成しますマップをリフレッシュすることで、最新の情報を地図に表示させます。 1. True上でコンテキスト・メニューを表示させます。 2. 動的アクションの作成を実行します。 173 Copyright

TRUEアクションを設定します 1. 作成されたTRUEアクション（この時点では表示）を選択します。 2. 識別のアクションとしてリフレッシュを選択します。 3. 影響を受ける要素の選択タイプとしてリージョンを選びます。
4. リージョンとして投稿といいねの地点を選択します。 5. 一旦保存をクリックします。 174 Copyright © 2023, Oracle and/or its affiliates [Date] 1 2 3 4 5

ページのロードに動的アクションを作成しますページのロード時に、現在位置の座標をブラウザより取得し、ページ・アイテムP1_LAT、P1_LONに設定します。 1. ページのロード上でコンテキスト・メニューを表示させます。 2. 動的アクションの作成を実行します。 175

TRUEアクションを設定します 1. 作成済みのTRUEアクション（この時点では表示）を選択します。 2. 識別のアクションとして現在の位置の取得を選択します。 3. 設定の戻り型としてLatitude and
Longitudeを選択します。 4. 緯度アイテムとしてP1_LATを指定します。 5. 経度アイテムとしてP1_LONを指定します。以上でアプリケーションは完成です。 6. 保存と実行をクリックします。 177 Copyright © 2023, Oracle and/or its affiliates [Date] 1 2 3 4 5 6

プッシュ通知を有効化します 1. プログレッシブWebアプリケーションを開きます。 2. プッシュ通知のセクションへ移動します。 3. プッシュ通知の有効化をオンにします。 184 Copyright

資格証明が生成されます資格証明が作成作成され、プッシュ通知の資格証明に設定されます。ワークスペース・ユーティリティのWeb資格証明に、生成されたWeb資格証明が一覧されます。これはVAPID(RFC 8292 – Voluntary Application
Server Identification (VAPID) for Web Push)で必要な署名用の鍵ペアです。 186 Copyright © 2023, Oracle and/or its affiliates [Date]

プッシュ通知を有効にします 1. このデバイスでプッシュ通知を有効にするをチェックします。 2. 設定をクリックします。以上でプッシュ通知が有効になりました。プッシュ通知はデバイスごとに設定します。同じユーザーでもデバイスが異なると（例えばスマホ）、そのデバイスでプッシュ通知が有効に
なっていないと（そのデバイスでは）プッシュ通知は受信されません。 190 Copyright © 2023, Oracle and/or its affiliates [Date] 1 2

プッシュ通知を送信するTRUEアクションを作成します 1. 動的アクション・ビューを開きます。 2. カスタム・イベントのaction-likeのTrue上でコンテキスト・メニューを開きます。 3. TRUEアクションの作成を実行します。いいねボタンを押した時の処理を追加します。 192

プッシュ通信を実行します 193 Copyright © 2023, Oracle and/or its affiliates [Date]
declare l_count number; l_push_to sm_posts.post_owner%type; l_title varchar2(80); begin select count(*) into l_count from sm_reactions where post_id=:P1_ACTION_ID and reaction_owner=:APP_USER; if l_count = 0 then -- いいねの解除なので通知しない。 return; end if; select post_owner into l_push_to from sm_posts where id = :P1_ACTION_ID; l_title := :APP_USER || 'さんがいいねしました。'; apex_pwa.send_push_notification( p_user_name => l_push_to ,p_title => l_title -- body, icon, target_urlの設定は省略。 ); -- apex_pwa.push_queue; end;

TRUEアクションを定義します 1. 作成されたTRUEアクション（この時点では表示）を選択します。 2. 識別の名前をプッシュ通知の送信とします。 3. アクションとしてサーバー側のコードを実行を選択します。 4.
PL/SQLコードに前出のコードを記述します。 5. 送信するアイテムにP1_ACTION_IDを指定します。以上でプッシュ通知の実装は完了です。 6. 保存と実行をクリックします。 194 Copyright © 2023, Oracle and/or its affiliates [Date] 1 2 3 4 5 6

アプリケーションのインストールを行いますアプリケーション作成時にプログレッシブWebアプリケーションの機能を組み込んでいるため、インストールができます。 1. アプリケーションのインストールをクリックします。 196 Copyright ©
2023, Oracle and/or its affiliates [Date] 1 2 2 Chrome (macOS) Edge (macOS)

iOSでのアプリケーションのインストール 1. iOSへのインストールには特別な手順が必要です。プログレッシブWebアプリケーションのデバイス、ブラウザごとの制限は、リファレンス・アプリケーションで説明されています。 https://apex.oracle.com/pwa 197 Copyright

レンダリング・ツリーの内容を確認しますレンダリング・ツリーのコンポーネントに、それぞれのコンポーネントが階層構造で配置されています。 After LogoにボタンADD_POSTが配置されています。 Bodyにリージョンタイムライン、投稿といいねの地点、投稿が配置されています。リージョン投稿に多数のページ・アイテムとボタ
ンSAVEが配置されています。 1. 共有コンポーネント・ビューを開きます。 202 Copyright © 2023, Oracle and/or its affiliates [Date] 1

テンプレート・オプションは事前定義されたCSSクラスですテンプレート・オプションは事前に定義されているCSSクラスで、チェックを入れると生成される HTMLのclass=に追記されます。 Oracle APEXでは、大抵のコンポーネントでユーザーが定義したCSSクラスをHTML出力時に追記する手段を提供しています。 206 Copyright
© 2023, Oracle and/or its affiliates [Date]

ページ・テンプレートとして定義されているHTMLを確認しますページ・テンプレートにはヘッダー、本体、フッターの定義があり、それぞれにHTMLが記述されています。 #...#は置換文字列で、ページに配置されているリージョン、アイテム、ボタンなどから生成されるHTMLに置き換えられます。ヘッダーには以下の記述が含まれます。 <div class="t-Header-logo">
<a href="#HOME_LINK#" class="t-Header-logo-link">#LOGO#</a> #AFTER_LOGO# </div> #AFTER_LOGO#の部分にレンダリング・ツリー上のAfter Logoに配置したボタンADD_POSTが生成するHTMLが挿入されます。 207 Copyright © 2023, Oracle and/or its affiliates [Date]

Our mission is to help people see data in new
ways, discover insights, unlock endless possibilities.

Oracle APEXでソーシャル・メディア・アプリケーションを作成しよう！

Oracle APEXでソーシャル・メディア・アプリケーションを作成しよう！

More Decks by oracle4engineer

Featured

Transcript