続・オタク Atom の作り方

以前に作ったオタク Atom の作り方のさらにパワーアップ版。

ランダムな背景画像が選ばれるようにしてみる。

痛エディタにおいて、背景画像がランダムに変わるというのは大事な要素である［要出典］。実際に Visual Studio の痛 IDE 拡張ではランダムに変わるようにすることができる。

これを Atom でもやりたい。

スタイルシートはコンパイル時にすべて定数になってしまうので、スタイルシートだけではうまくいかない。そこで、起動時スクリプトと組み合わせて実装してみる。

まずはスタイルシートの方。これは前回と基本的にはおなじ。乗算モードで合成することで、自然な感じに画像を貼れる。位置とかサイズとかの制御は各自でうまくやってください。

このときに、background-image だけは指定していない。

body::after {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    mix-blend-mode: multiply;
    content: "";
    position: absolute;
    background-size: contain;
    background-position: right bottom;
    background-repeat: no-repeat;
    pointer-events: none;
    opacity: .18;
    z-index: 100;
}

つぎに起動時スクリプト（init.coffee）。CoffeeScript とかいう謎言語だけど中身は簡単で、指定されたディレクトリの中にある png と jpg ファイルを選んできて、その中身をランダムに選んでいるだけ。

atom.commands.add でコマンド登録をしているので、コマンドパレットから背景画像を変更できるようになる。

update_bg = ->
    dir = '/path/to/image/dir/'
    fs = require('fs')
    fs.readdir(dir, (err, list) ->
        unless err
            files = list.filter((s) -> s.endsWith('.png') || s.endsWith('.jpg'))
            document.styleSheets[0].addRule('body::after', "background-image: url('#{dir}#{files[Math.floor(Math.random() * files.length)]}');"))
atom.commands.add('atom-workspace', { 'otaku-background:change-background-image': update_bg })
update_bg()

さらにおまけでキーマップ（keymap.cson）。

'atom-workspace':
    'f12': 'otaku-background:change-background-image'

この 3 つを揃えると、起動時（ウインドウ表示時）にランダムに画像が選ばれて最高な気持ちになるし、気持ちが滅入ってきたら F12 キーを押すだけで新しい画像が表示されて気持ちが切り替わりまた最高な気持ちになる。

オタク Atom のサンプル

みんなも新年度はオタク Atom を整備するところからはじめような。

Tweet