技術解説— technology

「技術解説」カテゴリの研究メモ一覧です。

50本
87全件

技術解説

— 50 entries
  • —PageSpeed InsightsのCrUXはどこまで信じてよい？ モバイルは的中、デスクトップは実測46%遅かった07.20PageSpeed InsightsやSearch Consoleを開くと、「実際のユーザーの環境で評価する」というフィールドデータが目に入る。競合サイトのURLを打ち込めば、他社の速度まで外から覗けてしまう。この便利な数字の正体が CrUX（Chrome UX Report） だ。…
  • —実例に学ぶサイトスピード改善(6) 画像の寸法指定でガクッと動くページを防ぐ07.19CLSは「表示の速さ」とは別の指標で、ページ読み込み中にコンテンツが突然ずれる現象を数値化したものだ。画像にwidth/height属性を指定してアスペクト比をブラウザに教える、カルーセルの初期高さをCSSで確保するという2つのアプローチで、実在4サイトのCLSが最大89%改善するというシミュレーション結果を紹介する。
  • —実例に学ぶサイトスピード改善(5) 外部CDNは速いとは限らない07.14外部CDNやパブリックCDNからリソースを配信すると、ドメインごとにDNS・TCP・TLS接続コストが追加で発生する。クリティカルパス上のCSSや同期的なJSライブラリが対象なら、接続コスト1回分でFCP・LCPが1秒以上悪化していたことがシミュレーションで示された実例がある。
  • —実例に学ぶサイトスピード改善(4) 重い日本語Webフォントが表示を遅らせる07.13日本語Webフォントは文字種の多さからファイルサイズが英語フォントと桁違いになりやすく、レンダリングブロックと転送コストを通じてFCPとLCPを大きく遅らせることがある。実在ECサイト4例のシミュレーション数値を引きながら、未使用フォントの削除・font-display指定・サブセット化・preconnectを中心に対…
  • —実例に学ぶサイトスピード改善(3) テキストはGZIP/Brotliで圧縮する07.08テキストリソース（HTML・CSS・JavaScript）のGZIP/Brotli圧縮は、サーバー設定を変えるだけで転送量を60〜80%削減できる。実在サイトを調べると設定が漏れているケースは意外と多く、有効にするだけでLCPが1秒以上改善するというシミュレーション結果が得られた例もある。
  • —実例に学ぶサイトスピード改善(2) 画像は次世代フォーマットに移行する07.05JPEG/PNGからAVIFやWebPといった次世代フォーマットへの移行は、転送量の削減に効く。一方で「画像を軽くすればLCPが改善する」とよく言われるが、LCPは前段のFCPやダウンロード開始でほぼ決まり、フォーマット変更でLCPが大きく縮むのは画像が極端に重いサイトに限られる。
  • —実例に学ぶサイトスピード改善(1) LCP画像は最優先で読み込ませる07.01ファーストビューの最大画像にlazyloadが残っていると、JavaScriptが動くまで画像のダウンロードが始まらず、LCPが数秒単位で悪化する。多くはJS lazyloadの名残や設定の見落としによるものだろう。実在サイトの数値とともに、lazyを外して遅延を取り除く対処法を解説する。
  • —サイトスピードが遅いなら、まず疑うべきはサードパーティタグ06.22サイトスピードの相談を受けると、ページの作りを見直すという前提で話が進みやすい。何か実装方法が間違っているのだから、それを直せばスピードは上がるはず、と考えるのは自然な話だ。…
  • —ページスピードは一定ではない？ みんなのスピード体験を想像するコツは「対数正規分布」06.20「自分のPCで見るとそんなに遅くないんですけど」。サイトの表示速度を議論するとき、こういう言葉を耳にすることがある。悪意ではなく本当にそう感じているのだ。…
  • —「サイトスピード＝LCPなどの指標」ではない理由06.17「サイトスピードを改善しましょう」と言うとき、多くの人は指標の数値を良くすることだと受け取る。それは間違いではないし、実用上も大きな問題はない。しかしユーザーが体感するサイトスピードこそが本来の正体であり、時間的な指標はそれを数値化する便宜的な尺度に過ぎない。だから、…
  • —アニメーションを抑制したWebスクリーンショットを撮るCLIツール static-webshot02.04Webページのビジュアルリグレッションテストを行う際、最大の敵はアニメーションだ。カルーセルスライダー、CSSアニメーション、フェードイン効果...これらの動的要素があると、撮影のたびにスクリーンショットが異なり、まともなピクセル比較ができない。…
  • —Webページのほぼ完全なコピー環境を作る http-playback-proxy01.26Webページの表示スピード改善は、やはり実際に変更して計測してみないと効果は見えにくいものだ。そのため、できれば本番環境には手を加えず、どこを変えたらどうなるかを何度も繰り返しシミュレーションしたい。そのための技術として「http-playback-proxy」をオープンソースで公開している。…
  • —ページ読み込みプロセスを動画化するCLIツール「Loadshow」をGo言語でリニューアル12.27PageSpeed InsightsやLighthouseでWebサイトの表示スピードを計測すると、スコアやLCP、Speed Indexなどの専門的な指標が数値で示される。しかし正直なところ、数値だけを見て「このサイトは速い」「遅い」と直感的に判断できる人がどれだけいるだろうか。…
  • —Gemini CLIで寝ている間に仕事してくれる「小人のくつ屋さん」を手軽に実現する09.01AI に退屈な作業をまかせ、自分の時間を確保する自動化は個人的に大きなテーマだ。以前、こちらの記事に多くの反響をいただいた。 AI エージェント × MCP × スプレッドシートで寝ている間に仕事をしてくれる「小人のくつ屋さん」を実現する | ideaman's Notes Qiita 版 AI エージェント ×…
  • —Feedlyの「あとで読む」を一括で抜き出す方法08.26RSS リーダーの Feedly には長い間お世話になってきたし、有償の Pro プランを使っている。今でも UI は最高に使いやすいのだが、API が Enterprise プランしか対応しておらず使えない。 自分がブックマークした記事を AI でもっと活用したいのに、これでは不便なので inoreader…
  • —Web画像フォーマットの細かなバリエーションを網羅するデータセットとツールキットを公開05.31弊社ではWeb画像に関するサービスを展開しているが、一言にJPEG、PNG、GIFといっても内部的に多くのバリエーションがある。例えばJPEGであれば、Exifの有無や圧縮方式の違いなどだ。…
  • —広報ブログをリニューアル・VitePressカスタマイズのコツ05.06この技術ブログと別に、以前から運用している広報ブログがある。 ideaman's Blog 長らくこれをリニューアルしたいと考えていたが、このゴールデンウィークにやっと実現した。 最近は Cursor であらゆる作業を行うため、Movable TypeからVitePress + GitHub…
  • —Mastra + ローカルLLM経由でMCPする05.02最近、Macbook ProをM1 ProからM4 Proにアップグレードしたので、 LM Studio でローカルLLMを動かしてみたらさすがに早い。 そこに Qwen3 というまたすごそうなオープンソースのLLMが公開されたので、 第2のDeepSeekショック？…
  • —Googleスプレッドシートを簡易データベースにするNPMモジュールを公開04.26TypeScriptによるプログラムで、Zodで型を規定しつつ、Googleスプレッドシートを簡易的なデータベースとして利用できるモジュールを開発した。 ideamans/node-google-spreadsheet-tables 日本語README google-spreadsheet-tables - npm
  • —AIエージェント × MCP × スプレッドシートで寝ている間に仕事をしてくれる「小人のくつ屋さん」を実現する04.20グリム兄弟の「小人のくつ屋さん」を聞いたことがあるだろう。寝静まった真夜中に不思議な小人たちが靴を仕上げてくれる童話だ。 最近話題のAIエージェントとPlaywright MCP(ブラウザ操作MCP)は、自然言語による指示で動き、人間へ頼んだかのような感覚で、自律的にブラウザを操作してくれる。…
  • —メディアサイトのアクセスランキング採用率は？ 平均 74%04.17さまざまなサイトでアクセスランキングを目にするが、実際どのくらい採用されているのだろうか？ 記事コンテンツを中心としたいわゆるニュース系メディアサイト220サイトについて調査してみた。 その結果、 約 74% のサイトでアクセスランキングが表示されている ことがわかった。…
  • —AIで300件ほどのメディアサイトを挙げてみた04.10メディアサイトについて横断的な調査をしたいと思い、AIでリストを作ってみた。ディープリサーチによるリスト作成がどのくらいの分量まで行ってくれるのかも確かめたかった。 以前であれば数十件でも素人がバランスよく集めるのは大変だったが、今はコーヒーを飲む間にできてしまう。本当にすごい時代になった。…
  • —高速な通販サイトのための設計と実装03.17体感スピードの速い通販サイトを実現するにはどうすべきか、これまでの経験をもとに設計と実装のプラクティスを紹介する。 この記事は、新たに立ち上げるサイトや大幅なリニューアルを行うことを前提としている。既存サイトの手直しにはあまり実践的な内容ではないので、あらかじめ注意されたい。…
  • —WebP変換の適切なタイミングについて02.15Web 画像データを WebP や AVIF などの次世代画像フォーマットにすると、同じ画質でもそのデータ量を大幅に削減できる。AWS などの海外クラウドサービスではデータ送信料金を削減でき、ユーザーの通信負担も軽くなる。その効果は小さくない。…
  • —目標使用量ベースのファイル削除ツールを公開02.11システムにおいて、キャッシュファイルやバックアップファイルはできるだけ長く保持しておきたいが、それによりストレージの空き容量が枯渇することは避けたい。 find コマンドを使い、例えば「1 週間以上古いファイルを削除する」といったスクリプトの例はよく目にする。しかし本質的な解決にはなっていない。1…
  • —Web技術で作るグラフィックツールの拡張機能01.14次のグラフィックツールの拡張機能(プラグイン、アドオン、アプリなどの呼称)について軽く調査した。 Figma Canva Photoshop いずれも Web 技術(HTML・CSS・JavaScript)で作ることができる。HTML と CSS でユーザーインターフェースを整え、JavaScript…
  • —スピード指標の確率分布ユーティリティをNPMで公開12.31Core Web Vitals をはじめとする多くサイトスピード指標は対数正規分布に基づくとされている。 その計算についてこれまでプロジェクトに応じて実装していたが、共通して利用できるユーティリティライブラリを公開した。 web-vitals-distribution - npm…
  • —サイトスピード指標の対数正規分布を確かめる12.29Core Web Vitals をはじめとするサイトスピード指標の多くは、 対数正規分布 に基づくとされている。 実際に Google はその前提に基づき PageSpeed Insights のスコアを設計しており、弊社も「そのようなものだ」としてデータを扱っている。…
  • —Ranklet4 アクセスランキングの AIレビュー登場！12.16弊社が提供するアクセスランキング機能運用サービス Rankelt4 に、 AIレビュー機能 を追加した。 CDTV(カウントダウンTV)のようなランキング形式の音楽番組をイメージしてほしい。先週のトップ10を振り返り、今週のトップ10を楽しみながらMCがコメントする。…
  • —Core Web Vitalsの改善は本当に進んでいるか11.28Core Web Vitalsが検索順位に影響すると言われて数年が経った。SEOに関わらず、サイトスピードに関心のあるサイトは少なくないだろう。 そこで日本の主要なECサイト100サイトについて、Core Web Vitalsが改善の方向に向かっているのか調査してみた。…
  • —Core Web Vitalsの超実践的な改善術 - 総集編11.24このブログでは最近、Core Web VitalsやPageSpeed Insightsに関する記事を続けて書いた。 きっかけは 2024年11月23日のMTDDC Meetup TOKYO 2024にて登壇させていただくこと になり、これまでの集大成を語りたく「これで完璧！超実践的Core Web…
  • —Core Web Vitalsの実践的な改善術 - INP編11.21INP(Interaction to Next Paint) は、2023年4月に FID(First Input Delay) と置き換わる形でCore Web Vitalsに昇格した指標だ。 Interaction to Next Paint（INP） | Articles | web.dev…
  • —Core Web Vitalsの改善術 - サードパーティタグ編11.20Core Web Vitals改善術の一環としてサードパーティタグの扱いについて解説する。 サードパーティタグがCore Web Vitalsに影響するというのは奇異に聞こえるかもしれないが、実は大いに関係がある。 サードパーティタグはGoogle Tag ManagerやGoogle…
  • —Core Web Vitalsの実践的な改善術 - LCP編11.18Core Web Vitalsのひとつ、LCP(Largest Contentful Paint)の改善手法について解説する。 同じCore Web VitalsのCLS(Cumulative Layout Shift)は丁寧にコーディングを行えば改善できるが、それに比べてLCPの改善は難しい。…
  • —INPの収集および改善提案サービスを開始11.15Core Web Vitalsの中で INP(Interaction to Next Paint) は、 実際のユーザーがWebページを操作して初めて計測される指標 だ。 そのため指標が悪い原因を正確に特定するのが難しい。…
  • —Core Web Vitalsの実践的な改善術 - CLS編11.10Core Web Vitalsのひとつ、CLS(Cumulative Layout Shift)の改善方法について解説する。 Cumulative Layout Shift（CLS） | Articles | web.dev…
  • —PageSpeed Insightsの正しい読み方・活かし方11.09PageSpeed InsightsはWebページのスピードを評価する際に便利なツールではあるが、非常にミスリードを起こしやすい。 目立つのはパフォーマンススコアと指摘事項の数々だが、弊社がフロントエンドのスピード改善を提案する上でそれらを見ることはほとんどない。…
  • —自前アクセスランキング実現のつらみ11.03アクセスランキングはWebサイトの人気機能のひとつであるが、弊社ではGA4を活用したアクセスランキング表示のWebサービス Ranklet4 を提供している。 Ranklet4 [無料] GA4から人気ページランキングをかんたん表示 「どのサイトでもGoogle…
  • —Difyでの自前APIとの連携方法と注意点10.19Difyには外部サービスと連携するツール機能があり、 カスタムツール として自前のAPIを連携対象に追加できる。 この記事では 「ふたつの数字の掛け算を行うという非常にシンプルな独自API」 を例にして、Difyにおけるカスタムツールの利用手順や、注意点を紹介する。
  • —Dify会話変数でcanvasのような共同作業を実現10.18ChatGPT with canvas をご存知だろうか。AIとともに、ソースコードや文章を編集できる機能だ。 GitHub CoPilot もそうだと言えるし、これまでも近いことはできた。しかし 「共通の作業対象」 がインターフェースや出力として明確になった点が新しい。…
  • —自動生成するロゴマークを刷新 "alogorithm2"10.15アイデアマンズ株式会社のロゴマークはプログラムで自動生成している。 この度、ロゴマークの生成プログラムを刷新し、 alogorithm2 としてリリースした。
  • —Difyが対応しているベクトルデータベース10.07Difyでナレッジを取り込むと、その内容はベクトルデータベースに格納される。 Difyは多種多様なベクトルデータベースに対応しているようで、 環境設定ファイル を眺めているだけでも興味深い。 Difyが対応していると思われるベクトルデータベースを調べてみた。
  • —Dify - この素晴らしきLLMアプリ開発環境10.02LLMアプリの開発プラットフォーム Dify を使い始めた。もう楽しすぎる。 Dify.AI · 先進的なAIアプリケーションのためのイノベーションエンジン…
  • —要約「サイトスピードと幸福の心理学」09.25以前こちらの記事「サイトスピードと幸福の心理学」の要約をXに載せた。サイトスピードに関する心理学的エピソード集で大変面白かった。 SpeedCurve | The psychology of site speed and human happiness 「サイトの速度と人間の幸福の心理学」 The…
  • —OGP画像を自動生成するプログラムをOSSで公開09.23このブログでも、 はてなブログ や Qiita のようにタイトルなどからOGP画像(SNSシェア用のアイキャッチ画像)を自動生成するようにした。 そのためのバナー生成システムを独自に開発し、オープンソースとして公開した。 banner-generator…
  • —Appleサイトはサードパーティタグを使っていない09.16いろいろなサイトのフロントエンドを観察していて面白いことに気づいた。 Appleの公式サイトではいわゆるサードパーティタグが使われていない のだ。 広告の計測系はもちろん、Google Analyticsのようなアクセス解析すらない。 まるで古の個人サイトのような作りに驚いた。
  • —そろそろWeb画像はWebPだけでよいか09.15そろそろWeb画像はWebPのみの配信でよいのではないか？ このテーマについて賛成論と反対論をしてみたい。
  • —GitLabセルフホスティングの話09.11弊社ではクライアントとのソースコード共有や、Wikiによるドキュメントの共有のためにGitLabをセルフホスティングしている。 GitHubがあるのにセルフホスティングするのは時代に逆行していると思われるが、動機やメリットもある。…
  • —ページの読み込みを動画化するOSSツールを公開09.09Webページの読み込み過程を動画化し、比較できるツールをオープンソースで公開した。
  • —サイトスピードの最も重要な指標とは？07.11この記事では、 サイトスピードに関する指標のうち、どの指標が売上に最も影響するか？ という疑問に対する事例とアクセス解析の過程を解説する。 サイトスピードを改善したいが どの指標にフォーカスして良いか迷っている方 や、 サイトスピード改善の費用対効果に不安のある方 にぜひお読みいただきたい。