機械人形の実験室

適当に、なんかやってみる

Electron でDockを操作してみる

Electron Mac

今回は、ElectronでDockを色々と操作してみます。 ということで、Macオンリーな操作です。

github.com

前準備

Electronアプリを動かすのに、必要なファイルをテンプレ的な感じですが、ざっと作ります。

package.son

{
    "name":"dialog-test",
    "version":"0.1.0",
    "main":"main.js"
}

main.js

var BrowserWindow = require('browser-window');

require('crash-reporter').start();

var mainWindow = null;

app.on('window-all-closed', function(){
    if(process.platform != 'darwin')
        app.quit();
});

app.on('ready', function(){
    mainWindow = new BrowserWindow({width:800, height:600});

    mainWindow.loadUrl('file://' + __dirname + '/index.html');

    mainWindow.on('closed', function(){
        mainWindow = null;
    });
});

Dockを操作する

Dockをいじるのには、appモジュールを使います。 appモジュールのAPIについては、以下のリンクに詳細があります。

electron/app.md at master · atom/electron · GitHub

appモジュールがDockで出来る操作は、以下の4種類です。

  • バウンス（アイコンが跳ねる動作）
  • バッジ（アイコンの右上にラベルを表示）
  • 表示・非表示
  • メニュー（今回は扱いません）

バウンス

バウンスは、以下の関数で操作します。

app.dock.bounce([type])
app.dock.cancelBounce(id)

bounceで指定するtypeは、文字列でcriticalかinformationalを指定します。 指定を省略した場合は、informationalを指定した場合の動作になります。

  • critical - アプリがアクティブになるかバウンス要求がキャンセルされるまで、バウンスします。
  • informational - 1秒間バウンスします。バウンスの要求は、アプリがアクティブになるかバウンス要求がキャンセルされるまでは、要求されたままです。

bounceを呼び出した時のバウンス要求は、bounceの戻り値で返されたIDです。 バウンスをキャンセルする時は、cancelBounceに引数として、キャンセルしたいボウンス要求のIDを渡します。

バッジ

バッジを設定する時は、app.dock.setBadge()で設定します。 バッジに表示したい文字列をsetBadgeに渡します。 現在設定されているバッジを取得するには、app.dock.getBadge()を使います。

表示・非表示

Dockにアイコンを表示する場合は、app.dock.show()を呼び出します。 Dockのアイコンを非表示にする場合は、app.dock.hide()を呼び出します。

注意点？

バッジを設定後にDockのアイコンを非表示にし、再度表示した後に、バッジを設定してもバッジが表示されません。 ちょっと調べてみましたが、いまいち、これの対処方法がわからなかったです。 このような操作をする場合もそんなにないと思いますが。

サンプルコード

今回の実装としては、以下のような感じです。 index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"></meta>
    <title>Dock Example</title>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
<h1 id="header">Dock Example</h1>
    <ul>
        <li><a href="#" onclick="App.bounceForCritical()">Bounce (Critical)</a></li>
        <li><a href="#" onclick="App.bounceForInfo()">Bounce (Info)</a></li>
        <li><a href="#" onclick="App.setBadge()">Set Badge</a></li>
        <li><a href="#" onclick="App.clearBadge()">Clear Badge</a></li>
        <li><a href="#" onclick="App.showIcon()">Show</a></li>
        <li><a href="#" onclick="App.hideIcon()">Hide</a></li>
    </ul>
</body>
</html>

script.js

var remote = require('remote');
var app = remote.require('app');

var bounceID = undefined;

var App = {
    bounceForCritical:function(){
        if(bounceID != undefined) this.cancelBounce();
        setTimeout(function(){
            bounceID = app.dock.bounce('critical');
        }, 5000);
    },
    bounceForInfo:function(){
        if(bounceID != undefined) this.cancelBounce();
        setTimeout(function(){
            bounceID = app.dock.bounce('informational');
        }, 5000);
    },
    cancelBounce:function(){
        if(bounceID != undefined){
            app.dock.cancelBounce(bounceID);
            bounceID = undefined;
        }
    },
    setBadge:function(){
        app.dock.setBadge('Test');
    },
    clearBadge:function(){
        app.dock.setBadge('');
    },
    showIcon:function(){
        app.dock.show();
    },
    hideIcon:function(){
        app.dock.hide();
    }
};

サンプルコード実行の注意点としては、バウンス動作を確認する場合は、アプリを非アクティブにしないとバウンスしません。

今回のコード置き場

今回作ったコードは以下の場所にあります。

github.com