White Box技術部

WEB開発のあれこれ(と何か)

Vercelを使ってNext.jsアプリでSlackのメッセージをDiscordに配信する

これは、 「Slackの無料アカウントだと90日前のログが見えなくなってしまうから、とりあえずDiscordに転送しておいて見れるようにだけはしておきたいよね」っていうコミュニティ運営問題先送りマンが、 「まあメッセージ転送アプリならboltとdiscord.js使え…

GitHub Actionとactの話(secretsとoutputs)

前回actの記事を書いたのですが、また知見を得たので残します。 seri.hatenablog.com 今回のactのバージョンは以下になります。 act version 0.2.57(前回は0.2.55) 書いていること inputs.XXXXでもinputsが取れる Github Token利用の手順とシークレットの…

GitHub Actionsのテストをactを使って行う

GitHub Actionsのトリガーと分岐条件のテストにactを使ったので、そのときの知見です。 act version 0.2.55 M1 Macなので以下のaliasを設定して作業しました。 alias act='act --container-architecture linux/amd64' 書いていること トリガーしたいブランチ…

DESKEYSでパーツを買って、HHKBをメンテナンスした

長年HHKBを使っているのですが、先日初めてラバードームに保護スプレーを吹いたり、キースイッチにシリコンオイルを塗ったりしたところ、あまりにも調子が良くなったので、本腰を入れてメンテナンスをしました。 結果、すこぶる打ちやすくなったので、打ち心…

【React】Quillを表示するカスタムフックと、それをReact Hook Formで使うサンプル

QuillというWYSIWYGエディタをReact Hook Formで使うメモです。 主要ライブラリ 動作時のライブラリバージョンは以下になります。 dependencies "react": "18.2.0" "react-hook-form": "7.44.3" "quill": "1.3.7" "react-quilljs": "1.3.3" devDependencies …

ReactとSassそれぞれのSP判定について

レスポンシブ対応したサイトを作成する場合、PCとSPでスタイルを切り替えたり、表示内容を変えたりすると思うのですが、 私がやっているTSX側とSCSS側の切り替え方法について記載します。 React側の準備 react-responsiveを使って、指定サイズ以下になった場…

【React】未編集時に確認ダイアログを出すカスタムフック

『Formデータに編集済みデータがあれば、ブラウザの戻るが実行された場合に確認ダイアログを出す』というよくあるやつを出したくなって調べたところ、 この記事にあたりました。 わかりやすくていい記事だったので、やりたい人はこれを見てくださいで良いの…

【TypeScript】nodeのfetchとaxiosのタイムアウト処理

戒めを込めて。 最初からaxiosを使おう(結論) HTTPクライアントとしてFetch APIが標準化されてから、「標準とか言うならfetch使うべき?」とか思ってリクエストをfetchで実装し、 しばらくしてタイムアウト処理が欲しくなった段階で、「これなら最初からax…

最近サービス作るときに考えていること

この頃、新しくサービスを作ることが多かった&続いているので、どんな事を考えて作っていたかを思い出しながら書いてみます。 最初にざっくり考えること どういったデータを扱うか 認証が必要なアプリケーションか 面倒くさいからできればやりたくない・・…

React Hook Formで複数項目間のバリデーション(相関チェック)

相関チェックって言葉、そういえばもう全然聞かないなーとは思いつつ、 React Hook Formで、複数項目をまたぐ入力値のチェックを実装したので知見を残しておきます。 ↓こういうやつ 手順 ここでは郵便番号のように情報としては1つのものを、複数の入力項目で…

【C100対応サークルチェッカー】Circle Checker2を作りました

以前にも紹介した、Twitterのユーザ名からイベント参加情報を抽出するツール「Circle Checker」ですが、ややあってRustで作り直しました。 以前の記事はこちらです なので今回は新しく作ったCircle Checker2の使い方と、前バージョンとの違い、QAなどを書い…

マザボが壊れたのでWindows8.1からWindows10に乗り換えた(その後Win11になりました

これはWindows PCのマザーボード変更日記です。 だいぶ記事を寝かしてしまったので、今が2022年1月の気分で読んで下さい 「何もしてないのに壊れた」 年が明けてから、毎朝液タブでのクロッキーを習慣にしているのですが、ある日、電源ボタンを押してもBIOS…

Firebase AuthenticationとFirestoreへのTypeScriptでのアクセス方法

TypeScriptで書いているNext.jsアプリのユーザ情報管理を、 Firebase AuthenticationとFirestoreで行ったのですが、 調べたときに見かけたコードサンプルは、呼び出し方がJavaScriptのままだったので、 TypeScriptっぽいサンプルもここに残して置きます。 と…

Google Apps Script(GAS)からBox APIを叩くためのすべて

四苦八苦してしまって本当に辛かったので、他の人が同じような苦労をしないように・・・ 個人アカウントのOAuth認証で良い場合はこのサイトの手順が参考になります。 How to Use the Box API with Google Apps Script - Digital Inspiration ただ今回は、App…

prismaのschemaファイルの書き方(MySQL用)

フルNext.jsアプリケーション作成の一環で、DBマイグレーションツールにprismaを使ってみたので、書き方のメモです。 いきなりですが、prismaは細かくDDL文を制御できず、思ったテーブルを作れなかったので、細かくテーブル定義を設定したい場合はTypeORMの…

Next.jsでLayzr.jsを使って画像読み込みをする方法

既存サイトを書き直していたら、layzr.jsの扱いにハマったので。 next/imageを使えというのは無しで。 結論:useEffectを使えばOK libs/layzr.ts import Layzr from 'layzr.js'; export default function LayzrConfig() { const instance = Layzr({ threshol…

【AWS】ALBのログをAthenaで分析するときの工夫(供養)

AWS

ALBのログをAthenaで分析する方法は、公式ドキュメントに記載があるのですが、この手順でデータベースを作成すると、日付の条件を入れて検索したいとき、大量のデータをスキャンしてしまい、遅い上にお金がかかるという問題に遭遇します。 そこでおすすめし…

Puppeteerがnodeコンテナで動かなかったから動かした

Puppeteerの実行エラー puppeteerのJestサンプルをTypeScriptで書いて動かそうとしたら、コンテナ側のライブラリ不足エラーが出たので対処していました。 エラー内容 動かそうとしたサンプルは以下で、Dockerコンテナのベースはnode:14-slimです。 これを実…

久しぶりにやったらTypeScriptのWebpackビルドで詰まった

今日は雑記なのでとりとめもないです。 WebpackでTSをビルドしたらWARNINGとERRORがめっちゃ出る ちょっと話題に上がったので、なんとなく昔作ったプログラムをリファクタリングしていたのですが、 JSからTSに変えたついでにWebpackも導入したところ、ビルド…

【AWS】APN1-DataTransfer-Out-Bytesの内訳をチェックする

AWS

発端と記事内容 AWSのコストをCost Explorerでチェックしていたら「APN1-DataTransfer-Out-Bytes」が前月と比較して2倍になっていたのですが、どこが食っているのかを調べようとしたら、Cost ExplorerからはELBで食っているところまでしかわからなかったので…

ブログを書かなくなった現状を打破するために雑記カテゴリを作った

ブログの記事が下書きで止まる問題 ここ2年ほど、ブログを書いては下書き保存で終わるということが続いており、結果として全然ブログを書いてない感じになっています。 その下書きも、ちゃんと記事の体になしていれば、「忘れないようにブログに書いておく」…

CircleCIでDockerfileのあるプロダクトをテストする

既存のアプリケーションをコンテナ化したら、CircleCIで回していたテストがコケていたので、その修正の記録です。 CircleCIの設定を書く CircleCIの設定をいじるのは久しぶりだったので、以下のようなことも調べつつやっていたのですが、結局ハマってだいぶ…

TypeScriptでwindowにプロパティを追加するいくつかの方法

DjangoのテンプレートにReactを埋め込むとかいう、妙なことをしているときに、とある理由からwindowにReactやらを追加しておく必要ができたのですが、TypeScriptだとそのまま突っ込むと型の関係で怒られました。 調べてみるとほぼこのタイトルの記事があった…

【主にスクラム向け】プロダクトバックログフォーマットと運用フローについて

プロダクトバックログのテンプレートが欲しい これが「さいきょうのPBLだ!」 PBL項目 スクラムでのPBL運用フロー 1. プロダクトバックログリファインメントを実施 2. スプリントプランニングを実施 3. スプリントレビューを実施 4. 繰り返し まとめ プロダ…

【MySQL 8向け】MyBatis Migrationsのコンテナ化

JVM系のマイグレーションツールの導入 新しくSpring Bootの開発環境をコンテナ上で作る上で、DBマイグレーションツールのMyBatis Migrationsをコンテナで使えるようしたので、その手順をまとめておきます。 Docker Composeの構成 作っていた開発環境のマイグ…

PythonでのAWS Lambda開発メモ(利用開始編)

Lambdaを使うことになった経緯 Lambdaの利用経験がなかった私が、Lambda利用を決めた流れは 1日1回のS3のファイルチェック処理が必要になる ファイルがなかったらSlack通知してくれればいい(簡単なスクリプトでOK 今のところ、AWS上にサーバは立ってない 調…

ログ出力指針の書き方

アプリケーションのログ出力指針を作ったときに、どんな事を考えていたのかを思い出しながら、 ログ出力指針について書いていきたいと思います。 ログ指針作成にあたって 目的の作成 適用範囲の設定 どんなときログを埋め込むのか?または埋め込まないのか?…

【kotlin】Coroutinesを使って、Spring WebFluxでJDBC処理を行う

ちょっと記事を寝かせすぎてしまったのですが、今回は1.3でKotlin本体に入ることが決まったコルーチンのお話です。 WebFluxでJDBCを使うには Schedulers#elasticで対応 この方法の問題点 コルーチン コルーチンの導入 WebFluxのリクエストをコルーチンで処理…

【GCP】Datalabをチームで使うための導入手順

職場で 「他のアナリストと分析結果を共有しやすくして欲しい。というか共有のJupyter環境を用意して欲しい」 という話があったのですが、環境の制約で、すぐに共有のJupyterを用意することはできなそうだったので、Google Cloud Datalabを使ってもらうこと…

【TypeScript】DangerのTSLintプラグイン紹介と導入の補足

Rubyの方のDangerをTSLintに対応させたかったので、ESLintのDangerプラグインのforkをforkして、DangerのTSLintプラグインを作りました。 danger-tslintの作成経緯 最初はDanger-jsの方のTSLintプラグインを導入したのですが、Dangerでいいなぁと思っていた…