ガイド開発ガイド
  1. 表紙
  2. 開発ガイド
  3. デスクトップアプリケーションをすばやく開発する

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

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

1
2
3
4
5
var gui = require("gui");

gui.open("https://fibjs.org", {
    "type": "native"
});

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

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

cefの紹介

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

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

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

  • パフォーマンスと安定性の向上（JavaScriptとプラグインは別のプロセスで実行されます）。
  • Retinaディスプレイをサポートします。
  • WebGLおよび3DCSSの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 Serverでは、デスクトップ環境がサポートされていないため、--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の公式ウェブサイトが読み込まれたブラウザウィンドウも表示されますが、そのエンジンはすでに最新のChromeカーネルです。ここでtypeオプションをキャンセルする必要があることに注意してください。そうしないと、OSで構築されたWebビューが開きます。

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

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

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

プロトコルスケーラビリティに基づく拡張デスクトップアプリケーション用のfibjscefはWebViewとfibjsをHandler一緒に使用するため、プロセスWebViewは対応するHandlerプロセッサに直接接続でき、フロントエンドとリアエンドで同時に開発される従来のB / Sパラダイムと完全に互換性があります。安全性と携帯性を確保します。同時に、フロントエンドとバックエンドのコードは、標準の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であり、もう1つはhttpルートを指すcef_testドメインです。

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

ハンドラーバックエンドの開発方法については、以下を参照してください。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
});

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

DevToolsインターフェース

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

fibjsはcdpのアクセスインターフェイスをカプセル化します。cefの組み込みのcdpインターフェイスを最大限に活用して、WebViewのWebページを直接デバッグできます。WebViewがcdpサービスにアクセスするために使用するインターフェースは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の強力なインターフェイスを使用してフロントエンドの自動化テストとプロセス自動化エンジンを確立できます。

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

©Copyright2012-2021 fibjs.org |サポートしてください