どうも!おぶり(@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をぜひ使ってウェブ開発やブログ運用に活用してみてください。