JavaScriptオンリーでタスクトレイに我が子を表示する
はじめに
Atom.ioはまだ、Windows版の公式バイナリは存在しませんが、Atom.ioエディタが内部で使っているAtom Shellは Windows版の公式バイナリがあります。
今回はAtom Shellを使うことでJavaScriptのみで、わが子のアイコンを簡単にタスクトレイに表示出来ます！
割とOSXよりな記事が多いのにWindowsの記事を書いているのは6月は決算期という大人の事情ｗ。 もちろん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ウィンドウのドロップ領域にドロップ。
まとめ
Atom Shellを使えば、JavaScriptだけでOS寄りのGUI処理も簡単に書けました。
関連記事
- Node.jsとAmazon Dashボタンで鬼が来たボタンを作った
- Atom Shellでデスクトップキャプチャー（動画）アプリ
- 通知センターに子供の写真を表示する #OSX
- #イクメン #2011aug_baby フーリエ記述子を息子のお絵かきソフトに
- #2011aug_baby 息子のきーぼーど練習ソフトをつくる
- #イクメン 息子と出かけた県を色つけしていく
- #2011aug_baby iPhoneに息子のアイコンを無料で敷き詰める
