私が歌川です

@utgwkk が書いている

技術

GraphQLの規格には書いてあるけど意外と知らなかったこと

はじめに 2021/10 時点の規格を読んでいきます。ご存知でしたか? 意外と知らなかったこと 不要なfragmentの定義を含めたクエリを書いてはいけない https://spec.graphql.org/October2021/#sec-Fragments-Must-Be-Used 「不要なfragmentの定義を含めたクエリ…

GraphQL Code GeneratorでTypeScript向けのenumの型だけを生成してみる

tl;dr プラグインを作る (改造する) と実現できることは分かった 既存のプラグインのオプションを調整するだけで実現できるかは不明 背景 GraphQLスキーマファイルを生成するためにGraphQL Code Generatorを使っており、GraphQLクエリに関するコード生成はre…

YouTube Data APIをラップしたGraphQL APIを作る

はじめに 表題のものを途中まで作った。指定したチャンネルにアップロードされた動画ぐらいは取れるというステータス。 developers.google.com 基本的にはAPIドキュメントを読みながらGraphQLスキーマを作ってリゾルバを実装していけばよい。けど、このAPIで…

デプロイ用のIAMユーザーぜんぶ捨てる

GWなので断捨離です。やったこととしては、以下の記事を参考にしつつIDプロバイダやロールを作ってworkflowを書いたぐらい。 Configuring OpenID Connect in Amazon Web Services - GitHub Docs GitHub Actions OIDCでconfigure-aws-credentialsでAssumeRole…

nginxのaccess_logとerror_logのログファイル名に変数を使えるかどうか

tl;dr access_log には変数を使えるけど制約が多い。error_log には使えない。ホスト名の数だけ server directiveを列挙した方が早そう。 nginx 1.21.1 で確認した。 変数を使えるかどうか 表題のことが気になったので調べた。部内k8sクラスタにアプリケーシ…

grapheneでナイーブなnodesクエリを実装する

複数のIDを指定してデータを一括で取得したい場合があって、手作りした。ナイーブにはこういう感じでいける。N+1クエリになるのでもうちょっとうまくやる必要がありそう。 import graphene class Query(ObjectType): # 中略 nodes = graphene.Field( graphen…

GoでGraphQLクライアントを書くために github.com/hasura/go-graphql-client を使ったら便利だった

あらすじ Go言語でGraphQL APIを叩くクライアントを書くことがあって、クエリをベタ書きするのはともかく返り値にマッピングされるようなstructの型を用意するのが面倒すぎる。正常系だけならそれでもまだなんとかなるかもしれないけど、異常系のことも考え…

吉祥寺.pm 29でトークした #kichijojipm

kichijojipm.connpass.com レギュレーションに則って*1一句用意してから臨みました。発表資料は以下です。 speakerdeck.com 自分にとって馴染みのない分野の業務に飛び込むという「挑戦」だったけど、振り返ってみればこれまでと変わらない方法で着実に身に…

Pythonのテストで常にHTTPリクエストをモックする

HTTPリクエストをモックするには PythonでHTTPリクエストをモックするには、どうしたらいいか。unittest.mockを使ってHTTPリクエストを投げるメソッドをモックする方法が思い付くかもしれない。しかし、どこをモックして何を返すようにしたらよいのかは自明…

Gitのコミットメッセージを複数行書くときは2行目を常に空行にするとよさそう

Git (GitHub) のコミットログに Co-authored-by を書くときに、2行目を空行にしないとGitHub上で共同編集したような表示にならない、ということがあった。2行目を空行にしてcommitし直したら出るようになった。 この挙動自体はドキュメントを読むと書いてあ…

Webフォントを分割して読み込む際にunicode-rangeを指定しなかったらどうなるのか

表題のことについて検証してみましょう。 目次 目次 前提 Webページ上で独自のフォントを読み込むには フォントファイルのサイズ フォントファイルのサイズを抑える工夫 フォントファイルを分割し、必要に応じて読み込む フォントファイルを圧縮する 前提お…

さくさくコードレビューしまくる問題

GitHubからPRのレビュー依頼通知が来たら、作業の手を止めてコードレビューに入る暮らしをしていた。PRがマージされるまでの時間が短くなるのはいいけど、コードレビューしすぎてしまう問題があった。自分の作業は回っているけど疲れるような、実はもっとパ…

GitHub Actions上でdocker composeコマンド経由でpytestを走らせると何も出力されない現象

はじめに 2022/3/13 時点で、表題の現象を確認しています。また、以下のいずれかの手段で解決することを確認しています。 docker compose ではなく docker-compose コマンドを使う docker compose run を実行する際に -T (--no-TTY) コマンドライン引数を渡…

dot言語のプログラムをPerlとして動かすには

speakerdeck.com YAPC::Japan::Online 2022のLTで話したことの補足です。タイトルにあるjust epic. の話は時間内にできたのですが、それ以降の、dot言語をPerlとして解釈させる話をするところで時間切れになったので、この記事でお伝えします。 dot言語はPer…

linear-gradientでCSSでプログレスバーが書ける

表題のことに気づいたのでシェアーします。 (() => { let progress = 0; const maxProgress = 1000; window.setInterval(() => { const progressPercentage = progress / maxProgress * 100; document.querySelector('#linear-gradient-progress-bar').style…

Wordleの単語を当ててもらう側を無限に体験できるWordlenatorを作った

最近流行ってるゲームのうち、当ててもらう側を実現できればAkinatorならぬWordlenatorなのでは、と思い立って作りました。タイル以外のデザインは適当です。ちょっと遊んでもらって出たバグを直してデプロイしたぐらいなのでまだバグがあるかも? sugarhear…

フロントエンドの視点からより良いGraphQL APIを作ってもらうためにフィードバックする話をした

hatena.connpass.com 昨日発表しました。株式会社はてなという会社でWebアプリケーションエンジニアとして働いています。 発表資料はこちら。前半だけ読むとGraphQLとRelayの概要をさらっと流せる資料になっています。全部読んでください。 speakerdeck.com …

Next.js Static HTML Export 国際化 最速 無料

はじめに みなさまはNext.jsで静的に生成するHTMLファイルを国際化したくありませんか? Next.jsに組み込みのi18n routingはStatic HTML Exportに対応していないので、別の手を考える必要があります。 結論から言うと、以下の記事にやり方が書いてあります。 …

relay-compilerが要求する命名規則

はじめに みなさまはrelay-compilerを使っていて以下のようなエラーに遭遇したことはありませんか。私は3000回ぐらいあります。 ERROR: Parse error: Error: RelayFindGraphQLTags: Operation names in graphql tags must be prefixed with the module name …

pytestプラグインだってテストされたい

はじめに これはPython Advent Calendar (3) 17日目の記事です。 pytestプラグインのテストについてお話しします。プラグインの実装方法については今回は触れないので、気になった人はWriting plugins — pytest documentationを読んでみてください。 pytest…

ResizeObserverとCSS transformとreact-use-measure

前提として、ResizeObserver は、CSS transformによる要素サイズの変化を検知しない。CSSの transform 属性を動的に書き換えても ResizeObserver は検知してくれない。 Observations will not be triggered by CSS transforms. Resize Observer framer-motio…

作ったOSSライブラリが使われつつあるときに思うこと

はじめに これははてなエンジニアアドベントカレンダー2021 14日目の記事です。昨日は id:Windymelt さんのFreeBSDのZFSファイルサーバ再インストールRTAはーじまーるよー - Lambdaカクテルでした。 作ったOSSライブラリ 筆者はpytest-github-actions-annota…

「ほたるんの服」の差分はどこにあるのか

小ネタです。 仕事してたら気づいた。ほたるんの服、完全にGitHubじゃん。 pic.twitter.com/z0m1UuyuAh— ズッキー (@zukky162) 2021年12月2日 2021/12/3時点での引用リツイートには、どのcommitのどの行かを示したツイートはなかったので、たぶんこれが一番…

List::Utilのpairs関数がPythonで欲しくなって

これはKMC Advent Calendar 2021 - Adventar 2日目の記事です。 あらすじ List::Utilの pairs 関数をPythonでも使いたくなって、itertoolsの関数を組み合わせて再現できないかと思ったけど、その時点ではうまくできなかった。仕方ないので手作りする。 ちな…

ffmpegで高速なアニメーションGIFを作る

備忘録です。最近よくLGTM画像を作っていて、その一環で動画からアニメーションGIFを生成することが多い。 gyazo.com このアニメーションGIFを4倍速にしたい。より正確には、元動画を4倍速にしたアニメーションGIFを作ることを考える。 ffmpegにいろいろなパ…

create-react-appで生成した環境でejectせずにWebpackのプラグインを試したい

はじめに create-react-app、使ってますか? 便利ですよね〜。 create-react-app (react-scripts) はWebpackやBabelなどの設定をうまく隠蔽しています。どういう設定をしたら何が起こるのか、を気にせずにコードを書ける体験は良いのですが、生きてるとどう…

現状の癖を反映した.perltidyrcとperltidyの令和最新情報

今はそんなに頻繁にPerlを書いているわけではないけど、以下の記事を書いた時点から更新があったのでちょっと書く。 blog.utgw.net .perltidyrc --add-newlines --add-semicolons --add-whitespace --block-brace-tightness=0 --brace-tightness=1 --break-a…

ISUCON11予選落ち #isucon

チーム :innocent::innocent::innocent: *1 で出場しました。メンバーは去年と同じく id:nonylene と id:wass80 です。最終スコアは13369点でした。最後のベンチマークでは12000点ぐらいを記録しました。 isucon.net やったこと 今年もGo言語で出場しました…

HacobuneでCGIを動かす

www.sakura.ad.jp ということで、CGIを動かしましょう。Monkey Bananaがいいと思います。 CGIスクリプトを用意する ダウンロードしてunzipしてリポジトリに含めるなり、docker build時にダウンロードしてくるなり、なんでもいいと思います。permissionとsheb…

AWS Lambda + DynamoDBでzatsu_monitorをサーバーレスで動かす

モチベーション zatsu_monitorはシンプルなURL監視ツールです。crontab等で定期的に指定したURLにリクエストを送信し、ステータスコードに変化があれば通知してくれます。詳しくは作者の id:sue445 氏の記事をご覧ください。 sue445.hatenablog.com 手軽にUR…