読者です 読者をやめる 読者になる 読者になる

レガシーコード生産ガイド

私に教えられることなら

atom-shellで開発ツールをオンオフする

いろいろなツールを作るのにatom-shellが便利そうなので使ってみることにした。 node-webkitだと再生できないmp3も再生できるみたいなのでatom-shellを選んだ。 まずはクイックスタートを見ながらファイルを構成する。

atom-shell/quick-start.md at master · atom/atom-shell · GitHub

設定がどこかにあるんだろうけど、node-webkitと違ってツールバーなどが何もない、まっさらなウインドウが開かれる。 コンソールなど開発ツールを表示したいので、開発ツールを開くボタンを作ってみよう。

まずmain.jsで開発ツールを開いてみる。

    mainWindow = new BrowserWindow({width: 800, height: 600});

    mainWindow.openDevTools(); //追加

BrowserWindowオブジェクトの(close|open)DevToolsメソッドで開閉できる。上記のコードで開いた状態から始まる。

atom-shellでは実際に操作するChromium側をクライアント、内側で働くnode.js側?をブラウザと呼ぶらしい。紛らわしいと思うけど、何か意味があるんだろう。

とりあえず開閉するためにindex.htmlに以下の記述を足しておく

<script src="./index.js"></script>
<button id="devbtn">toggle dev tools</button>

index.htmlと同じ階層にindex.jsも作っておく。

var devbtn = document.getElementById('devbtn');

devbtn.addEventListener('click', function () {
});

さて、ボタンクリックで(open|close)DevToolsを呼ぶ方法は2つある。

  1. index.jsでBrowserWindowを取得し、そのまま使う
  2. index.jsとmain.jsを通信させる

どっちもやってみよう。まず前者の方法。

    var remote = require('remote'),
        win    = remote.getCurrentWindow(),
        devbtn = document.getElementById('devbtn'),
        show_dev_tools = true;
    ;

    function toggleDevTools() {
        show_dev_tools ?
            win.openDevTools() :
            win.closeDevTools();
    }
    toggleDevTools();


    devbtn.addEventListener('click', function () {
        show_dev_tools = !show_dev_tools;
        toggleDevTools();
    });

クライアント(Chromium)のJavaScriptでrequireが使えるようになっているので、remoteモジュールを読み込み、現在のウインドウを取得し、普通にメソッドを呼ぶ。

特に難しいこともない。remote.processでアプリケーションプロセスの情報も取得できるみたいだ。

続いて後者、通信する方法。

atom-shell/ipc-browser.md at master · atom/atom-shell · GitHub

ここを見ると、ipcモジュールというものを用いてイベントのやりとりをするみたいだ。まずmain.js側

var ipc = require('ipc');
var DEBUG = true;

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

    var show_dev_tools = DEBUG;

    function toggleDevTools() {
        show_dev_tools ?
            mainWindow.openDevTools() :
            mainWindow.closeDevTools();
    }
    toggleDevTools();

    ipc.on('toggle dev tools', function () {
        show_dev_tools = !show_dev_tools;
        toggleDevTools();
    });

});

さっきの開発ツール開閉メソッドをこちらに移し、ipc.onでそれらを発火するイベントを監視する。

次にindex.js側

    var ipc    = require('ipc');
    devbtn.addEventListener('click', function () {
        ipc.sendSync('toggle dev tools');
    });

ipc.sendだと非同期通信になる。

send, sendSyncともに send(message, arg) の形でデータを送信できる。

もちろんブラウザ・クライアント共にon,sendどちらもできる。

requireでクライアント側もfsなどモジュールを使えるみたいなので、シングルウインドウのアプリケーションなら、ほぼ全てのロジックをクライアント側に書いても大丈夫そう。 しかし複数ウインドウならブラウザ側にまとめた方が良さそうだ。express+angular.jsでSPA作るときと同じような構成にできるのも自分にとってはわかりやすい。

広告を非表示にする