どうも!おぶり(@obl_life)です!

サイトやブログのデザインを変更するとき、htmlやCSSをテキストエディタで修正していると思います。

数多くのエディターが存在して、どれが良いのか悩みますよね。もしも、メモ帳を使っているならプログラミング用のテキストエディターを使うのを強くオススメします。

そこで、エンジニアブロガーの僕が初心者にオススメしたい無料テキストエディターが「ATOM」です。

今回はATOMの説明と基本的な使い方を紹介します。

ATOMをオススメするポイント

高機能なのに無料

なんといっても強いポイントとなるのは、ATOMは無料で使える点です。

無料なのに十分以上の機能が使う事ができ、「パッケージ」と呼ばれる拡張機能を追加することで、自分が扱いやすいテキストエディターにカスタマイズすることができます。

拡張性に優れている

日本語化や、多種多様の言語にも対応しています。

一部の文字を入れるとその後の変換予測一覧を表示する「予測変換」や「キーバインド(ショートカット)」など、Web開発を補助してくれる機能が実装されています。

ATOMをデフォルト仕様に設定する

テキストファイルやHTMLファイルなどをダブルクリックしたときに、ATOMが起動してファイルを開くように設定することができます。

Windows

ATOMからは変更できないので、Windowsの設定を変更します。なお、1つのファイル(たとえばHTMLファイル)で設定すれば、同じ種類のファイルはすべてATOMで開くようになります。

(1)ATOMで開きたいファイルを右クリックし、「プログラムから開く」をクリックして、「その他のアプリ」をクリックします。

(2)「Atom」をクリックして、「OK」をクリックします。

もし、「Atom」が表示されない場合は、「このPCで別のアプリを探す」をクリックし、「C:\Users\(ユーザー名)\AppData\Local\atom\atom.exe」を選択して、「開く」をクリックします。

Mac

ATOMからは変更できないので、Mac OSの設定を変更します。

(1)対象のファイル(下の画面の場合は「index.html」)を、Ctrlキーを押しながらクリックして、「情報を見る」をクリックします。

(2)「このアプリケーションで開く:」で「Atom.app」を選択し、「すべてを変更」をクリックします。

ATOMの日本語化

標準のATOMは英語表示ですが日本語化が可能です。

(1)「Atom」を起動する

(2)「File」→「Settings」の順にクリックする

(3)「Install」をクリックする

(4)「Search packages」に「japanese-menu」と入力し、「Packages」をクリックする

(5)「japanese-menu」の「Install」をクリックする

以上で日本語化を行う事ができます。

注意:日本語化パッケージとATOMの最新バージョンが追いついてない場合、追加された機能が日本語化できないことがあります!

ATOMの基本的操作

ファイルを開く

(1)「ファイル」をクリックし、「開く」をクリックします。

(2)任意のテキストファイルを選択して、「開く」をクリックします。

テキストファイルの内容が表示されます。

(3)編集する箇所をクリックし、キーボードを使って文章を編集します。

(4)編集が終わったら、「ファイル」をクリックし、「保存」をクリックします。

なお、起動しているATOMに複数のテキストファイルをドラッグ&ドロップすると、ファイルをまとめて開けます。

フォルダを開く

ATOMでは、ファイルだけでなくフォルダも開くことができ、画面左側でフォルダ内を視覚的に選択することが可能です。

(1)「ファイル」をクリックし、「フォルダを開く」をクリックします。

(2)任意のフォルダを選択して、「フォルダーの選択」をクリックします。画面左側にフォルダが表示されます。

なお、起動しているATOMにフォルダをドラッグ&ドロップしても、フォルダを開けます。

画面を分割する

画面を分割して、1つのファイルの別の箇所を表示しながら、文章を編集できます。複数のファイルを同時に編集したい場合にも便利です。

(1)テキストファイルを開きます。

(2)「表示」をクリックし、「ペイン」をクリックして、「ペイン分割↑」をクリックします。

カーソルが表示されている画面が上下に分割され、カーソルは上側の画面に表示されます。同様に「ペイン分割→」をクリックすると、カーソルが表示されている画面が左右に分割され、カーソルは右側の画面に表示されます。

また、フォルダを開いているときは、画面を分割して、新しいファイルを開くこともできます。

(1)フォルダを開きます。ATOMの画面左側にフォルダが常時表示されます。

(2)画面左側に表示されているファイルを右クリックし、「ペイン分割→」をクリックします。

カーソルが表示されている画面が左右に分割され、右側の画面に右クリックしたファイルが表示されます。

まとめ

有料テキストエディターに負けないほどの高性能で扱いやすいテキストエディターです。

普段は有料エディターを使ってますが、FTPソフトから軽い修正などはATOMを起動して使用してます。起動も早いです。

Markdown記法でブログの下書きをしてるんですが、ATOMにはしっかりとプレビュー機能などもついており、作業効率を上げたいブロガーや、軽作業のウェブ制作、初心者プログラマーにはぜひオススメしたいです。

この機能と拡張性を搭載している無料のATOMをぜひ使ってウェブ開発やブログ運用に活用してみてください。