スタイル・エッジ技術ブログ

士業集客支援/コンサルティングのスタイル・エッジのエンジニアによるブログです。

スタイル・エッジLABOにおけるローカル制度のご紹介

こんにちは!
スタイル・エッジLABOでマネージャをしています、オーです。
今回は、弊社LABOにおけるユニークな各種ローカル制度についてご紹介します。

イメージ

LABOでは、エンジニアの働きやすさの向上を通して、技術をより楽しみ、エンジニアライフを謳歌することにつなげていきたいと考えています。

その為に、いくつかLABOではローカル制度や取り組みがあります。

今回は、その3つをご紹介します。

続きを読む

Rainbow CSV と RBQL で快適CSV生活

はじめに

こんにちは!スタイル・エッジLABOのSです。 今回は最近の私の相棒であるRainbow CSVについてご紹介させていただきます。

よくVisual Studio Codeおすすめの拡張機能として取り上げられるこちらの拡張機能ですが、 恥ずかしながら私、つい最近まで「CSVを見やすく色付けしてくれるプラグイン」くらいにしか思っていませんでした。

最近CSVのようなテキストデータを取り扱う機会が多くなり、 軽くて楽に扱えるエディタ(もしくはビューワー)はないものかと探していたところ…

あれ?これもしかして…使える?

ということで、あらためてRainbow CSVの公式サイトを読んで使ってみました。

続きを読む

UptimeRobotを使ってお手軽ネットワーク監視生活

はじめに

はじめまして! スタイル・エッジLABOのTAKと申します

突然ですが皆さん、個人でWebサービスを公開してて気付いたらサービス落ちてた…なんて経験、あると思います

個人で立ち上げたサービスとはいえ、たまに利用してくれる人もいるし落としたまま気付かないの申し訳ないな…でもサービス監視ツール導入したり、それを通知する準備するの大変そうだし…
って中々やれていない人、いるんじゃないでしょうか?
そう!数か月前の私のように!

そんな方へ私からオススメするのが、ネットワーク監視ツール「UptimeRobot」です!

続きを読む

ブラウザ操作を「脚本家」に任せてみよう

はじめに

お初にお目にかかります。スタイル・エッジLABOの┣(読み: てぃー or てー)と申します。
今年からこちらにお世話になり、やっとのことDockerやLaravel等に慣れてきて、ただいまこうなっております↓

f:id:styleedge_tech:20200311075644j:plain
寝落ちカバ by フリー素材ぱくたそ(www.pakutaso.com)


ですが今回はそれらではなく、つい最近知ったブラウザテストツール「Playwright」について書き留めます。

続きを読む

PhpStromに乗り換えてみる

f:id:styleedge_tech:20200110121228j:plain
Photo by Zany Jadraque on Unsplash

はじめに

こんにちは。スタイル・エッジLABOのNです。

さて早速ですが、弊社では希望者にはPhpStormのライセンスを会社負担で支給していただけます。

私はスタイル・エッジLABOへはつい最近転職してきたばかりなのですが、以前いた会社ではそういった制度はなかったものですから、PhpStormを利用しようと思うとで個人利用で初年度は1万円少々かかります。2年後以降も安くはなっていくもののランニングでコストがかかるとなると庶民にはなかなか手が出づらいものでした。

ですが会社のお金で使えるならこれ幸いと私も遅ればせながらPhpStormデビューを果たしてみましたので使ってみたプラグインを5つ紹介させていただこうと思います。

続きを読む

Visual Studio Codeをかわいく変身させたい!

f:id:styleedge_tech:20191204163229j:plain
Photo by Bruno Nascimento on Unsplash
はじめまして!スタイル・エッジLABOでインターンをしてます、MJです。

LABOでインターンを始めてはや2か月、ずっと思ってることがありました。
それはVisual Studio Codeをもっとかわいくさせたい、、!」ということ。
みなさまの中にもこんな考えを持った人いらっしゃるのではないでしょうか。

  • 見た目がかわいくないとテンションが上がらない

  • 見た目から入るタイプだ

  • 「カワイイはつくれる」

今回はそんなかわいい信者のエンジニアのために、Visual Studio Codeかわいくカスタマイズさせる方法についてご紹介します!
Visual Studio Codeにはたくさんの配色テーマがあり、その中にもかわいいものはたくさんありますが、わたしは配色テーマをさらにカスタマイズして自分好みのものに変えていきます。

カスタマイズ前

f:id:styleedge_tech:20191212141756p:plain かっこいいけど、もっとかわいさもほしい・・!ということで、まずはかわいい配色テーマを探していきます。

配色テーマのインストール

まず左下の歯車マークから配色テーマを選択します。 f:id:styleedge_tech:20191204123007p:plain

f:id:styleedge_tech:20191204123502p:plain
その他の色のテーマをインストールを選択すると、Marketplaceが表示されるので、その中から自分好みの配色テーマをインストールします。(かなりたくさんあるので、選ぶのも楽しいです!)

わたしは今回"Electron Color Theme"にしました! f:id:styleedge_tech:20191212141642p:plain
カラフルでかわいくなりましたが、タブや文字、カーソルの色などをもう少し変えたいので、ユーザー設定(settings.jsonファイル)から配色テーマを直接編集していきます。

settings.jsonの編集

ファイル > 基本設定 >設定 と進みます。 f:id:styleedge_tech:20191204125056p:plain
ワークベンチの中に、settings.jsonで編集があります。 f:id:styleedge_tech:20191204125541p:plain
それを選択すると、編集画面が表示されるので、直接編集します!

{
      "workbench.colorCustomizations"{
            "設定項目":"値"
   }
}

このように、カラーの設定を変更したい場合は、"workbench.colorCustomizations"の中に書き込みます。(配色以外にも様々な設定を編集することができます)

カラーを設定できる要素の一覧は、リンク先から見ることができます。

Theme Color | Visual Studio Code Extension API

カスタマイズ後

{
  "workbench.colorCustomizations": {
   "editorCursor.foreground": "#eaf4fc" //エディタカーソルの前景色
        "tab.activeBackground": "#88b5d3" //アクティブなタブの背景色
        "tab.activeBorder": "#88b5d3" //アクティブなタブの下罫線
        "activityBar.background": "#8384f5" //アクティビティバーの背景色
        "statusBar.noFolderBackground": "#ffadff" //フォルダーが開かれていないときのステータスバーの背景色
        "statusBar.background": "#ffadff" //標準ステータスバーの背景色
        "statusBar.noFolderForeground": "#ffffff" //フォルダーが開かれていないときのステータスバーの前景色
        "statusBar.foreground": "#ffffff" //標準ステータスバーの前景色
     }
 "editor.tokenColorCustomizations": { //配色テーマの文字カラー設定
        "[Electron]": {
            "comments": "#626063" //コメント
            "strings": "#fdeff2" //文字列
            "functions": "#99ccff" //関数
            "variables": "#ffadd6" //変数
     }
}

設定を変更した後は以下のような見た目になりました。パステルカラーがかわいいです!! f:id:styleedge_tech:20191212141924p:plain
エディタがかわいいとコーディングも捗りそうです!ぜひお試しください。

最後に

スタイル・エッジLABOでは、一緒に働く仲間を募集しています。 もし興味を持っていただけましたら、ぜひ採用サイトものぞいてみてください!

株式会社スタイル・エッジLABO採用サイト