ローディング中

ATOMのテーマをCSSだけでカスタマイズする方法!Syntaxテーマ編

前回はSlackのサイドバーの色を変更してみました。
Slackのサイドバーの色を自分色に変えませんか?
今回は恋するテキストエディタでおなじみじゃない方のATOM
564979ca2cb66656974130

弊社AWESOMEのコーダーは全員ATOM使いというATOM狂い。
そんな毎日のように眺め続けるATOMの色を変えたい!
テーマをカスタマイズしたい!と思うのは僕だけじゃないはず!
と思いましたが弊社では僕だけでした。

悲しい。

ていうかSlackの色を変えたいっていう要望も特には無かった。
切ない。
今回はそんな需要が多さなさそうなATOMのテーマ開発について全2回で説明していきたいと思います。

目次

ATOMのテーマ開発について

マニュアルをみよう!

まずATOMのテーマを開発する際に参考にしたのがこちらのページ

Creating a Theme

ATOMですでにマニュアルが用意されてるんです。
このマニュアルを見ながらゴリゴリ作っていきましょう。

ATOMには2種類のテーマがあります。

Theme boundary
引用元:Creating a Theme

UI Theme

Syntax Theme

の二つに分かれています。
今回はまずSyntax Themeの作成から進めていきたいと思います。

Syntax ThemeというのはATOMでコードをゴリゴリかくスペースの事ですね。

上記の画像の緑色の部分がそれに該当します。
ATOM使って事ある方でしたら「ああ、あそこね」とすぐに分かってもらえるでしょう。

開発前に確認

core packageの中のdev-live-reload

スクリーンショット 2016 10 26 午後8 22 14

こちらが有効になっているのを確認しておいてください。
今回めっちゃ使います。

テーマ開発スタート!

テンプレートテーマを作成

スクリーンショット 2016 10 26 午後8 27 12

[cmd+Shift+P]で検索タブが出てきますので、そこに[Generate Syntax Theme]を入力。
[Generate Syntax Theme]を選択しますと。

スクリーンショット 2016 10 26 午後8 28 58

※必ず「-syntax」で終わるようにpathを入力します。
今回は「momoiro-girl-syntax」としました。
スクリーンショット 2016 10 26 午後8 32 23

するとこのようにバッチリファイルが作成されました。
ちなみに私の環境ですと/github/momoiro-girl-syntaxといった具合にRootにファイルが作成されました。

テーマを選択する。

もうすでにこの段階でオリジナルテーマの設定が可能となっています。
開発を進める前にATOMのテーマを変更しておきます。

「ATOM>環境設定>Theme>シンタックステーマ」

と選んでいくと、先ほど作成したテーマが選択できるようになっているのがわかります。
スクリーンショット 2016 10 26 午後8 39 34

ここで表示されない人はおそらくpathの名前を設定ミスしてる可能性があります。
ではmomoiro-girlテーマを選択しましょう。

開発者モード

テーマ開発をする際、ATOMを開発者モードにすることで、開発が爆速になります。
ATOMの開発者モードにはとっても簡単に切り替えることができます。

「表示>開発>開発者モードで開く」と選択すると開発者モードに切り替えることができます。
スクリーンショット 2016 10 26 午後8 37 40

package.jsonを設定

スクリーンショット 2016 10 26 午後9 11 11
package.jsonの中にテーマの概要を記入していきます。
基本的には適当でいいのかなと思いますが、しっかりと書きたい方は是非。

早速色を変更していくぞ!

styles>colors.lessを開いてみましょう。

スクリーンショット 2016 10 26 午後8 46 58

ATOMのテーマはlessで作成されているため。
colors.lessの中に引数が格納されています。
基本的にはここの色をゴリゴリ変えていくだけです。

あらやだ簡単!

dev-live-reloadが有効になっていたると、リアルタイムで変更が確認できます。

ss
そうこんな風に!
ATOMを自分色に染めていく準備が整いました!

基本は3つのファイルをいじるだけ。

color.lessで色の引数を設定

syntax-variables.lessでsyntaxの細かな色を設定。

base.lessでSyntax themeのベースの色を設定。

といった感じです。
cssを触ったことがある人でしたら割とすぐに理解できるのではないでしょうか。
では早速momoiro-girlテーマを作っていきたいと思います。

配色に悩んだら活用したいオンラインツール厳選して5選ご紹介!

で紹介したツールを駆使して配色を必死で考えていきました。
考えた末に出来上がったのがこれ!

スクリーンショット 2016 10 26 午後9 09 56

桃色ガール!

視認性ゼロ!

背景ピンクは0点ですね。
コーディングの効率が落ちそうで仕方ありません。
これでは仕事にならないのでテーマを作成し直します。

スクリーンショット 2016 10 26 午後9 15 29

出来上がったのがこちら。
これなら視認性も確保できてスタイリッシュにまとまったのではないでしょうか。

公開しよう!

せっかく作ったのだから公開してみましょう!
まずATOM公式ページでサインインしておきます。

スクリーンショット 2016 10 26 午後9 19 13

その後ターミナルでテーマフォルダに移動し

git addgit commitをしたあとに

apm publish major

すると
>Welcome to Atom!
Before you can publish packages, you’ll need an API token.
Visit your account page on Atom.io https://atom.io/account,
copy the token and paste it below when prompted.
Press [Enter] to open your account page on Atom.io.

とメッセージが表示されますので、[Enter]を押すと。

ATOMのサイトが開きます。

スクリーンショット 2016 10 26 午後9 19 53

ここからAPI TOKENをコピーしてターミナルに入力するだけで公開は完了です
publishにかんしてはこちらを参考にすると良いでしょう。

publishing

ちなみに私のテーマはこちら。

https://atom.io/themes/manno-wonder-syntax

インストールしよう!

ダウンロードはATOMのinstallから頑張って探す方法と、コマンドから一発でインストールする方法があります。
今回は簡単なコマンドでのインストール方法をご説明していきます。

apm install テーマ名

たったこれだけでATOMにインストールされます。
インストール完了後はATOMを再起動するだけで反映されます。
是非みんなに広めてつかってもらってくださいね!

次回はUIの方をやるよ!

今回はシンタックステーマだけやりましたが、次回はUIの方もカスタマイズしていきたいと思います。
※UIカスタマイズ方法を公開しました!
▶ATOMを自分好みのデザインにカスタマイズしてみよう!UIテーマ編!

配色さえ決まっていれば1時間もかからずにつくってしまえそうなほど簡単なテーマ開発。
是非ともチャレンジしてみてくださいね!

ホームページ・デザイン制作のご相談・ご依頼は

079-451-5881

68ED4C65-BA1E-46D0-A7AC-B9869923C696 Created with sketchtool. A07C553F-CF16-4B7D-94FE-D36AE0A6297D Created with sketchtool. 37B7D8F4-7A18-4725-9EC6-595ABDF69D64 Created with sketchtool. 95DFB680-1EDF-4199-BC4A-BB6752EBA23C Created with sketchtool. 02DDF754-E1DB-4EF2-B6BB-C884722938C4 Created with sketchtool. NEW! 1A95E369-6469-4C46-B38F-F83410B928B0 Created with sketchtool. Group 5Group 2Group 4Group 3E4FC8CF2-721D-4699-8162-18E886C432C1 Created with sketchtool.