ガイド開発ガイド

デスクトップ アプリケーションをすばやく開発

fibjs でのデスクトップ アプリケーションの起動は非常に高速です。次のコードを入力するだけで、WebView ウィンドウを開いて実行できます。

1 2 3 4 5
var gui = require("gui"); gui.open("https://fibjs.org", { "type": "native" });

このコードは、オペレーティング システムに組み込まれた WebView ウィンドウを開き、fibjs.org の Web サイトに入ります。

しかし、システムに組み込まれた WebView では、強力なデスクトップ アプリケーション開発には、インターフェイス機能や互換性の点で満足できません。したがって、fibjs は cef ベースのアプリケーション開発もサポートします。

セフの紹介

cef の正式名称は Chromium Embedded Framework であり、Google Chromium に基づくオープン ソース プロジェクトです。Google Chromium プロジェクトは、主に Google Chrome アプリケーション向けに開発されており、cef の目標は、サードパーティ アプリケーションに埋め込み可能なブラウザ サポートを提供することです。cef は、基盤となる Chromium と Blink の複雑なコードを分離し、製品レベルの安定した API のセットを提供し、特定の Chromium バージョンを追跡するブランチとバイナリ パッケージをリリースします。cef のほとんどの機能は豊富なデフォルトの実装を提供するため、ユーザーはニーズに合わせてカスタマイズを最小限に抑えることができます。cef の一般的なアプリケーション シナリオには、次のようなものがあります。

  • HTML5 互換のブラウザ コントロールを既存のローカル アプリケーションに埋め込みます。
  • 主に Web テクノロジで開発されたアプリケーションをホストする軽量のシェル ブラウザを作成します。
  • 一部のアプリケーションには独立した描画フレームワークがあり、cef を使用して Web コンテンツをオフラインでレンダリングします。
  • cef を使用して、自動化された Web テストを実行します。

cef3 は Chomuim Content API マルチプロセス アーキテクチャに基づく次世代の cef であり、次の利点があります。

  • パフォーマンスと安定性の向上 (JavaScript とプラグインは別のプロセスで実行されます)。
  • Retina ディスプレイをサポートします。
  • WebGL および 3D CSS の GPU アクセラレーションをサポートします。
  • WebRTCや音声入力などの前衛的な機能。
  • DevTools リモート デバッグ プロトコルと ChromeDriver2 を介して、より優れた自動化された UI テストを提供します。
  • 現在および将来の Web 機能と標準をより迅速に取得する機能。

動作環境の準備

cef3 のバイナリパッケージは [このページ]からダウンロードできます. fibjs の現在のバージョンは v90 です。これには、特定のプラットフォーム (Windows、Mac OS X、および Linux) で特定のバージョンの cef3 をコンパイルするために必要なすべてのファイルが含まれています。異なるプラットフォームのディレクトリ構造に大きな違いはありません。ダウンロード後にリソース ディレクトリ構造を再編成する必要があります。

Windows オペレーティング システム (Windows)

Windows プラットフォームのフォルダー構造は次のとおりです。通常はバイナリ パッケージ内で、ディレクトリ内のすべてのファイルReleaseResources見つけることができます。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
Application ├── fibjs.exe ├── chrome_100_percent.pak ├── chrome_200_percent.pak ├── chrome_elf.dll ├── d3dcompiler_47.dll ├── icudtl.dat ├── libEGL.dll ├── libGLESv2.dll ├── libcef.dll ├── locales │ ├── am.pak │ ├── ...... │ └── zh-TW.pak ├── resources.pak ├── snapshot_blob.bin ├── swiftshader │ ├── libEGL.dll │ └── libGLESv2.dll └── v8_context_snapshot.bin

Linux オペレーティング システム (Linux)

Linux プラットフォームのフォルダー構造は次のとおりです。通常はバイナリ パッケージ内で、ディレクトリ内のすべてのファイルReleaseResources見つけることができます。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
Application ├── fibjs ├── chrome_100_percent.pak ├── chrome_200_percent.pak ├── icudtl.dat ├── libEGL.so ├── libGLESv2.so ├── libcef.so ├── locales │ ├── am.pak │ ├── ...... │ └── zh-TW.pak ├── resources.pak ├── snapshot_blob.bin ├── swiftshader │ ├── libEGL.so │ └── libGLESv2.so └── v8_context_snapshot.bin

Linux サーバーではデスクトップ環境がサポートされていないため、--headlessxorg をインストールする必要がない場合は、ウィンドウ モードで実行する場合にのみモードを実行できます

1
apt install xorg

一部の GPU サポートでは Linux デスクトップが不良ですが、--disable-gpu起動オプションを増やす必要もあり、GPU レンダリングが無効になっています。

Mac X プラットフォーム (Mac OS X)

Mac X プラットフォームのフォルダー構造は次のとおりです。通常、パッケージ バイナリ内でRelease/Chromium Embedded Framework.frameworkディレクトリ内のすべてのファイルを見つけることができます。cefclient をダウンロードする場合は、コンテンツのアプリを開いて適切なファイルを見つける必要があります。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Application ├── fibjs ├── Chromium Embedded Framework ├── Libraries │ ├── libEGL.dylib │ ├── libGLESv2.dylib │ ├── libswiftshader_libEGL.dylib │ ├── libswiftshader_libGLESv2.dylib │ ├── libvk_swiftshader.dylib │ └── vk_swiftshader_icd.json └── Resources ├── Info.plist ├── ...... └── zh_TW.lproj └── locale.pak

gui.config設定cef_path使用してcef バイナリ パスを指定することもできるため、オペレーティング環境をより柔軟に展開できます。cef_path時間を設定ない場合、cef バイナリは実行可能ファイル fibjs と同じディレクトリにデプロイする必要があります。

1 2 3
gui.config({ "cef_path": cef_path });

動作環境を整えてから以下のコードを実行

1 2 3 4 5
var gui = require("gui"); gui.open("https://fibjs.org", { // "type": "native" });

fibjs の公式 Web サイトが読み込まれたブラウザー ウィンドウも表示されますが、そのエンジンは既に最新の Chrome カーネルです。ここでtypeオプションをキャンセルする必要があることに注意してください。そうしないと、OS で構築された Webview が開きます。

gui の基本的なアプリケーションは非常に簡単で、gui ドキュメントを参照することですぐに実現できるので、繰り返しはしません。次に、主にいくつかの特殊な適用方法を紹介します。

フロントエンドとバックエンドのサービスドッキング

Web ベースのデスクトップ アプリケーションには通常、2 つの拡張方法があります。1 つは WebView 拡張で、もう 1 つはローカルでフロント エンドとバック エンドを分離する方法です。前者の方法では、WebView が侵襲的に拡張され、動作環境が標準ブラウザと互換性がなくなります。後者の方法では、http サーバーをローカルで開く必要があります。これにより、サービス インターフェイスが外部に公開されます。

拡張デスクトップ アプリケーション用の fibjs は、プロトコル スケーラビリティに基づいて、cef は WebView と fibjs をHandler一緒にして、プロセス WebView が対応するHandlerプロセッサに直接接続されるようにします。安全性と携帯性を確保します。同時に、フロントエンドとバックエンドのコードは、標準の B/S フロントエンドとバックエンドの開発と完全に一致しており、ブラウザで開発およびデバッグして、ローカル アプリケーションに直接移植できます。

fibjs バックエンド プロセッサの構成方法は、gui.config完了です。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
gui.config({ "backend": { "cef://test/": cef_files_path, "http://cef_test/": { "/mock/:act": (r, a) => { if (a == 'header') { r.response.write(r.firstHeader('test')); r.response.addHeader("test", "world"); } else if (a == 'post') { r.response.write(`[${r.firstHeader("Content-type")}]`); r.response.write(r.body.readAll()); } }, "/*": cef_files_path } } });

このコードは、2つのバックエンドを規定するcefテストドメインプロトコル、静的ポインティングをディレクトリにcef_files_path、他方はであり、http経路を指し、cef_testドメイン。

cef では、サーバーへのポスト データをサポートしないなど、非標準プロトコルの処理にいくつかの制限があります.したがって、より互換性のあるフロントエンド通信が必要な場合は、http または https バックエンドを定義する必要があります。もちろん、このバックエンドは通過しません ネットワーク プロトコルは通信を完了しますが、プロセス内で直接接続されます。

ハンドラー バックエンドの開発方法については、以下を参照してください。hello, world.

ウィンドウレスモード

自動化されたテストまたはプロセス自動化のシナリオでは、ビジネス オペレーション プロセスはユーザーの操作を必要としないため、サーバー上でウィンドウレス モードで自動的に実行できます。このとき、ヘッドレスモードを実行する必要があります。

fibjs は、グローバル ヘッドレスとインスタンス ヘッドレスの 2 つのヘッドレス方法をサポートしています。

グローバル モードでは、ウィンドウの作成方法に関係なく、すべてのウィンドウがヘッドレス モードで実行されます。グローバル モデルを実行する、指定された--headless起動オプションです。

1
fibjs --headless test.js

プログラムのスタートアップgui.config構成での呼び出しでも、同じ目標を達成できます。

1 2 3
gui.config({ "headless": true });

Linux サーバーでは、ヘッドレス モードはデスクトップ サポートを必要としませんが、cef 基本モジュールは基本的なコンポーネント サポートを必要とするため、xorg をインストールする必要があります。

1
apt install xorg

一部のアプリケーションでは、ユーザーの操作と自動処理が同時に必要となります.このとき、ヘッドレスモードを使用するウィンドウを個別に指定できます。

1 2 3
var win = gui.open("https://fibjs.org", { "headless": true });

ユーザーとの対話がないため、ヘッドレス インスタンスはユーザーがアクティブに閉じることができないため、必要のないときにプログラムを閉じる必要があります。そうしないと、インスタンスが存在するためプロセスが自動的に終了しないことに注意してください。

開発ツールのインターフェース

Chrome DevTools プロトコルを使用すると、ツールで Chromium、Chrome、およびその他の Blink ベースのブラウザーをテスト、検査、デバッグ、および構成できます。Chrome DevTools プロトコルは複数のドメイン (DOM、デバッガー、ネットワークなど) に分割され、各ドメインは対応するサポートされるコマンドと関連イベントを定義します。

fibjs は cdp のアクセス インターフェイスをカプセル化するため、cef の組み込み cdp インターフェイスをフルに活用して、WebView で Web ページを直接デバッグできます。cdp サービスにアクセスするために WebView が使用するインターフェースは WebView.dev です。cdp の詳細なドキュメントについては、https ://chromedevtools.github.io/devtools-protocol/ を参照してください。

以下に、dev を使用してページ要素を操作する方法を示すために、一般的に使用されるコード スニペットをいくつか示します。詳細な使用デモンストレーションを参照できますtest/cef_test.js

DOM を照会する

1 2 3 4 5 6 7 8 9 10 11 12 13
function getOuterHTML(win, selector) { var doc = win.dev.DOM.getDocument(); var e = win.dev.DOM.querySelector({ "nodeId": doc.root.nodeId, "selector": selector }); var html = win.dev.DOM.getOuterHTML({ "nodeId": e.nodeId }); return html.outerHTML; }

マウス操作をシミュレート

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
function click(win, selector) { var doc = win.dev.DOM.getDocument(); var e = win.dev.DOM.querySelector({ "nodeId": doc.root.nodeId, "selector": selector }); var box = win.dev.DOM.getBoxModel({ "nodeId": e.nodeId }); var mi = { "x": box.model.content[0] + 1, "y": box.model.content[1] + 1, "button": 'left', "clickCount": 1 } mi.type = "mousePressed"; win.dev.Input.dispatchMouseEvent(mi); mi.type = "mouseReleased"; win.dev.Input.dispatchMouseEvent(mi); }

キーボード操作をシミュレートする

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
function type(win, text) { for (char of text) { win.dev.Input.dispatchKeyEvent({ "type": "char", "text": char }); } } function press(win, key) { var code = key_code[key]; var ki = { "key": key, "code": key, "windowsVirtualKeyCode": code, "nativeVirtualKeyCode": code }; ki.type = "keyDown"; win.dev.Input.dispatchKeyEvent(ki); ki.type = "keyUp"; win.dev.Input.dispatchKeyEvent(ki); }

ページのスクリーンショット

1 2 3 4 5 6 7 8 9 10 11
var ret = win.dev.Page.captureScreenshot({ clip: { "x": 0, "y": 0, "width": 100, "height": 100, "scale": 1 } }); var img = gd.load(encoding.base64.decode(ret.data));

ユーザーエージェントをシミュレート

1 2 3 4 5 6 7 8 9
var win = gui.open(); win.on('open', () => { win.dev.Network.setUserAgentOverride({ userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 10_0_1 like Mac OS X) AppleWebKit/602.1.50 (KHTML, like Gecko) Version/10.0 Mobile/14A403 Safari/602.1', }); win.loadUrl('https://fibjs.org'); });

イベントをリッスン

1 2 3 4 5 6 7 8 9
var win = gui.open(); win.on('open', () => { win.dev.Page.enable(); win.dev.Page.on("frameNavigated", ev => { console.log(ev.frame.url); win.close(); }); });

マルチメディアのサポート

著作権の問題により、cef のバイナリ配布には通常、mp4 と mp3 のデコードは含まれていません。ただし、cef にはオープン ソースの webm デコードが含まれているため、独立したデスクトップ アプリケーションの場合は、無料でライセンスを取得した webm エンコードを使用してオーディオとビデオを処理することをお勧めします。

概要

このセクションの導入により、独自のデスクトップ アプリケーションをすばやく開発し、html を画像または PDF にレンダリングし、cdp の強力なインターフェイスを使用してフロントエンド自動化テストおよびプロセス自動化エンジンを確立できます。

👉 [サーバーモジュールのホットアップデート]