notebook

都内でWEB系エンジニアやってます。

JavaScript

Obsidianのコマンドパレットや補完でVimキーバインドで移動したい

Ctrl+PやCtrl+Shift+Pで出てくるコマンドパレット 選択肢の移動をVimキーバインドで行えれば、ターミナルやエディタの設定と同じなのでやりやすい VS Codeだと設定自体が存在するので設定すればよいだけだが、Obsidianではそこまで詳細に設定できる項目がな…

GitHubのコントリビューションを過去数年分さかのぼって1つの画像にまとめるAPI

以前、DenoとCanvasでGitHubのアクティビティを画像化して返すAPIを作った ということでGitHubの草を画像でアクセスできるようなAPIを作って、現在もほそぼそメンテナンスしている そして、最近GitHubのコントリビューション画像を並べている人を見かけてこ…

Deno KVでアクセスログ的なものを記録する

Deno KVを活用してDeno deployにホストしたサービスのアクセスログを記録する 目的は公開しているサービスの利用状況をしっかり確認したかったというところから、アクセスログ記録するかという流れ もともとやりたいとは思っていたがぐだぐだしていたらかな…

Deno KVを使ってみる

とりあえず触ってみたときのメモ Deno KV DenoのKey Valueストア 料金 Deno Deploy Pricing | Deno 料金を見るとfreeでも1GiBと結構使える さらにread, writeもかなりの数が無料枠で使える 軌道に乗ったらわからないが、個人サービスとかなら十分すぎる感じ…

dayjsで実行時のタイムゾーンを指定する

dayjsを使ったスクリプトをローカル、GitHubActionsともに実行したいという状況になった GitHubActionsは実行環境のタイムゾーンがUTCだったので結果に差が出てしまった 今回のケースではどちらの実行でもAsia/Tokyoのタイムゾーンで実行したい ということで…

ObsidianのTemplaterでTable Of Contentsを差し込み、更新するテンプレート

ObsidianのTemplaterネタ Markdownファイルのコンテンツの中身を見て見出しのリスト(Table Of Contents)を作成する すでに作成されている場合はTOCを最新状態に差し替える 毎度のことながら作ったテンプレートスクリプトをホットキー設定に追加することで実…

SpreadSheetで動的にシートの内容を読み込めるようにする

スプレッドシートにデータを集めて分析なり集計して、定期的にデータを更新、追加をする場合 BigQueryを使うほどでもない、もしくはデータの内容的にプライベートでなんとかしたいのでスプレッドシートで…というパターンは一定存在すると思う ある程度生に近…

ObsidianのTemplaterでToDoタスクを入力するテンプレートスクリプト

Templaterでtp.system.promptが使ってみたかったので題材探して使ってみた 自分はObsidianでタスク管理をしている 物によっては期限があるので[due:: 2024-04-25]といったようにいつまでに消化するべきタスクかというのを判断できるようにラベルを付与してい…

GoogleSlideで設定したリンクのリンク先ページ番号を自動更新する

Googleスライドで、スライド内リンクを生成すると 対象スライドへの参照が保持され、編集などでページ数が変わったとしても対象スライドへのリンクが保たれた状態になる ExportでPDFにした場合でもPDF内でリンクが有効な状態で資料作成の際には便利である 今…

GoogleSlideのGASで操作対象のページ番号を入力する処理

GoogleSlideでGASのスクリプトを実行する場合 GoogleSlideの拡張機能 → ツールからGASで登録した関数を実行できるが、GASで使える関数の中に現在自身が表示させているページを取得するような関数はなかった しかしながら、特定のページに対して何か作用させ…

DenoでPowerline風OGP生成ツールを作った

この記事はDenoのカレンダーの2日目の記事です qiita.com Deno+CanvasでPowerline風のOGP画像を動的に設定できるアプリケーションを作ったのでその紹介です Powerline風のOGP生成ツール イメージ 主にOGP用途で、こんな画像を返すサーバを実装した 画像Gener…

PlaywrightでVisualRegressionTest

とりあえず使ってみたかったので適当なプロジェクトで使ってみた Installation | Playwright playwright.dev yarn create playwright いくつか質問されて答える 依存入れるか?とかはYにした ひな型が作られる npx playwright test サンプルのテストが動く Vi…

GoogleCloudのDataformで編集中にショートカットキーでプレビューしたい

先日GoogleCloud版のDataformに移行してねというアナウンスが流れたので重い腰を上げてプライベートのDataformプロジェクトを移行し始めた 色々試していく中で旧版のDataformではCtrl+EnterでSQL実行できたのにな…という気持ちが強くなってきたためさっとブ…

mdastとjs-yamlを使ってすでに存在するMarkdownファイルのfrontmatterに項目の追加や修正をする

前回の続き 前回はMarkdownの内容をASTに変換してAST内のコンテンツを追加編集するものだったが、今回はMarkdown内のFrontmatterに対して追加や修正を行う ケースとしてはぼちぼちあると思うので残しておく frontmatterの判定 micromark-extension-frontmatt…

mdastを使ってすでに存在するMarkdownファイルに対してコンテンツの追加や修正をする

最近はメモや日々の振り返りなどはすべてObsidianを使っていて、DailyNoteになんでも書いて後で切り出していくような流れになっている それ以前はNotionに振り返りやその他いろんなことを集約させていたが使うツールを変えたので、できればそれまで使ってい…

DenoとCanvasでGitHubのアクティビティを画像化して返すAPIを作った

DenoとCanvasを使ってGitHubのアクティビティ(草)の画像を生成するプロジェクトを作った swfz/deno-kusa-image: GitHub Contribution Image in deno github.com こんな感じでGitHubの草を画像化したレスポンスを用意するくん(パラメータとかは執筆時のもの…

querySelectorのセレクタメモ

ブックマークレットや、コンソールから特定の情報をサクッと取り出したいみたいなケースがあったので、いくつか調べたことをメモに残す セレクタの記述方法のサンプル集 基本的に下記読めばOKって内容ではある CSS セレクター - CSS: カスケーディングスタイ…

Jestの並列実行をGitLab-CIで行う

Jestの並列実行オプション Jestのv28から分割して実行できるオプションが追加された Jest CLI オプション · Jest jestjs.io --shard 1/3といった形式で実行できる 3分割する場合 --shard 1/3 --shard 2/3 --shard 3/3 というように3つコマンドを実行するとそ…

Chromeを起動して手動操作した状態からPuppeteerを実行する

Puppeteerで操作する前に手動で何かしらの操作をしてから操作したいというパターンのためのメモ Chromeの起動 コマンドラインからChromeを立ち上げる "C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-di…

はてなブログの埋め込みリンクとMarkdownリンクをクリップボードにコピーするChrome拡張を作った

はてなブログで記事を書いていて参考リンクを貼る場合 基本的には埋め込みカード式のリンクと通常のMarkdownリンクの両方含めて記事を書いている 下記のような感じ GitHubのページをリンクした場合の例 [swfz (swfz)](https://github.com/swfz) [https://git…

AlgoliaのInstantsearchで検索文字入力が終わったと判断してからリクエストを送るようにする

AlgoliaのInstantsearchを用いて検索UIを作っていたが、検索文字列に変化があるたびにリクエストを送る仕様になっていた なのである程度入力が終わったと判断できるタイミングでリクエストを送るようにしたいということで調べて対応してみた Algoliaの料金体…

AlgoliaのInstantsearchでページ読み込み時の初回リクエストを送らないようにする

AlgoliaのInstantsearchを用いて検索UIを作っていたがページ読み込み時に空のリクエストが発生するらしくリクエストを消費させたくないと思ったので調べて対応してみた Algoliaの料金体系 自分はFreeプランしか使っていないが 10000req/月もしくは10000Recor…

zxでコマンドライン引数を扱う

zxに限らずだが、nodeでコマンドライン引数リストを参照するとき コマンドライン引数をパースするライブラリを使っていない場合はprocess.argvからリストを取ってくる zxでも単純にこれを使えばよいと思っていたが、zxのオプションを渡すとprocess.argvで渡…

GitLabのGraphQL APIにzxを使ってクエリを投げてみる

ドキュメント読めば一通りわかるが一応やったこととか残しておく 今回はGitLabのMergeRequestの情報をAPIで取得する 一定期間内で、特定のリポジトリのMergeRequestの内容で、MergeRequestにひもづくコミットのshaと日時も欲しかったのでREST APIではなくGra…

GitHub Actionsでactions/scriptを用いてイベントの種類によってmatrixの値を変える

以前matrixを動的に設定する記事(GitHubActionsでmatrixの値を動的に扱う - notebook)を書いたがそのときは固定値だったので、今回はイベント内容によってセットするmatrixを変えてみる actions/scriptを使うとJavaScriptを書けるのでShellScriptやActionsの…

Chrome拡張開発時のメモ

Chrome拡張を2つ作ったのでそのときに調べたこととか理解したことのメモ(manifestはv3) 作ったChrome拡張と関連記事 両方Chrome Web Storeには公開してないがリポジトリは作った 1つ目は下記記事の内容をChrome拡張にしたもの 記事 CSVダウンロードがない画…

GitHub Actionsのworkflow_runトリガーで、直前に実行されたワークフローの情報を取得する

GitHub Actionsで自作アクションや他のアクションでコードを書く場合(TypeScript) @actions/githubのcontextに色々入っているのでそれを、参照して色々行うことが多いかと思う 単純にyamlファイルで定義する場合はイベントの情報は${{ github.event }}で参照…

S3のマルチパートアップロードをpresignedUrlを用いてフロントエンドから行う

動画などの大容量のファイルをS3にアップロードする機能の話 単純にPUTオペレーションでアップロードする場合、1度のPUTオペレーションで最大5GBのオブジェクトをアップロードできる オブジェクトのアップロード - Amazon Simple Storage Service docs.aws.a…

ASTを経由してMarkdownのparse、compileを行う

毎週、毎月ある程度テンプレート化された記事を公開する場合 毎週、毎月の変動するデータをもとに自動でテンプレートに当て込みMarkdownを生成したい この処理をある程度自動で行えたら良いなと思い調べてやってみた 完結にするためテンプレートは下記のよう…

Natural Lauguage APIを使って過去1年分のリリースノートから感情の上下を測ってみる

2020年からじぶんリリースノート(毎月の振り返り的な記事)を書いていた 2021-12 2021-11 2021-10 ここ1年くらいは書く項目が「仕事」「生活」など固定化されてきていたためこれらの文章を使って感情分析にかけたら年間を通してどんな感情だったのかという…