開発— development

「開発」カテゴリの研究メモ一覧です。

43本
71全件

開発

— 43 entries
  • —GridgramをAIエージェントフレンドリーにする04.23前回の記事 でGridgramのコンセプトと基本的な使い方を紹介した。今回は、このCLIツールを「AIエージェントから使いやすい状態」へ整えるべく取り組んだことを記録する。…
  • —Mermaid風のテキストから図解を生成するGridgram04.23業務では、物事の関係図や概念図——いわゆるポンチ絵——を作る場面がよくある。PowerPointやKeynote上でマウス操作によりチクチク作ると、案外手間と時間がかかる。構造は数分で頭に浮かんでいても、それを絵にする作業だけで30分、1時間と溶けることは珍しくない。…
  • —D2 + Freepik APIでポンチ絵を自動生成するAIエージェントを作ってシビれた04.07ポンチ絵——つまり概念図やアーキテクチャ図のことだが、これを描くのはずっと面倒な作業だった。PowerPointやKeynoteで四角や矢印を並べ、位置を微調整し、画像として書き出す。たったひとつの図に30分、1時間とかかることもざらである。…
  • —Chart.jsのグラフをCLIで画像化するOSSツール「chartjs2img」を公開04.07AIエージェントによるレポート自動生成が当たり前になりつつある今、「見栄えの良いグラフをサクッと画像にしたい」という場面が増えている。そこで、Chart.jsの設定JSONを渡すだけでグラフ画像を生成できるCLIツール chartjs2img をOSSとして公開した。 GitHub:…
  • —LLMの原理を学ぶとAIとの付き合い方が上手くなる03.06Claude Codeを本格運用するようになってから、AIのコーディング中に手持ち無沙汰となる時間が増えた。その隙間で手にしたのが「 作りながら学ぶ! LLM自作入門 」だった。この経験が、AIを活用したコーディングやエージェント構築において、想像以上に役立つこととなった。
  • —アニメーションを抑制したWebスクリーンショットを撮るCLIツール static-webshot02.04Webページのビジュアルリグレッションテストを行う際、最大の敵はアニメーションだ。カルーセルスライダー、CSSアニメーション、フェードイン効果...これらの動的要素があると、撮影のたびにスクリーンショットが異なり、まともなピクセル比較ができない。…
  • —Webページのほぼ完全なコピー環境を作る http-playback-proxy01.26Webページの表示スピード改善は、やはり実際に変更して計測してみないと効果は見えにくいものだ。そのため、できれば本番環境には手を加えず、どこを変えたらどうなるかを何度も繰り返しシミュレーションしたい。そのための技術として「http-playback-proxy」をオープンソースで公開している。…
  • —さくらのCDN料金体系の裏をかいた激安AWS Firehoseとして使う「ずるい使い方」12.28CDNといえば、大量のアクセスを高速・安定的にさばくためのインフラである。しかし、さくらインターネットのCDNサービス「 ウェブアクセラレータ 」には、料金体系の特性を活かした「ずるい使い方」がある。 それは、AWSでいう Amazon Data Firehose のような…
  • —ページ読み込みプロセスを動画化するCLIツール「Loadshow」をGo言語でリニューアル12.27PageSpeed InsightsやLighthouseでWebサイトの表示スピードを計測すると、スコアやLCP、Speed Indexなどの専門的な指標が数値で示される。しかし正直なところ、数値だけを見て「このサイトは速い」「遅い」と直感的に判断できる人がどれだけいるだろうか。…
  • —WebPやAVIFに対応していない旧ブラウザのふりをするChrome拡張機能07.02WebPやAVIFといった次世代画像フォーマットと、従来フォーマット(JPEG・PNG・GIF)に両対応し、ブラウザの対応状況によって出し分けるサイトが増えている。 弊社でもそのようなアシストを行うサービスを提供しているが、 LightFile Proxy - AWS…
  • —AI時代のソフトウェアアーキテクチャと開発06.09Web開発は特に、ほとんどOSSの組み合わせと言ってよい。自分では何を書くかというと、ユニークなコアロジックや、アプリケーション固有のビジネスロジック、そしてそれらとOSS同士をつなぐ「接着コード」と言ってよいのだが、ビジネスロジックと接着コードは癒着しやすく肥大化しやすい。そうすると技術負債になる可能性が高い。…
  • —JPEGのEXIFサムネイルを削除するGo言語パッケージを公開06.03地味なツールだが、JPEGファイルのサムネイル(EXIF)を削除するGo言語のパッケージを公開した。 ideamans/go-exif-remove-thumbnail: A Go tool and library to remove JPEG EXIF thumbnails, preserving other…
  • —Go言語のローカライゼーションパッケージ go-l10nを公開05.31Go言語用のローカライゼーション(自然言語メッセージ翻訳)のためのパッケージをOSSとして公開した。 ideamans/go-l10n: A Go internationalization (i18n) library inspired by Movable Type's localization system.…
  • —AIコーディングと新時代の開発スタイル05.27Claude と Claude Code を使ったAIコーディング(Vibe Coding)に夢中だ。止められない時代の変化を感じた。 先ほど次のGo言語パッケージを公開したのだが、READMEにいたるまで100% AIによるコーディングである。 ideamans/go-living-lock:…
  • —Vibe Codingでライブラリ選定のための簡易ベンチマークを頼む05.27Vibe Coding (ヴァイブコーディング)が賑わっている。生成AIを積極的に利用し、自然言語によるVibe(雰囲気)でコーディングを進行する潮流だ。 まさにこのネットミームが相応しい。 雰囲気で株をやっているジェネレーター…
  • —広報ブログをリニューアル・VitePressカスタマイズのコツ05.06この技術ブログと別に、以前から運用している広報ブログがある。 ideaman's Blog 長らくこれをリニューアルしたいと考えていたが、このゴールデンウィークにやっと実現した。 最近は Cursor であらゆる作業を行うため、Movable TypeからVitePress + GitHub…
  • —AIとGitHub Actionsで定期的に記事の宣伝をXに投稿する05.02研究ノートと銘打ったこのブログもだいぶ記事が溜まってきた。以前に投稿した記事もXなどで露出を図るとよいのだが、文面を考えるのが面倒でつい放置してしまっていた。 そこでAIに文面を考えてもらい、GitHub Actionsのスケジュールワークフローで定期的な宣伝を繰り返す仕組みを構築した。…
  • —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
  • —高速な通販サイトのための設計と実装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…
  • —Ranklet4 アクセスランキングの AIレビュー登場！12.15弊社が提供するアクセスランキング機能運用サービス Rankelt4 に、 AIレビュー機能 を追加した。 CDTV(カウントダウンTV)のようなランキング形式の音楽番組をイメージしてほしい。先週のトップ10を振り返り、今週のトップ10を楽しみながらMCがコメントする。…
  • —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 としてリリースした。
  • —OGP画像を自動生成するプログラムをOSSで公開09.23このブログでも、 はてなブログ や Qiita のようにタイトルなどからOGP画像(SNSシェア用のアイキャッチ画像)を自動生成するようにした。 そのためのバナー生成システムを独自に開発し、オープンソースとして公開した。 banner-generator…
  • —WebアプリのためのSSLをサクッと立てる09.20VPSなどの素のサーバでWebアプリを公開するとき、SSLをどうするかという問題がある。 弊社では、 Amazon Route 53 でDNS運用、 lego (Go言語製のLet's Encryptクライアント)で取得した証明書を用い、 nginxのDockerコンテナ…
  • —Appleサイトはサードパーティタグを使っていない09.16いろいろなサイトのフロントエンドを観察していて面白いことに気づいた。 Appleの公式サイトではいわゆるサードパーティタグが使われていない のだ。 広告の計測系はもちろん、Google Analyticsのようなアクセス解析すらない。 まるで古の個人サイトのような作りに驚いた。
  • —GitLabセルフホスティングの話09.11弊社ではクライアントとのソースコード共有や、Wikiによるドキュメントの共有のためにGitLabをセルフホスティングしている。 GitHubがあるのにセルフホスティングするのは時代に逆行していると思われるが、動機やメリットもある。…
  • —GitLabのよくある操作を半自動化するCLIツール09.09弊社ではクライアントとのソースコードやWikiによるドキュメント共有に、自前のGitLabを使うことがある。 よくある操作を毎回GUIから行うのが手間なので、Go言語によるCLIツールを作り、せっかくなのでオープンソースにした。
  • —ページの読み込みを動画化するOSSツールを公開09.08Webページの読み込み過程を動画化し、比較できるツールをオープンソースで公開した。
  • —サイトスピードの最も重要な指標とは？07.11この記事では、 サイトスピードに関する指標のうち、どの指標が売上に最も影響するか？ という疑問に対する事例とアクセス解析の過程を解説する。 サイトスピードを改善したいが どの指標にフォーカスして良いか迷っている方 や、 サイトスピード改善の費用対効果に不安のある方 にぜひお読みいただきたい。