自分がお気に入りのLinux mint cinnamon Editionにはdeskletというガジェット機能があります。
こいつの開発手法が国内国外問わず殆どないため、試行錯誤しながら現在学んでいるのですが。
ある程度分かってきたのでメモを残していこうと思います。

第二回は実際に作ってみようというわけで、まずはHello, Worldから。

第一回はこちら

パス

さて、まずはフォルダを作るのですが、最終的な場所はホームディレクトリの.local/share/cinnamon/deskletsという場所になります。
本来はdeskletsのリポジトリをgithubから落としてプルリク作って、承認後それをインストールしたらここに作られるのですが。
今回はいきなり最終的な場所に作っちゃいましょ。

uuid

フォルダ名にはユニークなIDと組織名が必要になります。
どっちも好きに自分で決めましょ。
で、それを@で結んだものがフォルダ名になります。
mkdir .local/share/cinnamon/desklets/ユニークID@組織名
ですね。

続いてそこに２つのファイルを格納します。
metadata.jsonとdesklet.jsの２つ。

metadata.json

まずmetadata.jsonから見ていきましょう。
これは名前の通りメタデータを格納したものです。
中身はこんな感じ。

{
    "uuid": "hello@ogatism",
    "name": "Hello, world! desklet",
    "description": "Displays Hello, World!",
    "prevent-decorations": false
}

とりあえずこれだけあれば動作します。
uuid、name、descriptionは説明を省きますが最後のprevent-decorationは現在のテーマを引き継ぐかどうかのフラグです。
引き継がないと独自のスタイルになるっぽいです。

desklet.js

こいつが本体。
基本的にはnode.jsと一緒ですが、前回説明したように普通のimportやrequireは使えません。
独自記法でモジュールを読みます。

const Desklet = imports.ui.desklet;
const St = imports.gi.St;

function HelloDesklet(metadata, desklet_id) {
    this._init(metadata, desklet_id);
}

HelloDesklet.prototype = {
    __proto__: Desklet.Desklet.prototype,

    _init: function(metadata, desklet_id) {
        Desklet.Desklet.prototype._init.call(this, metadata, desklet_id);

        this.setupUI();
    },

    setupUI: function() {
        this.window = new St.Bin();
        this.window.add(new St.Label({text: "Hello world!"}));

        this.setContent(this.window);
    },

    on_desklet_remove: function() {
      this.window.destroy_all_children();
      this.window.destroy();
    }

}

function main(metadata, desklet_id) {
    return new HelloDesklet(metadata, desklet_id);
}

こんな感じかな。

まずdeskletを起動するとdesklet.jsのmain関数が呼ばれるのです。
で、そこからdeskletインスタンスを返してあげればOK。
この中で必要なのはcjs内のDeskletのinitを呼ぶことと画面の描画。
見ての通りSt(Shell Toolkit)でコンテナ作ってラベルを貼り付け。
swingとか知っている人にはほぼほぼおなじみかと。
で、削除時にdestroyすること。これ無いと一度デスクレット設定画面から消したら再度追加できなくなるのです。

インストール

ちゃんと作れたらalt+f2を押してプロンプトにrとだけ入力してenter。
cinnamonが再起動され、デスクレット設定画面から追加できるようになっています。

ログ

何かうまくいかなかったらホームディレクトリの.xsession-errorsってところにログが出てます。
global.logという関数を読んでもここに表示されるので確認を。
ちなみにalt+f2のプロンプトでlgというもの叩くとデバッグウィンドウが出ます。

次回へ続く。
第三回

Tweet

Pocket