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