notebook

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

JavaScript

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を…

google-api-nodejs-client+GCPサービスアカウントで認証してGoogleAnalyticsReportingAPI(v4)を使う

定期的にやっている気がするけど現時点で良さそうと思えるGoogleAnalyticsAPIをNodeクライアントでたたくための方法 GoogleCloudPlatformを使っているとサービスアカウントを作ってキーのパスを環境変数にセットすればよしなにやってくれるので便利で良いな…

patch-packageでpatchをコード管理する

ちょうどプライベートで開発しているものでモジュール側のソースをどうしてもいじらないといけなそうな場面に遭遇したためすこししらべたら面白そうなモジュールを見つけたので使ってみた話 patch-package ds300/patch-package: Fix broken node modules ins…

Husky + lint-stagedでCIの前にprettierを適用する

仕事で見ていいなと思ったので自分でもやってみる 方法は色々ありそうなのでとりあえずメモとして残しておく CIでlintやprettierなどをチェックしてコーディングスタイルなどを保っていたが CIでprettierチェックするとpushした結果prettier掛け忘れてた場合…

HTMLの中からSVGの部分を切り出す

テストカバレッジや静的コード解析ツールなどを使う場合、その時その時のスコアは分かりますが「数ヶ月前と比べてどうだったか」というのも知りたいですよね そうなると継続的に指標を取ってどこかに記録しておく必要があると思います イメージとしてはJenki…

Google App Script(clasp)でソーシャルカウントを取得して可視化する

Google Apps ScriptsでTypescriptが超簡単に使えるようになった! - アクトインディ開発者ブログ tech.actindi.net 上記記事を読んでGoogle App Scriptをcliから管理できるようにっていたことを知ったので実際にやってみることにしました 以前から当ブログの…

html2canvasでhtmlからcanvasに変換して画像として保存する

グラフライブラリとかだとcanvasにグラフを描画してそれを画像としてダウンロードさせる、みたいなことができると思うのですが canvasだったりSVGだったりの書き方を覚える必要があるのでサクッと画像ダウンロードさせたいだけなんだけどそれだけのために覚…

ブックマークレットに関して

今までブックマークレット?ふーんみたいな感じだったのですが、最近フロント側もやっていて面白くなってきているのと、結構できることあるみたいなのでtipsとして残しておきます 画面での確認 いきなりブックマークレットのコードを書く前にまずは画面でdev…

rxjsのメモ(検索boxの入力値で必要な部分だけ抜き出す)

rxjs使おうとすると毎度ドキュメント見ながら使えそうなオペレータ調べてやるのがつらいですね 後の自分用のメモにサンプル実装を残します 今回は「検索ボックスなどの入力で必要な部分だけ取り出す」です 実行環境 angular: 5.1.2 rxjs: 5.5.6 やりたいこと…

routerLinkActiveでpathだけのマッチを行いたい

よくあるリンクがアクティブかそうじゃないかみたいなのを判断してスタイルを変える機能に関しての備忘録 AngularだとrouterLinkActiveというものがあります 動作環境: Angular5.1 html <a [routerLink]="['/hoge', 'fuga', 'piyo']" routerLinkActive="is-active"> scss a.is-ctive { background-color: #CCC; } これでメニュー中の自</a>…

ag-gridでpivot

前回のrow gorupingに続き今回はpivot 動作環境 Angular: 5.1.3 ag-grid: 16.0.0 pivot テーブル定義に追加する

ag-gridでrow grouping

row groupingを実際にやってみた時のオプションなどのメモ 実際に使ったオプションなどの覚書なので結構雑になってます 全部みたいなら下記にサンプルコード付きで丁寧に乗っているのでこちらをみた方が良さそう Grouping by Row: Core Feature of our Datag…

rxjsでpollingする

rxjs難しいですね 時間軸を変えたりキャッシュをしたり定期的に何かしたりなど。。。結構な数のオペレータがあるので組み合わせ次第で色々できるでしょう 今回は管理画面上のレポート(csvなど)をダウンロードするときの処理をrxjsでスマート()にしてみたいと…

angularでag-gridを使う(導入編)

ag-gridというライブラリがとても便利でお世話になっているので導入から使い方の備忘録を残していく ライセンスを購入すればだいたいなんでもできるというくらい色々機能がある(正直使いこなせていない感はある) JavaScript Grid www.ag-grid.com angularの…

自作コンポーネントをnpmに公開する

angularのコンポーネントをnpmに公開したいと思ったので色々調べてみたところ ng-packagrというものがあるようでそれを使って実際に公開したところまでのメモ 今回は ngx-table-input というものを公開したのでそれを公開した時の流れを追っていきます バー…

独自コンポーネントでフォーム用の部品を作る(ngModelを使えるようにする)

独自のコンポーネントでもngModelを使ってデータバインディングをしたい ngModelを使うことでvalidationなども他のinputなどと同様に扱いたい ということで公式のドキュメントにも乗っているのでやってみます angular4で実装してます Angular - ControlValue…