Atomはhtmlプレビューが便利！インストール方法やおすすめプラグインを紹介！

ホームページ制作やブログ記事執筆で欠かせないのが、HTMLを記述できるテキストエディタです。様々なテキストエディタが開発されていますが、中でも使い勝手が良いと話題なのがAtomです。

本記事では、Atomの概要や、インストール方法、その他使い方などを詳しく解説します。テキストエディタ選びに迷っている方や、Atomを使ってみたいけど詳しい操作方法がわからないという方はぜひ参考にしてみてください。

無料相談会・分析へのお問合せはこちら
1営業日以内にスピード返信します！

Atomとは？

まずはAtomに関して簡単に説明していきます。

Atomはオープンソースで公開されているテキストエディタです。提供元はビジネスユースからオープンソースまで様々なソフトウェアを開発しているGitHub社。

一般的なプレーンのテキストエディタでもhtmlコードを記入することは可能です。ただし、メモアプリではより高度なコーディング作業は難しいでしょう。しかし、Atomを利用すれば、より直感的な操作でコードを入力が可能となります。

また、拡張機能も充実していて、ユーザーの使い勝手に合わせてカスタマイズできる点も魅力。プラグインを追加することで入力速度が5倍以上になったという方もいるそうです。

このようなメリットがあるため、近年ではプログラマーを中心に様々な人から使用されているテキストエディタとなっています。

特定単語の置換機能が便利

Atomには特定単語の置換機能が備わっています。こちらは、コード内に含まれる特定の単語を一気に変換できる機能となります。

特定の単語のスペルミスがあったとしましょう。例えば「Atom」を「Atomu」と表記していた場合に、検索窓に対象となる文字「Atomu」を入力し、置換用のボックスに「Atom」を入力すれば、全てが一度で変化します。

プログラミングなどの分野ではコードミスがしばしば出現します。また、修正が必要となるケースもあるでしょう。そのような場合に一括修正できるため、プログラマー御用達のテキストエディタとなっています。

一般的なテキストエディタの機能も便利

通常のテキストエディタとしても優秀な部分が多いです。Atomではマークダウン方式が採用されており、「#」などを使って見出しタグを入力できます。

また、保存形式をhtmlに変更すれば、自動的にhtml形式に変更してくれる点も強みとなっています。

Atomのインストール方法

Atomは無料でインストールできます。そのため、上記で紹介したようなポイントにメリットを感じているなら、ダウンロードしてみましょう。

主な手順は次のとおりです。

1. Atom公式サイトにアクセス
2. インストーラーをダウンロード
3. ファイルを実行し、インストール
4. 終了後ソフトが開く

ダウンロードするファイルが異なるものの、基本的にはmac、windowsどちらでも同様の操作でダウンロードできます。

htmlファイルの作成方法

Atomでファイルを作成するときは、初期設定で作成された「untitled」のファイルにhtmlを記述し、「ファイル名＋html」の名称をつけます。

htmlファイルの保存方法

保存する場合は、その他アプリケーションと同様に、「ファイル」→名前をつけて保存をクリックし、ファイルを保存します。ちなみに、パッケージ「Emmet」を追加しておき、「！」を入力すると、html構文セットが自動で入力されるため、保存の効率が上がります。

Emmetの概要については後ほど詳しく紹介しますね。

Atomでテーマを変更する方法

Atomではテーマを変更できます。ここでいうテーマとは、見た目（インターフェイス）のこと。見た目が良ければ長時間作業できたり、文字が見やすくなったりするため、自分にとって作業しやすいものを選ぶと良いでしょう。

Atomが用意しているテーマを使用したい場合は、Atomの設定画面から簡単に保存可能です。まず、「Command」 + 「,」をクリックし、セッティングタブを表示、左側にある「Themes」をクリックしましょう。

そちらのタブの中にある「Choose a Theme」を選べば、そこからテーマを選択可能です。主なテーマとしては「UI theme（UIテーマ）」と「Syntax Theme（シンタックステーマ）」があり、2種類の設定ができます。UIテーマは名称の通り、ユーザーインターフェイスのテーマ。つまり、Atom画面全体のテーマです。一方で、シンタックステーマは文字入力画面のテーマです。変更すると、入力した文字色や背景が変化します。

また、Atom公式テーマ以外にも有志が製作したオリジナルテーマも用意されています。ご自身にマッチするものを選べば、作業が捗るはずです。

Atomで使える代表的なプラグイン

Atomの基本的な機能は標準搭載されていますが、追加でプラグインを導入することでよりAtomが使いやすくなります。ここでは、Atomの主なテーマを4つ紹介します。

Emmet

Emmetはhtmlの入力支援機能が搭載されているプラグインです。最低限の入力だけでhtmlを記述できるため、コード入力を素早く完了させることが可能です。

例えば、Emmetで「mb80」と入力すれば、「margin-bottom: 80px;」の機能がつきます。大幅にキーの入力数を減らせるため、慣れてくると通常のコード入力よりも5倍ほど早い速度でコーディングできるようです。

Markdown Preview Enhanced

Markdown Preview Enhancedは、マークダウン記法のプレビュー画面が見れるようになるプラグインです。「ctrl+K V」もしくは右クリックから「Open preview to side」で右側にプレビューを表示できます。

マークダウン記法に慣れていない場合には、今どのようなコードを入力しているかわからなくなることもあるでしょう。その時に重宝するのがMarkdown Preview Enhancedです。

Project Manager

Project Managerは、開いたフォルダの状態を記憶してくれるプラグインです。つまり、名前をつけていくつも保存ができるようになります。また、いつでも欲しい状態のファイルを読み込むことができるので、操作を取り消したい時に重宝します。

Sublime Style Column Selector

Sublime Style Column Selectorは、矩形選択が可能になるプラグインです。「alt」を押しながら選択することで必要な部分が選べます。また、選択箇所を複数行同時に編集することが可能となります。

Atomでプラグインをインストールする方法

Atomでプラグインをダウンロードする場合、まず「command」+「,」を使用して設定タブを開きます。その後、左側に出現したメニューの中から「Install」を選択し、検索窓に必要なプラグインの名称の一部を入力しましょう。

その後、Installをクリックすれば、無事有効化されたことになります。

まとめ

本記事では、Atomの概要や、インストール方法、その他使い方などを詳しく解説しました。Atomはテキストエディタとして優れているだけでなく、プラグインを使用すれば自身の使いやすい状態にカスタマイズできます。コーディング作業が5倍早くなることもあるようなので、プログラマーの方はぜひ、利用してみてください。