JavaScript
CoffeeScript
Node.js
ATOM

Atom の package で美人時計を作ってみたよ

More than 3 years have passed since last update.


はじめに

最近 atom にはまってるので一緒に plugin を作ってみましょう


Generate Package

atom の plugin で package の template を作ってくれる機能がありますのでそれを使います


  • Packages -> Package Generator -> Generate Atom Package

これを選択すると package の名前を決めるフォームみたいなのが出てくると思います。

これがパッケージの名前になります

作られた template ファイル

$ ls -l

total 32
-rw-r--r-- 1 sasarky staff 65 10 5 22:35 CHANGELOG.md
-rw-r--r-- 1 sasarky staff 1060 10 5 22:35 LICENSE.md
-rw-r--r-- 1 sasarky staff 186 10 5 22:35 README.md
drwxr-xr-x 3 sasarky staff 102 10 5 22:35 keymaps
drwxr-xr-x 4 sasarky staff 136 10 5 22:35 lib
drwxr-xr-x 3 sasarky staff 102 10 5 22:35 menus
-rw-r--r-- 1 sasarky staff 301 10 5 22:35 package.json
drwxr-xr-x 4 sasarky staff 136 10 5 22:35 spec
drwxr-xr-x 3 sasarky staff 102 10 5 22:35 stylesheets


作成方法

作成するときは Developer mode で作成します


  • View -> Developer -> Open in Dev Mode

こんな感じ

hoge


機能追加

今回は美人時計を見られるような機能を作ってみようと思います


Menu 追加

どこからいじるのがベターなのかはわからないですけど、見た目が変わるとテンションあがるので先にそこからやります

すでに Dev mode で開いていると自分のパッケージの機能が Packages のところに追加されていると思います

そこを押すと View がポコンとでてくるのがデフォルトでついています(ここに美人写真を載せたい)

メニューの編集をしてみましょう

今回はメニューの label を '美人時計' にしてみます


menu/bijin.cson

'menu': [

{
'label': 'Packages'
'submenu': [
'label': '美人時計'
'submenu': [
{ 'label': '表示/非表示', 'command': 'bijin:toggle' }
]
]
}
]

これで Reload してあげれば反映されているはずです


View 編集

先ほどの menu で編集した時 'command': 'bijin:toggle' となっていた部分がありました。

これはどこで定義されているのでしょうか


lib/bijin-view.coffee

{View} = require 'atom'

module.exports =
class BijinView extends View
@content: ->
@div class: 'bijin overlay from-top', =>
@div "The Bijin package is Alive! It's ALIVE!", class: "message"

initialize: (serializeState) ->
atom.workspaceView.command "bijin:toggle", => @toggle()

# Returns an object that can be retrieved when package is activated
serialize: ->

# Tear down any state and detach
destroy: ->
@detach()

toggle: ->
console.log "BijinView was toggled!"
if @hasParent()
@detach()
else
atom.workspaceView.append(this)


ここで "bijin:toggle", => @goggle() となっている部分があって

そのメソッドが定義されています。

atom.workspaceView.command で宣言することで呼ばれるようです。

また package.json でも activationEvents によって 指定の command を宣言しています。

もし、自分で新しいコマンドを用意したい場合は、ここにも追加して上げる必要があります(きっと。たぶん。)

さて、本題に戻りますが View では @content: で、その View のコンテンツを定義しています

この記法は space-pen っていうらしい。ぐぐってみてください

で、Packages にあったメニューを押したら↓の部分が表示されていたはずです。

@div "The Bijin package is Alive! It's ALIVE!", class: "message"

ではここを画像用に修正してみましょう

@content: ->

@div class: 'bijin overlay from-top', =>
@img src: 'http://www.bijint.com/iwate/tokei_images/2253.jpg'

これでもっかい見てみましょう。

オー。ちゃんと出てる出てる

hoge


時計機能追加

今は @img tag の src に画像のURLをポコっと貼っただけなので時計として機能していません。

そこで時計用に修正を加えます


lib/bijin-view.coffee

  @content: ->

@div class: 'bijin overlay from-top', =>
@img outlet: 'tokei'

outlet: を明記することでプログラム内で jquery object として利用することができます

そして今度は src に現在の時間を set するように修正を加えます

  toggle: ->

console.log "BijinView was toggled!"
if @hasParent()
@detach()
else
dt = new Date()
@tokei.attr('src', printf("http://www.bijint.com/iwate/tokei_images/%02d%02d.jpg", dt.getHours(), dt.getMinutes()))
atom.workspaceView.append(this)

先ほど outlet で指定した @tokei の src を toggle method 内で set します

さて、実際に動かしてみましょう

無事動きました!

hoge


おわりに

無事美人時計機能ができました。

あとは apm コマンドとかで自分の作った package を配信したりすることもできるようです。

API Document とか見てると他にもいろいろできるので自分だけの機能を Editor に追加してみるのもよいのでは!