Broadway-ブラウザでのGTK3インターフェイスのレンダリング（HTML5）

ローカルへのインストールが常に可能であるとは限らないアプリケーションへのアクセスを提供することが必要な場合があり、必ずしも必要ではありません。 おそらくここでの最良の解決策は、JS / PHPなどのWebインターフェイスです。 しかし、場合によっては他のより簡単な方法がありますか？ 特に、アプリケーションの移植性を維持する必要がある場合、およびそのような機能を実装するためにコードで余分なことをほとんど行わないほうがよい場合です。
この機会はブロードウェイによって提供されます-長い間新しいものではありませんが、GTK3のバックエンドの影にとどまります。これにより、すべてが長い間踏まれているように思われる場所に新しい機能をもたらすことができます。

GTK Broadwayとは

ブロードウェイについては、すでに2011年にhabrで語られました。 ただし、それ以降、このオプションの照明領域ではほとんど変更されていません。
UPD、ありがとうawoland ：
最初は、これは6.3 X Window System 11（X11R6.3）リリースのテクノロジーと内部コード名です。
「ブロードウェイは、X Window System 11リリース6.3（X11R6.3）開発努力の内部コード名でした。 X11R6.3プロジェクトは、Xを使用してWorld Wide Web上の対話型アプリケーションを作成およびアクセスできるようにするための画期的なイニシアチブでした。 X11R6.3を使用してWebにリンクされたアプリケーションは、現在静的HTMLドキュメントにアクセスするのに使用されているのと同じツールであるWebブラウザーで検索、アクセス、実行できます。

主なアイデアは、通常の既におなじみのGTK3に基づいて単一のバージョンのコードを作成することです。これは、変更を加えることなく、同時にかつ事実上、古典的なグラフィカルアプリケーションとして機能し、ブラウザーでHTML5とWebソケットを使用してインターフェイスをレンダリングできます。 バージョン3.8以降では、接続用のパスワードと、1つのサーバーで多くのアプリケーションを実行する機能を設定できるようになりました。

GTK3のバージョン

公式には、BroadwayはGTK3でリリースされましたが、バージョン3.8以降でのみ、このサブシステムは迷惑なエラーを取り除きました。 3.10.7を使用します。これは、使用の原則を変更し、多くのエラーを修正し、HTTPサーバーを別のアプリケーションとして作成したためです。 したがって、3.10についてお話します。すべて同じで、すべてが彼に届くからです。

動作原理

GTK3と一緒に、GTK3（broadway d ）と統合されたHTTPサーバーがインストールされます。 起動時に、たとえば/run/user/1000/broadway1.socketなどのソケットを作成し、GTK3アプリケーションがこのソケットに接続するのを待ちます。
別のポート（画面番号）を指定し、接続のパスワードを設定できます （> = GTK 3.8）。

なぜそれが必要ですか

このような操作モードは、現在標準となっているPHP / JS / Javaとそれらのilkに基づいた標準インターフェースを置き換えるふりをしません。 ただし、この方法では、たとえば仮想マシンの形でサービスを作成できます。これにより、サーバー側で高いパフォーマンスを確保しながら、特別なインターフェイスを開発する時間を無駄にすることなく、ユーザーにコンピューティングサービスまたはユーティリティへのアクセスを提供します。 たとえば、XenServer仮想マシンにアクセスするためのコンソールを作成するためにそれを使用し、現在は望遠鏡のカメラへのリモートアクセスを実装しています。

ブロードウェイへの行き方

現時点では、私の知る限り、安定したブランチでGTK3 + Broadwayパッケージを提供している単一のディストリビューションはありません。 Debian 7には、実験リポジトリにそのようなパッケージがありますが、すべてが順調に進んでいるわけではないようです。
Debianベースのシステムでは、善良な人（Nicolas Delvaux）によって構築されたPPAを追加できます
彼が3.8.0に基づいて作成したバックポートがあります

システムを完全に破壊する実際の機会があるため、両方のオプションは注意して理解して使用する必要があります。 私は3.10.7を使用していますが、ここではソースからのみです。

簡単な組み立て手順

LFSマニュアルに記載されて いるように、パッケージマネージャーがあればmake installの代わりにcheckinstallを忘れずにアセンブルします。
残念ながら、そこには重要なニュアンスが記載されていません-GTK3ライブラリ自体をアセンブルおよびインストールすることに加えて、$ PATHを介してアクセス可能などこかで、たとえば/ usr / sbinに手動で収集してコピーする必要があります

cd gtk+-3.10.7/gdk/broadway make clean make cp broadwayd /usr/sbin 

打ち上げ

このようなアプリケーションを実行する場合

 GDK_BACKEND=broadway BROADWAY_DISPLAY=:0 ./gtk_app 

、
Webサーバーのようにバックグラウンドで動作し、ブラウザーの適切なアドレスとポートにアクセスしてインターフェイスにアクセスします。 この例では、localhost：8080です（ポートはport = 8080 +（display-1）として計算されます ）。 WebサーバーはすでにGTKに同梱されています-Broadway。 この場合、ホスト上で動作するXサーバーは必要ありません。 必要なライブラリがあれば十分です。 アプリケーションは、標準モードとほぼ同じ方法でブラウザーに表示されます。 比較：

使用の主なニュアンス

最初に目を引くのは、ウィンドウ名がなく、ページのタイトルに「broadway 2.0」と表示されていることです。 ドラッグしてウィンドウを手動でサイズ変更することもできません。
使用する

 gtk_status_icon_set_visible(GTK_STATUS_ICON(tray_icon), TRUE); 

セグメンテーション違反につながります。 次の注意点は、ブラウザで行われるすべてがホストマシンに関連して行われるということです。 たとえば、ローカルブラウザマシンでファイルを選択し、アプリケーション側でそれを処理することはできません。 または、libnotify呼び出しにより、ブラウザを備えたマシンではなく、ホストにポップアップが表示されます。
一方、サーバーリソースへのアクセスの簡素化など、他の利点もありますが、たとえばgtk_file_chooser_set_local_only、gtk_file_chooser_set_filterを介してセキュリティに注意を払い、別のユーザーのjailを構成し、このユーザーのWebバージョンを起動する必要があります。最小のディレクトリ構造。

もう1つの問題は、そのようなアプリケーションではブラウザのマウスを使用して標準メニューにアクセスできるが、指ではあまりうまくいかないことです（モバイルデバイスからアクセスする場合）。 さらに、ウィンドウのサイズと位置は常にどこでも同じではありません-これも考慮する必要があります。 そして非常に不愉快です-GTK3はシングルクリックをサポートしていません。 そのため、ダブルタップ（Android 4.2.2 / Firefox / Chrome）をオフにしても、まだ別のディレクトリを選択できませんでした。 異なるマシン/ブラウザから同じセッションに同時にログインすると機能しません。ソケットが1つしかないため、前のセッションは自動的に閉じられます

練習する

アプリケーションでBroadwayを使用する可能性を検討する方法を検討してください。
Gladeをインターフェイスコンストラクターとして使用します。 1つのアプリケーションで2つのバージョンのインターフェイスを使用します。1つは通常の使用用で、もう1つはブラウザ用です。ブラウザおよび/またはモバイルデバイスでの作業のニュアンスを考慮しようとします。
GTKでは、メモリバッファからインターフェイスをロードできます。これを使用します。 Makefileで、Gladeインターフェースが保存されているXMLファイルからの変換をuint8_t配列に追加します。これにより、アプリケーションがロードされます。 これにより、すべてを1つの実行可能ファイルに保存できます。

 all: xxd -i desktop.glade ../src/desktop.h; xxd -i web.glade ../src/web.h; make -C ../src clean: make -C ../src clean 

これで、ヘッダーファイルにインターフェイスを持つ配列ができました。 メインループは標準です。

 int main(int argc, char *argv[]) { gtk_init(&argc, &argv); GtkWidget *main_window = glade_init( ); gtk_widget_show(main_window); gtk_main( ); } 

返品について事前に回答します-std = c99で行っています
次に、このタイプまたはそのタイプのインターフェースをいつ使用するかを理解する必要があります。
ここで、Broadwayが使用されている場合、GDK画面は「ブラウザ」と呼ばれます。

 #ifdef __WIN32 G_MODULE_EXPORT #endif gboolean is_run_in_a_browser (void) { GdkScreen *current_screen = gdk_screen_get_default(); char *screen_name= gdk_screen_make_display_name(current_screen); gboolean is_browser = !strcmp(screen_name,"browser"); free(screen_name); return is_browser; } 

ここでは、必要に応じてWin32で適切に動作するためにifdefが必要です。
この関数では、GDKウィンドウの名前を確認し、それがブラウザである場合は、同時にウィンドウのデザイン（フレーム）を削除します。 次に、アプリケーションがブロードウェイを介して実行されているかどうかに応じて、インターフェイスをロードします

 #ifdef __WIN32 G_MODULE_EXPORT #endif GtkWidget *glade_init(void) { GtkBuilder *builder = gtk_builder_new( ); GError *error = NULL; gboolean web_run = is_run_in_a_browser(); gtk_builder_add_from_string(builder, web_run ? (char *)web_glade : (char *)desktop_glade, -1, &error); if (!error) { printf("Couldn't load builder buffer: %s", error->message); g_error_free(error); return NULL; } gtk_builder_connect_signals(builder, NULL ); GtkWidget *main_window = GTK_WIDGET (gtk_builder_get_object (builder, "mainwin")); g_object_unref(builder); return ( main_window ); } 

アプリケーションを起動します。 ウィンドウのレイアウト設定が機能しないことがわかりました。 起動直後に、GDK画面の解像度1024 * 768が後の考慮事項になります。 さらに、ブラウザの解像度がブロードウェイのデフォルト値と一致することはめったにないため、ウィンドウを手で中央に配置する必要があります。
ブラウザーでアプリケーションを開いた後、目的の画面解像度を設定する必要があり（ほとんどの場合、全画面に拡大されます）、同時に左上隅と原点を組み合わせる必要があります。 これは、たとえば次のように実行できます。

 gtk_window_move(GTK_WINDOW(main_window),0,0); GdkScreen *current_screen = gdk_screen_get_default(); int32_t w = gdk_screen_get_width(current_screen); int32_t h = gdk_screen_get_height(current_screen); gtk_window_resize(GTK_WINDOW(main_window),w, h); 

その後、テストアプリケーション（VNCコンソール）はAndroid / Firefoxで次のようになります）。



以前（3.8より前）にユーザーがアプリケーションをオフにする必要があった場合、ブラウザを閉じるか別の場所からログインした場合、表示されていたのは白い背景だけでした。 現在、ブロードウェイがソケットとアイドル/切断の処理を引き継ぎます。 今、私たちは他の小さなことを扱う必要があります

幅広いカスタマイズ

幸いなことに、GTK3はオープンソースであるため、さらに深く進んで何かを変更できます。

ウィンドウのタイトルから始めましょう。

デフォルトのテキストである「broadway 2.0」は、だれにも適しているとは考えにくいため、これを変更します。 HTML5サーバーページは、テンプレートとJSファイルで構成されています。 ページタイトルは、標準のHTMLヘッダーに書き込まれます。

 <title>broadway 2.0</title> 

アセンブリ中に、ページはperlスクリプトによって単純なC配列に変換され、gtk + -3.10.7 / gdk / broadway / clienthtml.h-static const char client_html []に保存されます。
その後、すべてが簡単です、gtk + -3.10.7 / gdk / broadway / broadway-server.c：

 static void got_request (HttpRequest *request) ............... if (strcmp (escaped, "/client.html") == 0 || strcmp (escaped, "/") == 0) send_data (request, "text/html", client_html, G_N_ELEMENTS(client_html) - 1); 

操作アルゴリズムを少し変更します。ヘッダーをsprintfの形式として使用します。 そのため、gtk + -3.10.7 / gdk / broadway / clienthtml.hを少し修正する必要があります。たとえば、次のようにパーセント記号のスクリーニングを追加します。

 background-image: -moz-linear-gradient(#D1D2D2 0%%, #BABBBC 65%%, #D4D4D5 100%%);\n" 

の代わりに

 background-image: -moz-linear-gradient(#D1D2D2 0%, #BABBBC 65%, #D4D4D5 100%);\n" 

そしてタイトルのテキストを置き換えます

 <title>broadway 2.0</title> 

指定子について

 <title>%s</title> 

サーバー自体のアルゴリズムを変更します。

 char *http_title = getenv("GTK_HTTP_TITLE"); if (NULL == http_title) { http_title = "Default"; } size_t total_html_size = sizeof client_html + strlen(http_title) + 1; char *_client_html = malloc (total_html_size); snprintf(_client_html, total_html_size, client_html, http_title); if (strcmp (escaped, "/client.html") == 0 || strcmp (escaped, "/") == 0) send_data (request, "text/html", _client_html, strlen(_client_html) - 1); ........... g_free (_client_html); 

asprintfを使用することもできますが、Makefileをアップグレードする必要がありますが、これは望みません。
broadwaydを再構築し、グローバル変数を設定してサーバーを起動します

 export GTK_HTTP_TITLE="PAGE TITLE" 

デフォルトの画面サイズは変更できますが、モバイルデバイスで使用する場合に関係があります。

 static void gdk_broadway_screen_init (GdkBroadwayScreen *screen) { screen->width = 1024; screen->height = 768; } 

GDK画面の名前を変更します。たとえば、broadwaydの特定のバージョンをいくつか作成し、この方法でそれらを識別することができます。

 static gchar * gdk_broadway_screen_make_display_name (GdkScreen *screen) { return g_strdup ("browser"); } static gchar * gdk_broadway_screen_get_monitor_plug_name (GdkScreen *screen, gint monitor_num) { return g_strdup ("browser"); } 

おわりに

Broadwayは、GTK3の非常に興味深い機能であり、特定の範囲のタスクに対して興味深い軽量のサービスをすばやく作成できます。 しかし、残念ながら、実際には使用されていません。 この記事では、多数の人々の注目をブロードウェイに向けたいと思っていました。誰かがより簡単な方法で問題を解決できるかもしれません。