Web制作を行う全ての方へ

増え続けるエディタの中からAtomを選んだので、設定したパッケージのリストと管理方法について書いておきます

ATOM

長らくSublime Textを使ってきたんですが、色々あってエディタを乗り換えようと思い、この度Atomを選択して色々と設定したので記事にしておきます。

  1. Atomを選んだ理由
  2. パッケージリストと管理について
  3. インストールしたパッケージの紹介
  4. 設定
  5. Githubでの公開
  6. 最後に

Atomを選んだ理由

理由としては

  • 周りで使っている人が増えている
  • オープンソース
  • EditorConfigに対応している
  • 日本語の扱いが結構良さそう

という点です。周りで使ってる人が多いとトラブル時や不明点などの、情報交換がしやすいので良いです。ネットで検索するというのは当然するんですが、なんか普段のコミュニケーションで、ここがね〜とかっていうやり取りが結構楽しかったりするんですよね。

オープンソースなので、いろいろな人がパッケージやテーマを開発して、それらを自由に使えるというのが醍醐味なので、これはポイントが高かったです。開発側に回るのもオープンソースだと簡単にできるのでそういうのも楽しいんですよね。

自分のために作ったものを誰かが利用して、それを勝手にもっと良くしてくれてというのがほんと素敵な世界で楽しいです。

EditorConfigという点は、上記のオープンソースということを考えると、もうこれがないとしんどいというか面倒くさいから、ないと選択したくないというレベルになってきます。

atom_04

EditorConfigが何かというと、Ginpeiさんのブログを読んでもらえば凄くわかりやすいんですが

様々なエディターで利用できる、共通の書式設定ファイルです。”.editorconfig”というファイルをプロジェクトのルートに配置しておくだけで、エンコード等の書式をそのディレクトリー配下のファイル編集時に固定できます。

EditorConfigで文字コード設定を共有して喧嘩しなくなる話。(Frontrend Advent Calendar 2014 – 14日目):Ginpen.com
http://ginpen.com/2014/12/14/editorconfig/

簡単に説明すると、文字コードをどうするか?改行コードは?インデントってどうするの?タブ?スペース?何文字分?と言った決まり事を口頭で説明するのではなく、このファイルに書いてプロジェクトのルートに含めておくだけで、そのプロジェクト以下のディレクトリは、すべてこのEditorConfigの設定に基づいて書式が決められるということです。

この取り決めを口頭で説明する手間と、ファイルによって間違ってしまうといった人的ミスを、たったこのファイルを用意するだけで解決できるという素晴らしいものなんですよね。

オープンソースの世界だとインターネット上の様々な人が開発に関わる可能性があるので、この取り決めをいちいちやってられないんです。でも、このファイルがあるだけで、開発者はそんなところを何も考えずにソースをかけるので、ホントストレスフリーなんですよね。素晴らしい!

これ知らなかった人は是非これから意識してみてください。オープンソースの世界じゃなくて、仕事のチーム内でもこれが有るだけで面倒くさいコミュニケーションがひとつ減るので、負荷が下がりますよ。

日本語の扱いが結構良さそうというのは、メニューが英語じゃいやだ!とかではなく、エディタに入力する日本語の表示、文字コードの扱いが割としっかりしてるという話を聞いたので選択したということです。

やっぱり僕は日本人なので、日本語を入力することが凄く多いので、ここが弱いと使っていてストレスなんですよね。

パッケージリストと管理について

手軽にプラグインやパッケージをインストール出来るツールはすごく便利なんですが、手軽にホイホイ入れていると、後々「何を入れたっけ?」ってなるんですよね。

AtomにはNode.jsのパッケージ管理ツールであるnpmのパッケージリストと同様のことが出来るapmというのが使えます。

こうやって書くと「何を言ってるのだお前は」状態になると思うので、一つ一つ説明していきます。

Node.js

Node.jsは高速でスケーラブルなネットワークアプリケーションを 簡単に構築するためにChrome の JavaScript 実行環境 上に構築されたプラットフォームです。 Node.jsはイベント駆動とノンブロッキング I/O モデルを使用することにより 軽量・効率的で、分散されたデバイスにまたがるデータ集約的なリアルタイム アプリケーションに最適です。

http://nodejs.jp/nodejs.org_ja/

要は、サーバーサイドプログラミングのJavaScriptです。ブラウザからWebサーバーにアクセスして非同期処理でデータベースへのアクセスと、Webサイトの表示が行えるので、ユーザーは画面の遷移といったストレスを感じることなく、リアルタイムに動的なWebサイトを閲覧することが出来ます。twitterやFacebookといったSNSでよく見かけますね。

npm

Node Packaged Modules(npm)とはNode.jsのライブラリやパッケージを管理することができるツールです。 ライブラリやパッケージの管理ツールを主にパッケージマネージャと呼びます。 パッケージマネージャを使うことで、使いたいライブラリの導入や削除を簡易にしたり、パッケージ同士の依存関係を管理することができます。

Node Packaged Modules(npm)とは : チームラボ
http://team-lab.github.io/skillup-nodejs/2/4.html

ターミナルやコマンドプロンプトといった、いわゆる黒い画面からコマンドを叩いてパッケージをインストールしたり、アップデートしたりするためのものです。Node.jsでは、これを使ってpackage.jsonに依存するパッケージを列挙しておいて、それらを管理することが出来ます。

apm

apmは上記のnpmと同じ使い方ができるAtom用のパッケージ管理ツールです。Atomをインストールすると自動的にapmもインストールされるので、すぐに使うことが出来ます。

Atomのプロジェクトはおそらく ~/.atmとか/usr/local/bin/apm になっていると思うので、黒い画面からディレクトリを移り、

$ apm list

とか叩くと結果が返ってきます。ちなみにこのコマンドは自分インストールしたパッケージのリストが表示されます。

他のコマンドは以下の様な感じです。

clean node_modules から package.json で参照されていないすべてのパッケージを削除する。
config apmのconfigを変更。
dedupe node_modules から重複しているものを削除する。
deinstall apm uninstall のエイリアス。
delete apm uninstall のエイリアス。
dev apm develop のエイリアス。
develop  指定されたパッケージのGitリポジトリを指定されたディレクトリにクローンし、その依存関係をインストールし、~/.atom/dev/packages/<package_name> にリンクをつくる。未指定なら ~/github/<package_name> にクローン。ATOM_REPOS_HOME でクローン先を変更できる。
 docs  指定されたパッケージの homepage をブラウザで開く。
erase apm uninstall のエイリアス。
featured https://atom.io/packages の featured に上がっているものを一覧表示する。
home apm docs のエイリアス。
init パッケージ・テーマ・言語の scaffold を生成する。
install 指定されたパッケージを ~/.atom/packages/<package_name> にインストールする。
link 指定されたパッケージのパスへのリンクを ~/.atom/packages につくる。パスが指定されなければ、カレントディレクトリを使う。
linked apm links のエイリアス。
links ~/.atom/packages と ~/.atom/dev/packages にあるパッケージのリンクを一覧表示する。
list インストールされたパッケージと Atom にバンドルされたパッケージを一覧表示する。
ln apm link のエイリアス。
lns apm links のエイリアス。
login atom.io の token を入力し、キーチェインに保存する。 atom.io に publish するときにユーザーを識別するのに使う。
ls apm list のエイリアス。
open apm docs のエイリアス。
outdated apm upgrade のエイリアス。
publish カレントディレクトリのパッケージの新しいバージョンを atom.io に publish する。
rebuild node_modules にインストールされたモジュールすべてをリビルドする。
rebuild-module-cache ~/.atom/packages にインストールされたすべてのパッケージのモジュールキャッシュをリビルドする。
remove apm uninstall のエイリアス。
rm apm uninstall のエイリアス。
search Atom パッケージ・テーマを atom.io から検索する。
show apm view のエイリアス。
star 指定されたパッケージに atom.io のスターをつける。
starred apm stars のエイリアス。
stars スターをつけた Atom パッケージ・テーマを一覧表示またはインストールする。
test spec に含まれるパッケージのテストを動かす。
uninstall ~/.atom/packages にインストールされたパッケージを削除する。
unlink 指定されたパッケージのパスへのリンクを ~/.atom/packages から削除する。パスが指定されなければ、カレントディレクトリを使う。
unpublish publish されたパッケージやバージョンを atom.io から削除する。
unstar 指定されたパッケージのスターをはずす。
update apm clean し apm install する。
upgrade インストールされた古い (out of date) パッケージをアップグレードする。
view パッケージ・テーマの情報を表示する。

apm のコマンド一覧:Qiita
http://qiita.com/bouzuya/items/c57241b97cd063dd9279

パッケージリスト

で、肝心なパッケージの管理についてですが

$ apm list --installed --bare > packagelist.txt

と叩けば、リスト書きしたテキストデータが吐き出されます。

$ apm install --packages-file packagelist.txt

と叩くことで、吐き出しておいたパッケージリストに記述されているパッケージやテーマを一気にインストールできます。

なので、他人に自分の環境を渡したい場合なども、上記のコマンドでファイルを吐き出しておいて、それを渡してコマンドを実行してもらえば、同じ環境ができあがります。便利ですね。

注意点としては、npmの場合だとこういったパッケージのリストは自動的に吐き出されるのですが、Atomの場合は自動では吐き出されないので、必要に応じて自分でコマンドを叩く必要があります。

また、これ以外の方法にも、気に入ったパッケージにStarをつける機能があるんですが、Atomには、この自分がStarをつけたパッケージを一括でインストールできるという機能があって、それも便利です。

$ apm stars --install

これでStarをつけたパッケージを一気にインストールできます。

また、Starなんて使ってなかった!という場合、インストールしているパッケージに一括でStarをつけるコマンドも有ります。

$ apm star --installed

実行するとトークンを聞かれるので、 https://atom.io/account にてトークンをコピーして貼り付ければ実行されます。

逆にアンインストールしたパッケージのStarを外すには

$ apm unstar atom-color-highlight

を叩けばOKです。

インストールしたパッケージの紹介

今回実際にインストールしたパッケージです。

上記EditorConfig で説明したもの​

atom-beautify ソースコードを見やすくしてくれる。
autocomplete-php phpのオートコンプリート機能
autocomplete+ paths suggestions 相対パスの画像ディレクトリにあるファイルをサジェストで出してくれます。
EditorConfig  上記で解説したもの
emmet AtomでEmmetを使えるようにするもの。Emmetを使うと

dl>(dt+dd>a)*3

とhtmlファイルに記述してから Ctrl+e を押すと

<dl>
<dt></dt>
<dd><a href=””></a></dd>
<dt></dt>
<dd><a href=””></a></dd>
<dt></dt>
<dd><a href=””></a></dd>
</dl>

と展開されます。

file-icons Atomのタブ上に表示されるiconを可愛くしてくれる。
git-plus Atomから直接Gitコマンドが叩ける
highlight-line アクティブの行をハイライトしてくれる
highlight-selected 選択したタグに対する閉じタグ、同じ変数名等をハイライトしてくれる
jquery jQueryのスニペット
merge-conflicts gitでコンフリクトを起こした時に、マージ作業をしやすくするためのもの
minimap sublime Textの右側についているソースマップをAtomでも再現するもの
minimap-autohide スクロール時はミニマップを表示し、コードを書いてる時は自動的にミニマップが自動的に隠れてくれる。
minimap-bookmarks 気になって入れたんですが、使い方がわかりません…。このままわからなかったら消してしまいそう。
bookmarkを付ける機能がAtomに標準に備わっていて、そのつけたbookmarkをつけた箇所をminimapに表示させるものです。bookmarkをつけるには以下コマンドで。現在の行をBookmarkする/外すcommand+F2次のBookmarkへ飛ぶF2 

前のBookmarkへ飛ぶ

shift+F2

project-manager  プロジェクトを追加して保存しておくことが出来る。エディタを閉じても、保存したプロジェクトは簡単に呼び出せるので便利。

command+o

でプロジェクトを開き、メニューの Packages > Project Manager >  Save Projectで保存。
呼び出すときは

command + control + p

tag htmlのとじタグを option+command+. で出力する。
wordpress WordPressの書式を吐き出せる。

loop

と書いた後tabキーで展開すると
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php // Individual Post Styling ?>
<?php endwhile; ?>
<?php // Navigation ?>
<?php else : ?>
<?php // No Posts Found ?>
<?php endif; ?>

wordpress-dictionary WordPressのスニペット みやさん(@miya0001)が作ってるのを見つけた

パッケージのインストールはメニューの

Atom > Preferences からSetting画面を開き、左のメニューにある install から行います。

セッティング画面

ちなみに僕は atom-material-syntax-dark というテーマを使っているのでこういう見た目になっています。

テーマをインストールしたい場合は、上記画像でPACKAGES という緑色のボタンの横にあるTHEMESをクリックし、検索モードを切り替えて検索します。

インストールしたパッケージは、Setting画面の左側にあるPackagesに移動して確認できます。(テーマの場合はThemes)

atom_02

設定

キーバインドとか色々出来ることあるんですが、それはおいおいやっていくとして、ひとまずやったものだけ。

不可視情報の表示

デフォルトだと半角スペースやタブといった不可視情報は何も表示されずに見づらいので、不可視情報を見えるようにします。

Atom > Preferences からSetting画面を開き、Show Invisibles のチェックが外れていると思うので、チェックを入れればOKです。

フォントの変更

Sublime Textで Source Han Code JP を使っていたので、Atomでもこれを設定。

同じく設定画面のFont FamilyにSource Han Code JPと書き込みすればOK。ついでにフォントサイズも15に設定。

Githubでの公開

.atom以下のディレクトリやファイルをGithubにあげたので、これでいつでも戻せます。

atomcy – setting for Atom
https://github.com/yat8823jp/atomcy

使い方

  1. Atomのインストール https://atom.io/
  2. cd ~/.atom
  3. apm install --packages-file packagelist.txt

最後に

Sublime Textの時にも感じましたが、このタイプのエディタは、プラグインを色々いれたり、テーマを変えてみたり、設定を触ってみたりと、カスタマイズしていくことでより使いやすくなっていくエディタです。自分に合うにはどうカスタマイズすれば良いのか?どういうプラグインがあるのか?を調べていくことが出来るか?で、自分に合うか、合わないかを決められるのではないかな?と思います。

ここを苦と感じない人であれば、凄く使いやすいエディタになると思います。ただ、個人的に少し重たい?と感じるので、それが無くなったらより良くなるなと感じています。

とはいえ、以前よりやりやすくなったので、今はATOMに満足しています!

2016年3月11日追記:プラグインのminimap-bookmarksについて使い方がわからなかったのですが、こさりん( @cosarin ) に教えてもらったので追記しました。ありがとう!

お役に立てたらお願いします🙇

Kyashで送金する

Ad



Share