Atom Editorのツールバー・プラグインに設定するコマンドの探し方と設定方法

Advertisement

どこかで見かけて便利そうだなぁと思ったので、 Atom Editor のツールバー(tool-barパッケージ)を入れてみました。設定に少し手こずったのでメモっておきます。

目次

パッケージのインストール

以下の2つのパッケージをインストールします。

Atom Tool Bar

Atomにツールバーを追加してくれるパッケージ。atom-toolbarというやつもあるのでご注意ください。tool-barの方が圧倒的にインストール数も多いので安心な気がします。

Flex Tool Bar

tool-barだけだと面倒な設定を楽にしてくれるプラグイン的なパッケージです。このパッケージを入れるとcson、json、coffee scriptなどで設定が書けて便利です。

Atom Tool Barの基本設定

Atom Tool Bar (tool-bar)の基本設定はパッケージ一覧からアクセスできるtool-barのSettingsからできます。以下がここで設定できます。

  • ツールバーの表示・非表示
  • アイコンのサイズ
  • ツールバーの表示位置
  • 全幅を使う
  • TouchBarを使う(TouchBar搭載のMBPのみ)

設定ファイルでのボタンの設置

サンプルを見るのが一番早いと思うので、まずは僕の設定ファイル(toolbar.cson)をお見せします。

# This file is used by Flex Tool Bar to create buttons on your Tool Bar.
# For more information how to use this package and create your own buttons,
#   read the documentation on https://atom.io/packages/flex-tool-bar

[
  {
    type: "button"
    icon: "briefcase"
    iconset: "fa"
    callback: "project-manager:list-projects"
    tooltip: "Show Project List"
  }
  {
    type: "button"
    icon: "sitemap"
    iconset: "fa"
    callback: "tree-view:toggle"
    tooltip: "Toggle Tree View"
  }
  { type: "spacer" }
  {
    type: "button"
    icon: "git"
    iconset: "fa"
    callback: "github:toggle-git-tab"
    tooltip: "Git Control"
  }
  {
    type: "button"
    icon: "map-marker"
    iconset: "fa"
    callback: "minimap:toggle"
    tooltip: "Toggle Minimap"
  }
  {
    type: "button"
    icon: "arrows-h"
    iconset: "fa"
    callback: "editor:toggle-soft-wrap"
    tooltip: "Toggle Soft Wrap"
  }
  { type: "spacer" }
  {
    type: "button"
    icon: "angle-double-right"
    iconset: "fa"
    callback: ["pane:split-right-and-copy-active-item"]
  }
  {
    type: "button"
    icon: "angle-double-down"
    iconset: "fa"
    callback: ["pane:split-down-and-copy-active-item"]
  }
  { type: "spacer" }
  {
    type: "button"
    icon: "markdown"
    callback: "markdown-preview:toggle"
    tooltip: "Markdown Preview"
    hide: "!markdown"
  }
  {
    type: "button"
    icon: "pencil"
    callback: "flex-tool-bar:edit-config-file"
    tooltip: "Edit Tool Bar"
  }
  {
    type: "button"
    icon: "gear"
    callback: "settings-view:open"
    tooltip: "Open Settings"
  }
]

上から以下のボタンを設置しています。

  • プロジェクト一覧の表示
  • Tree Viewの表示・非表示
  • スペーサー
  • Git Tabの表示・非表示
  • Mini Mapの表示・非表示
  • Soft Wrapの切り替え
  • スペーサー
  • 右にペインを追加してアクティブなタブを表示
  • 下にペインを追加してアクティブなタブを表示
  • スペーサー
  • tool-barの設定ファイルを開く
  • Atomの環境設定を開く

設定ファイルの項目説明

Key 説明
type button、url、function、spacerから選べる。
button: ボタンの設置
url: デフォルトブラウザで指定のURLを開く
function: 関数の呼び出し
spacer: スペースを入れる
icon ボタンに使うアイコン名
iconset アイコンセット名。Octicons以外を使う場合は指定の必要あり。下の一覧から選べる
callback ボタンに設定するアクション
url typeにurlを指定した場合、開くサイトのURL
tooltip ボタンにマウスオーバーした時に表示されるツールチップ

使えるアイコンセット一覧

以下のアイコンセットからアイコンを選んで使えます。

  • Octicons (Atom’s flavour)
  • Ionicons (ion)
  • FontAwesome (fa)
  • Foundation (fi)
  • IcoMoon (icomoon)
  • Devicon (devicon)
  • MaterialDesignIcons (mdi)

以下のサイトで探せます(Devicon以外):

ボタンに設定するコマンド(アクション)の探し方

ググってもやり方が見つけられなかったので、独自の方法を思いつきました。みなさんどうやってやってるのか不思議です。。。

僕が思いついた方法は以下の通りです:

  1. ⌘ + ⇧ + Pでコマンドパレットを表示する
  2. ボタンに設定したいコマンドを入力して検索します
  3. コマンドが見つかったらマウスオーバーするとコマンドが表示されます

さいごにひとこと

以上、Atom Editorのtool-barパッケージの設定についてでした。ツールを自分好みにカスタマイズして使うの楽しいですねぇ。

Enjoy customizing your tools!

About the author

Rriverの竜(りょう)です。「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、東海岸のボストン近郊でウェブ制作を開始。帰国後、東京のウェブ制作会社に勤務。現在は組織のウェブ担当者として日英バイリンガルウェブサイトの運営に携わっています。より詳しくはこちら

記事へのコメントはもちろん、執筆・翻訳、レスポンシブなウェブサイト制作、コラボのご相談などもTwitter @rriver またはFacebook でお気軽にご連絡ください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です