Atom講座

Atomにツールバーを追加するtool-barパッケージ

2016年1月8日

ツールバーを追加する: Atom Tool Bar(tool-bar) / Flex Tool Bar(flex-tool-bar)

Atom Tool Barパッケージは Atom にツールバーを実装し、好きなボタンを追加していくことができます。
便利ではありますが、ツールバーの編集の際にコードを書く必要があるため、扱いづらいのが難でした。
それを解消するべく、JSONファイルを使ってボタンを編集できるようにしたのがFlex Tool Barパッケージです。

利用するには、設定画面から tool-bar 、flex-tool-bar をそれぞれ検索し、両方のパッケージをインストールしてください。

Atom を再起動すると、コンテンツカラム上部に次のようなツールバーが表示されます。
デフォルトでツールバーの設定ボタンが追加されています。

atom_toolbar

ツールバーの設定ボタンをクリックすると、ツールバーを設定するためのファイル toolbar.cson が表示されます。
設定方法は Flex Tool Bar に詳しいですが、例えば次のように指定して保存すると即時でツールバーが変更されます。

[
# githubサイトへ遷移
{
type: "url"
icon: "octoface"
url: "http://github.com"
tooltip: "Github Page"
}
# project-managerパッケージの起動
{
type: "button"
icon: "repo"
callback: "project-manager:toggle"
tooltip: "プロジェクトを開く"
}
# remote-ftpパッケージのパネル開閉
{
type: "button"
icon: "cloud-upload"
callback: "remote-ftp:toggle"
tooltip: "リモートパネルの開閉"
}
# remote-ftpパッケージのリモートからの切断
{
type: "button"
icon: "circle-slash"
callback: "remote-ftp:disconnect"
tooltip: "リモートから切断"
}
# atom-beautifyパッケージの実行
{
type: "button"
icon: "code"
callback: "atom-beautify:beautify-editor"
tooltip: "テキストの整形"
iconset: "fa"
mode: "atom-text-editor"
}
# markdown-previewのトグル(Markdownファイルでのみ表示)
{
type: "button"
icon: "markdown"
callback: "markdown-preview:toggle"
tooltip: "Markdown Preview"
hide: "!Markdown"
}
# 区切り線
{
type: "spacer"
}
]

toolbar.cson を保存すると即時でツールバーが更新されます。

atom_toolbar2

Comment

  1. 拝見させていただきました。
    ToolBarあると便利ですよね。

    質問なのですが、
    modeという要素は何のためにあるのでしょうか?
    また、ToolBarの大きさを小さくしたいのですが、方法をご教授いただけますか?

コメントを残す

メールアドレスが公開されることはありません。

関連記事

リズムファクトリーはホームページの制作会社です。
ホームページ制作に関するご要望・ご相談はこちらからどうぞ。

株式会社リズムファクトリーでは現在、下記の職種について人材募集を行っております。
求人をクリックすると「求人情報サイトFind Job!」の求人詳細画面が開きますので、こちらからご応募下さい。

提供 : Webな人の求人情報サイト Find Job!