atom_を紹介する話

僕の愛用するエディタの話

Advent Calender 12/16

アイコンが象なのはなんでなのでしょう…

atomとは？

さてさっそくですが、今回の私の相棒、atomの話をしましょう atomといっても、とんがり頭のロボットではない

名古屋市中区に本社をおく回転寿司等を営む企業でもない

プログラマーには欠かせない、''エディタ''のことです

https://iggg.github.io/resources/assets/wiki/atom_を紹介する話/atom.png

これがアイコン! かっこいい!!

特徴は？

Github製のオープンソースエディタ!

最大の特徴は何と言っても、GitHub内で開発されたオープンソースのエディターであるということでしょう なんでもGithubの創業者Chris Wanstrath氏が「Web技術を用いて、Emacsのように自由にカスタマイズできる新世代のエディターを開発する」という思いから始まったとか

その思いから作成が始まったatomも今年6月、ついに、バージョン1.0が公開されました! 2014年のころから出ていたβ版からver1.0が出るまでの間にも、100万回超のダウンロード、そして多くのパッケージ(後述)が公開されていました

かっこいいUIとカスタマイズ性!!

ぼくが一番最初に引かれたのはこのエディタのカスタマイズ性でした

見た目をUI(全体の見た目)とsyntax(コード部の色)をそれぞれ、テーマという形で変えることができます 変更はとっても簡単で、一気にエディタの雰囲気を変えることができます もちろん戻すことも簡単!!

さらにパッケージという形でさまざまな機能を追加することもできます atom以外のエディタにある機能を、atomで再現してくれるようなパッケージもあるので、いいとこどりしたオリジナルのエディタを作れます

特にweb系の方におススメ!

オープンソースのソフトウェアであると同時に、このエディタはwebの技術を用いて開発され、そしてweb開発者が中心となって問題提起・解決されてきたエディタです そのため、パッケージもwebを書く上で嬉しい機能が豊富な印象です

マークダウン用のエディタとして超優秀!

マークダウンのプレビュー機能をデフォルトで実装しており、マークダウンの編集でとても便利です 左で編集して、右でリアルタイムでプレビューすることができます

さらに、プレビューの結果をそのままhtmlファイルに書きだしてくれます なので、印刷や誰かに送る際はhtmlにして送る、なんてこともできます

これが非常に便利

インストール

インストール中もポップなアニメーションがながれるので、インストール完了が楽しみになります(笑)

https://iggg.github.io/resources/assets/wiki/atom_を紹介する話/atom-site.png

使ってみよう

デフォルトの画面がこちら すでにかっこいいですね

https://iggg.github.io/resources/assets/wiki/atom_を紹介する話/atom-ui.png

これにパッケージやテーマを入れて自分用にカスタマイズしてみましょう

パッケージの導入

デフォルトでもいろいろなことができるatomですが、有志の方により作られたパッケージを導入することでもっと使いやすくなります

その数なんと3300!!

今回はその中からminimapというパッケージを導入してみましょう sublime textで有名なminimapですね

1.上メニューから設定を開きます ファイル>環境設定

https://iggg.github.io/resources/assets/wiki/atom_を紹介する話/package1.png

2.その中からインストールのタブを開いてパッケージの名前を検索しましょう この時検索窓の隣でpackageが選択されていることを確認

https://iggg.github.io/resources/assets/wiki/atom_を紹介する話/package2.png

3.望みの物を探してインストール!! インストールすると自動的に有効化されます 気に食わなかったら設定のパッケージタブから、該当パッケージを探してアンインストールするなり、

一時的に無効にする場合はdisableをクリックしましょう

https://iggg.github.io/resources/assets/wiki/atom_を紹介する話/package3.png

テーマの導入

上でも示したようにテーマは、atomのUIやsyntaxを変えるためものです 気に入った物を探す楽しさもあるので、定期的に変えてみてもいいかもしれないですね!!

インストールの方法はパッケージとほとんど変わりません 1.上メニューから設定を開いて

2.その中からインストールのタブを開いてテーマの名前を検索しましょう この時に、検索窓の隣からテーマを選択する事

3.で、望みの物を探してインストール!!

ただこのままでは有効化されていません

有効化するための設定をしましょう

設定のテーマタブの上部からそれぞれ、UI、syntaxの設定欄があるので、そこからインストールしたものを選択します するとatomが一気に見た目が変わりますよ!!

https://iggg.github.io/resources/assets/wiki/atom_を紹介する話/thema.png

ユニークなパッケージ・テーマ紹介

こんなすごいのがあるよというのを紹介 「atom おすすめ パッケージ」で検索するといろんな人のおすすめが見れるのでそれも合わせてどうぞ!!

https://iggg.github.io/resources/assets/wiki/atom_を紹介する話/mac-os-ui.png

https://iggg.github.io/resources/assets/wiki/atom_を紹介する話/slack-ui.png

続いて、パッケージ

https://iggg.github.io/resources/assets/wiki/atom_を紹介する話/pigments.gif

https://iggg.github.io/resources/assets/wiki/atom_を紹介する話/color-picker.gif

pigmentsとあわせてweb作成中に色を決めることが簡単にできる優れものですね

My atom

私のatomを紹介します 少し前のハロウィン風が気に入ってしまい、しばらくずっとこのままですね themaはmetro-ui

syntaxはduotone-dark-syntaxです

マークダウン編集中!! 左側のコード部にはminimapを使っているので全体像の把握が簡単

右側にプレビューが出てますね

これをそのままhtmlとして吐くこともできるので、誰かに渡したり、印刷したり、用途の幅がとても広い機能です

https://iggg.github.io/resources/assets/wiki/atom_を紹介する話/my1.png

pythonなどをatom内で実行することも可能です!! 画面下に実行結果が出てますね

https://iggg.github.io/resources/assets/wiki/atom_を紹介する話/my2.png

まとめ

atom、見て楽しい、使って楽しいエディタです やっぱり好きな見た目だとコーディングもはかどります

何よりカスタマイズ機能はテンションあがりますね(笑)

markdawnのおともとしてもとても優秀なので、まずはマークダウンエディタとして使ってみてはいかがでしょうか？

もっと知りたい人は!!