HTMLおよびJSでUbuntuアプリケーションを開発するにはどうすればよいですか？

34

私はアプリを開発していますが、HTMLとJavaScriptは将来的には優れていると思いますが、チュートリアルを見つけることができません（システムテーマを使用するにはアプリが必要です）。

Unity、メッセージメニューと通知、couchdbなどのバインディングはありますか？

application-development  webapps  html5  webapp-development 
— mhall119
ソース
同様の質問が興味深い場合もあります。askubuntu.com
— デビッドプラネラ

回答:

24

UbuntuでのバインディングとAPIの適切な出発点は、developer.ubuntu.comで見つけることができます。経験はありませんが、おそらくGNOMEのJavascriptバインディングであるGjsについても検討したいと思うでしょう。

何をしようとしているかに応じて、HTML + JSアプリのようにアプリをビルドし、Webkitビューにスローできます。Pythonで行うのは非常に簡単です。

#!/usr/bin/env python

from gi.repository import Gtk, WebKit
import os, sys

class Browser:
    def __init__(self):
        self.window = Gtk.Window()
        self.window.set_default_size(800, 600)
        view = WebKit.WebView()
        view.load_html_string("<strong>Hello World!</strong>", "file:///")  
        self.window.add(view)

        self.window.show_all()
        self.window.connect('destroy', lambda w: Gtk.main_quit())

def main():
    app = Browser()
    Gtk.main()

if __name__ == "__main__":
    main()
— アンドリューサム
ソース
7
JSも本物のプログラミングです。
— オワイスローン
17

Gtkウィンドウに埋め込まれたWebKitフレームを使用して、インターフェイスにHTML + Javascriptを使用して開発できます（これはPythonで行うのが最も簡単です）。最も難しい部分は、HTML / Javascriptアプリケーションからシステムと通信することです。

これを行うには、JavascriptとPythonの間でメッセージを渡します。ただし、システムロジックをPython関数として記述する必要がありますが、これは非常に簡単です。

PythonとJavascript間の通信を示す簡単な例を次に示します。この例では、HTML / Javascriptにボタンが表示され、クリックすると配列["hello", "world"]がPythonに送信され、配列が文字列「hello world」に結合されてJavascriptに返されます。Pythonコードは配列の表現をコンソールに出力し、Javascriptコードは文字列を表示する警告ボックスをポップアップします。

example.py

import gtk
import webkit
import json
import os

JAVASCRIPT = """
var _callbacks = {};
function trigger (message, data) {
    if (typeof(_callbacks[message]) !== "undefined") {
        var i = 0;
        while (i < _callbacks[message].length) {
            _callbacks[message][i](data);
            i += 1;
        }
    }
}
function send (message, data) {
    document.title = ":";
    document.title = message + ":" + JSON.stringify(data);
}
function listen (message, callback) {
    if (typeof(_callbacks[message]) === "undefined") {
        _callbacks[message] = [callback];
    } else {
        _callbacks[message].push(callback);
    }
}
"""

class HTMLFrame(gtk.ScrolledWindow):
    def __init__(self):
        super(HTMLFrame, self).__init__()
        self._callbacks = {}
        self.show()
        self.webview = webkit.WebView()
        self.webview.show()
        self.add(self.webview)
        self.webview.connect('title-changed', self.on_title_changed)

    def open_url(self, url):
        self.webview.open(url);
        self.webview.execute_script(JAVASCRIPT)

    def open_path(self, path):
        self.open_url("file://" + os.path.abspath(path))

    def send(self, message, data):
        self.webview.execute_script(
            "trigger(%s, %s);" % (
                json.dumps(message),
                json.dumps(data)
            )
        )

    def listen(self, message, callback):
        if self._callbacks.has_key(message):
            self._callbacks[message].append(callback)
        else:
            self._callbacks[message] = [callback]

    def trigger(self, message, data, *a):
        if self._callbacks.has_key(message):
            for callback in self._callbacks[message]:
                callback(data)

    def on_title_changed(self, w, f, title):
        t = title.split(":")
        message = t[0]
        if not message == "":
            data = json.loads(":".join(t[1:]))
            self.trigger(message, data)

def output(data):
    print(repr(data))    

if __name__ == "__main__":
    window = gtk.Window()
    window.resize(800, 600)
    window.set_title("Python Gtk + WebKit App")
    frame = HTMLFrame()
    frame.open_path("page.html")
    def reply(data):
        frame.send("alert", " ".join(data))
    frame.listen("button-clicked", output)
    frame.listen("button-clicked", reply)
    window.add(frame)
    window.show_all()
    window.connect("destroy", gtk.main_quit)
    gtk.main()

page.html

<html>
<body>
<input type="button" value="button" id="button" />
<script>
document.getElementById("button").onclick = function () {
    send("button-clicked", ["hello", "world"]);
};
listen("alert", function (data) {alert(data);});
</script>
</body>
</html>

ここで本当に注意を払う必要がある唯一のpythonコードdef output(data):は、ファイルの最後から最後までのコードです。これは非常にわかりやすいはずです。

これを実行するには、インストールされていることを確認してpython-webkitからpython-gtk2、同じフォルダーにファイルを保存して実行します。

python example.py

実行中のプログラム

— dv3500ea
ソース
1
これは素晴らしいです
— フランシスコプレゼンシア
5

BATを開発しました。これは、HTML、JS、およびCSSを使用してデスクトップアプリケーションを構築するための小さなツールです。

ブログでそれに関する記事を書きました。

例

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <style>
            body {
                font-family: Monaco, monospace;
                color: white;
                background: #3C3B38;
            }
            h1 { text-align: center; }
            p { text-align: justify; }
            button {
                padding: 10px 20px;
                -moz-border-radius: 4px 4px 4px 4px;
                -webkit-border-radius: 4px 4px 4px 4px;
                border-radius: 4px 4px 4px 4px;
                display: block;
                font-size: 14px;
                text-decoration: none;
                border: 1px solid #c0b7b0;
                cursor: pointer;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <h1>Hello World</h1>
        <p> Ipsum deserunt architecto necessitatibus quasi rerum dolorum obcaecati aut, doloremque laudantium nisi vel sint officia nobis. Nobis ad nemo voluptatum molestiae ad. Nisi ipsum deserunt a illo labore similique ad?  </p>
        <p> Ipsum veniam laborum libero animi quo dignissimos. Possimus quidem consequatur temporibus consequatur odio, quidem deleniti! Similique totam placeat sint assumenda nulla dolor. Voluptatibus quasi veritatis distinctio consectetur nobis. Nemo reprehenderit?  </p>
        <p> Ipsum molestiae nesciunt commodi sint et assumenda recusandae! Earum necessitatibus sequi nulla fugit architecto omnis. Maiores omnis repellat cupiditate iure corporis dolorem sed amet nesciunt. Mollitia sapiente sit repellendus ratione.  </p>
        <p> Consectetur architecto ratione voluptate provident quis. At maiores aliquam corporis sit nisi. Consectetur ab rem unde a corporis reiciendis ut dolorum, tempora, aut, minus. Sit adipisci recusandae doloremque quia vel!  </p>
        <button onclick="BAT.closeWindow()">Close</button>
    </body>
</html>

そして、次のように実行します。

bat -d index.html -t "BAT Hello World" -s 800x500

結果は次のとおりです。

— イオニカ・ビザウ
ソース
4

プラットフォームに直接アクセスする限り、シードをチェックアウトする必要があります。

また見かかることがありますUserWebKit、NovacutとDmedia UI（それが上に構築されていますが使用するキーの機能を提供のpython3ライブラリUserCouchとマイクロファイバー、BTWを）。

よく考えてから、JavaScriptから直接プラットフォームにアクセスしない方がおもしろいと思いました。必要に応じて、オプションで標準ブラウザでUIを実行できるからです。Novacutアーキテクチャは、ネットワーク透過UIとバックエンドのサーバーを維持するためのCouchDBを使用しています。通常の単一コンピューターの場合、サーバーはそのコンピューター上でローカルに実行されます。しかし、UIが違いに気付くことなく、他のシステムでサーバー（およびCouchDB）を同様に実行できます。

— デデローズ
ソース
3

phpなどのシェルコマンドを実行できる言語を含めることができます。この方法では、Webページからアプリをインストールしていくつかのコマンドを実行するなどのことを活用できます（システムテーマに応じて使用するテーマと使用するCSSを検出するように）。たとえば、次の2つの質問が役立ちます。

サーバーは同時シェルコマンドを処理できますか？（複数のコマンドの実行について説明します）

Webから行コマンドを実行する（Webページリンクをクリックする）（リンクをクリックしてソフトウェアセンターからアプリをインストールする方法について説明します）

どのテーマが使用されているかを知る方法として、デフォルトのテーマの値を持つubuntuファイルを解析し、それに応じてサイトのCSSを変更して新しいテーマを反映させることができます。

テーマとその場所に関する質問は、ここで見つけることができます：

テーマのテキストの色を変更するには、どのファイルを編集する必要がありますか？

デスクトップはテーマを忘れますか？

GTKテーマの編集（境界線の追加）

このすべて（および検索を使用する場合はそれ以上）は、解析時にどこを見るか、システムがどのテーマを使用しているか、Webページで何を使用するかを確認できるファイルを知るのに役立ちます。

— ルイス・アルバラード
ソース
0

これでAppJSができました-https ://github.com/milani/appjs！

彼らが言ったように、「最新のHTML5 APIがサポートされるように、Chromiumをコアとして使用し、Node.jsをバックボーンとして使用します。」

— スーパー
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.