kk-web

WEB SERVICE

Next.js×SSO(Cognito)

現在業務で Next.js に Congnito の SSO を乗っける作業をしているのですが。 Okta を使用した SSO の実装だったのですが、とくにサーバーサイドまで考慮した情報はほぼ皆無で、えらく苦戦しました。 ということで、今回は実装中にわかったことやまだわかっていないことを備忘録がてら書いていこうと思います。 Cognito と Okta の連携 [この記事

2024-07-12

Next.jsでOGP画像を動的に生成する方法

調べてみると色々と情報が錯綜していたので、備忘録がてら。 今回は以下の仕様となっています。 Next.js Vercel 適当に router.tsx ファイルを作成し、以下のように書いてあげたら動きました。 import { promises as fs } from "fs"; import path from "path"; import { ImageRes

2024-07-12

QuietComfort Ultra Earbudsを買ったよ

今まで外出時は WF-1000XM4 を使用していたのですが。 数週間前から左側の聞こえがおかしくなり、修理に出しても良かったのですが、それならばと前々から気になっていた QuietComfort Ultra Earbuds を購入しました。 [![QuietComfort Ultra

2024-07-09

リソースの限界とステークホルダー

スクラムマスターとしてのキャリアをぼちぼち積みつつある自分ですが。 スクラムを回すにおいて、開発の序盤はプロダクトオーナーがボトルネックになりやすいのかなーと思うのですが、開発の終盤に差し掛かってくるとほとんどのケースでステークホルダーがボトルネックになっていると感じるのは、個人的に非常に興味深いです。 多くの現場において、ステークホルダーは CTO あたりが割り当てられるケースが

2024-07-01

フルリモートワークとスクラムの親和性

個人的に、フルリモートワークとスクラムは親和性が高いと思っていまして。 今回はその根拠について書いていこうと思います。 まず前提として、開発を行う際にスケジュール感やタスク感を洗い出していないというのは結構な問題だと思っていまして。 トップダウンで締め切りや仕様が降りてくるのは当然の話であって、それに対しボトムアップでスケジュール感やタスク感を提示するのは当然なことだと思います。

2024-07-01

Next.jsで開発するときにオススメのパッケージ

普段 Next.js で開発する際によく導入するパッケージを書いていこうと思います。 @next/bundle-analyzer build されたファイルのうち、何がどれくらいの割合を占めるのか出力してくれるパッケージです。 以前と比べ出力されたファイルの容量を意

2024-06-06

ウィンドウサイズを表示するnpmパッケージを作りました

sass-mq という npm パッケージがありまして。 Sass で開発を行う際、sass-mq に breakpoints を設定することで media-query が書きやすくなるというパッケージでして。 以前はよく使用していたんですが、最近は media-query をなるべく使用しないようにするのがモ

2024-06-03

Conformを使う?React Hook Formでいけるかもよ

以前 React Hook Form を無理やり Server Action に落とし込む という記事を書いたのですが。 最近 Conform というパッケージが Server Action へ対応しており、こっちを使おうみたいな記事がちらほら見受けられます。 とはいえ React Hook Form の書きっぷりと比

2024-05-22

めんどくさいことはめんどくさいからめんどくさい

自分の性格の 1 つに『めんどくさがり』というのがあります。 仕事にせよプライベートにせよ、まーめんどくさいことが嫌いなタイプでして。 めんどくさいことって、単純にイヤじゃないですか、めんどくさいし。 ところがどうして、世の中案外めんどくさいことが嫌いじゃない人のほうがマジョリティな気がしていまして。 仕事の付き合いで見ると、めんどくさい考え方とかめんどくさい実装とかめんどくさ

2024-05-12

Next.jsのApp Routerにおけるエラーハンドリングまとめ

まだ調査中の内容もあるため間違っている可能性が非常に高いです、あしからず。 Next.js の App Router におけるエラーハンドリングは /404 や /500 へリダイレクトをかけず、url のパスはそのままエラー表示を行うのが基本線となっています。 ということはまずはベーシックなエラーハンドリングを。 [error.js](https://nextjs

2024-05-09

フロントエンド開発を楽にするコツ

フロントエンド開発って簡単そうに見えて、意外と難しかったりします。 長年にかけて様々なフロントエンド開発に携わってくると、大体実装がキツくなってくるパターンが明らかになってきます。 ということで、今回は『これを避けたらフロントエンド開発が少し楽になるよ』と個人的に思うパターンをいくつか紹介しようと想います。 パンくずリスト Saas 系だとちょくちょく見かけるパンくずリス

2024-05-06

M3 ProのMacBook Proを買いました

なんとなく MacBook を買い替えました。 過去の記事 によると、今まで使っていたMacBook は 2020 年の 11 月に購入していたっぽいので、3 年半くらい使ったんですね。 今回は以下のスペックで購入しました。 14 インチ チップ:Apple M3 Pro 12コア CPU -

2024-05-04

Next.jsで使用していないファイルを洗い出すnpmパッケージを作りました

久しぶりに npm パッケージをリリースしてみました。 @piro0919/next-unused 一応 Fork もとに next-unused があるのですが、実装はほぼ作り直しました。

2024-05-02

NextAuthのv4でNext.jsのApp Routerに対応する方法

next-auth の v4 では App Router への対応がめちゃくちゃ中途半端だったりします。 現在 v5 を開発中 とのことで、これでようやく公式の対応が入るのですが。 今更 Pages Router を使うのは個人的にイヤすぎるので、結構強引に App Router にア

2024-04-30

Next.jsでurlのルートパスを動的に切り替える方法

タイトルだけだとなんのこっちゃって感じですね。 今回仕事において、以下の仕様を満たして欲しいと言われました。 仕様 ログイン、ログアウトの状態を問わず https://hoge.com/12345678/fuga や https://hoge.com/87654321/fuga など、url の最上位ルートパスを切替可能にしたい。 シンプルですね、実装自

2024-04-27

最近買って面白かった漫画4選

皆さん漫画、読んでますか。 自分はあいも変わらず漫画ばっかり読んでます。 ということで、最近買って読んで面白かった漫画を紹介しようと思います。 おじくんとめいちゃん [<img alt="おじくんとめいちゃん" src="https://m.media-amazon.com/images/I/81hgBwBaobL._

2024-04-03

短歌の投稿サービスをリリースしました

かんたんか めっちゃシンプルな短歌の投稿サービスを作ってみました。 OGP 周りはまだ手を入れていないのと、機能も最低限の最低限しか作っていませんが、ひとまず。 以下、蛇足です。 今回はいつものアプローチと違い、どちらかといえば試してみたい技術があったので作ってみた感じです。 今回使用した技術は以下のとおりです。

2024-03-20

ボトルネックになっているヒトは絶対に自覚がないという話

開発メンバーおよびスクラムマスターとしていくつかの現場を経験してきましたが。 開発や会社の運営に際し、ボトルネックになっているヒトは絶対に自覚がないよなーとちょくちょく思います。 たとえばスクラム開発の場合、最終的なボトルネックはステークホルダーであるケースがほとんどだと思っていまして。 開発の序盤〜中盤については開発メンバーやプロダクトオーナーがボトルネックになってい

2024-03-12

Rokid Maxを買ったからといってRokid Stationが必須というわけでもない話

最近あまり耳にすることがなくなった Rokid Max ですが。 こういった AR グラスを購入する人って、動画目的かゲーム目的で買われる方が多いと思いまして。 中でも、室内でしか使わないかつ動画目的で Rokid Max の使用を想定されている場合は、Rokid Station は無理して買わなくても良いんじゃないかなーというのが個人的な意見です。 というのも、Rokid St

2024-02-27

NW-A306を購入したので初日レビュー

DAP という、ちょっとマニアックなオーディオ機器なんですが。 ざっくり言うと今どきの MP3 プレーヤーみたいなものです。 スマホから SIM(通話機能など)とカメラの機能を削除して、音質を向上したオーディオ機能に特化した小型端末といったほうがわかりやすいですかね? そもそもなんで購入したかという話なんですが。 実は DAP 自体は前からずーっと欲しかったんですよね、外出時に

2024-02-27

最新の Fire TV Stick でテレビを見る方法

本ブログでも過去何度か Fire TV Stick でテレビを見る方法を書いてきました。 Fire TV でテレビを見る方法 が、過去の記事では最新の Fire TV Stick で見る方法は見当たらない、で記事を終えていたんですよね。 ということで今回は、最新の Fire TV Stick でテレビを見る方法を書い

2024-02-25

Next.js × React Hook Form × Zod

Next.js の Server Actions と React Hook Form と Client Validation をかませる方法ってないのかなーと思っていたのですが。 ぼちぼち [良い感じの実装感](https://medium.com/@danielmdob/using-next-js-server-actions-with-react-hook-form-4eadbd7f1c6

2024-02-13

社長のブログで紹介されてました

2024 年の 1 月より SIVA という会社で働いています。 フクロウラボに引き続きまたも広告系の会社でして、別に業界的に広告系にこだわりがあるわけではまったくないんですが、妙に縁があるようでして…。 そんな中、なぜか社長が運用しているブログで自分が紹介されていました、誰か教えてよ!! [トップダウンにならないように気をつけていた

2024-02-07

プロダクトの完成はマネタイズの開始という話

プログラマーという職業柄、どうしてもプロダクトの開発やプロジェクトの推進に目に行きがちではあるんですが。 プロダクトが完成してリリースしない限りマネタイズが発生しないわけで、会社としてはプロダクトが完成するまではずっと準備運動な時間なわけです。 で、多くのエンジニアはプロダクトの完成をゴールだと思っている節があるよなーと、たまに感じることがあります。 確かにエンジニアにとってプロ

2024-02-07

人生短し考せよお前

正社員、業務委託を問わずそこそこの数の会社で働いてきた自分ですが。 しばしば「なんでこんなに多くのエンジニアを雇ってるの?」と感じることがあります。 単刀直入に言うなら、どこの現場もエンジニアの数が多すぎるよなぁと。 求人情報や面接を通じてよく思うのですが、社員の数=会社のグレードのように勘違いしている CEO って結構いるよなと。 一方エンジニアの自分としては、スクラム開発な

2024-02-02
© 2018 kk-web