scrollbar-gutter CSS プロパティでスクロールバーの切り替わりによる画面のガタツキを解消する 2024.06.01 子要素が親要素のボックスからはみ出した時、overflow プロパティの値が auto または scroll の場合にスクロールバーが表示されます。スクロールバーがクラシックスクロールバーの場合、スクロールバーの表示・非表示によりボックスの幅が変わるため、画面がガタつくことがあります。scrollbar-gutter プロパティを使うとスクロールバー用のスペースをあらかじめ確保でき、画面のガタツキを解消できます。 子要素が親要素のボックスからはみ出した時、overflow プロパティの値が auto または scroll の場合にスクロールバーが表示されます。スクロールバーがどのように表示されるかは OS やブラウザの設定により異なりますが、大きく分けて以下

[beta] Next.jsクイズ2 • <p>にはなにが表示されるでしょうか？ /app/page.tsx "use client"; import { useCallback, useEffect, useState } from "react"; export default function Home() { const [date, setDate] = useState(); const fetchDate = useCallback(async () => { const response = await fetch("/api"); const data = await response.json(); setDate(data.date); }, []); useEffect(() => { fetchDate(); }, [fetchDate]); return ( <

こんにちは。人事評価機能のプロダクトエンジニアをしているotaniです。 私達のチームでは起こったエラーの検知・対応を監視ツールであるSentryで行っていますが、表示されるエラーメッセージやスタックトレースだけでは原因の特定が困難で、対応の優先度を決めかねることがありました。ひと目見て原因や再現方法が分かる場合は良いのですが、例えばユーザー側で入れたブラウザの拡張に起因したエラーや、特定のタイミングで操作すると起こるエラーなどには調査に時間がかかってしまい、結果として判断しきれずに優先度が下がってしまう問題などが起こっていました。 そんな状況の中、Sentry Replayによって上記のような課題を部分的に解決し、エラー調査の負担を減らすことができたので紹介したいと思います。 Sentry Replayとは Sentry Replayとは、Sentryのアドオン機能の1つで、アラートが上

はじめまして。 BaseconnectでマーケティングとAIによる業務改善を行っている岩村といいます。 今回は、ゴールシークプロンプトで有名なハヤシ シュンスケさんにご協力いただき作成した、WBSという目標達成のプロンプトを紹介できればと思います。 この記事をキッカケに、少しでも多くの方がAIを活用し、やりたい事や目標が達成できることを願っています。 少しでもお役に立てれば幸いです。 プロンプトは以下からご利用いただくことが可能です。 ※シュンスケさん、ここまでアドバイスいただき、本当にありがとうございました！！ クリックいただくとご利用いただけます。※プロンプト内に解説も入ってますWBSとは？WBSとは目標達成のために必要な「やるべきこと」を体系的に導き出し、 それを実行可能なタスク(ワーク)に落とし込むことWBS(Work Breakdown Structure)とは、ビジネスの場で大

Justtechtalk #9でお話した資料になります！

The No-Hassle CMS for GitHub Tired of juggling Git and YAML to update your Next.js, Astro, Hugo or Nuxt website? Make it easy on you and your team, get a user-friendly CMS running straight on top of GitHub. Packed with features... Configurable Customize content types, views, search, and more. Visual editor Rich-text, syntax highlighting, and more. Media manager Drag and drop upload, multi-file sel

「個人開発してるWebサービス」というのは Pixela のことで、runn とは @k1loW さんが開発しているオペレーション自動化ツール/パッケージです。 pixe.la github.com Pixela は、そのユーザーインターフェースとして基本的に Web API のみを提供しているサービスで（サービスを利用するための各種操作は基本的にすべて Web API に対する HTTP リクエストによって行う必要がある）、現在そのローンチから6年目を迎えるサービスです。 blog.a-know.me ありがたいことに、世界中のユーザー（特に、プログラミング初学者の方によくご利用いただいているようです）に継続的に使っていただけているサービスになっており、登録ユーザー数はもうすぐ7万人に到達しようとしているところです。開発・メンテナンスに係る私の人件費を除けば、黒字運営を続けることもできて

はじめに こんにちは。クラウド事業部の野本です。 業務でモックサーバを作る際に、静的なファイルをふつうに URL でアクセスしてダウンロードできるようにする必要がありました。この用途に AWS の S3 を使いたいものの、バケットの設定を間違えると全世界に公開されてしまいそうで、公式ドキュメントを調べながら恐る恐る設定しました。 調べた結果、バケットポリシーで適切なアクセス制限を掛けるならパブリックアクセスブロック機能は有効のままでもいいことがわかりました。その設定方法や考え方について纏めます。 設定方法 S3 のオブジェクトを URL 直アクセスでダウンロードできるようにするには、 REST API GetObject を全員に許可するようにバケットポリシーを設定します。 リクエスト元を制限する際にポリシーが「非パブリック」と判定されるよう設定すれば、パブリックアクセスブロック機能はオン

こんにちは。SmartHR プロダクトエンジニアの sasaki (@s_sasaki_0529) です。 今回は、私が開発に携わっている届出書類機能における E2E テストを、Capybara + Selenium の構成から Playwright に移行し、開発プロセスに組み込んだお話をします。 扱う話題 E2Eテスト基盤を移行する具体的な背景と理由 移行における提案から、合意形成までの流れ 移行後の開発プロセスがどう変わったか 扱わない話題 Playwright など、記事内で扱う技術要素自体の詳細説明 移行作業自体の詳細 テストコードの設計・実装に関する具体的なテクニック なお、本記事では便宜上、移行前の E2E テストを「旧テスト基盤」移行後を「新テスト基盤」と呼称します。 届出書類機能について E2Eテストに限らず、テストというのはプロダクトの特性によって最適な手法は大きく変わ

※こちらはバイセルテクノロジーズ Advent Calendar 2023の10日目の記事です。 前回の記事は、金澤さんのAuth0とEntra IDを扱うプロダクト同士を繋げるためのIstio設定あれこれでした。 はじめに こんにちは、開発3部の神保です。 バイセルでは、お客様宅への出張訪問による買取が買取チャネルの主力となっています。現在開発3部の弊チームでは、この出張訪問買取で使用されるWebアプリケーション「Visit」の新規開発を進めています。 VisitのフロントエンドにはReactを採用しましたが、Next.js等のフレームワークは使用せず、Vite + ReactによるSPA (Single Page Application)構成を選択しました。 技術選定の過程では、社内での採用事例などからNext.jsも検討の対象となりましたが、最終的にはその採用を見送る結論に至りました

こんにちは。SRE部の巣立（@ksudate）です。 我々のチームでは、AWS上で多数のマイクロサービスを構築・運用しています。マイクロサービスが増えるにつれて、CI/CDの長期化やリリース手法の分散など様々な課題に直面しました。 本記事では、それらの課題をどのように解決したのかを紹介します。 目次 目次 はじめに CI/CDのこれまで Release PRによるリリース CI/CD実行時間の長期化 マイクロサービスごとのリリースが難しい リリーサーの制限ができない ドメイン単位の並行リリース リリース手法が分散する ブランチ間の同期が必要 パイプラインの増加 CI/CD実行時間の長期化 リリーサーを制限できない CI/CDの刷新 高速かつシンプルなCIパイプライン 変更差分を利用したCIパイプラインの実行 承認機能付きのCDパイプライン GitHub Environmentsによるリリー

1泊2食付き2万円以下の宿で、コスパ重視の総合ベスト10を選出した 2023年も終わりに近づくタイミングでの公開となり恐縮ですが、本稿は「2022年に泊まった温泉宿」の振り返り記事です。 私自身が2022年に泊まった宿の中から「2食付き2万円以下で1人で泊まれる」宿限定でご紹介しています。 先に公開済みの「2022年に泊まった温泉宿で｢部屋｣｢風呂｣｢食事｣が良かったおすすめ宿ランキングを発表する」では、2022年に泊まった宿の中で「部屋・建物」「風呂」「食事」の3項目について「突出して良かった宿」のベスト3をそれぞれ選定しました。 「食事」や「部屋」部門では特に、宿泊料金の高い宿が上位に入りやすい傾向があります。なので「すごく印象が良かったけど項目ごとのランキングには入らなかった」宿がいくつもあるのです。 そこで、2022年に泊まった宿の中から「1泊2食付で2万円以内で泊まれる」宿に限定

この記事で取り上げたように、UIに動きを取り入れる際は大きく２つの目的があります。 １つ目は「理解のための動き」です。利用者は動きを通じてシステムの状態や変化、情報の構造や関係性、操作方法についての理解を得ることができます。２つ目は「演出としての動き」です。グラフィック要素と共に使用されることが多く、モチベーションや達成感や愛着など利用者の感情に働きかけます。 今回の記事では１つ目の「理解のための動き」について、具体例を交えながら深めていきたいと思います。 動きによって何の理解を助けるのか？UIの動きによって何の理解を助けるのか？ 理解のための動きの目的をさらに複数に分けると、大きく以下の４種類に分類することができます。 アクションの結果を伝える システムの状態や変化を伝える 操作方法の理解を助ける 情報の構造や関係性の理解を助ける 具体的な事例を元に説明していきます。 1. アクションの

有料アプリ Macには非常に強力なサードパーティの有料アプリがラインナップされており、クリップボード、スクリーンショット、トラックパッドなどmacOSの各部分をそれぞれ大幅に強化できるものが揃っています。これら優秀な有料アプリの存在は個人的に長年Macを愛用している強い理由でもあり、どれも手放せないマストアイテムばかり。 これらの中には買い切りライセンス、アップデート期限付きライセンス、月額・年額サブスクリプションなど料金形態が細分化されていますが、初期費用を抑えて導入するのであればSetappというストアの利用もおすすめ。Setappは月額$9.99（約1,400円）の定額で幅広い有料Macアプリが使い放題のサービスで、初回は無料で7日間お試しする事も可能。 今回紹介するMacアプリの多くもSetapp経由で導入可能なので、気になった方は7日間の無料お試し期間を活用して色々と試してみるの

はじめに この記事は『Picture perfect images with the modern img element』という記事を参考に画像最適化に関しての重要な観点をまとめたものです。 画像はWEBにおいても重要な役割を担っており、2021年時点で1つ以上の画像を含むWEBサイトは95.9%、faviconなども含めて1回でも画像取得のリクエストを送信するWEBサイトは99.9%であるという調査もあります。 さらには、LCP要素の約70%が画像であるという調査が出ています。 Largest Contentful Paint（LCP）は、Googleが提唱するCore Web Vitalsの1つで、ウェブページのパフォーマンスを測る指標です。詳しくは次の章で解説します。 つまり、WEBのパフォーマンスにおいて画像の最適化は重要な観点でありユーザ体験に直結することがわかります。 画像最

あなたのWeb制作をサポートしてくれるWebツール13選Update2023.05.24Release2023.04.28Tools HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する Web制作をサポートしてくれるツールを10個紹介します。mix-blend-modeやgridレイアウト、transformなどのコードの他にもフォントチェックや背景画像を作成できるツール、VSCodeのテーマ作成ツールもあります。あなたのWeb制作を快適に進めるためにチェックしてみてください。 Fuze – CSS Gradient AnimatorFuzeグラデーションアニメーションのCSSジェネレーター。色を複数指定するだけでCSSアニメーション用のコードを作成してくれます。背景色やテキストカラーなどに使えます。 ちなみに、テキストカラーは当サイトのト

初めに 昨日のアップデートでAWS Lambdaは実行結果の返却値を一括の応答ではなくストリーミングな徐々に応答するようなことが可能となりました。 いざ日本語に直そうとすると微妙に難しいタイトルで実際の公式の翻訳がどうなるか次第では少しタイトルを調整するかもしれません。 これまでの方式ではLambdaの機能としては処理完了まで返却値を返すことができず、そういった機能が必要な場合はWebSocket等別の手段をユーザ側で実装する必要がありました。 今回のアップデートではTransfer-Encoding: chunked形式による返却に対応しHTTP/1.1の仕様の範囲内で徐々に値を返却できるようになりました。 またこの方式は応答サイズの上限が従来の6MBではなく20MBまでの対応となるためより大きなレスポンスを返すことができるようです。 Configuring a Lambda funct

はじめに 2023年3月27日に iOS 16.4 が公開され、iPhoneのSafariでもPush通知が利用できるようになりました。 Web Push機能を実装したPWAが iOS 16.4 Safariでどのように動作するか検証したのでまとめます。（動作検証端末：iPhone 13 mini） 目次 Push通知の動作確認 バックグラウンドやスリープ時の動作確認 Push通知にURLを指定した場合の動作確認 まとめ プッシュ通知の動作確認 Web Push機能を持つPWAを用意して、次のようなパターンで動作を検証します。 Safari（ブラウザ上）でPush通知が動作するか ホーム画面に追加したPWAでPush通知が動作するか Push通知の動作確認用のWebページは次に示すような実装をしました。 ホーム画面にインストールする実装 manifest.jsonファイルを作成する Ser

[JavaScript] URLを文字列結合で組み立てないために、url-cheatsheetを作った URLを文字列結合で組み立てると色々問題が起きやすいので、それを避けるためにURL APIやURLSearchParams APIでURLを組み立てるパターンをまとめたチートシートを作りました。 azu/url-cheatsheet: URL manipulation cheatsheet for JavaScript URLにユーザーが入力した文字列を含めるときはencodeURIComponentでエスケープする URLはプレーンな文字列ではなく構造化された文字列(文字の並びに意味がある文字列)として扱わないと、さまざまな問題を抱えやすいです。 たとえば、次のように文字列結合でURLを組み立てるとパストラバーサルの問題があります。 name に ../../adminのような文字列が