Atom(GitHub製エディタ)に乗り換えて最初にやっておきたいこと

GitHub製の開発者向けエディタである「Atom」を利用している人も増えてきました。自分もこれまで使っていたSublime TextからついにAtomに乗り換えました。乗り換えを決意してから、いろいろ調べたり、試したりしながら少しずつ自分仕様にカスタマイズし、やっと使える状態になってきたところです。そうした中で大事だと思ったAtomを使うための初期知識を共有できればと思って今回記事にしてみました。

atom
Atom

Atomに乗り換えた理由

Atom画面イメージ
Atomの画面(いい感じです!)

私がAtomに乗り換えたのは、ずばり以下の3つの理由からとなります。

  • 無料
  • パッケージが豊富
  • GitHub製という安心感

これまでSublime Textを使っていましたが、Sublime Textは有料で70ドルします。この支払いを保留しながら使い続けることもできますが、何とも言えないモヤモヤ感があります。Atomにすることで、このモヤモヤ感から完全に解放されます。それだけでもAtomに移行する価値はあったかなと思います。

それから、Atomはパッケージというプラグインのようなものをインストールして機能を拡張して使いますが、その種類が豊富であり、すでに現時点で1,800を超えるパッケージが公開されています。また、AtomはGitHubが開発しているということもあり、github.comとの親和性が高いのはもちろんのこと、開発者の気持ちを理解して開発されているということが随所に見られるエディタとなっています。

Atomを導入する

Atom導入の際に参考にしたもの

Atom導入に当たり、以下を参考にしました。特に『WEB+DB PRESS』のATOM特集の記事はとても内容が濃くて、すごくタメになりました。

WEB+DB PRESS Vol.86
  • 『WEB+DB PRESS Vol.86』
  • 著者: 結城洋志, 沖元謙治, 足永拓郎, 林健太郎, 大竹智也, 内田誠悟, その他
  • 出版社: 技術評論社
  • 発売日: 2014年4月23日
  • ISBN: 4774172480

AtomをMacにインストール

Atomのインストールは簡単です。Atomの公式サイトから「atom-mac.zip」ファイルをダウンロードします。zipファイルを解凍したら、「Applications」フォルダにドラッグします。これでAtomのインストールは完了です。

Atomを起動して、「command + shift + p」でコマンドパレットを開き、「Window: Install Shell Commands」と入力して実行します。そうすることにより、Macのターミナルから[atom]コマンドと[apm]コマンドが使えるようになります

Sublime Textをアンインストール

これからAtomを使うと決めたので、これまで使っていたSublime Textは思い切ってMacから完全に削除しました。Sublime Textに紐付いているファイルが多いので、ファイルを開くとSublime Textが起動して、結局Sublime Textで作業するということを防ぎたかったので。

Proxyを設定

会社の環境はProxy認証の必要なWindows 7で、Atomのテーマやパッケージをインストールして使うにはProxyの設定が必要でした。proxyを設定するには、.atomディレクトリ直下に.apmrcファイルを作成し、以下を記述します。

https-proxy = http://[認証ID]:[パスワード]@[proxyのURL(ホスト)]:[ポート番号]
~/.atom/.apmrc

またはコマンドから直接登録してもよいです。

$ apm config set https-proxy http://[認証ID]:[パスワード]@[proxyのURL(ホスト)]:[ポート番号]

ここで注意すべきは、proxyのプロトコルをsslでも「http」と記述することです。「https」と記述した場合、パッケージをインストールしようとすると、以下のようなエラーが出てしまいました。

atom proxy error
tunneling socket could not be established, cause=5140:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:openssl\ssl\s23_clnt.c:795:

Firewallのせいでsslのエラーが出る場合は、さらに以下を.apmrcファイルに追記します。

strict-ssl = false
~/.atom/.apmrc

[参考]

それでもエラーが出る場合は、以下の環境変数の設定をお試しください。

メニューの日本語化

自分は英語のまま使っていますが、念のため紹介しておきます。Atomのメニューを日本語化するには、以下のパッケージを使うとよいようです。メニューバーとコンテキストメニューを日本語化してくれるとのことです。(パッケージのインストール方法は後半部分で紹介します。)

Atomのメニューの日本語化

Atomの基本操作を覚える

Atomの起動

Atomはターミナルからコマンドを叩いて起動することができます。プロジェクトのディレクトリに移動して、以下のようにカレントディレクトリのパスを指定して[atom .]コマンドを実行すると、プロジェクトのフォルダとファイルの全てをツリービューに表示した状態で起動し、とても作業がしやすくなります。

$ cd project_dir
$ atom .

atomコマンドの詳細については、以下のコマンドでご確認ください。

$ atom -h

基本設定(Settings)

Atomの設定ファイルは、.atomディレクトリ直下の「config.cson」ファイルとなります。直接このファイルをいじってもよいですが、基本的な設定はAtom内でも行えます。Atomメニューの「Preference…」(WindowsならFileメニューの「Settings」)または「Command(Ctr) + ,」でAtomの環境設定画面(Settings)が開きます。

Atom Settings画面
Atomの設定画面

今回自分が行った設定内容を紹介します(といってもほとんどデフォルトのままですけど…)。

  • Show Indent Guideに「チェック」: チェックを入れるとインデントガイドが可視化されます。
  • Show Invisibleに「チェック」: チェックを入れると半角スペースなどが可視化されます。
  • Font sizeを「13」: 文字サイズ。デフォルトは「16」。若干小さくしました。
  • Line Heightを「1.4」: 行間。デフォルトは「1.3」。若干広げました。

キーバインド(ショートカットキー)を覚える

Atomはさまざまなキーバインドを駆使して操作します。登録されているキーバインドは、設定画面(Settings)の「Keybindings」、またはコマンドパレットから「Settings View: Show Keybindings」コマンドで確認することができます。

Atom キーバインド確認画面
Atomのキーバインド確認画面

キーバインドはかなりの数あるので、最初から一気に覚えるのは大変です。よく使いそうなキーバインド(Mac用)として以下を紹介しておきます。

  • command + shift + p: 「コマンドパレット」を開きます。おそらく一番使うであろうキーバインドです。
  • command + ,: 「設定画面」を開きます。これもパッケージのインストール時などよく使います。
  • command + k 矢印キー: 画面を矢印キーの方向に分割します。
  • command + w: 分割した画面を閉じます。

ちなみにキーバインドは自分で好きなように設定することもできます。キーバインドの設定は.atomディレクトリ直下の「keymap.cson」ファイルで行います。詳細は以下を見てください。

文字コードと使用言語を指定する

Sublime Textの文字コードはUTF-8のみの対応でしたが、AtomはUTF-8以外の文字コードも扱うことができます。新規でファイルを作成したら、画面右下で「文字コード」と扱う「プログラミング言語」を指定します。

atom 文字コード、使用言語の指定
文字コード、使用言語の指定

.atomディレクトリを開く

Atomの初回起動時に「.atom」ディレクトリがホームディレクトリ直下に作られます。「.atom」ディレクトリにはAtomの設定やカスタマイズに必要なファイルが入っています。このディレクトリはSettingsのページの左メニューの下にある「Open Config Folder」ボタン(Windowsだと「Open ~/.atom」ボタン)を押して開くことができます。各種設定ファイルを直接いじる時などに使うと思うので、覚えておくとよいと思います。

.atomディレクトリを開く
.atomディレクトリを開く

テーマを設定する

Atomでは「UI Theme」「Syntax Theme」の2つのテーマを自由に設定することができます。

  • UI Theme: メニューや設定画面など編集画面以外に適用されるテーマ
  • Syntax Theme: 編集画面に適用されるテーマ

自分はSublime Textで使っていた「Monokai」というテーマが好きなので、Syntax Themeには「Monokai」をインストールして適用させました。UI Themeはデフォルトの「Atom Light」のままにしています。自分の場合は好みのテーマにするだけで、やる気が全く異なってくるので、テーマの設定は重要だと思っています。

monokai theme
Syntax Theme: Monokai

テーマを探す

Atomのテーマは以下に公開されています。2015年5月8日現在597ものテーマが登録されているので、目当てのテーマをまずは探します。UI Themeであれば「-ui」、Syntax Themeであれば「-syntax」がテーマ名の末尾についている場合が多いです。

テーマをインストールする

テーマのインストールは、設定画面から行います。目当てのテーマが見つかったら、「Command + ,」で設定画面を開き、左メニューの「+install」をクリックしてインストール画面を開きます。インストール手順は以下の通りです。

atom - テーマをインストールする
Atomテーマのインストール手順

テーマを設定する

テーマをインストールしたら、Atomにテーマを適用させます。再び設定画面にて、左メニューの「Themes」をクリックしてテーマの設定画面を開きます。テーマの設定手順は以下の通りです。UI Theme、Syntax Themeそれぞれを選択して適用させることができます。

Atom テーマの設定手順
Atomテーマの設定手順

Syntax Themeを適用させたいプログラミング言語を指定する場合(シンタックスハイライトを変更する場合)は、画面右下の「言語選択リンク」をクリックするか「Control + Shift + l(エル)」キーを押します。

パッケージをインストールする

Atomの強力な仕組みがこのパッケージです。パッケージを追加することで、Atomの機能を強化していくことができます。パッケージはテーマと同じく以下に公開されています。2015年5月8日現在1,869ものパッケージが登録されています。かなり豊富です。

パッケージをインストールする

パッケージのインストールはテーマと同様Atomの設定画面から行います。目当てのパッケージが見つかったら、「Command + ,」で設定画面を開き、左メニューの「+install」をクリックしてインストール画面を開きます。インストール手順は以下の通りです。

Atom - パッケージのインストール
Atomパッケージのインストール手順

コマンドでパッケージをインストールする

パッケージは、[apm]コマンドを使ってインストールすることもできます。[apm]コマンドは、上でも述べた通り「command + shift + p」でコマンドパレットを開き、「Window: Install Shell Commands」と入力して実行することで使えるようになります。

以下のように[apm install パッケージ名]でインストールします。

$ apm install atom-color-highlight
Installing atom-color-highlight to /Users/maechabin/.atom/packages ✓

手動でパッケージをインストールする

proxyの設定がうまくいかず、どうしてもパッケージがインストールできない場合もあります。そうした場合は「手動」でインストールします。パッケージの詳細ページの「Repo」をクリックするとGitHubのページに飛ぶので、そこからパッケージをダウンロードします。

Atom PackagesのGitHubページ
Atomパッケージをダウンロードする

ダウンロードしたパッケージを「.atom」ディレクトリ内の「packages」ディレクトリに移動させると、Atomに反映されます。

パッケージを使ってみる – おすすめパッケージ12

実際に自分がインストールしたパッケージを紹介します。使い方やキーバインド、コマンドなどはそれぞれのパッケージの詳細ページにてご確認ください。

term2

Atomの画面内にターミナルを組み込むパッケージです。自分の中では使用頻度No.1のパッケージです。画面を分割して、ターミナルを編集画面の隣に出しておくことで、GruntやGulpなどのタスクランナーの実行、テストの実行、Gitコマンドの実行などが簡単に行えるようになります。複数のタブで開いておくこともできます。

それから、term2の秀逸な点として現在開いているプロジェクトのディレクトリをカレントディレクトリとして起動してくれます。cdで移動する必要がなく、起動したらすぐにコマンドを打つことができます。(一つ残念なことにコピペしようとするとエラーが出ます。)

atom-term2
term2

起動コマンド [Term2: Open]

markdown-preview

Markdownファイルをリアルタイムでプレビューしてくれるパッケージです。GitHubのREADME.mdなどMarkdown形式でドキュメントを書くことが多い方には、とても役立つパッケージです。このパッケージはデフォルトでインストールされているコアパッケージです。

atom-markdown-preview
markdown-preview

起動コマンド [Markdown Preview: Toggle]

japanese-wrap

日本語を折り返してくれるパッケージです。上記のmarkdown-previewを起動すると、画面が左右に2分割されます。画面のサイズによっては、1行に入力した文字がmarkdown編集画面サイズに収まりきらない場合があります。現在Atomでは日本語の折り返しがうまく機能していないため、このパッケージを入れて対処させます

minimap

Sublime Textでお馴染みのソースの全体図を画面内に表示してくれるパッケージです。

atom - minimap
minimap

file-icons

ツリービューやタブに表示されているアイコンをファイルの拡張子に合わせてパッと見で把握しやすいものにしてくれるパッケージです。

atom-file-icons
file-icons

open-on-github

開いているプロジェクトのGitHubのリポジトリページやファイルのページなどを表示してくれる地味に便利なパッケージです。このパッケージはデフォルトでインストールされているコアパッケージです。

open-on-githubコマンド一覧

  • [Open on GitHub: Repository] github.com上のリポジトリを開く
  • [Open on GitHub: File] github.com上のファイルを開く
  • [Open on GitHub: Blame] github.com上のファイルのBlame Viewを開く
  • [Open on GitHub: History] github.com上のファイルのHistory Viewを開く
  • [Open on GitHub: Branch Compare] github.com上の現在のブランチの比較ページを開く
  • [Open on GitHub: Copy Url] 現在選択している行番号を含んだgithub.comのURLをコピーする

autocomplete-plus

自動補完機能を強化してくれるパッケージです。Atomにはコアパッケージとしてautocompleteというパッケージが最初からインストールされていますが、使用するにはコマンドを実行する必要があります。autocomplete-plusを入れることで、コマンドを実行しなくても自動補完機能が使えるようになります

atom-autocomplete
autocomplete-plus

linter

タイポなどを防ぐための文法チェックを行ってくれるパッケージです。文法チェックを行いたい言語の追加パッケージをインストールして使います。対応している追加パッケージは、linterの詳細ページに記載されています。例えば、JavaScriptの文法チェックを行いたい場合は、linterと一緒にlinter-eslintをインストールします。

atom-linter
linter

script

Atom内でスクリプトを実行してくれるパッケージです。例えばJavaScriptであったらブラウザで実行して確認したりしますが、このパッケージを使えばAtomだけでそのまま実行して確認することができます。サポートしている言語も30以上となかなか役立ちます。

起動コマンド [Script: Run]

atom - script
script

preview

altJSやCSSプリプロセッサなどコンパイルの必要な言語の出力結果をリアルタイムで表示してくれるパッケージです。CoffeeScriptやLess、Jadeなど現在11の言語をサポートしています。ただ自分のよく使うSassのサポートはまだのようです。

atom-preview
preview

起動コマンド [Preview: Toggle]

run-in-browser

開いているファイル(.htmlまたは.htm)の画面(Pane)上でこのパッケージを以下のコマンドまたはキーマップで起動すると、デフォルトのブラウザでファイルを開いてくれます。対象となるファイルは.html.htmの2つに限られますが、これが意外と便利なパッケージです。

起動コマンド [rib: Run In Browser] / Keymap [ctrl + alt (option) + r]

local-server-express

上記のrun-in-browserと似ていますが、こちらは以下のコマンドまたはキーマップでパッケージを起動すると、開いてるプロジェクトのルートが”/”とになった状態でローカルサーバーを起動し、デフォルトのブラウザでファイルを開いてくれます。ルーティングなどを手軽に試せるので、とても便利なパッケージです。

起動コマンド [Local Server Express: Run] / Keymap [ctrl + alt (option) + command + s]

Atomのパッケージや設定ファイルを他の環境でも使えるようにしておく

インストールしたテーマやパッケージ、設定内容を他の環境でも使えるようにしておくことをお勧めします。他の環境で使うたびに、設定ファイルをいじって、パッケージを検索して、インストールしてなどを繰り返すのは大変面倒です。そこでGitHubに設定ファイル(dotfiles)を置いて管理するようにします。また、パッケージだけならAtomのスターを使うことで管理することができます。

詳細は以下の記事にまとめました。こちらと併せて参考にしてください。

まとめ

まだまだ全然紹介しきれませんが、とりあえずAtomをインストールした時に自分が行ったことをまとめてみました。設定していく上でAtomのドキュメントを見たり、他のブログなどを見たりしていると、さらにいろんな使い方なども覚えていけると思います。いろいろ設定して自分仕様にしていくと、かなり愛着も湧いてくると思います。

AtomはすべてHTML、CSS、JavaScriptなどWebの技術でできています。Chromiumがベースとなっているので、Chromeでお馴染みのDeveloper Toolsも起動可能だったりします。テーマやパッケージなどもWebの技術さえ知っていれば自分で作ることもできます。自分もその辺挑戦していけたらと今思っているところです。

今の所Atomに関する書籍はまだ発売されていないようですが、上記でも紹介した『WEB+DB PRESS』のAtomの特集記事は大変詳しくて、これだけでも十分じゃないかというくらいの内容になっています。ぜひこちらも参考にしてもらえらばと思います。

WEB+DB PRESS Vol.86
  • 『WEB+DB PRESS Vol.86』
  • 著者: 結城洋志, 沖元謙治, 足永拓郎, 林健太郎, 大竹智也, 内田誠悟, その他
  • 出版社: 技術評論社
  • 発売日: 2014年4月23日
  • ISBN: 4774172480

スポンサードリンク

コメント一覧

  • 必須

コメント