ブログサイトのロゴsui Tech Blog

Blog

Total 93 posts
CloudflareWorkers
Cloudflare

Notionの画像(S3)をCloudflare R2に格納する

Notionで作成されたマークダウンコンテンツには、Amazon S3に保存された画像へのリンクが含まれています。ブログ記事として公開する際に、これらの画像をCloudflare R2ストレージなどの外部ストレージに移行することで非公開ページの画像も表示することができます。この記事ではNotionのページに添付されている画像をCloudflare R2に格納する処理について解説します。

記事を読む
Cloudflare
Vercel

Vercelで独自ドメインを設定する

独自ドメインを購入し、Vercelにデプロイされたウェブサイトに設定する方法を紹介します。Next.jsで作成したポートフォリオサイトを例に、Cloudflareでドメインを購入から設定完了までの手順を解説します。

記事を読む
TailwindCSS
Next.js

NotoSansJP使ってるのにSafariのフォントが明朝体になる

SafariやiOSのGoogle Chromeだけフォントが明朝体に変わってしまっている件。

記事を読む
LineMessagingAPI
CloudflareWorkers
Notion

LINE Messaging APIから自動でGitHubにPRを発行する

ポートフォリオの技術記事投稿頻度をあげるためにNotion + Messaging APIでブログ記事を自動でPull Requestを発行できるようにしました。mdxファイルの作成はnotion-markdown-converterを使用しています。

記事を読む
ポートフォリオ
ブログ

ポートフォリオにブログページを追加しました

ポートフォリオサイトにブログページを追加しました。今後はZennやQiitaで投稿していた内容を、こちらに集約する想定です。

記事を読む
Hono
HonoX

HonoXで短縮URL作成サイトをつくる

HonoXで短縮URL作成サイトを作成します。基本的な環境構築が終わっているsetupブランチから完成版までの変化を追いながら、実装の流れを解説します。

記事を読む
Docker
Kubernetes

Podがなにか分からないから弁当ケースで表現してもらう

KubernetesのPodとは何かを弁当ケースに例えて理解します。1つ以上のコンテナをまとめたものであるPodの概念を、実務で遭遇した場面から学んだことをまとめました。

記事を読む
CSS
Marp

Marpで企業ロゴが入ったスライドを作成する

Marpで企業ロゴが入ったスライドを作成する方法を解説します。gaiaテーマとCSSの::after疑似要素を活用してヘッダーの右上にロゴを配置する実装を紹介します。

記事を読む
TypeScript

もう少し楽にBranded Typeを使えるようにしたい

Branded Typeを簡単に生成できるツールを作成しました。似たような名前のIDやデータを扱う際の型安全性を高め、間違った型を使う可能性を減らすことができます。

記事を読む
ポエム

2025年は毎日ベッドメイキングだけやればいい。

ベッドメイキングから始まる小さな成功体験の重要性についてのポエム。

記事を読む
TypeScript
クリーンアーキテクチャ
SOLID原則

手を動かして理解するクリーンアーキテクチャ

クリーンアーキテクチャの概要をざっくり理解し、実際に手を動かして実装することで腹落ちを目指します。関心ごとの分離と依存関係の方向性について解説します。

記事を読む
TypeScript

手を動かして理解するBranded Type

Branded Typeの概要と実装方法を手を動かして理解します。プリミティブ型に目印を付与して型安全性を高めるテクニックを、既存リポジトリへの適用を通じて学びます。

記事を読む