PayPal決済をアプリに組み込む

 PayPalによる決済をAPEXアプリケーションに組み込んでみます。元ネタはJon Dixonさんのブログ記事Receiving Payments from Oracle APEX with PayPalです。

Jon Dixonさんが記事で作成されているAPEXアプリケーションは、デモとして一通りの機能が実装されています。本記事ではPayPal決済を組み込む実装に絞って解説します。ショッピング・カートの実装は行いません。

作成するアプリケーションは以下のように動作します。

ページ・アイテムAmountに決済金額を入力し、PayPalボタンを押して支払いを行います。支払いの完了メッセージはJSON形式のままページ・アイテムResponseに印刷します。

PayPal側の準備から始めます。PayPal Developerのサイトに接続し、開発者アカウントを作成します。画面右上のLog in to Dashboardをクリックして作業を進めます。

私は一般のPayPalのアカウント（PayPalによる決済ができるアカウント）が作成済みだったため、そのアカウントでPayPal Developerのサイトに接続できるようになりました。こちらを参照するとPayPalビジネスアカウントの作成といった手順が含まれていますが、これから紹介する作業では開発者アカウントに含まれているSandbox test accountsを使用するため、開発者アカウント（それの元となった一般のPayPalアカウント）以外のアカウントは登録しません。

PayPal Developer DashboardからSandbox accountsを開きます。APEXのアプリケーションで使用するClient IDと、支払いのテストで使用するPersonalアカウントとパスワードを確認します。

BusinessとPersonalの２つのタイプのアカウントが作成されています。最初にBusinessのアカウントよりClient IDを確認します。View/Edit accountを実行します。

ダイアログが開きます。

API Credentialsのタブを選択し、REST AppsのDefault Applicationを開きます。

Default Applicationの設定が開きます。SANDBOX API CREDENTIALSのClient IDをコピーしておきます。この値はAPEXアプリケーションに作成する置換文字列G_CLIENT_IDの置換値として設定します。

App feature optionsのAccept paymentsにチェックが入っていることを確認します。

Businessアカウントでの確認は以上です。

続いてPersonalアカウントのパスワードを確認します。View/Edit accountを実行します。

ProfileのタブよりEmail IDとSystem Generated Passwordを確認します。PayPal決済を試す際に、支払いを行うユーザー名とパスワードとして使用します。

Fundingタブを開くと、テストに使用できるBank Account、Credit Card、PayPalのBalanceも確認できます。PayPalのBalanceはテストで支払いを実行すると、支払った分だけ少なくなります。Balanceには最初に5000円が振り込まれています。

PayPal側の準備は以上です。これからOracle APEXのアプリケーションを作成します。

アプリケーション作成ウィザードを起動し、空のアプリケーションを作成します。

名前はPayPal Appとします。PayPal決済はホーム・ページに実装します。

アプリケーションが作成されたらアプリケーション定義を開き、置換文字列を設定します。

置換文字列としてG_CLIENT_ID、置換値としてBusinessアカウントのREST AppのClient IDを設定します。

ページ・デザイナでホーム・ページを開きます。

決済金額を入力するページ・アイテムP1_AMOUNTを作成します。

タイプは数値フィールド、ラベルはAmountとします。必ずしも必要ではありませんが、設定の最小値に100、最大値に1000を指定します。

PayPalの決済ボタンを表示する領域をリージョンとして作成します。

識別のタイトルはPayPal、タイプとして静的コンテンツを選択します。レイアウトの新規行の開始をOFFとして、ページ・アイテムP1_AMOUNTの右隣に配置します。不要な装飾を省くため外観のテンプレートとしてBlank with Attributesを選択します。

詳細の静的IDとしてpaypal-button-containerを設定します。

PayPalの決済完了の応答を印刷するページ・アイテムP1_RESPONSEを作成します。

タイプはテキスト領域、ラベルはResponseとします。外観の高さに30を設定します。

コンポーネントの配置は以上です。

PayPal決済に必要なコーディングを行います。

ページ・プロパティのJavaScriptのファイルURLに、JavaScript SDKを読み込みを指定します。読み込み時にスクリプトの構成オプションを指定します。

構成オプションについては、PayPalのドキュメントのJavaScript SDK script configurationに説明があります。

https://developer.paypal.com/sdk/js/configuration/

今回はclient_id、intentおよびcurrencyを設定します。

https://www.paypal.com/sdk/js?client-id=&G_CLIENT_ID.&intent=capture&currency=JPY

ページ・ロード時に実行するJavaScriptのコードとして以下を記述します。

PayPalのドキュメントの、style、createOrder、onApprove、onErrorを参照して、これらの記述内容をより詳細にできます。

以上でアプリケーションは完成です。アプリケーションを実行すると、記事の先頭のGIF動画のように動作します。支払いにはSandbox accountのPersonalアカウント使用します。

決済の履歴などはPayPal Developerのダッシュボードから確認できます。

今回作成したAPEXアプリケーションのエクスポートを以下に置きました。

https://github.com/ujnak/apexapps/blob/master/exports/paypal-app.zip

Oracle APEXのアプリケーション作成の参考になれば幸いです。

完

PLATEAU-3DTilesをCesium.jsを使って表示する

 PLATEAU-3DTiles配信チュートリアルの3.1. Cesium.jsでの利用方法に記載されている実装をOracle APEXのアプリケーションに組み込み、建物データ(3D Tiles)をCesium.jsで表示してみます。

建物データの表示はチュートリアルをそのまま実装します。Oracle APEXを使って3D Tiles一覧のURLを置き換える機能を追加します。

アプリケーション作成ウィザードを起動し、空のアプリケーションを作成します。名前はPLATEAU 3DTilesとします。Cesium.jsによる建物データの表示は、デフォルトで作成されるホーム・ページに実装します。

アプリケーションの作成をクリックします。

アプリケーションが作成されたら、ページ・デザイナでホーム・ページを開きます。

Cesium.jsでの利用方法に記載されているサンプルコードを、ホーム・ページにそのまま埋め込みます。

ページ・プロパティのJavaScriptのファイルURLに以下を記載します。CesiumJSのバージョンは新しいものを使用します。

https://cesium.com/downloads/cesiumjs/releases/1.103/Build/Cesium/Cesium.js

ページ・ロード時に実行に、<script>...</script>の間に記述されているJavaScriptのコードを転記します。

CSSのファイルURLに以下を記載します。

https://cesium.com/downloads/cesiumjs/releases/1.103/Build/Cesium/Widgets/widgets.css

CSSのインラインに、<style>...</style>の間に記述されている#cesiumContainerのスタイル定義を転記します。

Cesium.jsを組み込むリージョンを作成します。

識別のタイトルは3D Tiles、タイプに静的コンテンツを選択します。ソースのHTMLコードとして以下を記述します。

<div id="cesiumContainer"></div>

外観のテンプレートとしてStandardを選択します。不要な装飾を減らすために、テンプレート・オプションのRemove Body Paddingにチェックを入れ、HeaderはHidden、StyleにRemove UI Decorationを選択します。

Body Heightは、テンプレート・オプションとして選択できる最大の640pxを選択します。

今回の用途ではブレッドクラムは不要なので、削除します。

この時点でアプリケーションを実行すると、以下の画面が表示されます。

サンプルコードでは表示が千代田区に固定されています。

以下より別の地域も表示できるように、アプリケーションに機能を追加します。

3D Tiles一覧のURLを保存する表PLATEAU_3DTILESを作成します。

クイックSQLの以下のモデルを使用します。

# prefix: plateau
3dtiles
    citycode vc6 /nn
    type     vc8 /nn
    url      vc200 /nn
    lat      num
    lon      num
    has_coordinate vc1 /check Y,N

表の作成には、SQLワークショップのユーティリティのクイックSQLを使用します。

3DTiles一覧は、以下のJSONファイルとして提供されています。

https://raw.githubusercontent.com/Project-PLATEAU/plateau-streaming-tutorial/main/3dtiles_url.json

このファイルを読み込んで、表PLATEAU_3DTILESに保存します。

SQLコマンドで以下のコマンドを実行します。

3dtiles_url.jsonは、CITYCODE、TYPE、URLの属性を含むオブジェクトの配列です。それぞれのオブジェクトを表PLATEAU_3DTILESの一行として保存しています。

3DTileのデータに座標値が含まれているか確認し、含まれている場合は中心の座標を列LATとLONに保存します。実際には空間の中心が市街地の中心とは限らないため、3DTilesを選択したときに、市街地の端が中心となって表示される場合はあります。

以下のSQLを実行します。SQLコマンドから大量のデータを一度に処理しようとすると、ブラウザがタイムアウトするため、件数を絞っています。繰り返し実行することで、すべてのデータを処理できます。

未処理件数が０になれば、表示する建物データを切り替えるためのデータの準備は完了です。

表示する建物データの選択に使用するLOVを作成します。

共有コンポーネントのLOVを開きます。

作成済みのLOVの一覧が表示されます。作成をクリックします。

LOVの作成は最初からを選択します。

次へ進みます。

名前はPLATEAU_3DTILESとします。タイプはDynamicです。

次へ進みます。

データ・ソースの表/ビューの名前として、PLATEAU_3DTILES(表)を選択します。

次へ進みます。

列マッピングの戻り列、表示列ともに、URLを選択します。

作成をクリックします。

LOVとしてPLATEAU_3DTILESが作成されます。このLOVに、追加値として列LATおよびLONを指定できるようにします。

PLATEAU_3DTILESをクリックして編集画面を開きます。

最初にソースのWHERE句に以下を記述します。座標値が設定されているURLだけを選択対象にします。

has_coordinate = 'Y'

座標を求めているのはtypeがbldgである建物データに限っています。typeには他にfld、tunami、takashioがあります。これらの座標値を3DTileのデータより求める方法が分からなかったので、座標値は設定されていません。3DTileには地方公共団体コードが含まれているため、そのコードを元に列LATおよびLONに座標値を設定できると思います。

列の選択をクリックし、追加表示列としてURLに加えてLATおよびLONを追加します。列URLは戻り値として設定されているため、デフォルトで非表示、検索対象外になってます。

列名URLのヘッダーにURLを設定し、表示可能、検索可能を共にONに変更します。

以上で変更の適用をクリックします。

ホーム・ページに建物データを選択するページ・アイテムを作成します。

識別の名前はP1_3DTILES、タイプとしてポップアップLOVを選択します。ラベルは3D Tilesとします。

設定の追加出力として以下を設定します。ページ・アイテムP1_LATおよびP1_LONは、この後に作成します。

LAT:P1_LAT,LON:P1_LON

検証の必須の値はON、LOVのタイプとして共有コンポーネントを選択し、LOVに先ほど作成したPLATEAU_3DTILESを指定します。追加値の表示、NULL値の表示ともにOFFとします。

追加値を保持するページ・アイテムP1_LATおよびP1_LONを作成します。

タイプは非表示、設定の保護された値はOFFにします。ポップアップLOVによる追加値の設定は、動的アクションによるページ・アイテムの値の変更と同じ処理であるため、保護を外す必要があります。

建物データを変更したときにページを再描画するため、ページの送信を行います。この処理は動的アクションで実装します。

ページ・アイテムP1_3DTILESに動的アクションを作成します。名前は建物データの変更とします。タイミングはデフォルトでイベントが変更、選択タイプはアイテム、アイテムはP1_3DTILESとなります。

TRUEアクションとしてページの送信を指定します。

作成したページ・アイテムを使って建物データを表示するように、ページ・ロード時に実行するJavaScriptを変更します。

サンプルコードにはPLATEAUオルソを読み込む処理が含まれていますが、現在はこのURLからの提供は止まっている、または、認証が必要になっているようなのでコードからは削除しています。また、Cesium Ionのデフォルト・アクセス・トークンとアセットIDはコードに含めず、置換文字列G_TOKENおよびG_ASSET_IDによる指定に変更しています。

アプリケーション定義に置換文字列としてG_TOKENおよびG_ASSET_IDを設定します。

サンプルコードに記載されているデフォルト・アクセス・トークンの値およびアセットIDは、今のところ有効ですが、サンプルの確認以上の作業を行う場合は、Cesium ionにアカウントを登録し取得したアクセス・トークンとアセットIDに置き換えるべきだと思います。

登録するアセットが5GB未満までは無料で利用できるようです。詳細はCesium Ionのページを参照してください。フリー・トライアルについても紹介されています。

以上でアプリケーションは完成です。実行すると記事の先頭のGIF動画のように動作します。

Cesium.jsをAPEXアプリケーションに組み込むことはできましたが、何か実用的なアプリにするにはCesium.js自体についてよく調べて必要がありそうです。

今回作成したアプリケーションのエクスポートを以下に置きました。アクセス・トークンおよびアセットIDの設定は含んでいません。

https://github.com/ujnak/apexapps/blob/master/exports/plateau-3dtiles.zip

Oracle APEXのアプリケーション作成の参考になれば幸いです。

完

NTTコミュニケーションズのCOTOHA APIを呼び出してみる

 NTTコミュニケーションズのCOTOHA API for Developersで使用できるAPIを、Oracle APEXのアプリケーションより呼び出してみます。

COTOHA API for Developers（無料）の範囲で使用できるAPIは、構文解析、固有表現抽出、照応解析、キーワード抽出、類似度算出、文タイプ判定、ユーザー属性推定(β)、言い淀み除去(β)、音声認識誤り検知(β)、感情分析です。

以下のようなアプリケーションを作成します。

APIの入力については、入力項目に対応するページ・アイテムを作成します。APIの応答はJSONを整形して表示します。それぞれのAPIの入力項目は似ているため、サービスごとのページの実装にそれほど違いはありません。

COTOHA API for Developersにアカウントを登録すると、for Developersアカウント情報として、Developer Client idとDeveloper Client secretが割り当てられます。APIの認証にこれらの値を使用します。

最初にWeb資格証明を作成します。

ワークスペース・ユーティリティよりWeb資格証明を開きます。

作成するWeb資格証明の名前はCOTOHA API Keyとします。静的識別子としてCOTOHA_API_KEYを指定します。

COTOHA APIのリファレンスのアクセストークン取得のページには、認証方式(grantType)としてclient_credentialsを指定すると記載されているため、本来であればWeb資格証明の認証タイプとしてOAuth2クライアント資格証明フローが指定できるはずです。しかし、apex_web_service.make_rest_requestの引数p_credential_static_idにこのタイプの資格証明、引数p_token_urlにAccess Token Publish URLとして与えられている以下のURLを指定しても、APIの認証に失敗します。

https://api.ce-cotoha.com/v1/oauth/accesstokens

APEXはclientIdとclientSecretはAuthorizationヘッダーのBasic認証の値として送信しますが、COTOHA APIはJSONドキュメントとして送信されることを要求しています。その違いが認証に失敗する原因と想定されます。

そのため、認証タイプとしてHTTPヘッダーを選択し、資格証明名はHTTPヘッダー名であるAuthorizationを指定します。資格証明シークレットは、PL/SQLコード中でAccess Token Publish URLを呼び出して取得したアクセス・トークンを設定します。作成画面では、資格証明シークレットの設定は不要です。

URLに対して有効は、https://api.ce-cotoha.comを指定します。

アプリケーション作成ウィザードを起動し、空のアプリケーションを作成します。作成したアプリケーションの名前はCOTOHAとしています。

アプリケーション定義の置換に、いくつか置換文字列を定義します。

置換文字列G_CLIENT_IDの置換値としてDeveloper Client idの値、G_CLIENT_SECRETとしてDeveloper Client secretの値を設定します。今回はAPIの検証が目的であり、API自体も無料で利用できる範囲であるため、これらの値を置換文字列として設定しています。一般の開発者は、これらの値を参照できない形で保存することが推奨です。

置換文字列G_CREDENTIAL_STATIC_IDの置換値として、COTOHA_API_KEYを設定します。

ホーム・ページにアクセス・トークンを取得するボタンを作成します。

識別のボタン名はGET_ACCESS_TOKEN、ラベルはGet Access Tokenとします。動作のアクションはデフォルトのページの送信です。

アクセス・トークンを取得するプロセスを作成します。アクセス・トークンの取得は、以下のPL/SQLコードで実施します。

expires_inで指定されている秒数が経過すると取得したアクセス・トークンは無効になるため、更新する必要があります。今回のアプリケーションは、アクセス・トークンの更新までは実装していません。

COTOHA APIを呼び出すラッパーとなるファンクションを作成します。以下のコードをSQLコマンドより実行すると、ファンクションCALL_COTOHA_APIが作成されます。

それぞれのAPIを呼び出す画面を作成します。

構文解析の画面は以下のような実装になります。

APIの入力となるページ・アイテムを作成します。構文解析では、P1_SENTENCEとP1_TYPEを作成しています。APIを呼び出すボタンSUBMIT、APIの出力を表示するページ・アイテムPx_RESULTは、すべてのページにあります。

APIを呼び出すプロセスのタイプとしてAPIの呼び出しを選択します。設定のタイプにPL/SQL Procedure or Functionを選択し、プロシージャまたはファンクションとして先ほど作成したCALL_COTOHA_APIを選びます。

パラメータのファンクションの結果の値として、P2_RESULTを選択します。ページ番号は変わりますが、どのCOTOHA APIでもページ・アイテムPx_RESULTがファンクションの結果を保持します。

引数p_apiの値のタイプとして静的値を選択し、静的値として、ベースURLの部分を除いたAPIのURLを指定します。

引数p_requestの値のタイプとしてPL/SQLファンクション本体を選択し、PL/SQLファンクション本体として以下のコードを記述します。ページ・アイテムの値を属性として含んだJSON文書を作成します。

引数p_credential_static_idとして、置換文字列のG_CREDENTIAL_STATIC_IDを指定します。

引数p_requestを作成するコードやp_apiのURLは、呼び出すCOTOHA APIのサービスごとに変更して、構文解析以外のサービスを呼び出すページを作成しています。

COTOHA APIを呼び出すOracle APEXのアプリケーションは以上で完成です。

今回作成したAPEXアプリケーションのエクスポートを以下に置きました。

https://github.com/ujnak/apexapps/blob/master/exports/cotoha-api.zip

Oracle APEXのアプリケーション作成の参考になれば幸いです。

完