こんにちは、MedPeerの開発を担当している森田です。 今回は私が開発に参画しているMedPeerに元々E2Eテストで利用していたCapybaraと、reg-cliを利用してビジュアルリグレッションテスト(以下VRT)を行える環境を整備したので、それについてご紹介させていただきます。 なぜ、VRTを導入するのか？ VRTの要件と技術選定 実際に構築したVRT基盤の概要 VRT基盤の具体的な話 System Spec内でスクリーンショットを取得する reg-cliでスクリーンショットの差分をチェックする 分かりやすいコマンドでVRTを実行できるようにする CIで差分をチェックする OS間での利用フォントによる違いを吸収する おわりに 参考にさせて頂いた資料 なぜ、VRTを導入するのか？ MedPeerでは元々System Specを活用したE2Eテストを利用してフロントエンドを含めて品質を

PaintsUndoを作成したのは米スタンフォード大学に在籍する研究者のルーミン・チャンさんで、GitHub上でこのプログラムも公開している。チャンさんは「lllyasviel」のハンドルネームで活動しており、自由なポーズをとったキャラクターのAIイラストを生成できる技術「ControlNet」の開発者としても知られている。 チャンさんは「このプロジェクトは、人間の描画行動の基本モデルを開発することを目的としている」と説明。「これにより、将来のAIが人間のアーティストの真のニーズにより良く応えることが可能になる」と続けている。 「ユーザーは、このツールを使用して自由にコンテンツを作成できるが、現地の法律を順守し、責任を持って使用することが求められる。ユーザーは、このツールを使用して虚偽の情報を生成したり、対立をあおったりしてはならない。開発者は、ユーザーによる誤用について一切の責任を負わな

はじめに App Router はこれまでの React や Pages Router による書き方と大きく異なります。これは、React Server Components（RSC） というアーキテクチャが導入され、開発の考え方が大きく変化したからです。そのため、App Router を理解するためには RSC の理解が必要になります。 しかし、私は RSC の理解に苦戦しました。 この記事は、そんな私が RSC の理解を深めるために様々な記事から学んだ内容を言語化したものです。 まず初めに、CSR や SSR といったこれまでのレンダリング手法について復習し、これらが抱える問題を確認します。その後、その問題を解決する RSC が何者なのか？を理解します。 CSR の復習 React では CSR 戦略が用いられてきました。 CSR では、クライアントが受け取るのは次のような中身のない空

公開日 2024/06/25更新日 2024/07/01モダンな開発環境のBtoB SaaSアーキテクチャ特集 技術選定のポイントと今後の展望 ご好評頂いているアーキテクチャ特集の第三弾となる今回は、BtoB SaaSを提供する企業10社にご協力頂き、技術選定のこだわりや今後の展望をご寄稿いただきました。アーキテクチャを通して、各社の事業特性や設計思想にも触れられる内容となっております。※ご紹介は企業名のアルファベット順となっております 株式会社あしたのチーム あしたのチームは「誰もが "ワクワク" 働ける世界を創る」をビジョンに掲げ、人事評価制度の構築・運用・クラウド化で "人と組織の成長" を支援しています。今回は、2024年4月にリリースされた同社の新サービス：パフォーマンスマネジメントプラットフォーム『Cateras™』のアーキテクチャについてご説明します。 アーキテクチャ選択の背

以前見学させていただいた「マイコン博物館」が6月22日に正式オープンしました。 1日の利用が大人1000円で、動態保存してあるマイコンを利用できるオプションが3000円。全て予約制で、水曜日が休館日。開館時刻は12時～18時。最終入館時刻は17時となっています。突然の訪問はできません。詳細はこちら。 筆者は正式オープン前に伺ったのでまだ整理されていない状態でしたが、展示のために集められたマシンたちは実に素晴らしいものでした。 マイコン博物館プレオープン訪問記の後編をまだ書いていなかったので、個人的な過去の体験を交えながらここに書いておきます。以下に登場する記述や写真はプレオープン時のもので、今は収まるべきところに、正しい説明とともに収蔵されているはずです。 1981年冬のマイコンフェアが青梅に再現されていたここを訪れた後、思い出した場所があります。それは五反田TOCのどこか。1981年冬の

JJUG CCC 2024 Spring 複雑な業務ロジックに立ち向かうための実践技法 【初級編】 ①値の種類 ②範囲型 ③階段型 【中級編】 ④状態遷移 ⑤入出金履歴と残高 ⑥未来在庫 【上級編】 ⑦セット演算 ⑧割合と端数 ⑨決定表 ⑩経路探索

【うひょ氏】技術発信や登壇資料づくりに。記事の隙をなくして理解度を上げる文章テクニック 2024年6月3日 フロントエンドエンジニア うひょ TypeScriptとReactが得意なフロントエンドエンジニア。株式会社カオナビ所属。ウェブ上の技術記事や雑誌を通じて技術的な情報発信を続けている。実はJavaScript歴19年。 著書『プロを目指す人のためのTypeScript入門』（技術評論社） X（@uhyo_） 個人サイト（uhy.ooo） 皆さんこんにちは。前回は、私の技術発信の遍歴をご紹介するとともに、私の考える、技術発信に必要な能力や考え方をご紹介しました。 今回は、より具体的なテクニックやその背景をご紹介します。すでに技術発信をしている方や、これからやろうと思っている方はぜひ参考にしてみてください。文章のテクニックと、登壇（登壇資料）のテクニックをあわせてご紹介します。 keyb

本稿はNext.js v15.0.0-rc.0時点の情報を元に執筆しており、PPRはさらにexperimentalな機能です。v15.0.0のリリース時や、PPRがstableな機能として提供される際には機能の一部が変更されてる可能性がありますので、ご注意下さい。 Partial Pre-Rendering(以降PPR)はNext.js v14.0で発表された、SSRやSSGにならぶ新たなレンダリングモデルです。 PPRは前述の通り開発中の機能で、v15のRC版にてexperimentalフラグを有効にすることで利用することができます。ppr: trueとすれば全部のページが対象となり、ppr: "incremental"とすればexport const experimental_ppr = trueを設定したRouteのみがPPRの対象となります。 // next.config.mjs

KillerCodaというサイトがあるのですが、こちらは無料でKubernetesを使えそうだったので色々試してみます！ なんとCKAやCKADの練習にもなる！というのが魅力的に感じました✨ KillerCodaの概要 ユーザーが既存のシナリオから学び、クリエイターとしてはあらゆるツールや技術を教えるためのシナリオを提供できることが特徴のサイトです。単に無料で遊べるというよりは、シナリオを作る・シェアする・学ぶというところがメインのようです。 それは無料/有料ユーザーの違いにも表れています。Nodeのスペックではなく、シナリオに関連する要素が課金対象となるようです。 Free User シナリオ使用数は無限 パブリックシナリオは3つまで作成可能 PLUS Member（有料メンバー） シナリオを4時間まで使用可能 同時に３シナリオを開くことができる Exam Remote Desktopを

はじめに Next.js を Cloudflare にホスティングしようとすると、必然的に Edge Runtime 環境になります。しかし、Edge Runtime 環境では、Node.js Runtime と異なり、Prisma がそのまま使えません。 最初に思い浮かぶ解決策は Prisma Accelerate です。Prisma Accelerate は公式のサービスで、接続プールイングやグローバルキャッシュ機能を備えており、Edge Runtime でも Prisma を使えるようにします。 しかし、無料プランだと月に 6 万クエリの制限があり、本番運用には不安が残ります。 そこで、今回は Prisma Accelerate を自前で Cloudflare Workers 上に構築し、本番運用に耐えうるサービスを無料で開発する方法を紹介します。この方法なら、無料プランでも 月に

こちらのイベントの登壇発表資料です。 アーキテクチャを突き詰める Online Conference https://findy.connpass.com/event/314782/

イーロン・マスクの衛星通信｢Starlink｣で3日間生活してわかったこと2024.05.19 16:3588,995 マエノケンタ 2023年3月13日の記事を編集して再掲載しています。 どこにいても、インターネット。 Starlink（スターリンク）は、イーロン・マスク率いる宇宙開発企業SpaceX（スペースエックス）社が提供する、衛星インターネットサービス。 光ファイバーなどの物理的な回線を引かなくても、アンテナで上空の衛星と通信できさえすれば、誰でもどこでもインターネット環境がゲットできてしまう。そんな革命的な通信インフラサービスなんです。 このサービスを使えば、離島や、大自然の中の一軒家、日本中どんな場所でもテレワークができる。 そこで、編集部員4人でStarlinkを使って、Wi-Fiがないコテージで実際に3日間仕事をしてみることにしました。 先にお伝えしておくと、家に帰ってき

2024/05/11に行われたTSKaigiで発表したLTの資料です！ ◎概要 TypeScriptはJavaScriptのスーパーセットとして、静的型付けと高度な型システムを提供し、大規模なプロジェクトの開発を助けています。しかし、これらの利点を最大限に活用するためには、コンパイルパフォーマンスの最適化が不可欠です。コンパイル速度を上げることでビルド時間やテスト実行時間の削減を行うことができます。今回の発表では、TypeScriptのコンパイルパフォーマンスを改善するための具体的な手法とその背後にある理論をいくつか紹介します。 ◎内容 1. TypeScriptのパフォーマンスとは何か、そしてなぜそれが重要なのか 2. コンパイル速度を改善するための具体的な手法とその背後にある理論 本資料で紹介している内容については以下の記事で詳しく記載していますので合わせて参照していただければと思いま

TSKaigi 2024 ref: https://tskaigi.org/talks/tockn

アジもりだくさんの、魚問屋食堂さかなやくろへ 喫茶フレンドで電車を待ちながら 館山は小さなリゾートだった 海の街であるならば、寿司をたべよう 館山式モーニング、チキンバスケットセット 旅立ちのびわゼリー 内房の街をひたすら歩く 海水浴場の喫茶店 黄金アジフライという、天衣無縫の食べ物 突然、アジフライが食べたいなと思った。しかも、そのへんのアジフライということではなく、とびきりおいしいやつがいいなあと思った。そういうことが時々ある。揚げ物の引力だ。 それは、木曜日のことで、来る週末には何も予定がなかった。しかも月曜は有休である。しめしめと、僕はグーグルマップを開き、いいアジフライを食べられそうな場所を検討することにした。やはり海沿いがいいよな。茨城と神奈川はこの間行ったしなあ。ぱっと行けて海があるところということで、自然と目的地は千葉となった。外房はやや遠いということで、内房へとりあえず向

「とほほのWWW入門」管理人の杜甫々氏が、これまでの経歴と、「とほほのWWW入門」執筆時に気をつけていること、自身の趣味について話しました。全2回。 「とほほのWWW入門」管理人　杜甫々氏 杜甫々氏（以下、杜甫々）：どうも杜甫々です。「とほほのWWW入門」というやつを作っています。こういうところに出ることはあまりなくて、2022年の岡山のオープンセミナーも録画でやっていたので、こんなにたくさんの人の前でしゃべるのは初めてだったりします。 まずちょっと、おじさんの紹介をやっていきます。「とほほのWWW入門」の管理人です。1996年から始めたので、もう27年目に突入ですね。ハンドルネームは杜甫々です。途中で漢字を当てはめてみました。本名は違いますけどね。 広島生まれの広島在住です。もちろんカープファンです。2023年の観戦成績は6勝1敗で、けっこう良かったんじゃないかなと思っています。 次にイ

すがやみつる @msugaya 私も試してみました。プロンプトは、以下のとおりです。 ＊＊＊＊＊ 『ゲームセンターあらし』というタイトルのマンガがありますが、このマンガに関係なく、タイトルだけのイメージから、美少女がゲームセンターで激しくゲームをプレイする絵を、マンガタッチで描いてください。 ＊＊＊＊＊ こちらの方が年齢が高そうですね(^_^)。 ChatGPT経由でDALL-E3に描いてもらいました。 2024-04-30 22:26:48 ジロー @i9r82k こんこんばんばん 本日夜便は、ゲームセンターあらしより「ゲームセンターあらし」です ゲーセンというか、カラオケじゃないか？ 黒髪ショートカットって意外に珍しい気がする なんか悪友というか、腹を割って話せる関係っぽい感じがします ＃画像生成AI ＃美少女 pic.twitter.com/8SF9NJb1QR 2024-04-30

Web開発において、ページの読み込み速度は非常に重要になります。 そのためにもブラウザのキャッシュは効率的なWebサイト運営に不可欠な機能です。 ブラウザのキャッシュには次のHTTPヘッダを設定することができます。 Expiresヘッダ Cache-Controlヘッダ Last-Modifiedヘッダ ETagヘッダ これらのキャッシュには強いキャッシュと弱いキャッシュで分類が可能です。 「Expires」「Cache-Control」は強いキャッシュであり、「Last-Modified」「ETag」は弱いキャッシュに分類できます。 強いキャッシュと弱いキャッシュ 強いキャッシュは設定された期間内は完全にローカルキャッシュを利用して、サーバーへのリクエストを行いません。 一方で弱いキャッシュはキャッシュされたリソースの検証が必要であり、ETagやLast-Modifiedヘッダを利用して

ENECHANGEでは、電気とガスの料金シミュレーションサービス「エネチェンジ」を開発しています。リプレース前の「エネチェンジ」のフロントエンドは、jQueryがメインで、ところどころVue2が使われていました。今回は、長年の開発によって積み重なったフロントエンドの技術負債をどのように解消しているのかについてご紹介します。