[徹底解説] Atomの使い方から基本まで
ホームページ作成に欠かせないのが、HTMLを記述するためのテキストエディタです。
テキストエディタは世の中に無数に存在しています。今回はその中でもAtomというテキストエディタをインストールし、設定するところまでを紹介いたします。
Atomはダウンロード、インストール、使用に関して料金が発生することはありません。自由に使えるという意味でフリーソフトという種類に属しています（この「フリー」は「無料」ではなく「自由」という意味です）。
15〜6年ほど前（2000年初頭）は個人が好きなエディタを使い、誰もが口を出さないという暗黙のルールがありましたが、当時と比べると最近では、個人が気に入ったテキストエディタをインストールすると言うより、チームで選んだエディタ1つに選定し、お互い情報共有しながら使い勝手を向上していくという流れが普及しつつあります。
利点としては、複数人数で分担された状態で機能を使いこなすことにより、全体の作業効率を上げられる事や、各種エディタを統一することによる環境依存問題の回避などがあります。そういった時に選ばれるテキストエディタの一つがこのAtomです。
Atomとは
Atomとは、ホームページ制作に特化しているテキストエディタです。
もちろんテキストエディタですので、ブログ用の記事の下書きで使ったり、プラグインで機能を拡張し、図形描写をさせることなんかも出来ます（図形は専用のラリブラリをインストールしておく必要があります）。
テキストエディタとワープロの違いをよく質問されます。どちらも文字を記述するためのソフトですが、根本的に用途が全く違います。
ワープロは装飾しながら文章をレイアウト配置していくソフトです。つまり、新聞の様な見た目を作ることが出来ます。
テキストエディタは文字だけを記述します。装飾やレイアウトなどは一切関係ありません。新聞に対する原稿用紙という感じでしょうか。
つまりプログラムやHTMLなどの言語を記述するためには、レイアウト情報や装飾情報などが含まれない、文字だけのテキストエディタが都合の良いソフトということになります。ワープロでHTMLを記述しても、HTMLとして表示されませんのでご注意を。
テキストエディタはお箸やボールペンなど、直接手で触るものに感覚的に近く、人によって手に馴染むものとなじまないものがあります。Atomは比較的多くの人に受け入れられていますので、まずは早速使ってみましょう。
Atomのインストール
Atomのインストールは非常に簡単です。ダウンロードしたファイルを解凍後、アプリケーションフォルダに移動するだけです。
まずは以下のサイトからAtomをダウンロードします。
Atomの公式サイトが表示されたら、「Download」をクリックして下さい。自動的にMac用のファイルがダウンロードされます。
ダウンロードされる場所は、特に指定しなければ、「Downloads」という場所に入ります。デスクトップを一度クリックし、[Command] + [Shift] + [H]キーを押してファインダーを表示し、左側列に表示された「Downloads」をクリックして選択すると、ダウンロードされる場所の中身を確認出来ます。
「atom-mac.zip」というファイルがダウンロードされます（このファイル名は将来は別の名前に代わっているかも知れません）。最後の「.zip」という部分は拡張子と呼ばれ、ファイルがどんな種類なのかを表しています。「zip」は圧縮ファイルという形式ですので、一度解凍しなければなりません（最近は「解凍」より「展開」という表現もよく使われます）。
ダウンロードしたファイルをダブルクリックして解凍しましょう。同じ場所に「Atom.app」というファイルが出来ました（解凍前のzipファイルはそのまま残ります）。この「Atom.app」がAtom本体です。
「Downloads」に解凍されましたので、「アプリケーション」へ移動必要があります。この移動自体がインストールになります。インストールで移動する方法ですが、Atom.appをマウスクリックしっぱなしで、そのまま左側列の「アプリケーション」の上に重ねて下さい。この重なった状態で指を離すと、フォルダに移動されます（この作業の様に、掴んで離すことをドラッグ＆ドロップといいます）。
これでインストールは完了です。インストールされたAtomを起動するには、アプリケーションフォルダからAtomアイコンをダブルクリックしてください。
アプリケーションフォルダはデスクトップを一度クリックし、[Command] + [A]で簡単に開くことができます。画面下部にあるドックに登録しておくのも便利です。
テーマの変更
Atomでいうテーマというのは、見た目の色合いのことです。人によって見やすい背景色、文字色が違いますし、長時間使うソフトでもあるので、目に優しいものを選ぶと良いでしょう。
有志がつくったテーマをインストールすることもできますが、ここでは予め用意されているインストール済みのテーマを選択します。インストールされていないテーマはAtom内から検索できますし、同じくAtom内だけでテーマのインストールが完結できます。こちらの外部テーマのインストールに関しては今回は割愛させていただきます。
まずはAtomの設定画面を開きましょう。Atomの設定画面を開くには、[Command] + [,]ボタンを押します。セッティングタブが表示されますので、左側メニューに表示されている「Themes」をクリックします。このタブの一番上には「Choose a Theme」という項目があります。ここでテーマの選択ができます。
テーマには「UI theme（UIテーマ）」と「Syntax Theme（シンタックステーマ）」の２種類を設定することができます。「UI Theme」はユーザインタフェースのテーマ、つまりAtom全体のテーマになります。「Syntax Theme」は文法的テーマ、つまり文字を入力する画面の背景色や、特定の文字の色分けをしたりする場合に使われます。
「Syntac Theme」は文章で説明するとわかりにくいので、実際に作業を進めていき、途中で変更してみるとわかりやすいかもしれません。
下にいくつかテーマを適用したスクリーンショットを用意したので、テーマ選択の参考にしてみて下さい。
今回は「UI Theme」「Syntax Theme」両テーマともに「One Dark」にしてみました。テーマの変更は直後に反映されます。
プラグインのインストール
Atomには基本的な機能が予め用意されており、インストールした直後から便利な機能を使うことができます。
しかし、一部の機能は更に拡張されたものが存在し、必要に応じて個人がインストールして使えるようになっています。もちろんAtomに最初から存在しない機能を追加する事も可能です。
これらの機能を追加できる仕組みをプラグインと呼びます。どんなプラグインがインストールできるのか、いくつか代表的なものを紹介致します。
- Emmet
- HTML入力支援機能
- 最低限の入力だけでHTMLを記述できる
- 慣れてくると従来の5倍の速度で入力が可能と言われている
- Markdown Preview Enhanced
- Markdown形式で記述されたテキストのプレビュー
- 数式や楽譜、グラフなどの図形描写などもできる
- Atom本体の「Markdown Preview」は無効にすること
- Project Manager
- 開いたフォルダの状態を記憶してくれる
- 状態に名前をつけていくつも保存が可能
- いつでも状態を読み込ませることができる
- Sublime Style Column Selector
- 矩形選択が可能になる
- optキーを押しながらドラッグすると矩形選択が可能になる
他にもインストール出来るプラグインは何百個もありますので、気に入ったプラグインはどんどんインストールして使い勝手を良くしていけば良いかと思います。プラグインはインストールするのも外すのもAtom上から簡単に行なえます。
さて、今回は上記で説明した、「Emmet」というプラグインをインストールしてみましょう。[Command] + [,]で設定画面のタブを開きます。開いたら左側にあるメニューから「Install」を選択します。
タブには「Install Package」という項目があり、その下に検索窓が一つ用意されています。ここに、インストールしたいプラグイン名の一部を入力し、検索窓の横にある「Packages」ボタンをクリックすると、入力されたキーワードを含むプラグインが検索されます。「Emmet」と入力し、検索して見ましょう。
名前に「Emmet」を含むプラグインが幾つか画面に表示されたと思います。今回インストールするのは「Emmet」ですので、「emmet 2.4.3」と書かれたパレット内にある「Install」ボタンをクリックします。
インストールが終わると、「Settings」「Uninstall」「Disable」の3つのボタンが表示されます。これは左から説明すると、以下のような意味になります。
- Settings
- このプラグインで変更可能な設定画面を表示する
- Uninstall
- このプラグインを削除する
- Disable
- 一時的にプラグインの機能を無効にする
- Enableボタンに代わる
- Enableボタンをクリックすると機能が有効状態に戻る
今回は特にこれらのボタンは使いませんので、意味だけ覚えておいて下さい。
これでインストールは完了です。それでは早速Emmetを使ってみましょう。まずは新規ファイルを開きます。[Command] + [N]か、「File」→「New File」で新規ファイルを開けます。
開いたら画面に半角で「!」とだけ入力してください。日本語入力モードではなく英数モードです。
もし日本語になってしまったら一旦キャンセルし、[英数]キーで英数モードにしてください。
その後[Control] + [E]を押してみてください。「!」が変換され、一気にHTMLのベースが自動で記入されました。
[Control]キーはキーボードの一番左側の列にあります。[Command]ではないので注意してください。
次はカーソルを「body」タグ内の任意の位置まで移動し、今度は「p.top」と入力してみてください。
同じ様に[Control] + [E]で変換すると、「<p class=”top”></p>」に変換され、更に内部のテキスト記述部分までカーソルが自動で移動してくれます。
Emmetの記法はこれだけではありません。以下のサイトを参考に、いろいろ試してみてください。計算させてクラス名の数字を増やしながら複製することなんかもできたりします。
さて、せっかくテーマを設定したのに、文字は全て白いままです。
でも安心してください。ファイルを一度保存すると、瞬時に「Syntax Theme」が適用されます。[Command] + [S]でデスクトップなどに「index.html」というファイル名で保存してみてください。
保存が終わると即座にテーマが適用されます。
キーバインドの設定
今回インストールした「Emmet」ですが、キーバインド（キーの組み合わせ）が[Control] + [E]となっています。人によってはこの[Control]が押しにくいというケースもありますので、ここでは好きなキーバインドに変更する方法を説明したいと思います。
[Control] + [E]を、[Command] + [Shift] + [E]にしてみましょう。
まずは[Command] + [,]で設定画面を開きます。
設定画面左側メニューから「Keybindings」を選択すると、タブがキーバインドの一覧に変わります。
ここではキーバインドやプラグイン名で検索ができますので、検索窓に「ctrl-e」と入力してみましょう（「ctrl」というのは[Control]キーのことです）。
今回は2つ表示されましたが、「Source」の部分が「Emmet」になってる方が、Emmetでのキーバインドになります。この行の左側にはクリップボードのアイコンが表示されており、クリックすると、設定内容がコピーされますので、クリックします（クリックしても色が変わったり見た目的に凹んだりしないのでわかりにくいですが、ちゃんとコピーされてますので安心してください）。
次に、キーバインドの設定ファイルを開きます。「Your Keymap File」というリンクが画面に表示されているはずですので、そこをクリックします。「Keymap.cson」というファイルが開きます。
最終行にカーソルを移動し、コピーした内容を[Command] + [P]で一番下に貼り付けます。
貼り付けた後、「’ctrl-e’」を「’cmd-shift-e’」に書き換え、上書き保存します。保存は[Command] + [S]です（「cmd」は[Command]キーのことです）。保存すると直後に反映します。
これで、[Control] + [E]だったEmmetのキーバインドが、[Command] + [Shift] + [E]でも使えるようになりました。
今回はキーバインドの追加になりますので、以前の[Control] + [E]も使えます。
使用不可にしたい場合は明示的にキーバインドを無効にする設定を記述する必要がありますが、ここでは割愛致します。
たくさんのプラグインをインストールしていると、キーバインドが重複してしまい、どちらか片方しか使えなくなる場合があります。プラグインの数によっては結構な頻度で発生しますので、上記の方法でキーバインドを変更し、使いやすいバインディングを作り出してみてください。
Atomの使い方
一通り使いやすい設定など済ませたら、早速Atomをプロジェクトとして実作業風に使ってみましょう。手順はシンプルに、以下のような手順で行います。
- デスクトップにフォルダを作る
- Atomを起動しフォルダを登録する
- 新規ファイルでhtmlファイルを作成する
- デスクトップのフォルダにファイルを保存する
デスクトップにフォルダをつくる
デスクトップをクリックし、[Command] + [Shift] + [N]で新規フォルダを作成します。
フォルダ名は任意ですが、今回は半角英数で「project」としました。
フォルダ作成直後は日本語入力になってしまうので、[英数]キーを押して半角英数モードにしてから入力してください
Atomを起動しフォルダを登録する
アプリケーションフォルダからAtomを起動する方法以外に、MacのSpotlight機能を使って起動してみましょう。
[Command] + [スペース]を押してください。画面に「Spotlight」と表示された検索窓が表示されたと思います。
「atom」と入力すると、リアルタイムで検索が走り、画面に「Atom.app」が表示されますので、クリックするかカーソルで選択後Enterキーで起動することが可能です。
マウスを使わない分、素早く起動することができます。キーボードに慣れている人はこの方が速いと思いますので、ぜひアプリ起動の選択肢として覚えておいてください。
前回開いていたファイルがあれば、自動的にそのファイルが開かれます。その際、Atomの左側に、ツリービューという部分が表示されていると思います。ここが、フォルダを登録できる場所です。
もし左側にツリービューが表示されてなかったら、「View」→「Toggle Tree View」で表示箚せてください。
ツリービュー内で右クリックし、「Add Project Folder」を選択してください。フォルダを登録できる画面になります。
ここで、先程作った「project」フォルダをダブルクリックし中に入り、そのあと「開く」ボタンでフォルダを追加します。
必ず中に入った状態で登録してください。
フォルダの登録が不要になった場合、フォルダを右クリックし、「Remove Project Folder」で登録を解除できます（フォルダが削除されるわけではありませんので安心して下さい）。
新規ファイルでhtmlファイルを作成する
Emmetの説明で行ったように、新規ファイルを作成し、htmlを記述します。
例えば以下のような内容であれば、Emmetで数秒で記述が可能です。お好きなように編集してみてください。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <h1>テストです</h1> </body> </html>
デスクトップのフォルダにファイルを保存する
htmlファイルの編集が終わったら保存します。保存するには[Command] + [S]で上書き保存が可能です。初回は上書きではなく新規保存になります。まずは保存してみましょう。
白一色だったhtmlがSyntax Themeの色にハイライトされたと思います。
まとめ
まずプロジェクトとなるフォルダを作成し、Atomでどんどんファイルをその中に保存していくとわかりやすいでしょう。必要に応じてフォルダも増やして下さい。
もちろんすでに存在するホームページのファイルが入っているフォルダを登録して、あらためてAtomで編集することもできます。使い方は色々ありますので、目的に合わせて作業を進めてみてください。
最後に
Atomの入門はこれで終わりです。
以下のようなゴールを用意しましたので、入門から初級、中級に進む時の参考にしてみてください。
- タブをドラッグして2画面、3画面、4画面にしてみる
- [Command] + [¥]でツリービューの表示/非表示を覚える
- [Command] + [Shift] + [P]でコマンド画面を表示しプラグインの各動作を利用してみる
- 「editorconfig」プラグインを導入し、記述のフォーマットを統一させてみる
- 「Project Manager」プラグインを導入し、登録したフォルダ状態を保存してみる
- 「Atom IDE」プラグインを導入し、統合開発環境を構築してみる
Atomはホームページ制作やブログの下書き、ちょっとしたメモや図形描写などに最適な素晴らしいフリーソフトです。ぜひ使ってみてください。
コンピュータ歴39年。8歳の頃ゲーム改造のためにプラミングを始めたのがきっかけ。好きな動物はネコ、フクロウ、ペンギン。映画、音楽、楽器、イラスト、ツーリング、旅行、外語、ゲーム、カラオケ、ボウリング、釣り、太極拳、ウォーキングなどに精を出したり出さなかったりする100%日替わりな純一自由人。 細かい事どころか大事な事まで気にしないという社会的に手に余るおっちゃん。 常にダイエット中。
関連記事
- 記事検索
