4D Qodly Proを使って、Webウィジェットでデスクトップインターフェースを強化しよう

1月 7, 2026 1 読了時間

ナビゲーション・マップなど、Webサイトから知られるウィジェットでユーザー・インターフェースを豊かにしたいと思ったことはありませんか？JavaScriptを学んだり、CSSやHTMLを扱ったり、この2つの世界の間でデータの受け渡しをしたりする必要はありません。

Web エリアと4D Qodly Proの新しい統合により、すべてのビジネスロジックを4D Server内に保持したまま、豊かでダイナミックなインターフェイスを4Dフォーム内に提供することができます。

セッション共有

実際の例：統合されたインターフェイスで倉庫の詳細を表示

ユーザーは、ネイティブ感がありながら、Webのように素早く進化するデスクトップアプリを求めています。4D 21 では、これはもはやトレードオフではありません。Web エリアと4D Qodly Proの新しい統合により、全てのビジネスロジックを4D Server内に保持したまま、リッチでダイナミックなインターフェイスを4Dフォーム内に提供することができます。

その結果、データが即座に渡され、UIの更新が自然に感じられ、開発ワークフローがシンプルに保たれる、統一されたハイブリッドエクスペリエンスが実現します。これこそ、正しいハイブリッドです。

接続されたエクスペリエンスのためのWebエリアセットアップ

画面の左側に4Dのリストボックスがあり、右側には選択された項目の詳細(マップの位置やレーティングコントロールを含む)がWeb エリアに表示されていると想像してください。

別の倉庫を選択すると、ページの再読み込みなしで瞬時に詳細が更新されます。ユーザーは、Web ビューではなく、ネイティブパネルをナビゲートしているように感じます。これが4D Qodly Proの柔軟性と4Dの信頼性の組み合わせです。

簡単な設定

このシームレスなインタラクションを可能にするために、Web エリアは2つのシンプルなプロパティで設定されます：埋め込みウェブレンダリングエンジンを使用する “と “4Dメソッドへのアクセスを許可する”です。これらの設定により、埋め込みQodlyページはあなたのデータとサーバーロジックにフルアクセスできるようになります。

そこから、Web エリアの “On Load”イベントがページを初期化し、正しいセッションをアタッチし、データクラスのメソッドを公開するコンテキストを渡します。

セッション？コンテキスト？なぜそれらが必要なのか？

この場合、4D Qodly ページは4DアプリケーションのWeb エリア内でロードされますが、ブラウザから直接実行することもできます。そのため、セキュリティを優先する必要があります。また、4D Serverと直接会話するため、サーバーはどのクライアントセッションに属するかを知る必要があります。最後に、4DデスクトップとQodly ページの間でコンテキストを共有し、データを共有することができます。これは、4Dと4D Write Proの間でコンテキストを使ってデータを共有する方法と似ています。

アプリがローカルで実行されようが、クライアントサーバーモードで実行されようが、Qodlyページは正しい4Dセッション内で動作しなければなりません。これにより、安全なメソッド呼び出しが可能になり、データの一貫性が保たれます。

以下はデモで使用したセットアップです：

var $otp : Text
var $url : Text
var $context : Variant

Case of 
	: (Form event code=On Load)	
                authentify("viewDetails")
		$otp := getOtp
		$url := "http://localhost/$lib/renderer/?w=warehouses&$4DSID="+ $otp
		WA OPEN URL(warehouseDetails; $url)
		$context:=ds.WareHouse
		WA SET CONTEXT(warehouseDetails; $context)
End case

authentify はプロジェクトメソッドで、セッションオブジェクトにアクセスするために “サーバー上で実行”プロパティをチェックする必要があります。

#DECLARE($privilege : Text)
Session.clearPrivileges()
Session.setPrivileges($privilege)

getOTP も同様です。

#DECLARE() : Text
return Session.createOTP(60)

viewDetails は Qodly Studio で設定されたパーミッションです：

ここで、Warehouse エンティティを読み込んで、Warehouse.getWarehouseById を実行し、ID が変更されたときに対応するエンティティを取得します。Session.setPrivilegesは、ユーザが必要な権限を持っていることを確認します。
getOTP()は、Web エリアを現在の 4D セッションにバインドする 1 回限りのトークンを発行します。
URLは4DSIDトークンを含むので、Qodlyページはそのセッション内で実行されます。
最後に、WA SET CONTEXT は、ページにGetWarehouseById やRate などのメソッドを含むWarehouse データクラスへのアクセスを与えます。

これにより、Qodly とデータレイヤー間のクリーンでセキュアな接続が作成されます。

4Dリストボックスからの即座のUIアップデート

リストボックスのオブジェクトメソッドで、UIを瞬時に更新します：

var $result : Variant
Case of 
	: (Form event code=On Load)
		LISTBOX SELECT ROW(*; "warehouseList"; 1)	
	: (Form event code=On Clicked)
	: (Form event code=On Selection Change)
		WA EXECUTE JAVASCRIPT FUNCTION(*; "warehouseDetails"; "Qodly.setSource"; $result; "warehouseId"; Form.WareHouse.ID)	
End case

リストボックスはワークフローを完成させます。ユーザーが倉庫を選択すると、4DはWA EXECUTE JAVASCRIPT FUNCTIONを呼び出し、Webエリア内のQodly.setSourceをトリガーします。新しい倉庫IDが渡され、Qodlyページは即座に更新されます。

ユーザーはWeb のリロードをする必要はありません。ユーザーが見るのは、詳細パネルに表示される新しいデータだけです。

データに命を吹き込むモダンなQodlyページ

Qodly Studioでは、詳細ページに2つのカスタムコンポーネントを使用しています。倉庫の正確な位置を表示するMap コンポーネントと、ユーザーが評価を更新できるRating コンポーネントです。どちらのコンポーネントも倉庫のエンティティソースにバインドされています。

ページはwarehouseId ソースの変更をリッスンします。そのソースが変更されると、getWarehouseById を呼び出して正しいエンティティをロードし、すぐに表示します。

ユーザーがレーティングを変更すると、Rating コンポーネントが4D コンテキストのRate メソッドをトリガーします。更新は即座に保存されます。

これは、ユーザーが最新のツールに期待する応答性です。

チームがこのハイブリッドアプローチを好む理由

バックエンドで4D のパワー、セキュリティ、構造を維持できます。フロントエンドでは、4D Qodly Proのデザインの柔軟性と豊富なコンポーネントを利用できます。そして、ユーザーのアクションに即座に反応する、流動的でモダンなアプリケーションを手に入れることができます。