Skip to main content

JetBrains系IDEのためのエラーインライン表示プラグイン

· One min read

まとめ​

すでにインストールしたgithub appsに権限を与えたのに403(permisisonがたりない)と言われる場合に確認すること

· One min read

まとめ​

すでにインストールしているgithub appsのpermissionを変更しても403(permisisonがたりない)と言われる場合には一旦アンインストールして再度インストールすると権限が反映される。

手順​

  1. github appsの詳細画面→Install Appから設定アイコンを選択
  2. 選択したappを該当のリポジトリからアンインストール
  3. 再度Install Appを選択した直して、リポジトリを選択してインストール

NextDNSを使ってみて広告ブロックが捗ったので紹介

· 6 min read

まとめ​

  • NextDNSは数年前にリリースされたdnsサービスで、各種広告などをdnsレベルでブロックすることが可能
  • 個人的にここがすごいNextDNS
  • 設定しておいたほうが良いこと
  • 気をつけること
    • 一部自分の設定だと使えなくなる機能が存在した
      • googleの検索結果上位に現れる広告(検索連動型広告)をクリックしてもdnsエラー画面に飛ぶようになった
        • 表示自体はされるので、単純にリンクが不明というような状況になる
      • 一部のサイトでadblock利用判定がされるようになった
        • 現状の利用範囲ではbusinessinsiderにアクセスした際にadblock利用と検知された
        • adblockを検知すると消すように促すサイトも時たまあるため、気をつける必要がある
      • 一部のアプリ内広告が利用できない場合があった
        • 広告を見ることでゲーム内の通貨などを取得できる仕組みのあるような場合、これ自体が機能しない場合があった
      • アフィリエイトリンクが一部機能しなくなった
        • (意図通りではあるが)一部のアフィリエイトリンクが機能しなくなり、特に楽天などの紹介リンクから素直に楽天市場に遷移できなくなった
        • あまり楽天市場を利用しないのでそこまで問題にはならないが、忘れた際にDNSエラーになる
    • 最初30万クエリまでは無料だが、課金しないと途中から広告ブロック機能がなくなる
    • NextDNS側にはクエリされたログが残るので、そういったものを気にする場合は注意
    • 意図せずブロックされた場合にフィルタ設定などを見直す必要がある
  • 余談
    • 以前slideshareのスライドから広告を削除する拡張を書いたが、NextDNS.ioを使うことでブラウザ拡張を入れる必要がなくなった
    • chromeの拡張だとPCのみでしかカバーできなかったが、これをすることでスマホでも同等の広告フリーなslideshare体験を得ることができるようになった

ref​

slideshareのスライド内広告を抑制するchrome拡張を書いた

· One min read

まとめ​

intellij系のエディタを最新に上げたらでタブ移動コマンドが効かなくなって困った

· One min read

tl;dr​

  • intellij系のエディタのタブの左右の移動のコマンドがあり、ブラウザと同様 cmd + shift + [ と cmd + shift + ] が振られている
  • intellijを最新版に上げたら、これらのコマンドが効かなくなって困った
  • 該当のkeymapを一旦削除してつけ直せば直る
    • select previous tab と select next tab が該当のコマンド

現在のタブをそのまま新しいウィンドウとして切り出すchrome拡張を書いた

· One min read

tl;dr​

  • 現在の作業のタブを新しいウィンドウとして開いて作業を継続したい場合が多い
  • vimiumの shift + W コマンドで実現できるが、vimiumはgithubで様々なコマンドとの競合が発生するため使えない
  • 新しいタブを開いてウィンドウを切り出すだけのchrome拡張を書いた。これで快適

Refs​

CircleCI設定の痛みをTypeScriptで解消するアイディア

· 8 min read

tl;dr​

  • circleciのyamlを書く/メンテンするのは辛い
  • javascirpt objectをjs-yamlでdumpするようにすればtypescirptの補完が受けられる
  • typescirptの型生成の方法はいくつかありそうだが、現状仕様変更に追従するのが厳しそう

CircleCI設定の痛みをTypeScriptで解消するアイディア

CircleCIの設定ファイルcircle.ymlをメンテナンスすることは、往々にして難しいです。YAMLの書式に苦戦したり、JSON Schemaによる補完が十分ではない場合があります。この記事では、TypeScriptを使ってCircleCI設定の問題を解決する方法を紹介します。

YAMLの悩み​

YAMLを直接書くことは煩雑で、アンカーを使って回避する方法も癖があります。また、JSON Schemaによる補完はある程度効果があるものの、十分強力ではないため、困難な状況がしばしば発生します。

circleci-config-sdk-tsの限界​

circleci-config-sdk-tsは、CircleCIの設定を扱うための公式のライブラリですが、宣言的ではないため、思ったように書くことができません。

TypeScriptで解決​

TypeScriptを使って以下の手順で問題を解決できそうです。

  1. TypeScript用の型を作成する
  2. 型に合致するJavaScriptオブジェクトを作成する
  3. js-yamlでJavaScriptオブジェクトをYAMLに変換する
  4. TypeScript用の型を作成する方法
  5. 型を作成するには、以下の方法が考えられます。

以下で実際に型を生成するアイディアをまとめます

JSON Schemaから生成する方法​

JSON Schemaからtypescirptの型を生成するパッケージがあるため、それもとに生成することができます。

Chat GPTにconfig referenceから生成させる方法​

config referenceを読ませて型を生成させる事もできます。

実際に生成させてみましたが、ある程度使えそうなものを出すことができました

出力例

実際の使い方​

実際にconfig.ymlを作る場合は以下のように型を使えばいい感じに型チェックができます

import { type JSONSchemaForCircleCIConfigurationFiles } from "./types/circleci-config-types";
import { dump } from "js-yaml";
import fs from "fs";

const config: JSONSchemaForCircleCIConfigurationFiles = {
  version: 2.1,
  jobs: {
    build: {
      docker: [
        {
          image: "circleci/<language>:<version TAG>",
          auth: {
            username: "mydockerhub-user",
            password: "$DOCKERHUB_PASSWORD",
          },
        },
      ],
      steps: [
        "checkout",
        "setup_remote_docker",
        {
          setup_remote_docker: {
            version: "20.10.18",
          },
        },
        {
          run: 'echo "this is the build job"',
        },
      ],
    },
    test: {
      docker: [
        {
          image: "circleci/<language>:<version TAG>",
          auth: {
            username: "mydockerhub-user",
            password: "$DOCKERHUB_PASSWORD",
          },
        },
      ],
      steps: [
        "add_ssh_keys",
        {
          run: 'echo "this is the test job"',
        },
      ],
    },
  },
  workflows: {
    version: 2,
    build_and_test: {
      jobs: ["build", "test"],
    },
  },
};

fs.writeFileSync("output.yaml", dump(config));

さらなる改善​

今後の展望として、以下の改善が考えられます。

  • npm packageとして公開
  • Zodスキーマによる検証を追加
    • TypeScriptでは、min/max/regex/defaultなどの検証ができないため、Zodスキーマに変換したい（現状では適切な変換ができていない）
  • デフォルトの設定を自動生成させるようにしたい
  • GitHub Workflow/GitHub Actionsでも同様のことができるはず
    • actionlintのように、GitHub Actionsの独自構文内の諸々にも対応できると良いでしょう
    • 以上で、CircleCI設定ファイルの書き方やメンテナンスが、TypeScriptを利用することでより容易になります。

今回紹介した手法を活用することで、CircleCIの設定ファイルの管理がスムーズになり、エラーや誤りを減らすことが期待できます。

補足​

以上の文章は適当にtl;drを作った上でchat GPTにだいたい書いてもらいました。いい感じの文章が出てきたので、ソレに適切にリファレンスを追加するだけで完了したので楽でした。

だいたいのプロンプト

https://mkusaka.com/ の文調を参考に、以下の概要を満たすようなブログを書きなさい

# tl;dr
## circleciのyamlを書く/メンテンするのは辛い
  - yamlを生で書くのは辛い
    - 回避するためのアンカーも癖がある
  - json schemaによる補完もある程度効くが、そこまで強くないので困る事が多い
## [circleci-config-sdk-ts](https://github.com/CircleCI-Public/circleci-config-sdk-ts)があるが、宣言的ではないので思ったようにはかけない
## これらはtypescriptで補完させながら対応することで解消できそう
1. 何らかの方法でtypescript用の型を作成
2. 型に合致するようにjs objectを作る
3. js-yamlでjs objectをyamlに変換

### typescript用の型を作成する方法
  - json schemaから生成する方法
    - json schemaから型を生成し、それにマッチするようにjavascriptのobjectを書く
  - chat gptにconfig referenceから生成させる方法
    - config referenceを読ませることで型を生成させる

だいたい生成できた結果を載せる
- https://github.com/mkusaka/ciconfig
- https://www.typescriptlang.org/

## 次の１手
  - zod schemaによる検証を加えたい
    - typescriptだとmin/max/regex/defaultなどの検証ができないので、zod schemaに翻訳させたい(現状は適切な変換ができていない)
  - デフォルトのものは自動で生成させるようにしたい
  - 同じことをgithub workflow/github actionsでもできるはず
    - actionlintのようにgithub actionsの独自構文内の諸々にも対応できると良さそう

tab shifterのvscode版コマンドメモ

· 2 min read

tl;dr​

  • tab shifterの機能のうち、分割したwindow間でタブを移動する機能はvscodeが標準で提供している
  • macの場合は ctrl + cmd + → , ctrl + cmd + ← で、windowsの場合は ctrl + alt + → , ctrl + alt + ← で移動できる
  • 移動する以外の機能はないので、必要に応じて他の機能とくみあわせて使うこと

補足​

  • 分割ウィンドウがない場合にウィンドウを新しく作成して、そこにタブを移動する 機能はないので、vimのコマンドと組み合わせている
    • vim で c-w c-s したあとに上記コマンドを実行するなど

参考​

typescript-fetch generator に enum を union で生成するオプション追加した

· 6 min read

tl;dr​

  • OpenAPI Generatorと呼ばれるOpenAPI Specificationファイルからクライアントを自動生成するツールに fetch & typescript の組み合わせでクライアントを生成するオプションが有る
  • 従来、OpenAPI Specification で言う enum を typescript の enum に変換してクライアントを生成していた
  • 今回、enum ではなく typescript の Union へ変換することもできるオプションが追加されたので、enum に対して懸念がある場合はこちらも検討してみると良いよ(実際にはデフォルトで Union へ変換されるため、enum を使いたい場合はオプションを true にすると良い)

OpenAPI Generator について​

OpenAPI Specification は web api のリクエスト・レスポンスの言語によらないインターフェイスを提供するための仕様で openapi-generator はそこから自動的にクライアントのコードを生成するツールです。

同様にクライアントコードを生成するツールはたくさんありますが、openapi-generator は多くの言語/FW をサポートしており、またダウンロード数などを見てもデファクトに近いような形で使われているようです。

typescript 向けのものに関しては fetch をクライアントとして利用する typescript-fetch や axios をクライアントとして利用する typescript-axios などがあります。

stringEnums オプション​

OpenAPI Specification は enum をサポートしており、OpenAPI Generator はこれを各言語で対応する表現にしてコードを生成します。

オプションが実装される前に生成されたコード​

typescript-fetch 向けの生成においては、今までこれを typescript の enum に変換していました。

# original.yaml
openapi: 3.0.0
# ...
paths:
  # ...
  /pet/findByStatus:
    get:
      # ...
      parameters:
        - name: status
          in: query
          # ...
          schema:
            type: array
            items:
              type: string
              enum:
                - available
                - pending
                - sold
export enum FindPetsByStatusStatusEnum {
  Available = "available",
  Pending = "pending",
  Sold = "sold",
}

ここで利用されている typescript の enum はtree shaking との相性やtypescript 独自のものになってしまっていたり、型安全ではないような事があったりなどの懸念が指摘されているのもあり、利用を控えたい人も少なからず存在する状況です。実際こちらの記事などでは OpenAPI Generator によって enum が生成されてしまうという箇所が懸念として指摘されています。

個人的のもこの点はどうにかしたいと思っていたため、OpenAPI Generator 本体に Union として出力できるオプションを追加するPull Requestをマージしてもらいました。

オプション実装後に生成されるコード​

オプション実装後、この動作はデフォルトで有効になり、以下のようなコードを生成するようになります。

export const FindPetsByStatusStatusEnum = {
  Available: "available",
  Pending: "pending",
  Sold: "sold",
} as const;

export type FindPetsByStatusStatusEnum =
  typeof FindPetsByStatusStatusEnum[keyof typeof FindPetsByStatusStatusEnum];

元の enum を生成する挙動のままとしたい場合 は stringEnums オプションを true にすると元の挙動のままになります。(ex: )

※この実装は typescript-axios に対して実装されたもの をそのまま借用している形で実装されいています。個人的には const で宣言した変数と同一の名前で宣言した type がうまく動くのが割と面白いなと思って実装していました。

今すぐ使いたい場合には​

stringEnums オプションが実装されたバージョンはまだリリースがされていません(2022 年の 5 月以降になる予定ですが、現状は決まっていません)。今すぐ利用をしたい場合はdockerの latest であれば利用ができます。

# enumのままとしたい場合
docker run --rm -v ${PWD}:/local openapitools/openapi-generator-cli generate -i /local/spec.yaml -g typescript-fetch -o local/generated/ -p stringEnums=true
# union型を生成したい場合(デフォルトでunionを生成するので、オプションの指定は不要)
docker run --rm -v ${PWD}:/local openapitools/openapi-generator-cli generate -i /local/spec.yaml -g typescript-fetch -o local/generated/

現在 OpenAPI Generator は次のメジャーバージョン向けての準備中であるため、いくつかの fallback なしの breaking changes が含まれている場合があることには注意が必要です。

参考​