VS Codeのファイルツリーをフィルターする拡張機能をつくりました

概要

ファイルやディレクトリが多いプロジェクトで開発するとき、VS Codeのファイルツリーでファイルが見つからなかったり、目が滑る経験はないでしょうか。特定の機能を開発しているとか、今関心のあるファイルは少ない場合も多いと思います。そんなあなたのために、VS CodeのExplorer viewのファイルツリーを絞り込んで表示する拡張機能をつくりました。

下のスクリーンショットのように、通常のツリーの下に絞り込まれたツリーが表示されます。

f:id:ryotarai:20220311104417p:plain

marketplace.visualstudio.com

どこかのだれかがすでに作ってそうですが…（もし類似拡張機能があったら教えて下さい）

つかいかた

インストール

Eda - Visual Studio Marketplace

インストールすると、Explorerの下の方にEDAが表示されるかと思います。

特定のファイルを表示する

Explorerのツリーからファイルを右クリック
Eda: Add a File

正規表現でファイルを絞る

コマンドパレットを開く (Ctrl(Cmd)-Shift-P)
Preferences: Open Workspace Settings (JSON)
以下のように、パターンを設定する

"eda.profiles": {
  "default": {
    "patterns": [
      {
        // includeFiles, excludeDirs, excludeFilesはワークスペースフォルダから相対パスにマッチします

        // この正規表現にマッチしたファイルが表示されます
        "includeFiles": ["\\.ts$"],
        // この正規表現にマッチしたディレクトリは除外されます
        // 表示が重い場合、.gitやnode_modulesなどのファイル数が多いディレクトリは除外しておくことをおすすめします
        "excludeDirs": ["^\\.git/", "^node_modules/"],
        // この正規表現にマッチしたファイルは除外されます
        "excludeFiles": ["\\.d\\.ts$"]
      }
    ]
  }
}

Ctrl(Cmd)-Pのようにファイルを開きたい

コマンドパレットからEda: Open a Fileを選択すると、それっぽいものが出てきます。

{
  "key": "alt+p",
  "command": "eda.openFile"
}

みたいにキーボードショートカットを設定しておくと、Alt(Option)-Pで開けて便利。

リポジトリ

github.com

2021-09-16

GitHub ActionsのOIDC id tokenでGCPにアクセスしてみた

注意: この記事は古くなっています。現在は正式リリースされています。ドキュメントはこちら

2021-08-25

SOELU株式会社に入社しました

2021/8/1付けでSOELU株式会社に入社しました。

オンラインヨガ・フィットネスのSOELU @soelu_official に入社しました。執行役員として経営に近いところで、技術基盤整えたりいわゆるSREをやったり、プロダクトが成長するためにいろいろやって行く予定です。各位今後ともよろしくお願いします！
— Ryota Arai (@ryot_a_rai) 2021年8月2日

SOELU @soelu_official に入社してから2週間ほど経ちましたが、さすがガチスタートアップ、広範囲にやること山積みで刺激的な日々を過ごしてます。現在、iOS/Androidエンジニア、UI/UXデザイナ絶賛募集中なので、ちょっっとでも興味あればとりあえずDMください〜
— Ryota Arai (@ryot_a_rai) 2021年8月19日

SOELU

SOELU（ソエル）というオンラインヨガ・フィットネスのサービスを提供しています。

https://soelu.com

ヨガ・トレーニングのライブレッスンが受けられるサービスです。
特徴としては、インストラクターとの双方向のコミュニケーションがとれたり、他の参加者には自分の姿が見えないようになっていて安心だったり。
コミュニケーション取りたくないときはインストラクターの映像が見えるだけの参加方法もありますし、ライブではないビデオレッスンもあります。

30日間100円でトライアルできるんで、ぜひ試してみてください。

なんで入社したの

SOELUのCEO, COOとは新卒同期で、起業した当初からたまーにコンタクトをとってました。
今年入ってから副業でちょっと手伝うようになって、社員にならないかとオファーをもらって、入社しました。
入社の理由は

すでにユーザがいて、事業が伸びている
- 個人的にはいわゆる0→1より、1→100的なフェーズのほうが得意な気がしている
まだ30人ぐらいの会社で、（執行役員として）上場に向けて挑戦できるチャンスなかなかなさそう
これから大きくなっていくのに向けて、これまでの会社での経験が活きそう
技術スタック的にもスキルが活きそう
小さい会社なので、コーポレートエンジニアリングとかセキュリティ周りのあれこれとか、あたらしい経験もできそう

という感じでしょうか。

技術スタック

雑にキーワードを並べるとこんな感じ。

ほぼGCP（ちょっとAWS）
Kubernetes (GKE)
Ruby on Rails
MySQL
React
Agora（ライブ配信の基盤として利用しています）
iOS: Swift
Android: Kotlin

（個人的には隙あらばGoを使っていきたいと思ってます）

開発チーム

エンジニアは一桁人、モバイルアプリは正社員は1名で、副業の方に手伝ってもらっています（募集中です！！）

www.wantedly.com

愉快な仲間たち

CTOの片岡↓

twitter.com

Webエンジニアのoreshinya↓

oreshinya.hatenablog.com

iOSエンジニアのmyammm_↓

note.com

採用してます

リモートワークメインなので、東京に住んでないという方でもぜひ。
（北海道に住んでいるメンバーもいます）

現在、iOS/Androidエンジニア募集中です！ちょっとでも興味ある方はhttps://twitter.com/ryot_a_raiにDMください。

その他のポジションは↓をごらんください。

www.wantedly.com

2016-09-14

AWS Management ConsoleでSwitch Roleした際にヘッダの色を変更する

AWS

AWSのManagement Consoleに他のアカウントのロールになりすませる機能があります。

docs.aws.amazon.com

大変便利なんですが、うっかり意図したアカウントと違うアカウントで操作をしてしまうと大惨事になりかねないので、雑user jsでヘッダ全体の色を変えてます。（以下のuser.jsではSwitch Roleしてないときに赤くしている）

ご活用ください。

f:id:ryotarai:20160914154513p:plain

gist.github.com

2016-03-29

AWSマネジメントコンソールを開くAlfred Workflow

AWS Alfred

f:id:ryotarai:20160329001913g:plain

タイトルの通りですが、AWSのマネジメントコンソールを開くAlfred Workflowを作りました。使い方は以下のとおり。

（Alfredをインストールする + Powerpackを買う）
open_aws_console.alfredworkflowをダウンロードして開いてインストール
Alfredでaws ec2のようにawsの後ろにサービス名をつなげる

サービスが増えたら適宜アップデートしていきます。ぜひご活用ください。

2016-02-23

Fluentdのin_forwardに流れているレコードをtcpdumpで見る

本番環境で動いているFluentdのin_forwardに何が流れているのかを知りたい、けど設定を触りたくない…みたいな場合に流れているタグやレコードを見る方法です。特にFluentdに限った話ではないですが、備忘録として書いておきます。

1. tcpdumpでキャプチャ

調べたいサーバ上で、tcpdumpを使ってパケットキャプチャを取ります。in_forwardのポート番号などを指定してキャプチャします。

$ sudo tcpdump -i eth0 -w fluentd.pcap port 24224 and tcp

2. tcptraceでTCPストリームのデータだけ吐き出す

tcptraceは-eオプションを渡すと、TCPストリームごとのデータをファイルに吐いてくれるのでこれを利用します。なお、tcptraceはHomebrewやaptで入ると思います。

$ tcptrace -e fluentd.pcap
1 arg remaining, starting with 'fluentd.pcap'
Ostermann's tcptrace -- version 6.6.7 -- Thu Nov  4, 2004

494 packets seen, 494 TCP packets traced
elapsed wallclock time: 0:00:00.005602, 88182 pkts/sec analyzed
trace file elapsed time: 0:00:25.927472
TCP connection info:
  1: host1:53633 - host2:24224 (a2b)  213>  213<  (reset)
  2: host1:53668 - host2:24224 (c2d)    1>    1<  (reset)
  3: host1:53669 - host2:24224 (e2f)   17>   17<  (reset)
  4: host1:53670 - host2:24224 (g2h)    1>    1<  (reset)
  5: host1:53671 - host2:24224 (i2j)   15>   15<  (reset)

Warning : some extracted files are incomplete!
          Please see -l output for more detail.

$ ls *_contents.dat
a2b_contents.dat e2f_contents.dat i2j_contents.dat

3. Fluentdのin_forwardに流す

あとは*.datファイルをFluentdのin_forwardに流し直すだけです。

たとえば、out_stdoutに吐くだけのFluentdを起動して、

$ cat fluentd.conf
<source>
  @type forward
</source>

<match **>
  @type stdout
</match>
$ fluentd -c fluentd.conf

ncで先ほどのdatファイルを食わせると、

$ cat *_contents.dat | nc localhost 24224

こんな感じでタグやレコードを見られます。

2016-02-22 20:10:58 +0900 test: {"agent":"foo","uuid":"574da95b-23f1-42eb-8738-d646588b5639"}
2016-02-22 20:10:58 +0900 test: {"agent":"foo","uuid":"0b585265-72de-4277-91bb-99c94e2e745b"}
2016-02-22 20:10:58 +0900 test: {"agent":"foo","uuid":"7c4a1b43-5c04-4bfc-8532-1f9533bc7828"}
2016-02-22 20:10:58 +0900 test: {"agent":"foo","uuid":"10b24574-f74c-465b-b2fa-92f124fcf85e"}
2016-02-22 20:10:58 +0900 test: {"agent":"foo","uuid":"064ad535-764b-4eaa-a67c-4dda4b0982ba"}
2016-02-22 20:10:58 +0900 test: {"agent":"foo","uuid":"76d67398-0f55-473e-abe3-a13ce14b31ad"}
2016-02-22 20:10:58 +0900 test: {"agent":"foo","uuid":"b499a04b-3d0d-4a88-8fdd-e5d8eb501d2e"}
2016-02-22 20:10:58 +0900 test: {"agent":"foo","uuid":"a7dcfbe6-fbfc-45d8-9702-fdc7ac9993d5"}

追記 2016/02/24

上記の手順でpcapファイルを変換するスクリプトを書いた

fluentd-pcap-converter.rb · GitHub

$ ls
host1.pcap
$ ruby fluentd-pcap-converter.rb host1.pcap
$ ls
host1.pcap
host1.pcap.output.20160224_0.log

2016-01-19

tracking branchのremote URLをみるpropen

zsh 用関数の propen、これ便利です。コマンドラインからプルリクを開く https://t.co/msRZcEVNap pic.twitter.com/jA4HXxOJlx
— Naoya Ito (@naoya_ito) 2016, 1月 4

で知ったGitHub - 作業中ブランチのプルリクエストをブラウザで開く - Qiitaがとても便利なんですが、origin以外にpushしているとプルリクの作成ができない（すでにプルリクがある場合はリダイレクトされる）ので、tracking branchのremote urlを参照するやつを書いた

function propen() {
  local current_branch_name=$(git symbolic-ref --short HEAD | xargs perl -MURI::Escape -e 'print uri_escape($ARGV[0]);')
  local remote=$(git branch -vv | grep '^*' | awk '{ print $4 }' | cut -d/ -f1 | sed -e 's/^\[//')
  local repo_url=$(git remote show -n $remote | grep 'Push  URL' | grep -E -o '[^ ]+$' | sed -e 's|^https://||' -e 's/^git@//' -e 's/\.git$//' -e 's|:|/|')
  open "https://${repo_url}/pull/${current_branch_name}"
}

$ git remote add fork git@github.com:ryotarai/itamae.git
$ git push -u fork awesome-feature
$ propen

とか叩くと、https://github.com/ryotarai/itamae/pull/awesome-featureが開く