私が歌川です

@utgwkk が書いている

技術

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…

Pythonソースコードの文法チェックを行うテストを書く

src ディレクトリ以下のPythonソースコードの文法チェックを行いたい。テストとして回せるとよさそう。 pytestを使って書くならこういう感じになりそう。Python 2.7対応のためにglob2ライブラリを使っているけど、Python 3.5以降なら標準のglobモジュールで…

TypeScript + JSXでrenderするコンポーネントに型引数を書ける

子ネタだしタイトルが全てだけど、おもしろかったので共有します。 たとえば、react-router (react-router-dom) v5 の Link コンポーネントの to propには、文字列・オブジェクト・関数を渡すことができる。 ここで、react-router-domの型定義を見ると、<Link> コ</link>…

イベントハンドラを設定した要素内にreact-modalのモーダルを置くとイベントハンドラが反応する

tl;dr イベントハンドラを設定した要素内にreact-modalのモーダルを置かないようにするのが手っ取り早そう。 イベントハンドラを設定したコンポーネント 以下の Clickable コンポーネントは、divに click イベントのハンドラを設定しており、かつchildrenを…

RelayでGraphQL multipart request specificationに沿ったファイルアップロードを行う

はじめに 2021/7/17現在、GraphQL APIを通じてファイルをアップロードする方法は規定されていない。そのため、GraphQL APIでファイルアップロードを行いたい場合は何らかの工夫を行う必要がある。 GraphQL APIリクエストの変数中にファイルをエンコードして…

create-react-app --template typesctiptの直後に初手で入れる設定

はじめに Reactでアプリケーションを作るときは、だいたい create-react-app --template typesctipt してから開発を始める。ゼロコンフィグでReactアプリケーションを書けて便利だけど、もうちょっと手を入れておくと快適に開発できるようになる。 趣味の個…

perlcriticのポリシーの一覧を見れるようにしたい

metacpanのAPIを使う作戦 (断念) metacpanにはAPIがあるので、これを活用できないか考えます。 curl 'https://fastapi.metacpan.org/v1/module/_search?q=distribution:Perl-Critic&size=5000' というコマンドを実行することで、metacpanからPerl-Criticディ…

テストケースと野生の勘

コードを書いていたりコードレビューで実装を眺めたりしていて、こういうケースでもうまく動いてほしいけど落ちそう、と思ってテストケースを足すと実際にテストが落ちる、ということがしばしばある。はたから見ると野生の勘とか嗅覚みたいな感じになりそう…

緊急事態宣言

まずはこちらをご覧ください。 【速報 JUST IN 】東京に4回目の緊急事態宣言へ 政府方針 #nhk_news https://t.co/ZcN8uRXlcG— NHKニュース (@nhk_news) 2021年7月7日 この写真を再現したくなり、緊急事態宣言ジェネレーターを作る運びとなりました。 「緊急…

環境変数から設定値を読み取るPythonのメタクラス

アプリケーションの設定を環境変数経由で渡すし、個別の設定にはデフォルト値がある、というシチュエーションを考える。 素朴には os.environ.get("FOO", "default_value") みたいなのを書けば設定値を取得できる。が、これにはいくつか問題がある。 まず、…

Relay + TypeScriptでnodeクエリを使うときは__typenameフィールドを明示的に取得すると便利

タイトルが全てです。 作品詳細ページで、id をもとに作品 (Artwork) を取得したいとする。 Artwork が Node インタフェースを実装しているなら、以下のように node クエリを使って取得できる。 query ArtworkDetailQuery($id: ID!) { artwork: node(id: $id…

入力フォームに対してIMEの確定を待ってからEnterでなんかするやつ

入力フォームがあって、Enterを押して入力したテキストをリストに追加したいとしましょう。↓こちらでお試しできます。 ここに追加されるよ (() => { const list = document.querySelector("#list_1"); const input = document.querySelector("#input_1"); in…

趣味でGraphQL APIを使ったwebアプリケーションを作ってみた感想

GraphQL APIを備えたwebアプリケーションを趣味で作っていて、完成したので感想をまとめる。 目次 目次 作ったアプリケーション 使ったライブラリ Flask SQLAlchemy alembic Graphene-Python 作ってみてどうだったか おわりに 作ったアプリケーション サーク…

SQLでSQLを組み立てる

趣味で作っているアプリケーションについて、データマイグレーションを行いたくなった。ちゃんとやるなら、マイグレーション用のスクリプトを書いて、メンテナンスモードにして、スクリプトを適用する……みたいな手順を踏むと思うけど、趣味プロダクトなので…

Pythonのキーワード引数に任意のdictを展開して渡す

Pythonでは、引数に **kwargs のように書くことで、任意のキーワード引数を受ける関数を定義することができる。 キーワード引数はdictとして使うことができる。 def print_kwargs_as_dict(**kwargs): print(kwargs) キーワード引数では、識別子としてvalidな…

ペアプロ活動パターン

仕事でよくペアプロでコードを書くのですが、気をつけていることがいくつかあるので共有します。みなさまは何に気をつけていますか? 考えていることを声に出す やりたいことが実現できずに詰まっていると黙りがち どうやったらいいか分からず困っている・違…