日日是Oracle APEX: 2025

2025年5月9日金曜日

ピラミッド・チャートのラベルをカスタマイズする

Orale APEXのチャートのタイプにピラミッドがあります。ピラミッド・チャートではラベルは列のマッピングの値に指定した数値が表示され、列のマッピングのラベルに指定した文字列は表示されません。

初期化JavaScriptファンクションを記述することにより、ピラミッド・チャートに以下のようにラベルを表示させてみます。

何もカスタマイズしていないと、以下のように表示されます。

以下より、実施したカスタマイズについて紹介します。チャートの表示には、サンプル・データセットのEMP/DEPTに含まれる表EMPをデータ・ソースとして使用しています。

識別の名前をPyramid、タイプをチャートとしたリージョンを作成しています。ソースの表名はEMPです。

シリーズの名前はSalary、ソースの位置にリージョン・ソースを選択します。列のマッピングのラベルは列JOB、値集計は合計、値は列SALを指定します。そしてラベルの表示をオンにします。

デフォルトではこの設定で、ラベルに列SALの値が表示されます。

チャート・リージョンの属性を開き、チャートのタイプにピラミッドを選択します。今回の実装には関係しませんが、ツールチップや凡例の表示もオンにしておきます。

そして本記事のテーマであるラベルをカスタマイズするコードを、初期化JavaScriptファンクションに記述します。

	function( options ){
	options.dataFilter = function( data ) {
	data.series.map( (series) => {
	series.items.map( (item) => {
	item.label = `${item.name}:${item.value}`;
	});
	});
	apex.debug.info(data);
	return data;
	};
	return options;
	}

view raw custom-label-for-pyramid.js hosted with ❤ by GitHub

以上でカスタマイズは完了です。

チャートの初期化JavaScriptファンクションで設定しているoptions.dataFilterについては、Plamen Mushkovさんのブログ記事から、その存在を見つけました。

Taking your APEX JET charts style to the next level

https://apexapplab.dev/2021/05/10/taking-your-apex-jet-charts-style-to-the-next-level/

dataFilterに渡されるデータを確認したところ、labelにvalueと同じ数値が割当たっていたので、これを変更しています。

{
  "series": [
    {
      "name": "PRESIDENT",
      "displayInLegend": "on",
      "items": [
        {
          "id": "1",
          "value": 5000,
          "label": 5000,
          "name": "PRESIDENT"
        }
      ]
    },
    {
      "name": "MANAGER",
      "displayInLegend": "on",
      "items": [
        {
          "id": "2",
          "value": 8275,
          "label": 8275,
          "name": "MANAGER"
        }
      ]
    },
    ...
 }

デフォルトでは、ラベルに列SALの値が表示されますが、その際に数値に書式が適用されます。

dataFilterに渡されるvalueはフォーマット後の文字列ではなく数値そのものであるため、書式が適用されません。そのため、例えば単位が必要であれば、その処理も初期化JavaScriptファンクションで行う必要があります。

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

https://github.com/ujnak/apexapps/blob/master/exports/pyramid-chart-label-customization.zip

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

完

2025年5月8日木曜日

Oracle LiveLabsのワークショップをインブラウザ翻訳を使って日本語に翻訳して作業する

少し前（2025年4月2日）になりますが、Oracle LiveLabsのワークショップのインストラクションでインブラウザ翻訳ができるようになりました。

簡単なOracle APEXのワークショップを翻訳した手順に従って実施してみます。Converting your Spreadsheet into a Cloud App using Oracle APEXを取り上げます。

https://apexapps.oracle.com/pls/apex/r/dbpm/livelabs/view-workshop?wid=631

このインストラクションはSandboxで実行できます。せっかくなのでSandboxも取得してみます。

画面右上のStartをクリックし、Run on LiveLabs Sandboxを選択します。Sandboxを作成するにはOracle Accountでサインインする必要があります。

タイムゾーンを設定し、Start Workshop Nowをオンにします。Submit Reservationをクリックし、Sandboxをリクエストします。

作成されたSandboxは左上のアカウント・メニューのMy Reservationsから参照できます。

Launch Workshopをクリックします。

ワークショップの手順のページが開きます。左上にSandboxへのログイン情報を参照するリンクView Login Infoがあります。これをクリックします。

Sandboxへのサインインに使用するUsernameとPasswordを控えておきます。また、ワークショップで使用するAutonomous Databaseは、ここに記載されているCompartmentに作成するため、このCompartmentも控えておきます。ここで表示されているパスワードは初回のサイン・イン後に変更を求められます。

Launch OCIをクリックし、Oracle Cloudのコンソールへサインインします。

Oracle Cloudのコンソールへのサインインの画面が開きます。テナンシなどは変更不要なので、次へ進みます。

Sandbox作成時に与えられたユーザー名、パスワードを入力し、サイン・インをクリックします。

初期パスワードの変更を求められます。新規パスワードを設定し、パスワードのリセットをクリックします。なぜかパスワードのリセットするページが表示されず、真っ白なページのままだったのでブラウザのURLの入力フィールドにカーソルを当て、Enterを入力しました。

以上でSandboxの環境にサインインできます。

APEXのワークショップではOCIのコンソールはほぼ使用しませんが、言語とタイムゾーンだけは日本に合わせます。

左上のユーザーのメニューを開き、Languageの選択を開きます。

Select a languageで日本語を選択し、Saveします。

タイムゾーンを設定するために、プロファイルのユーザー名またはユーザー設定を開きます。

マイ・プロファイルの編集をクリックします。

ユーザー・プリファレンスのタイム・ゾーンを東京を設定し、マイ・プロファイルを更新します。

以上で最低限のプロファイルの設定は完了です。

ワークショップで使用するAutonomous Databaseを作成します。

メニューからAutonomous Databaseを開きます。

Autonomous Databaseの作成をクリックします。

Autonomous Database Serverlessの作成画面が開きます。

表示名やデータベース名の設定は任意です。Sandboxとして与えられたコンパートメントを設定して、ワークロード・タイプにトランザクション処理、データベース・バージョンの選択で23aiを選びます。自動スケーリングの計算のチェックは外します。今回のワークショップであれば、ワークロード・タイプがAPEX、データベースは19cでも作業は同様に実施できるでしょう。

管理者資格証明のパスワードを設定し、作成をクリックします。

以上でAutonomous Databaseのプロビジョニングが開始し、数分待つと利用可能になります。

Autonomous Databaseの作成を確認した後、開発者サービスのAPEXインスタンスを開きます。

作成したAutonomous Databaseの３点メニューを開き、APEXの起動を実行します。

APEXの管理サービスへのサインイン画面が開きます。Autonomous Database作成時に設定した管理者ユーザーADMINのパスワードを入力し、管理にサインインをクリックします。

初回なのでAPEXのワークスペースがまだ作成されていません。ワークスペースの作成をクリックします。

スキーマも作成されていないので、新規のスキーマを選択します。

ワークスペースとワークスペースの管理者ユーザーを作成します。以下ではワークスペース名はWORKSHOP、ワークスペース・ユーザー名もWORKSHOPとしています。ワークスペースに紐づくスキーマとしてWKSP_WORKSHOPがデータベースに作成されます。データベース・ユーザーとしてWORKSHOPも作成されます。こちらはワークスペースの管理者ユーザーになります。

以上でワークスペースの作成をクリックします。

ワークスペースWORKSHOPが作成されます。画面上部に表示されているリンクをクリックして、ワークスペースのサインイン画面を開きます。

ワークスペースWORKSHOPにユーザーWORKSHOPでサインインします。ワークスペース作成時に設定したパスワードを入力します。

サインインをクリックします。

ワークスペースWORKSHOPにサインインできました。これから、APEXを使ったアプリケーション開発作業を始めることができます。

My ReservationsのLaunch Workshopを開くと、インストラクションと共にSandboxを利用できる残り時間が表示されます。

今までの作業はGet Startedに当たります。ワークショップはLab1より始めます。Lab 1のインストラクションを開き、ページ上で右クリックをしコンテキスト・メニューを表示します。

インブラウザ翻訳ができるようになったので、メニューに日本語に翻訳が含まれます。これを実行します。

ページが日本語に翻訳されます。Chrome、Microsoft Edge、Apple Safariで確認しましたが、どのブラウザもインブラウザ翻訳を実行できました。ブラウザ毎に翻訳に使用するエンジンは異なるため（ChromeはGoogle翻訳、EdgeはBing翻訳、AppleはAppleの翻訳）、翻訳の精度も異なります。

後は手順に従ってワークショップを進めます。

作業を進めていく上で気がついたことを列記します。

日本語に翻訳されたボタンすべてのタスクを展開は、展開するためにクリックを２回行う必要があります。

一回目のクリックで表示がExpand All Tasksに代わります。

続くクリックで、タスクが展開されます。

スクリーンショットは英語のままなので、インストラクションの指示、スクリーンショット、実際の作業画面に違いがあります。

例えば以下の画面は翻訳されたインストラクションでは「新しいアプリの作成」となっています。スクリーンショットは「Create a New App」、実際の画面は「新規アプリケーションの作成」です。この違いは翻訳されたインストラクションのすべてで発生しますが、インストラクションでの翻訳された指示と、実際に操作する画面の記述はかなり近く、思ったよりもストレスを感じずに作業を進めることができました。

ページ名などに翻訳された名前を入力すべきかどうかは迷います。例えば翻訳されたインストラクションでは、ページ名に「ニューヨーク市高校検索」および「ニューヨーク市高校レポート」を設定するように指示されています。このページ名は後の作業では「NYC Highschool Search」、「NYC Highschool Report」として、英語のまま参照されています。

ページ・アイテム名のような翻訳されると明らかに問題があるものを除いて、翻訳されたインストラクションに従って日本語で入力する方が作業を進めやすいでしょう。

翻訳されたインストラクションでは、NYC Highschool Searchをクリックするように指示されています。

Google翻訳ではShow Chartが「グラフの表示」と訳されていました。実際の画面ではチャートの表示です。このような軽微な翻訳の違いは多々あります。

「縮小可能」、「最初は縮小」が「折りたたみ可能」、「最初は折りたたみ可能」と翻訳されていました。これも翻訳の違いです。

非表示列の選択では、インストラクションでは列名が翻訳され（ダブン、経度、緯度、などとなっている）ているため、かなり分かりにくいです。しかし、実際のアプリケーションも列名は英語のままなので、スクリーンショットから作業内容を確認できます。

計算（インストラクションでは「コンピューティング」となっていました）の列ラベルに「応募者数と座席数の比率」を設定するよう指示されていますが、インストラクションでは後から「Application to Seat Ratio」が列として追加されたと記述されています。同じ列を指しています。列ラベルに日本語を設定した方が、後の作業は進めやすかったです。

翻訳されたインストラクションでは、Boroughは自治区、値は価値、ファンクションは関数、向きはオリエンテーション、横は水平となっていました。少し翻訳の違いにストレスがあった箇所です。

ソート（インストラクションでは並び替え）も列名が翻訳されていることに気が付く必要がありました。

Lab 3、タスク３の6のインストラクションは以下のように翻訳されていて、ページ・アイテム名を推測するのに時間がかかりました。

ブレッドクラムがインストラクションでは「パンくず」と翻訳されています。翻訳としては正しいのですが、知らないと何のことか分からないかもしれません。

全般にAPEXのリージョンが地域と訳されていることがあります。Lab 4はマップ・リージョンを扱っているため、地域が地図上の地域のことかと勘違いしそうになります。

Lab 4のタスク２の３でも列名が翻訳されています。このような場合はスクリーンショットを参照します。

Lab 4のタスク３の３で、Tooltipがツールチップではなくツールヒントと訳されていました。微妙な翻訳の違いですが、ツールチップと気がつくまで少々時間がかかりました。これもスクリーンショットを確認するとTooltipだと分かります。

他でもそうなのですが、インストラクションに埋め込まれているコードについては翻訳の対象外になっているようです。そのため、変に翻訳されてエラーが発生するといったことは起こりません。

Lab 4のタスク３の８では、インストラクションでは行の割り当ての下（実際は行割当て）のこのレイヤーの値が赤と翻訳されています。SELECT文の列PIN_COLORの返す値なので、ここは翻訳せずにredと入力する必要があります。黄はyellow、緑はgreenです。

インストラクションに埋め込まれたコードは翻訳されませんが、それを参照している設定値が翻訳されていることがあり、注意が必要です。

LiveLabsのワークショップのインストラクションを、インブラウザ翻訳で翻訳した手順に沿って作業を行った際に気がついた点は以上になります。

気を付ける点はありますが、慣れれば英語を読んで作業するより理解が早そうだと感じました。

今回の記事は以上になります。

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

完

登録: 投稿 (Atom)