ATOM

Atomエディタの背景画像を設定するのに苦労したこと【Windows】

More than 3 years have passed since last update.


Atomエディタの背景画像を設定するのに苦労したこと【Windows】

Atom.ioが痛エディタ化できると聞いてやってみた。

しかし、よく記事にされている方法はあまり参考にならず、いろいろ苦労することに。

痛エディタ化できるまでの手順を書き記しておく。


editor-backgroundパッケージを使うのが手っ取り早い

2015/12/6: 追加

Atomのパッケージでeditor-backgroundというものがある。

背景でYouTubeを再生できたりもできるらしいので、いちおう紹介しておく。

背景を設定したいだけなら、このパッケージを用いるのが手っ取り早いだろう。


背景画像を表示する

参考にしたURL:

Atomをオタクエディタにしてみよう

Atomの痛エディタの設定方法

Atomを数行のコードで痛エディタに変える

Atomを痛エディタにする話

Atomを痛エディタにする話 ブラック編

なるほど、設定ファイルを編集してCSSで背景画像を指定できそうだ。

でも、Windowsのローカルフォルダにある画像を指定したい場合はどうすればいいのか?

参考にしたサイトには具体的な方法が書いていなかったのでイロイロ試すことにした。

設定ファイルを開く方法:

File -> Open Your Stylesheet

styles.lessが開けたので、適当にプロパティを追加してみた。

atom-text-editor {

background-image: url('http://xxx/xxx/xxx.jpg');
}

背景画像は表示されず、しばらく悩んだが、Atomのテーマによって背景色がすでに指定され、塗りつぶされているのが原因だった。

backgroundで設定してやれば無事画像を表示することができた。

atom-text-editor {

background: url('http://xxx/xxx/xxx.jpg');
}

次にローカルにある画像ファイルを指定しようとするが、

相対パスで指定しようにも、どこが基準になっているかわからず悩んだ。

なにか情報がないか調べているとAtomではインスペクタが使えることがわかった。

こいつはHTMLの要素などを調べるのに便利なヤツだ。

Consoleにデバッグ情報も出力されるのでWEB開発者には必須だろう。

ちなみに最近のブラウザには大抵搭載されているらしい。

WEBインスペクタを開く:

Ctrl + Alt + i

インスペクタで適当にHTMLの階層を降りて行って、エディタ画面がどうなっているのかなんとなく把握できた。

さて、適当に指定したローカルの画像ファイルだが、インスペクタのConsoleにファイルが存在しないとのエラーが出ていた。

どうやらAtomがインストールされた変なフォルダが基準になっているらしい。

相対パスで多数の../を連ねる方法が考えられるがスマートじゃない。

画像ファイルをAtomのフォルダに入れる案も同様の理由で却下だ。

Windowsでローカルファイルを指定するにはfile://などを指定する方法もあるみたいだが、使えなかった。

(\はエスケープで\\としなければならないためで、file:///という指定は使えるが、なくてもよい)

情報がなかったので何か使えないかと試していると、以下の記述が使えることがわかった。

Windowsだから/の代わりに\を使い、しかもエスケープが必要だから\\と重ねる必要があるみたいだ。

Atomではパスのデリミタは\と/のどちらでも解釈できるが、\は\\と重ねてエスケープする必要がある。

どうやらC:も省略して書けるようだ。

C:\aaa\bbb\ccc.jpgを指定する場合:

省略なしで指定する場合

atom-text-editor {

background: url('file:///c:\\aaa\\bbb\\ccc.jpg');
}

file:///を省略する場合

atom-text-editor {

background: url('c:\\aaa\\bbb\\ccc.jpg');
}

\を/とする場合

atom-text-editor {

background: url('c:/aaa/bbb/ccc.jpg');
}

C:を省略する場合

atom-text-editor {

background: url('/aaa/bbb/ccc.jpg');
}

これでなんとかローカルファイルの画像を表示することができた。


背景画像の表示の仕方を模索する

ローカルファイルにある背景画像を表示することができたのはいいが、

表示の仕方がイマイチ気に食わない。

画面を2ペインで左右に分けて、更にその右側にツリービューを配置している。

ツリービューの背景は黒だし、2ペインを区切るバーも邪魔だ。

更にMarkdownのプレビューを表示すると見えなくなる。

各ペインに表示する方法も考えたが、どうせなら大きな1枚絵を使いたい。

ペインが増えた場合、各ペインに同じ画像が表示されるのは避けたい。

各ペインに違う画像が表示されるのも面白いかもしれないが、とりあえず1枚絵を使うことにする。

インスペクタで要素を調べながら試した結果、以下のように指定するといい感じになった。

styles.lessの内容:

// 同じ指定を繰り返すので変数として宣言する

@backgournd-image: url('/dev/app/atom/miku.jpg') no-repeat fixed right top;

.tree-view {
background: @backgournd-image;
}

atom-text-editor {
background: @backgournd-image;
}

atom-workspace-axis {
background: @backgournd-image;
.pane {
opacity: 0.4;
}
.active {
opacity: 1.0;
}
}

これで、非アクティブなペインを透過させつつ、

エディタ部分にも、ツリービューにも背景画像を表示させることができた。

Markdownのプレビュー部分も非アクティブの場合は透過する。

インスペクタで調べて改造すればかなりの部分に手を加えることができそうだ。

見た目も自由に変えられるし、プラグインも作成できるので言うことなしだ。

Windowsだけでなく、MacとLinuxで使えるのも大きい。

あとはじっくり手を加えて使いやすいようにカスタマイズを繰り返せば、

どのような環境でも使えるオンリーワンなエディタが出来上がるだろう。

参考画像:

Atomエディタの背景画像を設定するのに苦労したこと【Windows】001.jpg


style.lessを書くのに参考にしたもの

AtomにはStyleguideというパッケージが付属している。

テーマを作成する際に、視覚的に確認するためのものだ。

Atomがどういった部品から成り立っているのかわかる。

合わせて確認したいのが、Atomのテーマで使用されているstyle.lessだ。

どの要素を変更すればよいのかの参考になる。

C:\Users[ユーザー]\AppData\Local\atom\app-1.2.4\resources\app\apm\templates\theme\styles


Atomの構造

Atomエディタの構造をインスペクタで調べてみた。

とりあえずatom-text-editorの背景に何か設定しておけばなんとかなる。

atom-workspace {

// この親に<html>や<body>がいるが、
// Atomに設定を反映させるならここから

atom-workspace-axis {
// axisは軸という意味。
// 特に何が設定されている様子はないので、
// CSSを反映する際は無視してよさそう

atom-pane-container.panes {
// paneでガラスという意味。
// 2ペインとか3ペインで複数分割ウインドウの意味。
// paneを複数格納するためだけのもの。
// CSSを設定する際は無視してよさそう。

atom-pane-axis {
atom-pane.pane {
// 個別のペイン

atom-text-editor.editor {
// エディター部分
// ::shadow DOMが有効
.editor--private {
.editor-contents--private {
.gutter-container {
.gutter {
// 行番号
}
}
}
}
}
}
}
}
atom-panel-container {
atom-panel {
// 下部(ステータスバー)
}
}
}
}


現在の設定(style.less)

現在の設定を晒してみる。

//@backgournd-image: url('/dev/img/miku/img_hatsune.jpg') white no-repeat fixed center/cover;

//@backgournd-image: url('/dev/img/miku/7704e9d1.jpg') repeat-x fixed center center;
@backgournd-image:
url('/dev/img/miku/64aa1f6e.jpg') no-repeat left/contain,
url('/dev/img/miku/a_147475_0.jpg') no-repeat right/contain;

@backgound-color-editor: rgba(0, 0, 0, 0.4);
@backgound-color-frame: rgba(0, 0, 0, 0.8);
@backgound-color-gutter: rgba(0, 0, 0, 0.6);

@font-family: 'Ricty Diminished', Meiryo;
@font-family-ui: 'Meiryo UI';

atom-workspace {
background: @backgournd-image;
font-family: @font-family-ui;

atom-pane {
// エディタの親
background-color: transparent;

atom-text-editor {
// エディタ部分
background-color: @backgound-color-editor;
font-family: @font-family;
}
}

.list-inline {
// タブの背景
background-color: @backgound-color-frame;
}
atom-panel {
// 画面下部(スクロールバー)
background-color: @backgound-color-frame !important;
}
}

atom-text-editor::shadow {
.gutter {
// 行番号
background-color: @backgound-color-gutter;
}

.scrollbar-content {
// スクロールバー
background-color: @backgound-color-gutter;
}
}

atom-text-editor::shadow {
.cursor {
border-color: red;
}
.line.cursor-line {
background: rgba(80, 50, 50, 0.4);
}
.trailing-whitespace {
background-color: red;
}
}

.vertical {
.pane {
&.active {
opacity: 0.9;
}
}

.panes .pane-row > *,
.panes .pane-column > * {
border-right: 0px;
}
}

// style the background color of the tree view
.tool-panel {
background-color: transparent;

.tree-view {
background-color: @backgound-color-editor;
font-size: larger;
}
}

// Styles for the markdown preview.
@backgound-color-md: rgba(0, 0, 0, 0.8);
@color-md: #cccccc;
@font-family-md: @font-family;

.markdown-preview.native-key-bindings {
background-color: @backgound-color-md;
color: @color-md;
}

.markdown-preview {
h1, h2, h3, h4, h5, h6, p, pre, code, tt, blockquote {
font-family: @font-family-md;
}
}

参考画像:

Atomエディタの背景画像を設定するのに苦労したこと【Windows】002.jpg