Lighthouseのドキュメントを調べていたら、カスタムプラグインを作れるらしいのに気づきました。 カスタムな Audit を作りたかったので、やっていきます。 この記事の知識を多少要求します。 tl;dr Lighthouseのカスタムプラグインは「Gatherer」と「Audit」の2つのコンポーネントで構成される Gathererはデータを収集し、Auditはそのデータを使ってスコアを計算する Audit.meta.requiredArtifacts で必要なGathererを指定すると、自動的に Gatherer#getArtifact の結果が渡される カスタムプラグインを使えば、カスタム指標評価が作れる 最終的にこういうのが出来ました // Gatherer の生成物 🔍 MyGatherer { result: "gatherer-result" } // Custom
今や、AIを活用してソフトウェア開発すること自体は一般的になり、一種のブームと化している。 しかし、Web上で見かけるのはワンショットでテトリスを作る程度の小規模なプロジェクトの話がほとんどで、驚けるものの、正直あまり実用性は無いように感じる。 俺たちが本当に知りたいのはテトリスの作り方じゃねえ！現実の中規模以上のシステム開発で、いかに楽に良いものを作れるかだろ！ ということで、まずは弊社から現時点のノウハウを全公開しようと思う。 弊社ではCursorを1年以上活用（サービスがGAになったタイミングから全社員で利用）しており、一定のノウハウを蓄積してきている自負がある。ただ、あくまで一例ではあるので、ぜひみなさんの現場での活用事例も共有してほしい！ 免責事項AIエディタでの開発は、LLMとAIエディタの進化に伴い、常に変化している。 そのため、この記事で述べる方法論は、現時点での、弊社での
はじめに honeshabri.hatenablog.com 骨しゃぶりさんのブログで音声入力が激推しされていて、自分も普段から音声入力を使っているので、その使い方にとても共感できたし嬉しかったです。普通に音声入力がもっと流行ってほしいなと思います。 骨しゃぶりさんのブログ記事に触発されたのもあり、僕も音声入力について記事を書いてみました。この記事では自分のおすすめ音声入力ツールとその活用法を紹介したいと思います。 SuperWhisperのすすめ Whisperという音声認識モデルをご存知の方は多いと思います。これはTransformerベースの音声認識モデルで、OpenAIからOSSとして公開されています。特徴としては従来の音声認識と比べて、聞き間違いや聞き逃しが少なく、ノイズやフィラー（えーと、うーん、あー）を上手に無視してくれて、音声認識の精度が高いというところがあります。 よくあ
Cline を使い始めて2ヶ月ぐらい経った。 自分の直感として、Cline は真のイノベーションの入口であり、そして開けてはいけないパンドラの箱でもあったと思う。 ここでいう Cline は Cline型コーディングエージェントであり、広義には Devin / Cursor や Copilot Agent 等を含む話。だが、後述するように Cline でしか見えない世界がある。 その先の未来に、プログラマとしての自分はフルベットする、という話をする。 私たちが知っているプログラミングの終焉 大事なことは次の記事に全部書いてある。まずこれを読んでほしい。 (Google翻訳) Steve Yegge 氏は、置き換えられるのはジュニアおよび中級レベルのプログラマーではなく、新しいプログラミング ツールやパラダイムを受け入れず過去に固執するプログラマーであると指摘しています。 <略> これはプロ
なんか驚き屋っぽくてアレなんだけど、今回はさすがに驚く権利があると思うので、至急記事を書く。 やろうとしたこと 毎回手元の検証結果から技術記事を構成するのがだるい 自分のブログを適当に読ませておいて、その構成と文体を真似させればいいのでは 手元に mizchi/zenn というリポジトリがあり、ここに zennにポストする原稿を管理している。 $ tree ./articles ./articles ├── 1c35fdcc77065c02f631.md ├── 3e4742e24f2ca0118f70.md ├── 8a017097d3994ddc0a85.md ├── ai-code-generation.md ├── ai-programmer.md ├── ai-team-mate.md ├── antipattern-of-tournament-score-sheet.md ├─
はじめに こんにちは @togatogaです。検索とRustが好きです。 仕事として検索を始めて約1年半が経ちました。僕が情報検索を学び始めた当初は、どのように勉強すればいいのか分からず、手探りでさまざまな本や記事を読み漁りました。最近は周りから「どうやって検索を学んできたのか？」と聞かれることが増えたので、僕が特に役立った本や記事を紹介します。 本記事はただのソフトウェアエンジニアが検索エンジニアになるまでのリスペクト記事です。 事前準備 ChatGPTやPerplexityを活用して質問・要約・翻訳を行いましょう。安くはありませんが、24時間いつでも相談でき、英語の記事を日本語に翻訳・要約できるので非常に助かっています。本はPDF形式で購入し、ChatGPT/Perplexityに取り込んで質問や解説をさせていました。 基礎 検索技術を学びたいものの、どこから始めればいいか分からない方
🕹 Puppeteer is a Node library which provides a high-level API to control headless Chrome or Chromium over the DevTools Protocol. This guide has recipes for automating Web Performance measurement with Puppeteer. An accompanying GitHub repository for this write-up is also available. Get a DevTools performance trace for a page load Puppeteer API: tracing.start() const puppeteer = require('puppeteer'
Lighthouse のコードを読んだので、その実装を解説していきます。CLIの使い方から、直接APIを叩く方法、そして個別のAuditの実装を理解する流れを解説します。 これは Lighthouse を理解するための資料で、Lighthouseの使い方ではありません。 とはいえ、内部実装を理解することで Lighthouse についての理解が深まることでしょう。 Chrome Devtools Protocol Puppeteer が Chrome に向けて喋っているもの。Lighthouse も基本的に CDP を直接操作します。 Lighthouseの実装自体も、あんまり Puppeteer に依存せずに直接 CDP を操作する方向性を感じます。 CLI でデータを収集/解析 まず、lighthouse は計測対象である audits が存在します。これらの一覧を見てみましょう。 $
www.youtube.com 昨夜未明、インターネット某所で、プログラミング支援ツール「Cline」と、それを用いたゲーム開発の経験談*1を語り合う会合がありました。 CLINEが持つ、人間の介入を最小限に抑えながら暴走機関車ようにコードを生成する性質を軸に、CopilotやCursorなど既存のAIコーディングツールとの比較や、これまでのコーディングツールのアプローチからの変化、今後の開発における展望も議論されていました。 Clineの性質 ホストの@mizchiさんはClineを「強いパーミッション持って自動で実行されるのでイテレーションの回数が多い」「AIにコーディングのアシスタントではなく主導権を持たせても何とかなるということを気づかせてしまった」と評価していました。Cursorなどと比較してその自律性（相談せず勝手にやっちゃう）に強く惹かれているそうです。 確かに全部読み込ませ
読んだ。 ゲーム音楽はどこから来たのか――ゲームサウンドの歴史と構造 (ele-king books) (ele-king books, エレキングブックス) 作者:田中 “hally” 治久PヴァインAmazon 現代のビデオゲームにサウンドがともなうのは当たり前のことのようにおもえる。けれど、ほんとうに当たり前なのか。もしそうでないとすれば——というか、音ゲーのように直接メカニクスに組み込んでいるものを除けば当たり前とはいえないのだけれど——どうして「当たり前」とみなされるほどになったのか。このような問いに歴史と構造の両面からこたえていく……みたいな感じの本。 特徴 本書の特徴はいくつかある。まず、書名のキーワードが「ゲーム音楽」であるにもかかわらず、効果音なども含めたゲームサウンド全般を扱っていること。 また、複数の視点から歴史を追ってくれるのもおもしろい。第1章で（ビデオゲームだけ
https://anond.hatelabo.jp/20250105165945 上の記事を読んで、ドワンゴの中の人として糸柳で思い出したこと、彼を雇ったドワンゴがどんな会社だったのかを書いてみようと思う。 糸柳を雇ったのは、ドワンゴのエンジニアのトップだったS君だ。ここでは鉄男（仮名）と呼ぶことにする。 糸柳を雇う少し前、僕は鉄男を叱責したことがある。「お前は自分の使いやすい人間しか採用してない。だからてめえは小物なんだ。自分にない能力をもった奴を採用しろ」みたいなことを言った。 鉄男は中卒だ。そう、ドワンゴのエンジニアのトップは中卒だった。いや、鉄男だけでなく、ドワンゴの幹部エンジニアの半分以上は中卒、あるいは高卒だった。 これは当たり前で、当時のドワンゴは天才エンジニアみたいなやつがゴロゴロいる職場だった。同じ天才エンジニアなら、高校も大学も行かずにずっとプログラミングをやっている中
はじめに こんにちは！ Microservices Platform Network チーム の hatappi です。 メルカリでは、2023年からCDNプロバイダーを Fastly から Cloudflare へと段階的に移行してきました。現在、ほぼすべての既存サービスのトラフィック移行が完了しており、新規サービスについては全て Cloudflare を使用しています。 この記事では、CDNプロバイダーの比較ではなく、移行プロセスに焦点を当て、スムーズに移行するために実施したアプローチを解説します。また、移行が私たちの最終的なゴールというわけではありません。その先の取り組みの一環として、社内向けの「CDN as a Service」についても紹介します。 背景 メルカリでは、これまでに開発環境および本番環境を合わせて数百のFastlyサービスが存在しており、これらは私たちNetwork
株式会社スタディスト様の依頼で、フロントエンド傭兵として、Rails 内の巨大SPA の段階的なモダナイズの提案を行った事例紹介です。 いつもはパフォーマンス視点で仕事にかかるのですが、今回はマクロな設計視点でソースコードを読んでいきます。一旦は中期ゴールを提案しつつ、その作業の必要性を通して、なぜその変更が必要なのかという解説をしていきました。 コスパが良い部分からやりたいですね。でもコスパ感覚は人それぞれです。あくまでフロントエンド専門家の自分が優先度付けるなら、という観点でやっていきます。 今回の仕事にあたっていくつかの技術的な課題を取り上げますが、それはスタディスト様に問題があるという話ではありません。むしろ問題を修正しようという意思が強く、実際1ヶ月の期間中にいくつかの修正をマージすることもできています。 以下、敬称略。注意点として、今回の内容は中の人達が見返すための記述が多いの
Hono Advent Calendar 2024 4 日目の記事です。遅れてすみません！！！！！！！！！！！！！！！！！！！！！ 去年はかけなかったけど今年は書けたのでよかったです.......... TL;DR Cloudflare Images を使えば、Next.js の next/image による画像最適化を再現できます。さらに、Cloudflare Images の「blur」オプションを利用することで、base64 プレースホルダー画像をサーバー側で生成する必要がなくなり、処理が効率化されます。コスト面でも、Vercel の画像最適化機能（$5/1000 枚[1]）に比べ、Cloudflare Images は大幅に安価（$0.5/1000 枚[2]）です。 デモ はじめに この記事は @cloudflare/next-on-pages や @opennextjs/clou
以下の公開計測会でやったものを個別に解説してみる。 細かいテクニックが多いのだが、それを可能な限りテキストとスクショで解説したい。使い方の解説が中心で、どういう意味があるかは解説しない。 Chrome131時点のスクリーンショットで、後で読む場合は頻繁にUIが変わっている点に注意。大事なのは意図。 宣伝: これを御社のサイトで解説する仕事をやっています。 デモのURL これに意味はなく、今日偶然見ていただけで意図はない。関係ないがエッジランナーズは最高のアニメ。 DevTools を開く F12 or 右クリックから「検証」 DevTools > Lighthouse この状態で計測 このとき、新しいプロファイルを作ったりして、可能な限り Chrome拡張が入ってない状態にすること。Chrome拡張による処理も計測に含まれてしまう。 Lighthouse レポートの読み方 点数部分にマウス
JavaScriptでコンテンツを表示するサイトの特徴今回の相談内容は「ReactなどのJavaScriptでコンテンツを表示するサイトで、気をつけることは？」というものです。ペンネーム「dictav」さんが寄せてくださいました。ありがとうございます。Reactは、インタラクティブなユーザーインターフェイスを開発するためのJavaScriptライブラリです。 JavaScriptのなかに、ユーザーインターフェイスを構成する部品をHTMLで書いたものを、Reactではコンポーネントと呼び、このコンポーネントを使い回すことでサイトを構築していきます。Reactで作られたサイトは、サーバーからブラウザやGooglebotに渡されるデータのほとんどがJavaScriptであることが特徴です。 GooglebotはJavaScriptイベントを起こさないさて、ReactなどのJavaScriptライ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
