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

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 プラットフォームのフォルダー構造は次のとおりです。通常はバイナリパッケージ内で、ディレクトリ内のすべてのファイルReleaseをResources見つけることができます。

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 プラットフォームのフォルダー構造は次のとおりです。通常はバイナリパッケージ内で、ディレクトリ内のすべてのファイルReleaseをResources見つけることができます。

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 をインストールする必要がない場合は、ウィンドウモードで実行する場合にのみモードを実行できます。

1apt 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
3gui.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
17gui.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起動オプションです。

1fibjs --headless test.js

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

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

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

1apt 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 の強力なインターフェイスを使用してフロントエンド自動化テストおよびプロセス自動化エンジンを確立できます。

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

開発ガイド

基本モジュール

組み込みオブジェクト

コミュニティモジュール

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

セフの紹介

動作環境の準備

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

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

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

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

ウィンドウレスモード

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

DOM を照会する

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

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

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

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

イベントをリッスン

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

概要

開発ガイド

基本モジュール

組み込みオブジェクト

コミュニティモジュール

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

セフの紹介

動作環境の準備

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

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

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

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

ウィンドウレスモード

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

DOM を照会する

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

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

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

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

イベントをリッスン

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

概要

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

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

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