Safariで<video>タグの出し分け（PC/SP）がうまくいかず拡大されるバグの対処法
はじめに WebサイトのKVなどで、PCとSPで異なる動画を出し分けるケースはよくあります。先日、タグで動画の出し分けを実装したところ、「PCのSafariで閲覧した時だけ、なぜかSP用の動画が読み込…
Tech
【OSSでWiki構築】第4回（Google OAuth編）
1. はじめに この記事は、Docker Composeで構築したローカルのOutline環境に、Googleアカウントを利用したログイン機能（OAuth 2.0）を実装するまでの一連の手順をまとめた…
その画像、本当にSVGでしょうか？
SVG画像はベクター形式なので劣化がなくてキレイかつ便利！とお思いのみなさま、突然ですがSVG画像の「中身」を見たことはありますでしょうか。 SVG画像が上記のような特徴を持つのは、画像としても扱える…
SQLBoilerでJoin系のクエリを実行したい時はこうしよう
SQLBoilerでInnerJoinやLeftJoinをしたいとき、qmパッケージのInnerJoinとLeftJoinなどを使いがちです。 ただここで問題があって、 このqmパッケージの関数を使っ…
方眼紙のような背景をCSSで作る
課題 方眼紙のような背景を画像で実装していたが、実機で拡大すると下記の通り途切れたように見える部分がある。 原因 ピクセルのズレと丸め誤差スマホの画面に合わせたり、ピンチアウトで拡大したりすると、ブラ…
AWSリセールアカウントでBedrockのAnthropicモデルが使えなくなったときの対処法
はじめに AWS のリセール（請求代行）アカウントで Amazon Bedrock の Anthropic モデルを使用していたところ、モデルの更新をきっかけに2つの問題が立て続けに発生しました。 問…
【OSSでWiki構築】第3回（環境構築編 トラブルシューティング）
はじめに 「【OSSでWiki構築】第2回(環境構築編)」に記載された手順に至るまでに遭遇した、様々なエラーとその解決策をまとめたものです。 エラーは失敗ではなく、システムへの理解を深めるための最高の…
Git操作をよりスマートに「Lazygit」
普段からCLI, TUIでターミナル操作や開発体験を充実させている方なら「Lazygit」1度は聞いたことがあるのではないでしょうか？ Lazygitは、Gitをターミナル上で視覚的かつ直感的に操作で…
縞模様（ストライプ）を作るrepeating-linear-gradient
まっすぐなシマシマ CSSでシマシマな縞模様（ストライプ）を作るためにパッと浮かぶのは本来グラデーションを作るために使われる background-image: inear-gradient…
ページトップを判定したいだけなのに
課題 よくある「トップページに戻る」ボタンが画面固定されている場合について、自分がページトップにいれば非表示（非活性）・いなければ表示（活性）するようにしたい。 問題 もっとも容易に考えられる条件はY…
Live Sass Compilerをやめてnpmスクリプトに移行する
概要 これまでVS Codeの拡張機能「Live Sass Compiler」を使用してSCSSをコンパイルしていましたが、環境（設定やバージョン）によって出力されるCSSに差分が生じる問題が発生しま…
ejs-cliとnpm scriptsで静的サイト制作環境を構築する
概要 以前、Sassのコンパイル環境をnpm scriptsで構築しましたが、今回はさらにHTMLをEJSに置き換えて、ヘッダーやフッターなどの共通パーツを効率的に管理できる環境を作ります。 1. 必…
【OSSでWiki構築】第2回(環境構築編)
Docker ComposeでOutlineとDBを連携させる Docker Composeによる構築手順 1. はじめに この記事は、オープンソースのWikiツール「Outline」を、Docker…
【OSSでWiki構築】第1回
OSSの選定 はじめに OSSを利用したWiki構築の取り組みです。 目的とゴール設定 業務で扱う機会が少ない「システム構築の技術」を習得し、アウトプットすることを主目的としています。 目的（メイン）…
Goのイテレーター・ジェネレータについて
はじめに Go 1.23でイテレータ機能が標準ライブラリに追加されました。本記事では、新しく導入されたiterパッケージの使い方と、従来のスライスベースの反復処理との違いについて、実行フローとパフォー…