swfz[:memo]'s RSS Feed

スプレッドシートのエディタ内でコメント的な文字列を残す

Sun, 26 Jan 2025 00:00:00 GMT

あるていど定期的には使うが、データの公開範囲をコントロールしたいとか、BigQueryなどのサービスにデータを入れてまでやるほどではない簡単な集計や分析などでは、スプレッドシートに関数をいろいろ書いて済ませてしまうことがよくある

そもそも読めないほど複雑になるのであればGASなりスクリプトなりでコード書いて処理したほうがよい場合もあるが…

コメント機能があるといくらか楽になるなーって場面に結構遭遇しているのでそういう機能がないかちょっと調べたら見つかった

T - Google ドキュメントエディタヘルプ

N - Google ドキュメントエディタヘルプ

2つを組み合わせることでコメント的なもの（セルの内容に影響を与えず、メモ的な感じ）を残すことが可能になる

例

=SUM(A1:A)&T(N("A列の値をすべて足した値"))

各関数の詳細な挙動はドキュメントを読むのが一番良いがポイントだけピックアップすると

Nは指定された引数を数値として返すが、文字列を渡すと0を返す
Tは指定された引数をテキストとして返すが、0などの数字を渡すと何もない空白を返す、FALSEなどの真偽値でも空白を返す

この2つの特性を利用する

これらの関数を組み合わせ、本来の計算結果と結合させてしまえば特にセルの内容には影響なくテキストを残すことが可能になる

複数行に渡る関数の組み合わせの処理を書いたりした場合など、行末にこれらを結合させておけばそれこそコメントっぽくなる

かなり便利！

もう少し複雑な例

結果が数値を期待する箇所では、コメント処理を結合させてしまうと文字列として扱われてしまうため、見た目が数値用の右寄せから左寄せになってしまったりするので注意が必要

おわり

スプレッドシート内で配列処理とかを書いていると「あれ?この列はFだっけ?Gだっけ?」など座標と文字列や数字をマッピングさせるのがいちいちたいへんで読むたびに脳内で変換処理を入れるのでかなり時間を使う

ある程度定型な処理であれば名前付き関数を用意してわかりやすいように定義してしまうのもありだが、やはりその場にコメントとして「この処理はこの列（◯◯の数値）を△している」というのが残っているだけでかなり負担が減る

まぁ、コメントと実態が乖離しているとまたそれはそれでたいへんなので適切な用法用量で使うのが良さそう

plasmo使っているリポジトリでCIとローカル型チェックの結果が合わない

Tue, 14 Jan 2025 00:00:00 GMT

Plasmo使ってCrome拡張を開発している時の話

CIで型チェックを入れたらCIだと落ちるがローカルだと通る状態になっていた

型チェックのコマンド

tsc --noEmit

一部抜粋

Error: src/components/sample.tsx(17,7): error TS2322: Type 'string' is not assignable to type 'never'.

すべてsendToBackgroundの引数でnameを指定している部分

最初全然意味がわからなかったがいろいろみていったら納得行くまでには落とし込めたのでメモ

tsconfig.json

これはどこかの記事から引っ張ってきたやつだったはず…

{
  "extends": "plasmo/templates/tsconfig.base",
  "exclude": ["node_modules"],
  "include": [".plasmo/index.d.ts", "./**/*.ts", "./**/*.tsx"],
  "compilerOptions": {
    "jsx": "react-jsx",
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "isolatedModules": true,
    "verbatimModuleSyntax": false,
    "noUncheckedIndexedAccess": true,
    "paths": {
      "~*": ["./*"]
    },
    "baseUrl": "."
  }
}

よく見ると、includeに.plasmo/index.d.tsという指定がある…

で、これは何かというと

.plasmo/index.d.ts

import "./process.env"
import "./messaging"

追う

.plasmo/messaging.d.ts

import "@plasmohq/messaging"

interface MmMetadata {
	"batchConnector" : {}
	"connector" : {}
	"forwarder" : {}
}

interface MpMetadata {
	
}

declare module "@plasmohq/messaging" {
  interface MessagesMetadata extends MmMetadata {}
  interface PortsMetadata extends MpMetadata {}
}

plasmoにより自動生成されているファイル

なるほどー…

型定義をしている

.plasmoディレクトリ

.plasmoディレクトリは、plasmo devなりbuildなり何かしらコマンドを打つと生成される

.gitignoreにも記載されていたのでバージョン管理的には除外したいディレクトリのよう

.gitignore

.plasmo

ローカルとCIで差分が出る原因

CIでは事前にbuildやdevなどのコマンドは実行せずtsc --noEmitを実行しているため、先の型定義が生成されないから結果が異なりエラーとなると…

plasmoでは特定ディレクトリにMessaging系のハンドラを置く、など規約が決まっていてその規約をもとにこのinterface MmMetadataなどの内容が生成されるよう

plasmohq/messagingの型定義を拡張させる記述がある(declare module)

現在の対象ディレクトリのファイル

$ ls src/background/messages/
batchConnector.ts connector.ts forwarder.ts

Mmはmessages、おそらくMpはportsだと思われる、自分は現在Portsによるメッセージングは使っていないので追加記述はない

sendToBackgroundを使うときにnameプロパティを存在しないファイル名にすると型チェックで怒られていたのはこういうことをしていたから

対象ディレクトリを見に行って存在するファイル名から型定義に落とし込んでいるっていうことみたい

どこで型定義ファイルを作っているのか

plasmo/cli/plasmo/src/features/background-service-worker/bgsw-messaging-declaration.ts at 484d2b99ade2094ebb677d6fe4f6ec97422fe260 · PlasmoHQ/plasmo

この辺っぽい

環境変数なりオプションなりで何かしら差し込んでやれる余地はあるか確認したが、何か差し込めそうなものもなさそう

解決方法

ということで、不本意ではあるが.gitignoreを修正して都度生成される型定義だけGit管理する運用にした

.gitignore

# plasmo  
-.plasmo  
+.plasmo/*  
+  
+!.plasmo/  
+!.plasmo/index.d.ts  
+!.plasmo/messaging.d.ts

おわり

その後ドキュメント読み直してたら書いてあった

Messaging API – Plasmo

読んだ気がするが実際にそういう場面に遭遇しないとピンとこないものだな…

denoでインストールしたコマンドのリストを見たい

Sun, 12 Jan 2025 00:00:00 GMT

コマンドはなさそうだった

helpを見ると次のような記述があった

$ deno install -h
.....
.....
.....
.....
The installation root is determined, in order of precedence:
  - --root option
  - DENO_INSTALL_ROOT environment variable
  - $HOME/.deno

この順序で指定のあるディレクトリに保存される

$ echo $DENO_INSTALL_ROOT
/home/user/.local/share/mise/installs/deno/2.0.6/.deno

$ echo $HOME
/home/user

自分の環境だとDENO_INSTALL_ROOTに指定があった

miseを使っているのでそこで設定されているみたい

Denoのバージョンが上がるとディレクトリも変わるのでcommand not foundとなる

なのでDenoのバージョンが上がればインストールし直すって感じか

コマンドリストの確認

指定があったディレクトリのbinディレクトリを見にいけば良い

ls ~/.local/share/mise/installs/deno/*/.deno/bin
/home/user/.local/share/mise/installs/deno/2.0.6/.deno/bin:
deployctl*  logviewer*

/home/user/.local/share/mise/installs/deno/2.0/.deno/bin:
deployctl*  logviewer*

/home/user/.local/share/mise/installs/deno/2/.deno/bin:
deployctl*  logviewer*

/home/user/.local/share/mise/installs/deno/latest/.deno/bin:
deployctl*  logviewer*

全バージョンでのリスト

現状使っているDenoバージョンでのコマンドリストを見たい場合は

ls $DENO_INSTALL_ROOT/bin

で良い

蛇足

miseの仕様っぽいが、latest,2,2.0は2.0.6へのシンボリックリンクだった

そして過去にインストールしたバージョンのコマンドも見ることができるかと思っていたができなかった

古いバージョンのディレクトリはmiseにより削除されている模様

miseのバージョン

mise -v
2024.11.37 linux-x64 (7ac5ab3 2024-11-30)

まぁ必要なものだけ入れ直してねって話ではあるけど、upgradeまえに確認はしておきたいやつ

環境変数指定がない場合

ls $HOME/.deno/bin

GitHub GraphQL APIのContributionの仕様を調べてみた

Tue, 24 Dec 2024 00:00:00 GMT

Kusa Imageではサーバ側でGitHubのGraphQL APIを利用している

勝手に1年分?のデータがしっかり返ってくるんだろうと思っていたが、いくつか出力した画像を確認したらGitHubで閲覧できる草と微妙に差がありそう…とういことで調べてみた

よく調べてみると正確に1年分ではなさそうという話

公式Doc

オブジェクト - GitHub Docs

一応読んだうえで調べた

GraphQLのQuery

下記のクエリを叩いている

  const query = `
    query($user:String!) {
      user(login: $user){
        contributionsCollection${to ? `(to:"${to}T00:00:00")` : ""} {
          contributionCalendar {
            totalContributions
            colors
            isHalloween
            weeks {
              contributionDays {
                color
                contributionCount
                contributionLevel
                date
              }
            }
          }
        }
      }
    }
  `;

toにはYYYY-MM-DDの形式で日付が渡される

デバッグしてみた

このデバッグ結果を出すまでにもかなりいろいろためしたがメモ残してなかったのでこれだけ

上記のクエリで受け取ったレスポンスを数年分集計してログに出してみた

検証コード

一部抜粋なので全然何のこと?って感じだと思うけど一応載せておく

      const weeks = data.data.user.contributionsCollection.contributionCalendar.weeks;
      const len = weeks.reduce((n, w) => n + w.contributionDays.length, 0);
      console.log(
        'to:', `${year}-12-31`,
        ', 日数: ', len,
        ', 週数: ', weeks.length,
        ', 最後', weeks.at(-1).contributionDays.at(-1).date,
        ': ', weeks.at(-1).contributionDays.at(-1).contributionCount,
        ', 最初', weeks[0].contributionDays[0].date,
        ': ', weeks[0].contributionDays[0].contributionCount,
        ', 最終週: ', weeks.at(-1).contributionDays.length,
        `${[2044,2040,2036,2032,2028,2024,2020,2016,2012,2008,2004,2000,1996].includes(year) ? '閏年' : ''}`
      );

出力の内容

「to」は上記クエリに渡しているパラメータ

「日数」は返ってきたレスポンスの総日数

「週数」は返ってきたレスポンスの総週数

「最初」の項目は各コントリビューションのデータの最初の日付とcontributionCount

「最後」の項目は各コントリビューションのデータの最後の日付とcontributionCount

「最終週」の項目は最終週の配列のlength、1なら日曜で終わり、2なら月曜日で終わり、要は今のクエリだとtoの日付が何曜日か、1が日曜で7が土曜

最後にうるう年かどうかのフラグ、これは調べて決め打ちでチェックした

to: 2024-12-31 , 日数: 367 , 週数: 53 , 最後 2024-12-31 : 0 , 最初 2023-12-31 : 10 , 最終週: 3 閏年  
to: 2023-12-31 , 日数: 365 , 週数: 53 , 最後 2023-12-31 : 10 , 最初 2023-01-01 : 3 , 最終週: 1  
to: 2022-12-31 , 日数: 366 , 週数: 53 , 最後 2022-12-31 : 15 , 最初 2021-12-31 : 11 , 最終週: 7  
to: 2021-12-31 , 日数: 366 , 週数: 53 , 最後 2021-12-31 : 11 , 最初 2020-12-31 : 4 , 最終週: 6  
to: 2020-12-31 , 日数: 367 , 週数: 53 , 最後 2020-12-31 : 4 , 最初 2019-12-31 : 0 , 最終週: 5 閏年  
to: 2019-12-31 , 日数: 366 , 週数: 53 , 最後 2019-12-31 : 0 , 最初 2018-12-31 : 0 , 最終週: 3  
to: 2018-12-31 , 日数: 366 , 週数: 53 , 最後 2018-12-31 : 0 , 最初 2017-12-31 : 2 , 最終週: 2  
to: 2017-12-31 , 日数: 365 , 週数: 53 , 最後 2017-12-31 : 2 , 最初 2017-01-01 : 0 , 最終週: 1  
to: 2016-12-31 , 日数: 367 , 週数: 53 , 最後 2016-12-31 : 0 , 最初 2015-12-31 : 4 , 最終週: 7 閏年  
to: 2015-12-31 , 日数: 366 , 週数: 53 , 最後 2015-12-31 : 4 , 最初 2014-12-31 : 0 , 最終週: 5  
to: 2014-12-31 , 日数: 366 , 週数: 53 , 最後 2014-12-31 : 0 , 最初 2013-12-31 : 0 , 最終週: 4  
to: 2013-12-31 , 日数: 366 , 週数: 53 , 最後 2013-12-31 : 0 , 最初 2012-12-31 : 0 , 最終週: 3  
to: 2012-12-31 , 日数: 366 , 週数: 53 , 最後 2012-12-31 : 0 , 最初 2012-01-01 : 0 , 最終週: 2 閏年  
to: 2011-12-31 , 日数: 366 , 週数: 53 , 最後 2011-12-31 : 0 , 最初 2010-12-31 : 0 , 最終週: 7  
to: 2010-12-31 , 日数: 366 , 週数: 53 , 最後 2010-12-31 : 0 , 最初 2009-12-31 : 0 , 最終週: 6  
to: 2009-12-31 , 日数: 366 , 週数: 53 , 最後 2009-12-31 : 0 , 最初 2008-12-31 : 0 , 最終週: 5  
to: 2008-12-31 , 日数: 367 , 週数: 53 , 最後 2008-12-31 : 0 , 最初 2007-12-31 : 0 , 最終週: 4 閏年  
to: 2007-12-31 , 日数: 366 , 週数: 53 , 最後 2007-12-31 : 0 , 最初 2006-12-31 : 0 , 最終週: 2  
to: 2006-12-31 , 日数: 365 , 週数: 53 , 最後 2006-12-31 : 0 , 最初 2006-01-01 : 0 , 最終週: 1  
to: 2005-12-31 , 日数: 366 , 週数: 53 , 最後 2005-12-31 : 0 , 最初 2004-12-31 : 0 , 最終週: 7  
to: 2004-12-31 , 日数: 367 , 週数: 53 , 最後 2004-12-31 : 0 , 最初 2003-12-31 : 0 , 最終週: 6 閏年  
to: 2003-12-31 , 日数: 366 , 週数: 53 , 最後 2003-12-31 : 0 , 最初 2002-12-31 : 0 , 最終週: 4  
to: 2002-12-31 , 日数: 366 , 週数: 53 , 最後 2002-12-31 : 0 , 最初 2001-12-31 : 0 , 最終週: 3  
to: 2001-12-31 , 日数: 366 , 週数: 53 , 最後 2001-12-31 : 0 , 最初 2000-12-31 : 0 , 最終週: 2  
to: 2000-12-31 , 日数: 365 , 週数: 53 , 最後 2000-12-31 : 0 , 最初 2000-01-02 : 0 , 最終週: 1 閏年  
to: 1999-12-31 , 日数: 366 , 週数: 53 , 最後 1999-12-31 : 0 , 最初 1998-12-31 : 0 , 最終週: 6  
to: 1998-12-31 , 日数: 366 , 週数: 53 , 最後 1998-12-31 : 0 , 最初 1997-12-31 : 0 , 最終週: 5  
to: 1997-12-31 , 日数: 366 , 週数: 53 , 最後 1997-12-31 : 0 , 最初 1996-12-31 : 0 , 最終週: 4  
to: 1996-12-31 , 日数: 367 , 週数: 53 , 最後 1996-12-31 : 0 , 最初 1995-12-31 : 0 , 最終週: 3 閏年  
to: 1995-12-31 , 日数: 365 , 週数: 53 , 最後 1995-12-31 : 0 , 最初 1995-01-01 : 0 , 最終週: 1

仕様の考察

なんとか勝手に納得いくところまで来た

APIの仕様を推察すると

与えられた範囲パラメータを元に

53週分表示（これは固定）
366日分（うるう年の場合は367）

を返すようにしているっぽい

365日分の年は?

2023年、2017年は12/31が日曜の年

日曜が最終日なので週のレコード数は1

この画像の右端部分

そこを起点に366日分並べていくと54週になってしまうためカットされているので365日分のレスポンスが返ってくると思われる

カットしても1/1スタートになるため1年分は担保できているっていう感じっぽい?

それなら閏年かつ12/31が日曜日のときはどうなるの?と思い対象期間を伸ばしてだしてみたところやはりビンゴだった

2000年は1/2が最初のデータになっていたのでそういうことですねって感じで納得＋スッキリ

このときはGitHubなかったと思う?ので問題ないのかな

GitHubがスタートしたのは2008年かららしいのでまぁ範囲外だった、何年かに一度は問題起きるけど通常は問題起きないよねっていうケースのよう

次いつ来るんだろうか…見てみたい

未来の期間もクエリはできたので将来いつ起きるのかな?と調べてみた

to: 2044-12-31 , 日数: 367 , 週数: 53 , 最後 2044-12-31 : 0 , 最初 2043-12-31 : 0 , 最終週: 7 閏年  
to: 2043-12-31 , 日数: 366 , 週数: 53 , 最後 2043-12-31 : 0 , 最初 2042-12-31 : 0 , 最終週: 5  
to: 2042-12-31 , 日数: 366 , 週数: 53 , 最後 2042-12-31 : 0 , 最初 2041-12-31 : 0 , 最終週: 4  
to: 2041-12-31 , 日数: 366 , 週数: 53 , 最後 2041-12-31 : 0 , 最初 2040-12-31 : 0 , 最終週: 3  
to: 2040-12-31 , 日数: 366 , 週数: 53 , 最後 2040-12-31 : 0 , 最初 2040-01-01 : 0 , 最終週: 2 閏年  
to: 2039-12-31 , 日数: 366 , 週数: 53 , 最後 2039-12-31 : 0 , 最初 2038-12-31 : 0 , 最終週: 7  
to: 2038-12-31 , 日数: 366 , 週数: 53 , 最後 2038-12-31 : 0 , 最初 2037-12-31 : 0 , 最終週: 6  
to: 2037-12-31 , 日数: 366 , 週数: 53 , 最後 2037-12-31 : 0 , 最初 2036-12-31 : 0 , 最終週: 5  
to: 2036-12-31 , 日数: 367 , 週数: 53 , 最後 2036-12-31 : 0 , 最初 2035-12-31 : 0 , 最終週: 4 閏年  
to: 2035-12-31 , 日数: 366 , 週数: 53 , 最後 2035-12-31 : 0 , 最初 2034-12-31 : 0 , 最終週: 2  
to: 2034-12-31 , 日数: 365 , 週数: 53 , 最後 2034-12-31 : 0 , 最初 2034-01-01 : 0 , 最終週: 1  
to: 2033-12-31 , 日数: 366 , 週数: 53 , 最後 2033-12-31 : 0 , 最初 2032-12-31 : 0 , 最終週: 7  
to: 2032-12-31 , 日数: 367 , 週数: 53 , 最後 2032-12-31 : 0 , 最初 2031-12-31 : 0 , 最終週: 6 閏年  
to: 2031-12-31 , 日数: 366 , 週数: 53 , 最後 2031-12-31 : 0 , 最初 2030-12-31 : 0 , 最終週: 4  
to: 2030-12-31 , 日数: 366 , 週数: 53 , 最後 2030-12-31 : 0 , 最初 2029-12-31 : 0 , 最終週: 3  
to: 2029-12-31 , 日数: 366 , 週数: 53 , 最後 2029-12-31 : 0 , 最初 2028-12-31 : 0 , 最終週: 2  
to: 2028-12-31 , 日数: 365 , 週数: 53 , 最後 2028-12-31 : 0 , 最初 2028-01-02 : 0 , 最終週: 1 閏年  
to: 2027-12-31 , 日数: 366 , 週数: 53 , 最後 2027-12-31 : 0 , 最初 2026-12-31 : 0 , 最終週: 6  
to: 2026-12-31 , 日数: 366 , 週数: 53 , 最後 2026-12-31 : 0 , 最初 2025-12-31 : 0 , 最終週: 5  
to: 2025-12-31 , 日数: 366 , 週数: 53 , 最後 2025-12-31 : 0 , 最初 2024-12-31 : 0 , 最終週: 4

近い将来だと次の閏年じゃんw

2028年はこの現象が起きるはず!

367日分の年は?

これも53週までしか返さないという仕様によるものかと思われる

うるう年の年は基本367日分のデータが返っているが、年の最終日が2（月曜日）の年は366日分が返ってきている

これは最初の週は7つデータが入っているのでこれ以上入らないという感じで説明が付きそう

おまけ

contributionsCollectionのto,fromはDateTime型を期待されているようだったので、変えたらどうなるんだろうと思い調べてみた

contributions.graphql

query($userName:String! $from:DateTime $to:DateTime) {
  user(login: $userName){
    contributionsCollection(from: $from, to: $to) {
      contributionCalendar {
        totalContributions
        colors
        isHalloween
        weeks {
          contributionDays {
            color
            contributionCount
            contributionLevel
            date
          }
        }
      }
    }
  }
}

最初と最後のデータを出力

gh api graphql -f query="$(cat contributions.graphql)" -f userName=swfz | jq '.data.user.contributionsCollection.contributionCalendar.weeks|[.[0].contributionDays[0],(.[length-1].contributionDays|.[length-1])]'
[
  {
    "color": "#40c463",
    "contributionCount": 13,
    "contributionLevel": "SECOND_QUARTILE",
    "date": "2023-12-17"
  },
  {
    "color": "#40c463",
    "contributionCount": 11,
    "contributionLevel": "SECOND_QUARTILE",
    "date": "2024-12-18"
  }
]

2022

gh api graphql -f query="$(cat contributions.graphql)" -f userName=swfz -f from=2022-01-01T00:00:00Z -f to=2022-12-31T23:59:59Z | jq '.data.user.contributionsCollection.contributionCalendar.weeks|[.[0].contributionDays[0],(.[length-1].contributionDays|.[length-1])]'
[
  {
    "color": "#40c463",
    "contributionCount": 23,
    "contributionLevel": "SECOND_QUARTILE",
    "date": "2022-01-01"
  },
  {
    "color": "#9be9a8",
    "contributionCount": 15,
    "contributionLevel": "FIRST_QUARTILE",
    "date": "2022-12-31"
  }
]

toの時刻を00:00:00にした場合

gh api graphql -f query="$(cat contributions.graphql)" -f userName=swfz -f from=2022-01-01T00:00:00Z -f to=2022-12-31T00:00:00Z | jq '.data.user.contributionsCollection.contributionCalendar.weeks|[.[0].contributionDays[0],(.[length-1].contributionDays|.[length-1])]'
[
  {
    "color": "#40c463",
    "contributionCount": 23,
    "contributionLevel": "SECOND_QUARTILE",
    "date": "2022-01-01"
  },
  {
    "color": "#9be9a8",
    "contributionCount": 15,
    "contributionLevel": "FIRST_QUARTILE",
    "date": "2022-12-31"
  }
]

fromのとき刻を23:59:59にした

gh api graphql -f query="$(cat contributions.graphql)" -f userName=swfz -f from=2022-01-01T23:59:59Z -f to=2022-12-31T00:00:00Z | jq '.data.user.contributionsCollection.contributionCalendar.weeks|[.[0].contributionDays[0],(.[length-1].contributionDays|.[length-1])]'
[
  {
    "color": "#40c463",
    "contributionCount": 23,
    "contributionLevel": "SECOND_QUARTILE",
    "date": "2022-01-01"
  },
  {
    "color": "#9be9a8",
    "contributionCount": 15,
    "contributionLevel": "FIRST_QUARTILE",
    "date": "2022-12-31"
  }
]

両方ContributionCountの数は変わらず

ということで日付部分しか見てなさそう、データ量を考慮してもサマリーされたテーブルを参照するだろうしDateTimeで問い合わせる理由なさそうなんだけどな

何か理由があるかもしれないが、推測くらいしかできないのでここで終わり、日付だけで投げさせてもらいたい感がある…

Deno Web Cacheを使ってGitHub APIへのリクエストをキャッシュする

Mon, 23 Dec 2024 00:00:00 GMT

DenoのWeb Cache APIが使えるようになっていた

待望っちゃ待望なのでどこかで使ってみたいなと思っていたがちょうどGitHubのコントリビューションを過去数年分さかのぼって1つの画像にまとめるAPIの記事で紹介したような機能に使えそうということでやってみた

Web Cache API

Introducing Web Cache API support on Deno Deploy

Denoから外部APIへのリクエストのキャッシュ例があったのでケースとしてはまんまこのパターン

対象機能

参照記事の実装の概要や仕様

GitHub GraphQLのクエリで受けたユーザーのコントリビューションデータ（草のもととなるデータ）を取得
レスポンスとして、fromやtoで指定した最大366日分（ほぼ1年分）のコントリビューションデータが返ってくる
複数年にわたりデータを取得する必要がある
- 現在だと最大16年ほどなので最大16回ほどAPIへリクエストが発生する
- 対象データはコントリビューションのデータなので過去データは基本的には変わらない（はず）
コントリビューションデータへクエリする際のノード消費量は1
- ratelimit的には5000/1時間の制限がある

経緯

過去データに対してのAPIリクエストはCacheを使いAPIリクエスト自体発生しないようにすることでパフォーマンスの改善を狙う

最初実装を考えたときに最初からキャッシュするか迷ったがノード消費量1だしアクセスが結構あったとしてもratelimitに引っかかる心配はほぼない

なのでいったんは都度リクエストで大丈夫と判断してリリースした

実際にリリースしたらratelimitに引っかかることはないが期間が長くなると遅いなっていうのが正直なところだった

Slackとかに貼った場合、一定時間が経過するとリクエストが飛ぶっぽいのでそのたびに時間が掛かる、その都度遅く感じるっていうのが普通にストレス

ということでさっそくWebキャッシュを導入する

実装

contributions.ts

-const getContributions = async (user: string, from?: string, to?: string) => {
+const getContributions = async (useCache: boolean, user: string, from?: string, to?: string) => {
+  const cache = await caches.open("gh-api");
+
+  const cacheKey = `${API_URL}/${user}/${from}/${to}`;
+  const cached = await cache.match(cacheKey);
+  if (useCache && cached) return await cached.json();
+
   const token = Deno.env.get("GH_READ_USER_TOKEN");
   const query = `
     query($user:String! $from:DateTime $to:DateTime) {

.....
.....
.....

     body: JSON.stringify(json),
   });

-  return await res.json();
+  if (useCache && res.ok && from && to) {
+    await cache.put(cacheKey, res.clone());
+  }
+
+  return await res.json();
 };

cacheの使用箇所はこんな感じ

cacheKeyはURL形式にする必要があった（http,httpsで始まる文字列）ため、APIのエンドポイントURL＋ユニークの単位を担保できるようパラメータをつなげた文字列にした

useCacheでcacheを使うかのフラグを外から渡すようにした

これは、今年のコントリビューション数は時間の経過で変化する可能性が高く、cacheは使わず都度リクエストを送るため渡す側で判断してコントロールするようにした

結果

アクセスログとか取っていなく、レスポンス時間を実測していないのは非常に残念ではあるが、実際12年とか13年とかの期間を試してみたら明らかに差が出た

Cache導入前は普通に体感30秒くらいかな?は時間かかっていたが一度アクセスしたあとは1~3秒くらいで返ってくる（体感）

WSL2のデフォルトユーザーではないユーザーでホストのコマンドを使う

Sat, 21 Dec 2024 00:00:00 GMT

WSLにおいて、複数ユーザーを作ってプライベート用と仕事用のアカウント認証情報などを分けられないかと考えた

WSLは初回起動時にデフォルトユーザーを作成するが、このデフォルトユーザー以外にもインスタンス起動後にユーザーを作成してみた

そして

wsluのwslviewコマンドでブラウザを起動
copy.exeでクリップボードコピー

などをしようとしたが、うまくいかなかったのでやったログだけ残す

以降デフォルトユーザーはhoge、新たに作成したユーザーはnewuserとして話を進める

wsluを入れてブラウザ起動する

apt install wslu

wslview https://google.com

エラー…

ユーザー違い

動いたのはデフォルトユーザーのhoge、newuserでは動かなかった…

wslviewがというより普通のコマンドも使えない…

エラー出力の抜粋

/mnt/c/WINDOWS/system32/clip.exe: Invalid argument

権限問題のよう…

$ id  
uid=1001(newuser) gid=1001(newuser) groups=1001(newuser),27(sudo),100(users)  
  
~/memo (git)-[master]  
$ ls -l /mnt/c/WINDOWS/system32/clip.exe  
-r-xr-xr-x 2 hoge hoge 32768 Dec 7 2019 /mnt/c/WINDOWS/system32/clip.exe*

なるほどねぇ…/mnt/c/以下（Windows領域へのアクセスはデフォルトユーザー、もしくはそのグループから）という権限設定がなされているのか…

ちょっと気持ち悪いが…

$ sudo usermod -aG hoge newuser

でデフォルトユーザーのグループに新規のユーザーを追加させた

$ groups newuser  
newuser : newuser sudo users hoge

wsl --shutdown

再起動してから確認

$ wslview https://google.com  
"GetEncoding" のオーバーロードで、引数の数が "0" であるものが見つかりません。  
発生場所 行:1 文字:59  
+ ... ing]::UTF8; [Console]::InputEncoding = [System.Text.Encoding]::GetEnc ...  
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  
+ CategoryInfo : NotSpecified: (:) [], MethodException  
+ FullyQualifiedErrorId : MethodCountCouldNotFindBest

何かいわれたけど起動はした…

WSLでのWindows領域の権限

WSL での詳細設定の構成 | Microsoft Learn

この辺を見てみる…

usersグループに権限付けたほうがよいかな

/etc/wsl.conf

[automount]  
options = "uid=1000,gid=100"

1000はhoge

100はusers

インスタンスを落として再度確認する

ホスト側

wsl -t Ubuntu-24.04

確認

$ ls -al /mnt/c/WINDOWS/system32/clip.exe  
-r-xr-xr-x 2 hoge users 32768 Dec 7 2019 /mnt/c/WINDOWS/system32/clip.exe*
$ echo 'hoge' | iconv -f UTF-8 -t CP932 | /mnt/c/WINDOWS/system32/clip.exe 
  
$ hoge

期待通り

やはり読むべきは公式ドキュメント…

reg.exeはまだ使えず

hoge

wslview -v  
wslu v4.1.3-1

newuser

wslview -v  
/mnt/c/Windows/System32/reg.exe: Invalid argument  
wslu v4.1.3-1

reg.exeはusersでも実行できないよう…

ターミナルの出力結果をclip.exeに渡してコピーする運用にしていたのでなんとかしないと…と思っていたが

そもそもtmuxでxclip, xcopyが使えていたのでそちらを使うようにした…

metadata付与

そして、時間が経つと権限ない系の話になってブラウザが起動しない事態に…正直良くわからん

参考: WSL2 でパーミッション変更できるかやってみた #Linux - Qiita

権限周りなのでこのへんかな

metadata付与してみた

/etc/wsl.conf

[automount]  
options = "metadata,uid=1000,gid=100"

再起動後確認

ls -al /mnt/c/Windows/System32/reg.exe
-r-xr-xr-x 2 hoge users 77312 Dec  7  2019 /mnt/c/Windows/System32/reg.exe*

echo hoge | /mnt/c/WINDOWS/system32/clip.exe

動いた…

再発

しかし、時間が経つと動かなくなるみたい?だった…

これWinのスリープと関係あるのかな

結論

しばらく試行錯誤してみたが動かないパターンがどうしても発生するため諦めた

WSLのインスタンスにはデフォルトユーザーのみで操作する

ユーザーの切り分けをする場合は別のインスタンスを立てる、という対応にした

同じディストリビューションだったとしても別名をつけることはできたので今のところの運用は別インスタンスにしてそれぞれのケースで利用するという形に落ち着いた

残念…

DuckDB + YouPlotでCUIのグラフ表示

Fri, 20 Dec 2024 00:00:00 GMT

DuckDBの公式ドキュメントにCUIでの可視化ツールの紹介が載っていた

CLI Charting with YouPlot – DuckDB

YouPlot

red-data-tools/YouPlot: A command line tool that draw plots on the terminal.

Ruby製らしい

内部的にUnicodePlotを使っているらしい、どちらもPlotライブラリなので役割がどう違うのかイメージが付いていない…

サンプルでは次の流れでCUIのグラフ化を行っている

APIを叩いてデータを取得
DuckDBに流して集計
結果をCSVフォーマットにしてstdoutへ出力
youplotで可視化

こういうの好きなんだよなー、とりあえず試してみる

install

gem install youplot

試す

GitHubのイベントデータのサンプルを実行してみた

これは!!

curl -sL "https://api.github.com/users/swfz/events?per_page=100" \
| duckdb -s "COPY (SELECT type, count(*) AS event_count FROM read_json_auto('/dev/stdin') GROUP BY 1 ORDER BY 2 DESC LIMIT 10) TO '/dev/stdout' WITH (FORMAT 'csv', HEADER)" \
| uplot bar -d, -H -t "GitHub Events for @swfz"  
                             GitHub Events for @swfz
                    ┌                                        ┐
   PullRequestEvent ┤■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 34.0
          PushEvent ┤■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 32.0
        DeleteEvent ┤■■■■■■■■■■■■■■■■■■ 18.0
        CreateEvent ┤■■■■■■■■■■■■■■■■ 16.0

CSV出力

途中出力のCSV形式はこんな感じ

$ curl -sL "https://api.github.com/users/swfz/events?per_page=100" | duckdb -s "COPY (SELECT type, count(*) AS event_count FROM read_json_auto('/dev/stdin') GROUP BY 1 ORDER BY 2 DESC LIMIT 10) TO '/dev/stdout' WITH (FORMAT 'csv', HEADER)"

type,event_count
PullRequestEvent,34
PushEvent,32
DeleteEvent,18
CreateEvent,16

まぁわかりやすい

YouPlotのチャート種別によっても必要な形式は異なる

GitHubのREADMEに各種チャートのサンプルコマンドが載っているがやはりローカルでワンショットの可視化とかの使い方がよさそう

使い方習熟したらログ調査とかは捗りそう

たまに見たいパターンの場合でも、わざわざデータをBQに入れてLookerStudioで可視化して…とまでやるには重いよな…って場合、簡易的なツールとして使えそう

ただ、timeseriesデータは扱えないみたい…これが一番欲しい感ある…

Feature suggestion: Support for timeseries data · Issue #52 · red-data-tools/YouPlot

Rubyなら自分でコード書いてPR出せるかな?

余裕ができたらやってみたいと思う

miseのubi backend

Thu, 19 Dec 2024 00:00:00 GMT

miseのbackend機能のひとつ

Backends | mise-en-place

pipxとかnpmとかもある、本来であればnpm installだったりpipx installを挟むべきものをmiseの設定ファイルに記述すればやってくれるというもの

pipやnpmなどでコマンドラインツールを提供してたりするものならbackend機能でインストールできる

goやcargo,gemもあるのでまぁほぼなんでも入れられるよなって感じ

その中にubi backendがあった

ubiについてはUniversal Binary Installerに書いた

mise.config.toml

[tools]
"ubi:duckdb/duckdb" = 'latest'

これを書いた時点ではDuckDBはmiseのregistory.tomlには入っていなかったのでubiバックエンドでインストールする

install

$ mise i  
mise Installed binary into /home/user/.local/share/mise/installs/ubi-duckdb-duckdb/1.1.3/bin/duckdb  
mise ubi:duckdb/duckdb@1.1.3 ✓ installed

確認

$ duckdb --version  
v1.1.3 19864453f7

楽すぎる…

指定方法はowner/repo

ubiコマンドで指定する方法と同様

バージョン指定する場合も同様かな

これ楽すぎるな

最初おためしで使ってみるときはubiバックエンドでインストールしておきつつ、本家のregistory.tomlになければコントリビュートチャンス!

というかバックエンド機能があるからかなりの範囲のツールをカバーできるよな…って感じた

Web Worker使ってみる

Wed, 18 Dec 2024 00:00:00 GMT

なんとなく知ってはいたが使ってみたことがなかったので使ってみた

ドキュメント

ウェブワーカー API - Web API | MDN

ウェブアプリケーションにおけるスクリプトの処理をメインとは別のスレッドに移し、バックグラウンドでの実行を可能にする仕組みのことです。時間のかかる処理を別のスレッドに移すことが出来るため、 UI を担当するメインスレッドの処理を中断・遅延させずに実行できるという利点があります。

ドキュメント内に書いてあったが、サービスワーカはWebWorkerの一種のよう、それは知らなかった…

タイマー

NextでWeb Workerを使ったタイマーを実装してみた

Worker部分では受け取ったカウントに対してsetIntervalで1秒ごとにカウントを減らしてメインスレッドに値を返す

ポーズ、再開の機能も入れてみた

public/timer-worker.js

let timerId = null;
let count = 0;
let interval = 1000;

self.onmessage = function (event) {
  const { command, payload } = event.data;

  if (command === 'start') {
    if (timerId) return;

    count = payload?.count;
    interval = payload?.interval || 1000;

    timerId = setInterval(() => {
      count -= 1;

      self.postMessage({ type: 'tick', count });

      if (count <= 0) {
        clearInterval(timerId);
        timerId = null;
        self.postMessage({ type: 'done', count: 0 });
      }
    }, interval);
  }

  if (command === 'pause') {
    if (timerId) {
      clearInterval(timerId);
      timerId = null;
    }
  }

  if (command === 'resume') {
    if (!timerId) {
      timerId = setInterval(() => {
        count -= 1;

        if (count <= 0) {
          clearInterval(timerId);
          timerId = null;
          self.postMessage({ type: 'done', count });
        } else {
          self.postMessage({ type: 'tick', count });
        }
      }, interval);
    }
  }

  if (command === 'reset') {
    if (timerId) {
      clearInterval(timerId);
      timerId = null;
    }

    count = 0;
    self.postMessage({ type: 'reset', count });
  }
};

pages/sample-timer/index.tsx

import type { NextPage } from 'next';
import Head from 'next/head';
import { useEffect, useState, ChangeEvent, StrictMode, useRef } from 'react';

const SampleTimer: NextPage = () => {
  const workerRef = useRef<Worker | null>(null);
  const [count, setCount] = useState(0);
  const [paused, setPaused] = useState<Boolean | null>(null);
  const [started, setStarted] = useState<boolean>(false);

  const handleCountChange = (e: ChangeEvent<HTMLInputElement>) => {
    setCount(parseInt(e.target.value));
  };

  const startTimer = () => {
    setStarted(true);
    setPaused(false);
    workerRef.current?.postMessage({ command: 'start', payload: { count, interval: 1000 } });
  };

  const pauseTimer = () => setPaused((prev) => !prev);

  useEffect(() => {
    if (!workerRef.current) {
      workerRef.current = new Worker('/timer-worker.js');
    }

    const worker = workerRef.current;

    worker.onmessage = (event) => {
      const c = event.data.count <= 0 ? 0 : event.data.count;

      setCount(c);
    };

    return () => {
      if (worker) {
        worker.terminate();
        workerRef.current = null;
      }
    };
  }, []);

  useEffect(() => {
    if (workerRef.current) {
      const worker = workerRef.current;
      worker.postMessage({ command: !paused ? 'resume' : 'pause' });
    }
  }, [paused]);

  return (
    <>
      <StrictMode>
        <Head>
          <title>Web Worker Timer</title>
        </Head>
        <div className="p-3">
          <div className="divide-y divide-gray-300">
            <div className="">{count}</div>

            <div className="flex flex-row p-1">
              <div className="grow p-1">
                <input
                  type="number"
                  className="h-10 w-16 rounded text-sm"
                  min={0}
                  max={3600}
                  onChange={handleCountChange}
                ></input>
                秒
              </div>

              <div className="flex flex-row p-1">
                  <button
                    className="mx-1 flex items-center rounded border border-gray-400 bg-white p-2 font-semibold text-gray-800 shadow hover:bg-gray-100"
                    onClick={startTimer}
                  >
                    Start
                  </button>
                  <button
                    className="mx-1 flex items-center rounded border border-gray-400 bg-white p-2 font-semibold text-gray-800 shadow hover:bg-gray-100"
                    onClick={pauseTimer}
                  >
                    Pause
                  </button>
              </div>
            </div>
          </div>
        </div>
      </StrictMode>
    </>
  );
};

export default SampleTimer;

useRefで変数を保持できるようにし、初期処理でnew Worker('/timer-worker.js');を使ってWorkerに処理させるスクリプトを読ませる

準備ができたらお互いにメッセージの送信、受信のやりとりをする

メッセージの送信

postMessageで必要な情報を変数に入れて渡す

メッセージの受信

フロントエンド

worker.onmessageにコールバック関数を代入する

worker.onmessage = (event) => {
  const c = event.data.count <= 0 ? 0 : event.data.count;

  setCount(c);
};

Worker

self.onmessageでコールバック関数を代入する

self.onmessage = function (event) {
// 処理
}

イメージ

雑な部分も結構あるけどサンプル実装ということで…

なにはともあれWeb Workerを使って何かしらの処理をバックグラウンドへ投げる方法がわかった

zinitでStarshipいれてみた

Tue, 17 Dec 2024 00:00:00 GMT

Dotfiles盆栽として、ansibleをいじったりzshの設定をいじったりしている

プロンプトもそろそろ変えようかなということで以前話題になっていたStarshipを入れてみた

特に難しいことはなかったのでただの作業ログ

zinitでインストールするようにした

インストール設定

zdharma-continuum/zinit: 🌻 Flexible and fast ZSH plugin manager

ここに設定方法が書いてある

Starshipについても記述があるのでこれ通りにするので良さそう

zinit ice as"command" from"gh-r" \
          atclone"./starship init zsh > init.zsh; ./starship completions zsh > _starship" \
          atpull"%atclone" src"init.zsh"
zinit light starship/starship

zinitは初回起動時に各種プラグインがなければインストールするという挙動にしている

Starthipは既存のツール管理に利用しているmiseで管理しようか迷ったがmiseにするとAnsibleとの組み合わせがそんなに良くないなと思ったのでzinitでインストールするようにした

とりあえずこれでシェル起動したらStarshipをインストールして適用してくれる

zinitのplugin

インストールしたStarshipはどこにあるのか

気になったので見てみた

cd .zinit/plugins/starship---starship
init.zsh _starship starship*

ここにいろいろ入っているのね

zinitのプラグインごとにディレクトリ切ってある、org---repoっていう命名規則かな

zdharma-continuum/zinit: 🌻 Flexible and fast ZSH plugin manager

てかこの例で、Pluginの中にfzfとかも入っていて、miseと同様zinitも開発に使うツール管理していく世界線を目指しているのか?と思った

pluginの更新

まず現状を確認

status

$ zinit status
Assuming --all is passed
Already up-to-date.
Note: status done also for unloaded plugins

Status for plugin agkozak/zhooks
On branch master
Your branch is up to date with 'origin/master'.

Status for plugin zsh-users/zsh-completions
On branch master
Your branch is up to date with 'origin/master'.

nothing to commit, working tree clean

Status for plugin zsh-users/zsh-syntax-highlighting
On branch master
Your branch is up to date with 'origin/master'.

nothing to commit, working tree clean
The update took 0.06 seconds

一部省略したがこのように現状の状態を表示してくれる

statusみたらほとんどmainブランチを参照していてワロタ…

バージョン管理っていうよりGitの最新を取ってくるって感じのよう

そして下記で更新できる

update

$ zinit update
Assuming --all is passed
Already up-to-date.
Note: updating also unloaded plugins
Updating agkozak/zhooks
Updating sindresorhus/pure
Updating starship/starship
[gh-r] latest version (v1.21.1) already installed
Updating zdharma-continuum/z-a-as-monitor
Updating zdharma-continuum/z-a-bin-gem-node
Updating zdharma-continuum/z-a-patch-dl
Updating zsh-users/zsh-completions
2024-12-23 c160d09 Merge pull request #1116 from Mic92/typos
2024-12-22 59184db fix typos
2024-12-11 6ff1a67 Merge pull request #1115 from zsh-users/update_node
2024-12-11 3f00e7c Update node.js completion to version 23.4
2024-12-11 a169722 fix typos
2024-12-11 97804d9 Merge pull request #1114 from egorlem/diplodoc
2024-12-11 375d578 Update authors block
2024-12-11 bb6d6ba Update completion according to the help documents
2024-12-11 1ae4ab5 Remove needless configurations
2024-12-11 e7068f9 Set argument parameter to options that take an argument
2024-12-11 a9c9c72 Fix according to coding convention
2024-12-10 8f1b90c Add help argument
2024-12-10 b97fdbd Fix typo
2024-12-10 a0effab Remove unused file_types var
2024-12-10 1b16b6c Add completion script for yfm (diplodoc cli)
2024-11-26 874917f Merge pull request #1113 from kyanagi/update-rspec
2024-11-26 509d844 Update rspec completion
2024-11-20 f607e94 Merge pull request #1112 from hydrargyrum/age
2024-11-19 8d42717 Fix options that can be specified many times
2024-11-19 610aef9 Don't complete options when '--help' is specified
2024-11-19 692e96c Add format information
2024-11-19 360ee98 Fix comment
2024-11-19 6dec488 add completion for age
2024-11-17 df14fc4 Merge pull request #1111 from zsh-users/add-util-linux
2024-11-17 fdc290d Consider BSD distributions
2024-11-14 2c2d878 Consider macOS's uuidgen
2024-11-13 8f3baa3 Add lscpu completion
2024-11-12 c791de1 Add uuidgen
Updating 9df3345..c160d09
Fast-forward
==> Compiling zsh-completions.plugin.zsh [OK]
Updating zsh-users/zsh-syntax-highlighting
2024-11-21 5eb677b 'main' tests: Don't assume ps(1) is available.
Updating e0165ea..5eb677b
Fast-forward
==> Compiling zsh-syntax-highlighting.plugin.zsh [OK]
The update took 10.12 seconds

Starshipのテーマ変更

特にこだわりがなければ下記のpresetから選んで設定ファイルとして特定ディレクトリに置けば良い

Presets | Starship

設定情報の出力は下記コマンドで

starship preset tokyo-night -o ~/.config/starship.toml

アイコンが表示されなかったので調べたらNERD FONTSの中から何かしらインストールする必要があるらしい

Nerd Fonts - Iconic font aggregator, glyphs/icons collection, & fonts patcher

とりあえず適当にJetBrains Monoを入れた

で、WindowsTerminalの外観設定でNerdFontのフォントを設定した

表示された、あとは細かいところ調整かな

設定

プリセットをいくつか試したがしっくり来なかったのでカスタマイズする…

ここから沼が始まるきっかけになりうるので、できるだけ最小限にしたい…

icon

設定上にアイコンを入れることで表示にもアイコンを反映できる

Nerd Fonts - Iconic font aggregator, glyphs/icons collection, & fonts patcher

これで検索しながら設定ファイルにコピーしていく感じかな…

モジュール

Configuration | Starship

結構な種類のモジュールがある

それぞれのモジュールで、どのようなフォーマットで表示するか?スタイルはどうするか?などの項目をそれぞれ指定する

ドキュメント全体をざっくり読んでみて良さそうなのを試してみるっていうのを繰り返した

最終的にコマンドの実行時間、コマンドのExitCode、Gitのステータス、差分の行数などを入れた

config

いろいろあるが現時点の最終的な設定は次のようになっている

試行錯誤の過程で使わなくなったものも含まれている

"$schema" = 'https://starship.rs/config-schema.json'

format = """
[░▒▓](bg:color_fg0 fg:color_bg1)\
$directory\
[](fg:color_bg1 bg:color_bg3)\
[](fg:color_bg3 bg:color_bg1)\
$git_branch\
$git_status\
[](fg:color_bg1 bg:color_bg3)\
$docker_context\
[](fg:color_bg3)\
$git_metrics\
$status\
$cmd_duration\
$line_break$character"""

palette = 'custom'

[palettes.custom]
color_fg0 = '#eeeeee'
color_bg1 = '#00005f'
color_bg2 = '#090cb5'
color_bg3 = '#0074D9'
color_blue = '#3a6ab3'
color_aqua = '#8bb8f5'
color_green = '#3ff1b0'
color_orange = '#f13f5b'
color_purple = '#9f68c9'
color_red = '#b22b6b'
color_yellow = '#f3c13f'
color_accent = '#d700d7'

[os]
disabled = false
style = "bg:color_orange fg:color_fg0"

[os.symbols]
Windows = "󰍲"
Ubuntu = "󰕈"
SUSE = ""
Raspbian = "󰐿"
Mint = "󰣭"
Macos = "󰀵"
Manjaro = ""
Linux = "󰌽"
Gentoo = "󰣨"
Fedora = "󰣛"
Alpine = ""
Amazon = ""
Android = ""
Arch = "󰣇"
Artix = "󰣇"
EndeavourOS = ""
CentOS = ""
Debian = "󰣚"
Redhat = "󱄛"
RedHatEnterprise = "󱄛"
Pop = ""

[username]
show_always = true
style_user = "bg:color_orange fg:color_fg0"
style_root = "bg:color_orange fg:color_fg0"
format = '[ $user ]($style)'

[directory]
style = "fg:color_fg0 bg:color_bg1"
format = "[ $path ]($style)"
truncation_length = 3
truncation_symbol = "…/"

[directory.substitutions]
"Documents" = "󰈙 "
"Downloads" = " "
"Music" = "󰝚 "
"Pictures" = " "
"Developer" = "󰲋 "

[git_branch]
symbol = "[](fg:color_accent bg:color_bg1)"
style = "bg:color_aqua"
format = '[[ $symbol $branch ](fg:color_fg0 bg:color_bg1)]($style)'

[git_status]
style = "bg:color_aqua"
format = '[[($all_status$ahead_behind )](fg:color_accent bg:color_bg1)]($style)'

[git_metrics]
disabled = false

[nodejs]
symbol = ""
style = "fg:#3c873a"
format = '[ $symbol( $version) ]($style)'

[rust]
symbol = ""
style = "bg:color_blue"
format = '[[ $symbol( $version) ](fg:color_fg0 bg:color_blue)]($style)'

[golang]
symbol = ""
style = "fg:#29beb0"
format = '[ $symbol( $version) ]($style)'

[python]
symbol = ""
style = "fg:#306998"
format = '[ $symbol( $version) ]($style)'

[ruby]
symbol = ""
style = "fg:#a91401"
format = '[ $symbol( $version) ]($style)'

[docker_context]
symbol = ""
style = "bg:color_bg3"
format = '[[ $symbol( $context) ](fg:#83a598 bg:color_bg3)]($style)'

[time]
disabled = false
time_format = "%R"
style = "bg:color_bg1"
format = '[[  $time ](fg:color_fg0 bg:color_bg1)]($style)'

[line_break]
disabled = false

[character]
disabled = false
success_symbol = '[❯](bold fg:green)'
error_symbol = '[❯](bold fg:red)'
vimcmd_symbol = '[❯](bold fg:green)'
vimcmd_replace_one_symbol = '[❯](bold fg:purple)'
vimcmd_replace_symbol = '[❯](bold fg:purple)'
vimcmd_visual_symbol = '[❯](bold fg:yellow)'

[status]
symbol = ' '
pipestatus = true
disabled = false
map_symbol = false

[cmd_duration]
format = '[$duration]($style)'
min_time = 1000

結局かなり長くなってしまった

見た目はこんな感じ

各種言語のランタイム

蛇足

最初は設定して表示するようにしてたがなんかしっくり来なかったのと常に表示しておく必要ないよねということで消した

代わりに次のようなコマンドを用意し実行したら現在のディレクトリでの言語ランタイムのバージョンが分かるようにした

bin/runtimes

#!/bin/sh

starship module ruby; starship module nodejs; starship module python; starship module golang;

MutationObserverで対象要素がコールバック実行時に存在するかのチェック

Mon, 16 Dec 2024 00:00:00 GMT

特定のDOMの変更を監視して変更があったらあらかじめセットしたコールバックを実行させることができるMutationObserverという便利なAPIがある

MutationObserver - Web API | MDN

かなり便利なんだけど、昨今のインタラクティブにレイアウトがいろいろ変わるUIだと、一度監視を開始したはずがいつの間にか対象のDOMが削除されてしまってたみたいなことがよくある

監視が効いているかチェックできれば良いなと調べたらやはりあった

isConnected

Node: isConnected プロパティ - Web API | MDN

Node.isConnected

対象ノードがドキュメントツリーに接続されているかを判定するための真偽値

ドキュメント内に対象が存在しているか確認する際に使われるもの

これを活用すると一度Observeした要素が何かしらの理由で削除された場合に検知が可能

サンプルコード

const observeElement = document.querySelector('.hoge')

const observer = new MutationObserver(async function (
  records: MutationRecord[]
) {
  if (observeElement.isConnected) {
    // Document内に存在している場合の処理
    // 変更を検知して行う処理
  } else {
    // 何らかの理由でDocument内に存在しない状態
    // エラーハンドリングなり再度Observeするなりの処理
  }
})

observer.observe(observeElement, { subtree: true, childList: true })

isConnectedは対象Nodeがドキュメント内に存在する間はtrueが返ってくるので対象要素以下のDOMの変更を検知して何かしらの処理をする

DOMに変更があり監視対象のNodeが削除された場合、その変更もObserve対象に入るのでその段階でelseに通り何かしらのハンドリングを行える

適用されているすべてのスタイルを打ち消す

Sat, 14 Dec 2024 00:00:00 GMT

Chrome拡張でdocument.createElementなどでタグを生成して既存のコンテンツページに追加するというような操作はよくあるかと思うが

あらかじめそのサイトで設定されていたスタイルが適用されてしまうケースが存在する（divなど特定のタグ粒度に対してのスタイル設定など）

これが意図したものではなく、スタイル未適用のほうが望ましい

ブラウザ拡張でタグを突っ込む場合は下手にユーザーエージェントスタイルシートの影響を受けたくない

そんな場合に使えるallプロパティ

<div style="all: unset; color: red;"> この要素はデフォルトのスタイルが解除されています </div>
<div style="all: initial; color: red;"> この要素はすべてのスタイルが初期値にリセットされています </div>

initialはすべてリセット

unsetは親要素から一部プロパティを継承するらしい

継承されるプロパティ

なるほど

拡張内での一例

  const element = document.createElement("p")
  element.style.all = "initial"
  element.innerText = "テスト"
  console.log("all: initial", element)

こんな感じで出してみた

この記述方法だとすべてのプロパティに対してinitialがセットされるみたい

element.click()を特定要素が取得できるまで待つ

Fri, 13 Dec 2024 00:00:00 GMT

chrome拡張を作っていて、たとえばSlackに自動で投稿するみたいな機能を作っていた

SlackのUIは

テキストエリアに何か入力したら送信ボタンのdisableが消えて送信可能な状態になる
Enterキー押下もしくは送信ボタンをクリックでテキストを投稿できる

単純にテキストエリアにテキストを入れ込み、送信ボタンをクリックする処理を行えば行けるよねと思っていた

が、devtoolで確認するときは1つの処理ごとコンソールに入力し動作するが、いざ組み合わせて実行するとうまくいかない

1度目の実行でテキストが入力された状態になる

2度目実行すると送信される

ということは送信ボタンがクリックされていない…

devtoolで確認したときは手動なので気付かなかったが、入力からクリックまでの時間が短いと、UI側が入力を検知して送信ボタンのdisableを解除する前にクリックしてしまっている状態のようだった

なので自動で処理させる場合はクリックする対象の要素のdisable状態とクリック可能な状態を把握し押下可能な状態のセレクタで要素が取得できるまで待つ必要がある

puppeteerでスクレイピングしてたときは普通にwaitForとか使っていたし、まぁよく考えてみれば当たり前ではあるんだけど…

ということで指定のセレクタの要素が出現するまで待つ関数を用意し、出現してクリック可能な状態の要素を取得してクリックするようにする

実装

const waitForSelector = <T extends Element>(
  selector: string,
  timeout = 2000
): Promise<T> => {
  return new Promise((resolve, reject) => {
    const interval = 100
    let elapsed = 0

    const checkExistence = () => {
      const element = document.querySelector(selector)

      if (element && element instanceof Element) {
        resolve(element as T)
      } else if (elapsed >= timeout) {
        reject(new Error(`Timeout: ${selector} not found`))
      } else {
        elapsed += interval
        setTimeout(checkExistence, interval)
      }
    }
    checkExistence()
  })
}

呼び出し側

const textInput = document.querySelector<HTMLParagraphElement>(".editor p")
textInput.innerText = comment
const submitSelector = 'button.send'

const submitButton = await waitForSelector<HTMLButtonElement>(submitSelector)
submitButton?.click()

waitForSelectorに渡すセレクタは、入力によって変化した部分を指定する必要がある

そうしないと、実際にはクリックできない要素を取得してしまうことになるのでdisable時には取得できないようなセレクタを指定する

差分がない…場合はまた考えないといけないが、たいていどこかしらには変化があるはずなのでそれをうまく取り入れれば行ける

これで特定要素の出現を待ってからクリックできる

勉強になりました

OllamaをWSLで使い、コミットメッセージを考えてもらう

Thu, 12 Dec 2024 00:00:00 GMT

環境

WSL2
Ubuntu24.04

/etc/wsl.conf

[boot]
systemd=true

[wsl2]
memory=16G
swap=0
localhostForwarding=true
nestedVirtualization=true

[interop]
enabled=true
appendWindowsPath=false

Ollama

前にもちょっとだけDockerで触ってみたけど再度触ってみる

ClaudeからMCPが出てきたのでOllamaと組み合わせたらローカルでいろいろできるかも?と思ったのがきっかけ

機密な情報を扱ってもローカル内で収まるので使いやすい

ということで試してみる

install

brewも行けるみたいだがmiseでも行けた、もはやすべてのツール類はubiで対応できるようにしてくれたらみんな幸せだよな

.config/mise/config.toml

[tools]
ollama = 'latest'

mise i

Ollamaサーバの起動

$ ollama serve

サーバは127.0.0.1:11434で起動する

モデルのPull

$ ollama pull llama3

llama3を使ってみる

リストを確認

$ ollama list
NAME             ID              SIZE      MODIFIED
llama3:latest    365c0bd3c000    4.7 GB    3 weeks ago

実行

ollama run llama3

対話的UIが起動してチャットできる

一部抜粋

>>> 日本語喋れるの？
(konnichiwa!) I'd be happy to chat with you in Japanese! 💬 What would you like to talk about? 🤔

>>> 日本語で返信してみて
😊
私は日本語での返信をします！何か質問や話題がありましたら、聞きます！

(Translation: I'll respond in Japanese! If you have any questions or topics, please let me know!) 😊

なんともフレンドリー

このくらいのやりとりであれば、そこまで待つことはなくサクサク返信が返ってくる

APIの実行

パラメータとかは下記

ollama/docs/api.md at main · ollama/ollama

curl http://localhost:11434/api/chat -d '{  
  "model": "llama3",
  "stream": false,  
  "messages": [  
    { "role": "user", "content": "why is the sky blue?" }  
  ]  
}'

streamありだと順々レスポンスが返ってくる

CLI作ったりするならfalseのほうが楽かな

Ollama側の準備は整った

コミットメッセージをローカルLLMで

opencommitを使ってみる

di-sukharev/opencommit: just a GPT wrapper for git — generate commit messages by an LLM in 1 sec — works best with Claude 3.5 — supports local models too

インストール

こちらもmiseでいれた

.config/mise/config.toml

[tools]
"npm:opencommit" = 'latest'

mise i

APIエンドポイントの設定

oco config set OCO_AI_PROVIDER='ollama' OCO_MODEL='llama3'

デフォルトだとcommit確定したらpushもさせようとするらしい、それをOFFする

oco config set OCO_GITPUSH=false

APIエンドポイントの設定、ローカルのOllamaが起動しているサーバを指定する

oco config set OCO_API_URL='http://127.0.0.1:11434/api/chat'

指定がないと次のようなエラーが出てくる

oco  
┌ open-commit  
│  
◇ 1 staged files:  
config/mise/config.toml  
│  
◇ ✖ Failed to generate the commit message  
Error: Ollama provider error: Invalid URL  
at OllamaEngine.generateCommitMessage (/home/user/.local/share/mise/installs/npm-opencommit/3.2.2/lib/node_modules/opencommit/out/cli.cjs:40212:13)  
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)  
at async generateCommitMessageByDiff (/home/user/.local/share/mise/installs/npm-opencommit/3.2.2/lib/node_modules/opencommit/out/cli.cjs:45082:27)  
at async generateCommitMessageFromGitDiff (/home/user/.local/share/mise/installs/npm-opencommit/3.2.2/lib/node_modules/opencommit/out/cli.cjs:45293:25)  
at async trytm (/home/user/.local/share/mise/installs/npm-opencommit/3.2.2/lib/node_modules/opencommit/out/cli.cjs:45261:18)  
at async commit (/home/user/.local/share/mise/installs/npm-opencommit/3.2.2/lib/node_modules/opencommit/out/cli.cjs:45458:35)  
│  
└ ✖ Ollama provider error: Invalid URL

テンプレート化

たとえばissue番号を含めたい場合とかこうするみたい

oco '#205: $msg’

実行

適当なリポジトリで適当にステージして実行してみる

実際の差分は下記

chore(config/mise/config.toml): add opencommit and rust dependencies to the configuration file by swfz · Pull Request #1209 · swfz/dotfiles

miseで管理するツールを増やしただけ

oco  
┌ open-commit  
│  
◇ 1 staged files:  
config/mise/config.toml  
│  
◇ 📝 Commit message generated  
│  
└ Generated commit message:  
—————————————————— chore(config/mise/config.toml): add opencommit and rust dependencies to the configuration file  
——————————————————  
│  
◇ Confirm the commit message?  
│ Yes  
│  
◇ ✔ Successfully committed  
│  
└ [feature/add-tools 78eede5] chore(config/mise/config.toml): add opencommit and rust dependencies to the configuration file  
1 file changed, 2 insertions(+)  
  
│  
◇ Do you want to run `git push`?  
│ No  
│  
└ `git push` aborted

文言もYes/Noで選択できるみたい

メッセージはあっている

しかし結構時間かかった…（3m17s）

短文のメッセージやりとりはそれなりの速度だったけどopencommitになったら結構時間がかかってしまった

どのようなやりとりをしているかまで追っていないのでわからないが、このままだと厳しいなぁという印象だった

WSLだとチューニングしないと厳しい時間、コミットに3分待たされるのはさすがに苦痛

題材としてコミットメッセージを取り上げてみたが自分の環境だと全然速度が出なかったので環境変わったら再度試してみようかな…という感じだった

他の活用パターンを模索してみたいところ

CSS Keyframesでのアニメーションとアニメーション後の処理

Wed, 11 Dec 2024 00:00:00 GMT

Chrome拡張で画面上にテキストを流す処理を書いていた

テキストを流す処理自体はCSSのKeyframeでサクッと実現できたがアニメーションしたあとは消したい（非表示にさせたい）

@keyframes

@keyframes - CSS: カスケーディングスタイルシート | MDN

開始（from）から終了（to）、または中間の地点（50%など）それぞれにスタイルを定義し、アニメーションにする

KeyframesによるCSSアニメーション

アニメーション定義

右端見えないところから左へX座標を-150vh分までずらす

@keyframes slideLeft {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-150vw);
  }
}

styleの指定

const element = document.createElement("div");
element.innerText = "test"
element.style.right = "-30%"
element.style.animation = "slideLeft 4s linear"

初期位置が右端から-30%の位置

指定方法

animation - CSS: Cascading Style Sheets | MDN

種類がたくさんある、バリエーションを調べるにはドキュメントを読むのが一番早い

あとはGPTに聞くなりで使えれば良いかな…

今回はanimation: ${Keyframesで定義した名前} ${アニメーションの実行時間は4秒} ${一定速度でアニメーションを実行}という感じで指定した

JavaScript側

animationend

Element: animationend イベント - Web API | MDN

CSSアニメーションが完了したときに発生するイベント

イベントのコールバックを指定できる

const element = document.createElement("div");
element.innerText = "test"
element.style.right = "-30%"
element.style.animation = "slideLeft 4s linear"
element.onanimationend = (e) => {
  const slideLeftElement = e.target as HTMLParagraphElement
  slideLeftElement.style.display = `none`
}

アニメーションが終了したらdisplay: noneになる

これがないと、初期位置に要素が残ったままになってしまう、今回の仕様だとスクロールが必要な感じになってしまう

animation-fill-modeでもできそうかな?と思ったけど読んでみたらやりたいこととは違いそうだった

なにはともあれこれで「テキストを流してそのあと非表示にさせる」を実現できた

JavaScriptで座標を計算して移動RequestAnimationframeでアニメーションさせるという方法もあるが、こういうのはCSSに任せられたほうが全体としてスッキリするかなと感じている

GatsbyでESlint flat config(v9)対応のメモ

Tue, 10 Dec 2024 00:00:00 GMT

供養の意味のメモ

前提説明足りないとか全然ありそうだがどこかの誰かの役に立てれば…

Gatsby製の本サイトでRenovate対応の際に試行錯誤したのでそのログの断片

そもそもflat configの対応から必要だった

migration guide

FlatConfigへのマイグレーションは基本下記読めば良いっぽい

Configuration Migration Guide - ESLint - Pluggable JavaScript Linter

migrate

migraterを実行

$ npx @eslint/migrate-config .eslintrc.json

Need to install the following packages:  
@eslint/migrate-config@1.3.0  
Ok to proceed? (y) y  
  
  
Migrating .eslintrc.json  
  
Wrote new config to ./eslint.config.mjs  
  
You will need to install the following packages to use the new config:  
- @eslint/compat  
- globals  
- @eslint/js  
- @eslint/eslintrc  
  
You can install them using the following command:  
  
npm install @eslint/compat globals @eslint/js @eslint/eslintrc -D

これらが必要だからインストールしてねって話らしいのでインストールする

yarn add install @eslint/compat globals @eslint/js @eslint/eslintrc -D

設定ファイルをeslint.config.mjsに変えてlint実行!

怒られた

TypeError: Key "rules": Key "valid-jsdoc": Could not find "valid-jsdoc" in plugin "@".

valid-jsdoc - ESLint - Pluggable JavaScript Linter

valid-jsdocは非推奨になったらしい

valid-jsdoc -> eslint-plugin-jsdoc

yarn add -D eslint-plugin-jsdoc

で再度試すもだめだった

どこかにvalid-jsdocが残っている

GPTに聞いたらextendsで指定しているもので内部的に使っているものがあるかもということだったので…

すべて除外してひとつずつ確認したらgoogleってのが原因のよう

そもそも何のために入れたかすら覚えてないので消しても良い気がする…ということで消した

各種プラグインでの対応

とりあえず実行はできるようになったがかなりエラーが出てきた

一部抜粋

3:35 error Parse errors in imported module 'gatsby': parserPath or languageOptions.parser is required! (undefined:undefined) import/namespace

import系が多い

これ一個ずつ設定方法見に行かないといけないのか…？

import-js/eslint-plugin-import: ESLint plugin with rules that help validate proper imports.

2024-09-20現在、eslint-plugin-import自体はflat config対応しているようなのでparserが見つからないのは個別設定をちゃんとしろって話かな

違った…

未対応プラグインの方っぽい次の消したらほとんどなくなった

compat.extendsしている下記設定

// "plugin:import/recommended",
// "plugin:import/typescript",

てことはこれの話になってくるのか…

参考: eslint-plugin-importをflat configで使うとparserPath or languageOptions.parser is required!エラーが発生する - elecdeer-pub

実行して中身見てみた

sample.mjs

import importPlugin from "eslint-plugin-import";
console.log(importPlugin.flatConfigs.recommended)

{  
  rules: {  
    'import/no-unresolved': 'error',  
    'import/named': 'error',  
    'import/namespace': 'error',  
    'import/default': 'error',  
    'import/export': 'error',  
    'import/no-named-as-default': 'warn',  
    'import/no-named-as-default-member': 'warn',  
    'import/no-duplicates': 'warn'  
  },  
  languageOptions: { ecmaVersion: 2018, sourceType: 'module' },  
  name: 'import/recommended',  
  plugins: { import: { meta: [Object], rules: [Object] } }  
}

fixupPluginRulesで引っ張ってきているのは分かるが、recommendedやTypeScriptの設定はどこに入っているんだ…？プリセットなのか？

ちょっと調べる気力がなくなってしまったので両方消した

開発サーバ立ち上げ時のエラー

ERROR #98123 WEBPACK.DEVELOP  
  
Generating development JavaScript bundle failed  
  
[eslint]  
/home/user/til/gatsby-browser.tsx  
1:1 error Definition for rule 'valid-jsdoc' was not found valid-jsdoc  
1:1 error Definition for rule 'require-jsdoc' was not found require-jsdoc  
  
/home/user/til/src/components/archive.tsx  
1:1 error Definition for rule 'valid-jsdoc' was not found valid-jsdoc  
1:1 error Definition for rule 'require-jsdoc' was not found require-jsdoc

しばらく記事書いていなかったので開発サーバ立てなかったが立てたらエラーが発生するようになっていた…

Gatsby pluginがあった…

CIが成功しているのはおかしいと思って、CIのコマンドを試したら

gatsby buildは成功する

eslint個別実行も成功する

ということでyarn devだけで起きる問題っぽい

gatsby-configを見に行ったらgatsby-plugin-eslintを使っていた…

develop時にlinter結果表示してくれるのありがたいけど必須ではないよな

外すか?と考えたが一度見てみることにした

試しに設定を外してyarn devしたら開発サーバを起動できた…ということで出どころは把握

webpackのloaderを変えてみる

pluginの中身を読んだらただのコールバックの中身を設定するくんだったので変えてみる

ESLintのOptionの渡し方を変えればOKかな？

https://github.com/webpack-contrib/eslint-webpack-plugin

この辺読んで設定する必要がありそう

pluginのコードをそのまま持ってきていったん試す

動かすところまではできた

webpack-contrib/eslint-webpack-plugin: A ESLint plugin for webpack

よく見るとconfigType: 'flat'とすることでflatconfigに対応してくれるよう

そしてgatsby-plugin-eslintが他オプションをそのまま渡すような作りになっているのでconfigの項目として渡してもOKそう

rulesPaths

いくつか試したがだめだった

ERROR #98123 WEBPACK.DEVELOP  
  
Generating development JavaScript bundle failed  
  
[eslint] Invalid Options:  
- Unknown options: rulePaths  
- 'rulePaths' has been removed. Please define your rules using plugins.

もう少し調べたら、plugin側にrulePathsの設定があった

中身見てみたらGatsby用にカスタムルールが作られているよう…

custom ruleを読み込ませる

pluginからカスタムルールを読み込ませていたがそれを自前でやればOKって話になる

試行錯誤の末動いた…

下記設定ファイルを用意しeslint.config.mjsの各種設定項目に反映させる

gatsby-eslint-custom-rules.mjs

import limitedExports from './node_modules/gatsby/dist/utils/eslint-rules/limited-exports-page-templates.js'  
import noAnonymousExports from './node_modules/gatsby/dist/utils/eslint-rules/no-anonymous-exports-page-templates.js'  
const plugin = {
  meta: {
    name: 'gatsby-custom-rules',
    version: '1.0.0',
  },
  rules: {
    'limited-exports': limitedExports,
    'no-anonymous-exports': noAnonymousExports,
  },
}
export default plugin;

次の2つのCommitで動くようになった

Gatsbyの開発が活発でrequired ruleの追加されたりしたらそれは検知できないが…まぁないだろう！と踏んでこのまま決め打ちで行くことにした

Branch作ったつもりで作業してpushしたらmaster fource push野郎になってしまった…疲れている

zsh history searchからの改行の扱い

Mon, 09 Dec 2024 00:00:00 GMT

自分はzshrc上でpecoを使ってzsh_historyからの検索しているが、実行コマンドに改行が含まれていた場合にうまく実行できない状態だった

いろいろ調べて対応してみた記録

とりあえずいったんこうしたって感じなので今のところはベストだがまたうまくいかないケース出てくるかもしれない

前提となる設定（before）

zshrc

function peco-select-history() {
    local tac
    if which tac > /dev/null; then
        tac="tac"
    else
        tac="tail -r"
    fi
    BUFFER=$(\history -n 1 | \
        eval $tac | \
        peco --query "$LBUFFER")
    CURSOR=$#BUFFER
    zle clear-screen
}
zle -N peco-select-history
bindkey '^r' peco-select-history

よくあるCtrl+rで履歴検索して実行するやつ

改行が含まれるケース

行継続

バックスラッシュで行を継続させるよとシェル上では指示して改行して可読性あげるパターン

Actionsとかでワンショットのコマンド考えるときとかこういうのよくやる

例

echo 'This is a long line hoge' \
| grep "long" \
| awk '{print $NF}'

履歴上はこのようになる

echo "This is a long line" \\n| grep "long" \\n| awk '{print $NF}'

で、普通に実行するとエラーになってしまう

grep: \n: No such file or directory

対応は履歴呼び出し時に置換させる

sed s'/ \\\\n/ /g'

かなり決め打ちではあるがしょうがない…

スクリプト

while read -r line; do
    echo "行の内容: $line";
done < /path/to/file

シェルスクリプトをそのまま貼り付けて実行するパターン

履歴呼び出し時

while read -r line; do\n echo "行の内容: $line"\ndone < /path/to/file

実際は下記じゃないと動かない

while read -r line; do echo "行の内容: $line"; done < /path/to/file

行末に;が入るパターンと入らないパターンがあり、入らなくても改行を入れればよしなに解釈してくれるパターンが存在する

そのため決め打ちで変換すると微妙だな…ということでzle redisplay+printfの組み合わせで、BUFFERに改行込みの表示をさせて貼り付けなり入力した状態と同じ状態を保つことに成功した

結果

最終的な設定（after）

zshrc

function peco-select-history() {
    local tac
    if which tac > /dev/null; then
        tac="tac"
    else
        tac="tail -r"
    fi
    selected=$(\history -n 1 | \
        eval $tac | \
        peco --query "$LBUFFER" | \
        sed s'/ \\\\n/ /g')
    BUFFER=$(echo "${selected}")
    zle redisplay
    CURSOR=$#BUFFER
}
zle -N peco-select-history
bindkey '^r' peco-select-history

おわり

1つ目の行継続の方もzle redisplay+printfパターンで解決したかったが、いろいろ試してもBUFFER上に\をどうしても表示させられなかったため断念

とりあえずは改行含めたコマンドも履歴から再現できるようになったので快適度は上がった

誰かよい方法知っていたら教えてほしいです…

GitHub GraphQL API Explorerをフルスクリーンで見たい

Sat, 07 Dec 2024 00:00:00 GMT

GitHubのGraphQL APIにクエリする場合、まず下記のExplorerを使ってクエリの調整することが多いと思う

エクスプローラー - GitHub Docs

ただ、Explorer自体の可視範囲が狭くもっと広くしてくれ…と常々思っていた

CSSちょっといじったらなんとかならないかな?と調べたら同じことを思っていた人がいたようですでに解決されていた

GitHub GraphQL API Full Screen

ほぼこの参考記事の通り

Custom Style Script - Microsoft Edge Addons

っていう特定のURLにカスタムのJavaScriptやCSSを差し込めるというChrome拡張を使ってGitHub GraphQL ExplorerようにCSSを設定する

CSSに記事書いた人が用意してくれているGistのCSSを読ませる

Gist

GitHub GraphQL API Explorer Full Screen

設定を済まし、Explorerを再読込したらできた！

これは快適

chrome拡張が動かなくなってた

Fri, 06 Dec 2024 00:00:00 GMT

90秒で拡張が作れる!で結構知られた感じがあるrollup-plugin-chrome-extensionだが、最近ビルドが通らなくなってしまった

で、GitHubに行って調べてみると

crxjs/chrome-extension-tools: Bundling Chrome Extensions can be pretty complex. It doesn’t have to be.

新たに@crxjs/vite-pluginというのが出てた、以前気付かなかっただけかはわからないがのりで変更してみるかということで変えてみた

@crxjs/vite-pluginに変更

そしたらviteとのかみ合わせが悪いようだったので

viteを4->5に上げた、そしたら違うエラーが出てきた

buildが失敗する

2024-11-21T11:59:00.4021417Z [31m[crx:content-script-resources] Error: vite manifest is missing
2024-11-21T11:59:00.4025323Z     at Object.renderCrxManifest (file:///home/runner/work/chrome-extension-google-slide-usertool-comment-stream/chrome-extension-google-slide-usertool-comment-stream/node_modules/.pnpm/@crxjs+vite-plugin@1.0.14_vite@5.4.11_@types+node@20.14.15_/node_modules/@crxjs/vite-plugin/dist/index.mjs:3240:21)
2024-11-21T11:59:00.4029735Z     at Object.generateBundle (file:///home/runner/work/chrome-extension-google-slide-usertool-comment-stream/chrome-extension-google-slide-usertool-comment-stream/node_modules/.pnpm/@crxjs+vite-plugin@1.0.14_vite@5.4.11_@types+node@20.14.15_/node_modules/@crxjs/vite-plugin/dist/index.mjs:2922:60)
2024-11-21T11:59:00.4031840Z     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
2024-11-21T11:59:00.4033813Z     at async Bundle.generate (file:///home/runner/work/chrome-extension-google-slide-usertool-comment-stream/chrome-extension-google-slide-usertool-comment-stream/node_modules/.pnpm/rollup@4.27.3/node_modules/rollup/dist/es/shared/node-entry.js:19094:9)
2024-11-21T11:59:00.4036458Z     at async file:///home/runner/work/chrome-extension-google-slide-usertool-comment-stream/chrome-extension-google-slide-usertool-comment-stream/node_modules/.pnpm/rollup@4.27.3/node_modules/rollup/dist/es/shared/node-entry.js:21773:27
2024-11-21T11:59:00.4039250Z     at async catchUnfinishedHookActions (file:///home/runner/work/chrome-extension-google-slide-usertool-comment-stream/chrome-extension-google-slide-usertool-comment-stream/node_modules/.pnpm/rollup@4.27.3/node_modules/rollup/dist/es/shared/node-entry.js:21155:16)
2024-11-21T11:59:00.4042071Z     at async build (file:///home/runner/work/chrome-extension-google-slide-usertool-comment-stream/chrome-extension-google-slide-usertool-comment-stream/node_modules/.pnpm/vite@5.4.11_@types+node@20.14.15/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:65449:16)
2024-11-21T11:59:00.4044894Z     at async CAC.<anonymous> (file:///home/runner/work/chrome-extension-google-slide-usertool-comment-stream/chrome-extension-google-slide-usertool-comment-stream/node_modules/.pnpm/vite@5.4.11_@types+node@20.14.15/node_modules/vite/dist/node/cli.js:828:5)[39m
2024-11-21T11:59:00.4046518Z [31mx[39m Build failed in 760ms
2024-11-21T11:59:00.4046960Z [31merror during build:
2024-11-21T11:59:00.4047806Z [31m[crx:manifest-post] Error in crx:content-script-resources.renderCrxManifest[31m
2024-11-21T11:59:00.4049948Z     at Object.generateBundle (file:///home/runner/work/chrome-extension-google-slide-usertool-comment-stream/chrome-extension-google-slide-usertool-comment-stream/node_modules/.pnpm/@crxjs+vite-plugin@1.0.14_vite@5.4.11_@types+node@20.14.15_/node_modules/@crxjs/vite-plugin/dist/index.mjs:2933:19)
2024-11-21T11:59:00.4051747Z     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
2024-11-21T11:59:00.4053966Z     at async Bundle.generate (file:///home/runner/work/chrome-extension-google-slide-usertool-comment-stream/chrome-extension-google-slide-usertool-comment-stream/node_modules/.pnpm/rollup@4.27.3/node_modules/rollup/dist/es/shared/node-entry.js:19094:9)
2024-11-21T11:59:00.4057465Z     at async file:///home/runner/work/chrome-extension-google-slide-usertool-comment-stream/chrome-extension-google-slide-usertool-comment-stream/node_modules/.pnpm/rollup@4.27.3/node_modules/rollup/dist/es/shared/node-entry.js:21773:27
2024-11-21T11:59:00.4061411Z     at async catchUnfinishedHookActions (file:///home/runner/work/chrome-extension-google-slide-usertool-comment-stream/chrome-extension-google-slide-usertool-comment-stream/node_modules/.pnpm/rollup@4.27.3/node_modules/rollup/dist/es/shared/node-entry.js:21155:16)
2024-11-21T11:59:00.4064389Z     at async build (file:///home/runner/work/chrome-extension-google-slide-usertool-comment-stream/chrome-extension-google-slide-usertool-comment-stream/node_modules/.pnpm/vite@5.4.11_@types+node@20.14.15/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:65449:16)
2024-11-21T11:59:00.4067164Z     at async CAC.<anonymous> (file:///home/runner/work/chrome-extension-google-slide-usertool-comment-stream/chrome-extension-google-slide-usertool-comment-stream/node_modules/.pnpm/vite@5.4.11_@types+node@20.14.15/node_modules/vite/dist/node/cli.js:828:5)[39m
2024-11-21T11:59:00.4185705Z  ELIFECYCLE  Command failed with exit code 1.
2024-11-21T11:59:00.4391698Z ##[error]Process completed with exit code 1.

【CRSJS 】vite5でcontent_scriptsを書くとエラーになったので調べてみた #vite - Qiita

同じ状況で調査してくれたほうがいたよう

Build error [crx:web-accessible-resources] TypeError: OutputBundle[“manifest.json”] is undefined · Issue #836 · crxjs/chrome-extension-tools

issue見に行ったら現在はCloseされているよう…？

releaseみたらStableなバージョンは2022-10-16の1.0.14で止まっている…

Betaのほうは更新されているようなのでやむなくBetaを入れて動かした

pn i -D @crxjs/vite-plugin@beta

でdev起動したらでなくなった

このケースに限らずだが、JavaScript周りは少し時間が経つとメンテナンス滞る→依存関係が複雑になる→ビルドすら通らなくなるというケースが多いなぁ

場合によっては別のツール選定をするかパッチ当てて直すかとかしかなくなってくる状況だし

なかなか厳しい…

DuckDBでコンソールから直接コマンドの実行結果を扱いたい

Thu, 05 Dec 2024 00:00:00 GMT

通常のユースケースなら、API叩いて返ってきたJSONをローカルに保存してDuckDBでread_jsonする

もしくはAPI叩いてその結果をパイプで渡してduckdb -c "SELECT * FROM read_json_auto('/dev/stdin', ignore_errors=true)"で標準出力に結果を出力するといった使い方になる

今回はDuckDB上でコマンドの結果をワンショットでとりあえず使いたいみたいなケース（ファイルに残したくないが、クエリは何度か叩いてデータを見たい）

調べてみたがDuckDBのコマンドラインオプションのみでは難しそうだった

サードパーティの拡張で次のような拡張があったのでこの拡張を使って実現する

shellfs – DuckDB Community Extensions

コンソール起動

duckdb

インメモリモードで起動

プラグインの読み込み

D INSTALL shellfs FROM community;  
D LOAD shellfs;

いくつかサンプルでクエリしてみる

GitHubのリポジトリのデータ

GitHub CLIでデータ出力、JSONで出力してそれをそのままクエリする

APIアクセスをする場合はDuckDB内でテーブルを作成（CTAS）してそちらに対してクエリするようにすると親切かな

D CREATE TABLE repositories  AS SELECT * EXCLUDE(watchers), watchers.totalCount as watchers from read_json_auto('gh repo list --visibility public --limit 200 --json name,stargazerCount,forkCount,watchers |');
D select * from repositories;
┌───────────┬──────────────────────────────────────────────────────────┬────────────────┬──────────┐
│ forkCount │                           name                           │ stargazerCount │ watchers │
│   int64   │                         varchar                          │     int64      │  int64   │
├───────────┼──────────────────────────────────────────────────────────┼────────────────┼──────────┤
│         2 │ tools                                                    │              4 │        2 │
│         0 │ dotfiles                                                 │              3 │        2 │
│         0 │ chrome-extension-copy-markdown-and-hatenablog-embed-link │              2 │        1 │
│         0 │ article-search                                           │              0 │        1 │
│         0 │ chrome-extension-google-slide-usertool-comment-stream    │              2 │        2 │
│         2 │ til                                                      │              1 │        3 │
│         0 │ deno-kusa-image                                          │              0 │        1 │
│         0 │ chrome-extension-slide-comment-stream                    │              0 │        1 │
│         0 │ failed-log-to-slack-action                               │              1 │        1 │
│         0 │ git-hooks                                                │              1 │        1 │
│         0 │ deno-terminal-image                                      │              3 │        1 │
│         0 │ slack-to-obsidian-memos-merge                            │              1 │        1 │
│         3 │ hatenablog_publisher                                     │              1 │        2 │
│         2 │ gh-annotations                                           │             14 │        1 │
│         0 │ crx-message-sample                                       │              0 │        1 │
│         0 │ mise                                                     │              0 │        0 │
│         0 │ sandbox                                                  │              1 │        1 │
│         0 │ obsidian-opener                                          │              0 │        1 │
│         0 │ deno-deploy-sample                                       │              0 │        1 │
│         0 │ deno-kv-logviewer                                        │              0 │        1 │
│         · │         ·                                                │              · │        · │
│         · │         ·                                                │              · │        · │
│         · │         ·                                                │              · │        · │
│         0 │ ansible-role-rbenv                                       │              0 │        2 │
│         0 │ ansible-role-git                                         │              0 │        2 │
│         0 │ mkdocs_sample                                            │              2 │        2 │
│         0 │ playbooks                                                │              0 │        2 │
│         0 │ ansible-role-ojava8                                      │              0 │        2 │
│         0 │ sw_push_notification                                     │              0 │        2 │
│         0 │ js-api                                                   │              0 │        2 │
│         0 │ ansible-playbook-sqs2slack                               │              0 │        2 │
│         0 │ ansible-role-mongodb                                     │              0 │        2 │
│         0 │ ansible-role-percona55                                   │              0 │        2 │
│         0 │ ansible-role-cassandra                                   │              0 │        2 │
│         0 │ ansible-elasticsearch-kibana4                            │              1 │        2 │
│         0 │ cleaver-theme                                            │              0 │        2 │
│         0 │ ansible-role-mysql55                                     │              0 │        2 │
│         0 │ ansible-playbook-rundeck                                 │              0 │        2 │
│         0 │ five_programming_problems_scala                          │              0 │        2 │
│         0 │ angular-elasticsearch-mdl                                │              0 │        2 │
│         0 │ gf_cli                                                   │              0 │        2 │
│         0 │ myApp                                                    │              0 │        2 │
│         0 │ test                                                     │              0 │        2 │
├───────────┴──────────────────────────────────────────────────────────┴────────────────┴──────────┤
│ 126 rows (40 shown)                                                                    4 columns │
└──────────────────────────────────────────────────────────────────────────────────────────────────┘

カレントディレクトリ直下のファイル一覧

各種コマンドとjcを組み合わせてJSON化すればいろいろ活用できそう

D SELECT * FROM read_json_auto('ls -al --color=no | jc --ls |');
┌────────────────────────────────┬────────────┬───────┬─────────┬─────────┬────────┬──────────────┐
│            filename            │   flags    │ links │  owner  │  group  │  size  │     date     │
│            varchar             │  varchar   │ int64 │ varchar │ varchar │ int64  │   varchar    │
├────────────────────────────────┼────────────┼───────┼─────────┼─────────┼────────┼──────────────┤
│ .                              │ drwxrwxr-x │    17 │ swfz    │ swfz    │   4096 │ Dec 19 20:36 │
│ ..                             │ drwxr-x--- │    35 │ swfz    │ swfz    │  12288 │ Dec 20 09:43 │
│ bin                            │ drwxrwxr-x │     2 │ swfz    │ swfz    │   4096 │ Nov 1 20:58  │
│ .cache                         │ drwxrwxr-x │    23 │ swfz    │ swfz    │   4096 │ Dec 19 20:59 │
│ CHANGELOG.md                   │ -rw-rw-r-- │     1 │ swfz    │ swfz    │ 144320 │ Nov 1 20:58  │
│ content                        │ drwxrwxr-x │     6 │ swfz    │ swfz    │   4096 │ Nov 1 20:58  │
│ custom_word_prh.yml            │ -rw-rw-r-- │     1 │ swfz    │ swfz    │    814 │ Nov 1 20:58  │
│ deploy.sh                      │ -rwxrwxr-x │     1 │ swfz    │ swfz    │   1231 │ Nov 1 20:58  │
│ .devcontainer                  │ drwxrwxr-x │     2 │ swfz    │ swfz    │   4096 │ Nov 1 20:58  │
│ eslint.config.mjs              │ -rw-rw-r-- │     1 │ swfz    │ swfz    │   3097 │ Nov 1 20:58  │
│ .eslintrc.json                 │ -rw-rw-r-- │     1 │ swfz    │ swfz    │   1713 │ Nov 1 20:58  │
│ functions                      │ drwxrwxr-x │     3 │ swfz    │ swfz    │   4096 │ Nov 1 20:58  │
│ gatsby-browser.tsx             │ -rw-rw-r-- │     1 │ swfz    │ swfz    │    276 │ Nov 1 20:58  │
│ gatsby-config.ts               │ -rw-rw-r-- │     1 │ swfz    │ swfz    │   4647 │ Nov 1 20:58  │
│ gatsby-eslint-custom-rules.mjs │ -rw-rw-r-- │     1 │ swfz    │ swfz    │    447 │ Nov 1 20:58  │
│ gatsby-node.ts                 │ -rw-rw-r-- │     1 │ swfz    │ swfz    │   5421 │ Nov 1 20:58  │
│ gatsby-ssr.tsx                 │ -rw-rw-r-- │     1 │ swfz    │ swfz    │    154 │ Nov 1 20:58  │
│ .git                           │ drwxrwxr-x │     8 │ swfz    │ swfz    │   4096 │ Dec 20 09:27 │
│ .github                        │ drwxrwxr-x │     3 │ swfz    │ swfz    │   4096 │ Nov 1 20:58  │
│ .gitignore                     │ -rw-rw-r-- │     1 │ swfz    │ swfz    │   1112 │ Nov 1 20:58  │
│     ·                          │     ·      │     · │  ·      │  ·      │     ·  │      ·       │
│     ·                          │     ·      │     · │  ·      │  ·      │     ·  │      ·       │
│     ·                          │     ·      │     · │  ·      │  ·      │     ·  │      ·       │
│ package.json                   │ -rw-rw-r-- │     1 │ swfz    │ swfz    │   5275 │ Dec 19 20:36 │
│ patches                        │ drwxrwxr-x │     2 │ swfz    │ swfz    │   4096 │ Nov 1 20:58  │
│ playwright.config.ts           │ -rw-rw-r-- │     1 │ swfz    │ swfz    │   1735 │ Nov 1 20:58  │
│ postcss.config.cjs             │ -rw-rw-r-- │     1 │ swfz    │ swfz    │     82 │ Nov 1 20:58  │
│ .prettierignore                │ -rw-rw-r-- │     1 │ swfz    │ swfz    │     95 │ Nov 1 20:58  │
│ .prettierrc                    │ -rw-rw-r-- │     1 │ swfz    │ swfz    │     93 │ Nov 1 20:58  │
│ public                         │ drwxrwxr-x │    12 │ swfz    │ swfz    │   4096 │ Dec 19 20:45 │
│ README.md                      │ -rw-rw-r-- │     1 │ swfz    │ swfz    │   2323 │ Nov 1 20:58  │
│ renovate.json                  │ -rw-rw-r-- │     1 │ swfz    │ swfz    │    242 │ Nov 1 20:58  │
│ schema.sql                     │ -rw-rw-r-- │     1 │ swfz    │ swfz    │    106 │ Nov 1 20:58  │
│ setup-test-env.js              │ -rw-rw-r-- │     1 │ swfz    │ swfz    │     35 │ Nov 1 20:58  │
│ src                            │ drwxrwxr-x │     9 │ swfz    │ swfz    │   4096 │ Nov 1 20:58  │
│ static                         │ drwxrwxr-x │     2 │ swfz    │ swfz    │   4096 │ Nov 27 11:40 │
│ tailwind.config.cjs            │ -rw-rw-r-- │     1 │ swfz    │ swfz    │    641 │ Nov 1 20:58  │
│ .textlintrc.yml                │ -rw-rw-r-- │     1 │ swfz    │ swfz    │   2177 │ Nov 1 20:58  │
│ tsconfig.json                  │ -rw-rw-r-- │     1 │ swfz    │ swfz    │    464 │ Nov 1 20:58  │
│ vitest.config.ts               │ -rw-rw-r-- │     1 │ swfz    │ swfz    │    186 │ Nov 1 20:58  │
│ vrt                            │ drwxrwxr-x │     3 │ swfz    │ swfz    │   4096 │ Nov 1 20:58  │
│ wrangler.toml                  │ -rw-rw-r-- │     1 │ swfz    │ swfz    │    109 │ Nov 1 20:58  │
│ yarn.lock                      │ -rw-rw-r-- │     1 │ swfz    │ swfz    │ 845328 │ Dec 19 20:36 │
├────────────────────────────────┴────────────┴───────┴─────────┴─────────┴────────┴──────────────┤
│ 47 rows (40 shown)                                                                    7 columns │
└─────────────────────────────────────────────────────────────────────────────────────────────────┘

最後にパイプ|をつけてその結果を受け取ってread_json_autoで読み込むよう

起動ユーザーの権限でコマンド実行しているようなのでいろいろできるかも

コンソール起動時、インメモリでDuckDBを起動しているためどこかにファイルが残るということがない

ローカルを汚したくない場合の手段の1つとして

Chrome拡張でOptionページの開き方

Wed, 04 Dec 2024 00:00:00 GMT

Chrome拡張のオプションページを開く方法

通常はアイコンを右クリックすれば「オプション」項目があるのでそれをクリックしてオプションページへ遷移する

よくそういうことやっている拡張あると思うが

Chrome拡張の開発でpopupのページからリンクやボタンを用意して「クリックされたらオプションページへ遷移する」というのをやりたかった

JavaScript

chrome.runtime.openOptionsPage();

<button className="border p-4" onClick={() => chrome.runtime.openOptionsPage()}>Open Option</button>

オプションページを用意している前提だが、これでOK

Universal Binary Installer

Tue, 03 Dec 2024 00:00:00 GMT

houseabsolute/ubi: The Universal Binary Installer

miseの内部で使っているパッケージマネージャーの中で、asdfのほかにubiという文字列を見つけて何のことか気になったので調べてみた

簡単に言うと現環境に適切なバイナリを判断してGitHub Releasesからインストールしてくれるくん

最近だとGoやRustで作られたコマンドは各種OSやアーキテクチャ用にバイナリをビルドしてGitHubのReleasesにおいてくれているところが多い（ように感じる）

バイナリ持ってくるだけだからその時点で結構楽ではあるが、ubiはorg/repoを指定するだけで持ってこれますよっていう感じ

インストール

$ curl --silent --location \
    https://raw.githubusercontent.com/houseabsolute/ubi/master/bootstrap/bootstrap-ubi.sh |
    sh

$HOME/binにインストールされる

$ ls bin
ubi

option

2つだけピック

-p --projectがリポジトリ

--tag指定もあるのでバージョン指定も可能

試しにvividを入れてみる

$ ./bin/ubi --project sharkdp/vivid

$ ls bin
ubi vivid

インストールできた

$ ./bin/vivid
error: 'vivid' requires a subcommand but one was not provided
  [subcommands: generate, preview, themes, help]

Usage: vivid [OPTIONS] <COMMAND>

For more information, try '--help'.

簡単

miseでの利用

mise内部でubiを使っているようだが、そもそもubiをmise管理化においてubiコマンドを使うことも可能

mise.config.toml

[tools]
ubi = 'latest'

自分はこの方法にした

何か試したいツールが発生したらとりあえずubiでインストールしてみて良さそうであればmise管理移行、なければPR作るみたいな流れができる

その流れでmiseへvividコマンドを管理できるようPRを作った

feat: add vivid by swfz · Pull Request #3089 · jdx/mise

現時点だとかなりmiseの開発が活発で数時間でマージしてくれてスピード感すごかった

おわり

一昔前は何かインストールするにもビルドが必要、ビルドがコケていろいろ調べて解決してたらかなり時間使ってしまったみたいなことが結構あった

最近はそういうのがなくなってきている

よい時代になったものだなぁ

GitHub ActionsのSlack Actionがメジャーバージョン更新されていた(v2)

Mon, 02 Dec 2024 00:00:00 GMT

下記はActionsの実行ログから

Run slackapi/slack-github-action@v2.0.0
  with:
    payload: {
    "text": "Algolia Index",
    "blocks": [
      {
        "type": "section",
        "text": {
          "type": "mrkdwn",
          "text": "hatenablog(486) 2024-11-24T21:06:29.404Z\nmemo(197) 2024-11-14T21:07:11.449Z\nobsidian(426) 2024-11-22T21:06:31.679Z\nsandbox(1) 2024-09-18T05:45:57.228Z\ntil(209) 2024-11-21T21:09:12.200Z"
        }
      }
    ]
  }
  
    errors: false
    payload-templated: false
    retries: 5
  env:
    SLACK_WEBHOOK_URL: ***
    SLACK_WEBHOOK_TYPE: INCOMING_WEBHOOK

file:///home/runner/work/_actions/slackapi/slack-github-action/v2.0.0/src/config.js:160
          throw new SlackError(
^
SlackError: Missing input! The webhook type must be 'incoming-webhook' or 'webhook-trigger'.
    at Config.validate (file:///home/runner/work/_actions/slackapi/slack-github-action/v2.0.0/src/config.js:160:1)
    at new Config (file:///home/runner/work/_actions/slackapi/slack-github-action/v2.0.0/src/config.js:113:1)
    at send (file:///home/runner/work/_actions/slackapi/slack-github-action/v2.0.0/src/send.js:13:1)
    at file:///home/runner/work/_actions/slackapi/slack-github-action/v2.0.0/src/index.js:9:1
    at ModuleJob.run (node:internal/modules/esm/module_job:222:25)
    at ModuleLoader.import (node:internal/modules/esm/loader:316:24)
    at asyncRunEntryPointWithESMLoader (node:internal/modules/run_main:123:5)

いつも通りにRenovateで来たPRをマージしていたらいつの間にかWorkflowでエラーが発生していた（メールで気付いた）

Release Slack Send v2.0.0 · slackapi/slack-github-action

変更点は上記

WorkflowBuilder、SlackAPI、IncommingWebhookの3点で破壊的変更があったよう

今までの設定で動かないケースが多くありそう

自分はIncommingWebhookのみしか使っていなかったので次の変更点があった

Webhook-typeの明示

今までは省略できたが、明示的にタイプを指定してねという話らしい

webhook-type: incoming-webhook

Webhook urlの指定方法

webhook: ${{ secrets.SLACK_WEBHOOK_URL }}

今までは環境変数にセットして読ませてた、推奨設定は上記のように直接指定することらしい

こちらは今までの環境変数から読ませる設定でも動いた

でも推奨設定にしたほうがよいだろうな

自分はそこまで変更量多くなかったけどたくさん使っている人はたいへんそう…

GitHub Actions+Gitでのマルチバイト文字列表示

Tue, 26 Nov 2024 00:00:00 GMT

マルチバイト文字列をActionsの中で扱う場合に気を付けようという話

git diff --name-onlyで出力される内容からマルチバイト文字列を含むファイル名をgrepで検索して後続につなげるような処理をしたかった

git diff --name-only | grep --color=no 'ファイル名' | xargs ....

というイメージ

ローカルではうまく動いたのでActionsの環境でも動かしてみたが期待通りの動作をせず

pipefail使っていなかったからってのもあるけど原因を突きとめるまで時間をとってしまった

で、追っていったらgit diff --name-onlyの結果が下記のようになっていた

'\262\267\343\201\206\343\202\202\343\201\256.md'

UTF-8エンコーディングされたバイト列が表示されていた…なるほどね…

$ printf '\262\267\343\201\206\343\202\202\343\201\256.md'
買うもの.md

pipeの後続でこの値ありきの処理をしていたのでgrepに引っかからずそれ以降の処理がされなかったというもの

あんまりマルチバイト文字列をそのまま扱うっていうパターンがなかったのもあるが…

対応

下記どちらかで対応できる

git config --global core.quotepath false

git -c core.quotepath=false diff --name-only

気を付けよう

よく見たらローカルの.gitconfigには設定がしっかり入っていた

pipefail

蛇足だが基本的にActionsに限らずシェルスクリプトではpipefail入れておいたほうがどこで問題があるか気付きやすいので入れておいたほうが良いといのをあらためて実感した

Actionsで設定するには下記

参考

まとめ

Actions+Gitでマルチバイト文字を扱う場合はcore.auotepathを設定する
基本的にpipefailを有効にする

CSSでレイアウトに影響を与えず見えない要素を指定する

Thu, 21 Nov 2024 00:00:00 GMT

document picture in pictureのときだけ特定要素を表示させるというのをしたかった

参考

「動画」だけでなく、すべての要素でピクチャーインピクチャーで使用可能 | Web Platform | Chrome for Developers

document picture in pictureの一部コード

 const content = document.querySelector('#dpinp');
 const pipWindow = await documentPictureInPicture.requestWindow({
   width: content?.clientWidth,
   height: content?.clientHeight,
   copyStyleSheets: true,
 });
 pipWindow.document.body.append(content);

<div id="dpinp">
  <div>
    <div>コンテンツ</div>
    <meter min={0} max={10} value={3}></meter>
    <div>
      <button id="pause-button">
        <PauseIcon />
      </button>
    </div>
  </div>
</div>

見た目のため簡略化したがpause-buttonをdocument picture in picture時は表示、通常時は非表示にさせたい

参考にあるようにdocument picture in picture時のスタイルはメディアクエリで指定できるのでそちらでやる

通常時の状態では非表示要素で用意しておきたい

Tailwind CSSを利用していたのでいつものようにhiddenかな?と思いcontentの中のタグにスタイルを設定した

Display - Tailwind CSS

hidden

display: none;

contents

display: contents;

が、pinpウィンドウのサイズを指定する際に、対象要素を表示するしないでclientHeightが変わってしまうようだった、なのでpinp対象の要素と同じサイズにならない

そういうケースにはvisiblityというプロパティを使えば良いらしい

調べたらすぐ出てきたが知らなかった

visible

visibility: visible;

invisible

visiblity: hidden;

Visibility - Tailwind CSS

「要素を「見えない状態」にしますが、DOM上のレイアウトには影響を与えません」とのこと

これだよこれ

しらなかった

component.tsx

<div id="dpinp">
  <div>
    <div>コンテンツ</div>
    <meter min={0} max={10} value={3}></meter>
    <div>
      <button id="pause-button" className="invisible">
        <PauseIcon />
      </button>
    </div>
  </div>
</div>

styles/tailwind.css

@media all and (display-mode: picture-in-picture) {
  #pause-button {
    @apply visible;
  }
}

通常時はinvisible、picture in picture時はvisible

これは良き

欲しかったのはREADMEのコードブロック実行ではなかった

Tue, 12 Nov 2024 00:00:00 GMT

いつも使っているすぐには出てこないくらいの量のオプションを指定したコマンドを新しい環境で実行したい

が、履歴に残っていないので他の環境からコピーしてくるなどしないといけないケースが発生して不便に感じていた

ということで、Markdownからコードブロックを実行するみたいなツールがあったので試してみた

zx, xcあたり

で、試していたら結局コマンドではなく次のような項目を満たせれば何でも良かったということに気がついた

ある程度書いたREADME
フィルタリングしてコンソール上に出力させる何か

pecoでフィルタリングしてコンソール上に出力するだけでOKだった

設定

zshの設定に下記を加える

function peco-p() {
  selected=$@
  if [ -n "$selected" ]; then
    BUFFER="${BUFFER}${selected}"
    # カーソル位置を末尾に移動
    CURSOR=$#BUFFER
  fi
}

function peco-file-line () {
  local line="$(cat README.md | peco)"
  peco-p ${line}
}
zle -N peco-file-line
bindkey '^gm' peco-file-line

これでREADMEがあるディレクトリでCtrl+g + m を押下すればREADMEからフィルタリングができる

こんな感じ

この手の話は履歴から持ってくるでも良いのでは?ってはなしもあるが、デバイスまたいだ場合などで初回実行で困る

これならREADMEにしっかり残しておこうという動機づけにもなる

もっと汎用的なコマンドや使い方だったらcheatとかを使えば良いかなと思っていたけどリポジトリ特有のものとかそういうのはこれでよい感

今度はタスクランナーとの比較っていう話になってきそうだけど今のところは個人プロジェクトだったらこれで十分

まぁ仕事だとTaskfileとかその辺なのかなー周りで最近聞くしなーとちょっと気になっている、そのうち触ってみようと思う

Spreadsheetで日付からQ単位、半期単位の文字列を生成する

Wed, 02 Oct 2024 00:00:00 GMT

Qごとや半期ごとに集計するみたいな際、日付情報からその日のQや上期、下期みたいなのを出力させる

Qごと

=ARRAYFORMULA(IF(A2:A="","",YEAR(A2:A)&"-"&CEILING(MONTH(A2:A)/3)&"Q"))

半期ごと

=ARRAYFORMULA(IF(A2:A="","",YEAR(A2:A)&"-"&CEILING(MONTH(A2:A)/6)&"期"))

1が上期、2が下期

イメージ

deno installでGitHub上のスクリプトを指定する

Thu, 19 Sep 2024 00:00:00 GMT

ただ単にGitHub上でファイル開いてURLコピーしてそれをインストールするという感じではなかった

下記Issueでも話題になっているが

How to import module from Github · Issue #5543 · denoland/deno

フォーマット

https://github.com/{username}/{reponame}/raw/{branch}/{filepath}

例

https://github.com/swfz/deno-kv-logviewer/blob/main/logviewer.tsで表示されるスクリプトをインストールする場合

deno install --allow-net --allow-env --unstable-kv https://github.com/swfz/deno-kv-logviewer/raw/main/logviewer.ts

で使えるようになる

画像をbase64化してimgタグで読み込む

Thu, 12 Sep 2024 00:00:00 GMT

denoでサイト作っていて、サンプル画像を伴うREADME的なページを作っていた

publicディレクトリを作りそこに画像を配置し、ホストしてしまうと画像レスポンスを返す用の処理も書かないといけないし、アクセスログにも乗ってくるので微妙だなーと思って埋め込むことにした

base64

base64 -w 0 hoge.png

-wは改行までの文字数指定

-w 0で改行なしのテキストを表示してくれる

manの結果

-w, --wrap=COLS  
wrap encoded lines after COLS character (default 76). Use 0 to disable line wrapping

画像の表示

<img src="data:image/png;base64,{base64化したテキスト}">

これでOK

URL SchemeでSlackの特定チャンネルへ遷移する

Tue, 06 Aug 2024 00:00:00 GMT

PCからだとそんなに旨味はないが、モバイルにおいてはショートカットと組み合わせたりすれば活用の幅が広がると思っている

よくつぶやき的に使う何でもポストチャンネルへの遷移をURL Schemeで行う

公式

Reference: Deep linking into Slack | Slack

公式にもちゃんと書いてある

slack://channel?team={TEAM_ID}&id={CHANNEL_ID}

team,idのパラメータが必要

team IDを取得する

Slack URL または ID を確認する | Slack

ブラウザで特定のURLを開いてTから始まる部分がteamのID

channel idを取得する

チャンネル設定からチャンネル情報を閲覧すると下の方にコピー項目があるのでコピーする

これで作成したURLを開くと特定のチャンネルへ遷移させられる

jqで一般的なJSONフォーマットをCSVへ変換するエイリアス

Thu, 18 Jul 2024 00:00:00 GMT

手元でさっとデータ出しや調査をしたい場合、とりあえずスプレッドシートに落としていろいろ見てみることが多く、その場合CSVをアップロードすることになる

手元でスクリプト書いたりする場合はなんだかんだでJSONに出力することが多いのでJSONからCSVへの変換をよく実施する

サンプル

sample.json

[
    {"name": "Alice", "age": 30, "city": "New York"},
    {"name": "Bob", "age": 25, "city": "Los Angeles"},
    {"name": "Charlie", "age": 35, "city": "Chicago"}
]

jqコマンド

こんな感じ

$ cat sample.json | jq -r '(.[0]|to_entries|map(.key)),(.[]|[.[]])|@csv'
"name","age","city"
"Alice",30,"New York"
"Bob",25,"Los Angeles"
"Charlie",35,"Chicago"

ヘッダ部分

JSONのキー部分の値を取得する

$ cat sample.json| jq -r '(.[0]|to_entries|map(.key))'
[
  "name",
  "age",
  "city"
]

順を追ってみる

$ cat sample.json| jq -r '.[0]'
{
  "name": "Alice",
  "age": 30,
  "city": "New York"
}
$ cat sample.json| jq -r '.[0]|to_entries'
[
  {
    "key": "name",
    "value": "Alice"
  },
  {
    "key": "age",
    "value": 30
  },
  {
    "key": "city",
    "value": "New York"
  }
]
$ cat sample.json| jq -r '.[0]|to_entries|map(.key)'
[
  "name",
  "age",
  "city"
]

2行目以降のデータ部分

各JSONオブジェクトの値を抽出

cat sample.json| jq -r '(.[]|[.[]])'
[
  "Alice",
  30,
  "New York"
]
[
  "Bob",
  25,
  "Los Angeles"
]
[
  "Charlie",
  35,
  "Chicago"
]

行ごとにしてから各行の値をリストにしている

aliasに

alias jtoc="jq -r '(.[0]|to_entries|map(.key)),(.[]|[.[]])|@csv'"

結果

$ cat sample.json | jtoc
"name","age","city"
"Alice",30,"New York"
"Bob",25,"Los Angeles"
"Charlie",35,"Chicago"

よく使うかなということでアイリエスに追加しておいた

手元でさっとJSONデータをCSVに変換できる

たとえば、スプレッドシートにデータをインポートしたり、CSV形式で保存して、他のツールと連携したりする場合に非常に便利

LookerStudioで表示する指標を選べるようにする

Fri, 28 Jun 2024 00:00:00 GMT

最近またLookerStudioで頻繁にダッシュボードをいじることが増えて発見してよいなと思った機能

オプション指標という設定がほぼどのグラフにもついていて、通常表示する指標のほかにプラスで指定できるというもの

グラフの種類によっては複数選択可能になっている（単一指標しか選択できないグラフもある）

設定箇所

たとえば、Togglの作業記録を取っていて可視化した場合に、分と時間という異なる単位の指標を切り分ける

週と曜日のピボットテーブルでの作業時間

時間で表示

読書時間をフィルタした結果

1未満が多くしっくり来ない…

ハイライト部分をクリックすると設定で指定した指標が選べる

複数表示

分のみ表示

あまり多くないので分表示のほうがしっくり頭に入ってくる

逆に大まかな分類の場合は時間での表示のほうが頭に入ってきやすい

他にも時系列グラフでも指定可能なのでバリエーションは結構広がる

Looker Studioで画像からテーマを生成する

Wed, 08 May 2024 00:00:00 GMT

「テーマとレイアウト」の一番下

ここから画像を読ませると、読ませた画像にあったテーマを生成してくれる

試しに下記スクショを保存してアップロードしてみた

提案されたテーマは下記

雰囲気はある

エディタとかターミナルのテーマのカラーパレットを上げたら良い感じになるんじゃないかな

試しにSolarized darkのパレットを探して上げてみた

ベースとなるテーマを画像から生成して細かいところは自分で調整も可能

自分の好きな色合いをとりあえず集めてアップロード、細かいところは自分で調整するだけでカスタマイズしたカラーテーマにできる

良い

ShellScript内で実行するコマンドのJSON引数をよしなにあつかいたい

Mon, 29 Apr 2024 00:00:00 GMT

gcloudコマンドを実行する例

gcloud pubsubでpublishする際にJSONをメッセージとして渡す場合

val=50
key="score"
date="2024-04-23"

message="{\"val\": $val, \"key\": \"$key\", \"date\": \"$date\"}"

gcloud pubsub topics publish metrics --message="$message" --attribute="source=obsidian-dailynote-metadata"

素直にやるとエスケープする必要があり面倒…

jqを使う方法

jqを通すだけで解決できる

message=$(jq -n \
    --arg val "$val" \
    --arg key "$key" \
    --arg date "$date" \
    '{val: ($val | tonumber), key: $key, date: $date}')

jq -nで新しいJSONオブジェクトを作成
--argオプションでjqに変数を渡し、JSONオブジェクト内でこれらの変数を使用

ヒアドキュメントを使う方法

ヒアドキュメントでも解決できる

message=$(cat << EOF
{
  "val": $val,
  "key": "$key",
  "date": "$date"
}
EOF
)

ヒアドキュメントで定義されたテキストをcatコマンドで取得しmessageに代入している

覚えておいて損はないはず

Windows Terminalでコピー時のフォーマット

Tue, 19 Mar 2024 00:00:00 GMT

Windows Terminal Interaction Settings | Microsoft Learn

RTF、HTML、もしくは両方でもコピーできる

Terminalの出力結果を色付きでGoogleSlideに貼り付けたかったので調べた

GoogleSlideに貼り付けたら、HTMLだと書式がコピーされた

GitHub Actionsで自作のActionsのIconを決めるためのリスト

Mon, 04 Mar 2024 00:00:00 GMT

せっかく自作でActionを作ったのでアイコンも設定したい

そもそも、どんなリストがあるのかわからなかったので調べてみた

公式には設定方法は書いてある

Metadata syntax for GitHub Actions - GitHub Docs

が、自分が欲しかったのは実際にどんな色とアイコンがあるか確認したうえで選択したかった

というわけで下記に行き着いた

GitHub Actions Branding Cheat Sheet

色を選択したらアイコンのリストが表示される

便利

Macのhomebrewでtmux3.3aから3.2aへバージョンを下げる

Wed, 14 Feb 2024 00:00:00 GMT

Homebrewで管理しているtmuxのバージョンを上げたら起動しなくなった

少し前のバージョンにして固定したのでそのときの記録

[user]$ tmux
[exited]
~ ❯❯❯
[user]$ 0;95;0c>|iTerm2 3.4.22>|iTerm2 3.4.22>|iTerm2 3.4.22

$ tmux -V
tmux 3.3a

バージョンを下げて固定する

brewはインストールするときにFormulaというファイルを読んでインストールしている

で、そのFormulaにどのバージョンをインストールするか記述しているので、Gitで追ってコミットハッシュを指定してあげれば特定バージョンをインストールできるらしい

という記事をよく見たので試してみた

対象コミット

tmux: update 3.2a_1 bottle. · Homebrew/homebrew-core@e44425d

$ brew install https://raw.githubusercontent.com/Homebrew/homebrew-core/e44425df5a8b3c8c24073486fa7e355f3ac19657/Formula/tmux.rb
Error: Installation of tmux from a GitHub commit URL is unsupported! `brew extract tmux` to a stable tap on GitHub instead.

だめだった、Homebrewのv4からこの手法は使えないよう

brew extractを使えと

下記のスクリプトを参考にした

dotfiles/mac/setup.sh at master · muratayusuke/dotfiles

tap

$ brew extract tmux swfz/taps --version 3.2a
Error: No available formula with the name "homebrew/core/tmux".
Please tap it and then try again: brew tap homebrew/core

$ brew tap homebrew/core
Error: Tapping homebrew/core is no longer typically necessary.
Add --force if you are sure you need it done

$ brew tap --force homebrew/core

深く追っていないが、いきなりextractを実行できなかったのでエラーが案内するとおりにまずhomebrew/coreを取得した

tap-new

$ brew tap-new swfz/taps
Initialized empty Git repository in /usr/local/Homebrew/Library/Taps/swfz/homebrew-taps/.git/

extract

$ brew extract tmux swfz/taps --version 3.2a
==> Searching repository history
==> Writing formula for tmux from revision e44425d to:
/usr/local/Homebrew/Library/Taps/swfz/homebrew-taps/Formula/tmux@3.2a.rb

install

$ brew install swfz/taps/tmux@3.2a

確認

$ tmux -V
tmux 3.2a

これでOKそう…

ふとしたときに更新されてしまわないようにpinしておく

$ brew pin swfz/taps/tmux@3.2a
$ brew list --pinned
tmux@3.2a

JIRAのAPIを使ってIssueの情報を取得する

Fri, 02 Feb 2024 00:00:00 GMT

主にドキュメントはこの辺

The Jira Cloud platform REST API

JIRAのIssueデータを取得するコード

const fs = require('fs');
const dayjs = require('dayjs');

const username = process.env.EMAIL;
const token = process.env.CONFLUENCE_API_TOKEN;
const buffer = Buffer.from(`${username}:${token}`);
const auth = buffer.toString('base64');
const projectName = 'HOGE'

const PAST_DAYS = 160;

const request = async(path, params) => {
  const url = new URL(`https://${process.env.ATLASSIAN_DOMAIN}/${path}`);
  if (params) {
    url.search = new URLSearchParams(params).toString();
  }

  console.log(url.toString());

  return await fetch(url.toString(), {
    method: 'GET',
    headers: {
      'Authorization': `Basic ${auth}`,
      'Accept': 'application/json'
    }
  }).then(res => res.json());
}

const fetchIssues = async(startAt = 0) => {
  const data = await request(`rest/api/3/search`, {
    jql: `project = ${projectName} AND status = Done AND updated >= -${PAST_DAYS}d`,
    startAt,
    expand: 'changelog',
  })

  console.log(`startAt: ${data.startAt}, maxResults: ${data.maxResults}, total: ${data.total}`);

  const issues = data.issues.map(issue => {
    return {
      key: issue.key,
      id: issue.id,
      timeestimate: issue.fields.timeestimate,
      timespent: issue.fields.timespent,
      title: issue.fields.summary,
      created: issue.fields.created.split('.')[0],
      updated: issue.fields.updated.split('.')[0],
      storypoint: issue.fields.customfield_10001 || '',
      assignee: issue.fields.assignee?.displayName || '',
      issueType: issue.fields.issuetype.name || '',
      statusChanges: issue.changelog.histories,
    }
  }).map(row => {
    const minutes = (row.timespent || row.timeestimate || NaN) / 60;
    const hours = (minutes / 60).toFixed(2)

    return {
      ...row,
      url: `https://${process.env.ATLASSIAN_DOMAIN}/browse/${row.key}`,
      minutes,
      hours,
    }
  })

  if (data.startAt + data.maxResults < data.total) {
    return [...issues, ...(await fetchIssues(data.startAt + data.maxResults))]
  }

  return issues
}

const main = async() => {
  const issues = await fetchIssues(0);

  fs.writeFileSync('./issues.json', JSON.stringify(issues, null, 2), 'utf8');
}

main()

projectNameは該当プロジェクトページで確認して指定する

環境変数

リクエストに必要な環境変数

ATLASSIAN_DOMAIN

利用中のATLASSIANドメイン

CONFLUENCE_API_TOKEN

Personal Access Tokenの値

Personal Access Tokenを発行したユーザーのEmail

リクエストパラメータ

基本的にドキュメント読めばよいが今回のコードのメモと所感を残しておく

jql

JIRAのQueryLanguage

SQLライクにクエリを書ける

今回はProject名もしくはキーとステータス、更新日時を指定した

expand

Issueに紐づくデータで取得したいものを指定する、指定がない場合はレスポンスに含まれない

今回だとchangelogを取得している（Issueの変更履歴、いつどのカラムがどう変わったかなど）

RESTなのにGraphQL的な使い方だなと感じるが気は効いている

この機能がなかったら結局Issue毎にchangelogのエンドポイントへリクエストすることになるので…

startAt

データのオフセットを指定できるため、一度のリクエストで取得した件数分上乗せして再帰的に特定範囲のデータを取得する

おわり

いろいろ雑な部分はあるが最低限こんな感じでデータは取れるようになる

生データは未加工でどこかにおいたほうがよいのでは？という話もあるが、単発で雑にまずデータ取ってみて分析とかするならまずはここからという感じ

サンプルなので一部のデータしか載せていないが実際にはレスポンスの中身をみて利用するデータを選定して整形処理なども含める

自分のケースだとステータスの移動のリードタイムを算出したりした

fields.customfield_xxxxxというようなカラムはJIRAで設定できるフィールドのようなのでこれも実際のレスポンス見て必要か判断する

GitHub CLIの選択肢移動でVimのキーを使いたい

Tue, 30 Jan 2024 00:00:00 GMT

GitHub CLIでは各種コマンドで選択肢を選ぶときにsurveryというパッケージを用いている

で、このパッケージを使って選択肢を移動するときにVimモードで移動できたら良いなと思っていた

Ctrl+j,Ctrl+kで上下移動的な感じ

で、いろいろ探していたらすでにVimモードがあるらしく、選択肢が表示された時点でEscキーを押下するとその後はj,kで上下移動できる

Document survey’s VimMode · Issue #1483 · cli/cli

しらなかった!!!

ターミナル上でのインタラクティブフィルタツールの移動はCtrl+jとCtrl+kなので若干違和感は残るが、以前より全然操作しやすくなった

ただ、survery自体はメンテナンス終了してた…

AlecAivazis/survey: A golang library for building interactive and accessible prompts with full support for windows and posix terminals.

これからどうなるのかは…ちょっとわかりません

mswでzipレスポンスを返す

Tue, 23 Jan 2024 00:00:00 GMT

mswでモックする対象としてzipや動画などバイナリファイルも扱える

次の例はGitHub Actionsの各ジョブのログをあらかじめDLしておきそれを読み込みレスポンスとして返す処理

handlerの例

export const handlers = [
  http.get('https://api.github.com/repos/*/*/actions/runs/*/logs', () => {
    const buffer = fs.readFileSync(
      path.resolve(process.cwd(), './src/mocks/responses/failed_log.zip')
    )

    return HttpResponse.arrayBuffer(buffer, {
      status: 200,
      headers: {
        'Content-Type': 'application/zip'
      }
    })
  })
]

公式の例ではmp4をバイナリとして返している

基本的にはこの方法でバイナリファイルでもレスポンスをモックすることが可能

公式

Responding with binary - Mock Service Worker

Jestでslackのwebhook.sendの検証

Fri, 19 Jan 2024 00:00:00 GMT

バージョン

@slack/webhook@7.0.2
jest@29.7.0

@slack/webhookを用いてWebhook経由のSlack通知を実装した際のテストコードの話

sendメソッドがどんな引数で呼ばれたかをチェックする

アプリケーションコード

import {
  IncomingWebhook,
  IncomingWebhookResult,
  IncomingWebhookSendArguments
} from '@slack/webhook'

export async function notify(
  webhookUrl: string,
  params: IncomingWebhookSendArguments
): Promise<IncomingWebhookResult> {
  const webhook = new IncomingWebhook(webhookUrl)

  return await webhook.send(params)
}

テストコード

  let webhookSendMock

  beforeEach(() => {
    webhookSendMock = jest.spyOn(IncomingWebhook.prototype, 'send').mockImplementation((params): Promise<IncomingWebhookResult> => Promise.resolve({text: 'ok'}))
  })

  it('run', () => {
    await main.run() // mainからアプリケーションコードを呼んでいる

    expect(webhookSendMock).toHaveBeenCalledWith(expect.objectContaining({
      text: expect.stringContaining('Workflow: test-workflow'),
      blocks: expect.anything()
    }))
  })

こんな感じで、引数の検証とレスポンスのモック両方行える

mswでもSlackへの通信をモックしてたが、spyOnによって上書きされるので、レスポンスを返すところまでmockImplementationで書いてあげる必要がある

使う側からみるとnew IncomingWebhookして返ってきたインスタンスをモックするにはどうすればよいのかと思ってたけど、prototypeを指定すればよいのね

たしかに、納得

やっていること

toHaveBeenCalledWithで呼ばれた際の引数のチェックを行える

toHaveBeenCalledWith

expect.objectContainingで再帰的に受け取ったオブジェクトの中身をチェックできる

objectContaining

中身の指定は固定の値やexpect.anything、expect.stringContainingなどのマッチャも指定できる

expect.stringContaining()やexpect.anything()を用いることで部分一致や特定のキー以下は何でもよいというようなチェックができる

今回の場合下記のようなパラメータでsendメソッドにパラメータを送っている

{
  text: "Workflow: test-workflow",
  blocks: [${色々…}]
}

他にもContaining系のマッチャはあるので場面によって使い分けする

ここだけは担保しておきたいというような場合にも検証ができるのとネストした場所でも使用できるので便利

テスト失敗時の差分表示

toHaveBeenCalledWith,objectContainingを用いたテストだと、差分があったときのdiff表示がprettyな表示にならないようで

検証対象の量が多いとどこに差分があるか探すのがつらくなってくる

一方この手の確認で有用なのはSnapshotテストが挙げられる

Snapshotテストは差分があった場合prettyな表示をしてくれるのでどこで差分があったか把握しやすい

なのでそもそも引数のオブジェクトのデータ量が多い場合はSnapshotテストに変更したほうが体験はよい

Snapshotテストだと基本的にはオブジェクトの中身すべて完全一致している必要があるので、このあたりもケースによって使い分けが必要

Octokitで扱うAPIのレスポンスの型定義

Mon, 15 Jan 2024 00:00:00 GMT

Octokitを使ってGitHubのAPIを叩いてデータを取得する

TypeScriptで開発してたのでしっかり型付けを行いたい

octokit/types.ts: Shared TypeScript definitions for Octokit projects

これ参照するのがよい?

npm i -D @octokit/types

README読んだがoctokitを変数化してoctokitに生えているメソッドから返ってくる型を特定する方法だった

できれば変数から型情報を抜き出すのはやりたくないので少し調べた

使い方のバリエーションとしてほかにもありそうかなということで、GitHub検索で探したら参考になりそうなコードが出てきた

参考

import type { Octokit } from "@octokit/rest";とあるようにOctokitの型情報が存在するようなのでそこからたどって行けそう

結局下記のような感じでデータの取得方法と対応した型定義の呼び出し方で定義できた

一部抜粋

export type Octokit = ReturnType<typeof getOctokit>
export type Jobs = GetResponseDataTypeFromEndpointMethod<
  Octokit['rest']['actions']['listJobsForWorkflowRun']
>['jobs']
export type Annotations = GetResponseDataTypeFromEndpointMethod<
  Octokit['rest']['checks']['listAnnotations']
>

export async function getFailedJobs(
  octokit: Octokit,
  runId: number
): Promise<Jobs> {
  const { data } = await octokit.rest.actions.listJobsForWorkflowRun({
    owner: context.repo.owner,
    repo: context.repo.repo,
    run_id: runId
  })

  const completedJobs = data.jobs.filter(j => j.status === 'completed')
  const failedJobs = completedJobs.filter(j => j.conclusion === 'failure')

  return failedJobs || []
}

export async function getJobAnnotations(
  octokit: Octokit,
  jobId: number
): Promise<Annotations> {
  const { data } = await octokit.rest.checks.listAnnotations({
    owner: context.repo.owner,
    repo: context.repo.repo,
    check_run_id: jobId
  })

  return data
}

GetResponseDataTypeFromEndpointMethodが便利

GitHub ActionsのOctokitでfetchを使いリクエストする

Wed, 10 Jan 2024 00:00:00 GMT

GitHub Actionsのカスタムアクションの開発をしていてエラーに遭遇したのでメモ

@actions/githubのgetOctokitを使ってoctokitを呼び出して使うとmswによるAPI通信のモックが行えない

動作環境

@actions/github@6.0.0
msw@2.0.14
node@21.2.0
octokit@3.1.2

テスト対象コード

export async function getWorkflowRun(
  octokit: Octokit,
  runId: number
): Promise<WorkflowRun> {
  const { data } = await octokit.rest.actions.getWorkflowRun({
    owner: context.repo.owner,
    repo: context.repo.repo,
    run_id: runId
  })
  core.debug('fetched workflow run')

  return data
}

テストコード一部抜粋

import { getOctokit } from '@actions/github'

  const octokit = getOctokit('dummy')
  it('getWorkflowRun', async () => {
    const workflowRun = await getWorkflowRun(octokit, 1)

    expect(workflowRun.id).toEqual(30433642)
  })

mswのhandler一部抜粋

import workflowRun from './responses/workflow_run.json'
export const handlers = [
  http.get('https://api.github.com/repos/*/*/actions/runs/*', () => {
    return HttpResponse.json(workflowRun)
  }),
]

mswのモックの設定を行いテストを実行してみたが下記のようにエラーが発生する状態だった

> typescript-action@0.0.0 test
> jest __tests__/main.test.ts

  console.warn
    Deprecation: [@octokit/request-error] `error.code` is deprecated, use `error.status`.
        at RequestError.get (/home/user/gh/self/failed-log-to-slack-action/node_modules/@octokit/request-error/dist-node/index.js:70:11)
        at isAssertionError (/home/user/gh/self/failed-log-to-slack-action/node_modules/jest-circus/build/formatNodeAssertErrors.js:179:13)
        at /home/user/gh/self/failed-log-to-slack-action/node_modules/jest-circus/build/formatNodeAssertErrors.js:58:14
        at Array.map (<anonymous>)
        at formatNodeAssertErrors (/home/user/gh/self/failed-log-to-slack-action/node_modules/jest-circus/build/formatNodeAssertErrors.js:39:43)
        at dispatch (/home/user/gh/self/failed-log-to-slack-action/node_modules/jest-circus/build/state.js:67:11)
        at processTicksAndRejections (node:internal/process/task_queues:95:5)
        at _runTest (/home/user/gh/self/failed-log-to-slack-action/node_modules/jest-circus/build/run.js:264:3)
        at _runTestsForDescribeBlock (/home/user/gh/self/failed-log-to-slack-action/node_modules/jest-circus/build/run.js:126:9)
        at _runTestsForDescribeBlock (/home/user/gh/self/failed-log-to-slack-action/node_modules/jest-circus/build/run.js:121:9)
        at run (/home/user/gh/self/failed-log-to-slack-action/node_modules/jest-circus/build/run.js:71:3)
        at runAndTransformResultsToJestFormat (/home/user/gh/self/failed-log-to-slack-action/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:122:21)
        at jestAdapter (/home/user/gh/self/failed-log-to-slack-action/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:79:19)
        at runTestInternal (/home/user/gh/self/failed-log-to-slack-action/node_modules/jest-runner/build/runTest.js:367:16)
        at runTest (/home/user/gh/self/failed-log-to-slack-action/node_modules/jest-runner/build/runTest.js:444:34)

      at node_modules/@octokit/request-error/dist-node/index.js:38:69
      at f (node_modules/once/once.js:25:25)
      at RequestError.get (node_modules/@octokit/request-error/dist-node/index.js:69:9)
          at Array.map (<anonymous>)

 FAIL  __tests__/main.test.ts (5.021 s)
  sample
    ✓ hoge (17 ms)
    ✕ github (269 ms)
  action
    ○ skipped sets the time output
    ○ skipped sets a failed status

  ● sample › github

    HttpError: Bad credentials

      34 |   runId: number
      35 | ): Promise<WorkflowRun> {
    > 36 |   const { data } = await octokit.rest.actions.getWorkflowRun({
         |                    ^
      37 |     owner: context.repo.owner,
      38 |     repo: context.repo.repo,
      39 |     run_id: runId

      at node_modules/@octokit/request/dist-node/index.js:124:21
      at getWorkflowRun (src/github.ts:36:20)
      at Object.<anonymous> (__tests__/main.test.ts:48:20)

Bad credentialsといわれていて、mswでモックしているはずなのにGitHubに通信が行ってしまっている

調べてみると、下記の参考Issueが見つかった

Unit testing: Bad credentials error · Issue #1115 · actions/toolkit

defaultではfetchやaxiosではないラッパーライブラリを使ってリクエストしているのでmswやnockなどはモックできない

Issueに掲載されている例とは若干違うが次のようにしたらモックできた

  it('github', async () => {
    const octokit = getOctokit('dummy', {request: fetch})
    const result = await getWorkflowRun(octokit, 1)
    console.log(result);
  })

getOctokit('dummy', {request: fetch})でrequestに使うモジュールを指定できる

fetchでAPIへリクエストするようにOptionを渡すことでmswが通信をモックできるようになる

Gitの-Cオプション

Wed, 20 Dec 2023 00:00:00 GMT

nodenvで特定のバージョンをインストールする際に指定バージョンがない場合にエラーが出る

普段は読み飛ばしてたがよく見るとこのコマンドで更新してねと書いてあった

node-build: definition not found: 18.18.0

See all available versions with `nodenv install --list'.

If the version you need is missing, try upgrading node-build:

  git -C /home/user/.anyenv/envs/nodenv/plugins/node-build pull

これで更新できるのかと思ったが

git -C

ん？

man見たら

       -C <path>
           Run as if git was started in <path> instead of the current working directory. When multiple -C options are given, each subsequent non-absolute -C <path> is interpreted relative
           to the preceding -C <path>. If <path> is present but empty, e.g.  -C "", then the current working directory is left unchanged.

           This option affects options that expect path name like --git-dir and --work-tree in that their interpretations of the path names would be made relative to the working directory
           caused by the -C option. For example the following invocations are equivalent:

               git --git-dir=a.git --work-tree=b -C c status
               git --git-dir=c/a.git --work-tree=c/b status

git が現在の作業ディレクトリではなく <path> で起動されたかのように実行します

知らなかったー!!!

これは楽

CI/CDとかのスクリプト内でも使えそう

WSL2からホスト（Windows）上に立てたProxy経由で通信したい

Wed, 13 Dec 2023 00:00:00 GMT

諸般の事情によりWSLから外への通信をWSL以外の何かしらを経由して通信するという要件が発生した

WSL以外の何かしらにプロキシを設置する

Virtualboxでプロキシ用VMを起動するという選択肢が提示されたがそのためだけにVirtualBox起動するのはな…ということで、結局GitBashでpproxyを起動することにした

Windows側

Pythonのインストール

参考：Windows PC へのPython3 導入手順 #Python - Qiita

環境変数PATHにも追加チェックボックにチェックした

これでWindows側でpy.exeが使えるようになるらしい

pproxyのインストール

GitBashを入れているのでGitBashから下記実行した

$ py -m pip install pproxy

pproxyの実行

$ py -m pproxy
Serving on :8080 by http,socks4,socks5

これだけでOKっぽい、簡単

カスタマイズしようと思えばいろいろできるみたいだが今回は不要だったのでこのまま

WSL2側

ホスト（Windows）側IPの特定

まずWindows側で立てたプロキシがどこかを判断する必要がある

$ ip route | grep 'default via' | awk '{print $3}'
172.1.1.1

$ ip route | grep 'default via' | grep --color=no -Eo '[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}'
172.1.1.1

どちらかが良さそう

このIPがWSLから見えるホスト側のIPなのでこの場合172.1.1.1:8080をプロキシとして指定する

httpでアクセス

$ curl -x http://172.1.1.1:8080 https://{proxyが必要なアクセス先URL}/

ssh設定

プロキシを通したいホストに対して下記設定を追加

ssh/config

ProxyCommand nc -X 5 -x 172.1.1.1:8080 %h %p

SOCKS5プロトコルでプロキシ通す設定

SOCKS4,5の違い

そもそもSOCKS4,5は

Socket Secure version 4,5の略らしい

SOCKS5プロキシのメリットとは？ | NordVPN

SOCKS5とSOCKS4はともにSOCKSプロトコルですが、SOCKS4は「UDP接続には利用できない」「プロキシ側に名前解決させることができない」「わずかな認証機能しかサポートしていない」という問題を抱えているのに対し、SOCKS5ではそれらの問題が解決されています。

基本的にSOCKS5を使ったほうが良さそう

HTTPプロキシとSOCKSプロキシの違い

HTTPプロキシはHTTPおよび HTTPSウェブページのみで動作するのに対し、SOCKS5プロキシはあらゆるトラフィックに対応しています。

HTTPプロキシとは、通常、特定のプロトコル用に設計された高レベルのプロキシを指します。これにより接続速度は向上しますが、SOCKSプロキシほど柔軟性や安全性は高くありません。SOCKSプロキシはHTTPプロキシよりも低レベルで動作するため、あらゆるプログラムやプロトコル、あらゆるトラフィックを制限なく扱うことができます。

TailwindCSSでレスポンシブレイアウト

Tue, 21 Nov 2023 00:00:00 GMT

本ブログのスタイルをTailwindCSSへ差し替えるついでにモバイル対応的なものもやることにした

以前は若干崩れているところがあり正直なにも対応してなかったのでこれを機に対応した

構成はheader、メインコンテンツ（記事本文とサイドバー）、そしてfooterの3つの主要セクションから成り立っている

メインコンテンツのレイアウトが、画面のサイズ（特に、中間のブレークポイントであるmd）に応じて変化するようになっている

具体的には、小さい画面ではメインコンテンツが縦に積み重なり、大きい画面では横並びになるように設定した

デモ

実際のコード

<div class="flex min-h-screen flex-col justify-between bg-gray-100">
  <div class="h-10 bg-blue-200">Header</div>
  <div class="bg-gray-200 flex grow flex-col md:flex-row">
    <div class="basis-0 md:basis-3/12"></div>
    <div class="basis-6/12 bg-white border-b-4 md:border-0 border-zinc-100">
      <div>記事本文</div>
      <div>記事本文</div>
      <div>記事本文</div>
      <div>記事本文</div>
      <div>記事本文</div>
      <div>記事本文</div>
      <div>記事本文</div>
      <div>記事本文</div>
      <div>記事本文</div>
    </div>

    <div class="basis-2/12 divide-y divide-gray-300 bg-white md:bg-red-200">
      <div class="h-24">
        Profile
      </div>
      <div class="h-24">
        Account
      </div>
      <div class="h-32">
        Archive
      </div>
    </div>
  </div>
  <div class="h-10 bg-blue-200">Footer</div>
</div>

細かい指定はこのコードからさらに追加しているがおおむねこの通りにした

こちらで大枠は説明済み

メインコンテンツ

flex-col md:flex-row

モバイルでは縦並び、mdブレークポイント以上では横並び

grow

余白のあるスペースをすべて埋めるために拡大

メインの記事のコンテンツ量が少ない場合にこれを指定しないとheader,footerとの間に隙間が空いてしまう

メインコンテンツ内の左側の余白

basis-0 md:basis-3/12

モバイルでは基本的に幅を取らず、mdブレークポイント以上では全体の3分の1の幅

インコンテンツ内の中央の記事本文

basis-6/12

全体の半分の幅

border-b-4 md:border-0 border-zinc-100

画面サイズが小さい場合には記事本文セクションの下に境界線を表示

画面が大きい場合には境界線は表示されない

これにより、異なる画面サイズでの視覚的な区別が付きやすいようにしている

メインコンテンツ内の右側のサイドバー

divide-y divide-gray-300

縦に区切り線を入れ、線の色を薄いグレーに設定

子要素の間に線を入れてくれる、今まで専用のコンポーネント作ってたがクラス名指定するだけでよいのめちゃ楽

Playground

Tailwind Play

コンテンツが足りない場合もfooterを下に維持する

Mon, 13 Nov 2023 00:00:00 GMT

どうやるんだって調べたシリーズ

header,contents,footerとあった場合に画面の縦幅に対しcontentsが少なかった場合でもfooterを画面の一番下に表示させたい

中央のボディセクションが動的に伸縮してコンテンツの量に応じてサイズが変わる状態

デモ

実際のコード

<div class="flex min-h-screen flex-col justify-between bg-gray-100">
  <div class="h-10 bg-blue-200 text-gray-500">Header</div>
  <div class="grow bg-green-100">
    <div>Content</div>
    <div>a</div>
    <div>b</div>
    <div>c</div>
    <div>d</div>
    <div>e</div>
    <div>f</div>
    <div>g</div>
    <div>h</div>
    <div>j</div>
    <div>l</div>
    <div>m</div>
    <div>n</div>
  </div>
  <div class="h-10 bg-blue-200 text-gray-500">Footer</div>
</div>

各クラスの処理

flex-col

Flexboxの子要素を縦列に配置

justify-between

子要素をコンテナの縦方向の始端と終端に配置（上下）

min-h-screen

コンテナの最小の高さをビューポートの高さにする

grow

余白のあるスペースをすべて埋めるために拡大

これにより、headerとfooterの間の残りのスペースを占有

Contentsの内容が少なかったとしてもgrowを指定したItemスペースを専有する

Playground

Tailwind Play

ナビゲーションリンクのレスポンシブな対応

Thu, 09 Nov 2023 00:00:00 GMT

TailwindCSSでどうやるんだって調べたシリーズ

ブログサイトで直前直後の記事へのリンクを用意するパターン

画面サイズが十分に大きい場合は、リンクが一行に両端へ配置

画面が狭くなるとリンクが折り返されて上下に配置される

ただし、文字列の位置は左右に寄せる状態を維持

デモ

実際のコード

<div class="flex flex-row flex-wrap justify-between bg-gray-100">
  <div class="bg-blue-200 text-gray-500">◀直前の記事へのリンク</div>
  <div class="grow bg-green-200 text-right text-gray-500">直後の記事へのリンク▶</div>
</div>

各クラスの処理

flex-row

子要素を水平方向に並べる

flex-wrap

子要素がコンテナをオーバーフローする際に、新しい行に折り返す

justify-between

子要素をコンテナの両端に配置

grow

要素が利用可能な追加のスペースを取る

これにより、右の要素が余分なスペースを埋める

text-right

要素内のテキストを右そろえ

Playground

Tailwind Play

Denoでファイルの読み書き

Wed, 01 Nov 2023 00:00:00 GMT

開発中に、よく実際にAPIを叩いた結果を読ませたり書き込んだりする処理を入れたくなる時があるのでそのときのためのメモ

読み込み

readFile, readFileSync, readTextFile, readTextFileSyncなどがある

Syncはdeno deployには対応していないらしいのでdeploy使う場合はSyncを使わないほうが良い

便利コマンドとかの場合はSyncつかっても問題ない

readFile

const decoder = new TextDecoder('utf-8')
const file = await Deno.readFile('contributions.json')
const data = JSON.parse(decoder.decode(file))

radFile, readTextFileの違い

readFileは戻り値がUnit8Array

テキストファイルを読む場合decoderを挟む必要がある

ただのテキストを読む場合

const data = JSON.parse(await Deno.readTextFile('contributions.json'))

1行で書ける

どれを使うにしても実行時に--allow-readオプションが必要

書き込み

const data = await getContributions();
await Deno.writeTextFile('contributions.json', JSON.stringify(data))

テキスト書き込むだけならこれでOK

実行時に--allow-writeオプションが必要

参考

【Deno1.16～】ローカルファイルの読み込み方法4種 #JavaScript - Qiita

react-instantsearch-hooks-webが新たに書き換えられたらしい

Wed, 18 Oct 2023 00:00:00 GMT

AlgoliaのReactクライアントを使っているプロジェクトで、開発サーバ立ち上げたら下記のようなログが…

[InstantSearch] The package `react-instantsearch-hooks` is replaced by `react-instantsearch-core`. The API is the same, but the package name has changed. Please update your dependencies and follow the migration guide: https://www.algolia.com/doc/guides/building-search-ui/upgrade-guides/react/

見に行ったらマイグレーションガイドが出てた

Upgrading React InstantSearch | Algolia

書き直したらしい…

react-instantsearch-hooks-webはreact-instantsearchになります、とのこと

codemodsがあるからということで試してみたが差し替えてくれなかった…

$ npx @codeshift/cli --packages 'instantsearch-codemods#ris-v6-to-v7' pages
Need to install the following packages:
@codeshift/cli@0.19.3
Ok to proceed? (y) y
⚠ Unable to locate Hypermod package: @hypermod/mod-instantsearch-codemods
ℹ Attempting to download npm package: instantsearch-codemods
✔ Found remote Hypermod package: instantsearch-codemods
Running transform: /home/user/.npm/_npx/f341b6febc846893/node_modules/@hypermod/cli/node_modules/instantsearch-codemods#ris-v6-to-v7
No files selected, nothing to do.
All done.
Results:
0 errors
0 unmodified
0 skipped
0 ok
Time elapsed: 0.008seconds

codemodsは平たく言うとマイグレーションガイドの操作やある程度規則に沿った変更を自動でやってくれるくん

ASTからASTに変換する、特定の条件に合うコードはこう変換するというルールをコード定義することで単純作業を自動化する

Angularは結構前からマイグレーション時にこういうことやってくれてたので多分これ使っているのかな

npmからinstantsearch-codemodsで調べたらほかにも情報が出てきた

instantsearch-codemods - npm

そこにドキュメント以外のものも載ってたので試してみる

$ npx @codeshift/cli --packages 'instantsearch-codemods#rish-to-ris' pages
Need to install the following packages:
@codeshift/cli@0.19.3
Ok to proceed? (y) y
⚠ Unable to locate Hypermod package: @hypermod/mod-instantsearch-codemods
ℹ Attempting to download npm package: instantsearch-codemods
✔ Found remote Hypermod package: instantsearch-codemods
Running transform: /home/user/.npm/_npx/f341b6febc846893/node_modules/@hypermod/cli/node_modules/instantsearch-codemods#rish-to-ris
No files selected, nothing to do.
All done.
Results:
0 errors
0 unmodified
0 skipped
0 ok
Time elapsed: 0.009seconds

これでも変わらず

Running transform でコードの場所が出力されるので見に行って中身読んだら、コード量は少ないしやっていることも分かるには分かる

ASTさえ把握してしまえば追うことはできそう

幸いペライチのプロジェクトなので一ヵ所しか変更なかったので、手動で対応して終わらせたw

で開発サーバが起動した

Starting from the next major version, InstantSearch will change how widgets state is preserved when they are removed. InstantSearch will keep the state of unmounted widgets to be usable by other widgets with the same attribute.

We recommend setting `future.preserveSharedStateOnUnmount` to true to adopt this change today.
To stay with the current behaviour and remove this warning, set the option to false.

See documentation: https://www.algolia.com/doc/api-reference/widgets/instantsearch/js/#widget-param-future

なんかまたいわれている…

挙動変更があるよって言っているっぽい

majorバージョンでって言っているのでそのとき対応しよう…

対応PR

migrate react-instantsearch-hooks-web to react-instantsearch by swfz · Pull Request #199 · swfz/article-search

pnpmでyarn.lockからimportしてロックファイルを生成する

Fri, 13 Oct 2023 00:00:00 GMT

最近yarnをv1のまま使っていていろいろ不具合を踏むことが多くなってきたので移行先としてpnpmを使い始めている

ローカルでpnpmをとりあえず入れてみたものの、依存関係が変わり今まで通り動かなくなってしまい時間を溶かしていた

pnpm importを知ってればサクッと行く話だったのでメモ

import

特定のロックファイルからpnpm-lock.yamlを生成するコマンドが用意されている

pnpm import | pnpm

pnpm import yarn.lock
pnpm i --frozen-lockfile

これで既存のyarn.lockと内容変えずにインストールできるはず

個別にインストール

今回の個別の話

次のリポジトリでpnpmを使うようにした

swfz/article-search

yarnの場合フラットなnode_modulesになっていて明示的にpackage.jsonになかったとしても、どこかのモジュールの依存の中に存在するモジュールを呼び出すことができた

pnpmにしたことによって今までのような使い方ができなくなるので使いたい場合は明示的にpackage.jsonに追加してあげる必要がある

下記は依存の中のライブラリだがコード中で呼び出していたためインストールし直す必要があった（ビルド時に「ないよ！」と怒られる）

"instantsearch.js": "4.58.0"
"@testing-library/dom": "9.3.3" // dev

インストールし直すときにyarn.lockの中からバージョンを探してバージョンを固定してインストールした

$ yarn why instantsearch.js
$ yarn why @testing-library/dom

$ pnpm i instantsearch.js@4.58.0
$ pnpm i -D @testing-library/dom@9.3.3

algolia系のモジュールは結構破壊的変更が入っているイメージがある

だいたいバージョン上げるとうまく動かない

今回何も考えず移行したらテストが通らずいろいろ試してたが、結局この辺のバージョンがうまく噛み合っていなかったのが原因のよう

最初から一通りドキュメントを読んでおけばそんなに時間を溶かすことなかったのに案件

diffから後で適用するためのPatchを作成し充てる

Tue, 03 Oct 2023 00:00:00 GMT

差分からpatchファイルを作成

$ git diff --no-prefix path/to/filename > diff.patch

適用

$ patch -p1 < diff.patch
...
...
File to patch: path/to/filename

あまり良くないがローカルでは変更したいみたいなことがたまにあるのでメモ

管理下のリポジトリリストからRenovateのPRを集計する

Wed, 20 Sep 2023 00:00:00 GMT

リポジトリごとのRenovatePR数を集計する

$ gh repo list --limit 200 --json 'nameWithOwner' | jq -rc '.[]|.nameWithOwner' | xargs -i sh -lc "gh pr list -R {} -S 'author:app/renovate' --json 'title,url'| jq '.[]|.repo|=\"{}\"'"  | tee -a pull_requests.json
$ cat pull_requests.json | jq -s 'group_by(.repo)|map({"repo": .[0].repo, "count": [.[]]|length}) | sort_by(.count)'

リポジトリのリスト

まず自身の管理化のリポジトリリストを出す

$ gh repo list --limit 200 --json 'nameWithOwner' | jq -rc '.[]|.nameWithOwner'
swfz/tools
swfz/memo
swfz/deno-kusa-image
swfz/article-search
swfz/chrome-extension-google-slide-usertool-comment-stream
swfz/deno-terminal-image
swfz/til
swfz/dotfiles

各リポジトリごとにPullRequestのリストを出す

とりあえずタイトルとURLは必要かなということで出力

gh pr listの-Sオプションでブラウザでの検索条件と同様のクエリを指定できる、GitHub Appのユーザーはapp/renovateのように指定するみたい

Searching issues and pull requests - GitHub Docs

author:app/renovate

これは知らなかった

repoの値だけgh pr listのJSON出力するオプションがなさそうだったのでxargsで受け取った引数を無理やり入れ込んでる

pull_requests.json

{
  "title": "chore(deps): update gatsby monorepo",
  "url": "https://github.com/swfz/til/pull/1585",
  "repo": "swfz/til"
}
{
  "title": "chore(deps): update dependency @types/node to v20.7.0",
  "url": "https://github.com/swfz/deno-kusa-image/pull/15",
  "repo": "swfz/deno-kusa-image"
}
{
  "title": "chore(deps): update dependency @babel/core to v7.23.0",
  "url": "https://github.com/swfz/tools/pull/658",
  "repo": "swfz/tools"
}

集計する

後半はgroup by count的なことをしている

pull_requests.jsonの状態のJSONファイル（厳密にはJSONではないが）をjqで読み込む際は-sをつけて全体を配列として扱う

一部抜粋した結果

$ cat pull_requests.json | jq -s 'group_by(.repo)|map({"repo": .[0].repo, "count": [.[]]|length}) | sort_by(.count)'
[
  .....
  .....
  .....
  {
    "repo": "swfz/gh-annotations",
    "count": 6
  },
  {
    "repo": "swfz/chrome-extension-copy-markdown-and-hatenablog-embed-link",
    "count": 10
  },
  {
    "repo": "swfz/tools",
    "count": 11
  },
  {
    "repo": "swfz/dotfiles",
    "count": 14
  }
]

PullRequest数の昇順

特定ディレクトリ以下のGit管理されてるディレクトリがあるかチェックする

Sat, 09 Sep 2023 00:00:00 GMT

sandboxとかそういう感じのディレクトリを作ってその下に何かしらのHelloWorldやお試しでプロジェクトを作るということをよくやっている

で、その中で形になりそうなものはGitHubに上げておく場合が多いが、途中で飽きてそのままというのもある

たまには精査しておきたいと思い調べて書いた

gitcontrol.sh

#!/bin/bash
base_dir="."
target_directory=".git"
for dir in "$base_dir"/*/
do
  if [ ! -d "${dir}${target_directory}" ]; then
    echo "${dir} does not have ${target_directory}"
  fi
done

直下のディレクトリを対象にチェックする

.gitディレクトリがない場合は出力する

$ sh gitcontrol.sh
./confluence/ does not have .git
./gas-ga4-to-pixela/ does not have .git
./react-sample/ does not have .git
./sentry/ does not have .git
./slack-notification/ does not have .git
./sql-parse/ does not have .git
./terraform-aurora-serverless-lambda/ does not have .git
./terraform-workflows-test/ does not have .git

こんな感じ

懐かしいディレクトリが出てきた

gsutilで特定バケット以下のすべてのファイルを別バケットへコピーする

Thu, 07 Sep 2023 00:00:00 GMT

gsutil -m cp -r 'gs://old-bucket/*' gs://new-bucket

-mはgsutilのオプションで並列実行

*を入れないと同じディレクトリ構成にならない（シェルでの操作と同様）

new-bucket/old-bucket

という感じでディレクトリが作成されてしまう

DenoでRenovateを使う

Tue, 29 Aug 2023 00:00:00 GMT

下記参考にした

Renovate で Deno の依存関係を自動で更新する

[https://blog.s2n.tech/articles/renovate-deno:embed:cite]

Renovateは正規表現を使って対象のファイル、モジュール、バージョンを特定できる機能がある

それを使ってDenoのモジュールのバージョン更新を検知してRenovate経由で更新できるようにする

renovate.json

{
  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
  "extends": [
    "config:base"
  ],
  "regexManagers": [
    {
      "fileMatch": ["\\.tsx?$"],
      "matchStrings": [
        "(?:im|ex)port(?:.|\\s)+?from\\s*['\"](?<depName>https://deno.land/.+?)@v?(?<currentValue>\\d+?\\.\\d+?\\.\\d+?).*?['\"]"
      ],
      "datasourceTemplate": "deno"
    },
    {
      "fileMatch": ["\\.tsx?$"],
      "matchStrings": [
        "(?:im|ex)port(?:.|\\s)+?from\\s*['\"](?<depName>https://deno.land/x/.+?)@v?(?<currentValue>\\d+?\\.\\d+?\\.\\d+?).*?['\"]"
      ],
      "datasourceTemplate": "deno"
    },
    {
      "fileMatch": ["\\.tsx?$"],
      "matchStrings": [
        "(?:im|ex)port(?:.|\\s)+?from\\s*['\"]https://esm.sh/(?<depName>.+?)@v?(?<currentValue>\\d+?\\.\\d+?\\.\\d+?).*?['\"]"
      ],
      "datasourceTemplate": "npm"
    }
  ]
}

プロジェクト自体雑に作ってしまったため参考記事のようにimport_mapないし、Denoの流儀にも沿っていないところがありそう…

下記のパターンがあったのでそれぞれ追加した

deno std
- 参考そのまま
deno.land/x
- サードパーティモジュール、参考の正規表現の内容にx/を加えただけ
esm.sh
- 正規表現は参考サイトから少しだけ変更した
- datasourceはnpm

結果、反映された

Gitでステージされていないファイルを削除する

Wed, 23 Aug 2023 00:00:00 GMT

知らなかったー、都度調べて使ってた気もするけどぱっと出てこなかった

ファイル

git clean -f

ファイルとディレクトリ

git clean -fd

dry run

git clean -n

試してみる

$ git status
## master...origin/master
?? .hoge/
?? fuga.txt
?? hoge.txt

$ git clean -n
Would remove fuga.txt
Would remove hoge.txt

削除される対象がリストアップされる

$ git clean -nd
Would remove .hoge/
Would remove fuga.txt
Would remove hoge.txt

ディレクトリもリストアップ対象に含まれる

$ git clean -d
fatal: clean.requireForce defaults to true and neither -i, -n, nor -f given; refusing to clean

-d以外のオプションと組み合わせてね、具体的には-i:(対話的に削除), -n:(Dry Run), -f:(ファイル)と組み合わせてね

$ git clean -df
Removing .hoge/
Removing fuga.txt
Removing hoge.txt

ディレクトリも削除される

対話的に削除する

$ git clean -id
Would remove the following items:
  .hoge/    fuga.txt  hoge.txt
*** Commands ***
    1: clean                2: filter by pattern    3: select by numbers    4: ask each             5: quit                 6: help
What now> c
Removing .hoge/
Removing fuga.txt
Removing hoge.txt

-iオプションで対話的にどのファイルを削除するか選択する

実際の画面だと、cleanのc部分に色がついていて文言の頭文字を入力してねと言うようなUIになっている

いろいろ選択肢がある

正規表現でフィルタ

$ git clean -i
Would remove the following items:
  fuga.txt  hoge.txt
*** Commands ***
    1: clean                2: filter by pattern    3: select by numbers    4: ask each             5: quit                 6: help
What now> f
  fuga.txt  hoge.txt
Input ignore patterns>> hoge.*
  fuga.txt
Input ignore patterns>>
Would remove the following item:
  fuga.txt
*** Commands ***
    1: clean                2: filter by pattern    3: select by numbers    4: ask each             5: quit                 6: help
What now> c
Removing fuga.txt

f入力
削除するファイルのパターン入力
対象の決定（エンター）
cで削除

番号指定

$ git clean -i
Would remove the following items:
  fuga.txt  hoge.txt
*** Commands ***
    1: clean                2: filter by pattern    3: select by numbers    4: ask each             5: quit                 6: help
What now> s
    1: fuga.txt    2: hoge.txt
Select items to delete>> 2
    1: fuga.txt  * 2: hoge.txt
Select items to delete>>
Would remove the following item:
  hoge.txt
*** Commands ***
    1: clean                2: filter by pattern    3: select by numbers    4: ask each             5: quit                 6: help
What now> c
Removing hoge.txt

s入力
削除するファイルに振られた番号を入力
対象の決定（エンター）
cで削除

URLSearchParamsで配列を扱いたい

Fri, 04 Aug 2023 00:00:00 GMT

URLのパラメータでid=1&id=2みたいな文字列を作りたい

URLSearchParamsのドキュメント

URLSearchParams - Web API | MDN

重複する検索パラメータの項で同じキーの値が複数ある場合、クエリ文字列からパースして値を取得する方法は載っていたがクエリ文字列を生成する方法は載っていなかった

普通に配列渡したらよしなにやってくれるかと思ったらそうはいかなかった

> ids = [1,2,3]
> search = new URLSearchParams({ids})
URLSearchParams { 'ids' => '1,2,3' }
> search.toString()
'ids=1%2C2%2C3'

カンマ区切りにされてしまうのね

参考

javascript - Passing array into URLSearchParams while consuming http call for get request - Stack Overflow

> ids = [1,2,3]
> search = new URLSearchParams(ids.map(s => ['id', s]))
URLSearchParams { 'id' => '1', 'id' => '2', 'id' => '3' }
> search.toString()
'id=1&id=2&id=3'

これで良いらしい

他のパラメータも含める場合

> ids = [1,2,3]
> search = new URLSearchParams(ids.map(s => ['id', s]).concat([['a', 'a']]))
URLSearchParams { 'id' => '1', 'id' => '2', 'id' => '3', 'a' => 'a' }
> search.toString()
'id=1&id=2&id=3&a=a'

勉強になりました

JavaScriptで辞書不要の分かち書きを行う

Thu, 27 Jul 2023 00:00:00 GMT

分かち書きをしたくて少し調べてみたら辞書を使わず機械学習で検出するライブラリがあるということで使ってみた

辞書が不要なので未知の語句に対しても精度保てそうって感じらしい

leungwensen/tiny-segmenter: Mirror of TinySegmenter, the super compact Japanese tokenizer in JavaScript.

README通りに書けばOKだったのですぐ動いた

npmに上がってるのでdenoから使う場合はesm.shでimportして使用した

tiny_segmenter_sample.ts

import TinySegmenter from "https://esm.sh/tiny-segmenter@0.2.0";

const title = "Slack APIで特定チャンネルの会話履歴を取得する";

const segmenter = new TinySegmenter();
const segments = segmenter.segment(title);
console.log(title);

実行

直近の記事タイトルを拝借してきた

deno run tiny_segmenter_sample.ts
[
  "Slack", " ",
  "API",   "で",
  "特定",  "チャンネル",
  "の",    "会話",
  "履歴",  "を",
  "取得",  "する"
]

少なくともここで区切ってしまう?みたいなのが多くなければOKなので大丈夫そう

ライブラリ読み込みするだけで使えるので気軽に使えて良い

ただ、メンテナンスはされてなさそうなので若干の不安が残るが個人使用なら…

Slack APIで特定チャンネルの会話履歴を取得する

Wed, 12 Jul 2023 00:00:00 GMT

やったのでメモ

ただただ投稿された内容をAPIで取得するだけ

トークンの取得

Slack | Bolt for JavaScript

Boltを使うわけじゃないが、Botトークンとユーザートークンの違いなど、あとはチュートリアルも含め日本語で解説があるので参考になる

Botアクセストークンを使うのが通常っぽい

必要権限

channels.read
channels.history
groups:history

の権限を入れた

Features > OAuth & Permissionsの画面で権限を追加する

テスター

ドキュメントとサンプルコードとテスターがついているページ、これよい

https://api.slack.com/methods/conversations.history

tokenはxoxb-xxxxxxってやつをつかう、Botトークン

ChannelIDとトークンを入れて実行し、レスポンスが返ってくれば疎通はOK

Botユーザーを対象チャンネルに招待しないと見えないので招待はしておく

招待していない状態で叩いても404になる

@bot名でメンションつけて「いないけど招待する？」って聞かれるので招待した

サンプルコード

サンプルコードを使って実際にCLIから取得してみる

yarn add @slack/web-api

サンプルコードだけだと動かせなかったのでいくつか修正して次のような感じで実行できるようにした

get-posts.js

// Require the Node Slack SDK package (github.com/slackapi/node-slack-sdk)
import { WebClient, LogLevel } from '@slack/web-api'
import dayjs from 'dayjs';

const token = process.env.SLACK_BOT_TOKEN;
const channelId = process.env.SLACK_CHANNEL_ID;
const targetDate = process.argv[2] || dayjs().format('YYYY-MM-DD');

const client = new WebClient(token, {
  // LogLevel can be imported and used to make debugging simpler
  // logLevel: LogLevel.DEBUG
});

const transformer = (message) => {
  const {text, ts} = message;
  const time = dayjs.unix(ts).format('HH:mm');

  return `${time} ${text}`;
}


(async() => {
  const result = await client.conversations.history({
    channel: channelId
  });

  const conversationHistory = result.messages;

  const groupByDate = conversationHistory.reduce((acc, message) => {
    const date = dayjs.unix(message.ts).format('YYYY-MM-DD');

    acc[date] = acc[date] || [];

    return {...acc, [date]: [...acc[date], message]};
  }, {});

  const list = groupByDate[targetDate].map(transformer).reverse();
  console.log(list);
})();

特定日付のポストを表示できるようにした、用途的にこれで十分だったのでスレッドとかは考慮してない

node get-posts.js 2023-07-17
[
  '05:37 寝てしまった、、、',
  '09:07 クーラーつけてお布団かぶって寝るの最高',
  '16:46 水遊び'
]

dayjsでunixtimeを変換する

レスポンスに入っているtsはUNIXタイムスタンプ

dayjsで読み込む

const ts = '1688893846.297589';
const time = dayjs.unix(ts);

const timeStr = time.format('YYYY-MM-DD HH:mm:ss');

2023-07-09 18:10:46

他参考

Slack APIでチャンネルのメッセージを取り出してみる - Qiita

SpreadsheetのQueryで日付セルの値をWHEREに含める

Fri, 02 Jun 2023 00:00:00 GMT

いつも忘れるのでメモ

QUERYでシート内のセルの値を使うときのパターンいくつか

普通の文字列が対象

=QUERY(A1:C5,"SELECT B WHERE A = '"&E2&"'")

固定($)も使える

数値が対象

=QUERY(A1:C5,"SELECT A WHERE B > "&E2&" AND B < "&E3)

条件が最後に来る場合は&でセル指定するだけで良い

これを見るとセル指定の後の&は"をエスケープするための記述っていうことが分かる

日付が対象

単純な固定値として日付をQUERYする

=QUERY(A1:C5,"SELECT B WHERE C = date '2023-05-01'")

日付のセルを指定してQUERYで使う

一度テキストで特定フォーマットにしてからQUERY内のdateで日付ですよと教えてあげる必要がある

=QUERY(A1:C5,"SELECT B WHERE C = date '"& TEXT(E2, "yyyy-mm-dd")&"'")

どうしてもクオートとかガンガン出てくるので覚えられない

gatsby-plugin-algoliaのメジャーバージョンアップに伴う色々

Fri, 12 May 2023 00:00:00 GMT

本ブログで使っているplugin、普通にバージョンを上げただけだとビルドが通らなかったので調べていろいろ対応した

対象

gatsby-plugin-algolia 0.26.0 -> 1.0.3

主な変更点

chore(release): 1.0.0 · algolia/gatsby-plugin-algolia@c04512c

BREAKING CHANGESで書いてあった

* indexing:**enablePartialUpdatesをtrueにし、オプションを削除しました。  
* **indexing:** matchFields については contentDigest にのみ依存し、オプションを削除しました。  
* インデックス作成：** skipIndexingフラグを削除し、dryRunまたはcontinueOnFailureのいずれかを使用します。

毎度ビルド時に実行したとしてもプラグイン側でしっかり差分だけ見つけてIndexingしますよっていう感じみたい

CD側で気を利かせてこの場合はAlgoliaのデータ更新で、みたいなことをしなくてもよくなるのかな

今まではデプロイ時、Algoliaに毎度更新掛けるとAPIオペレーション数が結構消費するということで

masterブランチかつ記事コンテンツに変更があるときのみpluginが動くようにし、それ以外のときはskipIndexingで処理させないようにしていた

毎度全件更新掛けるような設定にしていたのでpartialUpdatesによってAPIオペレーション数も節約できるはず

良さそう!

APIへのアクセス

しかし問題が1つあった

メジャーバージョンアップに伴いskipIndexingオプションがなくなりdryRunだと次のような処理でAPIへのアクセスが発生してしまうようになった

既存のIndexがあるかのチェック
既存のドキュメントと差分が発生しているかチェック
- contentDigestをチェックしている
- 記事の中身に変更があった場合はこのcontentDigestが変化し、差分が発生したと判断するよう

なので記事の更新がないパターンでdryRunを使ったとしてもAPIアクセスが必要になってしまった

執筆時の自分の状況だと記事に変更がない場合でも下記のオペレーションが消費された

index operation: 3
search operation: 3

記事に変更があると上記プラスアルファで変更分のrecord operationが発生する

自分の環境だとGitHub ActionsでCIを回していてそのときはAlgoliaへの登録処理はする必要がないのでそもそもAlgoliaのAdmin APIキーのSecretを登録していない

デプロイはCloudflare Pagesで行っているのでAlgoliaのAdmin APIキーをCloudflareには登録している

バージョンアップでCIでもAPIアクセスが発生するためエラーとなってしまう

continueOnFailureで良いのでは？

とも考えたが常に失敗を無視すると、本来気付くべきエラーが発生した際に気付けない可能性がある

それは嫌だなということで採用しなかった

だからといってAPIキーを登録するのもPRのたびにAPIたたかれたらオペレーション数をそれなりに消費するし、そのためだけにGitHubにシークレット登録したくないということでどうしようと悩んだ

悩んだ結果、だいたいプラグイン中でやっていることはわかったのでpatch-packageでパッチを当ててskipIndexの処理をいれてしまうことにした

gatsby-pluginの作法

コード読んだ

gatsby-node.jsのライフサイクルフックを書けばOKのよう

algoliaのpluginはonPostBuildでいろいろ処理をやっている

で、gatsby-configの内容を各pluginのライフサイクルの引数configで読めるみたい

どうしてそうなっているかまでは追えてない（gatsbyのソース読まないといけなそうなので読んでない）

ということで0.26であったskipIndexingオプションを復活させた

対象のPullRequest

Renovate/patched gatsby plugin algolia 1.x by swfz · Pull Request #1425 · swfz/til

最後に

記事書きながら思ったこととしては結局CI/CD側でも記事に更新や新規があるかはチェックするのでその値をdryRun+ontinueOnFailure両方に設定すればよいかも? と思った

次のバージョンアップの機会に検討する

go-ghでCurrentRepositoryが返す値を差し替える

Sun, 07 May 2023 00:00:00 GMT

書いたときのバージョン

go-gh: v1.2.1

v2のリリースもされているがまだ移行していない…

自分で作ったGitHubCLI拡張の中でgo-ghというライブラリのCurrentRepository()を使っている

この関数は今いるディレクトリのリポジトリの情報を取得するもの

拡張の機能上必要だったので使っているが、環境によって値が変わるのでテストを書き始めるとこの辺をうまくしないと環境依存でテストが失敗してしまう

どうしようかと調べたらすぐ出てきた

gh package - github.com/cli/go-gh - Go Packages

CurrentRepository()は、環境変数GH_REPOの値を尊重し、フォールバックとしてgitリモート設定から読み込む。

いつもはフォールバックとしてのGitリモート設定から読んでいたわけだ

環境変数でGH_REPOを指定すれば指定した値に差し替えられる

swfz/gh-annotationsのディレクトリで適当なファイルを作って試してみた

repo.go

package main

import (
	"fmt"
	"github.com/cli/go-gh"
)

func main() {
	repo, _ := gh.CurrentRepository()
	fmt.Printf("%#v\n", repo)
}

GH_REPOなし

$ go run repo.go
repository.repo{host:"github.com", owner:"swfz", name:"gh-annotations"}

GH_REPOあり

$ GH_REPO=cli/cli go run repo.go
repository.repo{host:"github.com", owner:"cli", name:"cli"}

テスト書くならモックしないとなーとは思っていたものの先延ばしにしていたが思ったより簡単だった

Denoでインストールしたモジュールのバージョンを更新する

Tue, 02 May 2023 00:00:00 GMT

何度インストールし直してもバージョンが変わらないなーと思ってたらキャッシュを参照していたっぽい

--reloadすればOK

$ deno install --help
  -r, --reload[=<CACHE_BLOCKLIST>...]
          Reload source code cache (recompile TypeScript)
          --reload Reload everything
          --reload=https://deno.land/std
            Reload only standard modules
          --reload=https://deno.land/std/fs/utils.ts,https://deno.land/std/fmt/colors.ts
            Reloads specific modules
          --reload=npm:
            Reload all npm modules
          --reload=npm:chalk
            Reload specific npm module
  -f, --force
          Forcefully overwrite existing installation

手元でCLIツールを更新してみた

$ cg --version
cg v0.2.0

$ deno install -r -f --allow-env --allow-run --allow-net https://deno.land/x/commit_genius/cg.ts

$ cg --version
cg v0.3.0

Gatsbyのバージョンを5に上げた

Wed, 26 Apr 2023 00:00:00 GMT

本ブログがGatsbyv4を使用していたのでv5に上げた

合わせてNode18とも依存があるので18にもした（CloudflareにデプロイしているのでNode18対応を待ってた

しっかり読まずに雰囲気で始めてしまったので時間かけてしまったが、基本的にMigrationガイド見ながら進めれば問題なさそう

Migrating from v4 to v5 | Gatsby

以下やったこと

依存モジュールの更新

node_modules削除、yarn.lock削除で再インストール

renovateだけだと各モジュール依存モジュールのバージョンまでは更新してくれないのでいろいろ不整合が発生した

ひとつずつ潰していく前にとりあえず試してみるで良い気がする

$ rm yarn.lock
$ rm -rf node_modules
$ yarn

結構lockファイルに差が出た

GraphQLのクエリ更新

groupとsortのフィールド指定の方法が変わったよう

マイグレーションガイドみたら下記実行しろとのこと

npx gatsby-codemods@latest sort-and-aggr-graphql .

codemodsがBRAKING CHANGESの修正をしてくれる

便利…

結構時間かけてしまったけど完全にドキュメント読め案件

型エラーの解消

これは自分のコードの問題だが一応合わせて対応したので残しておく

$ tsc --noEmit
gatsby-browser.tsx:28:11 - error TS2559: Type '{ children: ReactNode; }' has no properties in common with type 'IntrinsicAttributes'.

28   return <Layout {...props}>{element}</Layout>
             ~~~~~~

src/components/layout.tsx:9:29 - error TS2339: Property 'children' does not exist on type '{}'.

9 const Layout: React.FC = ({ children }) => {

React: Type {children: Element} has no properties in common with type IntrinsicAttributes | bobbyhadz

ここを参考にした

ようはpropsを受け取らないコンポーネントにprops渡すなって話らしい

しかしながらchildrenは必要なのでLayout側ではReactNodeの型定義を用意した

他にもwarningはいくつか残っているがGatsby5で動作させられるところまで持っていけた

該当PR

feature/gatsby v5 and node18 by swfz · Pull Request #1408 · swfz/til

PythonのSoundcardで音声の入出力、ファイルでのやり取りをする

Tue, 18 Apr 2023 00:00:00 GMT

Pythonのsoundcard,soundfileを使って音声ファイルを扱う

前提としてWSL2（Ubuntu）を使っている

WSLgが使えるようになったのでWSL上で音声のやりとりができるようになった

WSLgが用意してくれているサウンドデバイスは1つっぽいのでdefault_speaker,default_micで読み込める

動作環境

$ wsl --version
WSL バージョン: 1.2.0.0
カーネル バージョン: 5.15.90.1
WSLg バージョン: 1.0.51
MSRDC バージョン: 1.2.3770
Direct3D バージョン: 1.608.2-61064218
DXCore バージョン: 10.0.25131.1002-220531-1700.rs-onecore-base2-hyp
Windows バージョン: 10.0.19045.2846

ファイルをコマンドライン引数から受け取り、読み込んで音声を出力

import soundcard as sc
import soundfile as sf
import sys

samplerate = 48000
read_wave_path = sys.argv[1]

default_speaker = sc.default_speaker()

with default_speaker.player(samplerate=samplerate) as sp:
    print(f"Reading...({read_wave_path})")
    data, fs = sf.read(read_wave_path)
    print("Playing...\n")
    sp.play(data)

音声入力からファイルへ保存

import soundcard as sc
import soundfile as sf

samplerate = 48000
recording_sec = 5
filename = 'outfile.wav'

default_mic = sc.default_microphone()

with default_mic.recorder(samplerate=samplerate) as mic:
    print("Recording...")
    data = mic.record(numframes=samplerate*recording_sec)
    print("Saving...\n")
    sf.write(filename, data, samplerate)

スプレッドシートで月計算

Wed, 15 Mar 2023 00:00:00 GMT

どうやるんだろうと調べたらEDATEという月計算をするための関数があった

EDATE - Google ドキュメントエディタヘルプ

こんな感じ

他にもあるんだろうかと調べてみたら月末日を算出する関数もあった

EOMONTH - Google ドキュメントエディタヘルプ

プログラムだと結構月末日出したいっていうパターンはよくあるがSpreadsheetだとあんまり機会がないかも

とはいえ両方めちゃくちゃはかどる

GitHub CLI拡張upgrade時のエラー対応

Fri, 03 Mar 2023 00:00:00 GMT

動作環境

$ lsb_release -a
No LSB modules are available.
Distributor ID: Ubuntu
Description:    Ubuntu 20.04.5 LTS
Release:        20.04
Codename:       focal

GitHubのprojectsのCLI拡張がいろいろできるよという記事を見て使ってみるかと思い（すでに以前インストールしてた）更新したら

$ gh extension upgrade github/gh-projects
[projects]: upgraded from v0.7.0 to v0.8.1
✓ Successfully upgraded extension

エラーが出てきた

$ gh projects
/home/user/.local/share/gh/extensions/gh-projects/gh-projects: /lib/x86_64-linux-gnu/libc.so.6: version `GLIBC_2.32' not found (required by /home/user/.local/share/gh/extensions/gh-projects/gh-projects)
/home/user/.local/share/gh/extensions/gh-projects/gh-projects: /lib/x86_64-linux-gnu/libc.so.6: version `GLIBC_2.34' not found (required by /home/user/.local/share/gh/extensions/gh-projects/gh-projects)

GitHub CLI拡張のうちGo言語で作られているものはインストール時にビルドされるという話だったはずなので

下記参考サイトにしたがって環境変数をセットしてインストールし直した

参考

go build した Go のバイナリを実行すると「/lib/x86_64-linux-gnu/libc.so.6: version GLIBC_2.32' not found」を出力して止まるときにやったこと。 - 全力で怠けたい

$ CGO_ENABLED=0 gh extension  install github/gh-projects
✓ Installed extension github/gh-projects

$ gh projects
Work with GitHub Projects. Note that the token you are using must have 'project' scope, which is not set by default. You can verify your token scope by running 'gh auth status' and add the project scope by running 'gh auth refresh -s project'.

Usage:
  projects [command]

Available Commands:
  close        Close a project
  completion   Generate the autocompletion script for the specified shell
  copy         Copy a project
  create       Create a project
  delete       Delete a project
  edit         Edit a project
  field-create Create a field in a project
  field-delete Delete a field in a project by ID
  field-list   List the fields in a project
  help         Help about any command
  item-add     Add a pull request or an issue to a project
  item-archive Archive an item in a project
  item-create  Create a draft issue item in a project
  item-delete  Delete an item from a project by ID
  item-edit    Edit a draft issue in a project by ID
  item-list    List the items in a project
  list         List the projects for an owner
  view         View a project

Flags:
  -h, --help   help for projects

Use "projects [command] --help" for more information about a command.

使えるようになった

ObsidianのDataviewプラグインのTABLEリストでfileカラムを除外する

Mon, 20 Feb 2023 00:00:00 GMT

とりあえず何かしらのノートたちをTABLEを使ってリストを出力させてみようという感じでやるとこんな感じ

TABLE
published,
file.tags AS tags
FROM "tech"
SORT file.mtime DESC

特にカラム指定せずともfileに関しては表示された状態になっている

なんとなくファイル名に日本語を含めるのに抵抗があるので、できればfrontmatterにtitleを別で用意してそいつを参照させるようにしたい（もちろんノートへのリンクもつけておきたい）

Markdownファイルの前提

今回扱うノートにはすべてfrontmatterを書いている

---
title: dataviewのTABLEリストでfileカラムを除外する
tags:
- tech/Obsidian/Plugin/dataview
---

こんな感じ、そしてリンクにするのをファイル名ではなくtitleにしたい

fileの除外

WITHOUT IDで除外できる

これはIDがこの場合はfileという扱いってことなのかな（詳しく追ってはいない）

TABLE WITHOUT ID
link(file.link, title) AS "Title",
published,
file.tags AS tags
FROM "tech"
SORT file.mtime DESC

2行目、代替となるカラムを用意する(Title)

linkでリンク表示にできる、表示する文字列をfrontmatterのtitleにする

求めている感じになってきた

おわり

Obsidianのdataviewプラグインに関してはやりたいことを単語で探すとIssueにたどり着いてたいていのやりたいことは解決策が書いてあるので助かる…

参考

Omit “File” column in TABLE results · Issue #102 · blacksmithgu/obsidian-dataview

MUI TextFieldのInputPropsとinputPropsの違い

Thu, 16 Feb 2023 00:00:00 GMT

仕事でMUIを使ったコードを読んでたらTextFieldのプロパティにinputProps, InputPropsとi,Iで両方あることに気付いた

違いは何だと言うことで調べた

TextField API - Material UI

InputProps

Input要素に適用されるプロパティ

variant prop の値に応じて、FilledInput、OutlinedInput、Inputコンポーネントのいずれかになる

なるほど、TextFieldはFilledInput,OutlinedInput,Inputをより抽象化したコンポーネントで、この3つのコンポーネントのどれかに適用させるプロパティを指定するということのよう

試しにFilledInputのAPIドキュメントを見に行くとinputPropsのみしかないのでなるほどとなった

FilledInput API - Material UI

このページでのPropsの中で指定したいものがあれば指定するとういことと理解した

たとえばcolorとか

あとはTextFieldを使って汎用的なカスタムコンポーネントを作った場合などもInputPropsを受け取ってそのままTextFieldに流すことでカスタマイズ可能で汎用的なカスタムコンポーネントを作れる

inputProps

input要素に適用するプロパティを指定する

お馴染みのinputタグに指定するプロパティを指定する

たとえばvalueとか

どのタグやコンポーネントに作用させたいかでPropsの大文字小文字を切り替えると理解した

よく考えられているなーと感じたが初見ではとっつきづらいしややこしいな…と感じた

特定文字列でファイルを分割する

Tue, 07 Feb 2023 00:00:00 GMT

背景

もともとToDoリストをひとつのMarkdown+VS Codeで管理していた

そして最近ObsidianのDailyNoteでToDoを管理するように変更したので、どうせなら過去のToDoをObsidian管理下にうつしてしまおうとした

work_todo.md

## 2022-08-02
- [x] 依頼1
- [x] 依頼2

## 2022-08-03
- [x] タスクA
- [x] タスクB

分割

特定文字列でファイルを分割できないかと思って調べたらちょうどやりたいコマンドがあった

テキストファイルを任意の文字列で分割するには－＠IT

csplit -z  work_todo.md "/^## 2022/" "{*}"

でxx01とかxx02…というようにファイルができた

分けたファイルを2022-11-23.mdといった形式にしたい

ファイル名を制御するようなオプションはなさそうだったのでやむなく下記のスクリプトで別名保存した

rename.sh

#!/bin/bash

file=$1

md_filelname="$(head -n 1 ${file} | sed -e 's/## //').md"

cp ${file} /path/to/obsidian/daily_note/${md_filelname}

find . -name "xx*" | xargs -i sh rename.sh {}

Obsidianのdataviewプラグインで特定ヘッダー以下のタスクリストを取得する

Tue, 24 Jan 2023 00:00:00 GMT

前提

デイリーノートをdaily_noteディレクトリ以下に保存している
ポッドキャストを聞いたら、途中でも## Podcastというヘッダ以下にタスクリストを書くようにしている

で、今回は聞き終わったタスクリストを表示したい

特定ヘッダ以下のタスクリストなんて出せるのか?と思っていたができるよう

taskリスト

TASK
FROM "daily_note"
WHERE contains(meta(section).subpath, "Podcast")
AND completed
AND file.cday.day > this.file.cday.day - 50
GROUP BY file.name

結果

特定ヘッダ以下のタスクリストを取得する

Filtering tasks by heading in dataview - Help - Obsidian Forum

metaを挟むことで判定できるようになる

Functions - Dataview

ドキュメントではlinkに対して使っているがsectionに対しても使える

「自身のプロパティへアクセスしたい場合にmetaを使う」と書いてあった

活用方法はいろいろありそう

直近○日とかの範囲でフィルタする

Dataview list based on PREVIOUS month - Resolved help - Obsidian Forum

比較対象にする値はthisでそのファイルの値から-○日とかそういう書き方が必要

thisを入れるのがポイントっぽい

dayの他にもfile.cday.monthやfile.cday.yearもある

JavaScript書かずに済ませられたので良かった

GitHub CLIでStarのカウント集計を出す

Sat, 14 Jan 2023 00:00:00 GMT

GitHubで自分のリポジトリにStarやWatch、Forkなどのイベントがあると励みになる

たまに全体を見渡してみたらどんな感じなんだろうということでGitHub CLIのコマンドとjqでリストを出したりするのでその際のコマンドのメモ

--limit 200の値の部分は対象リポジトリすべてを出せるくらいの数値にする（default: 30）

リポジトリごとのwatchしている人カウント（自分含む）

$ gh repo list --limit 200 --json 'name,watchers' | jq 'reduce .[] as $row ({}; .[$row.name] += $row.watchers.totalCount)'
{
  "til": 2,
  "hatenablog_publisher": 2,
  "gh-annotations": 2,
  .....
  .....
  .....
}

リポジトリごとのStarカウント

$ gh repo list --limit 200 --json 'name,stargazerCount' | jq 'reduce .[] as $row ({}; .[$row.name] += $row.stargazerCount)'
{
  "tools": 3,
  "dotfiles": 4,
  "gh-annotations": 2,
  .....
  .....
  .....
}

各種数値でソートと出力結果の整形

star

$ gh repo list --limit 200 --json 'name,stargazerCount,watchers,forkCount' | jq -cr 'sort_by(.stargazerCount)|reverse|.[]|{star: .stargazerCount, name: .name}'
{"star":4,"name":"dotfiles"}
{"star":3,"name":"tools"}
{"star":3,"name":"til"}
{"star":2,"name":"mkdocs_sample"}
{"star":2,"name":"docker-mkdocs"}
{"star":2,"name":"gh-annotations"}

fork

$ gh repo list --limit 200 --json 'name,stargazerCount,watchers,forkCount' | jq -cr 'sort_by(.forkCount)|reverse|.[]|{fork: .forkCount, name: .name}'
{"fork":3,"name":"hatenablog_publisher"}
{"fork":2,"name":"ansible-plenv"}
{"fork":2,"name":"angular2-es-raw-search"}
{"fork":2,"name":"shared-count"}
{"fork":2,"name":"tools"}

watch

gh repo list --limit 200 --json 'name,stargazerCount,watchers,forkCount' | jq -cr 'sort_by(.watchers.totalCount)|reverse|.[]|{watch: .watchers.totalCount, name: .name}'
{"watch":4,"name":"docker-mkdocs"}
{"watch":3,"name":"twitter2slack"}
{"watch":3,"name":"bookmarklets"}

GA4のBigQueryにエクスポートしたデータのevent値の格納カラムがイベントによって違う

Wed, 04 Jan 2023 00:00:00 GMT

GA4のデータをBigQueryにエクスポートして、DataformでゴニョゴニョしてからLookerStudioで可視化するということをやってた

そもそもGA4のデータはevent_paramsがREPEATEDなのでLookerStudioなどで可視化する場合はひと手間入れてあげるほうが使いやすい

ということでevent_paramsをフラットにして各イベントのキーをカラムとして扱うようにしてた

下記を参考にとりあえずはイベントの名前(event_params.key)は決め打ちで進めた

Googleアナリティクス4のBigQueryエクスポート仕様 – marketechlabo

イメージ

before

after

実際のSQLはこんな感じ（一部抜粋）

SELECT
  event_date,
  event_timestamp,
  event_name,
  (SELECT e.value.int_value FROM UNNEST(event_params) e WHERE e.key = 'ga_session_id' ) e_ga_session_id,
  (SELECT e.value.int_value FROM UNNEST(event_params) e WHERE e.key = 'ga_session_number' ) e_ga_session_number,
  (SELECT e.value.string_value FROM UNNEST(event_params) e WHERE e.key = 'session_engaged' ) e_session_engaged,
  (SELECT e.value.string_value FROM UNNEST(event_params) e WHERE e.key = 'page_title' ) e_page_title
FROM `project.dataset.events_20230103`

各種valueはevent_params.value.string_value, event_params.value.int_value… といったようにevent_params.keyによって値の型が異なるのでどのカラムにデータが格納されるかが変わる

しかし、いくつか確認してみたところsession_engagedの場合、event_nameの値によって格納されるカラム（int_value,string_value）が違うようだった

SELECT
  event_date,
  event_timestamp,
  event_name,
  event.key,
  event.value
FROM
  `project.dataset.events_20230103`,
  UNNEST(event_params) AS event
WHERE
  AND event.key = 'session_engaged'

なんと…

迷った末いったん実際のSQLはsession_engagementのみ次のような書き方でお茶を濁した

(SELECT COALESCE(e.value.string_value, SAFE_CAST(e.value.int_value AS STRING)) FROM UNNEST(event_params) e WHERE e.key = 'session_engaged' ) e_session_engaged

とりあえず統一して扱えるようにはなった

ObsidianのDataviewプラグインでブログネタリストを収集する

Sat, 17 Dec 2022 00:00:00 GMT

Obsidianでメモを残し始めている

技術的な内容のメモを書いていると「これはブログネタになるかも」みたいなのが湧いてくることがある

そういう時にさっと内部リンクをつけてメモを残しておく+その内容をまとめてどこかで閲覧できると良いなと思ったのでDataviewプラグインでやってみた

Dataviewプラグイン

Dataview

記事のfrontmatterやタグ、ディレクトリなどの情報をもとにテーブル表示してくれるプラグイン

コードブロックにdataviewを指定することで表示してくれる

クエリはSQLライクな書き方で問い合わせする

FROMにはページのリストの単位、特定のタグやディレクトリなどを指定する

条件などにファイルの更新日、ファイル名などファイルのメタデータも含められるためある程度なんでもできそう

またSQLライクな書き方以外にもJavaScriptを書くこともできる

その場合はコードブロックにdataviewjsを指定する

ブログネタのリストをタスクリストとして表示させる

サンプル用に次のようなメモを用意した

2022-11-29.md

## ToDo
- [x] [[blog]] netaA
- [ ] [[blog]] netaB
- [ ] netaC

sample.md

- [ ] [[blog]] xをyしてzする

コードブロックの中身

dv.taskList(dv.pages("[[blog]]").sort(p => dv.date(p.file.ctime), 'desc').file.tasks.where(t => !t.completed && t.outlinks.some((l) => l.display == 'blog')), false);

dv.pagesで[[blog]]の内部リンクが存在するページを取得
最新のファイルから走査するようにソート
file.tasks.whereでチェックボックスのリストから特定条件のタスクを取得
- 未チェック
- file.outlinksの中からdisplayプロパティがblogなタスクをチェックする
dv.taskListは第2引数でページごとにグループ化するかどうかのオプションを渡せる（defaultはtrue）、falseを渡すと単純にページをまたいでまとめたリストとして表示できる

fileオブジェクトの中身

確かプラグインのドキュメントにも乗っていた気がするが確かめながらでもできる

こんな感じのクエリを書くと

TABLE
file.tasks
FROM [[blog]]
SORT file.ctime DESC

このようにオブジェクトの中身を表示できる

もしくは、dataviewjsのコードブロックのJavaScript中にconsole.log()を仕込み、DeveloperToolsでオブジェクトの中身を覗くことができる

dv.taskList(
  dv.pages("[[blog]]").sort(p => dv.date(p.file.ctime), 'desc').file.tasks.where(t => {
  console.log(t);
  return !t.completed && t.outlinks.some(l => l.display == 'blog')
}), false);

こんな感じで中身見ながらやるとある程度クエリが書けるようになる気がする

表示

ほぼ同じクエリでt.completedに条件を変えた（チェックした）リストも追加するとこんな感じで表示できる

ObsidianのDataviewプラグインで終わったタスクリストを表示する

Wed, 14 Dec 2022 00:00:00 GMT

自分はObsidianを使っていて、#dailyタグでデイリーノートを取っている

その中でToDoという項目を用意し、その日やるタスクのToDoリストを毎日作っている

デイリーノートは毎日新しいファイルが作成されるので、1週間を振り返る時に毎日分のファイルを見に行かないと行けないのは不便

ということでDataviewプラグインを使ってさっと確認できるようにしたい

Dataviewプラグイン

Dataview

記事のfrontmatterやタグ、ディレクトリなどの情報をもとにテーブル表示してくれるプラグイン

コードブロックにdataviewを指定することで表示してくれる

クエリはSQLライクな書き方で問い合わせする

FROMにはページのリストの単位、特定のタグやディレクトリなどを指定する

条件などにファイルの更新日、ファイル名などファイルのメタデータも含められるためある程度なんでもできそう

またSQLライクな書き方以外にもJavaScriptを書くこともできる

その場合はコードブロックにdataviewjsを指定する

いくつか使いそうなのを書いてみた

ToDoリストの直近1週間やったことをリストにする

dailyタグでページのリミットを7にしただけ

本当はwhere(page => page.file.ctime) みたいな感じでフィルタリングしたかったがうまくいかなかったのでいったんこれでお茶を濁した…

コードブロックの中身

dv.taskList(dv.pages("#daily").sort(p => dv.date(p.file.ctime), 'desc').limit(7).file.tasks.where(t => t.completed));

表示

dv.pagesで対象のファイルを取得、ソートして最新から7件取得するので過去1週間分のデイリーノートを取得できる

file.tasks.whereの中の関数でチェック済みなチェックリストのアイテムのみを返す

Obsidianのtwohop-links PluginにCSSを当てる

Sat, 26 Nov 2022 00:00:00 GMT

2ホップリンクっていうのを入れてみたかったのでプラグインを入れた

tokuhirom/obsidian-2hop-links-plugin

が、編集画面でレイアウト崩れが起きてしまっていた

環境

Obsidian Version: v1.0.3
OS: Windows
Plugin Version: 0.9.0

ということで無理やりだがCSSスニペットで上書きしてなんとかしてみた

.obsidian/snippets/twohop-links.css

/* カード */
.twohop-links-box {
  color: white;
  background-color: gray;
}

.twohop-links-tag-header {
  color: white;
  background-color: plum;
}

.twohop-links-back-links .twohop-links-connected-links-header {
  color: white;
  background-color: orchid;
}

.twohop-links-forward-links .twohop-links-connected-links-header {
  color: white;
  background-color: mediumvioletred;
}

.twohop-links-resolved .twohop-links-twohop-header {
  color: white;
  background-color: plum;
}

/* プレビューのテキスト */
.twohop-links-box-preview {
  color: whitesmoke;
}

/* 編集モードでレイアウトが崩れてしまうので直接書き換え */
.markdown-source-view.mod-cm6 .cm-content {
  width: 100%;
}
.markdown-source-view.mod-cm6 .cm-contentContainer {
  display: flex;
  overflow-x: visible;
  flex-direction: column;
}

適用

せっかくなのでカードの色も個人の好みに変えた

適用後

TypeScriptでvaluesのUnionを取り出す

Mon, 21 Nov 2022 00:00:00 GMT

keyofで値の方を取り出す

与えられたオブジェクトのvalueのUnion型を作る

type ValueOf<T> = T[keyof T];

const test = {
  hoge: 'test',
  fuga: 'test2'
} as const;

type TestValues = ValueOf<typeof test> // 'test' | 'test2'

JSONから構造体へ変換する

Sat, 05 Nov 2022 00:00:00 GMT

トップレベルが配列[]とマップ{}の場合のUnmarshal

サンプル

package main

import(
	"fmt"
	"encoding/json"
)

type Sample struct {
	Hoge int `json:"hoge"`
	Fuga string `json:"fuga"`
}

func mapJson() {
	str := `{"hoge":1,"fuga":"piyo"}`
	var data Sample
	if err := json.Unmarshal([]byte(str), &data); err != nil {
		panic(err)
	}

	fmt.Printf("%#v\n", data)
}

func sliceJson() {
	str := `[{"hoge":1,"fuga":"piyo"},{"hoge":2,"fuga":"piyopiyo"}]`
	var data []Sample
	if err := json.Unmarshal([]byte(str), &data); err != nil {
		panic(err)
	}

	fmt.Printf("%#v\n", data)
}

func main() {
	mapJson()
	sliceJson()
}

実行

$ go run json.go
main.Sample{Hoge:1, Fuga:"piyo"}
[]main.Sample{main.Sample{Hoge:1, Fuga:"piyo"}, main.Sample{Hoge:2, Fuga:"piyopiyo"}}

変数宣言の部分で型を用意しているとそんなに違和感ない

interface{}になるとこんがらがってしまったがまとめながら見たら特につまずきポイントもない…

マップ

var data map[string]interface{}

配列

var data []map[string]interface{}

実行

$ go run json.go
map[string]interface {}{"fuga":"piyo", "hoge":1}
[]map[string]interface {}{map[string]interface {}{"fuga":"piyo", "hoge":1}, map[string]interface {}{"fuga":"piyopiyo", "hoge":2}}

文字列からgithubv4.Dateに変換する

Sat, 29 Oct 2022 00:00:00 GMT

GoでGitHub CLIの拡張を作っている際

GraphQLでProjectV2のデータ更新しようとしていた

しかし、ProjectV2の日付フィールドを更新しようといろいろやったが全然うまくいかずかなり時間を溶かしてしまったので残しておく

GraphQLのmutationとパラメータを指定する部分

一部抜き出した（このコードじゃ動かない）

	var mutation struct {
		UpdateProjectV2ItemFieldValue struct {
			ClientMutationID string
		} `graphql:"updateProjectV2ItemFieldValue(input: {projectId: $projectId itemId: $itemId fieldId: $fieldId value: {date: $value}})"`
	}
	dateString := "2022-10-01"
	variables := map[string]interface{}{
		"projectId": graphql.ID(projectId),
		"itemId":    graphql.ID(itemId),
		"fieldId":   graphql.ID(fieldId),
		"value":     dateString,
	}
	err = gqlclient.Mutate("Assign", &mutation, variables)

DATE型のフィールド

GitHubのドキュメント

スカラー - GitHub Docs

上記のように文字列で投げたら怒られる

Message: Type mismatch on variable $value and argument date (ID! / Date), Locations: [{Line:1 Column:168}]

$valueはDate型が必要ですよと

githubv4/scalar.go at master · shurcooL/githubv4

githubv4.Dateの定義を見に行くと

Date struct { time.Time }

となっている

型キャスト

ということで、普通にキャストすればよいかと思ったがだめだった

	var mutation struct {
		UpdateProjectV2ItemFieldValue struct {
			ClientMutationID string
		} `graphql:"updateProjectV2ItemFieldValue(input: {projectId: $projectId itemId: $itemId fieldId: $fieldId value: {date: $value}})"`
	}
	dateString := "2022-09-01T00:00:00Z"
	t, _ := time.Parse("2006-01-02T15:04:05Z", dateString)
	variables := map[string]interface{}{
		"projectId": graphql.ID(projectId),
		"itemId":    graphql.ID(itemId),
		"fieldId":   graphql.ID(fieldId),
		"value":     githubv4.Date(t),
	}
	err = gqlclient.Mutate("Assign", &mutation, variables)

型エラーで怒られる

cannot convert t (variable of type time.Time) to type githubv4.Date

動くコード

結局下記のようなコードで動かした

package main

import (
	"encoding/json"
	"fmt"
	"github.com/cli/go-gh"
	graphql "github.com/cli/shurcooL-graphql"
	"github.com/shurcool/githubv4"
	"log"
)

type NamedDateValue struct {
	Date githubv4.Date `json:"date,omitempty"`
}

func main() {
	projectId := "適当なIDを入れる"
	itemId := "適当なIDを入れる"
	fieldId := "適当なIDを入れる"

	gqlclient, err := gh.GQLClient(nil)
	if err != nil {
		log.Fatal(err)
	}

	var mutation struct {
		UpdateProjectV2ItemFieldValue struct {
			ClientMutationID string
		} `graphql:"updateProjectV2ItemFieldValue(input: {projectId: $projectId itemId: $itemId fieldId: $fieldId value: {date: $value}})"`
	}

	b := []byte(`{"date":"2022-09-01T00:00:00Z"}`)
	var v NamedDateValue
	if err := json.Unmarshal(b, &v); err != nil {
		panic(err)
	}

	variables := map[string]interface{}{
		"projectId": graphql.ID(projectId),
		"itemId":    graphql.ID(itemId),
		"fieldId":   graphql.ID(fieldId),
		"value":     v.Date,
	}

	err = gqlclient.Mutate("Assign", &mutation, variables)
	if err != nil {
		log.Fatal(err)
	}

	fmt.Println(mutation)
}

こんな感じ

NamedDateValueという型を定義してjson.Unmarshalで変換する

この構造体はgithubv4.Date型のDateフィールドを持っている

GraphQLのパラメータを渡す際にv.Dateで型を合うようにした

もっとよい方法がありそうだが今の自分の力ではこれが限界だった

ただこれを解決しないと進めなかったのでいろいろ調べて勉強にはなった

ということでjson.Unmarshalすごい

シェルスクリプトで日付情報を引数から指定するorデフォルトを用いる

Tue, 25 Oct 2022 00:00:00 GMT

引数がある場合は引数を、ない場合は実行した日（または特定の日数前など）を使って後続の処理を行いたい場合のスニペット

default_date.sh

#!/bin/bash

arg=$1

[ -z ${arg} ] && target_date=$(date +"%Y-%m-%d") || target_date=${arg}

echo $target_date

❯ date +"%Y-%m-%d"
2022-10-24

❯ sh default_date.sh 2022-10-20
2022-10-20

❯ sh default_date.sh
2022-10-24

GitHub CLI拡張を作ってみる

Wed, 19 Oct 2022 00:00:00 GMT

GitHub CLI 拡張機能の作成 - GitHub Docs

これを読みながら作成する

今回はGoでHelloWorldまで

ひな型の作成

gh extension create

--precompiled=goオプションや拡張名などをつけないと対話型モードでやりとりすることになる

拡張名を入力する

? Extension name:

種別を選ぶ

? What kind of extension?  [Use arrows to move, type to filter]
  Script (Bash, Ruby, Python, etc)
> Go
  Other Precompiled (C++, Rust, etc)

決定するとディレクトリが作られるのでそこで開発する

ローカルインストール

gh extension install .

これだけでgh ~~~でコマンドが使えるようになる

中身

main.go

package main

import (
	"fmt"
	"github.com/cli/go-gh"
)

func main() {
	fmt.Println("hi world, this is the gh-hoge extension!")
	client, err := gh.RESTClient(nil)
	if err != nil {
		fmt.Println(err)
		return
	}
	response := struct {Login string}{}
	err = client.Get("user", &response)
	if err != nil {
		fmt.Println(err)
		return
	}
	fmt.Printf("running as %s\n", response.Login)
}

// For more examples of using go-gh, see:
// https://github.com/cli/go-gh/blob/trunk/example_gh_test.go

ちょっとした使い方と詳しくはここ見てねというリンクまで張ってくれていて親切

なんとなく「こういう感じなのね」というのが把握できた

変更して実行してみる

試しにメッセージ部分の!を増やした

ビルド

go mod tidy
go build

実行

gh ap
hi world, this is the gh-ap extension!!!
running as swfz

変更が反映された

SlackにGitHubの更新通知を行う

Fri, 14 Oct 2022 00:00:00 GMT

SlackApp

/github help

を読めばOK

さらに詳しく知る場合はドキュメントを当たる

integrations/slack: Bring your code to the conversations you care about with the GitHub and Slack integration

いくつかやったことを残しておく

特定のラベルがついたPull Requestを通知

/github subscribe swfz/til pulls +label:"article"

2022-10-15現在、ラベルは1つしかサポートしていないよう

特定ブランチへのコミットを通知

/github subscribe swfz/til commits:master

デフォルトで対象になっているイベントを解除

/github unsubscribe swfz/til issues,commits,releases,deployments

複数ある場合はカンマでつなげる

RSS Feed

GitHubが用意しているRSSフィードでもある程度フィルタリングした情報を購読できる

特定ブランチの特定ファイルやディレクトリ（以下）の更新を取得するURL

https://github.com/${user}/${repo}/commits/${branch}/${path}.atom

masterブランチのcontent/blog/entries以下の更新のみ

https://github.com/swfz/til/commits/master/content/blog/entries.atom

このあたりを

/feed subscribe ${feedUrl}

で登録する

参考

Githubが結構色々なatomフィードを出せるので、連携で役に立ったりする - Qiita

BigQueryで特定データセットに権限を付与する

Wed, 12 Oct 2022 00:00:00 GMT

特定のデータセット、特定サービスアカウントにREADやWRITE権限を与える

bq showで対象データセットの設定を出力、中身のaccessに対象サービスアカウントのメールアドレスをと権限を追加してbq update

bq show --format=prettyjson memo-111111:sample  > sample.json

sample.json

"access": [
  ...
  ...
  ...
    {
      "role": "READER",
      "userByEmail": "github-actions-sample-nokey@memo-111111.iam.gserviceaccount.com"
    }
]

bq update --source sample.json sample

確認

対象サービスアカウントで実行した

bq ls

  datasetId  
 ----------- 
  sample

クエリ

bq query --nouse_legacy_sql 'select * from sample.summary'

+------+-------+----+
| view | title | id |
+------+-------+----+
|    3 | fuga  |  2 |
|    3 | foo   |  4 |
|    4 | piyo  |  3 |
|    5 | hoge  |  1 |
|    5 | bar   |  5 |
+------+-------+----+

できた

最近GitHubActionsのOIDC認証でCI用のサービスアカウントに対してクエリできるようにする + データセット単位で権限を絞るところまで行ったのでメモ

個人使用ならこれで問題ないかなーという感じ

StorybookでTailwindcssを適用させる

Fri, 07 Oct 2022 00:00:00 GMT

Next.jsのアプリケーションにStorybookを入れて動かしてみたがスタイルがあたっていなかったので調べて対応した

storybookのアドオンaddon-postcssを追加する

version

"storybook": "6.5.12"

addonの追加

yarn add -D @storybook/addon-postcss

.storybook/main.js

  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
+    {
+      name: '@storybook/addon-postcss',
+      options: {
+        postcssLoaderOptions: {
+          implementation: require('postcss'),
+        },
+      },
+    }

.storybook/preview.js

+ import '../styles/globals.css';

このcssファイルはTailwindcssを読み込んでいるCSSファイルを指定する

Nodeのsharpでsvgをpngへ変換する

Thu, 29 Sep 2022 00:00:00 GMT

SVG出力されたレスポンスをPNGに変換する

#!/usr/bin/env zx

const sharp = require('sharp');

const svgText = await fetch('https://localhost:8081/sample.svg').then(res => res.text())
sharp(Buffer.from(svgText, 'utf-8')).toFile('sample.png')

sharpという画像処理をやってくれるライブラリを使用した

簡単

ただdenoやCloudFlare Workersで使おうとすると使えなさそうだった

react-use/useMediaを使ったときのhydrationエラー対応

Tue, 27 Sep 2022 00:00:00 GMT

Next.jsで、react-use/useMediaを使ってたらエラーがでた

console

Warning: Prop `className` did not match. Server:

開発サーバ

`useMedia` When server side rendering, defaultState should be defined to prevent a hydration mismatches.

ググってhydrationが失敗しているのはわかった

Hydrationについては下記がなるほどって感じだったので参考として貼っておく

(4) Reactである「Hydrate」って何でしょうか？ - Quora

本来やりたかったこと

PCでの表示とモバイルでの表示で

PCでのアクセス時はサイドメニュー表示状態
モバイルでのアクセス時はサイドメニュー非表示状態

を実現したかった

この文脈ではPC=画面幅640px以上、モバイル=画面幅640px以下のことを指す

該当箇所のやっていたこと

該当箇所はサイドメニューのopen/closeをuseMediaで得られる値をもとに実現していた

useMediaで640pxをしきい値にしてその値をサイドメニューのopen/closeに使う

具体的には次のようなコード

import { useState, ReactNode, MouseEvent, useEffect } from 'react';
import { useMedia } from 'react-use';

.....
.....
  const isWide = useMedia('(min-width: 640px)');
  const [isOpen, setIsOpen] = useState(isWide);

  const togglOpen = (event: MouseEvent<SVGElement>) => {
    setIsOpen((prev) => !prev);
  };
.....
.....
.....

isOpenでメニューが開いている状態

useMediaについて

useMediaについてGitHubを見に行くと

react-use/useMedia.md at master · streamich/react-use

defaultStateパラメータは、サーバーサイドレンダリングのフォールバックとしてのみ使用されます。サーバーサイドレンダリングでは、このパラメータを設定することが重要です。このパラメータを設定しないと、サーバーの初期状態が false にフォールバックしますが、クライアントはメディアクエリの結果で初期化されるからです。Reactがサーバレンダリングをハイドレートする際、クライアントの状態と一致しない場合があります。これがなぜ高価なバグにつながるかについては、Reactのドキュメントを参照してください

なるほどこれが原因でhydrationエラーが発生しているのかということはわかった

ドキュメント読んどけ案件…

が、デフォルト値を指定すると（false）PCモバイルどちらも同じ挙動になってしまう…

対策

具体的なコードで言うと下記のようにすることで対応した

import { useState, ReactNode, MouseEvent, useEffect } from 'react';
import { useMedia } from 'react-use';

.....
.....
  const isWide = useMedia('(min-width: 640px)', false);
  const [isOpen, setIsOpen] = useState(isWide);

  useEffect(() => {
    setIsOpen(isWide);
  }, [isWide])

  const togglOpen = (event: MouseEvent<SVGElement>) => {
    setIsOpen((prev) => !prev);
  };
.....
.....
.....

差分は下記2つのPR

useMediaはdefaultState: falseでデフォルト値を指定、指定することでhydration時にはエラーが起きなくなる

PCの場合（幅640px以上の場合）、クライアントサイドでレンダリングされた後にuseMediaで取得するisWideの値が変わるのでuseEffectで変更を検知して再レンダリングでメニューのopen/closeを反映するようにした…

おわり

最近本件以外でもReactを使っているプロジェクトでhydrationエラーが出て対応しないと…って感じでこの辺のしくみや流れを把握していないといけないの結構たいへんだな…

前提として知っておくべき知識が結構あるかもな…という感想を持ちました

自分のリポジトリからリリースがあるリポジトリを取得する

Sat, 24 Sep 2022 00:00:00 GMT

GitHubのプロフィールのREADMEを自動生成したいと思ってawesome profileとか眺めてた

その中で「自身の管理下にあるリポジトリのreleases一覧を取ってきて自分のプロダクトの直近リリース」として、リスト化しているコードを見かけた

なるほどそういう利用方法もあるなーと思ったのでとりあえず自分でもリリース一覧を出してみた（そんなに多くなかった…）

query($endCursor: String) {
  viewer {
    repositories(first: 100, privacy: PUBLIC, after: $endCursor) {
      pageInfo {
        hasNextPage
        endCursor
      }
      nodes {
        name
        url
        releases(last:1) {
          totalCount
          nodes {
            name
            publishedAt
            url
          }
        }
      }
    }
  }
}

$ gh api graphql --paginate  -f query="$(cat graphql/releases.graphql)" > releases.json
$ cat releases.json|jq '.data.viewer.repositories.nodes|.[]|select(.releases.totalCount>0)|{repo: .name, url: .url, version: .releases.nodes[0].name, published: .releases.nodes[0].publishedAt}'
.....
.....
.....
{
  "repo": "hatenablog_publisher",
  "url": "https://github.com/swfz/hatenablog_publisher",
  "version": "v0.3.0",
  "published": "2022-05-07T18:34:07Z"
}
{
  "repo": "chrome-extension-google-slide-usertool-comment-stream",
  "url": "https://github.com/swfz/chrome-extension-google-slide-usertool-comment-stream",
  "version": "v2.0.2",
  "published": "2022-08-31T01:38:49Z"
}
{
  "repo": "chrome-extension-copy-markdown-and-hatenablog-embed-link",
  "url": "https://github.com/swfz/chrome-extension-copy-markdown-and-hatenablog-embed-link",
  "version": "v1.0.0",
  "published": "2022-08-24T11:17:08Z"
}

--paginateを入れているのは、リリースが多くなかったとしてもリポジトリ一覧を呼び出すクエリのため100件以上リポジトリがある場合はページングさせる必要がある

その中から、jqでリリースがあるリポジトリだけ抜き出している

かなり簡単にデータを取ってこれた

GitHub CLI便利だが、CI/CD用途で使うにはチェック対象のリポジトリすべてReadできる権限が必要

Appsで対象リポジトリを限定するとかしないといけないので少し面倒…

querySelectorで対象要素以下の要素を取得する

Fri, 16 Sep 2022 00:00:00 GMT

XPathでいうdiv//spanのような指定方法

直下の子要素を指定する>しか知らなかったが下記のようにスペース区切りにするだけで孫要素以下も含めた子要素を対象にできる

子孫結合子 - CSS: カスケーディングスタイルシート | MDN

ということでXPathでのdiv//spanをquerySelectorで表すとdiv spanでOK

ちなみにXPathでのdiv/spanがquerySelectorではdiv > spanにあたる

Next.jsで静的ファイルだけ使えるようにする

Sun, 11 Sep 2022 00:00:00 GMT

Next.jsでbuildした後ホスティングサービスへ配信する際の成果物指定の方法

デフォルトの挙動として、next buildではSSRなどサーバ側も含めてビルドした成果物を.nextに配置する

Advanced Features: Static HTML Export | Next.js

静的ファイルのみをホストしたい場合、デフォルトの.nextを指定しても静的ファイルを配信できる状態ではないので配信できない

しらなかった…

静的ファイルだけでOKな場合（SSG）

next exportで静的ファイルをoutに置き、outディレクトリをサーブすることでページを閲覧できるようになる

なのでサーバサイドでの処理が不要な場合は公式の通りnext build && next exportで静的ファイルだけをoutディレクトリに置き、ホスティングサービスのGit連携で成果物があるディレクトリを指定する

今までNext.jsで作成したサイトはVercelでしか配信したことなかったのでVercelがよしなにやってくれていたようだ

今回Cloudflare Pagesで配信する際にこれを知らずにつまずいた

next-pwaの設定方法が5.6で変わった

Wed, 07 Sep 2022 00:00:00 GMT

Renovate対応してたらビルドエラーが発生してたので調べて対応した

next-pwaが5.5.5 -> 5.6.0の更新でコケていた

エラーとしては次のような文言

Failed to compile.

Please check your GenerateSW plugin configuration:
[WebpackGenerateSW] 'reactStrictMode' property is not expected to be here. Did you mean property 'exclude'?

Failed to compile.

Please check your GenerateSW plugin configuration:
[WebpackGenerateSW] 'pwa' property is not expected to be here.

RenovateのPRからリリースの差分に飛んでみたらREADMEにも変更あるし使い方が変わったよう

Renovate Bot Package Diff

ということでREADMEを見ながら設定を変えた

runtimeCachingはデフォルトで使用するらしいのと特に設定をカスタムしているわけではなかったので外した

 /** @type {import('next').NextConfig} */
-const withPWA = require('next-pwa');
-const runtimeCaching = require('next-pwa/cache');
+const withPWA = require('next-pwa')({
+  dest: 'public'
+})

 module.exports = withPWA({
-  reactStrictMode: true,
-  pwa: {
-    dest: 'public',
-    runtimeCaching,
-  },
+  reactStrictMode: true
 });

無事ビルドできるようになった

GitHub ProjectsのItemを一括Archive

Sun, 04 Sep 2022 00:00:00 GMT

Projects自体はItemが1200件までしか作れない、それ以上扱いたい場合は既存のItemをDelete or Archiveしなければならない

なのでArchiveするという選択肢になるが、今度は2022-08-31時点ではArchiveするAPI（mutation）がない

GUIの中でBoardViewだと各リストに一括Archiveできる機能もあるがStatusかIteration単位でしかグループ化できない

なのでIterationを設定する前のItemについては一括で扱うしかない状態になってしまう

Iteration設定されていないものを一括でArchiveするのもなんとなく嫌だなと思ったので

雑だが簡単なコードを書いた

consoleでの一回の操作

$('.menu-trigger').click()
$('[data-test-id="row-menu-archive"]').click()
$x('//button[text()="Archive"]')[0].click()

メニューを出して
Archiveをクリックして
Confirmする

というながれを一番上のItemで行うためのコード

まとめて操作

function archive() {
  document.querySelector('.menu-trigger').click();
  document.querySelector('[data-test-id="row-menu-archive"]').click();
  document.evaluate('//button[text()="Archive"]', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.click()
}

一番上のItemをArchiveする操作を関数にまとめ

setInterval(archive, 2000);

定期実行することでたまっているItemを自動でArchiveする

使い方としてはある程度フィルタリングして全件Archive

あと全部ArchiveされるとItemがない状態になるので実行時エラーになる

丁寧にやるならエラーをキャッチしてclearIntervalまでしてあげれば良さそうだが…

XPath周りでの差分

関数化するとdevtoolで便利な$が使えないので一部修正した

さらにXPath周りはちょっと勝手が違った

参考

JavaScript での XPath の利用の手引き - XPath | MDN

ただ単にdocument.evaluateするだけだとclick()できるNodeが返却値に含まれない

オプションで返却値の指定をしてNodeを取れるようにしてからノードを取得、クリックといった処理になった

今回は初回に見つかったNodeだけを取得したいのでFIRST_ORDERED_NODE_TYPEを指定しsinbleNodeValueでNodeを取得した

Hiveパーティショニングモードでbq load

Wed, 31 Aug 2022 00:00:00 GMT

Lakeにデータを置いた日付をBQ上でカラムとして扱いたかったのでHiveパーティショニングモードでbq loadした時のメモ

${BUCKET_NAME}, ${GOOGLE_PROJECT}は適宜読み替える

最初に環境変数へ入れておいたりしておくとよいかも

export BUCKET_NAME=hoge
export GOOGLE_PROJECT=sample-project

GCS側のディレクトリ構造

$ gsutil ls gs://${BUCKET_NAME}/items/
gs://${BUCKET_NAME}/items/dt=2022-02-15/
gs://${BUCKET_NAME}/items/dt=2022-02-25/
gs://${BUCKET_NAME}/items/dt=2022-02-26/
gs://${BUCKET_NAME}/items/dt=2022-02-27/
gs://${BUCKET_NAME}/items/dt=2022-03-04/
gs://${BUCKET_NAME}/items/dt=2022-04-01/

xx=yyという形式でオブジェクトを配置することでよしなにパーティショニングしてくれる

各ディレクトリにはCSVが置いてある

今回の例ではresponseというカラムにAPIのレスポンスがすべて入っているという感じ（JSON型を使ってみたかった）

schema.json

[
  {
    "mode": "NULLABLE",
    "name": "response",
    "type": "JSON"
  }
]

load

bq load --replace --source_format=CSV \
  --hive_partitioning_mode=AUTO \
  --hive_partitioning_source_uri_prefix=gs://${BUCKET_NAME}/items/ \
  ${GOOGLE_PROJECT}:sample_datalake.test_raw_items "gs://${BUCKET_NAME}/items/*.csv" ./schema.json

結果

$ bq show --format=prettyjson sample_datalake.test_raw_items
{
  "creationTime": "1661458822114",
  "etag": "hODI6PUMYlQYOpdjjEYedQ==",
  "id": "sample-project:sample_datalake.test_raw_items",
  "kind": "bigquery#table",
  "lastModifiedTime": "1661458822114",
  "location": "asia-northeast1",
  "numActiveLogicalBytes": "27655304",
  "numBytes": "27655304",
  "numLongTermBytes": "0",
  "numLongTermLogicalBytes": "0",
  "numRows": "471",
  "numTotalLogicalBytes": "27655304",
  "schema": {
    "fields": [
      {
        "mode": "NULLABLE",
        "name": "response",
        "type": "JSON"
      },
      {
        "mode": "NULLABLE",
        "name": "dt",
        "type": "DATE"
      }
    ]
  },
  "selfLink": "https://bigquery.googleapis.com/bigquery/v2/projects/sample-project/datasets/sample_datalake/tables/test_raw_items",
  "tableReference": {
    "datasetId": "sample_datalake",
    "projectId": "sample-project",
    "tableId": "test_raw_items"
  },
  "type": "TABLE"
}

これでOK

dtを日付としてクエリできるようになった

参考

外部パーティション分割データの読み込み | BigQuery | Google Cloud

GitHub APIのRateLimit

Sat, 27 Aug 2022 00:00:00 GMT

GitHubのAPIを使いだすと割と早くRateLimitに引っかかる

rate limit

gh: API rate limit exceeded for user ID xxxxxxxx.

そしてRateLimitにあたってしまったときに、いつ使えるようになるのか?が知りたい

GitHubのCLIにずばりそのものの機能がある

$ gh api rate_limit
{
  "resources": {
    "core": {
      "limit": 5000,
      "used": 58,
      "remaining": 4942,
      "reset": 1661532628
    },
    "search": {
      "limit": 30,
      "used": 0,
      "remaining": 30,
      "reset": 1661531080
    },
    "graphql": {
      "limit": 5000,
      "used": 4888,
      "remaining": 112,
      "reset": 1661532952
    },
    "integration_manifest": {
      "limit": 5000,
      "used": 0,
      "remaining": 5000,
      "reset": 1661534620
    },
    "source_import": {
      "limit": 100,
      "used": 0,
      "remaining": 100,
      "reset": 1661531080
    },
    "code_scanning_upload": {
      "limit": 1000,
      "used": 0,
      "remaining": 1000,
      "reset": 1661534620
    },
    "actions_runner_registration": {
      "limit": 10000,
      "used": 0,
      "remaining": 10000,
      "reset": 1661534620
    },
    "scim": {
      "limit": 15000,
      "used": 0,
      "remaining": 15000,
      "reset": 1661534620
    },
    "dependency_snapshots": {
      "limit": 100,
      "used": 0,
      "remaining": 100,
      "reset": 1661531080
    }
  },
  "rate": {
    "limit": 5000,
    "used": 58,
    "remaining": 4942,
    "reset": 1661532628
  }
}

各リソースごとにどのような状況かが返ってくる

各リソース部分のresetがいつリセットされるかのエポック秒となっている

なのでdateコマンドで変換して見てあげるといつか分かる

$ date -d @1661532952 +"%Y-%m-%d %H:%M:%S"
2022-08-27 01:55:52

つなげるとこんな感じ

$ gh api rate_limit | jq '.resources.graphql.reset' | xargs -i date -d @{} +"%Y-%m-%d %H:%M:%S"
2022-08-27 01:55:52

大人しく待ちましょう

Jestのスナップショットテスト

Mon, 22 Aug 2022 00:00:00 GMT

Jestのスナップショットテストの話

検索するといろいろ方法が出てくるがreact-test-rendererを使って行う記事が多いように思う

Jestの公式ドキュメントにもそういう例が書いてあった

最初は素直に真似ていたがほかにも方法があるようだったのでメモを残しておく

react-test-endererを使う方法

よく記事で出てくるパターン

rendererをimportしてrenderer.create()+toJSON()で生成した値を使用する

import renderer from "react-test-renderer"

...
...
...

    const tree = renderer.create(<Archive data={data}></Archive>).toJSON()
    expect(tree).toMatchSnapshot()

Snapshot Testのドキュメント

Snapshot Testing · Jest

ドキュメントを読んだ

次の箇所

Snapshot Testing · Jest

スナップショットテストの対象について

要はシリアライズされた値であれば何を渡してもOKっぽい

例としてUIテストがケースとして良いので使っているだけってことのよう

スナップショットテストとしては、変更によってスナップショットと差分が出たかどうかだけをチェックしているということ

なので

Testing LibraryのgetBy....で取得できる要素を直接渡してもOK

Testing Libraryのrenderで返ってくる変数のcontainerをそのまま使用してもOK

オブジェクトを渡してもOK

なるほど!これなら活用範囲はほかにもありそうだなという感想を持ったので覚えておこうと思う

Testing Libraryのrenderの返却値で行う方法

本題に戻り、今回はReactのUIテストでクリックだったりイベントをいくつか発行させた後の状態をスナップショットテストしたかった

なのでTesting Libraryで使う値を使ってスナップショットテストを行った

import { render } from "@testing-library/react"
import userEvent from "@testing-library/user-event"

...
...
...

    const user = userEvent.setup()

...
...
...

    const {
      container,
      getByTestId,
      getAllByTestId,
    } = render(<Search></Search>)

    const searchInput = getByPlaceholderText("Search")
    user.type(searchInput, "Bi")

    expect(container).toMatchSnapshot()

例だとcontainerをスナップショットテストに使用した

イベント発行後のDOMの内容に差分が出てないかをチェックしている

mswのモックをjestのテストでも使う

Fri, 19 Aug 2022 00:00:00 GMT

開発用に定義したmswの設定をJestでも使いたい案件

参考のまんまだけどめちゃくちゃ簡単だった

テスト用のファイルに下記のように書くだけ

search.tsx

import { handlers } from "../../mocks/handler"
describe("Search", () => {
  const user = userEvent.setup()
  const server = setupServer(...handlers)

  beforeEach(() => {
    server.listen()
  })

  afterEach(() => {
    server.close()
  })

  it("検索UIのテスト", async () => {
    // mswでのモックレスポンスが適用される
    .....
    .....
    .....
    .....
  })
})

handler.ts

import { rest } from "msw"
import { setupServer } from "msw/node"

export const handlers = [
  rest.post("https://example.com/*", (req, res, ctx) => {
    return res(
      ctx.status(200),
      ctx.json({})
    )
  }),
]

setupServerで事前定義したhandlersを読ませbeforeEachで各テストの実行前にサーバ起動する

終わったら落とすようにしている

これだけでよい

とても楽

開発時とテスト時で同じ設定を使えるのもメンテナンス上とてもよい

外部へのリクエストが発生する機能はどんどん活用していくモチベーションが上がった

参考

Jest + @testing-library/react + mswのtips - Qiita

Algoliaのレスポンスをmswでモックして開発ではダミーレスポンスを扱う

Fri, 12 Aug 2022 00:00:00 GMT

Algoliaの検索リクエストをmswでモックした

開発時は検索用のAPIキーを登録せずにインデックスへのアクセスもしないようにすれば良くない？

空レスポンスを返すようにしておけば良くない？

みたいな話はあるものの、検索にかかるUI部分を開発するならある程度実際にリクエストした時のレスポンスが欲しくなる

かと言ってAlgoliaに毎度リクエストさせてしまうと無料枠がどんどん減っていく…

ということで、mswで解決した

やっていること

実際のレスポンスデータをdev toolsのNetworkからレスポンス内容を取得してきてJSONに保存
- 特定文字列(BigQuery)を順次入力した場合のレスポンスを逐次取得
  - Bと入力した際のレスポンス
  - Biと入力した際のレスポンス
  - Bigと入力した際のレスポンス
  - BigQと入力した際のレスポンス
  - BigQuと入力した際のレスポンス
  - BigQueと入力した際のレスポンス
  - BigQuerと入力した際のレスポンス
  - BigQueryと入力した際のレスポンス
先工程で保存したJSONをmswを用いて返すように設定する

「検索文字列の変化によっって返ってくる件数や内容が変わる」というのを再現したかったので固定値ではあるが検索文字列が変化した場合は文字数にあったレスポンスがmsw経由で返るようにした

実際のコードは下記

handler.ts

import { rest } from "msw"
import query0Words from "./algolia-search-response-0-words.json"
import query1Words from "./algolia-search-response-1-words.json"
import query2Words from "./algolia-search-response-2-words.json"
import query3Words from "./algolia-search-response-3-words.json"
import query4Words from "./algolia-search-response-4-words.json"
import query5Words from "./algolia-search-response-5-words.json"
import query6Words from "./algolia-search-response-6-words.json"
import query7Words from "./algolia-search-response-7-words.json"
import query8Words from "./algolia-search-response-8-words.json"

export const handlers = [
  rest.post("https://*.algolia.net/1/indexes/*/queries", (req, res, ctx) => {
    const empty = query0Words

    const wordCountResponseMap = [
      empty,       // 空
      query1Words, // B
      query2Words, // Bi
      query3Words, // Big
      query4Words, // BigQ
      query5Words, // BigQu
      query6Words, // BigQue
      query7Words, // BigQuer
      query8Words, // BigQuery
    ]

    const bodyString = req.body as string

    if (bodyString.length === 0) {
      return res(ctx.status(200), ctx.json(empty))
    }

    const body = JSON.parse(bodyString)
    const params = [
      ...new URLSearchParams(body.requests[0].params).entries(),
    ].reduce((obj, e) => ({ ...obj, [e[0]]: e[1] }), {} as { query: string })

    if (
      !params.query ||
      params.query.length === 0 ||
      params.query.length > wordCountResponseMap.length
    ) {
      return res(ctx.status(200), ctx.json(empty))
    }

    return res(
      ctx.status(200),
      ctx.json(wordCountResponseMap[params.query.length])
    )
  }),
]

importしている実際のレスポンスを保存したJSONはAlgoliaでの設定などにより変わるのでここでは割愛する

Algoliaのレスポンスを完全再現はできないので次のような挙動にしている

どの文字列を入力したとしても開発時はBigQueryと入力した場合のレスポンスを返す
検索文字列の入力文字数によってモック用のレスポンスを返す
- 1文字入力時はBが入力された時のモック用レスポンスを返す
- 2文字入力時はBiが入力された時のモック用レスポンスを返す
- 3文字入力時はBigが入力された時のモック用レスポンスを返す
- 8文字まで同様
検索文字列が用意している文字列以上入力された場合は何も文字を入力していない場合のレスポンスを返す(query0Words)

これで検索UIの開発はかなり捗ったのでメモとして残しておく

ReactTestingLibraryでデバッグする

Wed, 10 Aug 2022 00:00:00 GMT

React Testing LibraryでReactのコンポーネントのテストを書いていた

今どのような状況だっけ?

みたいなときにレンダリングされているHTMLを実際に見たい

そういうときにReact Testing Libraryのdebugを使ってHTMLを表示する

普通にimportで呼べばOKかなと思って調べてみたらrenderでいろいろ返ってくる中にも入っていたためそっちを使うようにしてみた

サンプル

import { render } from "@testing-library/react"

const {debug, baseElement, container, getByTestId, getAllByTestId, getByTitle, getByPlaceholderText } = render(
  <Hoge></Hoge>
)

型定義を見に行ったらcontainer,baseElement,debugなども返却値に含まれていた

このあたりを活用すれば中身を見ることができそう

import { render } from "@testing-library/react"

const {debug, baseElement, container, getByTestId, getAllByTestId, getByTitle, getByPlaceholderText } = render(
  <Hoge></Hoge>
)

debug(baseElement)
debug(container)

baseElement

<body>
  <div>
  .....

  </div>
</body>

baseElementはbodyで囲われている、このタグはデフォルトはdocument.bodyでrender時に指定した場合は指定したタグになるらしい

container

<div>
  .....
</div>

テスト対象の要素外へのイベント発行

要素外をクリックしたら非表示になるか

みたいなテストを今回は含めたかったのでbaseElementをクリックすることで実現できた

import { render } from "@testing-library/react"

const {baseElement, getByTitle } = render(
  <Hoge></Hoge>
)

await user.click(baseElement)
// click後DOMが変わっているか確認する

で、この辺調べたらrenderで返ってくる値のドキュメントがあった

API | Testing Library

何か1つ単語が分かると芋づる式に把握することが増えていくがそれらを調べていくと結局ドキュメント読むのが一番だよねとうい結論にたどり着くなー

最初からドキュメントを読みましょう案件

GitHub CLIのAPIでpagenationした結果を表示する

Thu, 04 Aug 2022 00:00:00 GMT

ドキュメント

gh api | GitHub CLI

In --paginate mode, all pages of results will sequentially be requested until there are no more pages of results. For GraphQL requests, this requires that the original query accepts an $endCursor: String variable and that it fetches the pageInfo{ hasNextPage, endCursor } set of fields from a collection.

gh api では、レスポンスの量が多い場合は--paginateオプションを渡すことでページングして全件取得した結果を返してくれる

GraphQLの場合

$endCursor変数を用意する

ページングさせたいConnection（edges）に対して次のようにクエリを書く

after: $endCursorとcursor指定をする
pageInfo.endCursor,pageInfo.hasNextPageを取得する

そして--paginateオプションを渡すと自動で全件取得してくれる…すごい

もともとできたのかー!!!って感じだった

今までシェルスクリプトを使って自前でendCursor取得して…とやってたので無駄だった

ことの発端

コミット履歴をGraphQLのAPIを使用して取ろうとして調べていたがpageInfo.endCursorの値がhash 99というようにスペースが入ってしまっている状態だった

これをそのままCLI経由で渡すとうまくいかなかった

シェルスクリプト側の問題のはずだったが一応回避策などないか調べてたらオプションあるやんけ!となった次第

エラー内容

accepts 1 arg(s), received 2

サンプルのGraphQLクエリ

query($endCursor: String, $org: String!, $repo: String!) {
  repository(owner: $org, name: $repo) {
    id
    defaultBranchRef {
      name
      target {
        ... on Commit {
          history(after: $endCursor) {
            pageInfo {
              startCursor
              hasNextPage
              endCursor
            }
            nodes {
              id
              pushedDate
              message
            }
          }
        }
      }
    }
  }
}

結果

{
  "data": {
    "repository": {
      "id": "hogehoge",
      "defaultBranchRef": {
        "name": "master",
        "target": {
          "history": {
            "pageInfo": {
              "startCursor": "hogehoge 0",
              "hasNextPage": true,
              "endCursor": "hogehoge 99"
            },
            "nodes": [
              {
                "id": "C_aaaaa",
                "pushedDate": "2022-08-01T06:44:36Z",
                "message": "Merge branch 'feature/fuga"
              }
              .....
              .....
              .....
              .....
              .....
            ]
          }
        }
      }
    }
  }
}
{
  "data": {
    "repository": {
      .....
      .....
      .....
      .....
      .....
    }
  }
}

jqで展開するとこんな感じ

実際は改行なしでレスポンスのデータをつなげた状態で出力される

setTimeoutの型注釈とReactでの実装例

Mon, 01 Aug 2022 00:00:00 GMT

よく考えずに実装するとこんな感じで怒られる

  Type 'Timeout' is not assignable to type '(prevState: number | undefined) => number | undefined'.
    Type 'Timeout' provides no match for the signature '(prevState: number | undefined): number | undefined'.

参考というか答え

TypeScript - use correct version of setTimeout (node vs window) - Stack Overflow

次のようにして解決する

const timerId = useRef<ReturnType<typeof setTimeout>>();

if (timerId.current) {
  clearTimeout(timerId.current);
}

timerId.current = setTimeout(() => search(query), 1000);

ReturnType<typeof ...>はよく使えるパターンだと思うので覚えておく

ReactだとuseStateを使ってtimerIdを管理するかと思ったがuseStateだとうまく想定通りの挙動をしてくれなかったためuseRefで実装した

下記の実装を参考にした

react-use/useTimeoutFn.ts at master · streamich/react-use

場合によってはそのまま上記のuseTimeoutFnを使うのもあり

markdownlintを使ってみた

Tue, 26 Jul 2022 00:00:00 GMT

DavidAnson/markdownlint: A Node.js style checker and lint tool for Markdown/CommonMark files.

Markdownのlinter

インデントは○で!
Headingの後は改行入れて!
1行の文字数どのくらいまで

などいろいろ指摘してくれる

CLIも用意されているのでCI用途でも使えるし、エディタの拡張をつかってエディタ上にほかのlinterと同様警告を表示できる

プライベートの記事執筆環境で、デフォルトの2だと警告が出ているためリストのインデントを4に設定した

VS CodeだとショートカットF8, Shift+F8で警告箇所へジャンプできるが

textlintの警告（本来ジャンプして直したい箇所）と合わせてジャンプ対象になってしてしまう

.markdownlint.yml

MD007:
  indent: 4

地味に邪魔だったので今の自分の環境に合わせて警告が出ないようにした

CloudSchedulerの料金

Sun, 24 Jul 2022 00:00:00 GMT

料金 | Cloud Scheduler | Google Cloud

これがすべてなんだけどしっかり把握していなかったので個人で毎月料金掛かっているものがあった

2022-07-24時点

ジョブの稼働ではなく作った段階で課金対象となる
アカウントにつき3つまで無料（プロジェクト単位ではない）
それ移行は$0.10/月

Terraformでサンプル作ったりしてそのまま放置しているのが結構あったので馬鹿にならない感じ

サンプルとかで使ったら後片付けをしましょうね、気を付けます

BigQueryでStringの空配列を生成する

Fri, 22 Jul 2022 00:00:00 GMT

配列関数 | BigQuery | Google Cloud

GENERATE_ARRAYで作るとINT64の空配列になってしまう

SELECT GENERATE_ARRAY(1,0,1) AS tags

UNIONなどで文字列の配列と結合させようとすると型が合わなくなってしまう

例

SELECT ['a','b'] AS tags
UNION ALL
SELECT GENERATE_ARRAY(1,0,1) AS tags

結果

 Column 1 in UNION ALL has incompatible types: ARRAY<STRING>, ARRAY<INT64> at [3:1]

Create empty string array BigQuery - Stack Overflow

こまったときのstackoverflow、答えが書いてありました

SELECT ARRAY<STRING>[] AS tags

でSTRINGの空配列を生成できる

解決！

TypeScript+JestでDateのモックをするときの型定義

Wed, 20 Jul 2022 00:00:00 GMT

Jestでテストをする時の話、Dateをモックして特定の日付を返したいといったよくあるパターン

ちょうどGatsbyで作った本ブログのテストでも使用していて、エディタ上では赤くなっていたので対応しようと重い腰を上げた

もともと書いていたコード

beforeAll(() => {
  // 2021-03-10T15:00:00.000Z
  const mockDate = new Date(1615388400000)
  jest.spyOn(global, "Date").mockImplementation(() => mockDate)
})

型のエラー内容

src/components/__tests__/archive.tsx:11:49 - error TS2345: Argument of type '() => Date' is not assignable to parameter of type '() => string'.
  Type 'Date' is not assignable to type 'string'.

11   jest.spyOn(global, "Date").mockImplementation(() => mockDate)

さっと調べるとでてくるstackoverflow、読んでみるとさまざまな解決方法があるよう

unit testing - jest typescript - Mock Date constructor - Stack Overflow

単純にas stringでキャストしようとするとそう簡単には許してくれない

src/components/__tests__/archive.tsx:13:31 - error TS2352: Conversion of type 'Date' to type 'string' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.

13     .mockImplementation(() => mockDate as string)

このエラーにも書いてあるが「型が合いません、意図的なものならまずunknownにしてください」とのこと

結局下記のように書くことにした

jest.spyOn(global, "Date").mockImplementation(() => (mockDate as unknown) as string)

こういう回避方法があるのね…

一度unknownにキャストしてさらにstringにキャストすると

そもそもキャスト自体もあまり推奨されるやり方じゃないと思っていたが今回のケースではやむを得ず…

// @ts-ignoreで握りつぶすよりかは良いか…という感じ

2022-11-06追記

“@types/jest”: “29.2.2”,からこのハックは必要なくなった

使い続けていると怒られる

Argument of type '() => string' is not assignable to parameter of type '(value: string | number | Date) => Date'.

Dateを直接渡せるようになったみたい

Cloudflare Insightsの独自ドメイン設定時のエラー対応

Fri, 15 Jul 2022 00:00:00 GMT

Cloudflare Insightsが本番でエラーが起きてた

Access to resource at 'https://cloudflareinsights.com/cdn-cgi/rum' from origin 'https://til.swfz.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Analytics tag not loading due to Cross-Origin Request Blocked - Security - Cloudflare Community

ちょっと古いがカスタムドメインを指定すると起きるよう？

WebAnalyticsを無効化して再度有効化すると正常に読み込めるようになるとのこと

なので設定を変えて再デプロイ、設定を戻して再デプロイ、でエラーが出なくなった

GitのLogフォーマットを指定し、日付を表示する

Tue, 12 Jul 2022 00:00:00 GMT

コミットの日付をみたい人生だった

git log --pretty=format:'%H [%ai] %an %s'

sha [日時] author コメント

dff11aca396f7b6550cdb7c7c490e9066ef79513 [2022-06-17 03:35:26 +0900] swfz memo
d365f46b1455ab1c6a7b00084784a7be72f04fa8 [2022-06-17 03:33:20 +0900] swfz hoge
b7de206695c37193be32042ffd6e4b5c96980dd2 [2022-06-17 03:29:24 +0900] swfz fuga
0672cbf90775a79d27c80bfbe27b1eff2f76d6d1 [2022-06-17 02:58:40 +0900] swfz sample

って感じ

参考: Git - pretty-formats Documentation

JavaScriptで配列の最後の要素を取得する

Thu, 07 Jul 2022 00:00:00 GMT

よくあるのは

const list = [1,2,3,4,5];
const lastValue = list[list.length - 1];

だが、そもそも上記の例でのlistを定義せずよしなにしたいケースが発生した

org/repoの文字列からリポジトリ名のみを抜き出すケース

const path = 'hoge/fuga';
const repo = path.split('/').pop(); // fuga

ES2022を使えるならatで良い

const path = 'hoge/fuga';
const repo = path.split('/').at(-1); // fuga

参考

javascript - Getting the last element of a split string array - Stack Overflow

GitHub CLIコマンドでアカウントを切り替えたい

Tue, 05 Jul 2022 00:00:00 GMT

version

$ gh --version
gh version 2.13.0 (2022-06-22)
https://github.com/cli/cli/releases/tag/v2.13.0

同一マシン上でGitHubのアカウントを切り替えてghコマンドを使いたいというケースが発生した

普段使っているアカウントと別アカウントの認証情報を参照できれば問題ないはずということでちょっと調べてみた

GitHub CLIでgh auth login後にどんなファイルが生成されるか調べてみたが、見つけられたのは下記

.local/state/gh/state.yml
.config/gh/hosts.yml

この情報を持ってればOKそう

いったんDockerコンテナなど普段使いとは違う環境でgh auth loginして別アカウントのoauth_tokenをメモ

環境変数GITHUB_TOKENにhosts.ymlのoauth_tokenの値を入れてコマンドをたたけばアカウント切り替えた状態でCLIを実行できる

他の方法もありそうだがやりたいことはこれで実現できた

参考:

gh auth login | GitHub CLI

GitHub CLIコマンドでscopeを設定する

Mon, 04 Jul 2022 00:00:00 GMT

gh auth login | GitHub CLI

ghコマンドの権限周りで何か怒られた場合はこの操作で権限を追加する

変更するためには再度ログインが必要

プロジェクトへのread権限、codespaceへのread/write権限を追加する図

gh auth login --scopes 'read:project,codespace'

GraphQLでいうProjectV2（GitHub Issues beta）へのアクセスにはprojectへの権限が必要

GitHub CLI自体はOAuthで認証しているのでスコープの指定方法は次のドキュメントを参照すればよさそう

OAuth Appのスコープ - GitHub Docs

GoogleSlideのプレゼンテーションモードでレーザーポインタ風表示のショートカットキー

Tue, 28 Jun 2022 00:00:00 GMT

プレゼンテーションモードでマウスポインタをレーザーポインタ風の表示にできる

ショートカットキーだとlボタンで切り替えが可能

ショートカット以外だと、左下のハンバーガーメニューからでも切り替え可能

蛇足だが、自分がいつも使っているスピーカーノートのショートカットも用意されていてsキーで表示切り替えを行える

レーザーポインタ風表示

発表のときとか「ここです！」って示すのにレーザーポインタ風だとみやすい

JSON.stringifyでundefinedな値は省かれる

Fri, 24 Jun 2022 00:00:00 GMT

zxでAPI叩いて整形して整えたJSONをGCSに上げてbq loadする

みたいなごく簡単な作業をしていたときに雑にbq load --autodetectを使っていたらカラムが合わないとエラーで怒られた

よく調べるとJSONの中身からあるはずのキーが抜けていた

REPLで確認

> const hoge = {a: undefined, b: 1, c: 3}
undefined
> hoge
{ a: undefined, b: 1, c: 3 }
> JSON.stringify(hoge)
'{"b":1,"c":3}'

知らなかった…

調べたらMDNにもしっかり書いてあった

JSON.stringify() - JavaScript | MDN

undefined、関数 (Function)、シンボル (Symbol) は有効な JSON 値ではありません。変換中にそのような値に遭遇した場合は、 (オブジェクトの中で発見された場合は) 省略されたり、 (配列の中で見つかった場合は) null に変換されたりします。 JSON.stringify は JSON.stringify(function(){}) や JSON.stringify(undefined) のように「純粋」な値を渡した場合に undefined を返すことがあります。

なのでzxやJavaScriptでJSONを生成する際はundefinedな値が入らないように整形処理を書くか次のようにreplacerで変換してあげるなどの方法がある

> hoge = {a: undefined, b: 1, c: 3}
{ a: undefined, b: 1, c: 3 }
> JSON.stringify(hoge, (k,v) => {
  return v === undefined ? null : v;
});
'{"a":null,"b":1,"c":3}'

zx使用時のコマンドライン引数のリスト

Tue, 21 Jun 2022 00:00:00 GMT

zx query.mjs hoge
[
  '/home/user/.anyenv/envs/nodenv/versions/16.13.0/bin/node',
  '/home/user/.anyenv/envs/nodenv/versions/16.13.0/bin/zx',
  'query.mjs',
  'hoge'
]

普通のnodeスクリプトだとprocess.argv.slice(2)でコマンドライン引数のリストを取得するが、zxの場合にはprocess.argv.slice(3)になる

JavaScriptで時刻と文字列の変換を行う

Fri, 17 Jun 2022 00:00:00 GMT

zxを使っていて、ライブラリを使わずよしなにしたかった

const unixtime = Date.parse("2022-06-15T00:00:00");
console.log(unixtime);
const d = new Date();
d.setTime(unixtime);
const str = d.toISOString();
console.log(str);

1655218800000
2022-06-14T15:00:00.000Z

変数dには一度宣言する必要があった

Date.parseの戻り値は数値（1970年1月1日の深夜0時から経過したミリ秒を表す数値）

実行環境によるようでJSTでparseしてくれるよう

toISOString()ではUTC時刻が表示される

数値に変換してから時間計算して戻すとかそういう使い方をしたいときに参照する

vite rollup-pluginでChrome拡張内のJSのみから参照されているイメージをどうするか

Wed, 15 Jun 2022 00:00:00 GMT

背景

vite+rollup-plugin-chrome-extensionを用いてChrome拡張を作っていた

拡張を作っていく中でJSのみから参照されるイメージ（SVG）がビルド後のディレクトリに含まれていないことに気付いて調べた

調査した結果

公式ドキュメントから

Untitled – Extend Chrome

What about the assets? Like images, icons, or CSS files?

HTMLに表示されているイメージは自動でweb_accessible_resourcesに追加されるのと配信用のディレクトリに自動でコピーされる

が、JSで呼び出しているものは別途プラグインが必要とのこと

調べてみると

typescript + vite + reactを使ったChrome拡張機能の土台を作って検証してみた

この中でrollup-plugin-copyを使用すればOKそう

ということで使ってみた

インストール

yarn add rollup-plugin-copy

vite.config.ts

 export default defineConfig({
-  plugins: [react(), chromeExtension({ manifest })],
+  plugins: [
+    react(),
+    chromeExtension({ manifest }),
+    copy({
+      verbose: true,
+      hook: 'writeBundle',
+      targets: [
+        {
+          src: 'images/sign_language_black_24dp.svg',
+          dest: 'dist/images'
+        }
+      ],
+    }),
+  ],
 });

上記でイメージの配信用ディレクトリへのコピーはできたがweb_accessible_resourcesには自動で設定が追加されなかった

完全にworkaroundだがビルド後にスクリプトを挟んでweb_accessible_resourcesに追加するという処理を追加した…

package.json

"build": "tsc && vite build && node script/patch_manifest.js",

script/patch_manifest.js

const fs = require('fs');

const manifest = JSON.parse(fs.readFileSync('dist/manifest.json'));
const resources = manifest.web_accessible_resources.map(item => item.resources).flat();

const patchedManifest = {
  ...manifest,
  web_accessible_resources: [
    {
      matches: [
        "<all_urls>"
      ],
      resources: [...resources, "images/sign_language_black_24dp.svg"],
      use_dynamic_url: true
    }
  ]
}

fs.writeFileSync('dist/manifest.json',JSON.stringify(patchedManifest, null, 2));

このworkaroundの処理自体が他の問題も解決しているが

今回のスコープで言うと

Chrome拡張のJSのみで参照されている”images/sign_language_black_24dp.svg”をweb_accessible_resourcesにも追加する

ということを行っている

これで無事Chrome拡張を動作させることが可能となった

該当日付以降の変更差分をまとめてみる

Mon, 13 Jun 2022 00:00:00 GMT

ぱっと調べてよく出てくるのは下記のようにwhatchangedで見る方法

git whatchanged --since="2022-04-29" -p

ただ、上記方法だとコミットが別れた状態になっている

ざっくり期間を絞ってどんな差分があったか把握したいときは次のようにコマンドを組み合わせる

2022-05-01以降の差分を見る

git diff $(git log --before "2022-05-01 00:00:00" --oneline | head -n 1 | awk '{print $1}')..HEAD

2022-05-01に入った変更も含め2022-05-01以降の差分を出すコマンドとなる

まず2022-05-01 00:00:00以前で最初のコミットのSHA-1を取り出している

そのコミットのSHA-1と現在のHEADを比較すれば指定日以降の差分をまとめて表示できる

余談

git logのオプションで--after,--since,--before,--untilなどあるが

日付のみ指定した場合

--after,--sinceは当日を含まない
--before,--untilは当日を含む

という挙動だった（2.36.1時点）

自分は2022-05-01に入った変更も含めたいと感じたので結局2022-05-01 00:00:00と指定して厳密に2022-05-01に入った修正もdiffの対象とすることにした

この辺の日付の扱い難しい…

NetlifyからCloudflare Pagesに移行する

Mon, 30 May 2022 00:00:00 GMT

Netlifyでビルド時間の制限で$7/月掛かることが増えてきてしまったのでCloudflarePagesに乗り換えた

親切なことに移行方法がドキュメントにまとめられている

Migrating from Netlify to Pages · Cloudflare Pages docs

ビルドからデプロイまでは上記にしたがってやれば特に問題なくデプロイまではできるはず

カスタムドメイン

自分はAWSのRoute53でtilのドメインを管理している

なのでAWS側でCNAMEのレコードを変更することで対応する

Cloudflare側

Pages→CustomDomainsのタブ
サブドメイン込みで入力
CluodFlareのDNSか独自のDNSどっち使うの？と聞かれるのでMyDNSProviderを選択
- 管理はAWSのRoute53で行っているので

AWS側

AWS側のAレコードを削除（Netlifyの設定では必要だったらしい）
CNAMEをNetlifyからCloudflareのものに変更
- ${適当な文字列}.pages.dev←のような値

しばらくすると検証が終わりカスタムドメインでアクセスできるようになる

$ nslookup til.swfz.io
Server:         172.27.112.1
Address:        172.27.112.1#53

Non-authoritative answer:
til.swfz.io     canonical name = til-5tb.pages.dev.
Name:   til-5tb.pages.dev
Address: 172.66.44.99
Name:   til-5tb.pages.dev
Address: 172.66.47.157
Name:   til-5tb.pages.dev
Address: 2606:4700:310c::ac42:2c63
Name:   til-5tb.pages.dev
Address: 2606:4700:310c::ac42:2f9d

CNAMEが変わっていることを確認

参考

ブログをCloudflare Pagesに引っ越し

SVG iconに色を付ける

Wed, 25 May 2022 00:00:00 GMT

ページ中に表示したSVNのアイコンに対して、色をつけたいというケースがあった

とりあえずcolorプロパティを変更しても反映されなかったため、調べたら

filterプロパティというものがありそれを適切に設定すると色を付けることが可能だった

<img src="hoge.svg" class="red">

.red {
  filter: invert(13%) sepia(94%) saturate(7466%) hue-rotate(0deg) brightness(94%) contrast(115%);
}

個々で指定している数値はRGBから変換できるとうれしいなと思っていたら

下記のようなページで変換するのが良さそう

CSS Color Filter Generator

GatsbyでGistの埋め込みを行う

Mon, 23 May 2022 00:00:00 GMT

Gistのページの埋めこみタグだと表示されなかったので調べたら下記のプラグインを使用すれば埋め込みが可能

gatsby-remark-embed-gist | Gatsby

gatsby-config.js

+          {
+            resolve: "gatsby-remark-embed-gist",
+            options: {}
+          },

gatsby-remark-prismjsより前に設定を書く必要があるよう

Jest28への更新に必要だった作業

Thu, 05 May 2022 00:00:00 GMT

本ブログで使っているJestがRenovateにより自動でバージョンアップしていたが28系にあげる際、いつくか詰まったのでメモ

jest-environment-jsdomの分割

エラー内容

$ jest --config ./jest.config.js
● Validation Error:

  Test environment jest-environment-jsdom cannot be found. Make sure the testEnvironment configuration option points to an existing node module.

  Configuration Documentation:
  https://jestjs.io/docs/configuration


As of Jest 28 "jest-environment-jsdom" is no longer shipped by default, make sure to install it separately.

最後の文が言っているとおり、Jest28以降はjsdomを使いたい場合別途インストールしてねということらしい

yarn add -D jest-environment-jsdom

でOK

trailing-slash-optionのWorkaroundな設定を削除

エラー内容

 FAIL  src/components/__tests__/line.tsx
  ● Test suite failed to run

    ENOENT: no such file or directory, open '/workspaces/til/node_modules/gatsby-page-utils/dist/dist/apply-trailing-slash-option.js'

      at Runtime.readFile (node_modules/jest-runtime/build/index.js:2552:21)
      at Object.<anonymous> (node_modules/gatsby-link/rewrite-link-path.js:8:33)

下記のworkaroundを使っていたがそれが解決されたっぽい

Cannot find module ‘gatsby-page-utils/apply-trailing-slash-option’ since Gatsby 4.7 · Issue #34784 · gatsbyjs/gatsby

大本のIssueは次のIssue

Support package exports in jest-resolve · Issue #9771 · facebook/jest

gatsbyのtrailing-slash-optionを使用したときにモジュール読み込みのパス指定がうまくいかずに設定でなんとかしていたところの部分を削除した

jest.config.js

moduleNameMapper: {
    ".+\\.(css|styl|less|sass|scss)$": `identity-obj-proxy`,
    ".+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": `<rootDir>/__mocks__/file-mock.js`,
-   "^gatsby-page-utils/(.*)$": `gatsby-page-utils/dist/$1`, // Workaround for https://github.com/facebook/jest/issues/9771
}

CloudFrontのキャッシュをクリアする

Sun, 01 May 2022 00:00:00 GMT

メモ

hogehoge.cloudfront.netは実行時適切なものに割り当てる

# DISTRIBUTION_IDの取得
$ export DISTRIBUTION_ID=$(aws cloudfront list-distributions --query 'DistributionList.Items[]' | jq -r '.[]|select(.DomainName="hogehoge.cloudfront.net")|.Id')
# INVALIDATION_IDの取得、invalidationでキャッシュの削除を行う、非同期処理のためIDを取得しておく
$ export INVALIDATION_ID=$(aws cloudfront create-invalidation --distribution-id ${DISTRIBUTION_ID} --paths "/*" | jq -r '.Invalidation.Id')
# チェック、Completeになっていれば完了
$ aws cloudfront get-invalidation --distribution-id ${DISTRIBUTION_ID} --id ${INVALIDATION_ID}

thinでサーバ起動できなくなっていたのでSSL証明書を発行して対応した

Wed, 27 Apr 2022 00:00:00 GMT

ブックマークレットの開発時、ローカルのサーバにSSL接続する必要があったのでRubyのthinというサーバを使っていた

久しぶりに起動したらアクセス時のエラーで立ち上げたサーバにアクセスできなくなっていた

エラー

SSL routines:SSL_CTX_use_certificate:ee key too small:../ssl/ssl_rsa.c:310:
thin start --ssl -R app.ru -p 3001 -D -V: ssl.cpp:203: SslContext_t::SslContext_t(bool, const string&, const string&, const string&, const string&, const string&, int): Assertion `e > 0'
failed.
zsh: abort      bundle exec thin start --ssl -R app.ru -p 3001 -D -V

この現象自体は鍵長短すぎる!と言っているよう

デフォルトで使う鍵が条件を満たしていないので条件を満たす鍵とその鍵をもとに自己証明書を作成してあげる必要がある

なので長さ2048で鍵を作って自前でやる

ローカルでの動作だしと詳しいオプションは調べていない…

あと留意点としては証明書を発行する段階で対話的にいろいろ入力するがCommon Nameの箇所を自ホスト名にする必要がある

$ openssl genrsa 2048 > localhost.key
$ openssl req -new -x509 -nodes -sha256 -days 365 -key localhost.key -out localhost.crt

Country Name (2 letter code) [AU]:
...
Common Name: localhost
...

$ thin start --ssl --ssl-disable-verify --ssl-key-file=localhost.key --ssl-cert-file=localhost.crt -R app.ru -p 3001 -D -V

生成した鍵と証明書をthinの起動時に指定して上げれば無事サーバが起動できブラウザから接続できるようになった

SlackのWebhookURLを発行するための順序

Thu, 21 Apr 2022 00:00:00 GMT

https://api.slack.com/apps

このリンクからアプリ→Add features and functionality→Incomming WebhooksをクリックしURLを発行もしくは取得する

とりあえずいつもたどり着けないのでメモ

書いた時点ではこの手順でたどり着ける

testing-library-user-eventの更新13.5 to 14

Thu, 14 Apr 2022 00:00:00 GMT

RenovateのPRで本ブログのリポジトリのテストがこけていた

参考にはならなそうだが一応ログ残しておく

 FAIL  src/components/__tests__/archive.tsx (8.923 s)
  ● Archive › renders correctly
    expect(element).not.toBeVisible()
    Received element is visible:
      <li aria-label="month-link" />

      49 |     userEvent.click(plusText2021)
      50 |
    > 51 |     expect(monthLInkList[0]).not.toBeVisible()

PRを見るとv13からv14の変更で結構なBREAKING CHANGESがある模様

公式を見に行くと

こっちが以前のv13

user-event v13 | Testing Library

そもそも使い方がガッツリ変わったようで、そういうアナウンスがあった

こちらが新しいバージョンのドキュメント

Introduction | Testing Library

ということで、公式ドキュメントにしたがって

使い方を変えて解決

const user = userEvent.setup()

await user.click(hogeButton)

setup()の戻り値を変数定義しそこからclick()を呼ぶように変更

clickの戻り値がPromiseになったみたいなのでawaitが必要、それに付随してテストの関数部分にasyncも付与

詳しい差分は下記へ

chore(deps): update dependency @testing-library/user-event to v14 by renovate · Pull Request #722 · swfz/til

こういうのたまにあるのでやはりテスト少しでも書いておくと良いなと感じる

WSL2上でDockerDesktopを使わなくなった後のエラー対応

Fri, 08 Apr 2022 00:00:00 GMT

DockerDesktopが有償化されてから使わないようにアンインストールしてUbuntu上のDockerを動かすようにしていたが先日下記のようなエラーが発生した

docker.credentials.errors.InitializationError: docker-credential-desktop.exe not installed or not available in PATH

そりゃアンインストールしていたらないだろっていう話ではあるがどこかでdockerを使うのにdesktop使うよっていう設定が残っているのかといろいろ調べた

調べた結果下記の参考ページのCredentialStoreの設定を削除する必要があった

参考

DockerDesktopからWSL2上のみで動くDockerに移行する

~/.docker/config.json

"credsStore": "desktop.exe"

上記設定を削除して再度実行したらエラーが出なくなった

BigQueryの日付を扱う際のメモ

Fri, 25 Mar 2022 00:00:00 GMT

よく使うと思われるクエリをメモしておく

SELECT
DATE_TRUNC(CURRENT_DATE(), MONTH) AS first_day, # 月初
LAST_DAY(CURRENT_DATE(), MONTH) AS last_day, # 月末
DATE_TRUNC(DATE_SUB(CURRENT_DATE(), INTERVAL 1 DAY), MONTH) AS first_day_of_yesterday, # 前日起算の月初
LAST_DAY(DATE_SUB(CURRENT_DATE(), INTERVAL 1 DAY), MONTH) AS last_day_of_yesterday, # 前日起算の月末
DATE_TRUNC(DATE_SUB(CURRENT_DATE(), INTERVAL 3 MONTH), MONTH) AS first_day_of_last_three_month # 3ヶ月前の月初

DATE_TRUNC, LAST_DAYが便利

WSL2でクリップボードへコピーする

Sat, 19 Mar 2022 00:00:00 GMT

WSLであれば直接Windows側のexeをたたけるので/mnt/c/...という形で直接たたける

適当にaliasに設定する（実行ファイルの場所は環境に合わせて記載する）

alias clip='/mnt/c/WINDOWS/system32/clip.exe'
alias explorer='/mnt/c/Windows/explorer.exe'

自分の環境だと上記だった

それぞれ

クリップボードへコピー
Explorerを開く

に対応している

たとえば、何かしらのコマンドの結果をクリップボードに直接コピーするといった感じの使い方ができる

$ sh hoge.sh | clip

地味に便利

クリップボードの話だけで言うとXを使って連携する方法もあるようだが常にXを起動しておくのもなーと思いこの方法を取っている

今のところ不便はしていない

JSONファイルをBigQueryに読ませJSON型で扱うためにそのままCSVで保存する

Mon, 28 Feb 2022 00:00:00 GMT

Working with JSON data in Standard SQL | BigQuery | Google Cloud

先日BigQueryでnative JSON型がプレビューでサポートされた

執筆時点ではloadはCSVしか対応していないようだったのでJSONのファイルはCSVに変換する必要がある

とりあえず使ってみるためにJSONを返すAPIのレスポンスをまるまるCSVにして突っ込んでみることにした

cat hoge.json| jq -r '[.|tostring]|@csv' > hoge.csv

schema.json

[
  {
    "mode": "NULLABLE",
    "name": "data",
    "type": "JSON"
  }
]

load

bq load --replace --source_format=CSV ${GOOGLE_PROJECT}:sample.content_text hoge.csv ./schema.json

これでJSON型を使えるようになった

1ファイル1レコードという力技だが扱う容量が多くなければこの方法でもいける

何度かSQLたたいてみたけどSTRUCTやREPEATEDなど今まで型でサポートしてくれていた部分を考慮してあげないといけない

なのでいったん特定のカラムを抜き出す工程みたいなのが必要

配列もJSON_QUERY_ARRAYを挟んであげる必要があるなどまぁそうだよなという感じ

load対象がJSONファイルで特定のキー以下をJSON型として扱うということができるようになってほしいと感じた

現状だと上記のようにひと手間かけないといけないのでデータレイク的なところから一次整形処理を挟む必要が出てくるのでまだちょっと使いづらいなーという感じ

ansible-lintの特定ルール除外方法

Fri, 25 Feb 2022 00:00:00 GMT

dotfilesのAnsibleでansible-lintを走らせているがいつの間にか失敗するようになっていたので少し調べた

エラー自体はルールが追加されたようだった

以前はID(301や201など)指定で除外していたがlintを実行しても結果にIDが見つからないのでソースを調べに行った

- name: "hoeg" # noqa 301

下記コメントにIDでの指定が非推奨というコメントを発見した

ansible-lint/constants.py at main · ansible-community/ansible-lint

今後は名前で指定していくよう

-- name: install diff-so-fancy # noqa 301
+- name: install diff-so-fancy # noqa no-changed-when

このほうがわかりやすいので良いと思います

IDでの除外指定も試してみたらまだID指定でも除外できるようなのですぐ影響はないが変えておくと良さそう

ちなみに、デフォルトのルールは下記から探すことができる

Default Rules — Ansible Lint Documentation

GitHubのコミットコメントでIssueを自動でCloseさせる

Wed, 16 Feb 2022 00:00:00 GMT

プライベートのリポジトリで、デフォルトブランチに対してfix: #numberというようにコミット時にコメントを書いてpushしたら対象Issueが自動でCloseされた

ちょっと調べてみたがデフォルトでそういう機能があるっぽい

Autolinked references and URLs - GitHub Docs

autolinkは知っていた、commitログにいつも含めてたし活用していた

Linking a pull request to an issue - GitHub Docs

closeやfixというキーワードに反応して自動で閉じてくれるのは知らなかった

デフォルトブランチのコミットログに対して発動するみたいなのでmaster直pushやPR中のコミットログをMergeしたりしたらそのタイミングでCloseされる

ドキュメントにはclose #numberとあったがfix: #numberでもクローズされたので結構マッチする範囲が広いのかな

なんにせよ便利ではあるので覚えておこうと思う

dayjsをTypeScriptで使う

Sat, 12 Feb 2022 00:00:00 GMT

コンパイルエラーで動かん!と何度か調べてたがドキュメントちゃんと読め案件だった

ドキュメント

Typescript · Day.js

なんとなく最初の方だけ読んでコピーして動かしてみたらコンパイルエラーで「なんで!!!」と言ってたがよく読んだらtsconfigの中身によって読み込み方法を変えてねと書いてあった

esModuleInteropがtrueになっている場合はimport dayjs from "dayjs"

falseの場合はimport * as "dayjs"

dayjsに関してはとりあえず毎度調べて困ることはなくなった

この辺のES ModulesとCommonJSがーっていうのとオプションの有無によるモジュール読み込み方法が変わることに対する理解は正直あまり深まっていない

いくつか記事読んでみたが説明できるほど理解できなかったのでまた別の機会で…

GitHub Projects(beta)のデータを収集する

Fri, 21 Jan 2022 00:00:00 GMT

GitHubのProjects（Beta）を使って自動化や集計をするなどしたい場合のメモ

APIの基本的な使い方に関しては下記を参照し、1つずつ実行していけばイメージはつかめる

APIを使ったプロジェクト（ベータ）の管理 - GitHub Docs

事前にProjectのIDだけ取得しメモしておく

次のクエリ一発でだいたい必要なデータは取れそう

query ($project_id: ID!) {
  node(id: $project_id) {
    ... on ProjectNext {
      items(first: 100) {
        nodes {
          title
          createdAt
          fieldValues(first: 8) {
            nodes {
              value
              createdAt
              projectField {
                name
                settings
              }
            }
          }
          content {
            ... on Issue {
              id
              number
              url
              repository {
                name
              }
              milestone {
                id
                title
              }
              createdAt
              closed
              closedAt
              assignees(first: 5) {
                nodes {
                  name
                }
              }
            }
            ... on PullRequest {
              id
              number
              url
              assignees(first: 5) {
                nodes {
                  name
                }
              }
              repository {
                name
              }
              createdAt
              closed
              closedAt
              merged
              mergedAt
              reviewRequests(first: 10) {
                nodes {
                  requestedReviewer {
                    ... on User {
                      name
                    }
                  }
                }
              }
            }
          }
          id
          updatedAt
        }
      }
    }
  }
}

project_idは事前にメモしておいた値

どのカラムが必要かなどは下記でExplorerを展開して1つずつ見ていけば把握できる

Explorer - GitHub Docs

Explorerのiframeの範囲が狭くて見づらいのがちょっと不満ではあるがそれ以外は便利に使える

カードに紐づくIssueやPullRequestなどの情報も取ってこれるのでフラットにして集計する前のデータとして使える

とりあえずプロジェクトのデータ使って云々やりたい場合はこのくらいデータが有れば十分かなと感じる

結果（一部抜粋）

{
  "data": {
    "node": {
      "items": {
        "nodes": [
          {
            "title": "timerの時刻がブラウザの負荷状況によってずれる",
            "id": "PNI_xxxxxxxxxxxxxxxxxxxx",
            "updatedAt": "2022-01-19T06:12:59Z",
            "fieldValues": {
              "nodes": [
                {
                  "value": "timerの時刻がブラウザの負荷状況によってずれる",
                  "projectField": {
                    "name": "Title",
                    "settings": "{\"width\":319}"
                  }
                },
                {
                  "value": "98236657",
                  "projectField": {
                    "name": "Status",
                    "settings": "{\"width\":125,\"options\":[{\"id\":\"xxxxxxx1\",\"name\":\"New\",\"name_html\":\"New\"},{\"id\":\"xxxxxxx2\",\"name\":\"Epic\",\"name_html\":\"Epic\"},{\"id\":\"xxxxxxx3\",\"name\":\"Idea\",\"name_html\":\"Idea\"},{\"id\":\"xxxxxxx4\",\"name\":\"Todo\",\"name_html\":\"Todo\"},{\"id\":\"xxxxxxx5\",\"name\":\"In Progress\",\"name_html\":\"In Progress\"},{\"id\":\"xxxxxxx6\",\"name\":\"Review\",\"name_html\":\"Review\"},{\"id\":\"xxxxxxx7\",\"name\":\"Done\",\"name_html\":\"Done\"}]}"
                  }
                },
                {
                  "value": "2",
                  "projectField": {
                    "name": "Point",
                    "settings": "{\"width\":69}"
                  }
                },
                {
                  "value": "2022-01-01T00:00:00+00:00",
                  "projectField": {
                    "name": "Month",
                    "settings": "null"
                  }
                },
                {
                  "value": "e9bbecfa",
                  "projectField": {
                    "name": "Iteration",
                    "settings": "{\"configuration\":{\"duration\":14,\"start_day\":1,\"iterations\":[{\"id\":\"xxxxxxa\",\"title\":\"2022-01_2\",\"duration\":14,\"start_date\":\"2022-01-17\",\"title_html\":\"2022-01_2\"},{\"id\":\"xxxxxxb\",\"title\":\"2022-02_1\",\"duration\":14,\"start_date\":\"2022-01-31\",\"title_html\":\"2022-02_1\"},{\"id\":\"xxxxxxc\",\"title\":\"2022-02_2\",\"duration\":14,\"start_date\":\"2022-02-14\",\"title_html\":\"2022-02_2\"}],\"completed_iterations\":[{\"id\":\"xxxxxxd\",\"title\":\"2022-01_1\",\"duration\":14,\"start_date\":\"2022-01-03\",\"title_html\":\"2022-01_1\"},{\"id\":\"xxxxxxe\",\"title\":\"Iteration 1\",\"duration\":7,\"start_date\":\"2021-12-27\",\"title_html\":\"Iteration 1\"}]}}"
                  }
                }
              ]
            },
            "content": {
              "id": "I_xxxxxxxxxxxxxxxx",
              "number": 56,
              "url": "https://github.com/swfz/tools/issues/56",
              "closed": true,
              "closedAt": "2022-01-20T16:27:38Z",
              "createdAt": "2022-01-19T06:12:59Z",
              "repository": {
                "name": "tools"
              },
              "milestone": null,
              "assignees": {
                "nodes": [
                  {
                    "name": "swfz"
                  }
                ]
              }
            }
          },
          .....
          .....
          .....
          .....

また、実際にこのデータを用いて何かやるなら100件以上のデータが存在することのほうが多いはずなのでページングにも対応したクエリにする必要があるが今回はここまで

Docker環境でAnsibleのget_url実行が失敗する

Mon, 10 Jan 2022 00:00:00 GMT

新しい開発環境ではAnsibleでローカル環境を作るようにしているが次のようにansibleのget_url実行に失敗してしまっていた

fatal: [localhost]: FAILED! => {"changed": false, "msg": "Failed to connect to objects.githubusercontent.com at port 443: [Errno -5] No address associated with hostname"}

名前解決ができていないという状態のようだったのでDNSサーバを指定してあげれば良い

docker-compose.yml

version: "3"
services:
  app:
    build:
      context: ./ansible
    dns:
      - 8.8.8.8

上記のようにdnsを指定することで解決した

GitHub CLIでGraphQLのオプショナルな引数を扱う

Sat, 08 Jan 2022 00:00:00 GMT

GitHubのCLIからGitHubのAPIをたたくことができる

最近知って便利でよく使っているが、GitHub CLIのオプションを使って特定のパラメータを渡す場合と渡さない場合どちらも同じGraphQLのクエリを使いたいというパターンの話

具体的に言うと件数が100件以上ある場合、GitHubのAPIだと100件が上限なので2回目以降のリクエストでendCursorの値を渡してafterに指定する必要がある

cursorの値を渡す場合と渡さない場合でもクエリは統一して扱いたい

projects.graphql

query($projectId: ID! $cursor: String){
  node(id: $projectId) {
    ... on ProjectNext {
      items(first: 100, after: $cursor) {
        pageInfo {
          hasNextPage
          endCursor
        }
        nodes{
          title
          id
          updatedAt
          fieldValues(first: 8) {
            nodes{
              value
              projectField{
                name
              }
            }
          }
        }
      }
    }
  }
}

値が必須かどうかは!をつけるかで変わる

この場合ID!となっているので$projectIdは必須パラメータ、$cursorはオプショナルなパラメータ（null許容）

実際のコマンドは下記(環境変数としてGITHUB_PROJECT_IDを定義済みの前提)

引数あり（cursor付き）

gh api graphql -f query="$(cat projects.graphql)" -f projectId=${GITHUB_PROJECT_ID} -f cursor=hogehoge

引数なし（cursorなし）

gh api graphql -f query="$(cat projects.graphql)" -f projectId=${GITHUB_PROJECT_ID}

どちらもエラーにならず結果が返ってくる

gatsbyでnode-sassの依存と戦ってたら不要になっていた

Tue, 04 Jan 2022 00:00:00 GMT

本ブログ（gatsby）でnode-sassをなんとなく使っていたがrenovateで毎度対応が必要になっていてどうしたものかなーと思っていた

Module Error (from ./node_modules/sass-loader/dist/cjs.js):
Node Sass version 7.0.1 is incompatible with ^4.0.0 || ^5.0.0 || ^6.0.0.
error Command failed with exit code 1.

毎度のごとく調べていたら次のような記事を見つけた

さらば Error: Node Sass version X.X.X is incompatible with ^X.X.X. - Qiita

なるほど!node-sassは非推奨!

gatsbyのプラグイン側ではどうしているのかということでドキュメントを見に行った

gatsby-plugin-sass | Gatsby

Gatsbyの公式でも次のように言及している

By default, the Dart implementation of Sass (sass) is used. To use the implementation written in Node (node-sass), you can install node-sass instead of sass and pass it into the options as the implementation:

デフォルトではsass（dart-sass）を使用するらしい

gatsbyのv2から使っていたので少なくともそのときはnode-sassが非推奨ではなかったのかな？

そこまで追えてないがあえてnode-sassを入れる必要はないようだ

このあたりを見てみたが、自分のプロジェクトはsassではなくnode-sassを入れていた

そしてsassは依存に入っていなかった

ドキュメントではnode-sassを使用するときは明示的に指定するようにって感じのことを書いてあった

しかし、gatsby-config.jsでオプションを何も指定していなかったとしても気を利かしてnode-sassを読んでくれていたよう

node-sass -> sass

yarn remove node-sass
yarn add sass

で解決

mswでSVGをモックする

Wed, 29 Dec 2021 00:00:00 GMT

本ブログでPixelaのグラフを表示させるようにした

表示するだけなら下記にあるようにiframeで呼び出すだけでOK

草グラフを iframe タグで簡単に埋め込む（Pixela v1.12.1） - えいのうにっき

が、Gatsbyなどで開発しているときなどは特にリクエストを外部に送る必要がないためURLを出し分けするなりモックするなどできたら良いなと思っていた

これができていればuseEffectでミスって無限ループしてしまったときなども特に心配せずに開発できる

mswを使えば外部リクエストをモックできるので行けそう?だったがiframeの中身のコンテンツのモックはできないようなのでSVGを表示する方法にする

ということでmswを使ってSVGをモックするようにしてみた

install

Install - Getting Started - Mock Service Worker Docs

基本的にはドキュメントを見て進めるでOKそう

yarn add --dev msw
mkdir src/mocks
touch src/mocks/handlers.ts

publicディレクトリに作成する

gatsbyなのでstatic/

npx msw init static/ --save

するとstatic/mockServiceWorker.jsというファイルが生成される

svgファイルをモックする

必要な修正をする

gatsby-browser.js

const startWorker = async () => {
  const { worker } = require("./src/mocks/browser")
  await worker.start({
    ServiceWorker: {
      url: "/pixela-mock",
    },
  })
}

export const onClientEntry = () => {
  if (process.env.NODE_ENV === "development") {
    startWorker()
  }
}

Gatsbyのレンダリング初期にモック処理ができるか調べてみた

Gatsbyドキュメント Doc -> Recipes ざっくりまとめ - 奇をてらったテクノロジー

[https://kiotera-tech.com/gatsby_doc_recipes_summary:embed:cite]

GatsbyのライフサイクルonClientEntryを使うことで可能っぽい

onClientEntryの処理時にstartWorkerを動かすようにした

このライフサイクルを考慮せずstartWorkerを書いてしまうとタイミングによってはモックされたりされなかったり…という現象に見舞われた

src/mocks/browser.js

// src/mocks/browser.js
import { setupWorker } from 'msw'
import { handlers } from './handler'
// This configures a Service Worker with the given request handlers.
export const worker = setupWorker(...handlers)

src/mocks/handler.ts

import { rest } from 'msw'
import svgImage from './pixela.svg'

export const handlers = [
  rest.get('https://pixe.la/v1/users/swfz/graphs/til-pageviews', async (req, res, ctx) => {
    const svgBuffer = await fetch(svgImage).then((res) => res.arrayBuffer())

    return res(ctx.status(200), ctx.body(svgBuffer))
  }),
  rest.post('https://undefined-1.algolianet.com/1/indexes/*/queries', (req, res, ctx) => {
    return res(ctx.status(200), ctx.json({results: {hits: []}}))
  })
]

svgファイルは一度curlなり何なりでローカルに持ってきて保存しておく→./pixela.svg

おまけでalgoliaへのリクエストも開発時はほとんど使わないので定義した

SVGのモック処理

svgをモックするのどうすれば良いのかと思ったが

画像と同じような感じでOKだったのでarrayBufferを使う

Possible to mock an img src url? · Issue #461 · mswjs/msw

モックできているかどうかの確認はモック用のSVGはPixelaの色を変えてからローカルに保存したのでdev用は赤、本番は青といった感じで別れている

まとめ

mswを使って開発時はpixelaへのSVGリクエストをモックして開発時はアクセスが行かないようにした

リクエスト先のURLを出し分けせずにモックできるのは非常に体験が良い

外部のサービスやツールを使っていてsandbox用とかで分けられていない場合などいろんな用途に使えそう

他にも用途いろいろありそうなので使っていこうと思った

GASでよく使いそうなスニペット

Fri, 17 Dec 2021 00:00:00 GMT

二次元配列のデータをそのままスプレッドシートに記入する

cosnt data = [
  ['a','b','c'],
  ['a','b','c'],
  ['a','b','c']
];
targetSheet.getRange(`A2:C4`).setValues(data);

2次元配列のままデータを追記できる

結構便利

ただ追記するデータとレンジが一致していないといけないので空文字で埋めたりする必要がある

エラー

cosnt data = [
  ['a','b','c'],
  ['a','b','c'],
  ['a','b']
];
targetSheet.getRange(`A2:C4`).setValues(data);

3行目のデータが1つ足りない

エラー

cosnt data = [
  ['a','b','c'],
  ['a','b','c']
];
targetSheet.getRange(`A2:C4`).setValues(data);

3行目にデータがない

Formsによるアンケートなどを集計したりする場合、列数がそろっていないことが往々にしてある

そういう場合、データの行数、各行の最大カラム数を計算して足りない分を空文字で埋める必要がある

リストから空文字を排除する

array.filter(name => name !== '')

数が合わないな?とデバッグしてみると空文字が入ってたみたいなパターン

スプレッドシートで一度でも入力があるセルは空文字になったりするのでそういうデータを除外する

要素数分だけ繰り返し処理する

要素数などを動的に取得して反復処理させたい場合など

直近だとスプレッドシートのリストからFormの項目を生成するみたいなときに使った

  const pageSize = 10;
  [...Array(pageSize)].map((_,i) => i + 1).forEach(n => {
    // 何かしら
  });

範囲データの中で最大列数を取得する

sheet.getDataRange().getValues().reduce((acc, cur) => cur.filter(name => name !== '').length > acc ? cur.filter(name => name !== '').length : acc, 0);

列数が動的な場合に最大値を取得してそれをカバーできるようにデータを整形するときに使う

対象データ範囲の中からユニークなリストを取得する

スプレッドシートのデータをRangeで取得すると2次元配列になっている

flatにしてSet型でユニークな値のリストを取得する

[...new Set(sheet.getDataRange().getValues().flat().filter(name => name !== ''))];

gh cliでCodespace上のインスタンスにファイルをコピーする

Tue, 07 Dec 2021 00:00:00 GMT

やりたい機会があったので調べてみた

Using Codespaces with GitHub CLI - GitHub Docs

ドキュメントを見れば解決ではある

ファイルのコピー

$ gh codespace cp -e ~/memo/hoge.png 'remote:/workspaces/til/'
? Choose codespace: swfz/til: master* [swfz-til-xxxxxxxxxxxx]
hoge.png                                                                                                      100%   51KB 220.8KB/s   00:00

どのcodespaceに接続するか選択する、もしくは事前に調べておいて-cオプションで指定する

gh_codespace_cp01.png

-eはヘルプを見れば分かるがexpand

”で囲った中身をremote側で展開するためのもの

なので↑のような書き方になっている

GitHubのCLIが使えればOKなのでWSL2の中から特定のファイルをコピーする、といった使い方もできる

SSH接続

sshもできる

$ gh codespace ssh -c swfz-til-xxxxxxxxxxxx

-cで対象のcodespaceを指定しない場合はインタラクティブに選択させてくれる

VS Codeのターミナルだと一部ショートカットが競合してしまったりすることがあるのでSSH接続していろいろやったほうが何も気にしなくてよいこともある

おわり

あらためてGitHubのCLI便利だな!と感じた

VS Codeのターミナルプロファイル設定

Tue, 30 Nov 2021 00:00:00 GMT

前提のバージョン情報

バージョン: 1.62.3 (user setup)
コミット: ccbaa2d27e38e5afa3e5c21c1c7bef4657064247
日付: 2021-11-17T08:11:14.551Z
Electron: 13.5.2
Chrome: 91.0.4472.164
Node.js: 14.16.0
V8: 9.1.269.39-electron.0
OS: Windows_NT x64 10.0.19041

settings.json

    "terminal.integrated.shell.linux": "/usr/local/bin/tmux",

上記のようにlinuxの場合はdefaultでtmuxを起動させたかったのでそういう設定をしていた

が、設定ファイル上で下線が出ていた

と出てきた

Integrated Terminal in Visual Studio Code

へ遷移すると

profilesを設定してdefaultProfileで指定するようにしてねとのこと

直接指定する方法はそのうちなくなるようなので変更した

    "terminal.integrated.defaultProfile.linux": "tmux",
    "terminal.integrated.profiles.osx": {
        "tmux": {
            "path": "tmux"
        }
    },
    "terminal.integrated.profiles.linux": {
        "zsh_login": {
          "path": "zsh",
          "args": ["-l"]
        },
        "tmux": {
            "path": "tmux"
        }
    },

ディストリビューションが違う場合はデフォルトも変えられる（osx, linux, Windows）、今の所WSL2とCodespaceはlinuxなのでCodespaceの方は個別スペースの設定をいじってzsh_loginを適用させている（tmuxが入っていない場合があるため）

NotionのAPIでページにコンテンツを追加する

Wed, 24 Nov 2021 00:00:00 GMT

ページにコンテンツ（block）を追加する

pageエンドポイントに対してリクエストするのかと思っていたけど

公式ドキュメントに

Block object

A block object represents content within Notion. Blocks can be text, lists, media, and more. A page is a type of block, too!

とありページもブロックと同等に扱うとあった

なるほど、だからblockのエンドポイントしかみつからなかったのか

ドキュメントのblock_idをpage_idに置き換えてAPIをたたくとpage直下のコンテンツにテキストを追加できるという感じ

ほとんど公式と一緒だがとりあえずサンプル

append.sh

#!/bin/bash

page_id="dummy_page_id"
text="hello world"

curl -X PATCH "https://api.notion.com/v1/blocks/${page_id}/children" \
  -H 'Authorization: Bearer '"$NOTION_API_KEY"'' \
  -H "Content-Type: application/json" \
  -H "Notion-Version: 2021-08-16" \
  --data @- <<EOS
{
  "children": [
  {
    "object": "block",
    "type": "paragraph",
    "paragraph": {
      "text": [{"type": "text", "text": {"content": "Hi! Text ${text}"}}]
    }
  }]
}
EOS

Notion上でテキストが追加されたことを確認できた

ある程度触ってみたけど割と扱いやすい気がしてきた

CentOS7でAnsible実行時にCERTIFICATE_VERIFY_FAILED

Wed, 10 Nov 2021 00:00:00 GMT

CentOS7のイメージ中でAnsibleを使ってget_urlでGitをソースからインストールしている処理があったがそこで問題が発生していた

fatal: [localhost]: FAILED! => {"changed": false, "dest": "/tmp/git-2.33.0.tar.gz", "elapsed": 0, "msg": "Request failed: <urlopen error [SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed (_ssl.c:618)>", "url": "https://www.kernel.org/pub/software/scm/git/git-2.33.0.tar.gz"}

証明書関連かーというのはすぐ分かるが、じゃどうすれば良いのってことで

Ansibleだとrequestsかcertificateモジュールを更新すればよいのかと思って更新してみたものの解決されず

証明書リストを追加すればOK?みたいな感じで探していたら次の記事に助けられた

Let’s EncryptのルートCA期限切れで OpenSSL 1.0.2が思わぬ事故を起こす件 | ワルブリックス株式会社

www.kernel.orgを見に行ったらLet’s EncryptとISRG Root X1の組み合わせだった

最新のOSバージョンでは解決しているとのことだったので今一度更新してから試そうとしてみた

dockerでイメージビルドするときは最新を指定してたはずなのでどうかなと思ったもののいったんyum updateで更新して試してみた

$ yum update
===============================================================================================================================================================================
 Package                                       Arch                              Version                                              Repository                          Size
===============================================================================================================================================================================
Updating:
 bind-license                                  noarch                            32:9.11.4-26.P2.el7_9.7                              updates                             91 k
 ca-certificates                               noarch                            2021.2.50-72.el7_9                                   updates                            379 k
 centos-release                                x86_64                            7-9.2009.1.el7.centos                                updates                             27 k
 coreutils                                     x86_64                            8.22-24.el7_9.2                                      updates                            3.3 M
 device-mapper                                 x86_64                            7:1.02.170-6.el7_9.5                                 updates                            297 k
 device-mapper-libs                            x86_64                            7:1.02.170-6.el7_9.5                                 updates                            325 k
 epel-release                                  noarch                            7-14                                                 epel                                15 k
 glib2                                         x86_64                            2.56.1-9.el7_9                                       updates                            2.5 M
 glibc                                         x86_64                            2.17-325.el7_9                                       updates                            3.6 M
 glibc-common                                  x86_64                            2.17-325.el7_9                                       updates                             12 M
 glibc-devel                                   x86_64                            2.17-325.el7_9                                       updates                            1.1 M
 glibc-headers                                 x86_64                            2.17-325.el7_9                                       updates                            691 k
 kernel-headers                                x86_64                            3.10.0-1160.45.1.el7                                 updates                            9.0 M
 kpartx                                        x86_64                            0.4.9-135.el7_9                                      updates                             81 k
 libblkid                                      x86_64                            2.23.2-65.el7_9.1                                    updates                            183 k
 libmount                                      x86_64                            2.23.2-65.el7_9.1                                    updates                            185 k
 libsmartcols                                  x86_64                            2.23.2-65.el7_9.1                                    updates                            143 k
 libuuid                                       x86_64                            2.23.2-65.el7_9.1                                    updates                             84 k
 nspr                                          x86_64                            4.32.0-1.el7_9                                       updates                            127 k
 nss                                           x86_64                            3.67.0-3.el7_9                                       updates                            882 k
 nss-softokn                                   x86_64                            3.67.0-3.el7_9                                       updates                            358 k
 nss-softokn-freebl                            x86_64                            3.67.0-3.el7_9                                       updates                            337 k
 nss-sysinit                                   x86_64                            3.67.0-3.el7_9                                       updates                             66 k
 nss-tools                                     x86_64                            3.67.0-3.el7_9                                       updates                            549 k
 nss-util                                      x86_64                            3.67.0-1.el7_9                                       updates                             79 k
 openldap                                      x86_64                            2.4.44-24.el7_9                                      updates                            356 k
 python                                        x86_64                            2.7.5-90.el7                                         updates                             96 k
 python-libs                                   x86_64                            2.7.5-90.el7                                         updates                            5.6 M
 rpm                                           x86_64                            4.11.3-46.el7_9                                      updates                            1.2 M
 rpm-build-libs                                x86_64                            4.11.3-46.el7_9                                      updates                            108 k
 rpm-libs                                      x86_64                            4.11.3-46.el7_9                                      updates                            279 k
 rpm-python                                    x86_64                            4.11.3-46.el7_9                                      updates                             84 k
 sudo                                          x86_64                            1.8.23-10.el7_9.2                                    updates                            843 k
 systemd                                       x86_64                            219-78.el7_9.3                                       updates                            5.1 M
 systemd-libs                                  x86_64                            219-78.el7_9.3                                       updates                            418 k
 tzdata                                        noarch                            2021c-1.el7                                          updates                            502 k
 util-linux                                    x86_64                            2.23.2-65.el7_9.1                                    updates                            2.0 M
 vim-minimal                                   x86_64                            2:7.4.629-8.el7_9                                    updates                            443 k

Transaction Summary
===============================================================================================================================================================================
Upgrade  38 Packages

このあとでのansible実行は問題なく実行できた

ということでこの中のどれかのパッケージを更新すれば問題なさそうという感じ

ca-certificatesかな?CA証明書のリスト

ということでca-certificatesのみlatestにするようなAnsibleを書いて再実行したところ無事成功した

※参考の記事中にもよく読んだらca-certificateパッケージを上げると書いてあった

パッケージすべてlatestだと勝手に更新されて失敗してしまったりしたら困るよねっていう認識だったが逆にlatestのほうが良いものもあるんだなというのが今回の気付きでした

最近ちょいちょいこのパータンにはまっている気がするので残しておく

GoogleAppsScriptのスケジュール実行をコードで表現する

Wed, 03 Nov 2021 00:00:00 GMT

GASのコードをGit管理するならスケジューリング設定などもGit管理したい

GAS自体にTriggerを設定する関数が存在するのでそれを使ってコードを書けば初回は手動実行になってしまうが一応管理することが可能

ということで調べた

変更がある場合スケジューリングの作り直しになるのでどちらにしても既存のスケジュールの手動削除が必要そう

まぁこういうスケジュールを設定していますっていうのをコードに残しておくという意味ではメリットがあるくらいだがやらないよりは良いかなって感じ

スケジュールでのTriggerBuilderのドキュメントは下記

Class ClockTriggerBuilder | Apps Script | Google Developers

結局今回はこんな感じにした

良くある毎日9:30に実行しますって感じのやつ

Code.js

function setScheduleTrigger() {
  ScriptApp.newTrigger('mainFunction').timeBased().atHour(9).nearMinute(30).everyDays(1).inTimezone("Asia/Tokyo").create();
}

mainFunctionはスケジュールで実行させたい関数名

nearMinute

ドキュメントから引用

トリガーが実行される分を指定します（プラスまたはマイナス15分）。 nearMinute（）が呼び出されない場合、ランダムな分の値が使用されます。

とのこと

なのでこの記述だと

毎日9:15~9:45の間に実行するというようなスケジュールトリガーをセットする

完全に固定はできないみたい

inTimezone

スクリプトのタイムゾーンがデフォルトだが指定もできる

DataPortalでDatetime的な文字列から10秒ごと、30秒ごと、分ごとの値を計算する

Sat, 23 Oct 2021 00:00:00 GMT

seconds

2021-10-15 03:04:30

分ごと

FORMAT_DATETIME("%Y-%m-%d %H:%M:00", seconds)

10秒ごと

CONCAT(FORMAT_DATETIME("%Y-%m-%d %H:%M:", seconds), SUBSTR( FORMAT_DATETIME("%S", seconds),1,1),"0")

30秒ごと

CONCAT(FORMAT_DATETIME("%Y-%m-%d %H:%M:", seconds), IF(SECOND(seconds) > 30, "30", "00"))

albのログから秒数ごとのサーバの状況を把握したいパターンがあったので頑張った

別途SQLでよしなに頑張るものの頑張った後は上記のようにpivotの行を計算フィールドとして設定する

分以下の細かな粒度でどのリクエストがいつ始まっていつ終わったか、ステータスコードは何かみたいなのがさっと閲覧できるようになった

レコードが多すぎるとかなり重くなるので気を付ける必要はある

ここまでやっておいて、この辺はAPM入れたほうが良さそうな気もしてきた

VS Code Remote WSLが起動しない

Thu, 14 Oct 2021 00:00:00 GMT

PCをセットアップし直してWSLも入れ直していざVS Codeを起動したらWSLに接続できなかった

エラーログ

[2021-10-08 17:49:31.526] Resolving wsl+Ubuntu, resolveAttempt: 1
[2021-10-08 17:49:31.649] Starting VS Code Server inside WSL (Ubuntu)
[2021-10-08 17:49:31.649] Extension version: 0.58.2, Windows build: 19041. Multi distro support: available. WSL path support: enabled
[2021-10-08 17:49:31.650] No shell environment set or found for current distro.
[2021-10-08 17:49:31.887] Probing if server is already installed: C:\Windows\System32\wsl.exe -d Ubuntu -e sh -c "[ -d ~/.vscode-server/bin/69755771804a4f5097277cbbb50dff67 ] && printf found || ([ -f /etc/alpine-release ] && printf alpine-; uname -m)"
[2021-10-08 17:49:32.000] Unable to detect if server is already installed: Error: Command failed: C:\Windows\System32\wsl.exe -d Ubuntu -e sh -c "[ -d ~/.vscode-server/bin/69755771804a4f5097277cbbb50dff67 ] && printf found || ([ -f /etc/alpine-release ] && printf alpine-; uname -m)"
[2021-10-08 17:49:32.000] 指定されたファイルが見つかりません。
[2021-10-08 17:49:32.000] 
[2021-10-08 17:49:32.001] Launching C:\Windows\System32\wsl.exe -d Ubuntu sh -c '"$VSCODE_WSL_EXT_LOCATION/scripts/wslServer.sh" 69755771804a4f5097277cbbb50dff67 stable .vscode-server 0  '}
[2021-10-08 17:49:32.080] 
[2021-10-08 17:49:32.081] VS Code Server for WSL closed unexpectedly.
[2021-10-08 17:49:32.082] For help with startup problems, go to
[2021-10-08 17:49:32.082] https://code.visualstudio.com/docs/remote/troubleshooting#_wsl-tips
[2021-10-08 17:49:32.102] WSL Daemon exited with code 0

一部文字化けしていたので該当箇所は削除した

使用しているWSLのディストリビューションがデフォルトでなくなってしまっていた模様

Developing in the Windows Subsystem for Linux with Visual Studio Code

現在使っているのはUbuntu-20.04

確認してみる

> wslconfig /l
Linux 用 Windows サブシステム ディストリビューション:
Ubuntu (既定)
docker-desktop
Ubuntu-20.04
docker-desktop-data

> wslconfig /setdefault Ubuntu-20.04

> wslconfig /l
Linux 用 Windows サブシステム ディストリビューション:
Ubuntu-20.04 (既定)
Ubuntu
docker-desktop
docker-desktop-data

UbuntuのディストリビューションはPC移行以前に使っていたが新しいPCにWSLのデータを移行できなかったので起動できなかったと推測できる

VS CodeのRemote WSLではデフォルトのディストリビューションに接続する仕様なのでホスト側でデフォルトのWSLのディストリビューションを決めてあげる必要がある

無事VS CodeでRemoteWSL拡張が使えるようになった

tmuxで新規window/paneを起動したときの設定

Sun, 10 Oct 2021 00:00:00 GMT

開発環境を作り直すことになってしまったので作り直していたらいくつか不具合にぶつかったのでそのうちの1つのメモ

新たに起動したセッションをzshで起動したかったが起動せずbashで起動される状態になってしまった

書いたときのバージョン

Ubuntu: 20.04
tmux: 3.2a

デフォルトのシェルはzshなのになぜ…と調べてみると

同じ人が大勢いたよう

zsh - How can I make tmux use my default shell? - Super User

↑に解決方法が載っていた

tmux.conf

set-option -g default-shell $SHELL

いつからかこのオプションを指定しないといけないようになったのかとは思うものの明示的に指定しておいたほうが良いのは確かなので設定を追加した

Windows TerminalでWSL(Ubuntu)の初期ディレクトリの指定

Sat, 09 Oct 2021 00:00:00 GMT

WSLでデフォルトのディレクトリ指定をする

書いた時点での環境

Windows Terminal(Preview): 1.8.1032.0

WSLのprofile設定の中のcommandlineで~を指定すればOK

wsl.exeの後に開始ディレクトリを指定できる

{
  "commandline": "wsl.exe ~ -d Ubuntu-20.04",
  "startingDirectory": null
}

~なしだとWindowsTerminal側の設定が有効になるのかな

上記設定だと親プロセスディレクトリの使用にチェックが付き、自分の環境だとWindows側のディレクトリになった/mnt/c/Windows/System32

これで解決！

参考

Windows Terminalをカスタマイズしよう！(v1.0.1401.0版) - Qiita

GitHubのコントリビュート一覧に飛ぶためのブックマークレット

Sat, 25 Sep 2021 00:00:00 GMT

以前Twitterで採用などでGitHubアカウントもらったらこのクエリでコントリビューションみますねみたいなのを見かけた

とりあえずそのうち見るときのためにタブをそのままにしていたが、いろいろな人のも見られるとおもしろいかもと思ってブックマークレットを書いた

ユーザーページもしくは対象ユーザーのどこかのリポジトリなど、ユーザー名がURLに存在すれば実行可能

github_contribute.js

(function(){
  const user = window.location.href.split("/")[3];
  const excludeOrgs = [];
  const w = window.open();
  const excludeOrgQuery = excludeOrgs.map(o => `-org%3A${o}`).join('+');
  w.location.href = `https://github.com/pulls?q=involves%3A${user}+-user%3A${user}+${excludeOrgQuery}`;
})()

ブックマークバーへの貼り付け用出力

$ cat github_contribute.js |  sed -e ':loop;N;$!b loop;s/\n/ /g' -e 's/ \+/%20/g' -e 's/^/javascript:/'
javascript:(function(){%20const%20user%20=%20window.location.href.split("/")[3];%20const%20excludeOrgs%20=%20[];%20const%20w%20=%20window.open();%20const%20excludeOrgQuery%20=%20excludeOrgs.map(o%20=>%20`-org%3A${o}`).join('+');%20w.location.href%20=%20`https://github.com/pulls?q=involves%3A${user}+-user%3A${user}+${excludeOrgQuery}`;%20})()

excludeOrgsは自分が所属している組織へのPRやissueは除外するための記述

GitHubで仕事の開発している場合は対象組織のPRなども表示されてしまうのでその除外

感想としては自分はあんまりコントリビュートできてません!ということがわかりました。まる。

ConfluenceにAPI経由で投稿する

Sat, 18 Sep 2021 00:00:00 GMT

下準備

アカウント管理ページでAPIトークンを作成する

api-tokens

APIをたたく

参考にするのはこの辺

The Confluence Cloud REST API

基本系

curl -X GET "https://${ATLASSIAN_DOMAIN}/wiki/rest/api/content" \
  -u "${EMAIL}:${CONFLUENCE_API_TOKEN}" \
  -H 'Accept: application/json'

上記をもとにブログポストを生成するスクリプトを用意した

CONFLUENCE_API_TOKEN,ATLASSIAN_DOMAIN,EMAILは環境変数に適切な値を入れておく

CONFLUENCE_API_TOKENは下準備で生成したAPIトークン

最低限だとこんな感じで投稿できるはず

blogpost.sh

title="From API Test"
space_key="~username"
body_value="hoge"

curl -X POST "https://${ATLASSIAN_DOMAIN}/wiki/rest/api/content" \
  -u "${EMAIL}:${CONFLUENCE_API_TOKEN}" \
  -H 'Content-Type: application/json' \
  -H 'Accept: application/json' \
  -d @- <<EOS
{
  "title": "${title}",
  "type": "blogpost",
  "space": {
    "key": "${space_key}"
  },
  "status": "current",
  "body": {
    "storage": {
      "value": "${body_value}",
      "representation": "storage"
    }
  }
}
EOS

試行錯誤

最初body.storageの部分をbody.viewにしていたら投稿はできるがコンテンツが空の状態になってしまっていた

ライブラリはどうやってんだと思い次のソースをよんだ

confluence-api/confluence.js at master · johnpduane/confluence-api

[https://github.com/johnpduane/confluence-api/blob/master/lib/confluence.js:embed:cite]

{
  "title": "${title}",
  "type": "blogpost",
  "space": {
    "key": "${space_key}"
  },
  "status": "current",
  "body": {
-    "view": {
+    "storage": {
      "value": "${body_value}",
-      "representation": "view"
+      "representation": "storage"
    }
  }
}

こんな感じの差分で投稿できるようになった

representationが何を意味するのかまでちゃんと読んでないが無事コンテンツの中身も反映されるようになった

APIでのやりとりではHTMLをそのまま投げるという感じ

markdown2confluenceなど使えばMarkdownで書いた文書をコンフルに同期とかできるかと思ったけどそもそも記法が違うので今回は使わなかった

更新を伴う投稿

新規投稿ならPOSTだけでOKだが更新処理を含める場合はversion番号が必要なため複数APIをたたかないといけない

jsonで定義した値をフォーマットして定期的に更新するスクリプトを書いた

scrap.json

[
  "リプレイスとかバージョンアップとかの記事",
  "https://blog.cybozu.io/entry/2021/06/16/080000",
  "https://developers.cyberagent.co.jp/blog/archives/30257/",
  "https://buildersbox.corp-sansan.com/entry/2021/06/24/110000",
  "comment: リプレイスとかやりました！その後の話は結構ありかも",
  "エンジニアブログ系",
  "https://tech.classi.jp/entry/2021/06/18/120000",
  "comment: こんな感じで運営してますってのは運営の価値観が垣間見れてよい、他のも見てみたい感ある",
  "https://tech.pepabo.com/2021/07/14/pepabo-tech-blog-2021/",
  "comment: ブログの執筆ふろーの自動化周りの話と思想、おもしろい"
]

scrap.js

const fetch = require('node-fetch');
const fs = require('fs');

const pageId = 1111111111;

const formatTitle = (value) => {
  return `<p><h2>${value}</h2></p>`;
}

const formatLink = (url) => {
  return `<p><a href=\"${url}\" data-card-appearance=\"inline\">${url}</a></p>`;
}

const formatComment = (value) => {
  return `<p>${value}</p>`;
}

const generateBody = () => {
  const scraps = JSON.parse(fs.readFileSync('./scrap.json'));
  console.log(scraps)

  return scraps.map((line)=> {
    if (line.match('http')) {
      return formatLink(line)
    }
    if (line.match('comment:')) {
      return formatComment(line)
    }

    return formatTitle(line);
  }).join("\n");
}

const authString = () => {
  const username = process.env.EMAIL;
  const token = process.env.CONFLUENCE_API_TOKEN;
  const buffer = Buffer.from(`${username}:${token}`);

  return buffer.toString('base64');
}

const putText = async (authString, pageId, versionNumber) => {
  const title = '記事スクラップ'
  const spaceKey = '~username';
  const type = 'page';

  const bodyData = {
    "version": {
      "number": versionNumber
    },
    "title": title,
    "type": type,
    "id": pageId,
    "space": {
      "key": spaceKey
    },
    "status": "current",
    "body": {
      "storage": {
        "value": generateBody(),
        "representation": "storage"
      },
    }
  };

  const res = await fetch(`https://${process.env.ATLASSIAN_DOMAIN}/wiki/rest/api/content/${pageId}`, {
    method: 'PUT',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
      'Authorization': `Basic ${authString}`
    },
    body: JSON.stringify(bodyData)
  });

  return await res.json();
}

const getVersion = async (authString, pageId) => {
  const res = await fetch(`https://${process.env.ATLASSIAN_DOMAIN}/wiki/rest/api/content/${pageId}?expand=version`, {
    method: 'GET',
    headers: {
      'Accept': 'application/json',
      'Authorization': `Basic ${authString}`
    }
  });

  return await res.json();
}

(async () => {
  const versionResponse = await getVersion(authString(), pageId);
  const putResponse = await putText(authString(), pageId, versionResponse.version.number + 1);
  console.log(putResponse);
})

spaceKey,pageIdは環境によって記述を変える必要がある

さっと書いたのでいろいろ考慮足りない部分もあるが投稿までのしくみはこんな感じでOKそう

AWSの請求書の金額と同じ値を取得するためのワンライナー

Wed, 08 Sep 2021 00:00:00 GMT

AWSのサービスの料金と同じ値を出す

last_month=2021-08-01
this_month=2021-09-01
aws ce get-cost-and-usage --granularity MONTHLY --metrics UnblendedCost --region us-east-1  --time-period Start=${last_month},End=${this_month}| jq -r '.ResultsByTime[0].Total.UnblendedCost.Amount' | xargs printf '%.2f'

で、8月分のAWSサービス料金が取得できる

get-cost-and-usage

コストエクスプローラで閲覧できる値をCLIからたたける

ドキュメントは下記

get-cost-and-usage — AWS CLI 1.20.36 Command Reference

気を付けるのはregionがus-east-1で固定なことくらい

bashで小数点第2位で四捨五入する

printfはCの書式でフォーマットを記述する

$ printf '%.2f' 2.222
2.22
$ printf '%.2f' 2.225
2.23

四捨五入なら上記でOK

pipeで受け取った値をprintfする

$ echo -n 2.225 | xargs printf '%.2f'
2.22

ん?…

$ echo 2.2251 | xargs printf '%.2f'
2.23
$ echo 2.2250000000 | xargs printf '%.2f'
2.22
$ echo 2.22500000001 | xargs printf '%.2f'
2.23

printfだと精度の問題があるみたい

小数点第2位で四捨五入するパターンの場合

小数点第3位がちょうど5の場合は期待する値にならない

なので別の方法を検討する必要がある

が、今回はcliで取得できる値を見た感じこの減少にほぼ当たらないだろうと判断してこのままやることにした

Lambdaのソースコード差分を取得する

Sun, 05 Sep 2021 00:00:00 GMT

プロダクションとステージングでコード差分がーとかそういうのを検知する目的でスクリプトを書いてた

そういえばこんなものも書いたなと言うことで供養がてら残しておく

lambda-diff

#!/bin/bash

# lambda-diff profile FunctionName1 FunctionName2

get_lambda_zip(){
  curl -o /tmp/$2.zip `aws --profile=$1 lambda get-function --function-name $2 | jq -r '.Code.Location'`
}

unzip_lambda_code(){
  unzip -p /tmp/$1.zip | cat -
}

get_lambda_zip $1 $2
get_lambda_zip $1 $3

diff -u -w <(unzip_lambda_code $2) <(unzip_lambda_code $3)

ファイルが複数存在する場合の考慮はしていない（できるかもためしていない）

Nodeだとindex.jsだけで完結する場合に差分を検出できる

Lambdaの設定差分だけであればコマンド一発で書ける（当時は自動化するためにスクリプト化してた）

lambda-config-diff

#!/bin/bash

# lambda-config-diff profile FunctionName1 FunctionName2

diff -u -w <(aws --profile=$1 lambda get-function-configuration --function-name $2) <(aws --profile=$1 lambda get-function-configuration --function-name $3)

このスクリプトを定期的に実行して差分があればメールなりSlackなりに通知したりして差分が出た!みたいなのを検知できる

Python環境でencode系のエラーが出たときの対応例

Mon, 16 Aug 2021 00:00:00 GMT

Dockerコンテナのビルド時にpip3 install ansible ansible-lint yamllintコマンド実行時、次のようなエラーが出た

ERROR: Exception:
Traceback (most recent call last):
  File "/usr/local/lib/python3.6/site-packages/pip/_internal/cli/base_command.py", line 173, in _main
    status = self.run(options, args)
  File "/usr/local/lib/python3.6/site-packages/pip/_internal/cli/req_command.py", line 203, in wrapper
    return func(self, options, args)
  File "/usr/local/lib/python3.6/site-packages/pip/_internal/commands/install.py", line 316, in run
    reqs, check_supported_wheels=not options.target_dir
  File "/usr/local/lib/python3.6/site-packages/pip/_internal/resolution/resolvelib/resolver.py", line 95, in resolve
    collected.requirements, max_rounds=try_to_avoid_resolution_too_deep
  File "/usr/local/lib/python3.6/site-packages/pip/_vendor/resolvelib/resolvers.py", line 472, in resolve
    state = resolution.resolve(requirements, max_rounds=max_rounds)
  File "/usr/local/lib/python3.6/site-packages/pip/_vendor/resolvelib/resolvers.py", line 366, in resolve
    failure_causes = self._attempt_to_pin_criterion(name)
  File "/usr/local/lib/python3.6/site-packages/pip/_vendor/resolvelib/resolvers.py", line 212, in _attempt_to_pin_criterion
    criteria = self._get_updated_criteria(candidate)
  File "/usr/local/lib/python3.6/site-packages/pip/_vendor/resolvelib/resolvers.py", line 203, in _get_updated_criteria
    self._add_to_criteria(criteria, requirement, parent=candidate)
  File "/usr/local/lib/python3.6/site-packages/pip/_vendor/resolvelib/resolvers.py", line 172, in _add_to_criteria
    if not criterion.candidates:
  File "/usr/local/lib/python3.6/site-packages/pip/_vendor/resolvelib/structs.py", line 151, in __bool__
    return bool(self._sequence)
  File "/usr/local/lib/python3.6/site-packages/pip/_internal/resolution/resolvelib/found_candidates.py", line 140, in __bool__
    return any(self)
  File "/usr/local/lib/python3.6/site-packages/pip/_internal/resolution/resolvelib/found_candidates.py", line 128, in <genexpr>
    return (c for c in iterator if id(c) not in self._incompatible_ids)
  File "/usr/local/lib/python3.6/site-packages/pip/_internal/resolution/resolvelib/found_candidates.py", line 32, in _iter_built
    candidate = func()
  File "/usr/local/lib/python3.6/site-packages/pip/_internal/resolution/resolvelib/factory.py", line 209, in _make_candidate_from_link
    version=version,
  File "/usr/local/lib/python3.6/site-packages/pip/_internal/resolution/resolvelib/candidates.py", line 301, in __init__
    version=version,
  File "/usr/local/lib/python3.6/site-packages/pip/_internal/resolution/resolvelib/candidates.py", line 156, in __init__
    self.dist = self._prepare()
  File "/usr/local/lib/python3.6/site-packages/pip/_internal/resolution/resolvelib/candidates.py", line 227, in _prepare
    dist = self._prepare_distribution()
  File "/usr/local/lib/python3.6/site-packages/pip/_internal/resolution/resolvelib/candidates.py", line 306, in _prepare_distribution
    self._ireq, parallel_builds=True
  File "/usr/local/lib/python3.6/site-packages/pip/_internal/operations/prepare.py", line 508, in prepare_linked_requirement
    return self._prepare_linked_requirement(req, parallel_builds)
  File "/usr/local/lib/python3.6/site-packages/pip/_internal/operations/prepare.py", line 552, in _prepare_linked_requirement
    self.download_dir, hashes
  File "/usr/local/lib/python3.6/site-packages/pip/_internal/operations/prepare.py", line 249, in unpack_url
    unpack_file(file.path, location, file.content_type)
  File "/usr/local/lib/python3.6/site-packages/pip/_internal/utils/unpacking.py", line 256, in unpack_file
    untar_file(filename, location)
  File "/usr/local/lib/python3.6/site-packages/pip/_internal/utils/unpacking.py", line 226, in untar_file
    with open(path, "wb") as destfp:
UnicodeEncodeError: 'ascii' codec can't encode character '\xe9' in position 117: ordinal not in range(128)
Service 'centos' failed to build : The command '/bin/sh -c pip3 install ansible ansible-lint yamllint' returned a non-zero code: 2

encoding指定が必要な模様

PYTHONENCODINGで文字コード指定するという記事もあったがそちらの方法ではうまく行かず…

次の記事を参考に環境変数を指定するようにした

PythonのUnicodeDecodeErrorの対処方法 - Python入門

LC_ALL=en_US.UTF-8 pip3 install ansible ansible-lint yamllint

で無事ビルドできるようになった

yqがバージョンアップで構文変更された

Sun, 15 Aug 2021 00:00:00 GMT

とある自動化プロセス上で次のようなエラーが発生していた

Error: unknown command "r" for "yq"

yqのバージョンが4に上がって構文が変わったみたい

よりjqの構文に近い書き方へ変わったとのこと

たしかにv3のときはちょっと書いていて違和感あったのでよさそう

従来のバージョンとの比較があるので移行は難しくないだろう

参考

Upgrading from V3 - yq

ドキュメント

yq - yq

GitHubActionsのworkflowファイルで実際に変更したときの差分

actions.yml

-          got=`yq r ./ansible/versions_vars.yml ${{ matrix.role.name }}_version`
+          got=`yq e .${{ matrix.role.name }}_version ./ansible/versions_vars.yml`
           latest=`./.github/workflows/bin/latest-version-${{ matrix.role.type }}.sh ${{ matrix.role.repo }}`

           echo ::set-output name=got::$got
@@ -60,7 +60,8 @@ jobs:

           if [[ "$got" != "$latest" ]]; then
             echo "found ahead versions"
-            yq w -i ./ansible/versions_vars.yml ${{ matrix.role.name }}_version $latest
+            yq e ".${{ matrix.role.name }}_version=\"$latest\"" ./ansible/versions_vars.yml > versions.yml
+            cp versions.yml ./ansible/versions_vars.yml

JavaScriptの分割代入

Thu, 12 Aug 2021 00:00:00 GMT

分割代入 - JavaScript | MDN

連想配列

できるのは知ってたけどGatsbyのチュートリアル動画を見てたら下記のような代入をしていてなるほどとなったのでメモ

> const response = {code: 200, body: {name: 'hoge', id: 1}}
undefined
> response
{ code: 200, body: { name: 'hoge', id: 1 } }
> const { name } = response.body
undefined
> name
'hoge'

// 下記と同様
> const name2 = response.body.name
undefined
> name2
'hoge'

例のパターンだとどちらでも良いといえば良いが多少スッキリする

また、複数代入したいみたいなときは有効かなと感じる

> const {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
undefined
> a
10
> b
20
> rest
{ c: 30, d: 40 }

...restで残りの連想配列も代入できるのが地味に良い

配列

> const [a, b, ...rest] = [10, 20, 30, 40, 50];
undefined
> a
10
> b
20
> rest
[ 30, 40, 50 ]

こちらも...restで残りの要素を代入できる

直近だとGoogleFormsの解答結果を集計する際に相性が良かった

スプレッドシートのデータ扱う場合は基本的に2次元配列であることと、A列のデータは○、B列のデータは△みたいに固定になっていることが多いのでそれを分割代入で代入してよしなにやるパターンでサッと書ける

便利さを実感したので今後意識しておこうと思った

GoogleAppsScriptでリストの変換作業を行う

Wed, 04 Aug 2021 00:00:00 GMT

完全に事例なのであまり流用できなそうな気がするけど残しておく

管理職的なことを始めるとこういうのをサクッとかけると割と便利そう

対象を選定する場合は上の表で、展開するときは下の表が見やすいよねっていう感じ

こういう表を

x	x	被評価者	評価者1	評価者2	評価者3	評価者4
x	x	A	B	C
x	x	B	A	C
x	x	C	A	B	D	E
x	x	D	A
x	x	E	B	C

こういう感じに変換するGASスクリプトを書いた

評価者	被評価者1	被評価者2	被評価者3
B	A	C	E
C	A	B	E
A	B	C	D
D	C
E	C

Code.js

function convertEvaluatorList(acc, curLine) {
  const [target, ...evaluators] = curLine;

  evaluators.filter(name => name !== '').forEach(evaluator => {
    const targetLine = acc.find(line => line[0] === evaluator);
    if(targetLine === undefined) {
      acc.push([evaluator, target]);
    }
    else {
      targetLine.push(target)
    }
  });

  return acc;
}
function myFunction() {
  // config ================================================================
  const masterSheetName = 'シート1';
  const convertSheetName = 'シート2';
  const startColumnNumber = 2; // C = 2
  const startRowNumber = 1; // 2 - 1 = 1
  // config ================================================================

  const columns = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const masterSheet = ss.getSheetByName(masterSheetName);

  const convertedList = masterSheet.getDataRange().getValues().slice(startRowNumber).map(line => line.slice(startColumnNumber)).reduce(convertEvaluatorList, []);

  const maxColumns = convertedList.reduce((acc, lines) => Math.max(acc, lines.length), 0);

  const filledList = convertedList.map(lines => {
    const fillNum = maxColumns - lines.length;
    const fillValues = new Array(fillNum).fill('');
    return [...lines, ...fillValues];
  });

  const targetSheet = ss.getSheetByName(convertSheetName);
  // ヘッダー行を除くので+1
  const lines = filledList.length + 1;
  // Aから埋めていくのでカラム数-1
  targetSheet.getRange(`A2:${columns[maxColumns - 1]}${lines}`).setValues(filledList);
}

スプレッド演算子を駆使してimmutableに…とは行かなかった

NodeのDockerイメージでPuppeteerを使えるようにする

Wed, 28 Jul 2021 00:00:00 GMT

使用したイメージはnode:14.17.3

普通にNodeのイメージにnpmインストールして実行するだけでOKだろうと思ったらそうは行かなかった

/home/user/project/node_modules/puppeteer/.local-chromium/linux-722234/chrome-linux/chrome: error while loading shared libraries: libX11-xcb.so.1: cannot open shared object file: No such file or directory

ElectronをWindowsのBash(WSL)で試してみて成功しなかった - いがにんのぼやき

上記記事と似た感じだったので

apt -y install libx11-xcb-dev libxtst6 libxss1 libgconf-2-4 libnss3-dev libasound2

をDockerfileに追加してPuppeteerを実行しようとしたがまだ足りなかった

動く様になるまでパッケージを追加していく

結果的には追加で下記2つのパッケージが必要だった

libatk-bridge2.0-0
libgtk-3-dev

おわり

S3のpresigned_url発行時にキー以外の名前のファイルをDL可能にする

Sun, 25 Jul 2021 00:00:00 GMT

S3でpresigned_urlを発行してファイルをDLさせる場合（サンプルはAWS-SDKのRubyクライアントを使用）

S3にあるファイルを別名でダウンロードさせるためにはresponse_content_dispositionの指定を良しなにする

  response_content_disposition: "attachment; filename=hoge.txt"

上記の場合はDL時hoge.txtというファイル名でDLされる

また、S3へのファイル作成時にmetadataというキーで任意のパラメータ指定が可能

下記のようにファイル生成時の情報を元にファイル名を決めたいと言うようなケースにも対応できる

以下例

ファイル作成時

s3client = Aws::S3::Client.new
s3client.put_object(
  bucket: 'sample-bucket',
  key: 'sample-key',
  body: File.read(filename),
  content_type: 'text/csv',
  metadata: {
    hoge: 'fuga'
  }
)

presigned url生成時

s3client = Aws::S3::Client.new

object = s3client.head_object(
  bucket: 'sample-bucket',
  key: 'sample-key'
)
metadata = object.metadata

signer = Aws::S3::Presigner.new
signer.presigned_url(
  :get_object,
  bucket: 'sample-bucket',
  key: 'sample-key',
  expires_in: 300,
  response_content_disposition: "attachment; filename=#{metadata['hoge']}.txt"
)

ファイル生成時にmetadata.hogeの値fugaをファイル名に含めることができた

上記例だとfuga.txtというファイル名でダウンロードできる

Gatsbyのブログにjestとreact-testing-libraryを入れてテスト可能にする

Mon, 19 Jul 2021 00:00:00 GMT

基本的には下記を見ながら進めることで問題なかった

Unit Testing | Gatsby

Testing React Components | Gatsby

進めていたら途中で詰まった

src/components/tests/header.ts

import React from "react"
import {render, screen} from "@testing-library/react"
import '@testing-library/jest-dom/extend-expect'

const Title = () => <h1 data-testid="hero-title">Gatsby is awesome!</h1>;

describe("Bio", () => {
  it("renders correctly", () => {
    const { getByTestId } = render(<Title />);
    expect(getByTestId("hero-title")).toHaveTextContent("Gatsby is awesome!");
  })
})

❯ yarn test
yarn run v1.22.10
$ jest --config ./jest.config.js
 FAIL  src/components/__tests__/header.ts
  ● Test suite failed to run

    SyntaxError: /home/user/til/src/components/__tests__/header.ts: Unexpected token, expected "," (7:25)

       6 |
    >  7 | const Title = () => (<h1 data-testid="hero-title">Gatsby is awesome!</h1>);
         |                          ^
       8 |
       9 | describe("Bio", () => {

タグの解釈がうまく行かない？

TypeScript関連のようだがよくわからんということでうだうだ調べていた

よく考えれば分かることだがTypeScriptなのにReactの記法が書いてあるのでそりゃそうなるよねって感じだった

拡張子をts -> tsxにして次に進めた

 FAIL  src/components/__tests__/header.tsx
  Bio
    ✕ renders correctly (2 ms)

  ● Bio › renders correctly
                                                                                                                                                                                                    The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string.
    Consider using the "jsdom" test environment.

デフォルトのテスト環境がnode

レンダリングなどをするテストの場合はjsdom環境に変更してあげる必要がある

変更はテストファイルの先頭にコメントを入れることで可能

Jestの設定 · Jest

全体に適用する場合は jest.config.jsに項目を追加する

jest.config.js

module.exports = {
  .....
  .....
  .....
  testEnvironment: 'jsdom',
}

$ yarn test
yarn run v1.22.10
$ jest --config ./jest.config.js
 PASS  src/components/__tests__/header.tsx
  Bio
    ✓ renders correctly (23 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.013 s, estimated 2 s
Ran all test suites.
Done in 2.31s.

これで動くところまで持っていけたのでテスト書くぞ

Workflowsで Memory usage limit exeeded

Tue, 13 Jul 2021 00:00:00 GMT

はてなブログのAPIなど公開のAPIをたたいてそのレスポンスをそのままBigQueryに突っ込むみたいなやつ

プライベートなのと規模感が小さいのでちょっと冒険的な感じでやってみようと次のような構成で試みた

Workflowsではてなブックマークの公開APIをたたく
WorkflowsのログにAPIのレスポンスをそのまま流す
Logging→集約シンクでBigQueryにレコードを追加する

Functionsを新たに作らなくても良いしとりあえずの生データも保存できるしわりと省力で実現できるかと考えた

ある程度動作確認して問題なかったので自分のブログの全URLで実行したら次のようなエラーが出てしまった

Execution failed or cancelled.
in step "call_workflow_api", routine "call_workflow", line: 88
in step "collect_hatena_bookmark_workflow", routine "main", line: 35
{
  "message": "Execution failed or cancelled.",
  "operation": {
    "argument": "{\"target_url\":\"https://swfz.hatenablog.com/entry/2018/12/22/080733\"}",
    "endTime": "2021-07-10T12:01:03.749667278Z",
    "error": {
      "payload": "{\"message\":\"ResourceLimitError: Memory usage limit exceeded\",\"tags\":[\"ResourceLimitError\"]}",
      "stackTrace": {}
    },
    "name": "projects/1111111111111/locations/us-central1/workflows/collect_hatena_bookmark_metrics/executions/c4a686eb-4d92-4e95-94f6-4257438131e0",
    "startTime": "2021-07-10T12:01:02.693637032Z",
    "state": "FAILED",
    "workflowRevisionId": "000001-331"
  },
  "tags": [
    "OperationError"
  ]
}

バズって300前後のブックマークが付いたURLのレスポンスで発生した

割り当てと上限 | ワークフロー | Google Cloud

変数のメモリ割り当てにも上限があり64KBまでらしい

なのでAPIのレスポンスが64KB以上ある場合はエラーになってしまう…

Functionsは経由するがFunctionsからLoggingへ直接流すようにするか?と思ったが

割り当てと上限 | Cloud Logging | Google Cloud

同じようにLoggingにも割り当て上限があるのでこの辺も考慮できていないといけない

この辺まで調べて面倒になってきてしまいこの手法は諦めた

メモリリミットに達してしまったため回避方法はなさそう…APIのレスポンスをそのままWorkflows上でよしなにやるパターンは厳しいという結論になりました

Workflowsはあくまで各処理のオーケストレーションなのでWorkflows内にあまり処理を持ち込むべきではないっていう考え方なのかなと推測

結局こういうパターンはFunctionsでGCSにデータ置く+BigQueryへloadってパターンがベターなのかな

Netlifyに手動でデプロイする

Sat, 03 Jul 2021 00:00:00 GMT

割と月の早い段階でAlgoliaの使用制限で継続的デプロイができなくなってしまったのでCLI経由でデプロイできないか調べて試した

前提

Netlifyでビルドとデプロイを行っていてビルド時に都度Algoliaのインデックス更新している
DependabotやRenovateなどのパッケージの更新でも上記処理が走ってしまっていたので利用上限に達してしまったよう
build時エラーログ

ERROR

failed to index to Algolia Operations quota exceeded. Change plan to get more Operations.
Error: Operations quota exceeded. Change plan to get more Operations.

途中で落ちてしまいデプロイできないのでIndexの再生成だけ除外して記事をデプロイする

Netlify-cliのインストール

yarn add -D netlify-cli

ログイン

yarn netlify login

ブラウザに遷移してAuthorizeをクリックして認証する

configファイルにtokenが出力される

ファイルの場所は ~/.config/netlify/config.jsonに置かれる（OSによる）

デプロイ

.env.productionにはデプロイに必要な環境変数が入っている

$ envfile .env.production yarn netlify deploy
yarn run v1.22.10
$ /home/user/til/node_modules/.bin/netlify deploy
This folder isn't linked to a site yet
? What would you like to do? Link this directory to an existing site

netlify link will connect this folder to a site on Netlify

? How do you want to link this folder to a site? Use current git remote origin (https://github.com/swfz/til)

Looking for sites connected to 'https://github.com/swfz/til'...


Directory Linked

Site url:  https://til.swfz.io

Site id saved to /home/user/til/.netlify/state.json

You can now run other `netlify` cli commands in this directory
Deploy path: /home/user/til/public
Deploying to draft URL...
✔ Finished hashing 641 files
✔ CDN requesting 377 files
✔ Finished uploading 377 assets
✔ Deploy is live!

Logs:              https://app.netlify.com/sites/hoge/deploys/xxxxxxxxxxxxxxxxxxxxxxxxxxx
Website Draft URL: https://xxxxxxxxxxxxxxxxxxxxxxxxxxxx--hoge.netlify.app

If everything looks good on your draft URL, deploy it to your main site URL with the --prod flag.
netlify deploy --prod

Done in 118.77s.

--prodオプションを付けない場合はデプロイプレビュー用のよう

本番デプロイ

$ envfile .env.production yarn build
$ envfile .env.production yarn netlify deploy --prod
Deploy path: /home/user/deploy-til/public
Deploying to main site URL...
✔ Finished hashing 450 files
✔ CDN requesting 249 files
✔ Finished uploading 249 assets
✔ Deploy is live!

Logs:              https://app.netlify.com/sites/.....
Unique Deploy URL: https://......netlify.app
Website URL:       https://til.swfz.io
Done in 51.37s.

public以下のファイル群をNetlifyにアップロードする

これで無事デプロイできた

CLIのドキュメントは下記

Get started with Netlify CLI | Netlify Docs

Algoliaのインデックス更新のコントロール

とりあえず手動デプロイで当座はしのげるようになったが来月も同じ様になってしまうと困るので対策する

AlgoliaのIndexingが必要なのは記事の更新があったときのみなので条件によって挙動を分ける

ドキュメントではnetlify.tomlに設定書けば良いよ、となっているがGUIからの基本的な設定（主にシークレットなどの情報）とうまい具合にマージしてくれるわけではないらしい

そうなると各種キーがデプロイ時に必要なのでパブリックなリポジトリではnetlify.tomlを使って設定は行えない

File-based configuration | Netlify Docs

[https://docs.netlify.com/configure-builds/file-based-configuration/:embed:cite]

ドキュメントを眺めていると

$CACHED_COMMIT_REF、$COMMIT_REFという環境変数が用意されているようなのでそれを用いてラップするコマンドを書いてデプロイするようにした

deploy.sh

#!/bin/bash

echo $CACHED_COMMIT_REF
echo $COMMIT_REF

# 差分があると終了コード1
git diff --quiet $CACHED_COMMIT_REF $COMMIT_REF content/blog/entries/

rc=$?

if [ "$rc" = "1" ]; then
  echo "content changed."
  CONTENT_CHANGED=true gatsby build
else
  echo "content not changed."
  CONTENT_CHANGED=false gatsby build
fi

記事のディレクトリに変更があるかどうかでCONTENT_CHANGED環境変数を切り分ける

gatsby-config.js

skipIndexing: (process.env.BRANCH !== 'master' || process.env.CONTENT_CHANGED === 'false'),

これでAlgoliaへのインデックス情報の更新は

masterブランチのとき
記事情報が更新されたとき

が満たされて初めて更新されるようになった

ここまでやっていまさらだが、ざっとしか調べてないのでもし検索でリミットに達していたのなら来月も手動デプロイが発生するかもw

graphql-codegenのアップグレードに関するエラー対応

Tue, 29 Jun 2021 00:00:00 GMT

Gatsbyで使っているgatsby-plugin-graphql-codegenのバージョンを上げるにあたってビルドエラーに遭遇したのでその対応のメモ

バージョン

2.7.1 -> 3.0.0

単純には上げさせてもらえなかった

エラー1

Objects are not valid as a React child (found: Error: Type "Node" is missing a "__resolveType" resolver. Pass false into "resolverValidationOptions.requireResolversForResolveType" to disable this error.). If you meant to render a collection of children, use an array instead.

codegenConfigに追加で回避

gatsby-config.js

      resolve: "gatsby-plugin-graphql-codegen",
      options: {
        fileName: `types/graphql-types.d.ts`,
+        codegenConfig: {
+          resolverValidationOptions: {
+            requireResolversForResolveType: false
+          }
        }

この辺を見て設定方法を把握して解決

gatsby-plugin-graphql-codegen | Gatsby

エラー2

ERROR
GraphQLDocumentError: Unknown fragment "GatsbyImageSharpFixed". at /home/user/til/src/components/bio.tsx:5:12
AggregateError: GraphQLDocumentError: Unknown fragment "GatsbyImageSharpFixed".

error Command failed with exit code 1.

GatsbyImageSharpFixedがないとのこと

次のissueをさっと読んだところ個別に書けとのこと

Why …GatsbyImageSharpFixed is unknown fragment in GraphiQL? · Issue #9882 · gatsbyjs/gatsby

       avatar: file(absolutePath: { regex: "/profile-pic.png/" }) {
         childImageSharp {
           fixed(width: 50, height: 50) {
-            ...GatsbyImageSharpFixed
+            base64
+            width
+            height
+            src
+            srcSet
           }
         }
       }

無事バージョンを上げることができた

iframe以下のコンテンツをquerySelectorで取得する

Sun, 27 Jun 2021 00:00:00 GMT

知らずに結構時間を浪費したので残しておく

const element = document.querySelector('.iframe').contentWindow.document.querySelector('.viewer-content');

見た目に表示されているからといって直接document.querySelectorで指定しても取得できない

上記のようにquerySelectorでiframeの要素を指定してからcontentWindowでiframeの中のコンテンツを対象にしてあげる必要がある

それ移行はいつものquerySelectorの要領で要素を取得できる

node-fetchでBasicAuthする

Tue, 22 Jun 2021 00:00:00 GMT

auth用の文字列の生成

今どきはnew Bufferではないらしい

次のようなWarningが出力される

(node:22161) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
(Use `node --trace-deprecation ...` to show where the warning was created)

ということで下記のように認証用の文字列を生成する

const buffer = Buffer.from(`username:token`);
const authString = buffer.toString('base64');

リクエスト

const request = async () => {
  const res = await fetch(`https://example.com`, {
    method: 'GET',
    headers: {
      'Accept': 'application/json',
      'Authorization': `Basic ${authString}`
    }
  });

  return await res.json();
}

(async () => {
  const json = request();
  console.log(json);
})();

headersのAuthorizationにユーザー名とTOKENやパスワードを:でつなげbase64した文字列を入れる

それだけ

Dataportalで時間の単位をよしなに扱う計算フィールド

Fri, 18 Jun 2021 00:00:00 GMT

0.5単位で表示する

Round(hour / 0.5, 0) * 0.5

よくある0.5時間で丸めるやり方

厳密に0.2だよねとか0.4だよねと言ってもピンとこないといえばピンと来ないので0.5刻みで良いよねという感じの表現

ざっとどのくらい時間つかっているのかなみたいなのが知りたいのであればこのパターンで問題ない気がしている

時間 + 分を60進数で表示する

FLOOR(SUM(hour)) + ((sum(hour) - FLOOR(SUM(hour))) * 60.0 / 100)

1.7 -> 1.42

1時間42分という感じ

グラフで見た場合時間単位のみで表示するとどうしても「あぁ0.7だから…42分ね」みたいな脳内変換をしがち

そのへんの認知負荷を下げるためにこういう感じで計算フィールドを用意するとそれっぽく表示してくれる

ビポットで使っても合計の計算もしっかり行われているので問題なさそう

うまくはまらないパターン

前期間との比較がある場合はうまく計算できない
- 比較が10進数を前提としているため
グラフ表示だと60～100までの数値を取ることがなくなるので不自然な増減が起きる
- こちらも10進数を前提としているため

使える部分は表やピボットでの数値表示のときくらい

GatsbyにAlgoliaを導入する

Tue, 15 Jun 2021 00:00:00 GMT

一応ログとして残すがやったのは下記プラグインを入れただけ

gatsby-plugin-algolia | Gatsby

インデックスの更新

記事の内容をAlgoliaのインデックスに登録するための設定

インデックスの登録はbuild時に行われる

こちらはAlgoliaの管理画面からAdminのAPI Keyが必要

graphqlのクエリに関しては自分の設定に合わせる必要があるので/__graphqlでよしなにできるようにクエリを確かめる

とりあえずデータが登録できるところまでを確認

UIの実装

React InstantSearch Widgets | React InstantSearch | API Reference | Algolia Documentation

Gatsbyのブログ見てとりあえずコピー&ペーストしてIndexNameだけ変更すれば動くものは作れた

あとは細かく必要そうなものを足したり調整したりするくらいでOKそう

参考と若干変えた部分

デプロイ時のみインデックス情報を設定するようにした

gatsby-config.js

        skipIndexing: process.env.BRANCH !== 'master', // default: false, useful for e.g. preview deploys or local development

デプロイ時のみAlgoliaにデータ更新すればよいのでこうした

AlgoliaへのSearchクエリ部分

edgesの内容に次の2項目を足した

rawMarkdownBody
timeToRead

これでMarkdownBodyも検索対象に含まれるのかな?そこまで確認してないがいったん突っ込めるので突っ込んだ

.envについて

dotenvを入れているがこれを使っているのは開発時のみで.env.developmentを用意して環境変数を読み込ませている

デプロイ時はすでに環境変数に各種キーを入れているので.envを使用していない

まとめ

取り急ぎ検索は可能になった

が若干もっさり感が残っていて、とりあえず使えるようになりました!って感じなのでそのあたりチューニングしたい

あと検索対象や検索結果の見た目もカスタマイズしたいところ

どっかで時間作ってやる…

あとgraphqlのエディタが項目チェックするだけでクエリ作ってくれる感じになっていてとても使いやすかった

全体の参考

TOCを抽出するためのブックマークレット

Thu, 10 Jun 2021 00:00:00 GMT

他の記事はどのような構成なんだろう？

記事書くときにどのような流れが良いのかなー？

と考えることがあったのでTOCを収集して傾向などを見つけてみようと思ったので掲題のブックマークレットを書いた

toc.js

(() => {
  const log = (msg) => { console.log(msg) };
  log('start extract toc');

  const o = (body) => {
    const d = window.open().document;
    d.writeln('TOC<br /><textarea cols="100" rows="30">' + body + '</textarea>');
    d.close();
  };

  const toc = Array.from(document.querySelectorAll('h1,h2,h3,h4')).map(e => {
    const n = e.tagName.replace("H","");
    return `${"#".repeat(n)} ${e.textContent}`;
  }).join("\n");
  log(toc);
  o(toc);
})();

ブックマークに登録するときは次のように1行にしてスペースはエスケープする

javascript:(()%20=>%20{%20const%20log%20=%20(msg)%20=>%20{%20console.log(msg)%20};%20log('start%20extract%20toc');%20const%20o%20=%20(body)%20=>%20{%20const%20d%20=%20window.open().document;%20d.writeln('TOC<br%20/><textarea%20cols="100"%20rows="30">'%20+%20body%20+%20'</textarea>');%20d.close();%20};%20const%20toc%20=%20Array.from(document.querySelectorAll('h1,h2,h3,h4')).map(e%20=>%20{%20const%20n%20=%20e.tagName.replace("H","");%20return%20`${"#".repeat(n)}%20${e.textContent}`;%20}).join("\n");%20log(toc);%20o(toc);%20})();

こんな感じの出力が得られる

## WSL側
## Xlaunch
## WSL側
### 参考：

なお、対象ページでタイトル以外にもh2などを付けているとその情報も入ってきてしまう

grepでマッチした行以降の値を表示する

Sun, 30 May 2021 00:00:00 GMT

マッチした行以降の表示行数を指定するのは-Aで行えるが対象のファイルの行数すべてをカバーしたい

sample.txt

hoge
fuga
pyo

separator
itemA
itemB
itemC
itemD
itemE

-Aの値を動的にすればカバーできるということで

cat sample.txt | grep -A $(wc -l sample.txt | awk '{print $1}') 'separator'

こんな感じで対象ファイルの行数を最大とするようにすれば取りこぼしがなくなる

WSL2でXLaunchを使ってGUIアプリを起動する

Mon, 24 May 2021 00:00:00 GMT

WSL側

DISPLAY環境変数をセットする

export DISPLAY=$(cat /etc/resolv.conf | grep nameserver | awk '{print $2}'):0

WSLの起動ごとにIPが変わるらしいのでこんな感じの処理を毎度読ませないといけないよう

Xlaunch

additional parameterの項目に-acを追加

WSL側

xeyes

これで無事起動できた

参考：

sedで特定箇所の数値を抜き出す

Thu, 20 May 2021 00:00:00 GMT

sedでURLの数値部分だけを抜き出したい

みたいなことをやっていて

$ echo -n "https://api.github.com/repos/swfz/github-actions-playground/actions/runs/855305996/cancel" | sed -e 's/runs\/\(\d+\)\/cancel/\1/g'

これでrun_id（855305996）を抜き出せるかとやってみてたが何も反応がない

それで調べてみたところstackoverflowが引っかかった

sedはPerlではない!ということで数値の正規表現として\dは使えない

数値をマッチさせたい場合は[[:digit:]] か [0-9]と表現するよう

知らなかった…

ということで、sedを用いてrun_idの部分を抜き出したい場合は次のようにする

$ echo -n "https://api.github.com/repos/swfz/github-actions-playground/actions/runs/855305996/cancel" | sed -e 's/https.*runs\/\([0-9]*\)\/cancel/\1/g'
855305996

参考：regex - How to match digits followed by a dot using sed? - Super User

gcloudのActionsを差し替える

Fri, 14 May 2021 00:00:00 GMT

普段のGitHubActionsでログを見ていたら次のようなメッセージが出ていた

Thank you for using setup-gcloud Action. GoogleCloudPlatform/github-actions/setup-gcloud has been deprecated, please switch to google-github-actions/setup-gcloud.

ということで、既存のsetup-gcloudをgoogle-github-actions/setup-gcloudに移行する

既存でusesしている部分を書き換えるだけでOK

before

GoogleCloudPlatform/github-actions/setup-gcloud@v0.2.1

after

google-github-actions/setup-gcloud@v0.2.1

Twitterで共有されたURLから自分のブログのURLを特定したい

Wed, 12 May 2021 00:00:00 GMT

TwitterでURLが共有されると短縮URL化されてt.co...という形式のURLになる

ブログなどのエゴサをしていると検索には引っかかるが

データ収集を自動化するとどの記事かというひも付けがデータ上できないのでt.co...の先の記事URLが欲しい

よく考えたらcurlでOKっていうところでやってみた

リダイレクト先を表示するオプション

--write-out "%{redirect_url}"

でリダイレクト先のURLを表示してくれるのでそれを記録すれば良い

実際にたたいてみると

https://t.co/...

https://htn.to/...

https://b.hatena.ne.jp/-/redirect?code=

を経由してやっと目的のURLへたどり着くことができた

たどり着くことが可能なら特定も可能ということでさくっとスクリプトを書いた

#!/bin/bash

url=$1

query(){
  target_url=$1
  result=$(curl --silent --output /dev/null --write-out "%{redirect_url}" "${target_url}")

  redirected=$(echo ${result} | grep http | wc -l)
  if [ ${redirected} -eq 0 ]; then
    echo ${url},${target_url}
    exit 0
  fi

  matched=$(echo ${result} | grep '^https\?://swfz.hatenablog.com' | wc -l)

  if [ ${matched} -eq 0 ]; then
    query ${result}
  else
    formatted=$(echo ${result} | sed -e 's/\?.*//')
    echo ${url},${formatted}
  fi
}

query ${url}

一応リダイレクト先がない場合無限ループにならないよう実装した

あと自分の記事のURLのPVとしてはカウントされないが経由するサービスのPVとしてはカウントされてしまうはずなので乱用は厳禁

これでめでたく記事と言及ツイートのひも付けができそう

過去のデータもよしなにやってしまおうと思い実行してみたら経由するURLの中にすでに運営終了しているサービスが存在し、たどれないみたいなパターンがぼちぼちあった

そういうのはツイートに遷移してタイトルなりで判断して手動でデータ埋めるしかないなーという運びとなった

完全に自動化って難しいですね…

BigQueryのbq load時にautodetectを使えない場合

Sat, 08 May 2021 00:00:00 GMT

PocketのデータをAPIで取得してBigQueryに突っ込もうとしたときの話

GCSにJSONを置いてCLIからbq load --autodetectでデータをloadしようとしたらエラーで怒られた

BigQuery error in load operation: Error processing job
'project-111111:bqjob_r70118be7bda78ce4_000001793f9c2946_1': Error while reading
data, error message: JSON table encountered too many errors, giving up. Rows: 1;
errors: 1. Please look into the errors[] collection for more details.
Failure details:
- Error while reading data, error message: JSON processing
encountered too many errors, giving up. Rows: 1; errors: 1; max
bad: 0; error percent: 0
- gs://sample-bucket/preprocessed_rawdata/month=2021-05-01/raw-04.json: Error
while reading data, error message: JSON parsing error in row
starting at position 0: JSON object specified for non-record field:
list.videos

前提

現状あるデータは次の3つ（bucket名はサンプル）

gs://sample-bucket/preprocessed_rawdata/month=2021-05-01/raw-03.json
gs://sample-bucket/preprocessed_rawdata/month=2021-05-01/raw-04.json
gs://sample-bucket/preprocessed_rawdata/month=2021-05-01/raw-05.json

原因の切り分け

raw-03.json
raw-04.json

のときは問題なくloadできている

raw-05.json

が追加されてから上記エラーになってしまった

05と03,04のJSONの中身を比べてみたところ05にはlist.videosがすべて[]になっていた

03,04に関してはどこかのレコードでオブジェクトが入っていたのでRECORDと判断された模様

このことから--autodetectは最初のファイルをautodetectで読み込んで順番にその他ファイルも読み込んでいると考えられる

スキーマの自動検出

ここに説明が書いてあった

自動検出を有効にすると、BigQuery はデータソース内でランダムにファイルを選択します。ファイルの最大 100 行をスキャンして代表的なサンプルとして使用し、推定プロセスを開始します。BigQuery は、各フィールドを検証し、そのサンプル内の値に基づいてそのフィールドにデータ型を割り当てようとします。

ランダムでファイルを読み込むとあるので全パターンを網羅したデータがあるファイルじゃないファイルがサンプルに選定されてしまった場合にこういうことが起きる

そうなるとautodetectは使えないのでテーブル作成→loadの手順を踏む必要がある

schemaの取り出し

うまく行ったパターンで生成したテーブルのスキーマを取得する

bq show --schema --format=prettyjson pocket.rawdata > pocket-rawdata.json

テーブル作成

別のテーブルを用意して試してみる

bq mk --table --time_partitioning_field month --time_partitioning_type MONTH sample.pocket_rawdata pocket-rawdata.json

load

bq load --source_format=NEWLINE_DELIMITED_JSON --replace sample.pocket_rawdata 'gs://sample-bucket/preprocessed_rawdata/*'

今のところこんな感じでなんとかなっている

まとめ

取り込み対象のデータにばらつきがある（あるデータではRECORD、あるデータでは[]のようなとき）とサンプリング次第で取り込めない場合がある

さらに--autodetect+--replaceを用いると毎回ロード時に自動検出するので失敗する可能性がある

そのためスキーマを定義してテーブルの作成+bq loadと手順を踏む必要がある

所感

本来だったらautodetectで生成したスキーマからさらに精査して本当にNULLABLE?みたいな話も考えたほうが良いが今回は趣味プロジェクトなので…

autodetectは便利だけどこういうパターンに対応できないのでやはりPOCやお試しのときくらいしか使えないよなーとあらためて感じた

まぁでも気軽に試せるのはとても良いことなので使い分けが大事

PocketのデータをAPI経由でBigQueryに取り込む

Fri, 07 May 2021 00:00:00 GMT

まずMy ApplicationsからCREATE APPでアプリケーションを作成してconsumer keyを取得する

取得したconsumer keyを環境変数に入れておく

$ export CONSUMER_KEY=xxxxx

request tokenの発行

適当なリダイレクト先を指定してrequest tokenを生成する

$ curl -H "Content-Type: application/json; charset=UTF-8" -X POST \
   https://getpocket.com/v3/oauth/request \
   -d @-<<EOS
{
  "consumer_key" : "${CONSUMER_KEY}",
  "redirect_uri":"http://localhost:8001/"
}
EOS
code=xxxxx

結果を環境変数に入れておく

$ export REQUEST_TOKEN=xxxxx

ブラウザへ遷移してアプリケーションのアクセス許可を行う

リダイレクト先は適当に

open "https://getpocket.com/auth/authorize?request_token=${REQUEST_TOKEN}&redirect_uri=http://localhost:8001/"

access tokenの発行

先の手順で得たrequest tokenを用いてaccess tokenの発行する

$ curl -H "Content-Type: application/json; charset=UTF-8" -X POST \
https://getpocket.com/v3/oauth/authorize \
-d @-<<EOS
{
  "consumer_key":"${CONSUMER_KEY}",
  "code":"${REQUEST_TOKEN}"
}
EOS
access_token=xxxxx&username=hoge

access_token=の部分を環境変数に入れておく

$ export ACCESS_TOKEN=xxxxx

これで準備が完了した

何かしら問い合わせてみる

記事データを取得してみる

curl -o res.json -H "Content-Type: application/json; charset=UTF-8" -X POST \
https://getpocket.com/v3/get -d @-<<EOS
{
  "consumer_key":"${CONSUMER_KEY}",
  "access_token":"${ACCESS_TOKEN}",
  "state":"unread",
  "detailType":"complete",
  "count":3
}
EOS

Pocket API: Retrieving a User’s Pocket Data

retrieveのAPIの仕様についてはこの辺

おまけ

ここで得たJSONをBigQueryに放り込んでよしなにやろうとしたが一筋縄では行かなかった

次のエラーはレスポンスのJSONファイルをそのままGCSにあげてbq loadしようとした結果

Error in query string: Error processing job 'project-111111:bqjob_r75b06933ac2f4481_0000017942c36b05_1': Invalid field name "3292257344". Fields must contain only letters, numbers, and
underscores, start with a letter or underscore, and be at most 300 characters long. Table: sample_8bb5a901_3d95_41f4_9512_e7f4fad8a737_source

エラー文言自体は文字またはアンダースコアで始まりの部分に違反しているのでエラーがでているがそもそもこのキーがIDなので記事によって可変であるためスキーマ定義ができない

json形式が微妙すぎるのでどうしてもフォーマットしてあげないとダメそう

{
  "status": 1,
  "complete": 0,
  "list": {
    "3324677936": {
      "item_id": "3324677936",
      "resolved_id": "3324677936",
      .....
    },
    "3324677937": {
      "item_id": "3324677937",
      "resolved_id": "3324677937",
      .....
    },
    .....

こんな感じで数値キーのハッシュとして出力されている

配列で表現してほしかった…

ということで数値キーになっている要素を数値キーを削除した形で保持させる

{
  "status": 1,
  "complete": 0,
  "list": [
    {
      "item_id": "3324677936",
      "resolved_id": "3324677936",
      .....
    },
    {
      "item_id": "3324677937",
      "resolved_id": "3324677937",
      .....
    },
    .....
  ]

こんな感じ

中身を見た感じ.list以外にも同様の形式だったのでそちらも同様に配列に変更する必要がある

ハッシュ→配列にする必要がある要素

執筆時点で把握しているのは下記

.list
.list.images
.list.videos
.list.authors

jqでよしなにやる

cat res.json| jq  -cr '.list=(.list|to_entries|map(.value)|map(.images=if has("images") then .images|to_entries|map(.value) else [] end)|map(.videos=if has("videos") then .videos|to_entries|map(.value) else [] end)|map(.authors=if has("authors") then .authors|to_entries|map(.value) else [] end))' > list.json

キー自体がそもそもない場合もあったのでその場合は空配列にする

BigQueryに入れ込む

bq load --replace --autodetect --source_format=NEWLINE_DELIMITED_JSON sample_dataset.sample list.json

これでOK

Dataportalで月毎に日平均値を計算する

Fri, 30 Apr 2021 00:00:00 GMT

こういうのはどうしてもView側で用意しないと計算できないのでメモしておく

計算フィールドを用意する

sum(hour)/count_distinct(start_date)

月ごとで1日あたりの時間数を取りたいのでこんな感じになる

SQLと一緒といえば一緒なので割と把握しやすい

WSL2でDockerForWindowsのコマンドを叩く

Tue, 27 Apr 2021 00:00:00 GMT

docker composeがたたけるようになったらしいのでWSL2からもたたいてみようということで

前提

自分はWSL側からWindowsのコマンドを使うことはできるがPATHは読み込ませないようにしている（シェルの起動速度が遅かったため）

/etc/wsl.conf

[interop]
enabled=true
appendWindowsPath=false

しらべた

WSLからWindows側のDocker関連のコマンドをたたく場合

/mnt/c/Program\ Files/Docker/Docker/resources/bin/以下にコマンド群がある

しかしdocker-composeはdocker-compose,docker-compose.exeと両方あるのにdockerに関してはdocker.exeしかなかった

docker-composeの中身を見たら環境によってたたくプログラムを変えているようだったのでdockerでも同じようなスクリプトを用意した

参考にしたファイルはいくつか分岐があったが自分が使う環境は条件分岐しなくても良いので決め打ちにした

/mnt/c/Program\ Files/Docker/Docker/resources/bin/docker

#!/usr/bin/env sh
binary=$(basename "$0")
"$binary.exe" "$@"

実行してみる

$ /mnt/c/Program\ Files/Docker/Docker/resources/bin/docker compose --help
Docker Compose

Usage:
  docker compose [command]

Available Commands:
  build       Build or rebuild services
  convert     Converts the compose file to platform's canonical format
  create      Creates containers for a service.
  down        Stop and remove containers, networks
  events      Receive real time events from containers.
  exec        Execute a command in a running container.
  kill        Force stop service containers.
  logs        View output from containers
  ls          List running compose projects
  pause       pause services
  port        Print the public port for a port binding.
  ps          List containers
  pull        Pull service images
  push        Push service images
  restart     Restart containers
  rm          Removes stopped service containers
  run         Run a one-off command on a service.
  start       Start services
  stop        Stop services
  top         Display the running processes
  unpause     unpause services
  up          Create and start containers

Flags:
      --ansi string                Control when to print ANSI control characters ("never"|"always"|"auto") (default "auto")
      --env-file string            Specify an alternate environment file.
  -f, --file stringArray           Compose configuration files
  -h, --help                       help for compose
      --profile stringArray        Specify a profile to enable
      --project-directory string   Specify an alternate working directory
                                   (default: the path of the Compose file)
  -p, --project-name string        Project name

Use "docker compose [command] --help" for more information about a command.

これでWSL2側からWindowsのdockerコマンドをたたけるようになった

BigQueryで日付を扱うときはTimezoneを意識する

Wed, 21 Apr 2021 00:00:00 GMT

dataformでsourceテーブルから中間テーブルを生成してassertionを書いていた

検算したら件数が合わないなーということで調べた

次のようなSQLでfrom,toを指定して単月分のレコードのみ抜き出すというパターン

SELECT
  *,
  'private' AS workspace
FROM
  `sample.rawdata-private`,
  UNNEST(data) AS d
WHERE
  DATE(start) BETWEEN ${target_date.from}
  AND ${target_date.to}

SQLXなのでtarget_date.toとtarget_date.fromはその時々によって変化する

今回は2021-04-01 ～ 2021-04-30をという感じ

rawdata-privateはAPIのレスポンスをそのまま保存していて1行にtotal_countとdata列に実際のレコードがあるのでUNNESTしてレコード数と比較することで確認している

rawdata-privateのレコードを追ってみると

"start": "2021-04-01T04:57:39+09:00",

のデータがDATE(start)を通すことで2021-03-31になっていた

なるほどUTC

DATE(start, 'Asia/Tokyo'),でタイムゾーン指定の日付データに変換できるのでこれで対応

BigQueryがDATEでよしなにやってくれた結果UTCで解釈すると2021-03-31となってしまうためフィルタ対象から外れてしまい、件数が合わない状態になっていた

正直assertion書いてなかったら気付かなかったのでassertion大事w

DataPortalで9時区切りの日付カラムを計算フィールドで作成する

Sat, 10 Apr 2021 00:00:00 GMT

ただのメモ

TogglからBigQueryにデータを突っ込んでいてそれをDataPortal経由でグラフ化している

start: 2020-12-25 21:52:30 UTC（実際計測している時刻UTCではなくAsia/TokyoだがToggl側のAPIが返す値は時刻+UTCという値が返ってきている）

上記のようなフォーマットのカラムを午前9時を堺にグルーピングしたいという要件が出てきた

経緯

単にグラフ化した場合startを基準にして日付単位でグループ化すると

睡眠時間によっては日の合計時間が24時間を超えてしまうためグラフを眺めていて違和感がある

そのため現在は0時をまたいで睡眠をとった場合は0時を境に分割して記録している

睡眠: 2021-04-09 22:00:00 ～ 2021-04-10 07:00:00
Toggl上での記録: 
- 2021-04-09 22:00:00 ～ 2021-04-10 00:00:00
- 2021-04-10 00:00:00 ～ 2021-04-10 07:00:00

そうすると正確な日付としては分割して結果を閲覧できるが自分の体感としての日の睡眠時間がずれてグラフ化されてしまう

そこで、冒頭のように午前9時開始を堺に日付を分割して0-9時のデータは前日分としてグラフ上では扱えるようにする

そのための計算フィールドの計算式が下記

if(
  parse_datetime(
    "%Y-%m-%dT%H",
    format_datetime("%Y-%m-%dT%H",start)
  ) < parse_datetime(
    "%Y-%m-%dT%H",
    format_datetime("%Y-%m-%dT09",start)
  ),
  parse_date("%Y-%m-%d" ,format_datetime("%Y-%m-%d", datetime_sub(start, INTERVAL 1 DAY))),
  parse_date("%Y-%m-%d" ,format_datetime("%Y-%m-%d", start))
)

つまずきポイント

DataPortalで日付カラムとして扱う場合はDate型かDateTime型になっている必要があるので結果にparse_dateなどパース処理が必要
start自体も日付・時刻カラムだったのでまずformat_datetimeでフォーマットしてからさらにparse_datetimeで比較させて上げる必要があった
よく考えれば分かるはずだったがDataPortal上のテーブルで可視化すると別のフォーマットで出力されてしまい若干混乱した

こんな感じで午前9時を境に日付を変更できた

Terraformの配列で複数CloudRunのURLをOutPutする

Thu, 08 Apr 2021 00:00:00 GMT

0.12以降ではresourceに対しても繰り返しの構文が使えるようなので使ってみた一例

CloudRunを複数作ってEndpointのURLをOutPutに設定する

CloudRun単一の場合URLは次のように取得する

google_cloud_run_service.app.status[0].url

複数ある場合は次のようにしてmapにする

output url {
  value = tomap({ for k,v in google_cloud_run_service.app : k => v.status[0].url})
}

outputはこんな感じ

url = {
  "hoge" = "https://sample-cloudrun-hoge-hogehoge-an.a.run.app"
  "fuga" = "https://sample-cloudrun-fuga-hogehoge-an.a.run.app"
}

という感じで取得できる

Terraform+GCSでバックエンドの設定をCLIで行う

Wed, 07 Apr 2021 00:00:00 GMT

環境ごとにバックエンドの設定を変えたりする場合などに有効

backend.tf

terraform {
  backend "gcs" {
  }
}

ファイルから設定する

backend-config.tfvars

bucket = "hoge-tfstate"
prefix = "prefix-hoge"

terraform init -backend-config=backend-config.tfvars

コマンドラインから設定する

terraform init -backend-config="bucket=hoge-tfstate" -backend-config="prefix=prefix-hoge"

SecretManagerの作成や更新をCLIで行う

Tue, 06 Apr 2021 00:00:00 GMT

作成はsecretsだけど更新はsecrets versionsに対しての操作が必要

シークレットの作成

echo -n $TOKEN | gcloud secrets create HOGE_TOKEN --replication-policy=automatic --data-file=-

シークレットの更新

echo -n $TOKEN | gcloud secrets versions add HOGE_TOKEN --data-file=-

echoのみだと末尾の改行も含まれてしまうので-nが必要

 -n     do not output the trailing newline

CloudWatchLogsで複数行またいだログを適切に扱う

Fri, 02 Apr 2021 00:00:00 GMT

CloudWatchLogsエージェントを使ってログを集める際のはなし

RailsのログからFATAL,ERRORなどのログだけ抽出してSlackに投げようというような運用はよくある

CloudWatchLogsにログを集めて行う場合はLogsのサブスクリプションフィルタを使って対象を絞ってLambdaなどを介して通知する

が、スタックトレースを伴うエラーなどのログは改行が含まれているのでデフォルトの設定だと1行1行が別々のログとして扱われてしまう

複数行のログでも1つのまとまりとして扱いたい

そこでmulti_line_start_patternの設定をする

設定

オプションはこの正規表現にマッチする行がスタートですよという意味合い

Fluentdとかでもこういうのあったね

CloudWatch Logs エージェントのリファレンス - Amazon CloudWatch Logs

/opt/aws/amazon-cloudwatch-agent/bin/config.json

  "logs": {
    "logs_collected": {
      "files": {
        "collect_list": [
          {
            "file_path": "/path/to/log/hoge.log",
            "log_group_name": "/cwl-test/dev/rails",
            "log_stream_name": "{instance_id}",
            "multi_line_start_pattern": "[F|E|W|I|D], .*"
          }
        ]
      }
    }
  },

Rails.loggerを通してログを出力した場合は基本的にログ1件の単位が上記の正規表現で対応できる状態になる

こんなログが1件として扱われる

F, [2021-04-02T17:40:01.079206 #21599] FATAL -- : 
ActionController::RoutingError (No route matches [GET] "/hoge"):
.....
.....
.....

gcloudコマンドでTerraformが使用する認証情報のセットをサービスアカウント以外で行う

Wed, 31 Mar 2021 00:00:00 GMT

忘れてしまうのでメモ

gcloud auth application-default login

gcloud auth login | Cloud SDK のドキュメント | Google Cloud

URLのリンクへ飛ぶと「○を許可しますか?」と聞かれる

許可すると認証コードを発行されるのでそれをコンソールに戻って入力すればOK

Go to the following link in your browser:


    https://accounts.google.com/o/oauth2/auth?response_type=code&...........

Enter verification code:

Credentials saved to file: [/home/user/.config/gcloud/application_default_credentials.json]

These credentials will be used by any library that requests Application Default Credentials (ADC).
/home/sawafuji/google-cloud-sdk/lib/third_party/google/auth/_default.py:70: UserWarning: Your application has authenticated using end user credentials from Google Cloud SDK without a quota project. You might receive a "quota exceeded" or "API not enabled" error. We recommend you rerun `gcloud auth application-default login` and make sure a quota project is added. Or you can use service accounts instead. For more information about service accounts, see https://cloud.google.com/docs/authentication/
  warnings.warn(_CLOUD_SDK_CREDENTIALS_WARNING)

Quota project "sample-project-111111" was added to ADC which can be used by Google client libraries for billing and quota. Note that some services may still bill the project owning the resource.

別のアカウントで実行したら上書きされるようなので複数アカウントにまたいで作業をするマシンの場合は一応注意が必要ではある

認証情報のデフォルト設定を任意の場所に置く

確認したら下記だった

$HOME/.config/gcloud/application_default_credentials.json

そしてそこで生成された認証情報を使ってTerraformも実行できるようになる

なのでサービスアカウントではなくてもTerraformをたたくことができる

わざわざサービスアカウントでIAMの調整をしなくて良いので便利

CDでTerraformたたく感じでなければこの方法が楽で良さそう

Cloud Workflowsの実行をCloudScheduler経由で行う(パラメータ付き)

Tue, 30 Mar 2021 00:00:00 GMT

CloudSchedulerからCloudWorkflowsを実行するためのTips

Cloud Scheduler の使用によるワークフローのスケジュール設定 | Google Cloud

に単純に実行するだけのパターンは載っていたがWorkflowsの実行時にパラメータを渡すときどうするのかは書いていなかった

そのため単純に渡したいJSONを突っ込んだだけではINVALID_ARGUMENTSで怒られた

そこで下記APIドキュメントを見てWorkflowをたたくためのJSONの中身を調べた

REST Resource: projects.locations.workflows.executions | ワークフロー

argumentというキーにencodeしたJSON文字列をいれてたたくと意図通りパラメータが渡されるよう

ということでそういうJSONパラメータを作成してたたけるようにした

{"argument":"{\"graph_id\":\"reading\",\"project_id\":156548296}"}

こんな感じ

Functions framework Rubyを試す

Thu, 25 Mar 2021 00:00:00 GMT

環境

ruby: 2.7.1

Gemfile

source "https://rubygems.org"

gem "functions_framework"
gem "activesupport"
gem "awesome_print"
gem "sinatra"

app.rb

require "functions_framework"
require "active_support/all"
require "sinatra/base"
require "json"

class Router < Sinatra::Base

  before do
    if params['zone'].present?
      Time.zone = params['zone']
    end
  end

  get('/') do
    content_type :json
    {path: 'slash'}.to_json
  end

  get('/yesterday') do
    content_type :json
    {
      date: {
        from: Time.current.yesterday.strftime('%Y-%m-%d'),
        to: Time.current.yesterday.strftime('%Y-%m-%d'),
      },
      ymd: {
        from: Time.current.yesterday.strftime('%Y%m%d'),
        to: Time.current.yesterday.strftime('%Y%m%d'),
      },
      time: {
        from: Time.current.yesterday.strftime('%Y-%m-%dT00:00:00'),
        to: Time.current.yesterday.strftime('%Y-%m-%dT23:59:59')
      }
    }.to_json
  end

  get('/last_week') do
    content_type :json
    {
      recent: {
        date: {
          from: 1.week.ago.strftime('%Y-%m-%d'),
          to: Time.current.yesterday.strftime('%Y-%m-%d')
        },
        time: {
          from: 1.week.ago.strftime('%Y-%m-%dT00:00:00'),
          to: Time.current.yesterday.strftime('%Y-%m-%dT23:59:59')
        }
      }
    }.to_json
  end

  get('/this_month') do
    content_type :json
    {
      last_month_in_first_day: {
        date: {
          from: Time.current.ago(1.day).beginning_of_month.strftime('%Y-%m-%d'),
          to: Time.current.ago(1.day).end_of_month.strftime('%Y-%m-%d')
        },
        time: {
          from: Time.current.beginning_of_month.strftime('%Y-%m-%d 00:00:00'),
          to: Time.current.end_of_month.strftime('%Y-%m-%d 23:59:59')
        }
      },
      this_month_in_first_day: {
        date: {
          from: Time.current.beginning_of_month.strftime('%Y-%m-%d'),
          to: Time.current.end_of_month.strftime('%Y-%m-%d')
        },
        time: {
          from: Time.current.beginning_of_month.strftime('%Y-%m-%d 00:00:00'),
          to: Time.current.end_of_month.strftime('%Y-%m-%d 23:59:59')
        }
      }
    }.to_json
  end


  not_found do
    "Not Found."
  end
end

FunctionsFramework.http("datetime") do |request|
  Router.call(request.env)
end

Sinatraを入れて簡単なサーバを立ち上げられるようにした

ローカルでサーバを起動する

$ bundle exec functions-framework-ruby --target datetime
I, [2021-03-25T14:23:00.382244 #28918]  INFO -- : FunctionsFramework v0.9.0
I, [2021-03-25T14:23:00.383176 #28918]  INFO -- : FunctionsFramework: Loading functions from "./app.rb"...
I, [2021-03-25T14:23:01.533809 #28918]  INFO -- : FunctionsFramework: Looking for function name "datetime"...
I, [2021-03-25T14:23:01.534009 #28918]  INFO -- : FunctionsFramework: Starting server...
I, [2021-03-25T14:23:01.643239 #28918]  INFO -- : FunctionsFramework: Serving function "datetime" on port 8080...

たたいてみる

$ curl 'http://localhost:8080/yesterday?zone=Asia%2FTokyo'
{"date":{"from":"2021-03-24","to":"2021-03-24"},"ymd":{"from":"20210324","to":"20210324"},"time":{"from":"2021-03-24T00:00:00","to":"2021-03-24T23:59:59"}}

返ってきた

deployする

$ gcloud functions deploy datetime \
    --project=sample-project \
    --runtime=ruby27 \
    --trigger-http \
    --entry-point=datetime

確認

$ curl -X GET -H "Authorization: Bearer $(gcloud auth print-identity-token)" 'https://us-central1-sample-project.cloudfunctions.net/datetime/yesterday?zone=Asia%2FTokyo'
{"date":{"from":"2021-03-24","to":"2021-03-24"},"ymd":{"from":"20210324","to":"20210324"},"time":{"from":"2021-03-24T00:00:00","to":"2021-03-24T23:59:59"}}

OIDC認証もバッチリ

ドキュメント

File: Deploying Functions — Functions

はてなブログにSentryを入れてみる

Sat, 20 Mar 2021 00:00:00 GMT

これで一発OKだった

Lazy-Loading Sentry for JavaScript | Sentry Documentation

CDNへのリンクをカスタマイズからフッターでタグなどを入力できる箇所で入力するだけ

しばらく放置してたらイベントが発生した

まぁだからといって何ができるというわけではないのだが…

GoogleColabでjsonのデータをプロットする

Wed, 17 Mar 2021 00:00:00 GMT

整形済みデータは次のようなフォーマット

sample_data/sorted_array.json

[
  [
    "2021-02-01",
    "169"
  ],
  [
    "2021-02-02",
    "746"
  ],
  [
    "2021-02-03",
    "1267"
  ],
  [
    "2021-02-04",
    "632"
  ],
  [
    "2021-02-05",
    "401"
  ],
  [
    "2021-02-06",
    "288"
  ]
]

JSONファイルのアップロード

GUIで行う

ファイルをやりとりするには事前に接続しておく必要がある

実行

コードは次のような感じ

import matplotlib.pyplot as plt
import json
import pandas as pd

df = pd.read_json('sample_data/sorted_array.json')
df.set_index(0, inplace=True)

ax = df.plot(kind='bar', title='Error Count By Date', figsize=(20,7), color='#00AAAA')
ax.set_xlabel('Date')
ax.set_ylabel('Count')
ax.legend(['Errors'])

それっぽくなった

colab初めて触ったけどjupyter notebookがブラウザから簡単に使えるのかなり良い

Ctrl+Enterで実行やShift+Enterで次のコードへ遷移などjupyter notebookと同じ使い心地

あまりさわれる機会が多くないがしばらく使ってみようと思う

Kindle for PC(Windows)のショートカットを無効にする

Fri, 05 Mar 2021 00:00:00 GMT

Kindle for PCのショートカットキー

デフォルトだとCtrl+Alt+kでKindleが起動する

ショートカットキーを無効にするためにはショートカットのアイコンのプロパティからショートカット欄を消すことで行える

自分はデスクトップにショートカットを置くようにしたのでそこだけ消せばOKだと思っていた

しかし、消してもまだ治らず

ディスク内で検索したら

C:\Users\hoge\Desktop
C:\Users\hoge\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Amazon\Amazon Kindle

2つ存在した!!!

Start Menuにも配置される模様…

両方解除することでショートカットが発動しないようになる

これに気付かずアプリケーションのアップデートのタイミングでショートカットが更新されてしまい毎度探すということをやっていたのでメモとして残しておく

MySQLのgenerallogから特定のSQLを抜き出す

Fri, 26 Feb 2021 00:00:00 GMT

AWSで稼働しているRDSからgeneral logを取ってきてそのクエリログから特定のクエリを抽出してExplainの結果を判定するということをやったのでそのときやったことをメモしておく

単発だったのでいくつか簡単なスクリプトを書いて対応したがしくみ化するならいろいろおもしろいかも

前提

ローカルからのフォワーディングや本番サーバなどから実行するなど本番のDBに接続できる必要がある

general logをファイルに出力する設定をしておく必要がある

やること

general logの取得

APIのドキュメントは下記

Accessing Amazon RDS database log files - Amazon Relational Database Service

直近24時間分のログが取れる

数値はUTC時刻の範囲で出力されるっぽいのでgeneral/mysql-general.log.0はJSTでは09:00台の内容

#!/bin/bash

aws rds download-db-log-file-portion --db-instance-identifier hoge-db --starting-token 0 --output text --log-file-name general/mysql-general.log.0  > 0.log
aws rds download-db-log-file-portion --db-instance-identifier hoge-db --starting-token 0 --output text --log-file-name general/mysql-general.log.1  > 1.log
aws rds download-db-log-file-portion --db-instance-identifier hoge-db --starting-token 0 --output text --log-file-name general/mysql-general.log.2  > 2.log
aws rds download-db-log-file-portion --db-instance-identifier hoge-db --starting-token 0 --output text --log-file-name general/mysql-general.log.3  > 3.log
aws rds download-db-log-file-portion --db-instance-identifier hoge-db --starting-token 0 --output text --log-file-name general/mysql-general.log.4  > 4.log
aws rds download-db-log-file-portion --db-instance-identifier hoge-db --starting-token 0 --output text --log-file-name general/mysql-general.log.5  > 5.log
aws rds download-db-log-file-portion --db-instance-identifier hoge-db --starting-token 0 --output text --log-file-name general/mysql-general.log.6  > 6.log
aws rds download-db-log-file-portion --db-instance-identifier hoge-db --starting-token 0 --output text --log-file-name general/mysql-general.log.7  > 7.log
aws rds download-db-log-file-portion --db-instance-identifier hoge-db --starting-token 0 --output text --log-file-name general/mysql-general.log.8  > 8.log
aws rds download-db-log-file-portion --db-instance-identifier hoge-db --starting-token 0 --output text --log-file-name general/mysql-general.log.9  > 9.log
aws rds download-db-log-file-portion --db-instance-identifier hoge-db --starting-token 0 --output text --log-file-name general/mysql-general.log.10 > 10.log
aws rds download-db-log-file-portion --db-instance-identifier hoge-db --starting-token 0 --output text --log-file-name general/mysql-general.log.11 > 11.log
aws rds download-db-log-file-portion --db-instance-identifier hoge-db --starting-token 0 --output text --log-file-name general/mysql-general.log.12 > 12.log
aws rds download-db-log-file-portion --db-instance-identifier hoge-db --starting-token 0 --output text --log-file-name general/mysql-general.log.13 > 13.log
aws rds download-db-log-file-portion --db-instance-identifier hoge-db --starting-token 0 --output text --log-file-name general/mysql-general.log.14 > 14.log
aws rds download-db-log-file-portion --db-instance-identifier hoge-db --starting-token 0 --output text --log-file-name general/mysql-general.log.15 > 15.log
aws rds download-db-log-file-portion --db-instance-identifier hoge-db --starting-token 0 --output text --log-file-name general/mysql-general.log.16 > 16.log
aws rds download-db-log-file-portion --db-instance-identifier hoge-db --starting-token 0 --output text --log-file-name general/mysql-general.log.17 > 17.log
aws rds download-db-log-file-portion --db-instance-identifier hoge-db --starting-token 0 --output text --log-file-name general/mysql-general.log.18 > 18.log
aws rds download-db-log-file-portion --db-instance-identifier hoge-db --starting-token 0 --output text --log-file-name general/mysql-general.log.19 > 19.log
aws rds download-db-log-file-portion --db-instance-identifier hoge-db --starting-token 0 --output text --log-file-name general/mysql-general.log.20 > 20.log
aws rds download-db-log-file-portion --db-instance-identifier hoge-db --starting-token 0 --output text --log-file-name general/mysql-general.log.21 > 21.log
aws rds download-db-log-file-portion --db-instance-identifier hoge-db --starting-token 0 --output text --log-file-name general/mysql-general.log.22 > 22.log
aws rds download-db-log-file-portion --db-instance-identifier hoge-db --starting-token 0 --output text --log-file-name general/mysql-general.log.23 > 23.log

クエリのフォーマット、フィルタリング

general logの形式が次のような感じなのでクエリ部分を抜き出す必要がある

Time                 Id Command    Argument
                946458 Query    SELECT hoge FROM fuga....

Mysql general log parser

からパーススクリプトを持ってきて配置し（mysql-general-log-parser.pl）次のようなシェルを書いた

filter_general_log.sh

file=$1

perl mysql-general-log-parser.pl $file | grep -v 'Your log message was truncated' | grep -v 'rds_heartbeat2' | grep -v 'rds_configuration' | grep -v 'mysql-connector-java' | grep -v 'EXPLAIN ' | sort | uniq > $file.query_list.txt

実行

ls -l {0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23}.log | awk '{print $9}' | xargs -i ./filter_general_log.sh {}

生成したファイルをマージする

cat *.query_list.txt > query_list.txt

特定クエリの抽出

GROUP BY, DISTINCTを使用しているクエリを拾う

filter_group_by_query.py

import sqlparse
import sys

filepath = sys.argv[1]

f = open(filepath)
lines = f.readlines()
f.close()

for line in lines:
    parsed = sqlparse.parse(line)[0]
    tokens = list(parsed.flatten())
    is_grouped = filter(lambda t: t.match(sqlparse.tokens.Keyword, "GROUP\s+BY", regex=True), tokens)
    is_distinct = filter(lambda t: t.match(sqlparse.tokens.Name, "DISTINCT"), tokens)
    if len(list(is_grouped)) > 0 or len(list(is_distinct )) > 0:
        print(line)

実行

pip install sqlparse
python filter_group_by_query.py query_list.txt > group_by_query.txt

チェック

explainの結果にUsing index for group-byが含まれるものを抜き出す

check_group_by_query.sh

#!/bin/bash

file=$1

cnt=0
cat $file | while read line
do
  cnt=`expr $cnt + 1`
  echo $cnt
  mysql -uhoge -P 13306 -h localhost -ppass dbname -e "EXPLAIN $line" | grep 'Using index for group-by'
  if [ $? -eq 0 ]; then
    echo "Found Query"
    echo $line
    echo $line >> result.txt
  fi
done

実行

sh check_group_by_query.sh group_by_query.txt

という感じでいくつかのクエリを探すようなことをした

WSL2に移行した

Wed, 17 Feb 2021 00:00:00 GMT

下記参考にWSL→WSL2へ移行した際の記録

Windows Subsystem for Linux (WSL) を Windows 10 にインストールする | Microsoft Docs

上記を参考に各種設定を行い次のコマンドを打ったが何も変わらず…

$ wsl --set-version Ubuntu 2
変換中です。この処理には数分かかることがあります...
WSL 2 との主な違いについては、https://aka.ms/wsl2 を参照してください
Windows の仮想マシン プラットフォーム機能を有効にして、BIOS で仮想化が有効になっていることを確認してください。
詳細については、https://aka.ms/wsl2-install を参照してください

$ wsl --list --verbose
  NAME                   STATE           VERSION
* Ubuntu                 Running         1

BIOSでの確認もしてみたが仮想化機能も有効になっていそう…

何度か一連の手順を踏んでみたが変わらず

最終的にはDockerForWindowsを入れてそちらの方で「仮想化機能をEnableにする」ダイアログをクリックして再起動したらWSL2側も使えるようになった

というか仮想化機能自体が「Windowsの機能の有効化または無効化」の設定やPowershellのコマンドからだと正しくONにできなかったように見える

もしくはほかにも設定変更をするべき項目が存在したか…

正直良くわからないが無事にWSL2+Dockerを使えるようになった

$ wsl --list --verbose
  NAME                   STATE           VERSION
* Ubuntu                 Running         2
  docker-desktop         Running         2
  docker-desktop-data    Running         2

docker-desktopも出力されるよう

以前から使っていたVagrant+VirtualBox（v6.1.16）のVMも問題なく起動して動かせたので良き

今までDockerを使うリポジトリは全部VMの中で開発していたがこれでWSL側でも開発できる

tfenvを使いTerraformのバージョンを切り替える

Sat, 13 Feb 2021 00:00:00 GMT

tfutils/tfenv: Terraform version manager

Terraformのバージョンを切り替えて使用するためのツール

インストール

$ git clone https://github.com/tfutils/tfenv.git ~/.tfenv
$ mkdir ~/.local/bin
$ ln -s ~/.tfenv/bin/* ~/.local/bin

PATHへの追加

.bashrc

export PATH="$HOME/.tfenv/bin:$PATH"

当たり前だが既存のパスより前にtfenvのパスが先にないと既存でterraformを使っている場合そっちが先に見つかってしまうのでtfenvのパスを先にする

切り替え、使用

$ tfenv install 0.14.6
$ tfenv use 0.14.6
$ terraform --version
Terraform v0.14.6

CloudSQLへの接続方法

Mon, 08 Feb 2021 00:00:00 GMT

CloudShellからの接続

CloudShellから接続する場合は簡単
該当プロジェクトでcloud shellを起動しgcloud sql connectで接続するだけ

$ gcloud sql connect mysql-instance --user=root
Allowlisting your IP for incoming connection for 5 minutes...done.
Connecting to database with SQL user [root].Enter password:
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 351117
Server version: 5.7.25-google-log (Google)
Copyright (c) 2000, 2020, Oracle and/or its affiliates. All rights reserved.
Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.
Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.
mysql> show databases;

gcloud sql connect ${instance name} --user=root

これだけでOK

ローカルからの接続

cloud_sql_proxyを使ってforwardingする

Cloud SQL Proxy について | Cloud SQL for MySQL | Google Cloud

インストール

Linux64ビットにしたがってやっていく

$ curl -LO https://dl.google.com/cloudsql/cloud_sql_proxy.linux.amd64
$ chmod +x ./cloud_sql_proxy
$ mv ./cloud_sql_proxy /usr/local/bin/

実行

$ cloud_sql_proxy -instances=sample-project:us-west1:mysql-instance=tcp:13306

フォーマット

-instances=${project name}:${region}:${instance name}=tcp:${forward port}

ローカルの13306ポートで接続できるようにした

接続

mysql -uroot -h 127.0.0.1  -P 13306 -p

これだけでOK

gcloudコマンド自体のタイムアウト設定

Fri, 05 Feb 2021 00:00:00 GMT

cloud functionsでタイムアウトを最大の540秒に設定していたがgcloud functions callで手動実行していたら次のようなエラーが出た

ERROR: (gcloud.functions.call) ('The read operation timed out',)
This may be due to network connectivity issues. Please check your network settings, and the status of the service you are trying to reach.

gcloudのコマンド自体（APIコール）のタイムアウトは--http-timeoutを設定すればよさそう

デフォルトだと300秒だった（気がする）

gcloud functions call sample_function --http-timeout 540

でよい

ドキュメントを見つけられなかったが…とりあえずこれでOKそう

VagrantのVMが立ち上がらなくなってしまったときの対処方いくつか

Tue, 26 Jan 2021 00:00:00 GMT

ホスト機がフリーズしてしまったとかVMを正常に終了させられないまま再起動してしまったときなど

ごくたまにVagrantで使っているVMが起動しなくなる

いくつか試してみたのでその記録

本記事ではdev4というVM名で進める

$ vagrant up
Bringing machine 'default' up with 'virtualbox' provider...
==> default: Checking if box 'bento/centos-7.4' version '201803.24.0' is up to date...
==> default: Clearing any previously set forwarded ports...
There was an error while executing `VBoxManage`, a CLI used by Vagrant
for controlling VirtualBox. The command and stderr is shown below.

Command: ["modifyvm", "d4c26ea5-e507-4049-878a-2c89a841f9e6", "--natpf1", "delete", "127.0.0.1tcp22396", "--natpf1", "delete", "127.0.0.1tcp9200", "--natpf1", "delete", "127.0.0.1tcp9300", "--natpf1", "delete", "ssh"]

Stderr: VBoxManage.exe: error: The machine 'dev4' is already locked for a session (or being unlocked)
VBoxManage.exe: error: Details: code VBOX_E_INVALID_OBJECT_STATE (0x80bb0007), component MachineWrap, interface IMachine, callee IUnknown
VBoxManage.exe: error: Context: "LockMachine(a->session, LockType_Write)" at line 554 of file VBoxManageModifyVM.cpp

lockされてます

いくつか調べたらpoweroffにすればよいとあったので実行してみる

$ cd /c/Program\ Files/Oracle/VirtualBox
$ ./VBoxManage.exe controlvm dev4 poweroff
VBoxManage.exe: error: The virtual machine is being powered down
VBoxManage.exe: error: Details: code VBOX_E_INVALID_VM_STATE (0x80bb0002), component ConsoleWrap, interface IConsole, callee IUnknown
VBoxManage.exe: error: Context: "PowerDown(progress.asOutParam())" at line 619 of file VBoxManageControlVM.cpp

もう止まっているよということのよう

$ vagrant status
Current machine states:

default                   stopping (virtualbox)

The VM is stopping.

参考

VirtualBoxで仮想コンピュータが反応しなくなった時( = _ = )

を参考に強制的に落とす

 ./VBoxManage.exe startvm dev4 --type emergencystop

abortedになった

$ vagrant status
Current machine states:

default                   aborted (virtualbox)

The VM is in an aborted state. This means that it was abruptly
stopped without properly closing the session. Run `vagrant up`
to resume this virtual machine. If any problems persist, you may
have to destroy and restart the virtual machine.

ここからvagrant upして無事立ち上げることができた

$ vagrant up
.....
.....
.....
Timed out while waiting for the machine to boot. This means that
Vagrant was unable to communicate with the guest machine within
the configured ("config.vm.boot_timeout" value) time period.

If you look above, you should be able to see the error(s) that
Vagrant had when attempting to connect to the machine. These errors
are usually good hints as to what may be wrong.

If you're using a custom box, make sure that networking is properly
working and you're able to connect to the machine. It is a common
problem that networking isn't setup properly in these boxes.
Verify that authentication configurations are also setup properly,
as well.

If the box appears to be booting properly, you may want to increase
the timeout ("config.vm.boot_timeout") value.

が、立ち上がったは良いがsshできないという感じになってしまった

VirtualBoxからものぞいてみようと試みたがVMが完全に立ち上がらない状態で操作できず

結局ホストのWindowsを完全シャットダウン（shift+シャットダウン）&起動してVM起動したら動くようになっていた

ただの徒労…

gcloud buildsでログが見れない時

Mon, 25 Jan 2021 00:00:00 GMT

CloudRunでCDやろうと思ったらつまずいた

サービスアカウントにコンテナのイメージをビルドさせたいときの話

$ gcloud builds submit --tag gcr.io/${project-id}/${name}
Check the gcloud log [/home/circleci/.config/gcloud/logs/2020.12.10/18.23.37.852071.log] to see which files and the contents of the default gcloudignore file used (see `$ gcloud topic gcloudignore` to learn                                                                           more).
.....
.....
.....
ERROR: (gcloud.builds.submit) HTTPError 403: <?xml version='1.0' encoding='UTF-8'?><Error><Code>AccessDenied</Code><Message>Access denied.</Message><Details>name-run-invoker@project-id.iam.gserviceaccount.com does not have storage.objects.get access to the Google Cloud Storage object.</Details></Error>

サービスアカウントにはstorage.objects.getは付いているのに…

ビルド結果の表示 | Cloud Build のドキュメント | Google Cloud

特にログのバケットを指定してないため、ログを表示するにはプロジェクト＞閲覧者の権限も必要なよう

いわゆるroles/viewer

projectの閲覧者権限の追加

個人的によく使うgcloudコマンドまとめ ~ IAM・サービスアカウント関連 ~

gcloud projects add-iam-policy-binding ${project-id} --member=serviceAccount:${name}-run-invoker@${project-id}.iam.gserviceaccount.com --role=roles/viewer

これで解決した

なんとなくプロジェクトにまつわる権限の話がわかってきた気がするがはっきり説明できるほどにはなっていない…

Rubyで進捗表示のスクリプトを書くとき

Sat, 23 Jan 2021 00:00:00 GMT

(1..100).each { |n| print "#{'#' * n}#{'-' * (100 - n)} #{n}% \r"; sleep 1}

書き捨てスクリプトなどで進捗を表示させたいときなど\rを末尾に付けることで再描画できるので進捗が進んでいるような見え方をさせられる

MySQLでgzipをそのまま流し込む

Fri, 22 Jan 2021 00:00:00 GMT

dump

一時的にファイルを生成せず圧縮したファイルを生成する

mysqldump -u user -p password dbname | gzip > dump.gz

リストア

gzファイルから直接MySQLに流し込む

zcat dump.gz | mysql -u user -p password dbname

Ansibleでsystemdの設定を一部変更して反映させる

Fri, 15 Jan 2021 00:00:00 GMT

AnsibleでCloudWatchAgentのデーモンを起動する処理を書いていてsystemdの設定ファイルを少しだけいじりたいパターンがあったのでそのメモ

なお今回はamazon-linux2を想定している

具体的には

Restart=on-failure から Restart=alwaysへ変更するだけ

ファイルの中身を一部書き換えるのはAnsibleのlineinfileモジュールで行える

config.json.j2は適当なテンプレートを用意する

tasks/main.yml

- name: Install agent
  yum:
    name:
      - amazon-cloudwatch-agent
    state: present

- name: collectd exist
  stat:
    path: /usr/share/collectd/types.db
  register: collectd_exist

- name: install collectd
  command: amazon-linux-extras install -y collectd
  when: not collectd_exist.stat.exists

- name: systemd configuration restart always
  lineinfile:
    path: /etc/systemd/system/amazon-cloudwatch-agent.service
    regexp: '^Restart='
    line: 'Restart=always'
  notify: systemd reload

- name: set config file
  template:
    src: config.json.j2
    dest: /opt/aws/amazon-cloudwatch-agent/bin/config.json
    mode: 0644
  notify: Restart cloudwatch agent

handlers/main.yml

---
- name: Restart cloudwatch agent
  command: /opt/aws/amazon-cloudwatch-agent/bin/amazon-cloudwatch-agent-ctl -a fetch-config -m ec2 -s -c file:/opt/aws/amazon-cloudwatch-agent/bin/config.json

- name: systemd reload
  systemd:
    name: amazon-cloudwatch-agent
    daemon_reload: yes

lineinefileで変更があればdaemon-reloadすることでsystemdの設定を読み込み直してくれる

参考

はてなフォトライフのフォーマットについて

Tue, 05 Jan 2021 00:00:00 GMT

はてなフォトライフに上げた画像のはてなブログ上での表示について

はてなブログの編集画面上でフォトライフに上げた画像は次のように変換されてエディタ領域に出力される

[f:id:swfz:20201229025422p:plain]

一方フォトライフAPIに投げた場合同じ形式の値を探すと次のような値が返ってくる

f:id:swfz:20201229025422p:image

コロン区切りで意味があるように見えるが最後の項目に違いがある

特に意識していなかったがこの違いが記事上で画像クリック時の挙動に影響しているよう

plainはクリックするとオーバーレイ表示されるのに対し、imageではフォトライフの該当画像へ遷移する仕様のよう

なので投稿者以外の人が記事上の画像をクリックすると該当画像とは無関係の画像が表示されたフォトライフの画面へ遷移してしまう

はてなブログのエディタはそんな気の効かせ方をしていたのね…

Gemのメンテ時などで使用するコマンドの覚書

Mon, 04 Jan 2021 00:00:00 GMT

毎度忘れるので自分用のメモとして

hatenablog_publisherを例として上げておく

swfz/hatenablog_publisher: hatenablog publish with imagefile

CDとかで自動化しているわけではないのでそのうち…

ローカルでの修正

適当なディレクトリにチェックアウトして使う側のGemfileを正

+# gem 'hatenablog_publisher'
+gem 'hatenablog_publisher', path: '/home/vagrant/sandbox/hatenablog_publisher'

動作確認

デバッグしたりして動作確認する

リリース

version.rbを修正（パッチ、マイナーなど上げる）

Gemfile.lockはbuildすると自動でバージョン変えてくれる

ありがちエラー

There are files that need to be committed first.

未コミットがない状態だと実行できるのでstashなりcommitなりしておく

rake build
rake release

前提

前提としてRubyGemsのcredentialsが~/.gem/credentialsに必要

使う側で更新

bundle update hatenablog_publisher

bundle update --source hatenablog_publisher

2022-05-07追記

対象のGemだけ更新する場合

参考

bundle updateで特定のgemのみ更新する時に気をつけるべきポイント - 10nin blog

sourceで指定するより--conservativeのほうが良いらしい

bundle update --conservative activesupport

Redisに対してGemからpingする

Mon, 28 Dec 2020 00:00:00 GMT

Redisの疎通確認するときなどに

小規模であればkeys *で良いのでは感もあるがこちらのほうが目的にマッチしていて良さそう

Redisのみ使っている場合

require 'redis'
Redis.new.ping # "PONG"

Resque使っている場合はResqueに生えているのでそちらから使っても良い

Resqueから使う場合

require 'resque'
Resque.redis.ping # "PONG"

ちょっと中身読んだらNodeごとにpingだしているっぽいのでクラスタ組んでる場合は要件が変わってくるかも

RailsのRoutingでmountするアプリに制限を掛ける

Wed, 23 Dec 2020 00:00:00 GMT

今までRailsではDeviseを使って認証していたので

たとえばResque::Serverなどmountするアプリケーションを追加したい場合

次のようなコードをconfig/routes.rbに追記すれば特定ロールのユーザーに対してのみ公開できるようにできていた

config/routes.rb

require 'resque/server'
authenticate :user, ->(user) { user.admin? } do
  mount Resque::Server.new, :at => '/resque'
end

authenticateを使用して条件付きでmountさせるという感じ

ただ、deviseを使っていない場合はどうすれば良いんだろうこということで、どのような方法があるか調べた

constraints

特定のルーティングに対して制限を掛けられる

詳しい実装方法やパターンは次のドキュメントに載っている

Rails Routing from the Outside In — Ruby on Rails Guides

[https://guides.rubyonrails.org/routing.html#advanced-constraints:embed:cite]

クラスを定義する場合はmatches?メソッドを用意して真偽値を返す

引数にrequestが渡ってくるのでその中にidなり何なりをもたせておけばそれをもとにUserを持ってきてAdminか?みたいなチェックを行うことで制限を掛けられる

lambdaでその場に直接処理を書いてしまうことも可能

セッションにUserのIDなどをもたせておけばログイン時かつそのユーザーが管理者であればページを公開するといったことがサクッと書ける

サンプル

config/routes.rb

require 'resque/server'
mount Resque::Server.new, :at => '/resque', constraints: lambda { |req| req.session['user_id'].present? && User.find_by(id: req.session['user_id']).admin? }

今まで思考停止でやっていたので勉強になりました

TypeScriptの組み込み型関数Recordの覚書

Tue, 22 Dec 2020 00:00:00 GMT

よくあるパターンだとは思うけどいざ書いているとなかなか出てこないので残す時間を作って書いている

typeやinterfaceを定義せず変数定義時に型も定義する場合などよくやりがちなのが次のような書き方

const summary: {[key:string]: string} = .....

を書き換えると次のように書き換えられる

const summary: Record<string, string> = .....

集計ロジックの中の中間の変数などでよくやりがち

少し要素を追加してサンプルコードを書いてみる

サンプルコード

type Row = {
  name: string;
  value: number;
}
const rows: Row[] = [
  {name: 'foo', value: 1},
  {name: 'bar', value: 2},
  {name: 'baz', value: 3},
  {name: 'bar', value: 2},
];
const summary = rows.reduce<Record<string, Row>>((acc,current) => {
  const key = current.name;
  return {...acc, [key]: {...acc[key], value: (acc[key]?.value ?? 0) + current.value}}
}, {} );

console.log(summary); // { foo: { value: 1 }, bar: { value: 4 }, baz: { value: 3 } }

reduceの型定義

reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T): T;
reduce<U>(callbackfn: (previousValue: U, currentValue: T, currentIndex: number, array: T[]) => U, initialValue: U): U;

reduce<T>というようにデフォルトだとpreviousValueとcurrentValueの型が一緒だが型引数に独自の型を与えてあげることでinitialValueの型を定義できる

この辺の使い方など普段から使っていないと忘れてしまうので意識して使えるようにしたい

参考

TypeScriptの組み込み型関数 Recordの使いどころ - Qiita

Disallow empty functions (no-empty-function)

Mon, 21 Dec 2020 00:00:00 GMT

ESLintで怒られたときの対応

次のような形で何もしない関数をコールバックとして渡していて怒られた

fs.writeFile('/tmp/hoge.txt', 'hoge', null, () => {})

Disallow empty functions (no-empty-function)

()でくくって対応する

fs.writeFile('/tmp/hoge.txt', 'hoge', null, () => ({}))

出典どこだったか忘れてしまったのでメモ残しておく

curl: (3) [globbing] error: bad range specification after pos 3

Sat, 12 Dec 2020 00:00:00 GMT

tflintを入れてみようと思いREADMEにしたがいワンライナーで落としてこようと思ったら思わぬところでつまずいた

$ curl -L "$(curl -Ls https://api.github.com/repos/terraform-linters/tflint/releases/latest | grep -o -E "https://.+?_linux_amd64.zip")" -o tflint.zip && unzip tflint.zip && rm tflint.zip
curl: (3) [globbing] error: bad range specification after pos 3

glob…どこかで[]や{}使っているか?という感じだったがgrepが悪さをしていた

自分のシェル環境だとデフォルトでgrepの結果に色をつけるようにしていたのでその結果に対してcurlしようとすることでエスケープシーケンスも含まれてしまっていた

$ curl  -Ls https://api.github.com/repos/terraform-linters/tflint/releases/latest | grep -o -E "https://.+?_linux_amd64.zip" > url.txt
$ cat -v url.txt
^[[01;31m^[[Khttps://github.com/terraform-linters/tflint/releases/download/v0.22.0/tflint_linux_amd64.zip^[[m^[[K

もともとURLに[]や{}が含まれているパターンではないのでこの場合の対応は--globoffではだめだった

grep --color=noを追加することでcurl対象のURLがプレーンなテキストになるのでcurlできるようになった

エスケープシーケンスはよくやるので気を付けたい

Ansibleのデバッグ

Fri, 11 Dec 2020 00:00:00 GMT

毎度ググっているので残しておく

- debug: var=hoge

本当にこれだけw

Caller does not have permission

Thu, 10 Dec 2020 00:00:00 GMT

GCRへのpushで次のようなエラーに遭遇した

 Token exchange failed for project 'terraform-sample-111111'. Caller does not have permission 'storage.buckets.create'. To configure permissions, follow instructions at: https://cloud.google.com/container-registry/docs/access-control

「バケット管理者」は付けているしなんでだろう…としばらく悩んだが

docker push to Google Container Registry errors “Caller does not have permission ‘storage.buckets.create’”

で言及されているようにプロジェクトを指定しろっていうだけの話だった

ちゃんとエラーググりましょう案件

BigQueryでサンプルデータをサクッと作る

Wed, 09 Dec 2020 00:00:00 GMT

簡易的にでもサンプルデータが欲しい場合、わざわざデータを入れ込まなくてもサンプルデータを生成できる

WITH sample AS(
  SELECT * FROM UNNEST(ARRAY<STRUCT<start_date DATE, end_date DATE, item STRING, sales INT64>>
    [
      ("2020-08-01", "2020-11-30", "hoge", 100),
      ("2020-10-01", "2020-10-31", "fuga", 200)
    ]
  )
)
SELECT * FROM sample

結果

start_date	end_date	item	sales
2020-08-01	2020-11-30	hoge	100
2020-10-01	2020-10-31	fuga	200

記事書くときや説明とかに使える

Puppeteerのデバッグ用のテンプレート

Mon, 07 Dec 2020 00:00:00 GMT

最初の数行が定型文で貼り付けるだけにしたいので残しておく

REPL起動

node --experimental-repl-await

toplevelでawaitを使えるようになるオプションをつける（node12以降）

REPL

const puppeteer = require('puppeteer');
const browser = await puppeteer.launch({args: ['--no-sandbox', '--disable-setuid-sandbox']});
const page = await browser.newPage();

// この辺からはその時時に合わせて変える
let requestUrl = 'https://example.com'
await page.goto(requestUrl);
let rows = await page.$x('//article');
await (await rows[0].getProperty('textContent')).jsonValue();
await (await (await rows[0].$x('.//a[contains(@role, "link") and contains(@data-focusable, "true")]/time'))[0].getProperty('textContent')).jsonValue();

Error: React-Hot-Loader: AppContainer should be patched

Sun, 15 Nov 2020 00:00:00 GMT

次のリンクとまったく同じ状態になった

Gatsby doesn’t work with React 17 RC (Error: React-Hot-Loader: AppContainer should be patched) · Issue #26979 · gatsbyjs/gatsby

https://github.com/gatsbyjs/gatsby/issues/26979#issuecomment-696702777

のコメントにあるようにパッケージのバージョンを上げればOKのよう

react-hot-loader自体はgatsbyの依存モジュールでpackage.jsonには含まれていなかったため

気にせずyarn addしたら解決するかと思ったら解決せず…

yarn whyで確認すると2つのバージョンが混在する状態になっていた

$ yarn why react-hot-loader
yarn why v1.22.5
[1/4] Why do we have the module "react-hot-loader"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "react-hot-loader@4.13.0"
info Has been hoisted to "react-hot-loader"
info This module exists because it's specified in "devDependencies".
info Disk size without dependencies: "652KB"
info Disk size with unique dependencies: "1.96MB"
info Disk size with transitive dependencies: "2.8MB"
info Number of shared dependencies: 16
=> Found "gatsby#react-hot-loader@4.12.21"
info This module exists because "gatsby" depends on it.
info Disk size without dependencies: "288KB"
info Disk size with unique dependencies: "1.61MB"
info Disk size with transitive dependencies: "2.45MB"
info Number of shared dependencies: 16
Done in 1.94s.

新たにインストールしたほうは呼ばれていないっぽい

ということで次の記事を参考にしてyarn.lockのgatsby#react-hot-loaderの部分を削除して再度yarn installで解決した

yarn upgrade で更新できない間接的な依存パッケージだけをアップグレードするには - Qiita

[https://qiita.com/uasi/items/ca440a750a77ca62321b:embed:cite]

直接yarn.lock触るのはちょっと気が引けたので別の機会で他の方法がないか調べてみようと思う

RubyでAPIレスポンスを直接クラウドストレージにputする

Sat, 14 Nov 2020 00:00:00 GMT

いまさら感はあるがよくどうだったっけーみたいな感じでググっているのでここらで残しておく

よくあるケースだと思うが次のようなパターンのとき

APIからデータを取得
データをストレージに保存

ファイルを生成してそれをS3やGCSへPUTみたいなのはよく見るがわざわざ一時的にファイルへ保存しなくても良い場合

StringIO.newした値を渡すことで直接PUTできる

StringIOがIOのinterfaceを扱える(readできる)のでファイルを扱っているのと同様に扱える

サンプルでTooglのAPIレスポンスをGCSへPUTするスクリプトを書いた

app.rb

#!/usr/bin/env ruby

require 'json'
require 'net/https'
require 'base64'
require 'google/cloud/storage'

def put_object(data)
  bucket_name = 'dev-raw-data'
  path = 'hoge/res.json'
  client = Google::Cloud::Storage.new
  bucket = client.bucket bucket_name
  io = StringIO.new data

  bucket.create_file io, path
end

def main
  token = ENV['TOGGL_API_TOKEN']
  workspace_id = ARGV[0]
  from = '2020-01-01'
  to   = '2020-02-01'

  params = {
    workspace_id: workspace_id,
    since: from,
    until: to,
    user_agent: 'api_test'
  }

  uri = URI.parse 'https://toggl.com/reports/api/v2/details'
  uri.query = URI.encode_www_form params

  http = Net::HTTP.new uri.host, uri.port
  http.use_ssl = true
  http.verify_mode = OpenSSL::SSL::VERIFY_NONE

  headers = { Authorization: "Basic #{Base64.encode64("#{token}:api_token")}" }

  res = http.request_get uri, headers
  put_object res.body
end

main

TerraformでGCSのバケットを作ってみる

Tue, 10 Nov 2020 00:00:00 GMT

とりあえず動かすところから

GCPでやってみる

サービスアカウントの作成

GUIからある程度の権限をもたせて作成した

キーファイルのパスをGOOGLE_CLOUD_KEYFILE_JSON環境変数に格納する

export GOOGLE_CLOUD_KEYFILE_JSON=path_to/account.json

ディレクトリ構成

.
├── provider.tf
├── README.md
├── storage.tf
└── version.tf

0 directories, 4 files

とりあえずのサンプルとしてフラットにした

version.tf

terraform {
  required_version = "~>0.13.5"
}

provider.tf

provider "google" {
  version = "~> 3.45.0"
  project     = "terraform-sample-1111111"
  region      = "asia-northeast1"
}

storage.tf

resource "google_storage_bucket" "private-bucket" {
  name          = "test-bucket-1234"
  location      = "asia-northeast1"
  storage_class = "REGIONAL"

  labels = {
    app = "test-app"
    env = "test"
  }
}

$ terraform init

$ terraform plan
Refreshing Terraform state in-memory prior to plan...
The refreshed state will be used to calculate this plan, but will not be
persisted to local or remote state storage.


------------------------------------------------------------------------

An execution plan has been generated and is shown below.
Resource actions are indicated with the following symbols:
  + create

Terraform will perform the following actions:

  # google_storage_bucket.private-bucket will be created
  + resource "google_storage_bucket" "private-bucket" {
      + bucket_policy_only          = (known after apply)
      + force_destroy               = false
      + id                          = (known after apply)
      + labels                      = {
          + "app" = "test-app"
          + "env" = "test"
        }
      + location                    = "ASIA-NORTHEAST1"
      + name                        = "test-bucket-1111111"
      + project                     = (known after apply)
      + self_link                   = (known after apply)
      + storage_class               = "REGIONAL"
      + uniform_bucket_level_access = (known after apply)
      + url                         = (known after apply)
    }

Plan: 1 to add, 0 to change, 0 to destroy.

------------------------------------------------------------------------

Note: You didn't specify an "-out" parameter to save this plan, so Terraform
can't guarantee that exactly these actions will be performed if
"terraform apply" is subsequently run.

$ terraform apply
An execution plan has been generated and is shown below.
Resource actions are indicated with the following symbols:
  + create

Terraform will perform the following actions:

  # google_storage_bucket.private-bucket will be created                                                                                               + resource "google_storage_bucket" "private-bucket" {
      + bucket_policy_only          = (known after apply)
      + force_destroy               = false
      + id                          = (known after apply)
      + labels                      = {
          + "app" = "test-app"
          + "env" = "test"
        }
      + location                    = "ASIA-NORTHEAST1"
      + name                        = "test-bucket-1234"
      + project                     = (known after apply)
      + self_link                   = (known after apply)
      + storage_class               = "REGIONAL"
      + uniform_bucket_level_access = (known after apply)                                                                                                  + url                         = (known after apply)
    }

Plan: 1 to add, 0 to change, 0 to destroy.

Do you want to perform these actions?
  Terraform will perform the actions described above.
  Only 'yes' will be accepted to approve.

  Enter a value: yes

GUI上で確認して完了

単品であればドキュメント見ながら書くだけでOKなので簡単

個人的にはIAM周りがまだ良くわかっていないので素振りして理解を進めたい

参考

Terraformツールを使ってGCPリソース管理 | DevSamurai

gcloudでデフォルトリージョンの設定

Mon, 09 Nov 2020 00:00:00 GMT

gcloudコマンドでいろいろ試していたりすると毎度リージョンを指定しわすれてUSになったりすることがあって面倒だったので調べた

設定の変更

$ gcloud compute project-info add-metadata \
    --metadata google-compute-default-region=asia-northeast1,google-compute-default-zone=asia-northeast1-a

確認

$ gcloud compute project-info describe --project sample-project-1111111
commonInstanceMetadata:
  fingerprint: 4HM7BFP53kU=
  items:
  - key: google-compute-default-region
    value: asia-northeast1
  - key: google-compute-default-zone
    value: asia-northeast1-a
  kind: compute#metadata
.....
.....
.....

デフォルトリージョンまたはゾーンの変更

Vim起動時のPowerlineのエラー

Sun, 08 Nov 2020 00:00:00 GMT

何かのタイミングでVimの起動時にエラーが出るようになってしまった

You need vim compiled with Python 2.6, 2.7 or 3.2 and later support
for Powerline to work. Please consult the documentation for more
details.
Press ENTER or type command to continue

--enable-pythoninterpつけてインストールし直したら解決した

git clone https://github.com/vim/vim.git /tmp/vim
cd /tmp/vim

./configure \
  --enable-fail-if-missing \
  --with-features=huge \
  --enable-gpm \
  --disable-selinux \
  --enable-perlinterp \
  --enable-pythoninterp \
  --enable-cscope \
  --enable-fontset \
  --enable-multibyte

make
make install

digest-crc gemがインストールできない

Sat, 07 Nov 2020 00:00:00 GMT

CloudRun Rubyのチュートリアルを進めた後にgoogle-cloudのGemを使っていろいろやってみようとインストールして見たら怒られた

Dockerfile

FROM ruby:2.7-slim

WORKDIR /usr/src/app
COPY Gemfile Gemfile.lock ./
ENV BUNDLE_FROZEN=true
RUN gem install bundler && bundle install --without test

COPY . ./

CMD ["ruby", "./app.rb"]

Gemfile

source "https://rubygems.org"

gem "google-cloud-storage"
gem "google-cloud-secret_manager"
gem "sinatra", "~>2.0"

group :test do
  gem "rack-test"
  gem "rest-client"
  gem "rspec"
  gem "rspec_junit_formatter"
  gem "rubysl-securerandom"
end

Installing digest-crc 0.6.1 with native extensions
Gem::Ext::BuildError: ERROR: Failed to build gem native extension.

    current directory: /usr/local/bundle/gems/digest-crc-0.6.1/ext/digest
/usr/local/bin/ruby -I/usr/local/lib/ruby/2.7.0/rubygems -rrubygems
/usr/local/lib/ruby/gems/2.7.0/gems/rake-13.0.1/exe/rake
RUBYARCHDIR\=/usr/local/bundle/extensions/x86_64-linux/2.7.0/digest-crc-0.6.1
RUBYLIBDIR\=/usr/local/bundle/extensions/x86_64-linux/2.7.0/digest-crc-0.6.1
/usr/local/bin/ruby -S extconf.rb
checking for stdint.h... *** extconf.rb failed ***
Could not create Makefile due to some reason, probably lack of necessary
libraries and/or headers.  Check the mkmf.log file for more details.  You may
need configuration options.

Provided configuration options:
        --with-opt-dir
        --without-opt-dir
        --with-opt-include
        --without-opt-include=${opt-dir}/include
        --with-opt-lib
        --without-opt-lib=${opt-dir}/lib
        --with-make-prog
        --without-make-prog
        --srcdir=.
        --curdir
        --ruby=/usr/local/bin/$(RUBY_BASE_NAME)
        --with-stdint-dir
        --without-stdint-dir
        --with-stdint-include
        --without-stdint-include=${stdint-dir}/include
        --with-stdint-lib
        --without-stdint-lib=${stdint-dir}/lib
/usr/local/lib/ruby/2.7.0/mkmf.rb:471:in `try_do': The compiler failed to
generate an executable file. (RuntimeError)
You have to install development tools first.
        from /usr/local/lib/ruby/2.7.0/mkmf.rb:613:in `try_cpp'
        from /usr/local/lib/ruby/2.7.0/mkmf.rb:1124:in `block in have_header'
        from /usr/local/lib/ruby/2.7.0/mkmf.rb:971:in `block in checking_for'
        from /usr/local/lib/ruby/2.7.0/mkmf.rb:361:in `block (2 levels) in postpone'
        from /usr/local/lib/ruby/2.7.0/mkmf.rb:331:in `open'
        from /usr/local/lib/ruby/2.7.0/mkmf.rb:361:in `block in postpone'
        from /usr/local/lib/ruby/2.7.0/mkmf.rb:331:in `open'
        from /usr/local/lib/ruby/2.7.0/mkmf.rb:357:in `postpone'
        from /usr/local/lib/ruby/2.7.0/mkmf.rb:970:in `checking_for'
        from /usr/local/lib/ruby/2.7.0/mkmf.rb:1123:in `have_header'
        from extconf.rb:3:in `<main>'
rake aborted!
Command failed with status (1): [/usr/local/bin/ruby -S extconf.rb...]
/usr/local/bundle/gems/digest-crc-0.6.1/ext/digest/Rakefile:32:in `block (3
levels) in <top (required)>'
/usr/local/bundle/gems/digest-crc-0.6.1/ext/digest/Rakefile:31:in `chdir'
/usr/local/bundle/gems/digest-crc-0.6.1/ext/digest/Rakefile:31:in `block (2
levels) in <top (required)>'
Tasks: TOP => default => crc15/crc15_ext.so => crc15/Makefile
(See full trace by running task with --trace)

rake failed, exit code 1

Gem files will remain installed in /usr/local/bundle/gems/digest-crc-0.6.1 for
inspection.
Results logged to
/usr/local/bundle/extensions/x86_64-linux/2.7.0/digest-crc-0.6.1/gem_make.out

An error occurred while installing digest-crc (0.6.1), and Bundler cannot
continue.
Make sure that `gem install digest-crc -v '0.6.1' --source
'https://rubygems.org/'` succeeds before bundling.

In Gemfile:
  google-cloud-storage was resolved to 1.29.1, which depends on
    digest-crc
The command '/bin/sh -c gem install bundler && bundle install --without test' returned a non-zero code: 5
ERROR
ERROR: build step 0 "gcr.io/cloud-builders/docker" failed: step exited with non-zero status: 5

-----------------------------------------------------------------------------------------------------------------------------------------------------

ERROR: (gcloud.builds.submit) build 57e77985-ae0b-40b7-b0d7-04ce7bcbd099 completed with status "FAILURE"

ちょっと調べただけだとわからなかった

ruby2.7-slim -> ruby2.7にしたらインストールできたのでいったんそれでも良いかと思ったがよく読んだら

You have to install development tools first.ということで次の対応でインストールできるようにした

 COPY Gemfile Gemfile.lock ./
 ENV BUNDLE_FROZEN=true
+
+RUN apt-get update && apt-get install -y \
+    build-essential

もっと詳しい中身までは追っていない…

gcloudコマンドのインストール

Fri, 30 Oct 2020 00:00:00 GMT

以前はyumでインストールしていたが更新しようとしたらエラーに阻まれ困ってしまったので調べたらインストーラがあるらしい

Google Cloud SDK インストーラの使用 | Cloud SDK のドキュメント

既存のパッケージマネージャーで使っているものを削除してから次のようにコマンドをたたくだけ

curl https://sdk.cloud.google.com | bash
exec -l $SHELL

別途インストールされたディレクトリへのパスを追加する必要がある

特にエラーに阻まれることなくインストールできたので今後この方法で行こうと思う

本当インストールに時間掛けるの無駄以外の何物でもないので…

追記（2020-12-03）

上記だけだとbqやgsutilが入らなかったので次の方法のほうが良いかも

Google Cloud SDK のインストール | Cloud SDK のドキュメント

$ curl -O https://dl.google.com/dl/cloudsdk/channels/rapid/downloads/google-cloud-sdk-319.0.0-linux-x86_64.tar.gz
$ tar zxvf google-cloud-sdk-319.0.0-linux-x86_64.tar.gz
$ cd google-cloud-sdk
$ ./google-cloud-sdk/install.sh

追記（2022-06-25）

version 391ではインストールスクリプトの置き場所が変わってた

$ curl -O https://dl.google.com/dl/cloudsdk/channels/rapid/downloads/google-cloud-sdk-391.0.0-linux-x86_64.tar.gz
$ tar zxvf google-cloud-sdk-391.0.0-linux-x86_64.tar.gz
$ cd google-cloud-sdk
$ ./install.sh

特定の容量のダミーファイルを生成する

Fri, 23 Oct 2020 00:00:00 GMT

$ dd if=/dev/zero of=1K_M.out bs=1K count=1
1+0 records in
1+0 records out
1024 bytes (1.0 kB) copied, 0.000412943 s, 2.5 MB/s

$ ls -al 1K_M.out
-rw-rw-r-- 1 vagrant vagrant 1024 Oct 24 04:46 1K_M.out

ディスク的には4KBで固定のよう

$ du -sh 1K_M.out
4.0K    1K_M.out

1K_M.outというファイル名にnull文字で埋める、1KBで1ファイル作成する

容量によって確認したいことが変わる場合など容量を合わせていくの意外と面倒だったりするのでそういうときに使える

AnsibleでAWS CLI v2をインストールする

Thu, 15 Oct 2020 00:00:00 GMT

dotfilesをAnsibleで管理していてAWS CLI v2もインストールできるようにroleを追加した

動作対象はCentOSやUbuntu

roles/awscli/vars/main.yml

---
awscli_version: 2.0.50
awscli:
  src: https://awscli.amazonaws.com/awscli-exe-linux-x86_64-{{ awscli_version }}.zip
  zip: awscli-{{ awscli_version }}.zip

roles/awscli/tasks/main.yml

---
- name: exist awscli v2
  command: which aws
  environment:
    PATH: "/usr/local/bin:{{ ansible_env.PATH }}"
  register: exist_awscli
  changed_when: false
  ignore_errors: true

- name: get awscli version
  shell: "aws --version 2>&1 | grep -oP '(?<=aws-cli\\/)\\d+\\.\\d+\\.\\d+' "
  environment:
    PATH: "/usr/local/bin:{{ ansible_env.PATH }}"
  register: version_in_awscli
  changed_when: false
  ignore_errors: true
  when:
    exist_awscli.rc == 0

- block:
  - name: get zip
    get_url:
      url: "{{ awscli.src }}"
      dest: "/tmp/{{ awscli.zip }}"

  - name: unarchive zip
    unarchive:
      src: /tmp/{{ awscli.zip }}
      dest: /tmp/
      copy: no

  - name: install
    command:
      cmd: ./aws/install --update
      chdir: /tmp

  when:
    exist_awscli.rc != 0
    or ( version_in_awscli is defined and version_in_awscli.stdout.find(awscli_version) == -1 )

ここのコードをroleとして呼び出せば実行できる

コマンドの存在確認だけでなくバージョンまで見て指定バージョンでなければ再度インストールするようにしている

このrole単体で使う場合はunzipがないはずなので別途どこかでインストールさせておく必要がある

aws --versionの出力先が標準エラーだったのでリダイレクトしてバージョン番号を抽出している

また次のサイトでgrepを使い特定の箇所だけを抜き出すというのをやった

grepの-oオプションと-Pオプションの組み合わせが便利 - Gre’s Blog

こういう感じの処理はよくやるので覚えておきたい

実際の差分は次のPRにある

Feature/ansible awscli v2 by swfz · Pull Request #222 · swfz/dotfiles

PixelaのデータをExportする

Thu, 01 Oct 2020 00:00:00 GMT

ただただデータをためて習慣化とかまでは良いんだけどいくつかのデータを使ってゴニョゴニョしたいときにExportしたいなと思った

APIのエンドポイントとしては提供されていないが組み合わせれば取得できそうだったので書いてみた

clientライブラリは下記を使った

sue445/pixela: Pixela API client for Ruby

require 'pixela'

client = Pixela::Client.new(username: 'swfz', token: ENV['PIXELA_TOKEN'])

# dates
# ap client.graph('m-issue-activity').pixel_dates
# pixel
# ap client.graph('m-issue-activity').pixel(Date.today).get

id = 'm-issue-activity'
from = Date.today - 8
to = Date.today - 1
pixels = client.graph(id).pixel_dates(from: from, to: to).map do |date|
  value = client.graph(id).pixel(date).get['quantity']
  { date: date.strftime('%Y%m%d'), quantity: value }
end

File.write("#{id}.json", pixels.to_json)

m-issue-activity

[
  {
    "date": "20200919",
    "quantity": "3"
  },
  {
    "date": "20200920",
    "quantity": "4"
  },
  {
    "date": "20200921",
    "quantity": "3"
  },
  {
    "date": "20200922",
    "quantity": "17"
  },
  {
    "date": "20200923",
    "quantity": "12"
  },
  {
    "date": "20200924",
    "quantity": "27"
  },
  {
    "date": "20200925",
    "quantity": "33"
  },
  {
    "date": "20200926",
    "quantity": "2"
  }
]

SlackのAPI経由でリンク文字列を生成する

Thu, 24 Sep 2020 00:00:00 GMT

忘れるので備忘録

Formatting text for app surfaces | Slack

SlackのAPI経由でtextを生成において、Markdown記法が使えるもののリンクなどは独自の記法になっている

<url|文字列>という感じ

"blocks": [
  {
    "type": "context",
    "elements": [
      {
        "type": "mrkdwn",
        "text": "Location: *Dogpatch* <https://github.com/swfz|swfz>)"
      }
    ]
  }
]

めちゃめちゃ細かい話だがスペースとかが入ると変換してくれない

失敗パターン

< https://github.com/swfz | swfz>

成功パターン

<https://github.com/swfz | swfz>

LocalStackを使う(SSMパラメータストア)

Mon, 21 Sep 2020 00:00:00 GMT

準備

git clone https://github.com/localstack/localstack.git
cd localstack
docker-compose up -d

SSM

パラメータストアのモックにも対応している

この機能を開発環境でモックできるのはうれしい

$ aws --profile localstack --endpoint-url=http://192.168.30.94:4583 ssm put-parameter --name 'test' --type "string" --value "hello" --region ap-northeast-1
{
    "Version": 1
}

$ aws --profile localstack --endpoint-url=http://192.168.30.94:4583 ssm get-parameters --name 'test' --region ap-northeast-1
{
  "Parameters": [
    {
      "Name": "test",
      "Type": "string",
      "Value": "hello",
      "Version": 1
    }
  ],
  "InvalidParameters": []
}

SecureStringも作れるっぽいが暗号化まではしてくれてない模様

AWSだとget-parametersで取得したValueは暗号化された値が出力される

$ aws --profile localstack --endpoint-url=http://192.168.30.94:4583 ssm put-parameter --name secure_key --type SecureString --value "XXXXXXXXXX" --region ap-northeast-1
{
    "Version": 1
}

$ aws --profile localstack --endpoint-url=http://192.168.30.94:4583 ssm get-parameters --name secure_key  --region ap-northeast-1
{
    "Parameters": [
        {
            "Name": "secure_key",
            "Type": "SecureString",
            "Value": "kms:default:XXXXXXXXXX",
            "Version": 1
        }
    ],
    "InvalidParameters": []
}

参考

Secure String パラメータについて - AWS Systems Manager

docker-composeからmysqldumpコマンドを実行する

Fri, 18 Sep 2020 00:00:00 GMT

docker-composeからmysqldumpやdumpファイルの入れ込みを行う

dump

docker-compose exec database mysqldump -u root -phoge hoge > develop.sql

入れ込み

docker-compose exec -T database mysql -u root -phoge hoge < hoge_dump.sql

-T がポイント

    -T                Disable pseudo-tty allocation. By default `docker-compose exec`
                      allocates a TTY.

Rubyでmarkdownのmetadata(front_matter)をパースする

Mon, 14 Sep 2020 00:00:00 GMT

metadata

Gatsbyなどでも使っているMarkdownにタイトルなどの情報を付与するための構文

front_matterと言うらしい

RubyでMarkdownをパースしてはてなブログにPOSTするためのスクリプトを書いていてこのfront_matterにも対応させるかーという流れになった

YAMLのGemでパースできるかと思ってちょっと調べてみたがそうでもなかった

ruby - How to include metadata in a template file? - Stack Overflow

上記試してみたがPsych::SyntaxErrorが出てしまい面倒になったのでGemを探すことにした

結局こっちを使うことに

waiting-for-dev/front_matter_parser: Ruby library to parse files or strings with a front matter. It has automatic syntax detection.

中身的には結構愚直にやってた

サンプル

hoge.md

---
title: サンプルタイトル
date: 2020-09-14
description: "front_matter_parser"
tags:
  - Ruby
  - Markdown
---


## sub title1
- list1
- list2
- list2

## sub title2

hoge fuga

parse

[8] pry(main)> yaml_loader = FrontMatterParser::Loader::Yaml.new(whitelist_classes: [Time, Date])
=> #<FrontMatterParser::Loader::Yaml:0x00007fffdb031d20 @whitelist_classes=[Time, Date]>
[9] pry(main)> parsed = FrontMatterParser::Parser.parse_file('hoge.md', loader: yaml_loader)
=> #<FrontMatterParser::Parsed:0x00007fffdaac8c58
 @content="## sub title1\n- list1\n- list2\n- list2\n\n## sub title2\n\nhoge fuga\n\n",
 @front_matter=
  {"title"=>"サンプルタイトル",
   "date"=>#<Date: 2020-09-14 ((2459107j,0s,0n),+0s,2299161j)>,
   "description"=>"front_matter_parser",
   "tags"=>["Ruby", "Markdown"]}>

yaml_loaderでwhitelistにDateやTimeなど日付関連のクラスをwhitelistに追加している

これを追加していないと日付や時間のフォーマットが入っていた場合に下記のように怒られてしまう

Psych::DisallowedClass: Tried to load unspecified class: Date

とりあえず使うならこのくらいでOKそう

2022-05-08追記

追記時点では執筆時と違いallowlistとして指定する必要がある

READMEもそういう記述になっている

waiting-for-dev/front_matter_parser: Ruby library to parse files or strings with a front matter. It has automatic syntax detection.

差分としては下記のようになる

- yaml_loader = FrontMatterParser::Loader::Yaml.new(whitelist_classes: [Time, Date])
+ yaml_loader = FrontMatterParser::Loader::Yaml.new(allowlist_classes: [Time, Date])

GatsbyでpageQueryに任意のパラメータを渡す

Thu, 10 Sep 2020 00:00:00 GMT

Gatsbyで動的ページを生成する際にGraphQLで問い合わせするクエリも変数を渡したいというパターンはよくある

ググっても出てこないなーなんて思ってたらよく読むとドキュメントに書いてあった

Gatsby Node APIs | Gatsby

          // The context data can also be used as
          // arguments to the page GraphQL query.

とあり、createPageでページを生成するときにcontextとしてデータを渡してあげるとその変数をGraphQLのクエリでも参照できる

サンプルを一部抜粋する

gatsby-node.js

    const startDate = moment(`${year}-01-01`).format("YYYY-MM-DD")
    const endDate = moment(`${year}-01-01`).add(1, 'years').format("YYYY-MM-DD")
    createPage({
      path: `/archives/${year}`,
      component: archiveTemplate,
      context: {
        year: year,
        startDate: startDate,
        endDate: endDate
      }
    })

archive.tsx

export const pageQuery = graphql`
  query($startDate: Date, $endDate: Date) {
    site {
      siteMetadata {
        title
      }
    }
    allMarkdownRemark(
      limit: 1000
      sort: { fields: [frontmatter___date], order: DESC }
      filter: { frontmatter: { date: { gte: $startDate, lt: $endDate }}}
    ) {
      totalCount
      edges {
        node {
          fields {
            slug
          }
          frontmatter {
            title
            date(formatString: "YYYY-MM-DD")
            tags
          }
        }
      }
    }
  }
`

context.startDate, context.endDateをpageQueryで参照している

Null合体演算子

Fri, 14 Aug 2020 00:00:00 GMT

Null合体演算子

しらなかったのでメモ

よくあるデフォルト値を代入するときなどに使うやつ

`||`との違い

||

左辺がfalsyな値なら右辺を返す

falsyな値とはnull,undefined,0と空文字列など

??

左辺がnullまたはundefinedの場合に右の値を返す

0や空文字列の場合はそちらを返したい場合などに有効

実行例

??

const value1 = null ?? 'default string';
console.log(value1);
// expected output: "default string"

const value2 = undefined ?? 'default string';
console.log(value2);
// expected output: "default string"

const value3 = "" ?? "default string";
console.log(value3);
// expected output: ""

const value4 = 0 ?? 42;
console.log(value4);
// expected output: 0

const value5 = [] ?? [1,2,3];
console.log(value5);
// expected output: []

const value6 = {} ?? "{a: 'b'}"
console.log(value6);
// expected output: {}

||

const value1 = null || 'default string';
console.log(value1);
// expected output: "default string"

const value2 = undefined || 'default string';
console.log(value2);
// expected output: "default string"

const value3 = "" || "default string";
console.log(value3);
// expected output: "default string"

const value4 = 0 || 42;
console.log(value4);
// expected output: 42

const value5 = [] || [1,2,3];
console.log(value5);
// expected output: []

const value6 = {} || "{a: 'b'}"
console.log(value6);
// expected output: {}

参考

Null合体演算子 - JavaScript | MDN

TypeScriptのOptionalChaining

Thu, 13 Aug 2020 00:00:00 GMT

TypeScript3.7からOptional Chainingが使えるようになっていた

Rubyでいうボッチ演算子

?.を挟むことでnullやundefinedの可能性があっても毎度チェックせずともよしなにやってくれる

関数呼び出しも同様に書くことができ次のようなパターンで記述可能

hoge?.fuga
hoge?.[0]
hoge?.(args)

ネストの深いJSONなどで存在チェックをする際に楽に書けるようになる

GAのAPIレスポンスの特定のレコードを取得する

-    if (response && response.data && response.data.reports && response.data.reports[0] && response.data.reports[0].data && response.data.reports[0].data.rows) {
+    if (response?.data?.reports?.[0]?.data?.rows) {
       return response.data.reports[0].data.rows;
     }
     else {
       return [];
     }

Null合体演算子と組み合わせると次のように書くことができ、さらにスッキリする

左辺がnullやundefinedの場合はから配列を返す

return response?.data?.reports?.[0]?.data?.rows ?? [];

参考

Optional chaining - JavaScript | MDN

WindowsのエクスプローラからWSLなどのファイルを扱う

Thu, 30 Jul 2020 00:00:00 GMT

Windows <-> WSL間でのファイルのやりとり

Windows -> WSL上ファイルへのアクセス

エクスプローラで\\wsl$と入力するとファイル群を閲覧できる

Windows -> VM + sambaへのアクセス

エクスプローラで\\192.168.30.11\...と入力するとファイル群を閲覧できる

WSL -> Windows上ファイルへのアクセス

Windows上のファイルへのアクセスは次のように行う

ls /mnt/c/Users/.....

S3利用料をバケット毎に詳細に出すための情報

Sat, 18 Jul 2020 00:00:00 GMT

かなり面倒で分かりづらかったのでメモ程度に残しておく

手順

使用状況レポートをDLする

使用状況レポートのダウンロード
次の項目を指定する
- サービス
- 使用タイプ
- オペレーション
- 期間
- 詳細度（粒度）

Resource列にバケット名が入ってくるので区別する

次の3点に関してそれぞれ使用状況レポートから計算する

ストレージ容量
- TimedStorage-ByteHrsなどを対象
- バイト時間を課金GB月に変換する
リクエストカウント
- Requests-Tier2などを対象
  - Tier1
  - Tier2
- リクエストのタイプにより料金が違うのでそれぞれ集計し、1000リクエストごとの料金を掛け合わせる
データ転送量
- 次の3点を考慮して計算する
  - Outに関して料金が発生する
  - 月の使用量によってレートが変わる
  - インターネットかリージョンかでもレートが変わる
    - インターネット -> DataTransfer-Out-Bytes
    - リージョン間 -> AWS-Out-Bytes,C3DataTransfer-Out-Bytes
    - S3G-DataTransfer-Out-Bytesはリージョン間に該当すると思われる
    - Cloudfrontへの転送は料金がかからない
      - CloudFront-Out-Bytes

使用レポートの項目を読み込んで必要な項目だけ抜き出して計算する必要がある

参考

AWS の Amazon S3 請求および使用状況レポートを理解する - Amazon Simple Storage Service

S3 バケットの請求および使用状況レポート - Amazon Simple Storage Service

Amazon S3 用の AWS 使用状況レポート - Amazon Simple Storage Service

料金 - Amazon S3 ｜AWS

CentOS7系でのrmagickのインストール

Wed, 15 Jul 2020 00:00:00 GMT

サクッとrmagickインストールできなかったので覚え書き

Gem::Ext::BuildError: ERROR: Failed to build gem native extension.

    current directory: /home/vagrant/.anyenv/envs/rbenv/versions/2.5.7/lib/ruby/gems/2.5.0/gems/rmagick-2.15.4/ext/RMagick
/home/vagrant/.anyenv/envs/rbenv/versions/2.5.7/bin/ruby -r ./siteconf20200715-2470-bpwp3n.rb extconf.rb
checking for gcc... yes
checking for Magick-config... no
checking for pkg-config... yes
Package MagickCore was not found in the pkg-config search path.
Perhaps you should add the directory containing `MagickCore.pc'
to the PKG_CONFIG_PATH environment variable
No package 'MagickCore' found
checking for outdated ImageMagick version (<= 6.4.9)... *** extconf.rb failed ***
Could not create Makefile due to some reason, probably lack of necessary
libraries and/or headers.  Check the mkmf.log file for more details.  You may
need configuration options.

Provided configuration options:
        --with-opt-dir
        --without-opt-dir
        --with-opt-include
        --without-opt-include=${opt-dir}/include
        --with-opt-lib
        --without-opt-lib=${opt-dir}/lib
        --with-make-prog
        --without-make-prog
        --srcdir=.
        --curdir
        --ruby=/home/vagrant/.anyenv/envs/rbenv/versions/2.5.7/bin/$(RUBY_BASE_NAME)

To see why this extension failed to compile, please check the mkmf.log which can be found here:

  /home/vagrant/.anyenv/envs/rbenv/versions/2.5.7/lib/ruby/gems/2.5.0/extensions/x86_64-linux/2.5.0/rmagick-2.15.4/mkmf.log

extconf failed, exit code 1

Gem files will remain installed in /home/vagrant/.anyenv/envs/rbenv/versions/2.5.7/lib/ruby/gems/2.5.0/gems/rmagick-2.15.4 for inspection.
Results logged to /home/vagrant/.anyenv/envs/rbenv/versions/2.5.7/lib/ruby/gems/2.5.0/extensions/x86_64-linux/2.5.0/rmagick-2.15.4/gem_make.out

An error occurred while installing rmagick (2.15.4), and Bundler cannot continue.
Make sure that `gem install rmagick -v '2.15.4' --source 'https://rubygems.org/'` succeeds before bundling.

In Gemfile:
  rmagick

ImageMagickインストールするだけではダメだった

ほかにImageMAgicka-c++が必要みたい

sudo yum install ImageMagick-c++-devel

それでもダメだった

Gem::Ext::BuildError: ERROR: Failed to build gem native extension.

    current directory: /home/vagrant/.anyenv/envs/rbenv/versions/2.5.7/lib/ruby/gems/2.5.0/gems/ruby-filemagic-0.7.0/ext/filemagic
/home/vagrant/.anyenv/envs/rbenv/versions/2.5.7/bin/ruby -r ./siteconf20200715-5698-19exkam.rb extconf.rb
checking for -lgnurx... no
checking for magic_open() in -lmagic... no
*** ERROR: missing required library to compile this module
*** extconf.rb failed ***
Could not create Makefile due to some reason, probably lack of necessary
libraries and/or headers.  Check the mkmf.log file for more details.  You may
need configuration options.

Provided configuration options:
        --with-opt-dir
        --without-opt-dir
        --with-opt-include
        --without-opt-include=${opt-dir}/include
        --with-opt-lib
        --without-opt-lib=${opt-dir}/lib
        --with-make-prog
        --without-make-prog
        --srcdir=.
        --curdir
        --ruby=/home/vagrant/.anyenv/envs/rbenv/versions/2.5.7/bin/$(RUBY_BASE_NAME)
        --with-magic-dir
        --without-magic-dir
        --with-magic-include
        --without-magic-include=${magic-dir}/include
        --with-magic-lib
        --without-magic-lib=${magic-dir}/lib
        --with-gnurx-dir
        --without-gnurx-dir
        --with-gnurx-include
        --without-gnurx-include=${gnurx-dir}/include
        --with-gnurx-lib
        --without-gnurx-lib=${gnurx-dir}/lib
        --with-gnurxlib
        --without-gnurxlib
        --with-magiclib
        --without-magiclib

To see why this extension failed to compile, please check the mkmf.log which can be found here:

  /home/vagrant/.anyenv/envs/rbenv/versions/2.5.7/lib/ruby/gems/2.5.0/extensions/x86_64-linux/2.5.0/ruby-filemagic-0.7.0/mkmf.log

extconf failed, exit code 1

Gem files will remain installed in /home/vagrant/.anyenv/envs/rbenv/versions/2.5.7/lib/ruby/gems/2.5.0/gems/ruby-filemagic-0.7.0 for inspection.
Results logged to /home/vagrant/.anyenv/envs/rbenv/versions/2.5.7/lib/ruby/gems/2.5.0/extensions/x86_64-linux/2.5.0/ruby-filemagic-0.7.0/gem_make.out

An error occurred while installing ruby-filemagic (0.7.0), and Bundler cannot continue.
Make sure that `gem install ruby-filemagic -v '0.7.0' --source 'https://rubygems.org/'` succeeds before bundling.

In Gemfile:
  ruby-filemagic

file-develというパッケージも必要だった

sudo yum install file-devel

参考

file-devel

DOCKER_HOSTを指定してVM外からdockerを操作できるようにする

Tue, 14 Jul 2020 00:00:00 GMT

前提環境

Windows 10
CentOS7
IntelliJ 2020.1.2

ホストのIntelliJでVM上のdockerを使って開発する場合

dockerのAPIをたたくためにTCP接続を可能にする必要がある

CentOSの場合、docker serviceの起動オプションを変える

設定

/usr/lib/systemd/system/docker.service

[Service]
- ExecStart=/usr/bin/dockerd -H unix://
+ ExecStart=/usr/bin/dockerd -H tcp://0.0.0.0:2375

リロード

systemctl daemon-reload
service docker start

Project Structure -> + -> Add Ruby SDK

Docker Composeを選んでNewボタンを押下

API URLを指定する箇所があるのでVMのURLを設定する

VMからの操作

そのままコマンド実行するとdocker daemonの起動オプションを変えたのでエラーが出る

エラー

ERROR: Couldn't connect to Docker daemon at http+docker://localhost - is it running?

If it's at a non-standard location, specify the URL with the DOCKER_HOST environment variable.

対応

実行時にDOCKER_HOSTの値を読みに行き、設定があれば問い合わせるようになっている

export DOCKER_HOST=192.168.30.95:2375

これでVMからのdockerコマンドの実行も問題なく実行できるようになった

ES2015のMap,Setで重複カット

Mon, 29 Jun 2020 00:00:00 GMT

Set,Mapを使うことで今までごにょごにょしてた部分がスッキリ書けるようになる

Set

const allNames = ['a','b','c','c','d','b','a'];
const names = [...new Set(allNames)];
// ['a','b','c','d']

Map

const uniq = new Map();
const users = [
  {id: 'aaa', name: 'hoge'},
  {id: 'aaa', name: 'hoge'},
  {id: 'bbb', name: 'fuga'},
]

for (let u of users) {
  uniq.set(u['id'], u)
}

console.log(uniq.values());
//  { id: 'aaa', name: 'hoge' },
//  { id: 'bbb', name: 'fuga' },

console.log(uniq.entries());
// [Map Entries] {
//   [ 'aaa', { id: 'aaa', name: 'hoge' } ],
//   [ 'bbb', { id: 'bbb', name: 'fuga' } ]
// }

console.log(uniq.size); // 2

あまり観測範囲で使っているの見ないが便利なので使っていきたい

Python3でAnsibleを実行する際のエラー対応

Wed, 24 Jun 2020 00:00:00 GMT

なんとなくAnsibleの実行環境をPython3にして実行してみたら見事エラーで死亡したのでその際の対応ログ

fatal: [localhost]: FAILED! => {"msg": "The conditional check 'ansible_env.has_key('CI') and ansible_env.CI != \"true\"' failed. The error was: error while evaluating conditional (ansible_env.has_key('CI') and ansible_env.CI != \"true\"): 'dict object' has no attribute 'has_key'\n\nThe error appears to be in '/usr/local/src/ansible/roles/common/tasks/redhat.yml': line 63, column 3, but may\nbe elsewhere in the file depending on the exact syntax problem.\n\nThe offending line appears to be:\n\n\n- name: disable SELinux\n  ^ here\n"}

has_keyがない

ということで

Python3での実行に対応するには

- ansible_env.has_key('CI')
+ 'CI' in ansible_env

もしくは

- ansible_env.has_key('CI')
+ ansible_env.get('CI', None)

の対応が必要

Gatsby v2でwrapPageElementを使う

Tue, 23 Jun 2020 00:00:00 GMT

Layout的なコンポーネントを一ヵ所で設定したくて調べてみると

Gatsby Browser APIs | GatsbyJS

ここでwrapPageElementを定義すればよしなにやってくれるようなのでそれっとコピって実行したらエラーが出た

success open and validate gatsby-configs - 0.196s

 ERROR

This plugin file is using both CommonJS and ES6 module systems together which we don't support.
You'll need to edit the file to use just one or the other.

plugin: /mnt/c/Users/hoge/from-wsl/til/gatsby-browser.js

This didn't cause a problem in Gatsby v1 so you might want to review the migration doc for this:
https://gatsby.dev/no-mixed-modules

書いてあるとおりrequire使う場合はmodule.exports

import使う場合はexport defaultを使えということらしい

Migrating from v1 to v2 | GatsbyJS

ということで次のように変えてエラー回避した

gatsby-browser.js


import React from "react"
import Layout from "./src/components/layout"

const wrapElement = ({ element, props }) => {
  return <Layout {...props}>{element}</Layout>
}

export { wrapElement as wrapPageElement }

対応ページそのままexport defaultでexportしてしまうと呼び出し側でwrapPageElementを区別できないので読み込まれない

named exportでwrapPageElementと名前を付けてexportしてあげる

エラーでも公式へのリンクで対応方法が示されていることが多く進めやすい

Gatsby今の所やりやすい

多段SSHをワンライナーで行う

Sat, 20 Jun 2020 00:00:00 GMT

Step Server

x.x.x.x

VPC内のEC2

10.0.1.2

ssh -i ~/.ssh/hoge.pem  ec2-user@10.0.1.2 -o ProxyCommand='ssh -i ~/.ssh/hoge.pem -W %h:%p ec2-user@x.x.x.x'

textlint-filterで使う除外パターン

Thu, 18 Jun 2020 00:00:00 GMT

記事を書いていて良く引っかかるが今のところ自分のスタイルに合っていないので除外している設定を抜粋して残しておく

使っているプラグインは下記

textlint/textlint-filter-rule-node-types

textlint/textlint-filter-rule-whitelist

.textlintrc.yml

filters:
  node-types:
    nodeTypes:
      - Link
      - Image
  whitelist:
    allow:
      # はてな記法のイメージ
      - /\[(.+?):embed:cite\]/
      # ファイル名のリストは除外
      - /.*\.[js|ts|yml|rb|rake|json|html]/
      - /\/etc\/.*/

node-types

リンク記法と画像の記法の中身は引用などで記事タイトルだったりする場合もあるので除外

whitelist

whitelistで正規表現を用いてはてな記法での画像も除外

よく

- hoge.html

のようにリスト形式でファイル名を表したりする

ここで技術用語などで引っかかると困るのでこのあたりも特定できる範囲で拡張子を追加して除外

Rubyのitselfメソッド

Wed, 10 Jun 2020 00:00:00 GMT

自分自身を返すitselfというメソッドがある

2.2から追加されたよう

Object.itself

group_byと組み合わせると要素数などのカウントしたい時とかに簡潔に書くことが出来る

['a','b','c','b'].group_by(&:itself).transform_values(&:size)
# {"a"=>1, "b"=>2, "c"=>1}

Ruby2.7からはtallyメソッドが用意されているので文字数カウント的な用途であればこちらを使うほうが簡潔に書ける

['a','b','c','b'].tally
# {"a"=>1, "b"=>2, "c"=>1}