notebook

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

ServerlessFramework(Node.js)のプロジェクトをTypeScriptで書き換える

ServerlessFrameworkでTypeScriptを書こうとすると最初からテンプレートaws-nodejs-typescriptを使えばよかったっぽい。 プラグインはSserverless-webpackを使ってとりあえず試してみた が、すでに書いてしまったプロジェクトだったので新規で雛形だけ作って…

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

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

TypeScript化時に遭遇したコンパイルエラーその1

素のJavaScriptで書いてたコードをTypeScript化させていたときに遭遇したコンパイルエラー 続くかわからないが後で思い出すように残しておく buffer' is not assignable to parameter of type 'string' 書いていたコードは下記 import * as fs from 'fs'; co…

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

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

lambda layerと関数を1つの設定で行う

Lambda Layerを使うときのメモ 以前Serverless FrameworkでLambdaLayerを使ってみたがその時はLayer用にディレクトリを切って設定ファイルも関数とは別であとからARNで参照させる感じだった ディレクトリ構成 - プロジェクトルート - Layer用のディレクトリ …

自宅の仕事環境を整える

今週どうにもモチベーションが上がってこないので箸休め ここ数ヶ月プライベートで2人目の子供が生まれる前後だったので公私とも色々と制限がかかりなかなか思うように作業ができなかったりしたのでせっかく確保できた時間は効率よく使いたい+リモートワーク…

はてなブログ、フォトライフのAPIを使って投稿を自動化する

ふと思い立ってめちゃくちゃ今更だけど当ブログ(はてなブログ)への記事投稿に関わる作業を自動化した 自分は現在MkDocsではてなブログに書く記事、下書き、ただのメモ書きとすべて保存してプライベートリポジトリに持っています(後で見返す時用にいつもMk…

Angularでng deployコマンドを使ってみる

angular-cli@8.3.0からdeployコマンドが使えるようになったみたいなので早速使ってみたいと思います ng deploy angular cliのコマンドserveやgenerateなどに加えてdeployというコマンドが使えるようになりました プロジェクトにng addでライブラリを追加する…

Googleデータポータル(旧DataStudio)でグラフ間のフィルターを適用する

いつの間にかグラフ間で特定の行や指標を使ったフィルターが適用できる様になったみたいです インタラクションフィルターと言われているようです グラフ インタラクション フィルタを追加する - データポータルのヘルプ support.google.com tableauだとこの…

特定の条件のときのみ経由する踏み台を追加する

ssh

よくあるパターンだが環境によってSSHの踏み台の経由を変えたいパターンの備忘録 serverに対してsshする際に社内からの場合と社外からの場合で経由内容を変えたい 例としては下記 社外から local -> proxy-a -> proxy-aws -> server 社内から local -> proxy…

jqでエラーを無視する

最近までまったく知らなかったのですがここまでできるのか!という感じだったので残しておく ?オペレータ tryのショートハンド、式の実行を行いエラーの場合は無視してくれる テキストファイルからjsonの値だけ扱う -Rオプションでrawテキストから読み込むこ…

jqで配列に値を追加する

jqで配列に対して値を追加したい場合 pushなどの関数は提供されていないため配列の添字に対して|=で値をアサインする方法で同じようなことを実現できる 末尾の添字を取得するためには配列の数を変数化してあとで参照させてあげれば良い 式の結果をexp as $ho…

GitHub Actionsでスケジューリング

いつの間にかGitHub Actionsで(待望の!!!)スケジュールトリガーが設定できるようになったみたいです GitHub Actions Changelog | GitHub Developer Guide developer.github.com Creating and cancelling a workflow | GitHub Developer Guide developer…

Angular Ivyでのテンプレート型チェック

ちょうどTypeScriptでstrict: trueやっていこう!という時期だったところに「AngularってTemplateTypeCheckできないんですね」 ということを言われて調べてみたところできなそうだったので落胆していたのですがIvyで実現されていたようです ng --version _ _…

curlを使うときのデータの渡し方

shellscriptなどでcurlを使ってjsonをPOSTする場合 エスケープや変数展開だったりと気にすることが多く毎度躓いてるなーと思っていたのですが@ + ファイルorヒアドキュメントを使って書くと良さそうです もっと早く気づきたかった・・・ 参考 bash - Curl wi…

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

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

ag-Gridで最初から知っておいたほうが良かったこと

かれこれ結構な年月かかわらせて頂いているので実装するにあたってのこれはーみたいなのが溜まってきたのでここいらで吐き出しておきます 簡単にできる割に体験が良いもの、軽い気持ちでやったら後々苦労するものなど tooltip 設定されたカラムでカーソルを…

TypeScriptの組み込み型関数

今回はTypeScriptの組み込み型関数について ※3.4時点 型をしっかり付け始めていろいろと直面する問題が多くそのたびに調べていった結果TypeScriptの組み込み型関数的なものが用意されていることを知りました これを知らずに自前で型を作ろうとしてむだに考え…

Conditional Typeのメモ書き

今更ながら頑張るTypeScript(strict: true)をやろうという事になったのでメモ書きをつらつらと書いていきます。 今までやりたい放題anyをぶちこんでた無法地帯に秩序をもたらすべくstrictに対応させていくのはなかなか大変です。 既存のコードに型を付けてい…

Cypress + CircleCIの高速化Tips

簡単なテストケースをいくつか書いただけで5分以上掛かるようになってしまったのでチューニングの機運! ということで今回はキャッシュについて バイナリのキャッシュ Cypressはバイナリのインストールをnode_modulesではないところにインストールしています…

ag-Gridでカスタムフィルターを定義する

ag-Gridのバージョンアップ作業でchangelogを眺めていたらいくつか気になったものがあったので試してみます 今までだとカスタムコンポーネントでフィルターをフルカスタムすることもできますがちょっと条件変えたいといった場合にまでコンポーネントを用意し…

AngularプロジェクトにCypressを入れてみる

今回はCypressをAngularのプロジェクトに入れて実際にテストを書いてみます 実際にブラウザを起動して操作するところが見れたりみたいな部分は他の記事でも紹介されているので今回は割愛して主にpluginを入れてテストしてみる話をしたいと思います Cypress J…

CypressのDockerイメージを日本語対応させる

GW前からちょこちょこ触りだしていたE2EのテストフレームワークCypress Angularのサンプルプロジェクトに入れて少しづつ試していたのですがCircleCIでテスト回すようにしてみたらなんと日本語表示ができない状態でした 少し調べてみたところnotofontを入れる…

dockerコンテナ内部からポートフォワーディングしているポートへアクセスする

開発でdockerのコンテナからdockerを動かしているVMのプロセスにアクセスしたいみたいなよくあるパターンで少しハマったので残しておきます 単純なホストへのアクセスであればextra_hostsだけでOKでした docker-compose.yml app: extra_hosts: - "devhost:$D…

jqで特定の値を書き換える

たとえば本番のログから特定のキーだけデータを変えて(マスクして)保存したいみたいなとき 普通にやればsedやawkで頑張ってできそうですがjqであればサクッとできてしまいます 今回下記のサンプルjsonを用意しました sample.json { "hoge": "fuga", "foo":…

HeadlessChrome on AWS Lambdaでスクレイピングする

前回の続き AWSだけならSAMがいいと言われていますがまだserverlessもちゃんと触ったことがなかったのでまずはserverlessで実装してみます 内容としては「LabmdaでHeadlessChrome(Puppeteer)を用いてスクレイピングして結果をSlackへ投稿する」です スクレイ…

HeadlessChrome on AWS Lambda(準備)

いろんな記事で紹介されている通りやり方はいろいろあるのですが 今回はlambdaでchromeを動かすためのNodeのライブラリを見つけたので紹介するだけしておきます alixaxel/chrome-aws-lambda: Chromium Binary for AWS Lambda github.com これはいいと思った…

GitHub Ationsで任意のタイミングでトリガーを発火させる

GitHub Actionsで定期実行をしたいなと思っていたので調べてみたのですが単体では実現できなそうでした ただ任意のタイミングでトリガーを発火させることはrepository_dispatchイベントを使えば可能なようです Triggering a RepositoryDispatch webhook | Gi…

Redashのブックマークレットを書いた

タイトル通りでしかないのですが 以前Redashの操作で不便なところがあったのでブックマークレットを書いて対応してみました。 2つともテーブルのVisualizationで使うものになります version6の段階では対応している状態です フロント側がReactに書き換えられ…

画像からテキストを抽出する(OCR)

親戚の住所リストが欲しかったので親に聞いてみたら年賀状で送られてきたのでテキストじゃなくて「これいちいちタイプするの?」っていうところから自動でやってくれないかなと思い立って調べてみました GoogleDriveでテキスト抽出 GoogleDriveに画像ファイ…