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

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

View Slide

アジェンダ
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

View Slide

Oracle APEXの始め方

View Slide

無料で始める方法は３通り
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にアクセスし、今日から無料で開始をクリックします。

View Slide

無料のワークスペースの取得
• 以下を入力し、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と
共有するためにも使用できます。
• 利用できる機能の制限はほぼありません。

View Slide

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.

View Slide

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を参照してください。
REST Data Services、APEX、 Databaseが構成済みの
VirtualBox仮想アプライアンスも提供されています。
https://www.oracle.com/database/technologies/databaseappdev-vm.html

View Slide

Oracle APEXとは何か

View Slide

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

View Slide

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

View Slide

ステートレス・アクセス
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はス
テートを保持しません。

View Slide

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

View Slide

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

View Slide

メタデータとは？
Oracle APEXのすべてのデータ（ワークスペース、
アプリケーション、ページ、コンポーネント設
定、etc.）は、APEX_XX0X00（XX0X00はバージョ
ン）スキーマに保存されています。
メタデータを参照するビューが提供されていま
す。
アプリケーションID 140のページ2にある
対話モード・レポートに含まれる列とその型を
一覧します。
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

View Slide

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

View Slide

はじめに
• 本ハンズオンは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]

View Slide

Lab 1:APEXアプリケーションの新規作成
何も機能を実装していない空のAPEXアプリケーションを作成して実行します。

View Slide

ハンズオンを始めましょう
1. https://apex.oracle.com/ja/にアクセスします。
2. サインインをクリックします。
2

View Slide

Oracle APEXの開発環境にサインインします
1. ワークスペース名を入力します。
2. ユーザー名を入力します。
3. パスワードを入力します。
apex.oracle.comのワークスペースはあらかじめ取
得しておきます。
1
2
3
4

View Slide

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

View Slide

アプリケーション・ビルダーの画面です
アプリケーションの作成を開始します。
アプリケーションがひとつも作成されていない
と、はじめにが表示されます。
作成済みのアプリケーションがある場合は、アプ
リケーションが一覧されます。
1. 作成をクリックします。
1
作成済みのアプリケーションが一覧されます

View Slide

新規アプリケーションを作成します
今回は何もないところからアプリケーションを作
り始めます。
1. 新規アプリケーションをクリックします。
1

View Slide

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

View Slide

アイコンを変更します
1. アイコンの図柄を選択します。
2. アイコンの色を選択します。
3. アイコンの保存をクリックします。
後続の作業には影響しません。好みのアイコンを
選択してください。
1
2
3

View Slide

ページの名前を変更します
1. ページ名をタイムラインに変更します。
2. 変更の保存をクリックします。
1
2

View Slide

初期のアプリケーションが作成されました
初期のアプリケーションが作成されました。この
状態でアプリケーションを実行してみます。
1. アプリケーションの実行をクリックします。
1

View Slide

サインインのページが開きます
デフォルトで作成されているサインインのページ
が開きます。
Oracle APEXの開発環境にサインインしたアカウン
トでサインインします。
1. ユーザー名を入力します。
2. パスワードを入力します。
1
2
3

View Slide

作成直後のアプリケーションの画面です
デフォルトで作成されている画面とナビゲーショ
ンを確認します。
1. 画面左上のハンバーガー・メニューをクリック
します。
1

View Slide

ナビゲーション・メニューが開きます
今回は１ページにすべての機能を実装します。
ナビゲーション・メニューとブレッドクラムは後
続の作業で削除します。

View Slide

アプリケーション定義を開きます
アプリケーション別名を設定します。
アプリケーション・ビルダーに戻ります。
1. アプリケーション定義の編集をクリックしま
す。
1

View Slide

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

View Slide

Lab 2:データモデルの作成
投稿を保存する表SM_POSTSと投稿へのリアクションを保存する表SM_REACTIONSを作成します。

View Slide

SQLワークショップを開きます
クイックSQLを使って表を作成します。
SQLワークショップを開き、ユーティリティから
クイックSQLを開きます。
今回はナビゲーション・メニューからクイック
SQLを開きます。（手順は後続ページ）

View Slide

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

View Slide

今回のアプリケーションで使用する表です

View Slide

クイックSQLのモデルを記述します
# 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_date
lat num
lon num
親子関係の定義方法が
異なりますが、同じDDLが
生成されます。

View Slide

モデルから表を作成するSQLスクリプト（DDL）を生成します
1. クイックSQLのモデルを入力します。
2. SQLの生成をクリックします。
# 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_date
lat num
lon num
1
2

View Slide

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

View Slide

SQLスクリプトを実行します
1. レビューおよび実行をクリックします。
1

View Slide

SQLスクリプトのスクリプト・エディタから実行します
画面がSQLスクリプトに移り、スクリプト・エ
ディタで生成されたSQLスクリプトが表示されま
す。
スクリプトの編集が可能ですが、今回はスクリプ
トの編集は不要です。
1. 実行をクリックします。
1

View Slide

即時実行します
確認画面が開きます。
1. 即時実行をクリックします。
1

View Slide

表が作成されました
表SM_POSTSとSM_REACTIONSが作成されたことを
確認します。
これから表SM_REACTIONSに一意制約を追加しま
す。
SQLワークショップのオブジェクト・ブラウザを
使用します。

View Slide

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

View Slide

オブジェクト・ブラウザを開きます
1. オブジェクト・ブラウザをクリックします。
1

View Slide

表SM_REACTIONSを選択します
1. 検索フィールドにオブジェクトの接頭辞SM_
を入力し、対象を絞り込みます。
2. 表のノードにあるSM_REACTIONSをクリック
し、選択します。
1
2

View Slide

制約を開きます
今回は表に制約を追加します。
1. 制約タブをクリックします。
1

View Slide

制約の作成を始めます
1

View Slide

制約を作成します
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" );
1
2
3
4

View Slide

制約が作成されました
一意制約SM_REACTIONS_CONが作成されたことを
確認します。
データベース・オブジェクトの準備は以上で完了
です。

View Slide

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

View Slide

Lab 3:APEXの開発ツールになれる
Oracle APEXクイック・ガイドを参照してください。

View Slide

Lab 4:ホーム・ページのカスタマイズ
ホーム・ページからナビゲーション・メニューとブレッドクラムを削除します。

View Slide

APEXソーシャルメディアを開きます
アプリケーション・ビルダーに戻り、作成中のア
プリケーションを開きます。
1. アプリケーション・ビルダーを開きます。
2. APEXソーシャルメディアを開きます。
1
2

View Slide

タイムラインのページを開きます
1. ページ一覧よりタイムラインをクリックして
開きます。
1

View Slide

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

View Slide

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

View Slide

ブレッドクラムが削除されました
ナビゲーション・メニューとブレッドクラムが削
除されました。
アプリケーションを実行し、変更されたページを
確認します。
1. 保存と実行をクリックします。
1

View Slide

変更されたアプリケーションのページです
ナビゲーション・メニューとブレッドクラムが
ページ上から無くなっています。

View Slide

Lab 5:フォーム・リージョンの作成
写真にコメントを付けて投稿するフォームを作成します。

View Slide

リージョンを作成します
1. Body上でコンテキスト・メニューを開きま
す。
2. リージョンの作成を実行します。
2
1

View Slide

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

View Slide

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

View Slide

表がデータ・ソースとして認識されました
Region Bodyに、表に含まれる列に対応したペー
ジ・アイテムが作成されます。
この状態のページを確認します。
1

View Slide

初期状態のページです
このページからカスタマイズを始めます。

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

写真を投稿できるようにします
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
1
2
2
2
2

View Slide

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

View Slide

今までの作業結果の画面です
コメント入力は、写真の下に配置した方が良さそ
うです。

View Slide

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

View Slide

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

View Slide

テンプレート・オプションを調整します
1. Auto Heightにチェックを入れます。
2. SizeはMedium (600x400)を選択します。
3. Heading LevelにH1を選択します。
4. OKをクリックします。
見た目の調整はいつでも可能です。
1
2
3
4

View Slide

今までの作業結果の画面です
フォームが表示されなくなっています。
これからフォームを開くボタンを作成します。

View Slide

フォームを開くボタンを作成します
1. コンポーネント上でコンテキスト・メニュー
を表示させます。
2. ボタンの作成を実行します。
1
2

View Slide

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

View Slide

投稿フォームを開く動的アクションを作成します
1. ボタンADD_POST上でコンテキスト・メニュー
を表示します。
2. 動的アクションの作成を実行します。
1
2

View Slide

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

View Slide

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

View Slide

投稿フォームを開きます
1. 画面左上の投稿しますをクリックします。投
稿フォームが開きます。
2. 投稿フォームの右上のバッテンをクリックし
て、投稿フォームを閉じます。
1
2

View Slide

投稿を保存するボタンを作成します
1. リージョン投稿上でコンテキスト・メニュー
を開きます。
2. ボタンの作成を実行します。
1
2

View Slide

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

View Slide

ボタンの大きさを調整します
1. SizeとしてLargeを選択します。
2. WidthにStretchを選択します。
3. OKをクリックして、変更を保存します。
1
2
3

View Slide

投稿を保存する動的アクションを作成します
1. ボタンSAVE上でコンテキスト・メニューを表
示します。
2
1

View Slide

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

View Slide

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

View Slide

投稿をデータベースに保存するプロセスを作成します
1. 左ペインでプロセス・ビューを開きます。
2. プロセスのノード上でコンテキスト・メ
ニューを開きます。
3. プロセスの作成を実行します。
1
2
3

View Slide

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

View Slide

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

View Slide

写真にコメントをつけて投稿します
1. 画面左上の投稿しますをクリックし、投稿
フォームを開きます。
2. ファイルの選択をクリックし、投稿する写真
を選びます。
3. コメントを入力します。
4. 投稿ボタンをクリックします。
1
2
3
4

View Slide

投稿しました！と表示されます
投稿に成功している（データベースに写真とコメ
ントが保存されている）と、投稿しました！と
メッセージが表示されます。

View Slide

データベースに保存された投稿を確認します
投稿を保存している表SM_POSTSの内容を、オブ
ジェクト・ブラウザを使って確認します。
1. SQLワークショップを開きます。
2. オブジェクト・ブラウザを開きます。
2
1

View Slide

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

View Slide

Lab 6:カード・リージョンの作成
投稿された写真とコメントをカードとして一覧します。

View Slide

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

View Slide

カード・リージョンのプロパティを設定します
1. 新規に作成されたリージョンを選択します。
2. 識別の名前はタイムラインとします。
3. タイプとしてカードを選択します。
4. ソースのタイプをSQL問合せに変更します。
5. SQL問合せとして以下を記述します。
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

View Slide

カード・リージョンのプロパティを設定をします（続き）
1. 外観のCSSクラスとしてt-Chatを設定します。
2. 詳細の静的IDにtimelineを設定します。
1
2

View Slide

カード・リージョンの属性を設定します
1. プロパティ・エディタの属性タブを開きま
す。
2. カードの主キー列1としてIDを選択します。
3. タイトルの列としてUSER_NAMEを選択しま
す。
4. サブタイトルの列としてPOST_DATEを選択しま
す。
2
3
4
1

View Slide

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

View Slide

カード・リージョンの属性を設定します（写真）
1. メディアの属性を以下のように設定します。
ソース：BLOB列
BLOB列：PHOTO
位置：最初
外観：ワイドスクリーン
サイズ指定：カバー
CSSクラス：selectDisable
イメージの説明：&COMMENT_TEXT.
2. BLOB属性を以下のように設定します。
MIMEタイプ列：PHOTO_MIMETYPE
最終更新列：PHOTO_LASTUPD
1
2
3

View Slide

カードの主キー列1を再設定します
メディアのソースを設定したときに、カードの主
キー列1がリセットされることがあります。
1. メッセージの数を確認し、クリックします。
メッセージが確認できます。
2. カードの主キー列1として再度IDを設定しま
す。
1
2
3

View Slide

カードに投稿が表示されました

View Slide

Lab 7:アクションを呼び出すボタンの作成
カード上に投稿にいいねをするボタンと投稿の削除を行なうボタンを作成します。

View Slide

カードにアクションを作成します
1. タイムラインのアクション上でコンテキス
ト・メニューを表示させます。
2. アクションの作成を実行します。
1
2

View Slide

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

View Slide

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

View Slide

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

View Slide

ボタンの見かけをいいねにします
1. 外観の表示タイプをアイコン付きテキストに
変更します。
2. アイコンとしてfa-heart &USER_REACTION_CSS.
を指定します。
3. CSSクラスとしてjs-heart-buttonを指定します。
1
2
3
4

View Slide

作成したいいねボタンを確認します

View Slide

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

View Slide

削除ボタンの表示条件を設定します
1. サーバー側の条件のタイプとして式を選択し
ます。
2. 言語としてPL/SQLを選択します。
3. PL/SQL式として:USER_NAME=:APP_USERを設定
します。
4. 実行条件として各行を選択します。
削除ボタンは、その投稿をした人にだけ表示され
ます。他人の投稿に削除ボタンは表示されませ
ん。
1
2
3
4
5

View Slide

作成した削除ボタンを確認します

View Slide

apex.actionとしてlikeとdeleteを作成します
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",
apex.event.trigger(document, 'action-delete');
}
}
]);

View Slide

ページロード時に実行します
1. ページを選択します。
2. JavaScriptのページ・ロード時に実行のスクリ
プト・エディタを開いて、に、前出のスクリ
プトを記述します。
1
2

View Slide

コード・エディタの警告を確認します
1. P1_ACTION_IDの上にカーソルを移動します。
アイテムP1_ACTION_IDが存在しません、と警告が
表示されます。
1

View Slide

ページ・アイテムP1_ACTION_IDを作成します
1. タイムライン上でコンテキスト・メニューを
開きます。
2. アイテムの作成を実行します。
1
2

View Slide

ページ・アイテムのプロパティを設定します
1. 新規に作成されたページ・アイテム（この時
点ではP1_NEW）を選択します。
2. 識別の名前をP1_ACTION_IDに変更します。
4. 設定の保護された値をオフにします。
5. 保存します。
1
2
3
4
5

View Slide

コード・エディタの警告を再度確認します
再度、コード・エディタを開いてP1_ACTION_IDの
警告が表示されないことを確認します。
続いて、カスタム・イベントから実行される動的
アクションを作成します。
1

View Slide

Lab 8:動的アクションの作成
いいねボタンと削除ボタンをクリックしたときに呼び出される動的アクションを作成します。

View Slide

動的アクション・ビューを開きます
1. 左ペインで動的アクション・ビューを開きま
す。
1

View Slide

動的アクションを作成します
1. イベント上でコンテキスト・メニューを表示
させます。
1 2

View Slide

タイミングにカスタム・イベントを選択します
2. 識別の名前はaction-likeとします。この名前は
任意です。
3. タイミングのイベントとしてカスタムを選択
します。
2
3
1

View Slide

カスタム・イベントを設定します
1. カスタム・イベントとしてaction-likeを設定し
ます。
2. 選択タイプとしてJavaScript式を選びます。
3. JavaScript式にdocumentと記述します。
apex.actionのlikeで発行される以下のイベントが、
この動的アクションで処理されます。
1
2
3

View Slide

カード上のいいねボタンを変更します（jQuery版）
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

View Slide

JavaScript版のコードです
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

View Slide

TRUEアクションを設定します
1. 作成済みのTRUEアクション（この時点では表
2. 識別の名前をいいね – UIの更新(件数 + ハート
の色)とします。
3. アクションとしてJavaScriptコードの実行を選
択します。
4. 設定のコードに前出のコードを記述します。
2
3
4
1

View Slide

データベースに保存されているいいねの数を更新します
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;

View Slide

TRUEアクションを作成します
1. True上でコンテキスト・メニューを表示しま
す。
2. TRUEアクションの作成を実行します。
1
2

View Slide

データベースに保存されているいいねの数を更新します
2. 識別の名前はいいね – DBの処理とします。
3. アクションとしてサーバー側のコードを実行
を選択します。
4. 設定の言語はPL/SQLです。
5. PL/SQLコードに前出のコードを記述します。
6. 送信するアイテムとしてP1_ACTION_ID、
P1_LAT、P1_LONを指定します。
2
1
3
4
5
6
7

View Slide

ボタンをクリックして動作を確認します（いいねする）
1. ハートをクリックします。
0が1に変わります。まだハートの色は変わりませ
ん。
1

View Slide

表SM_REACTIONSの行を確認します
select * from sm_reactions;
対応した行が表SM_REACTIONSに見つかります。
1が0に変わります。
1

View Slide

ボタンをクリックして動作を確認します（いいねの解除）
データが見つかりません。

View Slide

投稿を削除する動的アクションを作成します
1. カスタム上でコンテキスト・メニューを表示
します。
1
2

View Slide

動的アクションのプロパティを設定します
1. 新規に作成された動的アクション（この時点
では新規）を選択します。
2. 識別の名前はaction-deleteとします。
3. タイミングのイベントはカスタムです。
4. カスタム・イベントとしてaction-deleteを指定
します。
5. 選択タイプはJavaScript式です。
6. JavaScript式としてdocumentを記述します。
apex.actionのdeleteで発行される以下のイベント
が、この動的アクションで処理されます。
2
3
4
5
6
1

View Slide

確認ダイアログを開くようにTRUEアクションを設定します
2. 識別の名前は削除 – 確認ダイアログとしま
す。
3. アクションとして確認を選択します。
4. 設定のタイトルは確認とします。
5. メッセージは投稿を削除しようとしていま
す。本当に削除しますか？とします。
確認のダイアログが開き、OKをクリックしたとき
のみ、後続のTRUEアクションが実行されます。
1
2
3
4
5

View Slide

続いて実行されるTRUEアクションを作成します
す。
1 2

View Slide

表SM_POSTSから投稿を削除します
1. 新たに作成されたTRUEアクション（この時点
2. 識別の名前は削除 – DBの処理とします。
4. 設定の言語はPL/SQLとします。
5. PL/SQLコードとして以下を記述します。
6. 送信するアイテムにP1_ACTION_IDを設定しま
す。
1
2
3
4
5
6
delete from SM_POSTS where id=:P1_ACTION_ID and
post_owner=:APP_USER;

View Slide

さらにTRUEアクションを作成します
す。
1
2

View Slide

ページ上のカードを削除します
1. 新たに作成されたTRUEアクション（この時点
2. 識別の名前は削除 – カードの削除とします。
3. アクションとしてJavaScriptコードの実行を選
択します。
4. 設定のコードに以下を記述します。
またはjQueryを使わず
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();

View Slide

削除の動作を確認します
1. ゴミ箱のアイコンをクリックします。
2. 取消をクリックして、削除されないことを確
認します。
1
2

View Slide

削除の動作を確認します
1. ゴミ箱のアイコンをクリックします。
1
2

View Slide

ページからカードが無くなります
1. ページのリロードを行い、データが削除され
ていることを確認します。

View Slide

表SM_POSTSからデータが削除されていることを確認します
SQLコマンドを開いて、以下を実行します。表
SM_POSTSからデータが削除されていることを確
認します。
select * from sm_posts;

View Slide

Lab 9:⾒た⽬の改善
CSSの追加やレイアウトを調整して見た目を改善します。

View Slide

以下のCSSの記述を追加します
.user-has-liked {
color: red;
}
@media (max-width: 640px) {
.new-post-button {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 1000;
}
}

View Slide

ページにCSSを記述します
2. ページ・プロパティのCSSのインラインに前出
のCSSを記述します。
1
2

View Slide

投稿フォームを変更します

View Slide

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

View Slide

テンプレート・オプションを設定します
1. Stretch Form Itemにチェックを入れます。
1
2

View Slide

PCでの表示を確認します
1. ハートをクリックすると赤くなります。
CSSクラスとしてuser-has-likedを定義した効果で
す。
1

View Slide

スマホで表示を確認します
1. 投稿しますボタンが画面右下に表示されま
す。
mediaクエリを使ったnew-post-buttonを定義した
効果です。
1

View Slide

Lab 10:地図の追加
投稿やいいねをした地点を地図上に表示します。

View Slide

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

View Slide

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

View Slide

マップ・リージョンが配置されました

View Slide

マップのソースとなるSQLを設定します
1. 作成されたマップ・リージョン（この時点で
は新規）を選択します。
2. 識別のタイトルは投稿といいねの地点としま
す。
3. ソースの位置としてローカル・データベース
4. タイプにSQL問合せを選択します。
5. SQL問合せに以下を記述します。
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
)

View Slide

マップにテンプレートと静的IDを設定します
1. 外観のテンプレートにInline Dialogを選択しま
す。
2. 詳細の静的IDとしてmapを設定します。
1
2

View Slide

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

View Slide

ツールチップを設定します
1. ツールチップの拡張フォーマットをオンにし
ます。
2. HTML式として以下を記述します。
1
2
&USER_NAME. @ &SINCE.

View Slide

マップの属性を設定します
1. マップ投稿といいねの地点を選択します。
2. プロパティ・エディタで属性を開きます。
3. マップの高さを300ピクセルにします。
4. コントロールのマウス・ホイール・ズームを
チェックします。
4
4
1
2

View Slide

共有コンポーネントを開きます
1. 変更を保存します。
2. 共有コンポーネントを開きます。
1
2

View Slide

ナビゲーション・バー・リストを開きます
1. ナビゲーション・バー・リストを開きます。
1

View Slide

ナビゲーション・バーを開きます
1. ナビゲーション・バーを開きます。
1

View Slide

マップを開くエントリーを追加します
1. エントリの追加をクリックします。
2. 順序に15を入力します。
3. 名前に地図を入力します。
4. ターゲットに#action$open-mapを入力します。
5. アイコンにfa-mapを入力します。
6. 変更の適用をクリックします。
2
1
3 4 5
6

View Slide

ページ・デザイナに戻ります
1. ページの編集１をクリックし、ページ・デザ
イナに戻ります。
1

View Slide

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

View Slide

apex.actionの定義です
1
apex.actions.add([
{
name: "like",
}
},
{
name: "delete",
}
},
{
name: "open-map",
action: () => {
}
}
]);

View Slide

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

View Slide

動的アクションのプロパティを設定します
2. 識別の名前はaction-open-mapとします。
3. タイミングのカスタム・イベントとして
action-open-mapを指定します。
4. 選択タイプとしてJavaScript式を選びます。
5. JavaScript式としてdocumentを指定します。
APEXアクションopen-mapの以下の記述より呼び
出される動的アクションです。
1
2
3
4
5

View Slide

TRUEアクションで地図を開きます
2. 識別の名前は地図を開くとします。
3. アクションとしてリージョンを開くを選択し
ます。
5. リージョンとして投稿といいねの地点を選び
ます。
1
2
3
4
5

View Slide

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

View Slide

2. 識別のアクションとしてリフレッシュを選択
します。
4. リージョンとして投稿といいねの地点を選択
します。
5. 一旦保存をクリックします。
1
2
3
4
5

View Slide

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

View Slide

動的アクションに名前をつけます
2. 識別の名前を現在位置の取得とします。
1 2

View Slide

2. 識別のアクションとして現在の位置の取得を
選択します。
3. 設定の戻り型としてLatitude and Longitudeを選
択します。
4. 緯度アイテムとしてP1_LATを指定します。
5. 経度アイテムとしてP1_LONを指定します。
以上でアプリケーションは完成です。
1 2
3
4
5
6

View Slide

動作を確認します
地図にピンが立っていることを確認します。
2. 地図を開きます。
1
2

View Slide

Lab 11:プッシュ通知の実装
いいねがクリックされると投稿主に通知をします。

View Slide

プッシュ通知の機能を追加します
機能の追加はページ作成ウィザードで行います。
1. ページの追加をクリックします。
1

View Slide

プッシュ通知を選択します
ページ作成ウィザードが開始します。
1. 機能を選択します。
2. プッシュ通知をクリックします。
1
2

View Slide

プッシュ通知の設定ページを作成します
プッシュ通知設定ページのページ番号およびユー
ザー設定ページのページ・ソースやページ番号は
デフォルトのままにします。
1

View Slide

プッシュ通知を設定するページが追加されます
ページ番号20000の設定、ページ番号20010のプッ
シュ通知のページが追加されます。
1. アプリケーション定義の編集をクリックしま
す。
1

View Slide

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

View Slide

資格証明を生成します
1. 資格証明の生成をクリックします。
2. 確認のダイアログが開くので、資格証明の生
成をクリックします。
1
2

View Slide

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

View Slide

アプリケーションを実行しプッシュ通知を設定します
1. 実行ボタンをクリックします。
1

View Slide

設定を開きます
1. ナビゲーション・バーの右端にあるユーザー
名をクリックし、メニューを開きます。
2. 設定を開きます。
1
2

View Slide

プッシュ通知の設定を開きます
プッシュ通知のデフォルトはオフです。
1. プッシュ通知をクリックします。
1

View Slide

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

View Slide

プッシュ通知がオンになりました
プッシュ通知がオンになっていることを確認しま
す。
1. バッテンをクリックしてドロワーを閉じま
す。
1

View Slide

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

View Slide

プッシュ通信を実行します
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;

View Slide

TRUEアクションを定義します
2. 識別の名前をプッシュ通知の送信とします。
4. PL/SQLコードに前出のコードを記述します。
5. 送信するアイテムにP1_ACTION_IDを指定しま
す。
以上でプッシュ通知の実装は完了です。
1
2
3
4
5
6

View Slide

ハートをクリックして通知を受信します
apex.oracle.comでは２分周期でまとめてプッシュ
通知を行なっています。そのため、最大２分プッ
シュ通知の送信の待ちが発生します。
1

View Slide

アプリケーションのインストールを行います
アプリケーション作成時にプログレッシブWebア
プリケーションの機能を組み込んでいるため、イ
ンストールができます。
1. アプリケーションのインストールをクリック
します。
1
2 2
Chrome (macOS) Edge (macOS)

View Slide

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

View Slide

インストールされたアプリケーション
chrome://apps edge://apps/installed

View Slide

インストールされたアプリケーションを実行します
アプリケーションの見かけはアプリケーション定
義のプログレッシブWebアプリケーションのイン
ストール性で調整できます。

View Slide

Lab 12:HTML⽣成の仕組み
Oracle APEXがHTMLを生成する仕組みを見てみます。

View Slide

タイムラインのページを開きます
本ハンズオンで作成したタイムラインがどのよう
にHTMLを生成しているのか見てみます。
1. タイムラインを開きます。
1

View Slide

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

View Slide

テンプレート以下を展開します
共有コンポーネント・ビューには、このページか
ら参照されている共有コンポーネントが一覧され
ます。
ページ、アイテム、ボタン、リージョン、ナビ
ゲーション・メニューを展開します。

View Slide

ページ・テンプレートを参照します
ページタイムラインは、ページ・テンプレートと
してStandardが設定されています。
1. Standardを選択します。
2. コンポーネントの編集をクリックします。
1
2

View Slide

共有コンポーネントのテンプレートが開きます
アプリケーションの共有コンポーネントのテンプ
レートに含まれている、指定したテンプレートの
定義が開きます。
今回の手順ではページ・テンプレートのStandard
が開きます。

View Slide

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

View Slide

ページ・テンプレートとして定義されているHTMLを確認します
ページ・テンプレートにはヘッダー、本体、フッ
ターの定義があり、それぞれにHTMLが記述され
ています。
#...#は置換文字列で、ページに配置されている
リージョン、アイテム、ボタンなどから生成され
るHTMLに置き換えられます。
ヘッダーには以下の記述が含まれます。

#LOGO#
#AFTER_LOGO#

#AFTER_LOGO#の部分にレンダリング・ツリー上
のAfter Logoに配置したボタンADD_POSTが生成す
るHTMLが挿入されます。

View Slide

テンプレートに含まれる置換文字列の説明
置換文字列ではレンダリング・ツリーのノードが
どの置換文字列（ページ・テンプレート内での位
置）に当たるのか、説明されています。

View Slide

お疲れ様でした。

View Slide

View Slide

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

View Slide

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

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

oracle4engineer
PRO

More Decks by oracle4engineer

Featured

Transcript

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

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

oracle4engineer PRO

More Decks by oracle4engineer

Featured

Transcript

oracle4engineer
PRO