エンジニアの皆様は、ログイン機能が必要なサイトの「ログイン方法」の要件として何を思い浮かべますか？ 多くの方はID/パスワードでの認証を一番に思いつくのではないかと思います。 ID/パスワード認証はポピュラーな認証方法ですが、パスワードの漏洩からの不正アクセスのリスクや忘れてしまったときの不便さがあります。 そこで今回は、Passkey認証のできるサイトの作り方をフロントエンドの実装にフォーカスし
2023.4.28
今回は私が最近担当した案件で苦労した、type="file"のinputの値と全く同じ形式のデータを０から作る方法と、データをフォームでアップロードする方法各種について書いていこうと思います！ 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仕様書を設計するフォーマットに採用するとき この２つの選択肢があることはご存知でしょうか？ コードから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リクエストヘッダという機能が実装されています。 このヘッダはリクエストが生成されたページとのオリジン間の関係を
ここ最近、弊社のサイトへサイバー攻撃と思わしき不審なアクセスが増えてきました。 大半はOSSな脆弱性検査ツールなどを悪用した、いわゆるスクリプトキディによるもののようです。 それらはあまり高度なものではなく、今のところは情報漏えいなど大きな被害はありませんが、このまま放置していてはいずれ致命的な脆弱性が発見されてしまわないとも限りません。 そこで弊社ではApacheのモジュールとしてOSSで公開
Photoshopで作業中に、急に画像の色が変になって困ったことはありませんか？ ↑Photoshopに画像を配置後、赤丸で囲んだ部分の色味がくすんで、部分的に灰色で飛んでしまいました。 画像の色が変になったらやってみよう。対処法3選 ▼【方法1】Ctrl+Y（色の構成）を解除してみる ▼【方法2】trl+Shift+Y（色域外警告）を解除してみる ▼【方法3】プロファイル変換＞RG
