Atomにツールバーを追加する「tool-bar」「flex-tool-bar」

2017年10月18日

Atomの「tool-bar」「flex-tool-bar」パッケージがいい感じなので紹介。
ショートカットアイコンを自由に設置可能なツールバーを作成するパッケージです。

各パッケージの概要

まずは、今回紹介するパッケージの概要から。
詳しくはリンク先のページをご覧ください。

「Atom tool bar」

ツールバーを追加するパッケージ。単体で動作しますが、設定の記述が難しい。

Atom tool bar : tool-bar

「Flex Tool Bar」

「Atom tool bar」パッケージの拡張プラグイン。
簡単な記述でツールバーを作成できるようになります。

Flex Tool Bar : flex-tool-bar

設定方法

この記事では、「Flex Tool Bar」パッケージを用いたツールバーの設定方法を紹介します。

「Atom tool bar」と「Flex Tool Bar」のインストール

まずは、両方のパッケージをAtomにインストールします。
Settingsを開き(cmd + ,)、Install画面からパッケージ名を検索しましょう。
それぞれ、「tool-bar」「flex-tool-bar」の名称で登録されています。

toolbar.csonファイルの記述

次に、Atomのコマンドパレット(cmd + shift + p)から「Flex Tool Bar: Edit Config File」を実行し、設定ファイルであるtoolbar.csonを開きます。
なお、この設定ファイルは別途作成してパスを指定し読み込ませることもできるようです。

私は使用しているパッケージに合わせて、以下のように指定してみました。

[
# project-managerパッケージの起動
  {
    type: "button",
    icon: "repo",
    callback: "project-manager:list-projects",
    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: "リモートから切断"
  },
# gulp-control
  {
    type: "button",
    icon: "tasks",
    callback: "gulp-control:toggle",
    tooltip: "Gulp管理タブを開く",
    iconset: "fa"
  },
# browser-refresh
  {
    type: "button",
    icon: "history",
    callback: "local-history:current-file",
    tooltip: "ファイルの更新履歴",
    iconset: "fa"
  },
# browser-refresh
  {
    type: "button",
    icon: "rotate-right",
    callback: "browser-refresh:open",
    tooltip: "Google Chromeの更新",
    iconset: "fa"
  },
# 区切り線
  {
    type: "spacer"
  },
# markdown-previewのトグル(Markdownファイルでのみ表示)
  {
    type: "button",
    icon: "markdown",
    callback: "markdown-preview:toggle",
    tooltip: "Markdown Preview",
    hide: "!Markdown"
  }
]

実際のツールバー表示はこんな感じ↓です。

flex-tool-bar

以下、指定可能な内容を順番に見ていきます。

type

typeでは、ツールバーに設定したアイコンをクリックした際の動作を指定します。

  • button
    Atomのアクションを設定します。

  • url
    指定したURLをデフォルトのブラウザで開きます。

  • function
    前のターゲットをパラメータとして、関数を呼び出すことができます。
    これには、設定ファイルをボタンの配列をエクスポートする.jsファイルまたは.coffeeファイルにする必要があります。

……とのことでしたが、すみません、使い方がこれだけよくわかりませんでした。。

  • spacer
    ツールバーのボタンの間にセパレータを追加します。

icon

アイコンを指定します。

callback

ボタンを押した際に実行される内容を指定します。
typeによって記述内容が異なり、例えば type:”url” ならURLを、 type:”button” ならアクションのコマンドを指定します。
コマンドを指定する場合は、すべて小文字で単語の区切りにはハイフンを用います。

例:「Flex Tool Bar: Edit Config File」を設定する→「callback:”flex-tool-bar:edit-config-file”」

tooltip

アイコンのマウスオーバー時に出現するツールチップの文字列を指定します。

iconset

iconの種類を指定します。

style

ボタンの色等をCSSで指定できます。
ボタンの種類に応じて色を変えることで、より直感的にわかりやすいツールバーにできそうです。

  {
    type: "button",
    icon: "repo",
    callback: "project-manager:list-projects",
    tooltip: "プロジェクトを開く",
    style: {
        color: "green"
        background: "red"
        border: "1px solid blue"
    }
  },

表示・非表示・有効・無効の切り替え

show,hide,able,disableにファイル名やファイルの種類などを指定することで、特定の場合のみ表示・非表示、または有効・無効にすることができます。

指定例

Flex Tool Barの実際の指定例が以下で公開されています。

メインツールバー:https://github.com/cakecatz/flex-toolbar/wiki/tool-bar-main
汎用ツールバー:https://github.com/cakecatz/flex-toolbar/wiki/tool-bar-almighty

まとめ

特にtype:”button”でAtomのアクションを設定できるのが便利です。
コマンドを覚えなくても良いことに加え、よく行う動作をワンクリックで実行可能にできることはとても楽です。

いろいろいじってみてからまた追記予定。