[Looker]Looker IDEを”黒く”したいあなたへ #looker

LookerのIDEは、全体的に背景が白色になっています。

しかし、エンジニアの方は背景を黒くしたいという方も多いのではないかと思います。エンジニアは目を酷使する仕事なので、背景が黒であることに越したことはないのではないでしょうか。

私も、何かと黒くしたがりなタイプの人間です。

• Twitterは背景を”ブラック”に
• Slackはテーマを”ダーク”に
• ExcelなどのOfficeテーマも”黒”に
• コード書く際はVScode（デフォルトでエディター部分の背景色が黒です）

本ブログでは、LookerのIDEの背景を黒にする方法をご紹介します。

手順

※ブラウザはGoogle chromeです。拡張機能も使用します。

基本的に、以下の情報に沿って実践してみました。

このページの冒頭でも下記のように述べられており、このページの筆者も黒を好む方のようですね！

I’m a big fan of Looker, but I’m not a fan of code editors with a white background. I’m sure I’m not the only one

１．Chrome拡張機能「Stylebot」を入れる

２．Stylebotで対象のLookerインスタンスに対して設定を行う

まず、Stylebotの「Options」をクリックします。

次に、「Styles」を押してから「Add a new style...」をクリックします。

すると、下記のような編集画面が表示されます。

以下のように入力したあとで、右下の「Save」を押します。作業としては、これで完了です、簡単ですね！

• 最上部の枠：対象のLookerインスタンスのURL
• コード入力部：このリンク先のCSSファイルのコードをまるごとコピーして貼り付けてください。

導入結果

Before

After

…ちょっと文字が大きいですね。

カスタマイズ

文字の大きさを変更

デフォルトの設定を入れてみて文字が大きいことがわかったので、カスタマイズしてみます。

文字の大きさを変えたい場合は、先程の手順で貼り付けたコードの中の「.ace_editor」内、「font-size」の値を変更します。

18pt→12ptに変更してみます。

この変更により、文字の大きさもちょうどよくなりました！

挙動がおかしいため、フォントをLookerデフォルトに変更

少し触ってみた所、「文字入力・削除を行うと、カーソルが左に3つ分ずれた位置に入力・削除が行われる」というエディターとしてあるまじき挙動をしていました。

どこが悪さをしているか調査をしてみたところ、「.ace_editor」内、「font-family」が悪さをしていることがわかりました。

フォントはLookerのデフォルトで全く問題ないと感じていたため、この「font-family」を丸々消してしまいます。

これにより、おかしな挙動をしてしまう問題が解決しました！

最後に

いかがでしたでしょうか。 今回自分もやってみて、もう少し色味など細かく調整しないと逆に見づらくなる箇所（置換演算子$の紫色）があったので、そのあたりは今後も検討してみようと思いました。

理想は、Looker全体を通してダークモードのような色味に変更できる機能があると嬉しいのですが…笑

Lookerさん、よろしくおねがいします！！