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

non vorrei lavorare

ブログ名の通りです。javascript three.js mruby rust OCaml golang julialang blender

JavaScriptオンリーでタスクトレイに我が子を表示する

パソコン・インターネット
おはようございます。このとろこ、次男突発性発疹かもと疑われるも夏風邪のようで、保育園休んだりしていましたが、今日から登園です。kjunichiです。
 

はじめに

Atom.ioはまだ、Windows版の公式バイナリは存在しませんが、Atom.ioエディタが内部で使っているAtom ShellWindows版の公式バイナリがあります。

今回はAtom Shellを使うことでJavaScriptのみで、わが子のアイコンを簡単にタスクトレイに表示出来ます!

割とOSXよりな記事が多いのにWindowsの記事を書いているのは6月は決算期という大人の事情w。 もちろんAtom Shellはマルチプラットフォームを謳っているので、OSXでもLinuxでも動きます。

Atom Shellをもってくる

ここからダウンロードして、デスクトップに展開します。

フォルダを作成

タストレイに子供のアイコンを表示するプログラム本体を格納するフォルダを作成します。

package.jsonをつくる

以下の内容で、package.jsonというファイル名で、さっき作ったフォルダに入れます。

{
  "name": "your-app",
  "version": "0.1.0",
  "main": "main.js"
}

main.jsを書く

以下のような感じで、appIconがガベージコレクションされないように、外側に書くことにさえ 注意すればOK

var app = require('app'); // Module to control application life.
var BrowserWindow = require('browser-window'); // Module to create native browser window.
var Menu = require('menu');
var Tray = require('tray');
var appIcon = null;
var contextMenu = null;
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the javascript object is GCed.
var mainWindow = null;
// Quit when all windows are closed.
app.on('window-all-closed', function() {
  if (process.platform != 'darwin')
    app.quit();
});
// This method will be called when atom-shell has done everything
// initialization and ready for creating browser windows.
app.on('ready', function() {
  appIcon = new Tray(__dirname + '/icon2.png');
  contextMenu = Menu.buildFromTemplate([{
    label: 'Item1',
    type: 'radio'
  }, {
    label: 'Item2',
    type: 'radio'
  }, {
    label: 'Item3',
    type: 'radio',
    checked: true
  }, {
    label: '終了',
    type: 'radio',
    click:function () {app.quit();}
  }, ]);
  appIcon.setToolTip('This is my application.');
  appIcon.setContextMenu(contextMenu);

  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600
  });
  // and load the index.html of the app.
  mainWindow.loadUrl('about://blank');
  mainWindow.openDevTools();

  // Emitted when the window is closed.
  mainWindow.on('closed', function() {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null;
  });
});

動かす

ダウンロードしたAtom Shellを展開し、中のAtom.exeをダブルクリックで起動。 つくったフォルダをこのAtom Shellウィンドウのドロップ領域にドロップ。

Snapcrab_noname_2014625_61545_no00

まとめ

Atom Shellを使えば、JavaScriptだけでOS寄りのGUI処理も簡単に書けました。

関連記事