技術的負債に対する視力を得る技術
今回は先日開催した弊社主催の技術イベント「Raccoon Tech Connect #1 レガシーシステムに立ち向かう技術」で登壇した内容を当ブログで公開します。 イベントのテーマは「レガシーシステムに立ち向かう」ということで、システムを長らく運用していくと自然と溜まっていく 技術的負債 との付き合い方に着目しました。 技術的負債に対する理解を深め、技術的負債を可視化することによって自然と対処さ
ウェブ
広告タグを整理してWebサイトのパフォーマンスを改善した話
今回は私自身が半年にわたって弊社の運営する仕入れのECサイトスーパーデリバリーで利用している各種Web広告サービスの仕組みを調査・理解して、手段を考えて、そして改善を行った成果とそのノウハウを共有します。 まず何が問題だったかというと、Web広告サービスにはGoogle広告・Facebook広告・Yahoo広告など広告サービスは多数ありますが、それらを有効に活用するには各サービスが提供している専
パスワードにさよなら？スマホ・PCで顔や指紋認証でログイン Passkey認証ができるWebサイトの作りかた
エンジニアの皆様は、ログイン機能が必要なサイトの「ログイン方法」の要件として何を思い浮かべますか？ 多くの方はID/パスワードでの認証を一番に思いつくのではないかと思います。 ID/パスワード認証はポピュラーな認証方法ですが、パスワードの漏洩からの不正アクセスのリスクや忘れてしまったときの不便さがあります。 そこで今回は、Passkey認証のできるサイトの作り方をフロントエンドの実装にフォーカスし
2023.4.28
type=”file”のinputタグをJSで操作する方法
今回は私が最近担当した案件で苦労した、type="file"のinputの値と全く同じ形式のデータを０から作る方法と、データをフォームでアップロードする方法各種について書いていこうと思います！ input type="file"について 基本的にinput type="file"の値というのは、type="text"などのほかのinput要素と違い変更したり設定したりすることはできません。 も
2023.4.26
タグマネージャでGA4を設定するときにやっておいた方が良いこと
今回はエンジニアとビジネスサイドの双方の立場から見た、GoogleタグマネージャとGA4（Google Analytics プロパティ4）のオススメ設定を紹介します。 ユニバーサルアナリティクスの終了に伴ってGA4をタグマネージャを利用して設定する方が増えていることと思います。 タグマネージャは便利なのですが、1つ問題点としてタグマネージャ経由でGA4を埋め込んだ状態で任意のイベントを記録しよう
【メリットだらけ！？】WebPでサイトのパフォーマンスを向上！
突然ですが、WebP（ウェッピー）という画像フォーマットをご存じでしょうか？実はWebサイトにおいてすごく「優秀」な画像フォーマットなんです！ では具体的にどこが「優秀」なのか。簡単に紹介していきます！ WebP（ウェッピー）とは？ WebPの概要 Googleが開発した新しい画像フォーマット。 拡張子は「.webp」で表記され、「ウェッピー」と読みます。 ウェッピー
タグマネージャのカスタムHTMLで外部JS読み込んだ場合の実行順番を調べてみた
Webエンジニアをやっていると Google Tag Manager に触れる機会ってありませんか？ マーケティング部門から広告タグの相談を受けた り、 タグマネージャから出る謎のJSエラーの調査 を依頼されたりと、今やWebシステムの構成要素としてなくてはならないものとなっています。 一方でエンジニアの管理を離れて自由奔放に運用されたタグマネージャは伏魔殿の様相を呈してくるので、できればお近づ
[GA4] Google Analytics 4 でサイト速度を計測する方法
今回は GA4 でサイトの速度を記録 して分析する方法を紹介します。 ウェブサイトのパフォーマンス監視にはサーバー側でログに記録しやすいバックエンドの応答速度がよく利用されます。しかし昨今のウェブサイトはフロントエンドの比重が拡大しているので バックエンドの応答速度だけでは利用者の体感速度を正しく表していない という問題があります。 2023年7月終了予定のユニバーサルアナリティクス（UA）に
GA4移行の切り札、Google Analytics の gtag.js と「接続済みのサイトタグ」の仕組みを徹底解説
ユニバーサルアナリティクスの終了がアナウンスされましたね。そこで本日はユニバーサルアナリティクスと Google アナリティクス 4 プロパティ（以降 GA4 と表記）を併用したり、移行する際に使われることが多い「接続済みのサイトタグ」機能について解説します。 「接続済みのサイトタグ」とは端的にはユニバーサルアナリティクスの記録用に埋め込んだタグをそのまま使って、Google Analytics
OpenAPI、コードから書くかスキーマから書くか
OpenAPI Specification（以下OpenAPI Spec）をAPI仕様書を設計するフォーマットに採用するとき この２つの選択肢があることはご存知でしょうか？ コードからOpenAPI Specに準拠したスキーマファイルを生成するコードファースト API仕様書からコードを生成するスキーマファースト 私はAPI仕様書を設計するフォーマットを決めるとき、OpenAPI Specを
やってよかった効率化「グラフを画像からcssへ」
画像で作っていたグラフをhtmlやcss、jQueryを使って作業を効率化したお話をします。 4,5年前のことになりますが、いまだに「やってよかったな」と思っています。 はじまり 対象となったページは、ラクーンホールディングス（当時はラクーン）のIR情報にあった「業績ハイライト」と「財務ハイライト」のページです。 当時は年に1回更新作業があり、イラレを使ってすべてのグラフを画像で作成していまし
2021.4.12
CookieのSameSite=Laxデフォルト化 アクセスログで影響調査
2月4日リリース予定のChrome80からCookieのSameSite属性が明示されていない場合の挙動がLaxに変更される予定です。 Cookieは至るとこで使用されており、影響範囲の特定に苦労されている方も多いのではないでしょうか？ 一方でChromeにはFetch Metadataリクエストヘッダという機能が実装されています。 このヘッダはリクエストが生成されたページとのオリジン間の関係を