日日是Oracle APEX: macOSのpodmanでOpen WebUIのコンテナを実行しAPEXのアプリの非モーダル・ダイアログとして開く

2025年3月7日金曜日

macOSのpodmanでOpen WebUIのコンテナを実行しAPEXのアプリの非モーダル・ダイアログとして開く

手元のMacbook ProでOpen WebUIを実行し、Oracle APEXのアプリケーションの非モーダル・ダイアログにiframeを使って埋め込んでみました。Open WebUIのコンテナはpodmanで実行しています。

ボタンをクリックしてOpen WebUIの画面を開きます。ユーザー認証はAPEXとOpen WebUIは別なので、それぞれ認証が必要です。

Ollamaはインストール済みで、ポート11434でアクセスできることを前提とします。また、podmanもインストール済みとします。

以下より、行った作業を紹介します。

Open WebUIのインストールについては、以下のGitHubのページを参照しています。

https://github.com/open-webui/open-webui

Open WebUIの設定などを保存するボリュームをあらかじめ作成します。

podman volume create open-webui

Open WebUIのインストールには、以下のコマンドを実行します。Open WebUIはコンテナ内ではポート8080で接続を待ち受けていますが、ホストの3000にマップしています。ホスト側で空いているポート番号を選びます。-vオプションでボリュームopen-webuiをマウントしているため、コンテナを再作成してもそれまでの設定は維持されます。

podman run -d -p 3000:8080 -v open-webui:/app/backend/data -e OLLAMA_BASE_URL=http://host.containers.internal:11434 --name open-webui --restart always ghcr.io/open-webui/open-webui:main

% podman volume create open-webui

open-webui

% podman run -d -p 3000:8080 -v open-webui:/app/backend/data -e OLLAMA_BASE_URL=http://host.containers.internal:11434 --name open-webui --restart always ghcr.io/open-webui/open-webui:main

Trying to pull ghcr.io/open-webui/open-webui:main...

Getting image source signatures

Copying blob sha256:4f4fb700ef54461cfa02571ae0db9a0dc1e0cdb5577484a6d75e68dc38e8acc1

Copying blob sha256:157e623d29844846bf1486ce1dc24b08b60c3c63a22c471a6ee19a86a7a5cbd5

Copying blob sha256:d51c377d94dadb60d549c51ba66d3c4eeaa8bace4935d570ee65d8d1141d38fc

Copying blob sha256:076b75118273dbd55842b522fbb55dc6d875eead95ef440121cde3d50cdd1ff2

Copying blob sha256:40d5353a5918e3b19dc38afc63437b08abe0d9f4ce2b36fbdd3cc53e9213b5f4

Copying blob sha256:987cac002684c8b2119edb1ec5fe98f5448ad8d2a2c6562214ec315072fe6657

Copying blob sha256:aebeb0b4e5d065f21d330eef147cd2ef7436852afebc7cf9dfcb96840a5fafc7

Copying blob sha256:03f562834d64768bdacbebf494f199f9034b63185d90330352efddee466a89c6

Copying blob sha256:4f4fb700ef54461cfa02571ae0db9a0dc1e0cdb5577484a6d75e68dc38e8acc1

Copying blob sha256:dc0f62a912f5d72123e4692b9061a84b7a9a760c13d3446e3a24c98e1ff1ace7

Copying blob sha256:93fdf9ebd111ee9c74695c24c27f88550f9b0703b6468c3c457b969e2f2a3ff0

Copying blob sha256:596be9ce6130cfeb35c532972dd08c024074442834fb7ff56810579df977a9cc

Copying blob sha256:07dc67f42781ccc91d3c05a4d19950c92b1bd09895fa433ac18c0601ac658c14

Copying blob sha256:7c2ef53b15e7b7715ffa172a0b8fd725b91ffc7086f4585c714f18aed424b30e

Copying blob sha256:e5511c24fa695881d58f8270fdcb752a72298908c3fc2daf41e4e431ed7ae481

Copying blob sha256:69de4f91fd3852c3e97ca94e14f39fe09a7438517ce13b27fc5dd9f0e010f6c7

Copying config sha256:92fc28ffd2eee83035f08f369fa321dbdcc0b733722bf18fb15248e3c9281397

Writing manifest to image destination

1bd8927fa97a7a2ab92ff36bf55483f10b3eb8aff5f44db7e25b6d25d7edf76b

以上でOpen WebUIが実行されました。Open WebUIにアクセスします。

http://localhost:3000

Get startedをクリックします。

初回接続時は、管理者ユーザーの作成を求められます。

名前、メールアドレス、パスワードを入力し、Create Admin Accountをクリックします。

Open WebUIにサインインします。OK, 始めましょう！をクリックします。

Ollamaとチャットをする画面が開きます。

Open WebUIのインストールはできました。

Oracle APEXのアプリケーションからこの画面を、非モーダル・ダイアログとして開きます。

空のAPEXアプリケーションを作成します。名前はOpen WebUIとします。

アプリケーションが作成されたら、非モーダル・ダイアログとなるページを作成します。

ページの作成をクリックします。

空白ページを選択します。

作成するページの名前はOpen WebUIとします。

ページ作成ウィザードではページ・モードとして非モーダル・ダイアログは選択できないので、モーダル・ダイアログを選択します。モーダル・ダイアログとして作成されたページは、ページの装飾が最低限になります。

ページの作成をクリックします。

ページが作成されます。

外観のページ・モードを非モーダル・ダイアログに変更します。テンプレート・オプションのRemove Body Paddingをチェックし、詳細のContent PaddingにRemove Paddingを選択します。ページの装飾は極力削除します。

テンプレート・オプションの設定です。

Content Bodyに新たにリージョンを作成します。

識別の名前はOpen WebUI、タイプにURLを選択します。外観のテンプレートになしを選択します。

リージョンの属性を開きます。

設定のURLにOpen WebUIのURL、http://localhost:3000を設定します。組入れモードはiFrameです。

ダイアログに組み込まれたiFrameがウィンドウにフィットするように、ページ・プロパティのCSSのインラインに以下を記述します。

iframe {
    width: 100%;
    height: 100vh; /* Full viewport height */
    border: none;  /* Optional: removes the border */
}

以上でOpen WebUIを開くページは完成です。

非モーダル・ダイアログのページを開くボタンを作成します。

動作のアクションにこのアプリケーションのページにリダイレクトを選択し、ターゲットに非モーダル・ダイアログのページを指定します。

以上でアプリケーションは完成です。

アプリケーションを実行すると、APEXアプリケーションへのサインインが求められます。

APEXアプリケーションのアカウントでサインインします。

Open WebUIを開くボタンをクリックします。

Open WebUIの画面が開きます。

Open WebUIへのサインインを求められます。APEXアプリケーションのサインインとは別です。ただし、Open WebUI（http://localhost:3000）にサインイン済みであれば、その認証が引き継がれます。

Ollamaとチャットする画面が開きます。

テーマについてはAPEXの設定を引き継いでいるようです。

テーマ・ローラーを使ってテーマを切り替えると、Open WebUIの画面に反映されます。ただし、APEXアプリケーション全体に影響します。

あとは、普通に生成AIとチャットしてみましょう。

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

完