解 説

高機能テキストエディタとして人気のSublime Textに代わる勢いのAtom。
Githubが提供するWeb開発用エディタです。その力は鉄腕アトムなみ。。

Atomのインストール〜Mac

Macへの導入で説明します。
Atomのページからダウンロードします。無料です。
zipファイルをダウンロードしたら展開して終わりです。
あとは、アプリケーションフォルダに入れればOKです。必要に応じてDockに設置すればよいでしょう。

基本的な使い方

新規ファイルを作成すると左サイドにファイル名が表示され、既存のファイルを開いた場合はフォルダ内が表示されます。
atom1

便利なコマンド

Ctrl + Shift + P

使い方がわからない。。コマンドは。。。と言うときはCtrl + Shift + Pで教えてくれます。
atom2

Option + Command + i

Atomは、Google Chromeのベースとなっている「Chromium」を使っています。そのため簡単にChromeの機能が使えます。デベロッパーツールの表示は「Option + Command + i」です。
*一見すごく便利な機能が使えると思いますが、これは編集している内容を表示するのではなく、エディタのレイアウトが表示されているだけです。

atom3

Setting 設定画面

メニューからPreferencesで設定画面が新しいタブで表示されます。ショートカットは「command + ,」です。Ctrl + Shift + Pで「settings View:Open」でも表示されます。

パッケージ

パッケージのインストールはsettingsの画面で行います。+installを選択するとInstall Packagesの画面になります。Search Packagesで必要なパッケージを検索すると早いです。

atom-browser-webview

atom-browser-webviewを導入するとAtomがブラウザに変わります。
atom4

Open-in-browser

Open-in-browserを導入すると右クリックメニューなどからAtomで編集中のページをブラウザで確認できます。

Remort-FTP

Remort-FTPを導入するとAtomで編集しながら即座にFTPでアップロードできます。
編集が終了して保存したらアップロードしてくれたりします。

下図は左サイドに新たなサイドが加わり、サーバーの階層を見せてくれます。
atom5

config設定例(さくらサーバーの場合)
atom6

Emmetの導入

Zen Codingの進化形であるEmmetを導入するとコーディングが楽になります。
AtomのパッケージのインストールからEmmetが導入できます。
htmlの拡張子で保存すれば使用できます。plain Text形式では当然使用できませんので、いったんhtml形式で保存して使用しましょう。

Emmetを導入するとcontrol+Eで行末移動ができなくなります。
Emmetではcontrol+Eで展開が優先になるのです。これは困りますので、キーを変更します。
変更方法はcommand+「,」でsettingsを開きます。下図のところをクリックするとkeymap.csonが開きます。
atom51
そこに次の内容を記述します。
[text]
‘.editor:not(.mini)’: ‘ctrl-e’: ‘unset!’
‘.editor:not(.mini)’: ‘ctrl-e’: ‘editor:move-to-end-of-line’
[/text]
atom52

これで行末移動ができるようになります。
emmetの展開はtabキーで展開します。

Emmetの独自snippetsを追加

DOCTYPE宣言と基本タグは一瞬で書けます。ビックリマーク(!)だけです。
これで以下の内容が書き出されます。

問題はlang属性がenになっている事です。
これをjaに変更するには以下の通りにします。
snippets.jsonを追加記述します。

Emmetのスニペット追加方法

Macの場合はcommand + 「,」でSettingを開きます。
左横に並ぶメニューから「Packages」を選択して「Install Packages」にemmetと入力すると「Community Packages」にemmetの設定パネルが表示されます。 「Settings」ボタンをクリックして設定画面に移ります。
emmet1

「Settings」の「Extensions Path」項目にsnippets.jsonファイルのパスを記述します。
例はMacの「書類」フォルダに置いたときのパスです。「tahara」部分を自分のHome名に変更してください。
emmet2

スニペットに追加したい内容をjson形式で記述します。次の例は「!」でHTMLの基本構文を作成したときにlang属性が “en”になるものを”ja”に変更したものです。さらに、「jq」の入力でjQueryのライブラリをCDNで読み込む内容を記述したものです。jsonでは”で値を囲みますが、その中で””が必要な場合は\でエスケープします。

あとはAtomを再起動します。うまく反映されないときはCommunity Packagesでemmetを選択して(上の図の③)一旦Disableにしてから再度Enableにすると反映される場合もあります。

日本語の折り返し

日本語が折り返しできずに横に長くなります。
japanese-wrapを導入すれば解決できます。
settingでinstall項目を選んで「japanese-wrap」を検索してインストールします。