実践WEBビーコン：メール開封率計測テクニックの全て
この記事は「レバテック開発部 Advent Calendar 2024」の 3 日目の記事です！ 昨日の記事は、もりた さんの 年末に（私が）読みたい！ 要件定義のおすすめ書籍ズ23冊 でした。 これはなに？ 皆さん、こんにちは！最近、インドネシア旅行に行ったら現地の方より顔が濃くて、道を歩いていると現地語で話しかけられた@tomo_nxnです。 さて、そんな旅のエピソードはさておき、今回はメール配信システムの機能を使わずに、独自で Web ビーコンを使用してメール開封率を計測する仕組みを作ったので、その時の注意点や実際の実装方法などを紹介していきます！ 前提 レバテック開発部では、メール配信にSendGridを使用しており、通知マイクロサービスとして独立したシステムを各システムが利用している状態です。SendGrid上でもメールの開封率は計測できるのですが、ユーザーの詳細までを知ることが
ウェブアクセシビリティ方針まとめ | 福岡・北九州のウェブアクセシビリティ専門web制作会社
ウェブアクセシビリティについて｜札幌市厚別区【厚別南 地区センター】 #WCAG2_0 #レベルAA #準拠 #地方自治体 #試験の公開 2024年12月9日の情報
署名付きURLを利用したファイルアップロードWeb API設計の勘所 | フューチャー技術ブログ
はじめに現代のWebアプリケーションにおいて、ユーザが写真や動画などのファイルをアップロードする機能は、しばしば求められます。 本記事では、ファイルアップロードを実現するための一手段として、「署名付きURL」を利用した方式を取り上げ、その設計について詳しく解説します。 今回は、Amazon Web Services（AWS）を利用する前提のもと、このアプローチを探求していきます。 前半部分は署名付きURLをそもそもよく知らない方向けの導入部となっていますので、要点だけ抑えたい方は設計上のポイントから読まれることをお勧めします。 ファイルアップロードの実現方式パターン署名付きURLの話をする前に、ファイルアップロード機能をWeb APIとして実現する方式について、いくつか代表的なものを紹介します。 Pattern 1. multipart/form-datamultipart/form-da
Webサービス公開前のチェックリスト
個人的に「Webサービスの公開前チェックリスト」を作っていたのですが、けっこう育ってきたので公開します。このリストは、過去に自分がミスしたときや、情報収集する中で「明日は我が身…」と思ったときなどに個人的にメモしてきたものをまとめた内容になります。 セキュリティ 認証に関わるCookieの属性 HttpOnly属性が設定されていること XSSの緩和策 SameSite属性がLaxもしくはStrictになっていること 主にCSRF対策のため。Laxの場合、GETリクエストで更新処理を行っているエンドポイントがないか合わせて確認 Secure属性が設定されていること HTTPS通信でのみCookieが送られるように Domain属性が適切に設定されていること サブドメインにもCookieが送られる設定の場合、他のサブドメインのサイトに脆弱性があるとそこからインシデントに繋がるリスクを理解してお
LPやWeb製作を高速化するUIコンポーネント集を作った
リンク コンポーネントの例 概要とモチベーション Camome UI はひとことで言うと「抽象度の高い UI コンポーネント集」です。 Bootstrap や MUI などのフレームワーク・ライブラリの類とは異なり、網羅的・汎用的なパーツを提供することが目的ではありません。つまり Button や Input や、もう少しハイレベルな Navbar などを高いカスタマイズ性とともに提供するつもりはありません。 それよりも「LP のこの部分にコピペすればサクッと決まる」ような体験を重視しています。UI デザインといっても、多くの場合はそれほど変わったものが求められるわけではなく、使い回せるものが大半だと思います。 要するに「デザインの常套句」みたいなものが存在するわけです。Camome UI はそういう「よくある」デザインをたくさん収録することを目的としています。 プログラミングは得意でもデ
完全無料！誰でも美しいオンラインドキュメントやWebサイトを作成できる「Slick」を使ってみた！ -
どうも、まさとらん（@0310lan）です！ 今回は、誰でも簡単に美しいオンラインドキュメントを無料で作成できるWebサービスをご紹介します！ 多彩なテンプレートやすぐに使えるコンテンツなどが搭載されているので、ちょっとしたドキュメントを作ってシェアするのに重宝します。また、カスタマイズ次第では個人サイトなどのWebページを公開する用途にも活用できるので、ご興味ある方はぜひ参考にしてください！ 【 Slick 】 ■「Slick」の使い方 それでは、「Slick」をどのように使えばいいのか詳しく見ていきましょう！ まずはサイトのトップページから【Sign up】ボタンをクリックして、無料のユーザー登録を済ませておきます。 ユーザー名、メールアドレス、パスワードを設定するだけなので簡単です。 （※GoogleやFacebookアカウントでもログイン可能） 以下のようなダッシュボード画面が表示
Thin Backend: Instead of manually writing REST API endpoints or GraphQL resolvers you can use a Thin Backend server to automatically get a fully featured API backend.
Instant API for your Postgres DBInstead of manually writing REST API endpoints or GraphQL resolvers, use a Thin Backend server to automatically get a fully featured API backend on top of your Postgres DB. Create your Backend → Documentation 🚀 Build 10x faster, no boilerplate🛡️ End-to-end type safe⏭ Great Autocompletion✅ Optimistic Updates import { query, createRecord } from 'thin-backend'; impor
脆弱性診断につかえる実践的なテクニックを列挙してみた - shikata ga nai
Hello there, ('ω')ノ これまで、実例をもとに学んだ脆弱性診断につかえる実践的なテクニックは以下のとおりで。 ・サブドメインの1つに403を返すエンドポイントがある場合は、通常のバイパスは機能しないので、Refererヘッダを変更すると200 OKが取得できる場合があります。 ・エンドポイントのディレクトリとリクエストボディを削除して、メソッドを「PUT」から「GET」に変更すると隠されたエンドポイントに関する情報を取得できる場合があります。 ・見つけたエンドポイントに通常アカウントで403エラーが発生した際、管理者アカウントのjsonリクエストの本文と比較して差分のパラメータを追加するとアクセスできる場合があります。 ・Linux環境でコマンドを実行する際、スペース文字をバイパスするためのペイロードは以下のとおりです。 cat</etc/passwd {cat,/etc/
【2021年総まとめ】WebデザインギャラリーS5-Styleで特に秀逸だったサイト集｜田渕 将吾 (Shogo Tabuchi)
S5-Styleでは2021年に414件ものサイトを更新させていただきました。 この記事はその中でも特に秀逸だったサイトに厳選した、2021年のブックマーク総まとめです！ S5-Styleとは、通算8,000以上におよぶハイクオリティなWebサイトを毎日キュレーションしているWebデザイナーのためのギャラリーサイトです。選定したときの判断軸は、Webサイトのコンテンツプランニング・情報設計・ビジュアル・UI・インタラクションなどのあらゆる観点のデザインを拝見させていただいています。ただこの中でも、コンテンツプランニングと情報設計に関しては想定しているターゲットやゴールがわからないと良し悪しを判断できませんので、ビジュアル・UI・インタラクションのデザインに重きをおいて選定させていただいています。なお、企業や商材の良し悪しは考慮していません。 そして制作したクリエーターに敬意を表してクレジッ
日本のWEBに革命をもたらす BudouX で自動文字組みを行う。しかも、Web Componentとして
WEB 開発において日本語が抱える問題 日本語を使った WEB 開発は常に「改行問題」を抱えています。例えば、👇 の様に 記事 という単語の 記 と 事 で改行されていたら読みにくいです。 見た目重視の WEB サイトだと、「この改行を手動で美しく見えるように修正して欲しい。」 という声も無視できません。 いわゆる「文字組み」です。例えば、👇 の様に改行を入れてやります。 しかし、この方法は解決になっていません。なぜなら、WEB ブラウザ の幅はレスポンシブに可変するからです。ちょっと画面幅を狭めるだけで 👇 の様に崩壊します。 これに対応するためには、メディアクエリをくしして画面幅に応じた<br>タグを仕込むか、改行したくない文字列を手書きで<span style="display:inline-block;"></span>で囲む必要がありました。👇 の様に... <span
全てのメンバーにアクセシビリティー研修を実施しはじめました + 研修資料を公開します - freee Developers Hub
こんにちは、 freeeでデザインシステムを作っていたりアクセシビリティーのいろいろをやっていたりする id:ymrl です。 freeeではfreeeアクセシビリティー・ガイドラインを策定して、誰でも使えるアクセシブルな製品開発ができるよう取り組んでいます。これまでも、開発者（エンジニア、プロダクトマネージャー、デザイナー）向けには実習を含むアクセシビリティー研修を行ってきました。 そしてこのたび10月から 対象を全新入社員向けに拡大 してアクセシビリティー研修を行うようになり、あわせて開発者向けの研修も内容を整理したので、今回はその紹介をします。 なぜ全員に研修をするのか これまでのアクセシビリティーの取り組みは、プロダクト開発を中心に進めてきました。「だれもが自由に経営できる統合型経営プラットフォーム」をビジョンに掲げている以上、まずは提供しているSaaSが誰でも使えるものになってい
Core Web Vitals Test - Improve Page Speed & Maximize Site Performance
How can this tool help me?We built Core Web Vitals Test so you can see how people experience your website without setting up complex dashboards or processes. Each dashboard features numerous aspects of website user experience, such as loading, interactivity, visual stability and audience insights. Where does the data come from?Your dashboard is updated daily, powered by Google’s Chrome User Experi
Webサイト制作をどれくらいの粒度で分解してタスク化するか｜重松佑 / Shhh inc.
プロジェクトが始まるときにかなり初期の段階でWBSを作ることは多いとおもいます。そのWBSの作成、プロマネやディレクターに任せっぱなしになっていないでしょうか。WBSはスケジュールをガントチャートで表したものを指していると思われがちですが、実はスケジュールだけでなく見積もりやアサインを精度高く行うためにも重要なものです。 たとえば「Webデザイン作成」というスコープにどのような実作業が含まれているかはWBSを作ることによって見える化しプロジェクトメンバーやクライアントと共有できるようになります。ときどき下記のように書かれたWBSを見ることがあります。 Webデザイン作成 ・作成 ・確認 ・修正 ・確認2 ・修正2 ・確定 しかし、これでは「Webデザイン作成」に必要な知識、さらには作業量・スケジュール・予算も分かりません。Webデザイン作成の例を続けると、下記のように「作成」のスコープを分
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新人のためのインターネット&ネットワーク超入門2024
GitHub - contrastio/recorder: 📹 Recorder | Open-source web app to record screen and camera directly in your browser | No installation required | No tracking | Fully local | 🚀
Web To Figma
GitHub - dessant/web-archives: Browser extension for viewing archived and cached versions of web pages, available for Chrome, Edge and Safari
Patterns | Component patterns | web.dev
Stock - 日本のWebデザインギャラリー
Core Web Vitals in Practice
