Oracle APEX 22.1の新機能の中で、フロントエンドの開発を行う方々に人気の高い機能として、セッション・オーバーライドがあります。
セッション・オーバーライドについては、この機能を開発したVincent Morneauさんが解説されています。
How to use Session Overrides in Oracle APEX 22.1https://youtu.be/tQSBKFUzIGs?t=35
New in APEX 22.1 (Part 5): UI, PWA and Mobile
https://youtu.be/ZU2i9lSgOyk?t=2539
こちらの記事で作り直した複数言語に翻訳したアプリケーションを使って、セッション・オーバーライドの機能を試してみます。アプリケーションのエクスポートは以下にあります。アプリケーションをインポートしたのち、翻訳済みアプリケーションをパブリッシュする必要があります。
https://github.com/ujnak/apexapps/blob/master/exports/world-diners.zip
https://github.com/ujnak/apexapps/blob/master/exports/world-diners.zip
言語を切り替える
アプリケーションを実行します。４つの言語（プライマリ言語は日本語、その他のEnglish、中国語（簡体）、韓国語は翻訳されたアプリケーションです）から、日本語を選んでサインインします。
特別な実装を加えない限り、アプリケーションの言語はサインイン時に選択します。つまり、言語を切り替えるためには、サインインをし直す必要があります。
サインインすると、アプリケーションは日本語で表示されます。
セッション・オーバーライドを設定する画面が開きます。
セッション・オーバーライドの有効化をONにし、グローバリゼーションのアプリケーション言語をONにします。アプリケーション言語は英語(en)に設定します。
以上で、保存をクリックします。
画面の表示が英語に切り替わります。セッション・オーバーライドの有効化がONのときは、開発者ツール・バーのセッションのスイッチの表示がONになります。
アプリケーションが翻訳されていれば、他の言語にも表示を切り替えることができます。今回のサンプルでは、中国語（簡体）と韓国語を選択することができます。
中国語（簡体）の表示は以下になります。
韓国語の表示は以下になります。
セッション・オーバーライドによって上書きされるアプリケーション言語の設定は、アプリケーション定義のアプリケーション言語の導出元の設定に関わらず有効です。
例えば、アプリケーション言語の導出先としてアプリケーションのプライマリ言語が選択されている場合、APEXアプリケーションはつねにアプリケーションのプライマリ言語で動作し、翻訳された他の言語を選択することはできません。しかし、セッション・オーバーライドでは、アプリケーションがそのような設定になっていても、アプリケーション言語を変更することができます。
タイムゾーンを切り替える
グローリゼーション関連ではアプリケーション言語の他に、タイムゾーンもオーバーライドできます。
Autonomous Databaseの場合、デフォルトのタイムゾーンはUTCです。
セッション・オーバーライドを使い、タイムゾーンを+9:00に設定します。
セッション・オーバーライドによるタイムゾーンの設定はアプリケーション言語と同様に、アプリケーション定義のグローバリゼーションの自動タイムゾーンの設定に関わらず、優先されます。
自動タイムゾーンをONにしている場合、異なるタイムゾーンでの動作確認やデバッグを行うためには、OSのタイムゾーンを切り替える必要がありました。
それと比べると、非常に簡単にタイムゾーンの切り替えができるようになっています。
フォントを切り替える
以前にGoogle Fontsを使用する方法について記事を書いています。この手順では、アプリケーションのフォントを切り替えた表示を確認するだけでも、アプリケーション利用者の全員に影響します（利用者全員の表示フォントが変わる）。
セッション・オーバーライドを使うことにより、他の利用者に影響を与えることなくアプリケーションを変更できます。今回はフォントの切り替えを行いますが、フロントエンドのJavaScriptやCSSであれば、同様の手法により他に影響を与えることなく開発を進めることができます。
JavaScriptおよびCSSの編集にVS Codeを使用することを前提とします。他のエディタの場合は、ローカルホストで別途Webサーバーを実行する必要が出てくるかもしれません。
VS Codeに拡張機能のLive Serverを追加します。
VS Codeのワークスペースにfonts.cssというファイルを作成します。内容として、以下を記述します。
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@400;700&display=swap');
:root {
--a-base-font-family: 'Noto Sans JP';
}
APEXアプリケーションに登録済みの静的アプリケーション・ファイルを、VS Codeのワークスペースからアクセスできるようにします。
静的アプリケーション・ファイルをすべてダウンロードします。
今回の例では、静的アプリケーション・ファイルはアプリケーション・アイコンのファイルで、名前および参照よりディレクトリiconsの下に置かれていることがわかります。
ワークスペースにフォルダiconsを作成し、ダウンロードした静的アプリケーション・ファイルを移動します。
HTMLファイルを作成し、Open with Live Serverを実行しHTTPサーバーよりアクセスできるようにします。今回の例では、index.htmlというファイルを作成しています。
ブラウザが開き、HTMLの内容が表示されます。（Live Serverのデフォルトでは）URLは以下のような形式になります。
http://127.0.0.1:5500/index.html
以上でVS Code側の設定は完了です。
これからセッション・オーバーライドを使って、これまでの設定をAPEXアプリケーションに適用します。
セッション・オーバーライドの設定画面を開きます。
ファイル・パスのアプリケーション・ファイル#APP_FILES#をONに変更し、http://127.0.0.1:5500/を指定します。APEXアプリケーションの静的アプリケーション・ファイルではなく、VS CodeのLive Serverからファイルを参照します。
追加ファイルのCSS URLをONに変更し、#APP_FILES#fonts.cssを指定します。
以上で、保存をクリックします。
使用フォントがGoogle FontsのNoto Sans JPに置き換わります。
わかりにくいので、Noto Serif JPに変更します。VS Codeでfonts.cssを変更し、保存します。
APEXアプリケーションの画面をリフレッシュすると、フォントがNoto Serif JPに変更されていることを確認できます。
セッション・オーバーライドの有効化をOFFにすると、セッション・オーバーライドでの設定は無効になり、元々のアプリケーションの動作に戻ります。
セッション・オーバーライドの追加ファイルのJavaScript URLとCSS URLは、
それぞれページ・プロパティのJavaScriptのファイルURL、CSSのファイルURLに対応します。
変更を全体に適用するために、fonts.cssを静的アプリケーション・ファイルとして作成し、それをCSSのファイルURLとして登録します。
共有コンポーネントの静的アプリケーション・ファイルを開き、ファイルの作成を実行します。
fonts.cssを選択し、作成をクリックします。
fonts.cssを保存すると、ミニファイルされたfonts.min.cssも同時に作成されます。
ページ・プロパティのCSSのファイルURLとして、静的アプリケーション・ファイルの参照を記述します。
Oracle APEX 22.1での小さな更新として、ページ・プロパティのJavaScriptやCSSのファイルURLの記述で、コメントアウトができるようになりました。
// #APP_FILES#fonts#MIN#.css
または
/*
#APP_FILES#fonts#MIN#.css
*/
セッション・オーバーライドの使用方法の紹介は以上になります。
VS Codeで記述しているJavaScriptやCSSは、通常のファイルとしてバージョン管理もできます。最終的にアプリケーションをデプロイする際には、静的アプリケーション・ファイルにすることになると思いますが、セッション・オーバーライドの機能は、フロントエンドの開発効率、特に共同作業での開発効率の向上に大きく貢献するでしょう。
完
