notebook

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

JavaScript

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年くらいは書く項目が「仕事」「生活」など固定化されてきていたためこれらの文章を使って感情分析にかけたら年間を通してどんな感情だったのかという…

CSVダウンロードがない画面でもCSVを落としたい

よくあるテーブル形式のコンテンツなどでデータを手元にダウンロードして使いたいとき、たいていはテーブル表示用のライブラリとCSVダウンロードがセットでありあまり困らない ただ、データが表示だけされているがダウンロード機能がないときも存在する 仕事…

GA4のデータをGoogle Apps Script経由で取得する

個人所有のアカウントはGA4で計測するようになったので今まで使っていたGAの数値を取得するスクリプトも徐々に対応させていく必要があるので調べてみた まだbetaのようなので内容など変わる可能性があるが現時点でやったことを残しておく Analytics Data Ser…

ブックマークレットを使ってGoogleSlideでの発表中にユーザーツールのコメントを流す

ちょうど社内の勉強会で発表する機会があったのと、もともとこんなことやりたいなーと思っていたので調べてみた GoogleSlideにはユーザーツールと言ってslidoのような見ているユーザーがスライドに対して質問を投稿できる機能がある(発表者がプレゼンターか…

Node REPL+Puppeteerでの開発Tips

Puppeteerでスクレイピングしていてやっと「これ楽だわ」みたいな感じのやり方が定着してきた気がするのでアウトプットしておく ちなみにどこまでいってもなるべくClickなどの操作をせずにページ内容を読み取れるのがベターだと思っている あと、REPLにかん…

dummy-jsonを使ってダミーデータを生成する

dummy-jsonというnodeのライブラリを使ってみたのでメモ dummy-json BigQueryなどサンプルのJSONを作ってロードしたいときや、カラムの情報をある程度コントロールしてサンプル作りたいとき または、モック用にAPIレスポンスを適当に生成したいとき Rubyでい…

スプレッド演算子でimmutableにreduceの処理を書く

nodeでreduceを使って集計などを行う場合、スプレッド演算子を使ってimmutableに書けるのでメモとして残しておく 具体例でいうと次のような変数に対してname,dateごとにグループ化してvalueの値を足した計算結果を出したい場合 const rows = [ { name: "foo"…

PuppeteerでXPathを扱う

サンプルやPuppeteerの記事でよく見る$evalや$$evalはCSSセレクタで対象の要素を指定してコールバックを渡したらその中ではブラウザのコンテキストで処理ができる(Elementが渡る)のでelement.hrefのように直接呼び出せる 便利ではあるがここ最近CSSセレクタ…

PuppeteerをNode REPLで使う

page.evalやpage.$xなどをreplで確認しながら開発したい 今までChromeのDevToolでCSSセレクタ確認しながら実行して…とやっていたがどうにも効率上がらない REPLで試行錯誤したものを落とし込めたら多少はらくできるかもということで調べてみた REPLでawaitを…