Webdelog

Brackets のテーマを作る

この記事は Brackets Advent Calendar 2014 5日目の記事です。

普段コードを書くときに使うエディターを頻度順に並べると

PhpStorm -> SublimeText -> DreamWeaver -> Coda

という感じで、Brackets に関してはほとんど触ったことがありません。

そんな私でも Brackets のオリジナルテーマを簡単に作ることができたので、今回はその方法を記事として紹介したいと思います。

Ghost

今回作成してみたテーマです Ghost

ドキュメント

今回テーマを作成するにあたっては Brackets の Github レポジトリの Wiki に書かれているドキュメントを参考にしました。

https://github.com/adobe/brackets/wiki/Creating+Themes

ユーザーフォルダにテーマのフォルダーを作成する

まずメニューから ヘルプ -> 拡張機能のフォルダを開く を選択します。

すると extensions というフォルダが開くので user フォルダに入って、今回作成するテーマ名のフォルダを作成します。

今回は ghost という名前でフォルダを作成しました。

pacage.json の作成

作成したフォルダを Brackets へドラッグしてフォルダの中に package.json というファイルを作成します。冒頭で紹介したドキュメントに package.json のひな形(下記リンク先)があるので、それを参考にして書いていきます。

Creating+Themes#package.json

今回作成した package.json は以下のようになりました。

{
    "name": "turusuke.ghost",
    "title": "Ghost",
    "description": "Simple and Dark Theme",
    "homepage": "https://github.com/turusuke/ghost",
    "version": "1.0.0",
    "author": "turusuke  (http://webdelog.info)",
    "license": "MIT",
    "theme": {
        "file": "theme.less",
        "dark": true
    },
    "keywords": ["theme"]
}

この package.json には、テーマを検索した時に表示されるテーマの説明や、ライセンス、リポジトリの場所などが書かれています。

name ... テーマ名(ユーザー名.テーマにつけたい任意の id の順に書く)
title ... テーマのタイトル
description ... 説明
homepage ... リポジトリの場所。Github のリポジトリの URL を書く
version ... バージョン情報
author ... 作者情報「名前 <メールアドレス> (サイト)"」のように書く
license ... ライセンス情報
theme ... テーマに関する情報
- file ... テーマに関するスタイルシート(LESSファイル)をここで指定する
- dark ... デフォルトのテーマは false の状態です。true にすると全体的に UI が暗くなります。
keyword ... ユーザーが検索したときに自分のテーマを見つけやすくしたいときに指定する

テーマのスタイルを書く

先ほどの package.son の file で指定したスタイルシートが作成したテーマで読み込まれることになります。今回の作成した例だとtheme.lessですね。

LESS をそのまま使って書けるようになっています。

プロジェクト直下に theme.less を作成します。 表示 → テーマから、先ほど package.json の name で指定した名前でテーマが表示されているかと思いますのでそれを選択します。

何も書かないでテーマを適応すると LightTheme(デフォルトのテーマ) の状態になっているかと思います。

今のままだと何が編集できるのかがさっぱりわからないので、今回は DarkTheme をベースにして、そこに追記する形で同じセレクタを使って上書きするやり方で編集していきました。

デフォルトの DarkTheme

上記リンク先からコードをコピペして theme.less の先頭に貼り付けます。

ここに書かれているセレクタが編集できるセレクタになっています。コードのカラーリングや行数表示などが変更できるようになっているようです。

適応しているテーマを編集して保存すると自動的に変更が反映されるようになっています。

開発者ツールを使ってみる

メニューより デバッグ → 開発者ツールを表示 を選択します。 Chrome で開発されている方にはお馴染みの開発者ツールが表示されました。これを利用することで、どの要素にどのクラス名があてられているのかを検索することが楽になるのではないかと思います。

画像の利用

今回作成したテーマはエディタの中央に画像を表示させています。

はじめはプロジェクトフォルダのルート直下に画像を置いて、background-image で bg.png のように指定していたのですが、これではうまくいきませんでした。

解決法

画像を Base64 形式にして埋め込むことで表示させることができました。

HTML,CSS(LESS)さえ分かればテーマを作成できてしまう Brackets... もしやプラグインも同様に、マークアップの知識で作れてしまうのかな…? というわけで余力があればもう一本くらい書くかもしれません。

次の記事は日曜日！ assialiholic さんです。

ではではー。