Atomの使い方 | IT工房｜AI入門とWeb開発

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

Atomのインストール〜Mac
基本的な使い方

Atomのインストール〜Mac

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

基本的な使い方

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

便利なコマンド

Ctrl + Shift + P

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

Option + Command + i

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

Setting 設定画面

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

パッケージ

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

atom-browser-webview

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

Open-in-browser

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

Remort-FTP

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

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

config設定例（さくらサーバーの場合）

Emmetの導入

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

Emmetを導入するとcontrol+Eで行末移動ができなくなります。
Emmetではcontrol+Eで展開が優先になるのです。これは困りますので、キーを変更します。
変更方法はcommand+「,」でsettingsを開きます。下図のところをクリックするとkeymap.csonが開きます。

そこに次の内容を記述します。

'.editor:not(.mini)': 'ctrl-e': 'unset!'
'.editor:not(.mini)': 'ctrl-e': 'editor:move-to-end-of-line'

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

Emmetの独自snippetsを追加

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

</body>
</html>

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

Emmetのスニペット追加方法

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

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

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

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

{
    "variables": {
        "lang": "ja",
        "locale": "ja-JP"
    },
    "html": {
      "abbreviations": {
        "jq": "<script src=\"<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>\"></script>"
      }
    }
}