技術解説— technology

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

40本
71全件

技術解説

— 40 entries
  • —アニメーションを抑制した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.01最近、Macbook ProをM1 ProからM4 Proにアップグレードしたので、 LM Studio でローカルLLMを動かしてみたらさすがに早い。 そこに Qwen3 というまたすごそうなオープンソースのLLMが公開されたので、 第2のDeepSeekショック？…
  • —Googleスプレッドシートを簡易データベースにするNPMモジュールを公開04.25TypeScriptによるプログラムで、Zodで型を規定しつつ、Googleスプレッドシートを簡易的なデータベースとして利用できるモジュールを開発した。 ideamans/node-google-spreadsheet-tables 日本語README google-spreadsheet-tables - npm
  • —AIエージェント × MCP × スプレッドシートで寝ている間に仕事をしてくれる「小人のくつ屋さん」を実現する04.20グリム兄弟の「小人のくつ屋さん」を聞いたことがあるだろう。寝静まった真夜中に不思議な小人たちが靴を仕上げてくれる童話だ。 最近話題のAIエージェントとPlaywright MCP(ブラウザ操作MCP)は、自然言語による指示で動き、人間へ頼んだかのような感覚で、自律的にブラウザを操作してくれる。…
  • —メディアサイトのアクセスランキング採用率は？ 平均 74%04.16さまざまなサイトでアクセスランキングを目にするが、実際どのくらい採用されているのだろうか？ 記事コンテンツを中心としたいわゆるニュース系メディアサイト220サイトについて調査してみた。 その結果、 約 74% のサイトでアクセスランキングが表示されている ことがわかった。…
  • —AIで300件ほどのメディアサイトを挙げてみた04.10メディアサイトについて横断的な調査をしたいと思い、AIでリストを作ってみた。ディープリサーチによるリスト作成がどのくらいの分量まで行ってくれるのかも確かめたかった。 以前であれば数十件でも素人がバランスよく集めるのは大変だったが、今はコーヒーを飲む間にできてしまう。本当にすごい時代になった。…
  • —高速な通販サイトのための設計と実装03.17体感スピードの速い通販サイトを実現するにはどうすべきか、これまでの経験をもとに設計と実装のプラクティスを紹介する。 この記事は、新たに立ち上げるサイトや大幅なリニューアルを行うことを前提としている。既存サイトの手直しにはあまり実践的な内容ではないので、あらかじめ注意されたい。…
  • —WebP変換の適切なタイミングについて02.14Web 画像データを 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.15弊社が提供するアクセスランキング機能運用サービス Rankelt4 に、 AIレビュー機能 を追加した。 CDTV(カウントダウンTV)のようなランキング形式の音楽番組をイメージしてほしい。先週のトップ10を振り返り、今週のトップ10を楽しみながらMCがコメントする。…
  • —Core Web Vitalsの改善は本当に進んでいるか11.28Core Web Vitalsが検索順位に影響すると言われて数年が経った。SEOに関わらず、サイトスピードに関心のあるサイトは少なくないだろう。 そこで日本の主要なECサイト100サイトについて、Core Web Vitalsが改善の方向に向かっているのか調査してみた。…
  • —Core Web Vitalsの超実践的な改善術 - 総集編11.23このブログでは最近、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.17Core Web Vitalsのひとつ、LCP(Largest Contentful Paint)の改善手法について解説する。 同じCore Web VitalsのCLS(Cumulative Layout Shift)は丁寧にコーディングを行えば改善できるが、それに比べてLCPの改善は難しい。…
  • —INPの収集および改善提案サービスを開始11.14Core Web Vitalsの中で INP(Interaction to Next Paint) は、 実際のユーザーがWebページを操作して初めて計測される指標 だ。 そのため指標が悪い原因を正確に特定するのが難しい。…
  • —Core Web Vitalsの実践的な改善術 - CLS編11.09Core Web Vitalsのひとつ、CLS(Cumulative Layout Shift)の改善方法について解説する。 Cumulative Layout Shift（CLS） | Articles | web.dev…
  • —PageSpeed Insightsの正しい読み方・活かし方11.08PageSpeed InsightsはWebページのスピードを評価する際に便利なツールではあるが、非常にミスリードを起こしやすい。 目立つのはパフォーマンススコアと指摘事項の数々だが、弊社がフロントエンドのスピード改善を提案する上でそれらを見ることはほとんどない。…
  • —自前アクセスランキング実現のつらみ11.02アクセスランキングは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.08Webページの読み込み過程を動画化し、比較できるツールをオープンソースで公開した。
  • —サイトスピードの最も重要な指標とは？07.11この記事では、 サイトスピードに関する指標のうち、どの指標が売上に最も影響するか？ という疑問に対する事例とアクセス解析の過程を解説する。 サイトスピードを改善したいが どの指標にフォーカスして良いか迷っている方 や、 サイトスピード改善の費用対効果に不安のある方 にぜひお読みいただきたい。