たより

All

gihyo.jp

複雑な脆弱性を推論、実用性の高い修正を提案する「Codex Security」リサーチプレビュー版として公開

OpenAIは2026年3月6日、AIセキュリティエージェント「Codex Security」をリサーチプレビュー版として公開した。

Zennの「Rust」のフィード

「Claude Code に向いているプログラミング言語」記事を見て、LLM が書きやすい言語 Almide を土日で作ってみた

O6lvl4

はじめに 先日、@mametter 氏による「Claude Codeで15言語ベンチマーク」という記事を読んで、思わず二度見してしまいました。 Claude Code に複数のプログラミング言語でコードを書かせ、実行時間とコストを比較した記事です。結果はかなり興味深くて、Ruby が 73.1 秒 / $0.36、Python が 74.6 秒 / $0.38 と上位を占める一方、Rust は 113.7 秒 / $0.54、Haskell は 174 秒という結果になっていました。 ここで比較されているのは、プログラムそのものの実行速度ではありません。LLM がコードを書き、修正し...

gihyo.jp

Blenderでオブジェクトの整理や不用意に触らないようにしてみよう

第72回目は、Blenderで作成したオブジェクトを整理する方法や、特定のオブジェクトを触らないようにする方法を見ていきます。

Zennのトレンド

メガネだけでClaude Codeとやり取りできるようにした話

生ビール

! 本記事は、手元の実際のログや会話をもとに、メガネでClaude Codeとやりとりして書いていま...せん。 Codexに手伝ってもらいながら書いています。 はじめに 子どもがいると、PCの前にずっと張り付いているわけにもいかないんですよね。 ちょっと歩きたいとか、子どもの相手をするとか、そういうだけでClaude Codeのセッションが止まるのが地味につらかったです。運動不足にもなるし。 で、コーディングエージェントを使っていて気づいたんですが、キーボードをガリガリ叩いている時間より、承認ボタンを押すとか通知をチラ見するとか、そういう細かい割り込みの方が意外と多い。 別にスマ...

Zennの「Rust」のフィード

ドローン映像のブレをFFTで定量化し、Gyroflowパラメータを自動推定する

yostos

TL;DR DJIドローンの映像ファイルに埋め込まれた機体の動きデータを元に、映像のブレを後処理で除去するGyroflow[1]の調整パラメータ5種を信号処理のみで自動推定するアルゴリズムをRustで作ってみた。手動調整の出発点として使う想定。 https://github.com/yostos/gyrotriage はじめに 私はドローンを2機運用しています。空撮用のDJI Air 3Sは3軸メカニカルジンバル（チルト・ロール・パン）を搭載しており、物理的にカメラを安定させるため映像のブレはほとんど問題になりません。一方、小型のDJI Neoは1軸ジンバル（チルトのみ）しか搭...

Zennの「Rust」のフィード

AI雑談エージェントを作る

㐂乃

ちまちまと作って自分で使っていたが、なんかAIVTuberも発展しているようだし、『超かぐや姫！』も公開されたし、一旦どういう感じか書いておこうと思う。 https://github.com/kinoh/Tsuki プロンプトとハーネス 「雑談」エージェントでは口調の制御が見かけの人格を大きく左右する。特定のキャラを明示して「〇〇っぽく振る舞う」といった書き方は手軽だが、人格は平坦な記号に束縛され、不変で成長の余地がなくなる。フォースターの言うフラットキャラクターだ。（これはAI的な模倣、つまり確率分布に基づく「推論」だけしていると新奇な表現は生まれなくなるだろうという表現文化全てへ...

Zennの「Rust」のフィード

crmux + torudo: Claude Codeセッションをタスク管理ツールから操る設計

maedana

! この記事はClaude Codeとの共同執筆です。構成・コード例の整理はAIが担当し、筆者が内容の確認・加筆を行っています。 はじめに Claude Codeを複数セッション並行で使っていると、「このタスクをあのセッションに投げたい」という場面が増えてくる。手動でペインを切り替えてプロンプトを貼り付けるのは面倒だし、ミスも起きる。 この記事では、自作のtmuxセッション管理ツール crmux と、タスク管理TUI torudo を組み合わせて、タスクの選択からClaude Codeへのプロンプト送信までを一気通貫で行う仕組みについて書く。 crmux の紹介記事はこちら。 ht...

Zennのトレンド

Raspberry Piで運用する自宅サーバー入門（第1巻：基礎編）

Murasan Lab

Raspberry Piを手に入れて、LEDを光らせて、センサーの値を読んで…… その先に「自宅サーバー」という 選択肢があることをご存じですか？ 本書は、Raspberry Piを「電子工作のおもちゃ」から「24時間稼働する実用的なサーバー」へとステップアップさせるための入門書です。月々の電気代はわずか100〜200円。小さなコンピュータが自宅の片隅で静かにサービスを提供し続ける——そんな環境を、一緒に構築していきましょう。 コマンドを丸暗記するのではなく、「なぜその設定が必要なのか」「その仕組みはどうなっているのか 」を一つずつ丁寧に解説しています。サーバー運用に必要なLinuxの基礎知識からSSHによるリモート操作、サービスの自動起動、ログの確認まで、この1冊で土台を築くことができます。 本書は「Raspberry Piではじめる自宅サーバー入門」シリーズの第1巻（基礎編）です。サーバー運用の世界への第一歩を、ここから始めてみませんか。

Zennの「Rust」のフィード

Rustで作ったバイナリ静的解析ツール「BinSleuth」の紹介

Long

! この記事は Claude Code（claude.ai/code）を使用して作成しました。 はじめに セキュリティエンジニアや開発者として、こんな場面に遭遇したことはありませんか？ ビルドした実行ファイルにセキュリティ強化オプションが有効になっているか確認したい 手に入れたバイナリが本当に安全かどうか、パッキングや暗号化の痕跡がないか調べたい CI/CDパイプラインに「ハードニングチェック」を組み込みたいが、重いツールは入れたくない そんな課題を解決するために、Rustで BinSleuth を作りました。 https://github.com/long-910/BinSl...

Zennのトレンド

AIコーディングの原則

Takekazu Omi

AIコーディングツールを使い始めて、しばらく経った。進歩は目覚ましく、便利だし役に立つ。一方で、OSS界隈ではAI Slop (AIが生成する低品質なコードやテキスト) が問題になっている。個人なら自分で気づいて直せるが、チームでは人数分だけ増幅される。誰かが流したSlopのレビューとリワークにチーム全体が巻き込まれ、AIコーディングのメリットを上回る生産性の低下を招く。この記事では、チームでその罠に落ちないための原則を定義する。 コードのオーナーは人間であり、責任を取るのも人間 LLMがコードを生成しても、そのコミットに名前が刻まれるのは人間で、深夜に障害対応で呼び出されるのも人間...

Zennのトレンド

予測市場の構造──集合知・市場設計・規制で理解する未来予測

Kobara Toi

PolymarketとKalshiは何が違うのか、そもそも予測市場とは何なのか、どのような経緯でこれらが生まれたのか。予測市場の仕組み・歴史・規制・課題を整理して、今後どうなっていくのかを考える本です。

Zennのトレンド

自分の結婚式でフォトコンテストLINEアプリを開発してセルフ余興をした話 & 結果報告

さき(H.Saki)

この記事について 2月に結婚式をやりました。 披露宴の余興のために自分でLINEアプリを開発しフォトコンテストを開催したので、この記事ではそのアプリのシステム構成や技術的なこだわりポイント、および運用結果報告を書いていきたいと思います。 披露宴で流したエンディングLTより画像抜粋 余談 やりたいようにやりました 使用する環境・バージョン go version go1.24.0 darwin/amd64 2026年2月時点でのGoogle Cloud / momento / LINE Messaging APIの機能を用いています 読者に要求する前提知識 MUSTの...

Zennの「Rust」のフィード

Solana開発学習4日目 : クラウドファンディングプログラム1

DeIn

Anchorで学ぶクラウドファンディングプログラム開発 日付: 2026年3月8日 学習内容: Anchorによるクラウドファンディングプログラムの実装、PDA（Program Derived Address）によるアカウント生成、SOLの送金（CPI）と直接lamports操作の違い、system_programの要否の理解 1. 学習の全体像 本日の学習では、前回の電卓プログラムから一歩進み、実用的なクラウドファンディングプログラムをAnchorで実装した。 特に、次の3点を重点的に理解した。 キャンペーン（Campaign）の作成・寄付・引き出しという3つの命令の実装 P...

Zennのトレンド

GCPインフラ設計のベストプラクティスを目指して

So

はじめに GCPにアプリをデプロイして以下の構成でインフラを設計・構築しました。 AWS版はこちら。 デプロイ対象のアプリ インフラ設計・構築がメインなので詳細は割愛します。 db-migrator データベースマイグレーションを管理・実行するためのアプリ slack-metrics Slackのデータを取得してデータベースに永続化するためのアプリ ポイント IAM アカウントにIAMロールを付与してプロジェクトへのアクセスを制御 stg, prdと環境ごとにプロジェクトを分けることでセキュアにする ローカルからTerraform実行などの際は、JSONキー...

Zennのトレンド

Claude Code / Codexの弱点を解決するOSS「GSD」の設計が良かった

Natsuki Yamaguchi

こんにちは！ブロックチェーンエンジニアの山口夏生です。 ブロックチェーン×AI Agentで自律経済圏を創る開発組織Komlock labでCTOをしています。 GSD（GET SHIT DONE）とは何か 「How We Built The World's Most Powerful Coding Agent」というXの投稿が114K Viewsを記録して話題になっている。 https://x.com/gsd_foundation/status/2030361888681239003?s=20 AIコーディングエージェントの信頼性が落ちる原因は、モデルのコード生成能力ではない。状...

Zennのトレンド

Mac Studio に MacBook から SSH 接続したい

rmc

TL;DR Mac Studio を自宅に置いたまま、MacBook から SSH 接続すれば、Mac Studioの性能とmacbookの携帯性を両立できます。 家の中では Mac Studio のローカル IP に接続します。 外出先では Tailscale 経由で接続します。 公開鍵認証と ~/.ssh/config も最初に整えておくと、ターミナルでも Cursor でも扱いやすくなります！ はじめに 経緯は元々M1 Macbook Air 16GBを使っていてローカルLLMで遊ぶためにMac Studio M3 Ultra 256GBを買いましたが、ベッドで横になり...

Zennのトレンド

まだAIコードをレビューするか、しないかで言い争ってるの？

Atsushi Nakamura

AIが生成したコードをレビューするべきかどうか、という議論は定期的に起こります。 3カ月以上その問題に悩んでいる人は、たぶんとっくに何らかの結論に達していると思います。 2026.03.08 改修メモ レビュー0に拘り過ぎているように読めたので、表現を全体的に柔らかくしました。 つまりナーフして少し火力を下げました。 私の結論 品質を維持したままコードレビューを減らせるよう、開発プロセス全体を改善する必要がある これは、すでにレビューしなくて済むようになったとか、レビューを0にしなくてはならないという話ではありません。品質を保ったまま、大幅にコードレビューを削減し続けなければ...

Zennの「Rust」のフィード

RustでFirestoreサブコレクション操作時にハマった3つの罠【パス構築・WebSocket認証・部分更新】

宇川 雄大

はじめに Rust（axum）で構築したリアルタイム音声対話バックエンドで、Firestore のサブコレクション操作と WebSocket 認証に関する3つのバグに連続して遭遇しました。いずれもコンパイルは通るがランタイムで失敗するタイプで、原因特定に時間がかかったものです。 ! 対象読者 Rust で Firestore（firestore-rs crate）を使っている方 axum で WebSocket エンドポイントを実装している方 サブコレクション（users/{uid}/notes 等）を操作するバックエンドを書いている方 システム構成 ┌──────────...

Zennの「Rust」のフィード

なぜ、「2020年代はオブジェクト指向が衰退した」という嘘の印象を持つエンジニアが多いのか？

pdfractal

はじめに 「2020年代はオブジェクト指向が衰退した」という言い方は、事実の一部だけを見て全体に拡張した見方です。実際に弱くなったのは、深い継承ツリーやUMLの完全記述、XMLやSOAPと結びついた重い企業開発の作法であって、オブジェクト指向の中核そのものではありません。 むしろ2020年代の主流言語や設計実践は、オブジェクト指向を否定する方向ではなく蒸留する方向に進みました。Goはinterfaceを暗黙実装にし、TypeScriptは構造的部分型を採用し、Swiftはプロトコル合成を前面に出し、Rustはtraitとトレイトオブジェクトで共有振る舞いと多相性を扱います。共通してい...

Zennのトレンド

並列開発を支えるtmux, git, zsh設定集

えぬひろ(ikorihn)

私は普段 Alacritty + tmux + Neovim で開発しています。 ターミナルから離れずに複数リポジトリやworktreeを行き来したりgit操作を楽にするため、キーバインドやutilityをいろいろ作り込んでいます。 今回の記事では私がターミナルの操作を快適にするために設定している内容を紹介します。 tmux-fzfを使ってwindowを切り替える tmux-fzf はfzfのポップアップウィンドウ上でtmuxのsessionやwindowの切り替えができるプラグインです。 さらに、window名を自動的にカレントディレクトリのGitリポジトリ名にするプラグインを自...

Zennのトレンド

Markdown ドキュメント間の整合性を検証する contextlint を作っている話

Nozomi Koborinai

はじめに AI を活用したソフトウェア開発では、要件・仕様・設計といった構造化ドキュメントを SSOT（Single Source of Truth: 信頼できる唯一の情報源）として管理し、それを基に AI がコードを生成する、いわゆる 仕様駆動開発（SDD） のようなアプローチが定着しつつあります。 こうしたアプローチでは、ドキュメントの品質が生成されるコードの品質に大きく影響します。 つまり、ドキュメントが壊れていれば、そこから生まれるコードにも影響が及ぶということです。 私は実際に SDD ベースのドキュメント管理を実践しており、その過程で「Markdown ドキュメント間の整...

Zennのトレンド

Claude Code が RAG を捨てた理由 -「Agentic Search」という選択肢

Hongbo.Ding

先日、YouTube で公開された技術チャンネル The Pragmatic Engineer のインタビュー動画（2026年3月公開）を見ていて、興味深い話を耳にしました。ゲストは Claude Code の中心的な開発者である Boris Cherny 氏。動画全体では Claude Code の開発経緯や、AI がエンジニアの働き方をどう変えるかといったテーマが語られていますが、その中で特に印象に残ったのが「コードベースの検索をどう実現しているか」という話題でした。 https://www.youtube.com/watch?v=julbw1JuAz0 Boris 氏はこう言い切っ...

Zennのトレンド

M5Stack CoreS3 x gpt-realtime-1.5 - （ｽﾀｯｸﾁｬﾝはじめる） -

しろくま（Hiroki, Nomura）

はじめに 2/28 に、AgentCon - Tokyo のイベントがありました。 https://globalai.community/chapters/tokyo/events/agentcon-tokyo/ 私はこのイベントで登壇させていただいたのですが、そのときに Maki-san が「Azure AI Agent のフロントエンドとしてのロボット： ｽﾀｯｸﾁｬﾝで実践するAIロボット開発」というタイトルで登壇されていました。 私自身、なんらかIoTデバイス関連とLLMの組み合わせはもともと興味があったので、これだー！！！と感化され、その日のうちに M5Stack Cor...

Zennの「Rust」のフィード

Tauri v2 + React で作った自作ノートアプリに MCP サーバーを組み込んでみた

Shu Hirouchi

はじめに — AI にノートを触らせたい 前回の記事で、Tauri + React でローカルファーストなノートアプリ「Graphite」を作った話を書いた。 記事を公開した直後から、ひとつの願望が消えなくなった。 「Claude にノートの整理を頼めたら最高なのに」 Graphite のノートはただの Markdown ファイルだ。YAML Frontmatter にメタデータを持たせて、フォルダとタグで整理している。構造はシンプル。であれば、AI がこのファイル群を直接読み書きできるインターフェースを作れば、「昨日の会議メモをまとめて」とか「未整理のノートにタグをつけて」が自然言...

Zennの「Rust」のフィード

Rustの外部実装を禁止するsealedトレイトパターン

ultimatile

はじめに Rustで公開ライブラリを書く際、定義したトレイトを外部クレートが自由に実装できてしまうと、将来の変更が難しくなります。 sealedトレイトパターンは、トレイトの実装を自クレート内に限定するための手法です。 問題: 外部クレートによるトレイト実装 以下のように公開トレイトを定義すると、外部クレートが自由に実装を追加できます。 pub trait Scalar { type Real; fn abs_sq(self) -> Self::Real; } ライブラリ側が想定しない型にScalarが実装されると、将来メソッドを追加した際に下流クレートが壊...

Zennの「Rust」のフィード

Rustのinherent impl衝突（E0592）の原因と回避法

ultimatile

はじめに Rustでジェネリクスを使ったライブラリを書いていると、「同じ型に対して複数のimplが衝突する」というコンパイルエラー（E0592）に遭遇することがあります。 これはinherent impl（型に直接定義するメソッド）の重複チェックによるものです。 実際に遭遇した問題 背景 テンソル計算ライブラリを開発中、多次元配列を表現するTensor<T>に対して浮動小数点数型（f32、f64）とそれらの複素数型の両方をサポートしようとしました。 Rustの標準ライブラリには複素数型がないため、num_complexクレートのComplex<T>を使...

Zennの「Rust」のフィード

Rust音声AIサーバーにセッション要約・エピソード記憶抽出・レート制限を実装する

宇川 雄大

はじめに 前回の記事では、Gemini Live API を使った音声会話サーバーに Opus コーデックと GoAway 自動再接続を実装しました。今回は セッション終了後の自動処理 と 利用制限 を追加します。 ! 対象読者 リアルタイム音声 AI アプリのバックエンドを開発している方 LLM を使った会話データのポストプロセッシングに興味がある方 WebSocket セッションにレート制限を適用したい方 この記事で扱う実装は以下の 3 つです。 セッション要約生成 — 会話終了後に Gemini Text API で 3〜5 文の要約を自動生成 エピソード記憶抽出 ...

Zennの「Rust」のフィード

LLM Key Ring v0.3.0: 「security コマンドで読まれる」問題を3層防御で塞いだ話

yotta

! この記事はLLM Key Ring（macOS Keychain経由でLLM APIキーを管理するCLIツール）のv0.3.0リリースノートです。前回の記事はこちら: https://zenn.dev/yottayoshida/articles/llm-key-ring-v020-security-hardening TL;DR v0.2.1で「未解決」として残していた課題、security find-generic-password でキーが直読みされる問題をv0.3.0で解決した。 Custom Keychain (lkr.keychain-db) — 専用のKeych...

Zennのトレンド

では素晴らしい提案をしよう。お前もSlideVTuberにならないか？

KoeLoopDev

TL;DR こんにちは！個人開発界隈箱推し活動をしているコエルです。いつもいいねやフォローありがとうございます。大変励みになっております。 ライトニングトークで顔出しせずにアバターで発表したい！という人(つまりわたし)のために、最小2枚の画像だけでSlideVTuberデビューできる、ツールキットをnpmに公開しました！前半が使い方の解説、後半が技術的な解説になっています。Slidev addonで組み込むための工夫や、音声解析の工夫など、技術的な内容を後半にまとめていますので、興味のある方はぜひ最後まで読んでみてくださいね。 こんな感じでマイク連動で口パクするアバターをSlidev...

Zennのトレンド

AI生成PRが自分のOSSプロジェクトに送られてくることについて思うこと、コントリビューターにできる助け方

daishi

英語で書いた記事の日本語版です。 https://newsletter.daishikato.com/p/my-thoughts-on-ai-generated-prs-for-my-oss-projects こんにちは。 AI支援コーディングは素晴らしいものです。これは間違いないです。ただ、OSSへのコントリビュートという文脈になると、話は少し複雑になります。 問題点 自分のOSSプロジェクトにPRが届くと、私はそれを見て判断する必要があります。その時点では、そのPRにどれくらいAI支援が使われたのかはわかりません。 極端な例で考えてみます。もしPRが100% AI生成だったとす...

Zennの「Rust」のフィード

Rust中継サーバーにOpusコーデックとGoAway自動再接続を実装した設計メモ

宇川 雄大

はじめに Gemini Live API を使ったリアルタイム音声アプリを開発しています。構成は モバイルアプリ ↔ Rust 中継サーバー ↔ Gemini Live API の 3 層で、中継サーバーが認証・RAG・セッション管理を担当しています。 ! 対象読者 Gemini Live API（Multimodal Live API）を使った音声アプリに興味がある方 WebSocket 中継サーバーの設計パターンを知りたい方 Rust で Opus コーデックを扱いたい方 この記事では、以下の 2 つの機能を実装した際の設計判断とハマりポイントをまとめます。 Opus ...

azukiazusa のテックブログ2

Skill Create スキルを使用したスキルの作成と改善

オープンスタンダードである Agent Skills に従い Claude Code にドメインの専門知識や組織のナレッジを提供するスキルが最近注目を集めていますが、スキルの作成にはいくつかのハードルがあります。Anthropic は skill-creator と呼ばれるスキルの作成と改善のプロセス、パフォーマンス測定を支援するツールを提供しています。この記事では skill-creator を使用してスキルを作成・改善を行うプロセスを実際に体験してみます

Zennの「Rust」のフィード

Gemini Native Audio + Function Calling で WebSocket 1008 切断される問題と解決策

宇川 雄大

はじめに Gemini Live API（BidiGenerateContent）で音声対話アプリを開発中、Function Calling（tools）を有効にすると最初の応答後に WebSocket が切断される問題に遭遇しました。 ! 対象読者 Gemini Live API でリアルタイム音声対話を実装している方 Native Audio モデルで Function Calling を使おうとしている方 WebSocket 1008 エラーに悩んでいる方 システム構成 ┌─────────────┐ WebSocket ┌─────────────...

Zennの「Rust」のフィード

マンガでわかるRustの所有権

黒ヰ樹

ソース https://doc.rust-lang.org/book/ch04-00-understanding-ownership.html Rust is primarily distributed under the terms of both the MIT license and the Apache License (Version 2.0), with portions covered by various BSD-like licenses. See LICENSE-APACHE, LICENSE-MIT, and&n...

Zennの「Rust」のフィード

Rust の DI を試す / shaku

-

はじめに Rust で DI をどうやるか調べていて shaku を試しました。 shaku はコンパイル時に依存関係を解決する DI コンテナです。derive マクロでコンポーネントを定義し、module! マクロでモジュールを組み立てます。axum との統合クレート shaku_axum もあり、ハンドラに依存性を直接注入できます。 検証用に EC の商品注文 API を作りました。PostgreSQL / Redis / NATS を使い、キャッシュ、イベント発行、監査ログまで一通り入れています。 構成 src/ main.rs config.rs erro...

Zennの「Rust」のフィード

Molluskを使ってみた！！（Solana＋Pinocchio)

udon_dev

Molluskを使ってみたので、感想や使い方などを残しておきます。 Molluskやってみたいな、という人がいたら嬉しいです。 自己紹介 まずは自己紹介から。 Solana歴３ヶ月です。学習開始から１ヶ月でAnchorを投げ出し、Pinocchioに入門。 ついでにMolluskをテストツールに採用。頭がいっぱいいっぱいなので、現状Rustしかできてない人です。 １　なぜMolluskを使ったのか テストを作らなきゃなあ…。でも今Rustのことしか考えられない…。クライアントも作りたくない、面倒…という状態になり、「Mollusk？　これならRustオンリーで楽しそうじゃん」とい...

Zennのトレンド

Claude Max (20倍プラン) を1ヶ月以上契約して感じたこと

そゆっけ

はじめに 普段プログラマーとして働いています。職場でもAIを開発にガンガン使っていますが、趣味でclaude max 20倍を契約して色々開発しています。 感じたことを箇条書きレベルでまとめます。 公開しているものはあまりないですがいくつか紹介します。 ゲーム: Capsulitas Capsulitasというゲームを開発しています。体験版をSteamに公開するまでは至りました。ドット絵は自分で書いていますが、codingは全てAIを活用しています。 https://store.steampowered.com/app/4222380/Capsulitas/ https://it...

Zennのトレンド

Claude Code の 便利コマンド5選

kazushi takakusagi

はじめに Claude Code に /insights というコマンドがあるのを知っていますか？ 自分のClaude Code 利用状況を分析してHTMLレポートにまとめてくれる機能です。CLIリファレンスを眺めていて偶然見つけました。 https://code.claude.com/docs/ja/interactive-mode この記事では、特に便利、面白いと感じた機能5つを紹介します。 コマンド できること /context コンテキスト使用状況を視覚化 /insights 利用レポートをHTMLで生成 /fork 会話をフォークして並行作業 /e...

Zennのトレンド

Symphony - OpenAIが発表したチケット駆動AI開発ツールについて

Natsuki Yamaguchi

こんにちは！ブロックチェーンエンジニアの山口夏生です。 ブロックチェーン×AI Agentで自律経済圏を創る開発組織Komlock labでCTOをしています。 コーディングエージェントを複数並列で自律的に回すマルチエージェント開発が、ここ数ヶ月でエンジニアの間に急速に広まっていますが、まだそれぞれ試行錯誤しているフェーズで、最適解はない認識です。 OpenAIが最近発表したSymphonyに注目しています。 https://github.com/openai/symphony 自分もClaudeCodeとOpenClawのオーケストレーションを日常的に考えていて、複数エージェントのタス...

Zennの「Rust」のフィード

crmux v0.9 で追加した機能まとめ

maedana

! この記事はClaude Codeとの共同執筆です。構成・コード例の整理はAIが担当し、筆者が内容の確認・加筆を行っています。 crmux の紹介記事はこちら。 https://zenn.dev/maedana/articles/55520b68536c47 前回の更新履歴はこちら。 https://zenn.dev/maedana/articles/crmux-update-v07-v08 0.9.0 での追加機能（2026/03/06） タブによるセッションフィルタリング プロジェクト名ごとにセッションをフィルタリングできるタブ機能を追加した。h/l キーでタブを切り替え...

Zennのトレンド

ポップコーンUIとReact

akfm_sato

ページアクセス時に複数のローディングスピナーがランダムに表示され、徐々にコンテンツに置き換わっていくような体験に遭遇したこと、もしくは実装した経験はあるでしょうか？ReactチームはこのようなUIを、ポップコーンが弾ける様子に例えてポップコーンUIと揶揄しています。 このようなUIはユーザー体験として好ましくありませんが、よくみられるUIでもあります。Reactにおいて、コンポーネント内でデータフェッチを扱う方法は様々ありますが、複数のコンポーネントでローディング状態をハンドリングしてしまうとポップコーンUIになりがちです。 開発者が意図してより良い体験を実装すべきとも考えられますが、単...

Zennのトレンド

OSSにおけるAI Slop問題の何が問題なのか？

yusukebe

Honoは2021年の12月に開発が始まって4年と少し経つ。たぶん、あなたが想像する以上に大きくなっている。GitHubのスターは現時点で29.2K。これは日本人発OSSで観測する限り第3位の数字だ。最近ではMCP公式SDKの依存に入り、ダウンロード数はうなぎのぼり。月間1億ダウンロードが近い。Cloudflareは多くのプロダクトでHonoを使っている。 これだけ大きな規模のOSSに、クリエーター、もしくはメンテナとして関わることは非常に貴重な経験である。そこにはみなさんが見ていない景色が広がっている。 Honoの開発において「憂鬱な」こともたくさんある。ただ、それを上回る楽しいことが...

gihyo.jp

GPT‑5.4リリース ―最高性能の推論、コーディング、エージェントワークフロー機能を1つのモデルに統合

OpenAIは2026年3月5日、同社のフロンティアモデルの最新バージョンGPT-5.4をリリースした。

gihyo.jp

Ubuntu 26.04（resolute）の開発; Snapshot4のリリースとsudoのエコーバック、カリフォルニア州 AB1043への対応の検討

resoluteのSnapshot 4がリリースされました。SnapshotはQuesting（25.10）から開始された試みで、「⁠⁠リリース直前までの各月末に、リリース版と同じプロセスで生成されるISOイメージを作ってみる」というものです。

Zennの「Rust」のフィード

crmux v0.7〜v0.8 で追加した機能まとめ

maedana

! この記事はClaude Codeとの共同執筆です。構成・コード例の整理はAIが担当し、筆者が内容の確認・加筆を行っています。 crmux の紹介記事はこちら。 https://zenn.dev/maedana/articles/55520b68536c47 前回の更新履歴はこちら。 https://zenn.dev/maedana/articles/crmux-update-v04-v06 0.7.0 での追加機能（2026/03/05） claudeye ソケット連携 claudeye との連携を RPC リクエスト・レスポンス方式で実装した。o キーでオーバーレイ表示を...

gihyo.jp

Google Workspace CLI公開、Gmail、Googleドライブ、カレンダー、Chatなどをコマンドラインから操作可能に ―エージェントスキルやMCPサーバーも装備

2026年3月4日、Google Workspaceのサービスをコマンドラインから操作できる「Google Workspace CLI」が、Apache 2.0ライセンスの元、GitHubとnpmレジストリで公開された。

gihyo.jp

HTMLを拡張し、JSなしで動的UIを作る「htmx」

本記事では、htmxの基本的なしくみや使用方法を紹介したのち、架空のタスク管理アプリケーションを題材に、htmxで実現できるさまざまなインタラクションを紹介します。

gihyo.jp

Android 17 Beta 2リリース、MWC 2026で「ロボットスマホ」、「プライバシー・ディスプレイ」を披露

Googleは、MWC 2026に合わせるかのように「Android 17 Beta 2」をリリースしました。今回のアップデートは「ユーザの使い勝手」を左右するUIの刷新が目立つので、これに触れた後で、MWC 2026をターゲットとしてお披露目された気になるモノをピックアップします。

azukiazusa のテックブログ2

iOS Safari で触覚フィードバックを実現する WebHaptics

WebHaptics は、Web アプリケーションで触覚フィードバックを実装するための JavaScript ライブラリです。iOS Safari でも触覚フィードバックを提供することができます。この記事では、WebHaptics ライブラリの概要と、どのようにして iOS Safari で触覚フィードバックを実現しているのかについて解説します。

gihyo.jp

OpenAI、ChatGPT用の最新モデル「GPT-5.3 Instant」をリリース

OpenAIは2026年3月3日、ChatGPTでもっとも多く利用されているモデルのアップデートとして、GPT-5.3 Instantを発表した。

gihyo.jp

Chrome、9月リリースのバージョン153から2週間ごとのリリースサイクルに移行へ

Chromeは2026年3月3日、2021年に始まった現在の4週間のChromeリリースサイクルを、2026年9月から2週間へと移行することを発表した。

gihyo.jp

実運用を見据えたログ設計の観点 ——5つの設計指針と運用面での活用戦略

効果的なログ設計は、信頼性が高いアプリケーションの開発・運用に不可欠です。この記事では主要な設計原則を整理し、実効性を重視した具体的な指針と実装の勘所を提示します。クラウドネイティブな運用とオブザーバビリティの観点から、従来の設計を見直してみましょう。

gihyo.jp

第902回　FirefoxのAIチャットボットをローカルLLMで使用する

今回はFirefoxが持つAI機能の1つ、チャットボット、特にページの要約機能で使用するLLMをローカルLLMに変更する方法を紹介します。

gihyo.jp

Claude Code Agent Teamsの衝撃と実際

この連載で扱わざるを得ないエポックメイキングな機能が2026年2月5日にv2.1.32のClaude Opus 4.6のリリースと同時に発表されました。それが「Claude Code Agent Teams」です。今回は、何がそんなに衝撃だったのか、結局Agent Teamsは何ができて何が欠点なのか、その現在地を触りながら、今後の可能性を探求していきたいと思います。

gihyo.jp

AIエージェントからfreeeのAPIを操作可能なMCPサーバー「freee-mcp」オープンソースとして公開

フリー（株）は2026年3月2日、同社のサービス「freee」で提供されているAPIをAIエージェントが直接操作できるMCPサーバー「freee-mcp」をオープンソースとして公開した。

blog.jxck.io

「定時実行」と「定期実行」の実装ガイド

「毎時何時に実行」や「何時間ごとに実行」といった、タスクスケジューリングを実装する機会は少なくない。タスクを実装し cron に登録すれば、動くものを実装するのは難しくない。しかし、ひとたびタスクが思うように動かなかった途端、隠れていた要件が牙を剥く。一度でも痛い目を見た人は、それを経験的に疑い「まず色々と前提を確かめよう」という気持ちになり、例外処理を事前に固めることができる。今回は、実装方法そのものというよりも、「実装する前に確認すべき例外事項」を個人の経験を元に解説していく。

gihyo.jp

第127回　オープンソースカンファレンスOsaka報告、MySQLのコミュニティに向けた方針発表、PostgreSQLの緊急リリース

この連載はOSSコンソーシアム データベース部会のメンバーがオープンソースデータベースの毎月の出来事をお伝えしています。

azukiazusa のテックブログ2

`clamp()` 関数を使用したレスポンシブなフォントサイズ

レスポンシブデザインにおいてメディアクエリを使用して異なる画面サイズに対して異なるフォントサイズを指定する方法は一般的ですが、いくつかの課題点もあります。`clamp()` 関数を使用することで、画面幅の変化に対してフォントサイズが滑らかに変化するようにできます。また煩雑なメディアクエリの管理を減らすことができます。

gihyo.jp

プラットフォームエンジニアリングとは何か？ 基本概念と背景

第1回となる本稿では、プラットフォームエンジニアリングの定義と、注目されている背景にある、ソフトウェア開発現場が抱える課題について解説します。

gihyo.jp

GitHub Copilot CLI が一般提供を開始

GitHubは2026年2月25日、GitHub Copilot CLIを、すべての有料プランのユーザーに向けて一般提供を開始した。開発に関連する様々な作業をこなすコーディングエージェントをターミナルから操作できるようになる。

gihyo.jp

Google、Nano Banana 2をリリース ―Nano Banana ProのインテリジェンスとGemini 3.1 Flashのスピードをもつ画像生成モデル

Googleは2026年2月26日、画像生成AIモデルの最新バージョン「Nano Banana 2（Gemini 3.1 Flash Image）」をリリースした。

gihyo.jp

Ubuntu 26.04（resolute）の開発; Feature FreezeとUI Freezeの間の調整

resolute（Ubuntu 26.04 LTS）のFeature Freezeが完了し、3月12日のUI Freezeまでの「仕上げと調整」のシーズンに入りました。

JSer.info

2026-02-26のJS: Electrobun v1、Deno 2.7、Oxfmt Beta

JSer.info #765 - Electrobun v1がリリースされました。 Electrobun v1 - Blackboard Blog TypeScriptでクロスプラットフォームのデスクトップアプリを作成できるフレームワークで、ランタイムにBunを使い、ZigやC/C++で実装されています。 Deno v2.7がリリースされました。 Deno 2.7: Temporal API, Windows ARM, and npm overrides | Deno Temporal APIがstableに変更され、Windows ARM(aarch64)のサポートが追加されています。package.jsonのoverridesフィールドのサポート、CompressionStream/DecompressionStreamでのBrotliサポート、Web Crypto APIでのSHA3アルゴリズムのサポートなどが含まれています。 OxcのJavaScript FormatterであるOxfmtのβがリリースされました。 Oxfmt Beta | The JavaScript Oxidation Compiler PrettierのJavaScript/TypeScriptの互換テストを100%パスするようになっています。Tailwind CSSのクラスソート、importのソート、package.jsonのフィールドソートの組み込みサポートなどが含まれています。 JSer.infoをサポートするには 😘 知り合いにJSer.infoをおすすめする ❤️ GitHub Sponsorsで@azuのスポンサーになる 🐦 X(Twitter)で@jser_infoをフォローする JSer.info Sponsors JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。 ヘッドライン Electrobun v1 - Blackboard Blog blackboard.sh/blog/electrobun-v1/ TypeScript Bun Zig Electron library ReleaseNote TypeScriptでクロスプラットフォームのデスクトップアプリを作成できるフレームワーク。 <electrobun-webview>要素として扱える仕組みなどを持つ。 blackboardsh/electrobun: Build ultra fast, tiny, and cross-platform desktop apps with Typescript. Electrobun Documentation - Build ultra fast, tiny, cross-platform desktop apps Release v4.12.0 · honojs/hono github.com/honojs/hono/releases/tag/v4.12.0 Hono ReleaseNote Hono v4.12.0リリース。 $path()メソッドの追加、SSG向けのredirect pluginの追加、Basic AuthのonAuthSuccessコールバックの追加。 getConnInfoがAWS Lambda/Cloudflare Pages/Netlifyに対応。 c.json()のFast Pathの追加など Oxfmt Beta | The JavaScript Oxidation Compiler oxc.rs/blog/2026-02-24-oxfmt-beta JavaScript Rust Tools ReleaseNote OxcのJavaScript FormatterであるOxfmtのβリリース。 package.jsonのフィールドソートの組み込みサポートなど Oxfmt | The JavaScript Oxidation Compiler Node.js — Node.js 25.7.0 (Current) nodejs.org/en/blog/release/v25.7.0 nodejs ReleaseNote Node v25.7.0リリース。 node:sqliteモジュールがRelease Candidate(RC)に昇格。 http1Optionsを追加。 Duplex.toWeb()のtypeオプションをreadableTypeにリネーム、node:testでSIGINT時に中断されたテストを表示するように。 fs.statにthrowIfNoEntryオプションの追加、zlibでBrotli圧縮辞書のサポートなど。 Node.js — Node.js 24.14.0 (LTS) nodejs.org/en/blog/release/v24.14.0 nodejs ReleaseNote Node v24.14.0リリース。 async_hooksのcreateHook()にtrackPromisesオプションの追加、fs.watch()にignoreオプションの追加。 http.setGlobalProxyFromEnv()の追加、Subpath Importsで#/から始まるパスをサポート。 stream/consumersにbytes()メソッドの追加、node:testのrun()にenvオプションの追加やit.expectFailureのサポートなど。 Deno 2.7: Temporal API, Windows ARM, and npm overrides | Deno deno.com/blog/v2.7 deno ReleaseNote Deno v2.7リリース。 package.jsonのoverridesフィールドのサポート、deno install --compileの追加。 CompressionStream/DecompressionStreamがBrotliをサポート、Web Crypto APIでSHA3アルゴリズムのサポート。 deno taskでglobstar(**)とpipefailのサポート、deno compile --self-extractingオプションの追加。 node:worker_threads/node:child_process/node:zlib(Zstd)などの修正、V8 14.5へのアップデートなど。 npm bulk trusted publishing config and script security now generally available - GitHub Changelog github.blog/changelog/2026-02-18-npm-bulk-trusted-publishing-config-and-script-security-now-generally-available/ npm security npm CLI v11.10.0リリース。 min-release-ageでパッケージの公開から一定日経過したものだけをインストールできるように。 npm trustコマンドで複数パッケージのOIDC Trusted Publishingの設定を一括で行えるように。 --allow-gitフラグの追加により、git依存関係のインストール時のセキュリティ制御が可能に。.npmrcでgit実行パスを上書きすることで--ignore-scripts使用時でもコード実行が可能だった問題に対処している。 --allow-git=noneの利用が推奨されており、npm CLI v12でデフォルトになる予定。 Release v11.11.0 · npm/cli The React Foundation: A New Home for React Hosted by the Linux Foundation – React react.dev/blog/2026/02/24/the-react-foundation React OpenSource community organization news React FoundationがLinux Foundation傘下に正式に設立された。 Release [email protected] · styled-components/styled-components github.com/styled-components/styled-components/releases/tag/styled-components%406.3.7 CSS React library ReleaseNote styled-components v6.3.7リリース。 createGlobalStyleがReact StrictModeやRSC(React Server Components)で正しく動作しない問題の修正。 exportsフィールドを追加しESMの対応を改善など アーティクル Clinejection — Compromising Cline's Production Releases just by Prompting an Issue Triager | Adnan Khan - Security Research adnanthekhan.com/posts/clinejection/ security VSCode AI article ClineのGitHub Actionsワークフローに対する攻撃手法についての記事。 Goodbye innerHTML, Hello setHTML: Stronger XSS Protection in Firefox 148 - Mozilla Hacks - the Web developer blog hacks.mozilla.org/2026/02/goodbye-innerhtml-hello-sethtml-stronger-xss-protection-in-firefox-148/ Firefox XSS security DOM article Firefox 148で実装されたSanitizer APIについて。 innerHTMLはHTMLをフィルタリングせずに挿入するが、setHTML()は自動的にサニタイズしてXSSの原因となる危険な要素や属性を除去する。 How we rebuilt Next.js with AI in one week blog.cloudflare.com/vinext/ Next.js cloudflare vite article CloudflareによるNext.js互換フレームワークvinextについて。 cloudflare/vinext: Vite plugin that reimplements the Next.js API surface — deploy anywhere サイト、サービス、ドキュメント millionco/react-doctor: Let coding agents diagnose and fix your React code github.com/millionco/react-doctor React Tools ESLint performance accessibility AI Reactのコードベースを静的解析して、ヘルススコア(0〜100)を算出するツール。 vercel-labs/portless: Replace port numbers with stable, named .localhost URLs. For humans and agents. github.com/vercel-labs/portless Tools server nodejs debug ポート番号の代わりにmyapp.localhostのような名前付き.localhost URLを使えるようにする開発用プロキシツール。 portless proxy startでデーモンを起動し、portless myapp next devのように開発サーバーを起動する。 http://myapp.localhost:1355のようなURLでアクセスできる。 HTTP/2やHTTPSの証明書の自動生成に対応し、Next.js/Express/Nuxt/Vite/Astroなどのフレームワークで利用できる。

azukiazusa のテックブログ2

AI エージェントを通じてコードとキャンバスを接続するデザインツール Paper を試してみた

Paper は AI エージェントを通じてコードとキャンバスを双方向に接続するデザインツールで、AI にデザインの作成やコードへの変換を任せることができます。Paper の MCP サーバーのツールを組み合わせることでキャンバス上のノードの情報を取得したり、デザインを挿入・編集したりすることができます。この記事では実際に Paper を試して、コードからデザインへ、デザインからコードへの双方向のワークフローがどのように実現されているのかを紹介します。

gihyo.jp

Cloudflare、Next.jsをCloudflare Workersに1コマンドでデプロイできる「vinext」を公開 ―AIコーディングで“Viteで動作するNext.js”をリビルド

Cloudflareは2026年2月24日、ReactのフレームワークNext.jsをフロントエンドビルドツールViteで動作させるプラグイン「vinext」を、MIT Licenseの元GitHub上に公開した。

gihyo.jp

PythonでLLMアプリ開発を型安全に扱う ― Pydantic AI入門

2026年2月の「Python Monthly Topics」は、Python向けAIエージェントフレームワーク「Pydantic AI」について紹介します。

gihyo.jp

Android 17 Beta 1からのリリース、この裏にある「AIエージェント」への転換点とレスポンシブ対応の義務化

2026年2月13日、Googleは次期OS「Android 17」の最初のベータ版がリリースされました。

azukiazusa のテックブログ2

プラットフォームごとの Chat ボットの実装を抽象化する Chat SDK

Chat SDK は TypeScript で記述されたライブラリで、1 つのコードベースで複数のチャットプラットフォームに対応するチャットボットを開発できるようになります。イベント型アーキテクチャを採用しており、メンション, メッセージ, リアクション, スラッシュコマンドなどのイベントに型安全なハンドラーを定義できます。この記事では実際に Chat SDK を使用して、Slack 向けのチャットボットを実装する方法を紹介します。

gihyo.jp

ノーコードでAIワークフローを構築できるOpal、エージェントステップを追加

Google Labsは2026年2月24日、AIワークフローを組み立てて実行できるノーコードビジュアルビルダーOpalにおいて、これまで具体的なモデルを選択する必要があったGenerateステップでエージェントを選択できるようになったことを発表した。

gihyo.jp

第901回　さらに進化したUptime Kumaで、家庭内監視システムを構築する

シンプルな監視ツールであるUptime Kumaを紹介し4年が経過しました。Kumaのバージョンは2系に進化し、様々な仕様変更や機能強化がなされています。今回はバージョン2系の最新版を使い、シンプルな家庭内監視システムを構築してみましょう。

blog.jxck.io

ローカル HTTPS 開発専用ツール SPTTH を公開した

http://localhost:3000 での開発には限界がある。しかし、本番と同じように https://example.com でアクセスできる環境をローカルに作るには、ドメインの解決、証明書の発行、443 での起動など、少し手間がかかる。そこで、必要な全てを 1 つのツールで行い、様々な開発環境を再現するためのツールを開発したので、紹介する。Jxck/sptth: reverse https proxy (https - sptth) for local developmenthttps://github.com/Jxck/sptth

azukiazusa のテックブログ2

テキストサイズの拡大設定の問題と解決策

WCAG 2.2 では、ユーザーが画像拡大ソフトや支援技術を使用せずに、200% までテキストを拡大してもコンテンツが正しく表示されることを要求しています。しかし、テキストサイズの拡大に関しては、ブラウザや OS の設定を尊重せず、ユーザーがテキストサイズを拡大してもコンテンツが拡大されないという問題が長年存在していました。この記事では、この問題の原因と解決策について解説します。

gihyo.jp

draw.io、Claude Code向けスキルを公開

draw.ioは2026年2月23日、Claude Code向けの「Draw.io Skill」を公開した。

gihyo.jp

Linux 7.0-rc1が公開、正式リリースは4月中旬か ―メジャーナンバーのアップは「着実な進歩の指標」

Linus Torvaldsは2月22日、次期LinuxカーネルLinux 7.0の最初のリリース候補版（RC）となる「Linux 7.0-rc1」を公開した。

gihyo.jp

llama.cpp開発を牽引してきたggml.aiがHugging Faceに合流

llama.cppの開発を牽引してきたggml.aiは2026年2月20日、Hugging Faceへの合流を発表した。

gihyo.jp

AIが脆弱性を推論し検知、修正を提案する「Claude Code Security」限定リサーチプレビュー版として提供開始

Anthropicは2026年2月20日、Web版Claude Code上でAIがコードをスキャンして、セキュリティ脆弱性を検出しパッチを提案する新機能「Claude Code Security」を限定リサーチプレビュー版として公開した。

gihyo.jp

日本語性能を強化したオープンなLLM「GPT-OSS Swallow」と「Qwen3 Swallow」リリース

Swallow LLM Projectは2026年2月20日、OpenAI GPT-OSSおよびAlibaba Qwen3の日本語能力と思考力を強化した推論型言語モデル「GPT-OSS Swallow」と「Qwen3 Swallow」をリリースした。

gihyo.jp

Blenderで作成したオブジェクトを、別のBlenderファイル読み込んでみよう

第71回目は、Blenderで作成したオブジェクトを、別のBlenderファイルに読み込む方法について見ていきます。

gihyo.jp

第265回　MySQLの再帰CTEを使ってBrainf*ckを動かしてみる

MySQL 8.0で導入された再帰CTE（WITH RECURSIVE）は、階層構造の走査やグラフ探索に使われることが多い機能です。

azukiazusa のテックブログ2

Claude Code デスクトップで Worktree を作成するとき .worktreeinclude で .gitignore で除外されているファイルを含める

Git Worktree を作成するとき、.gitignore に指定している .env ファイルなどがコピーされないという問題があります。この問題を解決するために Claude Code のデスクトップバージョンでは .worktreeinclude で .gitignore で除外されているファイルを含めることができます。

azukiazusa のテックブログ2

デスクトップ Claude Code の Preview 機能で UI を直接確認する

Claude Code のデスクトップアプリに新しい Preview 機能がリリースされました。これを使用すると、コードから起動したアプリケーションの UI を直接確認しながら、同時にログやコードも確認して問題を解決できます。この記事では Preview 機能の使い方を紹介します。

gihyo.jp

GitHub CopilotのZedエディタ対応が一般提供開始

GitHubは2026年2月19日、高速に動作するエディタZedにおけるGitHub Copilot対応を一般提供で開始した

gihyo.jp

Copilotから逃れたい！―Gentoo Linux、GitHubからCodebergへの移行を開始

Gentoo Linuxの開発チームは2月16日、Gentoo Linuxのリポジトリミラーを従来使っていたGitHutからCodebergへと移行する作業を開始した。

gihyo.jp

Ubuntu 26.04（resolute）の開発;「ソフトウェアとアップデート」の整理、Ubuntu 24.04.4のリリース、Open Source Conference 2026 Tokyo/Spring＠駒澤大学、ハイブリッド鍵交換の必要性

resoluteの開発において、比較的大きな「転換点」が生じました。具体的には“Software &amp; Updates”（software-propertiesパッケージ）を整理するという方向性です。

gihyo.jp

Gemini 3.1 Proリリース ―テキストから鮮明なSVGアニメを生成可能に

Googleは2026年2月19日、Gemini 3シリーズを元に推論機能をさらに進化させたモデル「Gemini 3.1 Pro」プレビュー版をリリースした。

gihyo.jp

KDE Plasma 6.6リリース　―“宇宙で最高のデスクトップです（当社比）”

KDEプロジェクトは2月17日、デスクトップ環境「KDE Plasma」の最新バージョンとなる「KDE Plasma 6.6」をリリースした。

gihyo.jp

NVIDIA、高性能で軽量な日本語特化言語モデルNemotron-Nano-9B-v2-Japaneseを公開

NVIDIAは2026年2月18日、軽量で高度な日本語理解能力を持つ言語モデルNVIDIA Nemotron-Nano-9B-v2-Japaneseを公開した。

gihyo.jp

4/22-24開催「RubyKaigi 2026」キーノートスピーカー発表、チケット販売中

プログラミング言語Rubyに関する年次国際カンファレンス「RubyKaigi 2026」が2026年4月22日（水）～24日（金）の3日間、北海道函館市の函館アリーナ/函館市民会館で開催される。

gihyo.jp

プレーンテキストで出力するワイヤーフレームツール「Mockdown」「Wiretext」が相次いで公開 ——テキスト形式のワイヤーフレームをエージェントに渡し、UIコードの生成を目指す

ワイヤーフレームを作成して、それをテキストとして出力するツールが相次いで登場した。2026年2月16日に「Mockdown」が、2月13日に「Wiretext」の2つのツールがそれぞれ別の開発者から公開されている。

azukiazusa のテックブログ2

Claude Code to Figma を使ってコードから Figma デザインを生成する

Claude Code to Figma はコードから Figma デザインを生成するための機能です。Figma MCP サーバーの `generate_figma_design` ツールを使用して、ローカルで開発したコードから Figma デザインを生成して、さらに Figma 上で編集した内容をコードに反映させるという双方向のワークフローが実現できるようになります。

gihyo.jp

Anthropic、Opusクラスに迫る「Claude Sonnet 4.6」をリリース ——FigmaもClaude Codeを利用した、ブラウザ上のUIキャプチャ機能を発表

Anthropicは2026年2月17日、同社の最新モデルClaude Sonnet 4.6をリリースした。Sonnetのモデルとして全面的なアップデートであり、多くの分野でOpusクラスの能力に近づいている。

gihyo.jp

NotebookLM、プロンプトを使ったスライド修正機能と、PowerPoint形式の出力機能を提供へ

NotebookLMは2026年2月17日、プロンプトを使ったスライド修正機能と、PowerPoint形式の出力機能を追加するアップデートを発表した。

gihyo.jp

第900回　Ubuntuでもウイルスのオンアクセススキャンをしてみよう

今回はUbuntu 24.04向けにアップデートした、ClamAVのオンアクセススキャンの使い方を紹介します。

gihyo.jp

「PHPerKaigi 2026」3/20-22に開催、チケット販売中

PHPユーザが技術的なノウハウやPHP愛を共有するための年次イベント「PHPerKaigi 2026」が、2026年3月20日（金）～22日（日）に東京、中野セントラルパークカンファレンスとニコニコ生放送のハイブリッド形式で開催される。

blog.jxck.io

「カンファレンス開催ノウハウ」を公開します

コロナ禍が明け、カンファレンス文化も再開し、コロナ前かそれ以上の頻度で多くのカンファレンスが企画されるようになりました。しかし、コロナ中の断絶によってノウハウの継承が途絶えた部分もあり、後発のイベントが既知の失敗を重ねている場面も見られます。そこで、カンファレンス主催者の有志が集まり、それぞれのノウハウを持ち寄ってまとめた「カンファレンス開催ノウハウ」を作成しました。📔 カンファレンス開催ノウハウ - Google ドキュメント複数人で書いたため、この公開は同時に複数の有志によりブログなどで告知されます。

JSer.info

2026-02-16のJS: TypeScript 6.0 Beta、State of React 2025の結果、Interop 2026

JSer.info #764 - TypeScript 6.0 Betaがリリースされました。 Announcing TypeScript 6.0 Beta - TypeScript TypeScript 7(Go言語ベース)への移行を見据えたリリースで、多くのデフォルト設定の変更や非推奨化が含まれています。strictがデフォルトでtrueに、moduleのデフォルトがesnextに、targetのデフォルトがes2025にそれぞれ変更されています。また、target: es5や--moduleResolution node10などが非推奨化され、ES2025のRegExp.escapeやTemporalの型定義の追加、TypeScript 7への移行を補助する--stableTypeOrderingフラグの追加なども含まれています。 State of React 2025のアンケート結果が公開されました。 State of React 2025 Reactの機能、フレームワーク、状態管理、データフェッチング、メタフレームワーク、ツール、AI活用などについてのアンケート結果がまとめられています。 ブラウザの相互運用性の向上を目指すプロジェクトであるInterop 2026が開始されました。 Interop 2026が始まりました！ Launching Interop 2026 - Mozilla Hacks - the Web developer blog Announcing Interop 2026 | WebKit Interop 2026 Focus Areas Announced | Igalia Interop 2026: Continuing to improve the web for developers | web.dev Microsoft Edge and Interop 2026 - Microsoft Edge Blog Apple、Google、Microsoft、Mozillaなどのブラウザベンダーが参加し、CSS Anchor Positioning、Container Style Queries、Navigation API、View Transitionsなどがフォーカスエリアに選ばれています。その他にもScroll-driven Animations、IndexedDB、WebRTC、WebTransportなど合計20の分野が対象となっています。 JSer.infoをサポートするには 😘 知り合いにJSer.infoをおすすめする ❤️ GitHub Sponsorsで@azuのスポンサーになる 🐦 X(Twitter)で@jser_infoをフォローする JSer.info Sponsors JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。 ヘッドライン Announcing TypeScript 6.0 Beta - TypeScript devblogs.microsoft.com/typescript/announcing-typescript-6-0-beta/ TypeScript ReleaseNote TypeScript 6.0 Betaリリース。 strictがデフォルトでtrueに変更、moduleのデフォルトがesnextに変更、targetのデフォルトがes2025に変更、typesのデフォルトが[]に変更。 target: es5/--moduleResolution node10/--module amd|umd|system/--outFileなどを非推奨化。 RegExp.escapeやTemporalの型定義を追加、lib.domにdom.iterableとdom.asynciterableを統合。 --stableTypeOrderingフラグの追加など。 WebKit features for Safari 26.3 | WebKit webkit.org/blog/17798/webkit-features-for-safari-26-3/ safari browser ReleaseNote Safari 26.3リリース。 NavigateEventにAbortSignalを公開し、ナビゲーション中断時に進行中の処理をキャンセルできるように。 position-tryやtext-decoration、マルチカラムレイアウトに関するバグ修正など。 Biome v2.4—Embedded Snippets, HTML Accessibility, and Better Framework Support | Biome biomejs.dev/blog/biome-v2-4/ biome ReleaseNote Biome v2.4リリース。 :slottedや:deepに対応。 --skip/--onlyフラグのサポートなど。 アーティクル Blog > Writing Good Unit Tests eliocapella.com/blog/writing-good-unit-tests/ test JavaScript article ユニットテストの書き方についての記事。 State of React 2025 2025.stateofreact.com/en-US React Survey State of React 2025のアンケート結果が公開された。 The CSS Selection - 2026 Edition - Project Wallace www.projectwallace.com/the-css-selection/2026 CSS article 10万以上のウェブサイトを対象にした実際のCSS利用状況の調査レポート。 :where() 91%、:has() 41%、@container 10%、@layer 2.7%などの採用率になっている。 Interop 2026が始まりました！ zenn.dev/yamanoku/articles/interop-2026-launched browser WebPlatformAPI article ブラウザの相互運用性の向上を目指すプロジェクトであるInterop 2026について。 Launching Interop 2026 - Mozilla Hacks - the Web developer blog Announcing Interop 2026 | WebKit Interop 2026 Focus Areas Announced | Igalia Interop 2026: Continuing to improve the web for developers | web.dev Microsoft Edge and Interop 2026 - Microsoft Edge Blog Web フォントを使って contenteditable から脱出する techblog.lycorp.co.jp/ja/20260216c CSS fonts article 任意の大きさに変形できる空白の文字を持つウェブフォントとテキストのオーバレイを使ってテキストエリアに絵文字などの装飾を表示する方法について Roadmap 2026 (2026-02-04) | webpack webpack.js.org/blog/2026-04-02-roadmap-2026/ webpack article webpack 2026年のロードマップ。 サイト、サービス、ドキュメント npmx - Package Browser for the npm Registry npmx.dev/ npm search webservice npmレジストリのインクリメンタル検索サービス。 ソフトウェア、ツール、ライブラリ関係 hamzaydia/verifyfetch: Resumable, verified downloads for large browser files. Fail at 3.8GB, resume from 3.8GB. github.com/hamzaydia/verifyfetch JavaScript library Fetch WebAssembly ブラウザでの大容量ファイルのダウンロードにおいて、レジューム対応と整合性の検証を行うライブラリ。 bikeshaving/shovel: Run Service Workers anywhere github.com/bikeshaving/shovel ServiceWorker server library nodejs Bun cloudflare Service Worker APIやWeb標準APIのインターフェースをベースにしたサーバアプリケーションを書けるメタフレームワーク。 install/activate/fetchイベントをベースにしたサーバライフサイクルを持つ。 ubugeeei/vize: Unofficial High-Performance Vue.js Toolchain in Rust github.com/ubugeeei/vize Vue Rust Tools compiler Rustで書かれたVue.jsツールチェイン。 Vue SFCのコンパイラ、Linter、Formatter、型チェッカー、LSPなどを含む。 CLI/Browser(WebAssembly)/Vite Pluginとして利用できる

gihyo.jp

GitHub、Agentic Workflowsをテクニカルプレビューで提供開始 ——GitHub Actionsでのエージェント動作を自然言語で記述可能に

GitHubは2026年2月13日、Issueのトリアージやコードの修正、CIエラーの分析といったリポジトリ内の作業を自動化する「GitHub Agentic Workflows」をテクニカルプレビューとして公開した。

gihyo.jp

Visual Studio Code安定版、チャットメッセージのキューイングとステアリング、エージェントフックを導入 ——Insiders版の注目機能をより早く提供するため、安定版を「週次アップデート」に移行へ

Visual Studio Codeは2026年2月12日、安定版の最新アップデート、バージョン1.109.3をリリースした。新機能として、メッセージのキューイングとステアリング、フック、Claude互換性、そしてスラッシュコマンドとしてのスキルが導入されている。

gihyo.jp

OpenClaw開発者、OpenAIに入社 ―OpenClawはオープンソースプロジェクトとして継続

パーソナルAIアシスタントOpenClaw（旧名称Clawdbot）の作者であるPeter Steinberger氏は2026年2月16日、OpenAIに入社することを明らかにした。

gihyo.jp

MakerChipを作ろう

3DPに興味がある人たちの中でMakerChipという文化が浸透し始めています。

azukiazusa のテックブログ2

AI エージェントのセッションを Git 互換のデータベースに保存する Entire CLI

Entire CLI は AI エージェントのセッションを Git 互換のデータベースとして保存するためのツールです。Git レポジトリで Entire を有効にすると、AI エージェントのセッションをチェックポイントとして保存できるようになります。チェックポイントではユーザーのプロンプトや AI エージェントの応答、ツールの使用履歴、AI がコードを書いた割合などを確認できます。

gihyo.jp

Cloudflare、「Markdown for Agents」を発表 ——エージェント向けにウェブページのHTMLをオンザフライでMarkdownに変換

Cloudflareは2026年2月12日、ウェブページをエージェント向けにMarkdownにして提供できる機能「Markdown for Agents」を発表した。この機能はPro/Business/EnterpriseプランおよびSSL for SaaSで、ベータ機能として無償で提供される。

gihyo.jp

Google、Gemini 3 Deep Thinkを更新し研究・エンジニアリング用途を強化 ——数学研究エージェント「Aletheia」など共同研究の取り組みも

GoogleのDeep Thinkチームは2026年2月12日、推論モード「Gemini 3 Deep Think」のモデルを更新したことを発表した。

gihyo.jp

本当に効く、真の業務改善とは ～『業務設計の教科書』発売記念イベント@書泉ブックタワーレポート～

2026年1月29日に書泉ブックタワーで開催された書籍2冊をテーマにしたイベント「本当に効く、真の業務改善とは〜 業務設計とExcel仕事術で学ぶ実践的アプローチ」。本稿ではその模様をレポートします。

gihyo.jp

Ubuntu 26.04（resolute）の開発; LubuntuとUbuntu BudgieのX11サポートの行方、SpacemiT K3/K1シリーズとNVIDIA Vera Rubinのサポート、HWEカーネルとドライバーの問題

resoluteのリリースまであと2ヶ月ほどとなり、各種フレーバーを含めた「基本的な仕様」の整理のための作業が進められています。

gihyo.jp

Stitch、Webデザインの着想を得るIdeateエージェントを追加 ——どのエージェントからもFigmaへの出力も可能に

Google Labsが提供しているStitchは2026年2月11日、Stitchプロジェクトの開始時に使用できるエージェントとして、Webデザインの着想を得るためのIdeateエージェントを追加したことを発表した。

gihyo.jp

Obsidianをコマンドラインで操作する「Obsidian CLI」早期アクセス版で提供開始

2026年2月10日、MarkdownノートアプリObsidianの最新バージョン1.12.0が、早期アクセス版としてCatalystライセンスをもつユーザ向けにリリースされた。Obsidian 1.12.0ではコマンドラインインターフェース「Obsidian CLI」の機能が新たに追加された。

gihyo.jp

Go 1.26リリース、Green Teaガベージコレクタをデフォルトに

Go開発チームは2026年2月10日、プログラミング言語Goの最新バージョンGo 1.26をリリースした。

gihyo.jp

「コードを書くだけ」の自分を卒業する。ヌーラボが社内外から“起業家”を募る「Nu Source」は、エンジニアのキャリアを、そして、世界をどう変えるのか

「Backlog」や「Cacoo」など、エンジニア発のツールをグローバルSaaSへと成長させてきた株式会社ヌーラボ。同社が開始したのが、今回紹介する「Nu Source（ヌーソース）」です。Nu Sourceは社内外から事業アイデアを公募する新規事業創出プログラムとして、今注目を集めています。

gihyo.jp

第899回　Distroboxを使えば、他のディストリビューションの最新パッケージをUbuntuでも気軽に試せる

今回は、他のディストリビューションのパッケージを気軽に素早く試せる「Distrobox」を紹介します。

gihyo.jp

GoogleマップのGemini統合が示すAI前提のUIの形とは？

皆さんrabbit r1を覚えていますでしょうか？ 2026年1月に入って、rabbit r1の新たな方向性を定めることになる可能性があるアップデートが行われました。

azukiazusa のテックブログ2

Web アプリケーションをツール化する WebMCP

WebMCP は Web 開発者が Web アプリケーションの機能をツールとして公開できるようにする JavaScript インターフェイスです。これにより AI エージェントが Web アプリケーションの機能を直接呼び出して操作できるようになります。

blog.jxck.io

text-scale によるユーザ指定倍率での文字拡大

小さい文字が見づらい場合、ユーザは OS の文字サイズを大きくすることで、視認性を調整することができる。こうした機能は大抵の OS が備えており、システムフォントのサイズなどに反映される。しかし、その指定がそのまま Web コンテンツにも反映されるかというと、必ずしもそうではない。この問題を解決するために、いくつかの標準が提案され、策定と実装が進んでいる。

gihyo.jp

第264回　MySQL 8.0 → 8.4アップグレードで気をつけるべきポイント

MySQL 8.4はLTS（Long Term Support）として位置づけられており、8.0系からの移行先として検討されるケースが増えています。

gihyo.jp

Linux 6.19リリース、次のメインラインは「Linux 7.0」に決定

Linus Torvaldsは2月8日、2026年最初のメインラインリリースとなる「Linux 6.19」を公開した。

gihyo.jp

Blenderの機能であるドライバーについて、設定方法やコピー方法を見ていこう

前回に引き続きBlenderの「ドライバー」という機能について見ていきます。

azukiazusa のテックブログ2

React で動画を作る Remotion

Remotion は React を使ってプログラム的に動画を作成できるフレームワークです。CSS や SVG、Canvas API などのウェブ技術を活用したり、変数や関数、ループ、条件分岐などのプログラミングの概念を利用して動画を生成できます。この記事では Remotion の基本的な使い方を紹介します。

azukiazusa のテックブログ2

Claude Code のオーケストレーション機能であるエージェントチームを試してみた

Claude Code のエージェントチームを使用すると、複数の Claude Code インスタンスが連携して動作するようになります。この記事では、Claude Code のエージェントチーム機能を試し、どのように動作するかを探ってみます。

gihyo.jp

Debian、LLMスクレイピング攻撃でCIデータの公開閲覧を制限

生成AIの普及と進化はサイバー攻撃のスタイルにも急激な変化をもたらしている。そのひとつがAI/LLMによるWebサイトのスクレイピングだ。

gihyo.jp

フロンティアモデル「Claude Opus 4.6」および「GPT-5.3-Codex」がリリース ——ソフトウェア開発はAgentic Engineeringへ

2026年2月5日、AnthropicはClaude Opus 4.6を発表しました。同日、OpenAIもGPT‑5.3‑Codexを発表しました。これらのモデルは両社のフロンティアモデルです。同日にリリースされたため、今回は一緒に取り上げます。

gihyo.jp

Ubuntu 26.04 LTS（resolute）の開発;Snapshot 3のリリースとArm64向けSteam Snap、25.04のサポート終了、注目すべきセキュリティー的な視点

resolute（Ubuntu 26.04 LTS）はSnapshot 3がリリースされ、順調に「本来の姿」を目指した開発が進められています。

gihyo.jp

GitHub⁠⁠、ClaudeとCodexをエージェントとして直接実行する機能を、Copilot Pro+/Enterpriseユーザー向けにパブリックプレビューで提供開始 ——Visual Studio Codeでも利用可能に

GitHubは2026年2月4日、GitHubにおけるAIエージェント利用戦略「Agent HQ」において、AnthropicのClaudeおよびOpenAIのCodexが、GitHubおよびVisual Studio Code上で直接コーディングエージェントとして利用できるようになったことを発表した。

gihyo.jp

LibreOffice 26.2リリース、Markdownのインポート/エクスポートに対応

Document Foundationは2026年2月4日、LibreOfficeの新バージョン26.2をリリースした。

gihyo.jp

使えないウサギは返上か？ DLAMでrabbit r1は逆転できるのか

皆さんrabbit r1を覚えていますでしょうか？ 2026年1月に入って、rabbit r1の新たな方向性を定めることになる可能性があるアップデートが行われました。

blog.jxck.io

Global Privacy Control という法的効力を持つヘッダ

GPC (Global Privacy Control) の策定と実装が進んでいる。このヘッダは、サービス、ユーザ、ブラウザ、全てにとって「無視することができない特別なヘッダ」となりつつある。たかだか 1 という値を送るだけのヘッダに、何の意味があるのか?失敗して歴史に消えつつある DNT と何が違うのか?解説していく。

gihyo.jp

【AI時代の開発戦略】開発スピードと品質をどう両立させる？ 3社エンジニアの事例に学ぶ

2026年1月15日にカミナシ、キャディ、ENECHANGEという急成長テックベンチャー3社のエンジニアが登壇したオンラインイベント「【AI時代の開発戦略】開発スピードと品質の両立に向けて ー 3社エンジニアの事例から学ぶ」。本稿では、その模様をレポートします。

JSer.info

2026-02-04のJS: Yarn 6 Preview、WebAssembly 10年、State of JavaScript 2025の結果公開

JSer.info #763 - Yarn 6のプレビュー版が公開されました。 Yarn 6 Preview | Yarn Yarn 6はRustでの書き直しが行われ、パフォーマンスの改善が行われています。 yarn switchコマンドの追加、package.jsonの変更時に自動でインストールを行うLazy Installsがデフォルトで有効化されます。 WebAssemblyの誕生から10年を振り返る記事が公開されています。 Bytecode Alliance — 10 Years of Wasm: A Retrospective 2013年のasm.jsから始まり、MozillaのLuke WagnerとGoogleのBen Titzerの協力によってWebAssemblyが誕生した経緯を紹介しています。2015年に主要ブラウザが同時に対応を発表し、2017年には全ブラウザが対応を完了しました。その後、WASIやComponent Modelの開発によりブラウザ外での利用が広がっており、WASIをPOSIXのコピーとしなかった点などについても触れられています。 State of JavaScript 2025のアンケート結果が公開されています。 State of JavaScript 2025 JavaScriptの言語機能、フレームワーク、ライブラリ、ツール、テスト、AI活用などについてのアンケート結果がまとめられています。 JSer.infoをサポートするには 😘 知り合いにJSer.infoをおすすめする ❤️ GitHub Sponsorsで@azuのスポンサーになる 🐦 X(Twitter)で@jser_infoをフォローする JSer.info Sponsors JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。 ヘッドライン Release v8.0.0 · FullHuman/purgecss github.com/FullHuman/purgecss/releases/tag/v8.0.0 CSS Tools ReleaseNote PurgeCSS v8.0.0リリース。 --preserve-pathsオプションの追加、CSS変数で参照されるアニメーションの保持の改善など Bun v1.3.7 | Bun Blog bun.com/blog/bun-v1.3.7 Bun ReleaseNote Bun v1.3.7リリース。 Bun.JSON5、JSON Linesを扱うBun.JSONL、ANSIテキストのラップを行うBun.wrapAnsi()の追加。 --heap-prof-md/--cpu-prof-mdフラグの追加。 Buffer.from(array)/async-await/array.flat()などのパフォーマンス改善、HTTP/2の互換性の修正など。 Release v4.11.7 · honojs/hono github.com/honojs/hono/releases/tag/v4.11.7 Hono ReleaseNote security Hono v4.11.7リリース。 IP制限MiddlewareのIPv4アドレス検証バイパス Cache Middlewareでprivateやno-storeなレスポンスがキャッシュされる問題 Serve Staticミドルウェア(Cloudflare Workers adapter)での内部アセットへのアクセス問題 hono/jsxのErrorBoundaryでのXSS Release v0.0.58 · microsoft/playwright-mcp github.com/microsoft/playwright-mcp/releases/tag/v0.0.58 playwright MCP Tools ReleaseNote playwright-mcp v0.0.58リリース。 playwright-cliコマンドが追加され、コマンドでPlaywrightを操作できるように。 Node.js — Node.js 25.5.0 (Current) nodejs.org/en/blog/release/v25.5.0 nodejs ReleaseNote Node v25.5.0リリース。 --build-seaフラグの追加。 fs.watch()にignoreオプションを追加、SQLiteのdefensive modeをデフォルトで有効化。 node:testにexpectedFailureオプションの追加など Yarn 6 Preview | Yarn yarn6.netlify.app/blog/2026-01-28-yarn-6-preview/ yarn Rust ReleaseNote JavaScript Yarn 6プレビュー版の公開。 yarn switchの追加、package.jsonの変更時に自動でインストールを行うLazy Installsがデフォルトに。 Lodash Rolls Out Major Security Overhaul | OpenJS Foundation openjsf.org/blog/lodash-security-overhaul lodash JavaScript library security ReleaseNote Lodash 4.17.23リリース。 _.unsetと_.omit関数のPrototype Pollutionの脆弱性を修正。 Release v1.58.0 · microsoft/playwright github.com/microsoft/playwright/releases/tag/v1.58.0 playwright testing ReleaseNote playwright v1.58.0リリース。 _react/_vueセレクタ、:lightセレクタエンジン、devtoolsオプションの削除。 Bun v1.3.8 | Bun Blog bun.com/blog/bun-v1.3.8 Bun ReleaseNote Bun v1.3.8リリース。 Bun.markdownを追加。 bun build --metafile-mdでLLMフレンドリーなモジュールグラフのメタデータを出力できるように。 npm install -g bunのリグレッションを修正。 Release Version 28.0.0 · jsdom/jsdom github.com/jsdom/jsdom/releases/tag/28.0.0 JavaScript DOM library ReleaseNote jsdom 28.0.0リリース。 <iframe>/<frame>要素でのMIMEタイプスニッフィングのサポート。 XMLHttpRequestやWebSocketのリクエストが新しいリソースローディングのカスタマイズでインターセプト可能に。 document referrerの修正、XMLHttpRequestのバグ修正など アーティクル Bytecode Alliance — 10 Years of Wasm: A Retrospective bytecodealliance.org/articles/ten-years-of-webassembly-a-retrospective WebAssembly history article WebAssemblyの誕生から10年を振り返る記事。 Custom DuckDB Wasm builds for Cloudflare Workers - tobilg.com tobilg.com/posts/custom-duckdb-wasm-builds-for-cloudflare-workers/ cloudflare WebAssembly duckdb article Cloudflare Workers上でDuckDB WebAssemblyを動作させるためのカスタムビルドについて。 tobilg/ducklings: A minimal DuckDB Wasm build for browsers and serverless environments like Cloudflare Workers State of JavaScript 2025 2025.stateofjs.com/en-US JavaScript Survey State of JavaScript 2025のアンケート結果が公開された。 ソフトウェア、ツール、ライブラリ関係 LibPDF-js/core: A modern PDF library for TypeScript. Parse, modify, and generate PDFs with a clean, intuitive API. github.com/libpdf-js/core PDF TypeScript library JavaScript ブラウザやNode.jsなどで動くPDFの編集、作成ライブラリ。 PDFの解析、修正、生成をサポートし、RC4/AES暗号化、デジタル署名、フォーム入力、ページのマージ/分割、テキスト抽出などに対応している。

gihyo.jp

Alibaba、コーディングエージェント向けモデル「Qwen3-Coder-Next」をリリース

AlibabaのQwen Teamは2026年2月3日、コーディングエージェントおよびローカル開発向けに特化して設計されたオープンウェイトの言語モデル「Qwen3-Coder-Next」を発表した。

gihyo.jp

Xcode⁠⁠、26.3 RCで⁠⁠ClaudeやCodexのコーディングエージェントを直接活用してアプリ開発が可能に ——MCPを利用して外部ツールでXcode Previewsのキャプチャ参照も実現

Appleは2026年2月3日、統合開発環境の最新版「Xcode 26.3」のRelease Candidate（RC）の提供を開始した。このリリースでXcode内から直接、AnthropicのClaude AgentやOpenAIのCodexをコーディングエージェントとして活用できる機能を導入したことを発表した。

gihyo.jp

第898回　Ubuntuにおけるミラーサーバーとその付き合い方

Ubuntuイメージを配布する日本のミラーサーバーとして動いていた富山大学のサーバーが、1月末にその役割を終えてシャットダウンされました。今回はUbuntuにおけるミラーサーバーとは何か、そしてより高速にリポジトリへとアクセスするにはどうすればいいのかを紹介します。

gihyo.jp

FirefoxのAI機能を一元管理でブロック可能に ―「AIコントロール」機能を実装

Mozilla Corporationは2026年2月24日にリリースされるFirefox 148で、デスクトップブラウザの設定に「AIコントロール」セクションを設けることを発表した。

gihyo.jp

OpenAI、Codexアプリをリリース ―エージェントのマルチタスクや自動実行、エージェントスキルに対応した“エージェントのコマンドセンター”

OpenAIは2026年2月2日、macOS用Codexアプリをリリースした。

gihyo.jp

Btrfs開発者のChris Mason、カーネル開発のためのAI支援コードレビュープロンプトをアップデート

AI/LLMによるコードレビューの自動化はすでに多くのエンジニアリングの現場で拡がっているが、どうやらLinuxカーネル開発においてもその動きが始まりつつあるようだ。

gihyo.jp

第126回　MySQL 9.6.0リリース、Fujitsu Enterprise Postgres 18リリース

この連載はOSSコンソーシアム データベース部会のメンバーがオープンソースデータベースの毎月の出来事をお伝えしています。

azukiazusa のテックブログ2

MoonBit の宣言 UI ライブラリ Luna を使ってみる

Luna は MoonBit と JavaScript を使用して Web アプリケーションのユーザーインターフェースを構築するための宣言型 UI ライブラリです。この記事では、Luna UI と MoonBit を使用してシンプルなカウンターアプリケーションを作成する方法を紹介します。

azukiazusa のテックブログ2

MoonBit で RESTful API サーバーを構築する

MoonBit は、WebAssembly や JavaScript にコンパイルできる新しいプログラミング言語です。この記事では、MoonBit を使用してシンプルな RESTful API サーバーを作成する方法を紹介します。

gihyo.jp

Mac mini不要、Cloudflare Workers上でMoltbotが動く「Moltworker」オープンソースとして公開

Cloudflareは2026年1月29日、旧名称「Clawdbot」として知られるパーソナルAIアシスタントMoltbotを、同社のサーバレスコンピューティングプラットフォームCloudflare Workers上で動作させるミドルウェア「Moltworker」を、GitHub上でオープンソースとして公開した。

gihyo.jp

狙われるSnap Store ―元CanonicalエンジニアリングマネージャがSnapユーザにマルウェアの注意喚起

人気の高いオープンソースプロダクトは悪質なサイバーセキュリティ攻撃のターゲットにもされやすい。

gihyo.jp

JetBrainsとZed、ACPレジストリを発表 ——GitHub Copilot CLIのACP対応もパブリックプレビューに

JetBrainsとZedは2026年1月28日、「ACPレジストリ（ACP Registry）」をベータ版として公開したことを発表した。

gihyo.jp

Google、ChromeのAI機能の大幅な強化を発表 ―Nano Bananaを統合、Geminiサイドパネル、アプリ連携、エージェントのような自動ブラウズも

Googleは2026年1月28日、Chromeの最新アップデートでGeminiによるAI機能を大幅に拡張することを発表した。

gihyo.jp

どれだけ知っている？ 用途別のAndroid

私たちが日頃接しているのは、スマホやタブレット向けのAndroidです。これ以外にも、用途別に最適化されたAndroidがいくつか存在するので、今回はそのバリエーションをご紹介します。3回目となる「どれだけ知っている？」ですが、どうぞお付き合いください。

gihyo.jp

GitHub、リポジトリページにAgentsタブを追加

GitHubは2025年1月26日、リポジトリのページに新しい「Agents」タブを追加した。これにより、リポジトリに関連するエージェントセッションを直接管理できるようになった。

gihyo.jp

OpenAI、科学論文執筆・共同作業のためのAI搭載LaTeX環境「Prism」を発表

OpenAIは2026年1月27日、科学研究の執筆と共同作業のためのAI搭載LaTeXワークスペース「Prism」を発表した。

gihyo.jp

第897回　GPUに画像の文字を解析させる⁠⁠、あるいはQwen3-VL入門

今回はllama.cppでQwen3-VLを動作させ、看板などの画像の文字を解析させる方法を紹介します。

gihyo.jp

不測の事態に備えて ― Linux 6.19-rc7にカーネル開発の継続性に関するドキュメントが追加

Linus Torvaldsは1月25日、次期Linuxカーネル「Linux 6.19」の7本目のリリース候補版（RC）となる「Linux 6.19-rc7」を公開した。

azukiazusa のテックブログ2

AI とインタラクティブな UI のやり取りを実現する MCP Apps

MCP Apps は MCP にインタラクティブな UI コンポーネントを返す方法を標準化した拡張機能です。この記事では MCP Apps を使用してインタラクティブな UI コンポーネントをエージェントが返す方法について試してみます。

gihyo.jp

オープンソースのマルチモーダルビジュアルモデルKimi K2.5リリース ―100のエージェントを並列実行する「Agent Swarm」もプレビューリリース

中国Moonshot AIは2026年1月27日、同社の最も強力なオープンソースモデルとなるKimi K2.5をリリースした。

gihyo.jp

AIとの会話にインタラクティブなUIを埋め込む「MCP Apps」オープンスタンダードとして公開

MCPプロジェクトは2026年1月26日、MCPツールを使ったAIとの会話内でインタラクティブなUIコンポーネントを返すことができる「MCP Apps」をMCP公式の拡張機能として公開した。

gihyo.jp

Pythonで始めるマルチエージェントAI ―CrewAI入門

今月の「Python Monthly Topics」では、CrewAIを紹介します。

gihyo.jp

知っているようで知らないCLAUDE.mdを深掘りする

今回は知っているようで知らない、Claude Codeの「CLAUDE.md」について深掘っていきます。

gihyo.jp

第263回　go-tpccを使ってMySQLの負荷テストをする

MySQLの負荷試験といえば、sysbenchがよく使われると思います。oltp_read_onlyやoltp_read_writeといったシナリオは準備が軽く、短時間でおおまかな性能傾向を掴むのに便利です。

JSer.info

2026-01-26のJS: jQuery 4.0.0、Rolldown 1.0 RC、Stylelint 17

JSer.info #762 - jQuery 4.0.0がリリースされました。 jQuery 4.0.0 | Official jQuery Blog jQueryの20周年を記念するメジャーリリースです。IE10以下やEdge Legacy、古いiOS/Android Browserのサポートを終了しています。jQuery.isArray/jQuery.trim/jQuery.parseJSONなどの非推奨APIを削除し、ソースコードをAMDからESモジュールに移行しています。また、Trusted TypesとCSPのサポートを改善し、slim版からDeferredsとCallbacksを削除してファイルサイズを削減しています。IE11のサポートはjQuery 5.0で終了予定です。 Rolldown 1.0 RCがリリースされました。 Announcing Rolldown 1.0 RC | VoidZero RolldownはRustで書かれたJavaScript/TypeScriptバンドラーです。Rollupプラグインとの互換性を持ち、既存のRollupベースのプロジェクトからの移行を容易にしています。Vite 8ではデフォルトのバンドラーとしてRolldownが利用される予定です。 Stylelint 17.0.0がリリースされました。 Release 17.0.0 · stylelint/stylelint stylelint/docs/migration-guide/to-17.md at main · stylelint/stylelint Stylelint v17 の主な変更点：ESM 移行と CSS Nesting 対応など Node.js 20.19.0未満のサポートを終了し、CommonJSでのNode.js APIのサポートを削除しています。デフォルトのfixモードがstrictに変更され、CSS Nesting対応も改善されています。 JSer.infoをサポートするには 😘 知り合いにJSer.infoをおすすめする ❤️ GitHub Sponsorsで@azuのスポンサーになる 🐦 X(Twitter)で@jser_infoをフォローする JSer.info Sponsors JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。 ヘッドライン jasmine/release_notes/6.0.0.md at main · jasmine/jasmine github.com/jasmine/jasmine/blob/main/release_notes/6.0.0.md JavaScript testing library ReleaseNote jasmine Jasmine 6.0.0リリース。 jasmine.pp()としてpretty printer APIを公開、実験的なsafariYieldStrategy: "time"オプションの追加など。 Experimental build mode for Hono and Express projects - Vercel vercel.com/changelog/experimental-build-mode-hono-express vercel Hono express TypeScript news VercelがHonoとExpressプロジェクト向けの実験的なビルドモードを追加。 VERCEL_EXPERIMENTAL_BACKENDS=1を環境変数に設定することで有効化でき、ログのルート別フィルターに対応。 jQuery 4.0.0 | Official jQuery Blog blog.jquery.com/2026/01/17/jquery-4-0-0/ jQuery ReleaseNote library jQuery 4.0.0リリース。 jQuery.isArray/jQuery.trim/jQuery.parseJSONなどの非推奨APIを削除。 jQuery.prototypeからpush/sort/spliceメソッドを削除。 Node.js — Node.js 25.4.0 (Current) nodejs.org/en/blog/release/v25.4.0 nodejs ReleaseNote Node v25.4.0リリース。 require(esm)/モジュールコンパイルキャッシュ/v8.queryObjects()/--heapsnapshot-near-heap-limitがStableに変更。 http.setGlobalProxyFromEnv()でグローバルプロキシを環境変数から設定する機能を追加。 util.convertProcessSignalToExitCode()、subpath importsで#/から始まるパスの利用をサポート。 Nuxt 4.3 · Nuxt Blog nuxt.com/blog/v4-3 Vue library ReleaseNote Nuxt v4.3リリース。 appLayoutプロパティの追加、ISR/SWRでのPayload Extractionのサポート。 Announcing Rolldown 1.0 RC | VoidZero voidzero.dev/posts/announcing-rolldown-rc Rust rollup bundler ReleaseNote Rolldown 1.0 RCリリース。 Release 17.0.0 · stylelint/stylelint github.com/stylelint/stylelint/releases/tag/17.0.0 CSS Tools ReleaseNote Stylelint 17.0.0リリース。 fixモードをstrictに変更。 stylelint/docs/migration-guide/to-17.md at main · stylelint/stylelint Stylelint v17 の主な変更点：ESM 移行と CSS Nesting 対応など アーティクル Roadmap 2026 | Biome biomejs.dev/blog/roadmap-2026/ biome article Biome 2026年のロードマップ。 ソフトウェア、ツール、ライブラリ関係 DoneDeal0/superdiff: Superdiff provides a rich and readable diff for both arrays and objects. It supports stream and file inputs for handling large datasets efficiently, is battle-tested, has zero dependencies, and offer a top-tier performance. github.com/DoneDeal0/superdiff JavaScript library 配列やオブジェクトの差分を検出するJavaScriptライブラリ。 anomalyco/opentui: OpenTUI is a library for building terminal user interfaces (TUIs) github.com/anomalyco/opentui/tree/main terminal TypeScript Zig React UI library ReactやSolidJSを使ってターミナルUI（TUI）を構築するためのTypeScriptライブラリ。 Bun.FFIでZigを使ったレンダリングを行う。 dy/jz: Minimal JS subset compiling to WASM github.com/dy/jz JavaScript WebAssembly library JavaScriptのサブセット言語をWebAssemblyにコンパイルするコンパイラ。 dy/subscript: Expression parser / evaluator. dy/watr: wat to wasm compiler DavidHDev/vue-bits: An open source collection of animated, interactive & fully customizable Vue components for building stunning, memorable websites. github.com/DavidHDev/vue-bits Vue library UI animation Vueアプリケーション向けのアニメーション・インタラクティブなUIコンポーネントライブラリ。 DavidHDev/react-bits: An open source collection of animated, interactive & fully customizable React components for building memorable websites. 書籍関係 gibbok/typescript-book: The Concise TypeScript Book: A Concise Guide to Effective Development in TypeScript. Free and Open Source. github.com/gibbok/typescript-book TypeScript book TypeScriptの入門書。 Server-Side WebAssembly - Danilo Chiarlone www.manning.com/books/server-side-webassembly WebAssembly book server サーバサイドでのWebAssemblyについての書籍。 wasi:httpとかのProposalを書いてる人 Vanilla Web - Maximiliano Firtman www.manning.com/books/vanilla-web?a_aid=firtman&a_bid=14dcfdda&chan=mm_website JavaScript book web フレームワークを使わずにバニラなWeb標準技術だけでWebアプリを構築する方法についての書籍。 Vanilla Web Book 🆕 － firt.dev

gihyo.jp

「Claude in Excel」ベータ版としてリリース

Anthropicは2026年1月24日、Microsoft Excel上でClaudeのAIアシスタント機能を利用できる「Claude in Excel」をリサーチプレビュー用のベータ版としてリリースした。

gihyo.jp

Blenderの機能であるドライバーを使って、あるオブジェクトの動きを別のオブジェクトの動きに連動させてみよう

前々回の記事の中で少しだけ触れた「ドライバー」という機能について紹介していきます。

gihyo.jp

主要ブラウザに対応してほしい！2026最新Web技術25選

Misskeyの開発者目線から主要ブラウザに対応してほしい最新のWeb技術を25個厳選しました。

azukiazusa のテックブログ2

はじめての MoonBit

MoonBit は WebAssembly と JavaScript にコンパイル可能な新しいプログラミング言語です。Rust 風のシンタックスと関数型プログラミングの特徴を持ちながら、ガベージコレクションを採用しているという特徴があります。この記事では MoonBit の基本的な使い方をチュートリアル形式で紹介します。

azukiazusa のテックブログ2

新しいデザインツール Pencil を試してみた

Pencil は Figma のような使用感で UI デザインができるツールです。Pencil MCP サーバーを利用して双方向に AI コーディングツールと連携し、デザインからコードを書き出したり、プロンプトでデザインを生成したりすることができます。

blog.jxck.io

Web 技術年末試験 2025 講評 #web_exam2025

2025 年の Web 技術を振り返る試験として、「Web 技術年末試験 2025」を実施した。その問題と想定解答、平均点などを公開する。

gihyo.jp

GitHub、Copilot SDKをテクニカルプレビューとして発表 ——GitHub Copilot CLIも継続的にアップデートしていることを紹介

GitHubは2026年1月14日、GitHub Copilot SDKのテクニカルプレビュー版を公開した。そして1月22日に、このSDKを使うことで、GitHub Copilot CLIにおけるエージェント実行基盤「Copilot agentic core」を、任意のアプリケーションに組み込めるようになったことを発表した。

gihyo.jp

Microsoft、Windowsアプリ開発サイクルを効率化するコマンドラインツール「winapp CLI」をパブリックプレビューリリース

Microsoftは2026年1月22日、Windowsアプリケーション開発のライフサイクルを簡素化するコマンドラインツール「Windows App Development CLI（winapp CLI）」のパブリックプレビュー版を、MITライセンスのもとオープンソースとして公開した。

gihyo.jp

さようならHIPPI ―旧世代のスパコン向けインターコネクトがついにメインラインサポート終了へ

現在開発中の「Linux 6.19」は、作業が順調に進めば2月8日に正式版がリリースされる見込みだ。

gihyo.jp

Anthropic、Claudeの新しい“憲法”を公開

Anthropicは2026年1月22日、同社のAIモデルClaudeの守るべき行動規範となる“憲法”（constitution）を更新し、クリエイティブ・コモンズ（CC0）1.0ライセンスのもと、新たに公開した。

gihyo.jp

Stitch、リモートStitch MCPサーバーを発表 ——Reactコンポーネント化のためのエージェントスキルも公開

Google Labsが提供するStitchは2026年1月20日、各種コーディングエージェントからStitchに接続するための「Stitch MCP Server」のアーリーアクセス版を発表した。

gihyo.jp

Vercel、エージェントスキルのオープンディレクトリ「Skills.sh」を提供開始

Vercelは2026年1月21日、エージェントスキルを一覧で紹介し、ユーザーが見つけたり共有できるオープンなディレクトリ「Skills.sh」を公開した。

gihyo.jp

どれだけ知っている？ AndroidベースのOSたち

Androidは、Googleを主体としてオープンソースで開発が進められており、これをベースに、端末メーカは独自機能を付加して差別化を行なっています。また、Androidをベースにカスタムされたものや、フォークして開発され、独自OSへと進化しているものも存在しています。

gihyo.jp

Google Trends、「調べる」ページでGeminiを活用した検索語句の提案機能を追加

Googleは2026年1月14日、検索トレンド調査ツール「Google Trends」における「調べる」ページを刷新したことを発表した。これによって、インサイト（洞察）を発見しやすくなり、検索トレンドの分析を効率化できるようになるという。

gihyo.jp

第896回　UbuntuからQMK/VIA対応キーボードをカスタマイズする

近年では自作キーボードの流行もあり、QMK/VIAに対応したキーボードが増えてきました。今回はそんな中でも比較的リーズナブルなメカニカルキーボードであるKeychron C1 Pro 8Kを例に、Ubuntu上でQMK/VIA対応キーボードをカスタマイズする手順を紹介します。

gihyo.jp

GitLab Duo Agent Platformの一般提供開始 ―AIエージェントがソフトウェア開発サイクル全体をサポート

GitLabは2026年1月15日、エージェント型AIを使った開発プラットフォーム「GitLab Duo Agent Platform」の一般提供を開始した。

stin's Blog

Claude Code で Shiki のテーマを見比べられるサイトを作った (Jotai もあるよ)

Shiki というコードシンタックスハイライターライブラリがあります。 https://shiki.style/ Shiki は多くのテーマバリエーションを提供しています。それらを並べて見比べたいと思い、Claude Code に作ってもらいました。 https://y-hiraoka.github.io/shiki-...

azukiazusa のテックブログ2

TUI を構築するための Typescript ライブラリ OpenTUI

AI コーディングエージェントの普及により、ターミナルベースの TUI アプリケーションの需要が高まっています。OpenTUI は Typescript で TUI アプリケーションを簡単に構築できるライブラリです。この記事では OpenTUI の特徴と基本的な使い方を紹介します。

JSer.info

2026-01-17のJS: Node.js のセキュリティアップデート、Chrome 144、Firefox 147、Electron 40

JSer.info #761 - Node.js 20.20.0/22.22.0/24.13.0/25.3.0のセキュリティリリースが公開されました。 Node.js — Tuesday, January 13, 2026 Security Releases 8件の脆弱性が修正されています。主な修正として、Buffer.allocやTypedArrayが初期化されていないメモリを含む可能性があるRace Conditionの修正（CVE-2025-55131）、シンボリックリンクを使ったPermission Modelのバイパスの修正（CVE-2025-55130）、不正なHTTP/2 HEADERSフレームでサーバがクラッシュする問題の修正（CVE-2025-59465）が含まれています。 また、async_hooks有効時にスタックオーバーフローエラーがキャッチできない問題についても修正されています。 async_hooksはNext.jsやDatadogなどのAPMツールなどで広く利用されています。 Node.js — Mitigating Denial-of-Service Vulnerability from Unrecoverable Stack Space Exhaustion for React, Next.js, and APM Users Chrome 144がリリースされました。 Chrome 144 | Release notes | Chrome for Developers CSSの::search-textでページ内検索のスタイリングをサポート、@scroll-state: scrolledをサポート、View TransitionsのwaitUntil()の追加などのCSS関連の機能が追加されています。また、<geolocation>要素の追加、Temporal APIのサポート、clipboardchangeイベントの追加などのWeb API関連の更新が含まれています。 Firefox 147がリリースされました。 Firefox 147.0, See All New Features, Updates and Fixes Apple SiliconデバイスでWebGPUがデフォルトで有効化されました。また、Navigation API、CSS anchor positioning、CSS Module Scriptsのサポートが追加されています。CompressionStream/DecompressionStreamがBrotliをサポートし、Service Workerでtype: moduleがサポートされるようになりました。 Firefox 147 release notes for developers (Stable) - Mozilla | MDN お知らせ 2026年1月16日でJSer.infoは15周年を迎えました。 JSer.info 15周年: 15年間のJavaScriptを振り返る - JSer.info JSer.infoをサポートするには 😘 知り合いにJSer.infoをおすすめする ❤️ GitHub Sponsorsで@azuのスポンサーになる 🐦 X(Twitter)で@jser_infoをフォローする JSer.info Sponsors JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。 ヘッドライン ESLint v10.0.0-rc.0 released - ESLint - Pluggable JavaScript Linter eslint.org/blog/2026/01/eslint-v10.0.0-rc.0-released/ ESLint ReleaseNote ESLint v10.0.0 RC.0リリース。 RuleTesterの改善、max-paramsルールにcountThisオプションを追加 Release 3.0.0-rc1 · qunitjs/qunit github.com/qunitjs/qunit/releases/tag/3.0.0-rc1 JavaScript library ReleaseNote test QUnit 3.0.0-rc1リリース。 assert.expect()からassert.step()を除外する変更。 Alpha release of moon v2 now available! | moonrepo moonrepo.dev/blog/moon-v2-alpha JavaScript Tools ReleaseNote moon v2 αリリース。 Release @pandacss/[email protected] · chakra-ui/panda github.com/chakra-ui/panda/releases/tag/%40pandacss%2Fdev%401.8.0 css library ReleaseNote MCP Panda CSS 1.8.0リリース。 panda init-mcpでMCPサーバの設定ができるように MCP Server | Panda CSS - Panda CSS Bun v1.3.6 | Bun Blog bun.com/blog/bun-v1.3.6 Bun v1.3.6リリース。 Bun.Archive API、コメント付きJSONを扱うBun.JSONC APIの追加。 Bun.build()にesbuild互換のmetafileオプションを追加。 Node.js — Tuesday, January 13, 2026 Security Releases nodejs.org/en/blog/vulnerability/december-2025-security-releases nodejs security ReleaseNote Node.js 20.20.0/22.22.0/24.13.0/25.3.0のセキュリティリリース。 Buffer.allocやTypedArrayが初期化されていないメモリを含む可能性があるRace Conditionの修正（CVE-2025-55131）。 async_hooks有効時にスタックオーバーフローエラーがキャッチできない問題、TLSクライアント証明書処理のメモリリークなども修正されている。 Node.js — Mitigating Denial-of-Service Vulnerability from Unrecoverable Stack Space Exhaustion for React, Next.js, and APM Users Chrome 144  |  Release notes  |  Chrome for Developers developer.chrome.com/release-notes/144 Chrome ReleaseNote Chrome 144リリース。 ::search-textでページ内検索のスタイリングをサポート、@scroll-state: scrolledをサポート、View TransitionsのwaitUntil()を追加。 <geolocation>要素の追加、Temporal APIのサポート、clipboardchangeイベントの追加。 subgroup_id機能の追加。 New in Chrome 144  |  Blog  |  Chrome for Developers Copilot SDK in technical preview - GitHub Changelog github.blog/changelog/2026-01-14-copilot-sdk-in-technical-preview/ AI nodejs python golang .net library GitHub Copilot SDKがテクニカルプレビューとして公開された。 Firefox 147.0, See All New Features, Updates and Fixes www.firefox.com/en-US/firefox/147.0/releasenotes/ Firefox ReleaseNote Firefox 147リリース。 q値を他のブラウザに合わせて調整。 CompressionStream/DecompressionStreamがBrotliをサポート、Servie Workerでtype: moduleをサポートなど Firefox 147 release notes for developers (Stable) - Mozilla | MDN Prettier 3.8: Support for Angular v21.1 · Prettier prettier.io/blog/2026/01/14/3.8.0 JavaScript Tools ReleaseNote Prettier 3.8リリース。 @switchブロック内の連続した@caseステートメント、配列/オブジェクト/関数呼び出しでのSpread要素をサポート。 Electron 40.0.0 | Electron www.electronjs.org/blog/electron-40-0 Electron ReleaseNote Electron 40.0.0リリース。 app.isHardwareAccelerationEnabled()メソッドの追加、オフスクリーン描画でのHDRカラースペースの対応など。 Astro is joining Cloudflare blog.cloudflare.com/astro-joins-cloudflare/ astro cloudflare news Astro Technology CompanyがCloudflareに買収された。 アーティクル Node.js — Mitigating Denial-of-Service Vulnerability from Unrecoverable Stack Space Exhaustion for React, Next.js, and APM Users nodejs.org/en/blog/vulnerability/january-2026-dos-mitigation-async-hooks nodejs security article Node.jsのasync_hooksにスタックオーバーフローの問題があったことについて。 AsyncLocalStorageはNext.jsやDatadogなど多くのフレームワークやツールで利用されているため、影響範囲が広くなっている。 Streaming JSON in just 200 lines of JavaScript krasimirtsonev.com/blog/article/streaming-json-in-just-200-lines-of-javascript JavaScript article JSON JSONをストリーミングする方法についての記事。 Transfer-Encoding: chunkedを使ってデータを段階的に送信する。 Introducing: React Best Practices - Vercel vercel.com/blog/introducing-react-best-practices AI article React JavaScript Vercelが10年以上のReact・Next.js最適化の知見をまとめたreact-best-practicesというリポジトリを公開した。 agent-skills/skills/react-best-practices at main · vercel-labs/agent-skills サイト、サービス、ドキュメント VibiumDev/vibium: Browser automation for AI agents and humans github.com/VibiumDev/vibium Selenium MCP Tools Selenium BiDiベースのブラウザ操作をするMCPサーバ coder/ghostty-web: Ghostty for the web with xterm.js API compatibility github.com/coder/ghostty-web?tab=readme-ov-file WebAssembly library terminal JavaScript ブラウザ上で動作するターミナルエミュレータライブラリ。 libghosttyをWasmにコンパイルして利用し、xterm.js互換のAPIを提供する。 ソフトウェア、ツール、ライブラリ関係 MotiaDev/motia: Multi-Language Backend Framework that unifies APIs, background jobs, queues, workflows, streams, and AI agents with a single core primitive with built-in observability and state management. github.com/MotiaDev/motia nodejs library Stepという単位で処理を書いていくバックエンドフレームワーク。 vercel-labs/agent-browser: Browser automation CLI for AI agents github.com/vercel-labs/agent-browser browser console Tools AI AIエージェント向けのヘッドレスブラウザ自動化CLI。 RustのCLIとNode.jsデーモン（Playwrightを利用）で構成され、クライアント・デーモン構造で動作する。 アクセシビリティツリーからAI向けに最適化されたスナップショットを取得する機能や、ARIAロールやラベルでの要素検出、WebSocketでのブラウザビューポートのストリーミングなどを提供する。

gihyo.jp

OpenAI、Responses APIを基盤としたオープンソース仕様「Open Responses」を公開

OpenAIは2026年1月15日、Responses APIを基盤とした、マルチプロバイダー対応かつ相互運用可能なLLMインターフェース構築のためのオープンソース仕様「Open Responses」を公開した。

gihyo.jp

GitHub、Copilot Memoryをパブリックプレビューで提供開始 ——すべてのGitHub Copilot有料プランで有効可能に

GitHubは2026年1月15日、GitHub Copilotの全有料プランを対象に、エージェント用のメモリ機能「Copilot Memory」のパブリックプレビューを開始した。

gihyo.jp

Google、Gemma 3ベース、55言語を網羅したオープンな翻訳モデルTranslateGemmaをリリース

Googleは2026年1月15日、Gemma 3ベースの翻訳モデル「TranslateGemma」を、Apache 2.0ライセンスのもとオープンソースとしてリリースした。

gihyo.jp

CES 2026 Lenovoキーノートで見た、Sphere“イマーシブ演出”の進化

CESは世界最大規模のハイテク展示会の1つで、毎年1月の第2週ごろにラスベガスで開催されています。米国時間2026年1月6日に今年も開幕し、Sphereを使った「イマーシブな（没入感のある）スピーチ」の体験レポートとしてまとめました。

JSer.info

JSer.info 15周年: 15年間のJavaScriptを振り返る

2011年1月16日に開始したJSer.infoは、2026年1月16日で15周年を迎えました🎉 JSer.infoは15年間で820件の記事を公開し、13,606件のサイト/記事/ライブラリを紹介してきました。週1回の更新を15年間継続しています。 この記事では、15年間のJSer.infoのデータを振り返りながら、JavaScriptエコシステムがどのように変化してきたかを見ていきます。 なお、この記事のデータはJSer.infoで紹介した記事の傾向であり、JavaScriptエコシステム全体を示すものではありません。 15年間の基本統計 項目 数値 総投稿数 820回 総紹介記事数 13,606件 運営期間 2011年1月〜2026年1月（15年間） 平均更新頻度 週1回 年別の紹介記事数を見ると、2013年の1,269件をピークに、近年は600〜700件程度で推移しています。一方で、1記事あたりの紹介文の長さは15年間で約2倍に増加しており、「量より質」へとスタイルが変化しています。 年 紹介記事数 投稿数 1投稿あたり 紹介文の平均文字数 2011 915 65 14.1件 62文字 2013 1,269 57 22.3件 58文字 2017 1,068 54 19.8件 79文字 2019 790 53 14.9件 90文字 2021 789 53 14.9件 101文字 2025 552 41 13.5件 108文字 あと、2025年は投稿ペースが少し落ちているため投稿数が減っています。 情報源の変化: 個人ブログから公式ドキュメントへ 15年間で最も大きな変化は、情報源の構成です。 初期（2011-2013年）の主な情報源 github.com (327件) d.hatena.ne.jp (154件) slideshare.net (147件) amazon.co.jp (98件) amazon.com (83件) 中期（2017-2019年）の主な情報源 github.com (828件) medium.com (134件) developers.google.com (103件) webkit.org (69件) nodejs.org (64件) 後期（2023-2025年）の主な情報源 github.com (568件) nodejs.org (98件) bun.sh (62件) zenn.dev (56件) developer.chrome.com (55件) GitHubが一貫して最大の情報源であることは変わりませんが、その周辺が大きく変化しています。 初期にははてなダイアリーやSlideShare、Amazon（書籍） が上位でした。個人ブログや勉強会のスライド、書籍が主要な情報源だった時代です。 中期にはMediumが多くなり、ブラウザベンダーの公式ドキュメント/ブログ（developers.google.comやwebkit.orgなど）が上位に入りました。個人ブログのプラットフォームがはてなからMediumに移行し、同時にブラウザベンダーからの一次情報が重要視され始めた時期です。 後期では公式ドキュメント/ブログ（nodejs.org、developer.chrome.com、bun.sh）や zenn.dev が上位に入っています。Mediumは姿を消し、一次情報源への直接アクセスが増えました。 コンテンツタイプの変化 種類 2011-2013 2014-2016 2017-2019 2020-2022 2023-2025 リリースノート 560 750 862 937 986 解説記事 719 692 813 617 526 ライブラリ/ツール 371 599 446 397 191 スライド/動画 292 309 170 60 49 書籍関連 192 203 135 73 45 チュートリアル 97 154 93 33 14 リリースノートは一貫して増加し続けています。一方、スライド/動画、書籍、チュートリアルなどの学習コンテンツは減っています。これは公式ドキュメントが充実したりGitHubのリリースノートが情報発信の中心になり、勉強会のスライドや書籍の紹介が減ったことを反映しています。 日本語ブログプラットフォームの変遷 JSer.infoで紹介してきた日本語の技術ブログも、15年間でプラットフォームが大きく入れ替わりました。 年 はてな Qiita Zenn 2011 92 0 0 2014 29 19 0 2016 10 45 0 2020 3 4 3 2021 1 1 22 2024 2 1 24 はてなダイアリー/はてなブログ → Qiita → Zenn という流れで紹介記事のプラットフォームが変化しています。 ただし、全体として日本語ソースの割合は徐々に減り、5%前後で安定しています。 年 日本語ソース 合計 割合 2011 203 915 22.2% 2012 194 1126 17.2% 2013 150 1269 11.8% 2014 114 1147 9.9% 2015 80 1043 7.7% 2016 93 1078 8.6% 2017 67 1068 6.3% 2018 64 921 6.9% 2019 26 790 3.3% 2020 25 810 3.1% 2021 43 789 5.4% 2022 33 712 4.6% 2023 42 737 5.7% 2024 44 638 6.9% 2025 26 552 4.7% これはJSer.infoが意図的に日本語を避けているわけではなく、JavaScriptの一次情報源がほぼ英語であることの反映です。ブラウザベンダー、公式サイト/プロジェクト、主要なライブラリのメンテナーはほとんどが英語で情報発信しています。 技術トレンドの変遷 UIフレームワーク: jQuery → Angular → React 年 jQuery Angular React Vue 2011 109 1 0 0 2013 86 44 6 0 2014 35 49 52 11 2015 29 30 103 10 2017 7 34 153 28 2019 9 9 84 20 2021 8 6 84 23 2025 1 4 82 4 2011年はjQueryが一番多く、2013年/2014年頃からAngular/React/Vueが増え、2015年にはReactが多く増えました。2017年にReactは153件でピークを迎え、その後は安定期に入っています。 2025年ではReactの件数がピーク時の半分程度になっていますが、これはReact自体が成熟し、毎週取り上げるような新しいニュースが減ったことを示しています。 ビルドツール: webpack → Vite 年 webpack Rollup esbuild Vite 2016 33 2 0 0 2017 43 8 0 0 2020 26 7 5 1 2022 11 3 9 28 2023 13 10 16 36 2025 8 2 6 23 webpackは2017年が一番多く、2020年までは話題が多かったです。 JSer.infoでも、esbuildの登場以降はRustやGoで書かれたツールの紹介が増えました。「JavaScriptのツールはJavaScriptで書く」という前提が変わり、パフォーマンスへの期待値が変化したことを反映しています。 ランタイム: Node.js一強から多様化へ 年 Deno Bun 2020 13 0 2021 21 1 2022 21 5 2023 19 27 2024 18 26 2020年にDeno 1.0がリリースされ、2022年にBunが登場。Node.js一強の時代から、複数のランタイムが競争する時代に移行しました。 特にBunは2023年の1.0リリース以降も定期的なリリースをしているため、JSer.infoでも多く紹介しています。 JSer.infoでの言及が変化した技術 15年間で言及がなくなった技術（2011-2013 → 2023-2025） 技術 初期 後期 Backbone.js 75 0 CoffeeScript 71 0 AMD/RequireJS 74 3 Grunt 49 0 PhantomJS 37 0 Bower 13 0 これらの技術は当時よく使われていましたが、今ではJSer.infoで取り上げられることはなくなりました。 Backbone.jsとCoffeeScriptは2011-2012年頃によく紹介されていました。AMDとRequireJSはモジュールシステムの先駆けでしたが、ES Modulesの標準化により役目を終えました。Grunt/Gulpはnpm scriptsやビルドツールに置き換わり、PhantomJSはPuppeteer/Playwrightに取って代わられました。 15年間で言及が増えた技術 技術 初期 後期 ESM/import 2 117 Rust 1 40 WebAssembly 0 51 monorepo 0 14 ECMAScript Modulesは2015年のES2015で仕様化されましたが、ブラウザとNode.jsの両方で実用的に使えるようになったのは2020年以降です。 Rustへの言及は、SWC/Rspack/Biome/OxCなどのツールチェーンに関連しています。JavaScriptのエコシステムにおいて、パフォーマンスクリティカルな部分はRustやGoで書かれることが増えました。 TypeScriptコンパイラ自体もGoで書き直すことが発表されています。 WebAssemblyは2015年に発表された技術で、JSer.infoでも2017年頃から言及が増えています。monorepoの概念自体は古くからありますが、JavaScriptエコシステムで注目されるようになったのは、Lerna（2016年）やnpm/yarn workspaces以降です。 横断的トピックの変化 フレームワークに依存しない、技術横断的なトピックの推移も見ていきます。 年 型 テスト パフォーマンス セキュリティ a11y 2011 30 46 27 10 6 2014 52 87 58 14 9 2017 108 86 93 15 15 2020 123 44 80 13 16 2021 129 59 64 28 17 2025 88 47 42 15 23 型（TypeScript） への言及は2021年にピーク（129件）を迎え、その後は減少傾向です。TypeScriptが「当たり前」になり、「TypeScriptを使う」こと自体がニュースになりにくくなったためと考えられます。 テスト への言及は2014年にピーク（87件）を迎えました。Jasmine、Mocha、Karmaなど多くのテストフレームワークが競っていた時期で、JSer.infoでも頻繁に取り上げていました。現在はJest、Vitest、Playwrightなどに収束しています。 パフォーマンス への言及は2017年にピーク（93件）。webpackの最適化やTree Shaking、コード分割などをJSer.infoでも多く紹介していた時期です。 a11y（アクセシビリティ） は、一貫して増加傾向にあるトピックです。6件から23件へ、約4倍に増加しています。 情報ソースの種類の変化 紹介記事のソースを「公式（プロジェクト/ドキュメント）」「GitHub」「個人ブログ」に分類しました。 ソース 2011-2013 2014-2016 2017-2019 2020-2022 2023-2025 公式 204 294 467 471 479 GitHub 506 1,015 910 903 596 個人ブログ 213 194 141 76 70 公式: nodejs.org, webkit.org, reactjs.org, eslint.org など公式サイト/ドキュメント GitHub: github.com, github.io 個人ブログ: はてな, Qiita, Zenn, medium.com/@個人 など 比較してみると、2011-2013年は個人ブログと公式がほぼ同数（213 vs 204）でしたが、2023-2025年には公式ブログ/ドキュメントが個人ブログの約7倍（479 vs 70）になっています。公式ドキュメントやプロジェクトサイトでの情報発信が充実したことで、JSer.infoで紹介する情報源も公式サイトが中心になりました。 開発プラクティスの変化 開発手法に関するトピックも変化しています。 プラクティス 2011-2013 2017-2019 2023-2025 CI/CD 31 56 67 Migration/移行 10 32 56 RFC/Proposal 2 73 45 Breaking Change 3 15 17 RFC/Proposal への言及が増えているのは、ECMAScriptがES2015でStage制を導入したことで、Proposalとして紹介することが増えた点や、ライブラリ/フレームワークがRFCプロセスを採用するケースが増えたことを反映しています。 Migration（移行） への言及が増えているのは、エコシステムの成熟を示しています。新しい技術への移行、メジャーバージョンアップ、レガシーコードの刷新など、「既存のコードベースをどう更新するか」が重要なテーマになりました。 15年間の変化の総括 JSer.infoの15年間のデータから見えてくる変化をまとめます。 JSer.info自体の変化 15年間でJSer.info自体も変化してきました。 技術的な変化 2014年: TumblrからGitHub Pagesに移行 2015年: Realtime JSer.info公開 2016年: HTTPS化、Ping機能追加 2021年: JSer.info Policy公開 2023年: JSer.info Watch List公開 2025年: MCP執筆補助、AIによるヘッドライン生成を導入 運用面の変化 週1更新を15年間継続 GitHub上で完結するワークフローの構築 自動カテゴライズ、自動タグ付け、ヘッドライン生成の導入 postemを使った記事投稿 韓国語版の翻訳（@uyeong さん、@rewrite0w0 さん、@Serzhul さんに感謝） 「交換可能にする」という目標のその後 JSer.info 11周年 で「2025年までに交換可能にする」という目標を掲げました。完全な交換可能は達成していませんが、AIの活用によって更新フローは大きく変化しました。 JSer.infoの更新フロー 2025年 - YAPC::Fukuoka 2025での発表資料 より JSer.infoについてでは「更新のために私への負荷をできる限り減らしスムーズに行えることが継続への鍵」と書いていました。現在のJSer.infoでは、情報収集からPR作成、タグ付け、グループ分け、ヘッドライン生成まで、多くの部分が自動化されています。人間が注力するのは情報の判断にある部分だけになってきています。つまり、何を紹介し、どう伝えるかという部分です。 詳細は YAPC::Fukuoka 2025での発表 を参照してください。 2025年の更新頻度について 2025年は更新頻度が少し下がっています。個人のブックマーク（情報収集の入力）を分析したところ、原因はある程度わかってきています。 年 ブックマーク数 投稿数 投稿間隔 2021 2,862 53 6.9日 2023 2,373 53 6.9日 2025 1,033 41 8.9日 ブックマーク数（入力）が2021年をピークに64%減少しています。一方で、ブックマークから記事となるケースが2倍以上に向上しています。2021年は4件ブックマークして1件掲載だったのが、2025年は2件ブックマークして1件掲載になっています。その結果、入力が64%減少しても、投稿数は23%減に抑えられています。 減少の原因としては、記事は読んでいるものの、ブックマーク時に説明文を書くスタイルのため、その負荷で取りこぼしている可能性が高いと考えています。 postemなどのツールにClaude連携などのブックマーク補助機能を追加しているので、改善していくと考えています。 また、最近はRSSリーダを作っているので、RSSから情報収集して判断して公開するというJSer.infoの情報システム全体が自分で書いたもので回せるようになります。 JSer.infoの情報システム全体の大まかな流れ: RSSフィード → 収集 → 判断 → 公開 YAPC::Fukuoka 2025での発表資料 これによって、今まで摩擦があった部分も技術的に取り除きやすくなる気がしています。 おわりに JSer.infoは2011年1月16日に開始し、15年が経ちました。 15年前、JavaScriptはjQuery（jQueryは2026年1月14日に20周年！）とBackbone.js/CoffeeScriptの時代でした。今ではReact、TypeScript、Viteが多く紹介されるようになり、Node.js以外のランタイムも選択肢として選べるようになりました。 JSer.infoで紹介する情報源も変わりました。勉強会のスライドや書籍から、公式ドキュメントやGitHubのリリースノートが中心になってきています。 変化し続けるJavaScriptのエコシステムにおいて、JSer.infoが「JavaScriptの情報を整理して正確に伝える」役割を果たせていれば幸いです。 この記事やJSer.infoに関する意見や感想などは、次の場所に書いてください。 X/Twitter: #jserinfo JSer.info Slack 15年間読んでくれている方、サポートしてくれている方、ありがとうございます！ JSer.info Sponsors JSer.infoをGitHub Sponsorsで支援してくれている方々に感謝します。 サイボウズ株式会社さんに感謝します。 JSer.infoをサポートするには 😘 知り合いにJSer.infoをおすすめする ❤️ GitHub Sponsorsで@azuのスポンサーになる 🐦 X(Twitter)で@jser_infoをフォローする JSer.info Sponsors JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。 関連リンク この記事を書くのに使ったJSer.infoのデータセットはjser/datasetで公開しています。 jser/jser.github.io#1343で公開しています。 DuckDBで直接JSer.infoのデータセットを読み込んで、横断的トピックの年別集計を行うクエリの例。 duckdb -c " SELECT YEAR(CAST(date AS TIMESTAMP)) as year, SUM(CASE WHEN LOWER(content) LIKE '%security%' OR LOWER(content) LIKE '%セキュリティ%' OR LOWER(content) LIKE '%脆弱性%' THEN 1 ELSE 0 END) as security, SUM(CASE WHEN LOWER(content) LIKE '%performance%' OR LOWER(content) LIKE '%パフォーマンス%' OR LOWER(content) LIKE '%高速化%' THEN 1 ELSE 0 END) as performance, SUM(CASE WHEN LOWER(content) LIKE '%accessib%' OR LOWER(content) LIKE '%a11y%' OR LOWER(content) LIKE '%アクセシビリティ%' THEN 1 ELSE 0 END) as a11y, SUM(CASE WHEN LOWER(content) LIKE '%test%' OR LOWER(content) LIKE '%テスト%' THEN 1 ELSE 0 END) as testing, SUM(CASE WHEN LOWER(content) LIKE '%型%' OR LOWER(content) LIKE '%type%' THEN 1 ELSE 0 END) as typing FROM read_json_auto('https://jser.info/source-data/items.json', ignore_errors=true) GROUP BY year ORDER BY year; " ┌───────┬──────────┬─────────────┬────────┬─────────┬────────┐ │ year │ security │ performance │ a11y │ testing │ typing │ │ int64 │ int128 │ int128 │ int128 │ int128 │ int128 │ ├───────┼──────────┼─────────────┼────────┼─────────┼────────┤ │ 2010 │ 0 │ 0 │ 0 │ 0 │ 0 │ │ 2011 │ 6 │ 19 │ 3 │ 34 │ 29 │ │ 2012 │ 7 │ 31 │ 2 │ 98 │ 43 │ │ 2013 │ 11 │ 28 │ 7 │ 118 │ 69 │ │ 2014 │ 6 │ 39 │ 4 │ 82 │ 52 │ │ 2015 │ 9 │ 20 │ 8 │ 66 │ 72 │ │ 2016 │ 10 │ 39 │ 22 │ 60 │ 75 │ │ 2017 │ 13 │ 69 │ 5 │ 72 │ 104 │ │ 2018 │ 11 │ 68 │ 14 │ 50 │ 90 │ │ 2019 │ 20 │ 54 │ 14 │ 55 │ 103 │ │ 2020 │ 11 │ 65 │ 9 │ 34 │ 117 │ │ 2021 │ 23 │ 54 │ 8 │ 39 │ 124 │ │ 2022 │ 18 │ 39 │ 7 │ 57 │ 114 │ │ 2023 │ 13 │ 66 │ 6 │ 57 │ 111 │ │ 2024 │ 12 │ 36 │ 9 │ 46 │ 90 │ │ 2025 │ 14 │ 30 │ 9 │ 34 │ 86 │ │ 2026 │ 2 │ 4 │ 1 │ 2 │ 5 │ ├───────┴──────────┴─────────────┴────────┴─────────┴────────┤ │ 17 rows 6 columns │ └────────────────────────────────────────────────────────────┘ JSer.info 10周年: JavaScript情報の集め方、書き方、まとめ方 JSer.info 11周年: 目標は2025年までに交換可能にする JSer.info 12周年です JSer.info 13周年: JavaScriptの情報源を整理する JSer.info 14周年

gihyo.jp

Vercel、Reactのベストプラクティスをエージェントスキルとして公開

Vercelは2026年1月14日、同社が10年以上にわたって蓄積したReactによる開発のベストプラクティスを、エージェントスキルとしてGiHub上で公開した。

gihyo.jp

Firefox 147リリース、CSS anchor positioningをサポートし、主要ブラウザすべてで対応に

2026年1月13日、Firefox バージョン147がリリースされた。CSS anchor-positioningのサポートが追加されたことで、主要なブラウザすべてで対応したことになる。

gihyo.jp

今後のDevSecOpsの動向：「一人チーム」による管理領域の拡大

AIは、個々のエンジニアに前例のない影響力をもたらしています。かつてはチーム全体でなければ実現できなかったことを、いまや一人のエンジニアが成し遂げられるようになりつつあります。しかし、ここには見落とされがちなパラドックスがあります。

gihyo.jp

どれだけ知っている？ Androidのアップデート種類

Androidのアップデートには、いくつかの種類があります。アップデートを促す表示がされたら、素直に従う運用でも十分です。しかし、何のために行われているか知っていると意味が違って見えてくるので、今回は少し趣向を変えてアップデートの種類をまとめてみます。

gihyo.jp

第60回　Linuxカーネルのコンテナ機能 ―cgroup v2から使うメモリコントローラ（5）

最近は、Linuxカーネルに実装されるコンテナ関連の機能が高度になり、機能を調べて理解するのが難しくなってきました。

gihyo.jp

第895回　MicroCephで作る、ご家庭向け高可用性分散ストレージ

Cephは非常に便利な分散ストレージですが、分散システム特有の面倒くささもあります。そこでお勧めしたいのが、MicroCephです。MicroCephとは、Canonicalが開発しているCephのオーケストレーションツールです。

gihyo.jp

Claude CodeのAI機能をデスクトップ作業に活用できる「Cowork」、リサーチプレビュー版で提供開始

Anthropicは2026年1月12日、Claude CodeのAI機能を開発以外のさまざまなコンピュータ上の作業に活用できる新サービス「Cowork」を、リサーチプレビューとして提供開始した。

gihyo.jp

Apple、GoogleとAIで提携、将来のApple Intelligence基盤としてGeminiを採用

2026年1月12日、AppleとGoogleは共同声明を発表し、AIに関して複数年の協業契約を締結したことを明らかにした。

gihyo.jp

第262回　MySQLのInnoDBにおけるCheckpointの役割とパフォーマンス最適化を理解する

MySQLのストーレージエンジンであるInnoDBは、高い耐障害性とパフォーマンスを両立するために、バッファプールとredo logを用いた遅延書き込みアーキテクチャを採用しています。その中心にある仕組みが「Checkpoint」です。

azukiazusa のテックブログ2

AI エージェントのために CLI でブラウザを操作する agent-browser

agent-browser は Vercel が開発した CLI でブラウザを操作するツールであり、AI エージェントにブラウザ操作能力を提供するために設計されています。この記事では agent-browser のインストール方法、基本的な使い方、AI エージェントからの利用方法について紹介します。

gihyo.jp

AI時代到来で新たな革新を起こし始めたBoston Dynamics――2026年は本格的なロボット・ショーとしてのCESの幕開けとなるか

筆者の年代にとってBoston Dynamicsは、長年「胸熱」な企業の1つでしょう。2025年末、そのBoston DynamicsがCES 2026のHyundaiのプレスカンファレンスに登壇すると知り、大変に興味を惹かれました。

azukiazusa のテックブログ2

Claude Code のステータスラインを TUI でカスタマイズできる ccstatusline

Claude Code のステータスラインは oh-my-zsh のターミナルプロンプトのようにカスタマイズ可能です。これにより現在のブランチやトークンの使用量などを一目で確認できるようになります。この記事では TUI で簡単にステータスラインをカスタマイズできる ccstatusline の使い方を紹介します。

gihyo.jp

Linus、「AIツールはただのツール」とあらためて強調

AIツールによるコーディング支援がひろく普及したことで、LinuxカーネルコミュニティでもAIツールが生成したコードをどう扱うべきかについての議論が続いている。

JSer.info

2026-01-08のJS: zod v4.3.0、Flint、pnpm in 2025

JSer.info #760 - zod v4.3.0がリリースされました。 Release v4.3.0 · colinhacks/zod JSONスキーマからZodスキーマに変換するz.fromJSONSchema()が追加されています。また、排他的論理和で型を定義するz.xor()、部分的なrecordバリデーションを行うz.looseRecord()、undefined値を許容しない.exactOptional()も追加されています。 .apply()メソッド、check()のaliasである.with()メソッド、ZodMapへのmin/max/nonempty/sizeメソッド、文字列をslugに変換するz.slugify()などが追加されています。 TypeScript-ESLintのメンテナーを中心に開発された実験的なハイブリッドリンターであるFlintが公開されました。 Introducing Flint | Flint What Flint Does Differently | Flint TypeScriptで書かれたコアとネイティブスピード（Go/Rust）のパーサーを組み合わせることで、パフォーマンスと開発者の親しみやすさの両立を目指しています。TypeScriptの型情報を常に利用し、クロスファイルキャッシュ、JSON/Markdown/YAMLの組み込みサポート、Prettierとの統合などの機能を採用しています。Lintはエラーのみを対象とし、インタラクティブなCLIやプラグインレジストリなども予定されています。 pnpmの2025年の振り返り記事が公開されました。 🚀 pnpm in 2025 | pnpm v10.0でライフサイクルスクリプトをデフォルトで無効化し、minimumReleaseAgeやtrustPolicy: no-downgradeなどのセキュリティ機能が追加されました。v10.12でGlobal Virtual Store、v10.9でJSRのネイティブサポート、v10.14/v10.21でdevEngines.runtimeによる自動ランタイム管理のサポートなど、2025年の主要な変更点がまとめられています。 JSer.infoをサポートするには 😘 知り合いにJSer.infoをおすすめする ❤️ GitHub Sponsorsで@azuのスポンサーになる 🐦 X(Twitter)で@jser_infoをフォローする JSer.info Sponsors JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。 ヘッドライン Release pnpm 10.27 · pnpm/pnpm github.com/pnpm/pnpm/releases/tag/v10.27.0 pnpm ReleaseNote pnpm v10.27.0リリース。 trustPolicy: no-downgradeの厳格性を緩和するために、公開から一定時間経ったものは対象外にするtrustPolicyIgnoreAfterオプションの追加など Release v4.3.0 · colinhacks/zod github.com/colinhacks/zod/releases/tag/v4.3.0 TypeScript JSON library ReleaseNote zod v4.3.0リリース。 z.fromJSONSchema()の追加、z.xor()を追加。 z.looseRecord()、undefined値を許容しない.exactOptional()を追加。 .apply()メソッドの追加、check()メソッドのaliasとして.with()メソッドを追加。 ZodMapにmin/max/nonempty/sizeメソッドを追加、z.slugify()変換を追加など Announcing Rspack 1.7 - Rspack rspack.rs/blog/announcing-1-7 rspack ReleaseNote Rspack 1.7リリース。 feat: add llms.txt endpoint for LLM-optimized documentation by quantizor · Pull Request #2388 · tailwindlabs/tailwindcss.com github.com/tailwindlabs/tailwindcss.com/pull/2388#issuecomment-3717222957 company css news Tailwindの開発元であるTailwind Labの収入が大きく減少したため、エンジニアリングチームの75%にあたる3名をレイオフしたという話 Adam's Morning Walk | We had six months left アーティクル Introducing Flint | Flint www.flint.fyi/blog/introducing-flint/ ESLint Tools article TypeScript-ESLintのメンテナー中心で書かれた実験的なハイブリッドリンター。 What Flint Does Differently | Flint Introducing CSS Grid Lanes | WebKit webkit.org/blog/17660/introducing-css-grid-lanes/ css article display: grid-lanesのGrid Lanesについて 🚀 pnpm in 2025 | pnpm pnpm.io/blog/2025/12/29/pnpm-in-2025 pnpm security article pnpmの2025年の振り返り記事。 minimumReleaseAgeやtrustPolicy: no-downgradeなどのセキュリティ機能の追加。 devEngines.runtimeによる自動ランタイム管理のサポートなど How to compile JavaScript to C with Static Hermes devongovett.me/blog/static-hermes.html JavaScript article Tools Static Hermesを使ってJavaScriptをC言語コードにコンパイルし、CのコードとしてRustから呼び出すという実装について Fixing TypeScript Performance Problems: A Case Study | Viget www.viget.com/articles/fixing-typescript-performance-problems TypeScript article TypeScriptのコンパイルパフォーマンスのデバッグ方法について Data Fetching Patterns in React Server Components gauravthakur.com/blog/data-fetching-patterns-react-server-components React article クライアントサイドレンダリング、サーバサイドレンダリング、React Server Componentのレンダリングにおける転送されるデータの違いについて可視化した記事 スライド、動画関係 vjeux/webcodecs-nodejs-10k-challenge: Let's get WebCodec to the server github.com/vjeux/webcodecs-nodejs-10k-challenge/ nodejs JavaScript video library Node.jsでWebCodecs APIを動かすWebCodecs Node.js 10k Challengeの結果が公開され、7つのプロジェクトが採用された。 書籍関係 jotaiによるReact再入門 zenn.dev/uhyo/books/learn-react-with-jotai React book Reactとjotaiについて

gihyo.jp

モダンになった「Pebble Round 2」と現代版Blackberry「Clicks Communicator」が発表されました

新年早々に発表されたPebble Round 2とClicks Communicator

gihyo.jp

AI時代の想像力を育むためのLEGOの挑戦 ――LEGO Press Conferenceより

今回はCES 2026の2日目、LEGO初のCES Press Conference。スピーチの細部やデモで示されたことを網羅的にまとめるのではなく、筆者が気になった点にフォーカスしてレポートしてみます。

gihyo.jp

第894回　デスクトップ環境の2025-2026年

新しい年の始めに、Ubuntuで使用できるさまざまなデスクトップ環境について2025年に起こったことと2026年に起こりそうなことを紹介します。

gihyo.jp

速報：注目無人ロボットタクシー「ZOOX」実車体験レポート

CESは世界最大規模のハイテク展示会の1つで、毎年1月の第2週ごろにラスベガスで開催されています。米国時間2026年1月6日に今年も開幕し、筆者にとっての2026年のCESは、まずこのZOOX体験から始まりました。

gihyo.jp

2026年のWebアクセシビリティ

あけましておめでとうございます。株式会社ミツエーリンクスの中村直樹です。昨年と同じく、2025年のWebアクセシビリティに関連する出来事を振り返りつつ、2026年のWebアクセシビリティの展望について俯瞰していきたいと思います。

azukiazusa のテックブログ2

1 つの Step で完結するバックエンドフレームワーク Motia を試してみた

Motia はバックエンド開発をシンプルにすることを目指したコードファーストのバックエンドフレームワークです。この記事では Motia を使用して簡単な TODO REST API を構築する方法を紹介します。

gihyo.jp

第125回　MySQLとPostgreSQLの2025年重大ニュース

あけましておめでとうございます。この連載はOSSコンソーシアム データベース部会のメンバーがオープンソースデータベースの毎月の出来事をお伝えしています。

gihyo.jp

特別編：Blenderで告知動画を作成してみる［後編］ 〜令和八年度版『キタミ式イラストIT塾』シリーズ発売記念

前編で紹介したモデルをもとに書籍の告知動画を作成する過程を見ていきます。特に、どのように動きをつけていったのかをかいつまんで紹介します。

stin's Blog

2026年の目標

あけましておめでとうございました。 2025年の振り返りと2026年の目標を立てていきましょう。 2025年の振り返り 2025年の目標は以下です。 https://blog.stin.ink/articles/new-years-resolutions-for-2025 技術ブログを 12 記事以上書く(媒体は問わな...

blog.jxck.io

Web の維持への寄付

Web は誰のものでもなく、誰でも無料で使える。しかし、その状態を維持するための費用が、かかっていないわけではない。そこで、Web を生業にしている筆者としては、Web が壊れないための「維持コスト」をほんの一部でも負担するという意図をもって、寄付を行っている。

azukiazusa のテックブログ2

Figma MCP でデザインシステムを提供して AI コーディングエージェントに一貫したフロントエンドコードを書かせる

AI コーディングエージェントにフロントエンドのコードを書かせる際、Figma MCP を使用してデザインコンテキストやデザイントークンを提供することで、一貫したデザインガイドラインを遵守させる方法を紹介します。

@sakupi01.com blog

2025 In Review

2025年の振り返り

azukiazusa のテックブログ2

Claude Code のツール検索ツールを有効にして MCP のトークン使用量を削減する

Claude Code のツール検索ツールを有効にすることで、MCP ツールの定義を事前にコンテキストウィンドウに読み込まず、必要に応じて動的にツールを検索・呼び出しできます。これにより、多数の MCP ツールをインストールしている場合でもトークン使用量を大幅に削減できる可能性があります。この記事では Claude Code のツール検索ツールの概要と使用方法を紹介します。

JSer.info

2025-12-30のJS: Next.js 16.1、Vue 3.6.0 beta 1、CSS Wrapped 2025

JSer.info #759 - Next.js 16.1がリリースされました。 Next.js 16.1 | Next.js TurbopackのFile System Cacheがnext devでも利用できるようになり、開発サーバー再起動時のコンパイル時間が短縮されています。また、Node.jsデバッガーを簡単に有効化できるnext dev --inspectコマンドや、バージョンアップグレードを補助するnext upgradeコマンドが追加されています。実験的機能としてBundle Analyzerが追加されています。 Vue 3.6.0 beta 1がリリースされました。 Release v3.6.0-beta.1 · vuejs/core Vapor Modeがベータ版として追加されています。Vapor Modeは仮想DOMを使わないコンパイル戦略で、バンドルサイズ削減とパフォーマンス向上を目的としています。また、@vue/reactivityがalien-signalsベースに大規模リファクタリングされ、Reactivityシステムのパフォーマンスとメモリ使用量が改善されています。 CSS Wrapped 2025という記事では、2025年のCSS機能が紹介されています。 CSS Wrapped 2025 Invoker Commands、<select>要素のカスタマイズ、scroll-state queriesなどの機能が紹介されています。条件分岐のif()関数やカスタム@function宣言などについてまとめられています。 JSer.infoをサポートするには 😘 知り合いにJSer.infoをおすすめする ❤️ GitHub Sponsorsで@azuのスポンサーになる 🐦 X(Twitter)で@jser_infoをフォローする JSer.info Sponsors JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。 ヘッドライン Security advisory storybook.js.org/blog/security-advisory/ storybook ReleaseNote security Storybookに.envがbundleされてしまう問題があったため、7.x/8.x/9.x/10.xにそれぞれアップデートが公開されている。 Next.js 16.1 | Next.js nextjs.org/blog/next-16-1 Next.js ReleaseNote Next.js 16.1リリース。 next devでも利用できるように、next dev --inspectを追加、next upgradeコマンドを追加。 Release v3.6.0-beta.1 · vuejs/core github.com/vuejs/core/releases/tag/v3.6.0-beta.1 Vue ReleaseNote Vue 3.6.0 Beta 1リリース。 アーティクル Standard JSON Schema standardschema.dev/json-schema JSON article JavaScript TypeScript Standard SchemaのJSON Schemaの対応について Introducing RSC Explorer — overreacted overreacted.io/introducing-rsc-explorer/ article RSC Explorerについて CSS Wrapped 2025 chrome.dev/css-wrapped-2025/ css article 2025年のCSSの機能の振り返り 第三者のJavaScriptをセキュアに実行するには？― exaBase Studio のプラグイン機能 zenn.dev/exwzd/articles/20251204_studio_plugin JavaScript article JavaScriptのコードをサンドボックスで実行するアプローチについて。 Fixing the URL params performance penalty - Web Performance Calendar calendar.perfplanet.com/2025/fixing-the-url-params-performance-penalty/ URL article SEO cdn URLパラメータをCDNがキャッシュしていいかを定義するNo-Vary-Search HTTPヘッダについて。 Third Parties and Single Points of Failure - Web Performance Calendar calendar.perfplanet.com/2025/third-parties-and-single-points-of-failure/ browser performance JavaScript article サードパーティスクリプトが単一障害点となっているかをチェックする方法について The many, many, many JavaScript runtimes of the last decade • Buttondown buttondown.com/whatever_jamie/archive/the-many-many-many-javascript-runtimes-of-the-last-decade/ JavaScript article history この10年で登場したJavaScriptランタイムについてまとめた記事 Node.jsのSingle Executable Applications (SEA) で作る、配布しやすいNode.js アプリ zenn.dev/yamachu/articles/abaad71eaa30fe nodejs article Node.jsのSEAで単一実行バイナリを作成する方法、Chrome拡張とNative Messaging Hostでメッセージングする方法について サイト、サービス、ドキュメント bellard/mquickjs: Public repository of the Micro QuickJS Javascript Engine github.com/bellard/mquickjs?tab=readme-ov-file JavaScript Tools library 組み込み向けのJavaScriptエンジン。 jiftechnify/eject-enum: Eject enums from your TypeScript codebase. github.com/jiftechnify/eject-enum TypeScript Tools TypeScriptのenumをconstに変換するツール TypeScriptコードから一撃でenumを「追放」するツールを作った

blog.jxck.io

2025 年を振り返る

例年通り 2025 年を振り返る。

gihyo.jp

Stitch、最新AIモデル搭載でデザイン機能を強化、「バイブデザイン」時代へ ——製品名由来の“複数画面を縫い合わせる”「プロトタイプ」機能を追加

Googleが提供するStitchはAIを活用したWebデザインツールです。この記事では、先月から今月にかけて追加された新機能を中心に改めてStitchについて紹介します。

gihyo.jp

2025年のLinux関連ニュースを振り返る

2025年もあと数日、年末らしくこの1年で起こったLinux界隈のあれこれをざっくりと振り返ってみたい。

azukiazusa のテックブログ2

2025 年に読んでよかった本

AI を活用するための技術というのはとりわけ新しいものではなく、過去の知見を基盤として構築されていることが多いです。それゆえに、AI 時代だからこそ基礎的な知識を体系的に学ぶことができる書籍に学ぶことに価値を求めるのです。この記事では 2025 年に読んで特に印象に残った本をいくつか紹介します。

gihyo.jp

統計から異常検知まで 〜実践につながる学習ロードマップ〜

本記事では、統計の基礎からはじめて、異常検知を通じた実践的な知識を身につけ、さらに他分野へも応用できる力を養うための学習ステップとおすすめ書籍を紹介します。

gihyo.jp

Vue Fes Japan 2025レポート ～Evan Youが描く、JavaScript開発ツールの理想郷

2025年11月、東京で開催された「Vue Fes Japan 2025」。本記事では当日の様子をダイジェストで紹介する。

gihyo.jp

Ubuntu 26.04 LTS（resolute）の開発; カーネル6.20の採用

resolute（Ubuntu 26.04 LTS）の開発において、カーネル6.20が採用されることが告知されました。

gihyo.jp

Ruby 4.0.0リリース ーRuby BoxやZJITを実装

Rubyコミュニティは2025年12月25日、Rubyの新バージョンRuby 4.0.0をリリースした。

gihyo.jp

GitLab Epic Tour Japan 2025 レポート ——エージェントとともに加速するソフトウェア開発の統合プラットフォーム戦略

2025年11月28日、「GitLab Epic Tour Japan 2025」が開催されました。本稿では、そのうちGitLab社のセッション内容を取り上げて紹介します。

gihyo.jp

Alibaba、Qwen-Image-Edit-2511をリリース ―LoRA内蔵、一貫性をもった強力な画像編集／合成機能を実現

Alibabaは2025年12月23日、画像生成・編集AI「Qwen-Image-Edit」の最新バージョン「Qwen-Image-Edit-2511」をリリースした。

gihyo.jp

Android 16 QPR3がリリース、そろそろ17の背中も見えてきた

12月18日、GoogleはPixelシリーズ向けに「Android 16 QPR3 Beta 1」の配信を開始しました。

gihyo.jp

第893回　Dockerでオブジェクトストレージ「SeaweedFS」を構築する

今回はセルフホストできるオープンソースのオブジェクトストレージであるSeaweedFSを紹介します。

gihyo.jp

Firefoxを“モダンAIブラウザ”に ―Mozilla新CEOの就任メッセージにブラックボックス化を懸念する声

Chromeなど最近のモダンブラウザはAI機能がデフォルトでオンになっており、クエリを入力するたびに「AIによる概要」が最初に示されることが多い。

gihyo.jp

Claude Codeのコンテキストウィンドウを完全に理解する

「Claude Code」は、CLI上で動くLLMによるAIエージェントツールです。この記事は12月5日に発売された『Claude CodeによるAI駆動開発入門』に書ききれなかった応用的な内容や最新のアップデートについて解説します。

gihyo.jp

第261回　MySQLアップグレードで顕在化したINTと空文字のバグ挙動

MySQL 8.0のサポートが終了し、移行先として8.4を利用するケースは今後ますます増えていくと思います。

gihyo.jp

NotebookLM、Gemini 3上の構築を正式発表。推論とマルチモーダルに対する理解力が大幅に向上 ——データテーブル機能の追加や、Geminiアプリでのノートブックの添付も可能に

Googleが提供する「NotebookLM」は2025年12月20日、Gemini 3を基盤として構築されたものになったことを正式に発表した。

gihyo.jp

GitHub、「Copilotメモリ」をGitHub Copilot Pro/Pro+プランでパブリックプレビュー提供開始 ——エージェントをより活用するためにリポジトリのコンテキストを記憶

GitHubは2025年12月19日、エージェントをより活用するために、リポジトリごとのコードのコンテキストを記憶する「Copilotメモリ」をGitHub CopilotのPro/Pro+プランのユーザー向けにパブリックプレビューとして提供を開始した。

gihyo.jp

Alibaba、画像を複数レイヤーに分解、編集できるAIモデル「Qwen-Image-Layered」をオープンソースとしてリリース

Alibabaは2025年12月19日、入力した画像を複数のRGBA層に分解できるモデル「Qwen-Image-Layered」をリリースした。

@sakupi01.com blog

CSS Masonry のあゆみと現状

CSS Masonry（Grid-Lanes）の仕様策定の経緯と現状のまとめ

azukiazusa のテックブログ2

Claude Code の LSP サポート

Claude Code のバージョン 2.0.74 から LSP（Language Server Protocol）サポートが追加されました。LSP サポートにより、Claude Code はコードベースに対してシンボルの定義検索、参照検索、ホバー情報の取得などの操作が可能になります。この記事では Claude Code の LSP サポートの概要と使用方法を紹介します。

gihyo.jp

VS Code、エージェントセッション一覧がチャットビューに統合、Gitワークツリーでの複数バックグラウンドエージェント動作、スキルを流用可能に

Visual Studio Codeは2025年12月10日、今月の更新版であるNovember 2025（バージョン1.107）をリリースした。

gihyo.jp

カーネル開発に刺激は求めない ―Linus TorvaldsがOpen Source Summit Japan 2025で語ったLinux開発のこだわり

12月9日、Linux Foundation主催の「Open Source Summit Japan」の会場となった東京・虎ノ門ヒルズのフロアは早朝から多くの人々であふれていました。

gihyo.jp

Anthropic、エージェントスキルをオープンスタンダードとして公開

Anthropicは2025年12月19日、AIエージェントに効率よく専門知識を提供する「エージェントスキル（Agent Skills）」をオープンスタンダードとして公開したことを発表した。

gihyo.jp

Ubuntu 26.04 LTS（resolute）の開発; Snapshot 2のリリースと壁紙コンテスト

resoluteのSnapshot 2がリリースされました。並行して部分的なリリースノートの準備も行われています。

gihyo.jp

Google、Gemini 3 Flashをリリース ―上位モデル並みの推論能力とスピードを両立、GeminiアプリやAIモードのデフォルトモデルに

Googleは2025年12月17日、Gemini 3ファミリーの新モデルGemini 3 Flashをリリースした。

gihyo.jp

GitHub、Actionsの料金体系変更を発表 ——フィードバックを受けてセルフホストランナーへの課金は再検討へ

GitHubは2025年12月16日、GitHub Actionsの料金体系を見直すことを発表した。

gihyo.jp

第64回　最近の『らじる★らじる』（その2）

今回は「らじる★らじる」のもう1つの魅力である「聴き逃し配信」を調べてみましょう。

gihyo.jp

スマホ新法開始！ どんな影響が出るの？

12月18日より「スマートフォンにおいて利用される特定ソフトウェアに係る競争の促進に関する法律」いわゆる「スマホ新法」が全面施行されます。

gihyo.jp

OpenAI、画像生成モデルAPI「gpt-image-1.5」を発表 ——新しい画像生成・編集用ページChatGPT Imagesも提供開始

OpenAIは2025年12月16日、これまで同社が提供していた画像生成モデルから大幅に能力を向上させた新しい画像生成モデルとそのAPI「gpt-image-1.5」を発表した。

gihyo.jp

第892回　Nginx Proxy Managerでリバースプロキシを効率よく管理しよう

第881回では、家庭内のサーバーをVPN越しに公開できるリバースプロキシPangolinを紹介しました。今回はもっとシンプルなリバースプロキシ管理ソフトである、Nginx Proxy Managerを紹介します。

JSer.info

2025-12-16のJS: Node.js v24.12.0、Deno 2.6、Firefox 146、pnpmのセキュリティ機能

JSer.info #758 - Node.js v24.12.0がリリースされました。 Node.js — Node.js v24.12.0 (LTS) Type stripping(TypeScript型削除機能)がStableに変更され、実験的フラグなしでTypeScriptファイルを直接実行できるようになりました。 httpにbodyがないリクエストのStream処理をスキップするoptimizeEmptyRequestsオプションの追加、util.deprecate()の新オプション、Permission Modelに--allow-inspectorフラグの追加など、多くの改善が含まれています。 Deno v2.6がリリースされました。 Deno 2.6: dx is the new npx | Deno 新しくdxコマンドが追加され、パッケージのダウンロードと実行を行えるようになりました。また、セキュリティ監査を行うdeno auditコマンドの追加と、Socket.devとの連携サポートが含まれています。その他、pnpmライクなpostinstallスクリプトを管理するdeno approve-scriptsコマンドの追加、デフォルトで@types/nodeを含むように変更、unstableな機能としてtsgoを使った型チェックのサポートなどが含まれています。 Firefox 146がリリースされました。 Firefox 146.0, See All New Features, Updates and Fixes Firefox 146 release notes for developers (Stable) - Mozilla | MDN CSSの新機能として、contrast-color()関数、@scope at-rule、text-decoration-insetプロパティがサポートされました。また、WeakMap/WeakSetがSymbolをキーとして受け入れるようになり、SubtleCrypto.importKey()が圧縮楕円曲線点のインポートをサポートするなどの改善が含まれています。実験的機能として、Navigation APIとCustom media queriesが追加されています。 次の記事では、pnpmを使ってサプライチェーン攻撃から保護するために実装されたセキュリティ機能について紹介されています。 How We're Protecting Our Newsroom from npm Supply Chain Attacks | pnpm ライフサイクルスクリプトの管理機能、パッケージの最小リリース期間を設定するminimumReleaseAgeオプション、信頼ポリシーを管理するtrustPolicyなど、複数のセキュリティ対策機能が解説されています。 JSer.infoをサポートするには 😘 知り合いにJSer.infoをおすすめする ❤️ GitHub Sponsorsで@azuのスポンサーになる 🐦 X(Twitter)で@jser_infoをフォローする JSer.info Sponsors JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。 ヘッドライン Node.js — Node.js v24.12.0 (LTS) nodejs.org/en/blog/release/v24.12.0 nodejs ReleaseNote Node.js v24.12.0リリース。 httpにbodyがないリクエストのStream処理をスキップするoptimizeEmptyRequestsオプションを追加。 util.deprecate()にmodifyPrototypeなどのオプション、sqliteにdefensiveフラグを追加。 --allow-inspectorを追加など Type-Aware Linting Alpha | The JavaScript Oxidation Compiler oxc.rs/blog/2025-12-08-type-aware-alpha TypeScript ESLint ReleaseNote OxlintのType-Aware Lintingがαリリース Release v1.0.0 · mui/base-ui github.com/mui/base-ui/releases/tag/v1.0.0 React UI library React向けのスタイルを持たないUIコンポーネントライブラリであるBase UI 1.0リリース Deno 2.6: dx is the new npx | Deno deno.com/blog/v2.6 deno ReleaseNote Deno v2.6リリース。 dxコマンドを追加、Source phase importsのサポート。 deno auditコマンドの追加とdeno audit --socketでのSocket.devとの連携の追加。 deno approve-scriptsコマンドを追加、minimumDependencyAgeオプションのサポート。 @types/nodeを含むように変更、 tsgoを使った型チェックのサポートなど Denial of Service and Source Code Exposure in React Server Components – React react.dev/blog/2025/12/11/denial-of-service-and-source-code-exposure-in-react-server-components React security ReleaseNote Reactのセキュリティアップデート。 Release v1.5.0 (to-json-schema) · open-circle/valibot github.com/open-circle/valibot/releases/tag/v1.5.0-to-json-schema JavaScript library ReleaseNote Valibot v1.5.0リリース。 propertyNamesを追加。 toStandardJsonSchema関数でValibotスキーマをStandard JSON Schema形式へ変換できるように Firefox 146.0, See All New Features, Updates and Fixes www.firefox.com/en-US/firefox/146.0/releasenotes/ Firefox ReleaseNote Firefox 146リリース。 contrast-color()関数、@scope at-rule、text-decoration-insetプロパティをサポート。 WeakMap/WeakSetがSymbolをキーとして受け入れるように、SubtleCrypto.importKey()が圧縮楕円曲線点のインポートをサポート。 Firefox 146 release notes for developers (Stable) - Mozilla | MDN Chrome 144 beta  |  Blog  |  Chrome for Developers developer.chrome.com/blog/chrome-144-beta?hl=en Chrome ReleaseNote Chrome 144 Betaリリース。 ::search-textをサポート、@scroll-stateがscrolledをサポート。 waitUntil()メソッド、<geolocation>要素、Temporal API、clipboardchangeイベントをサポートなど。 poppinss/ts-exec: Execute TypeScript on Node using SWC github.com/poppinss/ts-exec nodejs TypeScript Tools ts-nodeやtsxのようにTypeScriptをNode.jsで実行するためのツール。 アーティクル Making complex web apps faster - Microsoft Edge Blog blogs.windows.com/msedgedev/2025/12/09/making-complex-web-apps-faster/ performance article browser proposal Long TaskなどによってpostMessageなどのメッセージの遅延をPerformanceObserverで検知するDelayed Message TimingのProposalについて delayed-message-timing/README.md at main · WICG/delayed-message-timing Useful patterns for building HTML tools simonwillison.net/2025/Dec/10/html-tools/ HTML Tools article LanguageModel LLMを使ったHTMLツールを作るときのパターンについて Open Sourcing the Remix Store | Remix remix.run/blog/oss-remix-store Remix article Remix Storeのオープンソース化と実装について How We're Protecting Our Newsroom from npm Supply Chain Attacks | pnpm pnpm.io/blog/2025/12/05/newsroom-npm-supply-chain-security pnpm security article pnpmのサプライチェーンセキュリティ対策の機能についての紹介。 サイト、サービス、ドキュメント gaearon/rscexplorer: A tool for people curious about the React Server Components protocol github.com/gaearon/rscexplorer React server Tools webservice React Server Componentがどのように動くのかをステップごとに確認できるツール。 RSCのFlightプロトコルでのやり取りやReactのServerとClientがどのように連携しているのかを可視化している

gihyo.jp

NVIDIA、オープンモデル「Nemotron 3」ファミリーを発表

NVIDIAは2025年12月16日、オープンソースのAIモデルの新バージョンNemotron 3ファミリーを発表した。

gihyo.jp

サーフェスは怖くない ～複雑な形のモデリング～

Fusionで3Dモデリングをする際にはソリッドタブにある押し出し、回転、ロフトなどでほとんどの形を作れますが、複雑なカーブ、よじれ・ねじれなどは表現することが困難です。そんなとき使えるのがサーフェスタブ内にあるサーフェスモデリング機能です。

gihyo.jp

2026年、日本のソフトウェア開発を変える5つの潮流

AIエージェントについて、今後1年間に起こるだろう、変化を推進する主要因と、日本の組織に対する戦略的影響を、5つの予測として以下に紹介します。

gihyo.jp

第2回 エンジニアの思考は業務設計にも活かせる 〜DDDと構造化思考で読み解くビジネスの設計図〜

業務設計の主役はあくまで業務側ですが、エンジニアが日常的に行っている「複雑な対象を分解し、構造化し、抽象化する」思考は、業務を整理する場面でもそのまま応用できるのです。

gihyo.jp

Linus、日本滞在中にLinux 6.19-rc1を公開、Rust導入は実験が完了し次のフェーズへ

Linus Torvaldsは12月14日、次期Linuxカーネル「Linux 6.19」の最初のリリース候補板となる「Linux 6.19-rc1」を公開した。

gihyo.jp

特別編：Blenderで告知動画を作成してみる［前編］ 〜令和八年度版『キタミ式イラストIT塾』シリーズ発売記念

本連載では、Blender の基本的な知識、機能についてイラストを交えながら紹介しています。第67回目は、作成済みのモデルをアニメーションさせるためにどのような設定をすると良いのかを見ていきます。

gihyo.jp

2025年のMisskey開発ハイライト

本記事ではリリースノートに載らないような「知られざる」内部的な改善のうち、特筆に値するトピックをかいつまんで紹介します。

azukiazusa のテックブログ2

ブラウザから要素を選択してエージェントにコンテキストを提供する React Grab を試してみた

React Grab はブラウザ上で要素を選択し、その要素に対応するコードコンテキストをコーディングエージェントに提供するライブラリです。この記事では React Grab のセットアップ方法と使用方法を紹介します。

azukiazusa のテックブログ2

フルスタックフレームワーク TanStack Start を試してみた

TanStack Start は TanStack Router と Vite をベースにしたフルスタック React フレームワークです。型安全なルーティング、サーバーサイドレンダリング、ストリーミング、サーバー関数、API ルートなどの機能を提供します。この記事では TanStack Start の概要と基本的な使い方を紹介します。

gihyo.jp

OpenAI、最新モデル「GPT-5.2」を発表 ——実務作業・長時間にわたるエージェント作業における能力が向上

OpenAIは2025年12月11日、最新のモデル「GPT‑5.2」シリーズを発表した。

gihyo.jp

Ubuntu 26.04 LTS（resolute）の開発; フレーバーのLTS予定、ROCmとAMD製GPUドライバーの同梱、CES 2026への出展

resoluteの開発にあたって、各種フレーバーを「LTSとしてリリースするか」の現時点での決定が行われています。

gihyo.jp

Adobe Photoshop、Express、AcrobatがChatGPT上で無料で利用可能に

Adobeは2025年12月10日、同社のアプリケーションをOpenAIのChatGPTから利用できる「Adobe Apps for ChatGPT」の提供を開始したことを発表した。

gihyo.jp

第1回 AI・DX導入が失敗する「真の原因」とは？ ――コードを書く前に整理すべき「業務のバグ」

昨今、多くの企業で「DX」や「AI活用」が叫ばれています。しかし、その導入プロジェクトの中で、自信を持って順調に進んでいると言えるケースはどれくらいあるでしょうか。

gihyo.jp

第29回 “ことば”にならない言葉を獲得する――小学生のスクラッチプログラミング

「スクラッチでプログラミングをはじめよう」第29回です。

gihyo.jp

Linux Foundation、Agentic AI Foundation（AAIF）設立を発表 ——MCP・goose・AGENTS.mdが初期の中核プロジェクトに

Linux Foundationは2025年12月9日、Agentic AIの発展を支える新たな組織として「Agentic AI Foundation（AAIF）」を設立したと発表した。

gihyo.jp

第891回　ミドルレンジのグラフィックボードで生成AI入門

今回は、グラフィックボードとしてミドルレンジのGeForce RTX 5060 TiとRadeon RX 9060 XTでllama.cppを使用する方法を紹介します。

gihyo.jp

第260回 MySQL 9.4と9.5の新機能について

MySQLのInnovation ReleaseとなるMySQL 9.4とMySQL 9.5がリリースされました。

blog.jxck.io

3PCA 33 日目: Outro

このエントリは、2023 年の 3rd Party Cookie Advent Calendar の最終日とする。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie

gihyo.jp

「PyCon mini Shizuoka 2026」2026/2/21に開催、参加者、登壇者受付中

静岡県を中心に活動するPythonコミュニティによる技術カンファレンス「PyCon mini Shizuoka 2026」が2026年2月21日（土）に開催される。

gihyo.jp

ロードマップ作成の近道と、ぶつかりがちな課題の回避策

第3回となる本稿では、ロードマップ作成に便利なプロジェクト管理ツールの選定ポイントやロードマップ作成にあたってぶつかりやすい課題と対策について論じます。

gihyo.jp

第59回　Linuxカーネルのコンテナ機能 ―cgroup v2から使うメモリコントローラ（4）

第58回では、メモリコントローラでメモリに対する制限や保護を設定した場合、階層構造が考慮される動作を見ました。その中で、ツリー構造を考慮したメモリ保護の動作に違和感を持った方は多いのではないでしょうか。

blog.jxck.io

Background Fetch API が消えそうだった話

「Background Fetch を使っているのが、世界であなたのサイトだけなんだけど、この機能消しても良い?」と、TPAC 2025 の会場で、Chrome の Service Worker チームの開発者と話していた際に言われた。

azukiazusa のテックブログ2

TypeScript 向けの AI フレームワーク TanStack AI を試してみた

TanStack AI は TanStack チームが開発する TypeScript 向けの軽量な AI フレームワークです。LLM プロバイダーのインターフェイスを抽象化し、ツール呼び出しやチャット機能を提供します。この記事では TanStack AI の概要と基本的な使い方を紹介します。

azukiazusa のテックブログ2

Claude のプログラミングによるツール呼び出し

MCP ツールの呼び出しはコンテキスト汚染や推論のオーバーヘッドなどの課題があります。Claude のプログラムによるツール呼び出し機能を利用することで、これらの課題を解決する方法について解説します。

JSer.info

2025-12-06のJS: AnthropicがBunを買収、React Server Componentsの脆弱性、Vite 8 Betaリリース

JSer.info #757 - AnthropicがBunを買収することが発表されました。 Bun is joining Anthropic | Bun Blog Anthropic acquires Bun as Claude Code reaches $1B milestone \ Anthropic 今後はClaude Codeチームと連携して開発を進めていく予定ですが、Bun自体はBunとして独立したプロジェクトとして開発を継続するとのことです。 React Server Componentsにおいて、任意のコード実行が可能なRCEの脆弱性が発見されました。 Critical Security Vulnerability in React Server Components – React この脆弱性は、Next.jsなどのReact Server Componentsに対応したサーバとして起動している場合に影響があります。ReactやNext.jsなどのセキュリティ修正版がリリースされており、すでにPoCも公開されているため、アプデートが推奨されています。 Next.jsはReactをBundleしているため、個別にアップデートが必要です。 Security Advisory: CVE-2025-66478 | Next.js Vite 8 Betaがリリースされました。 Vite 8 Beta: The Rolldown-powered Vite | VoidZero このバージョンでは、バンドラとしてRollupの代わりにRolldownを利用するようになります。Rolldownはパフォーマンスの向上を目的としたRollupの代替実装です。 JSer.infoをサポートするには 😘 知り合いにJSer.infoをおすすめする ❤️ GitHub Sponsorsで@azuのスポンサーになる 🐦 X(Twitter)で@jser_infoをフォローする JSer.info Sponsors JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。 ヘッドライン Bun is joining Anthropic | Bun Blog bun.com/blog/bun-joins-anthropic Bun news AnthropicがBunを買収した。 Oxfmt: Oxc Formatter Alpha | The JavaScript Oxidation Compiler oxc.rs/blog/2025-12-01-oxfmt-alpha.html JavaScript Tools ReleaseNote JavaScript FormtterであるOxfmtのαリリース。 printWidth: 100のデフォルト値の変更などが含まれている。 Release v6.0.0 · tinylibs/tinybench github.com/tinylibs/tinybench/releases/tag/v6.0.0 JavaScript benchmark library ReleaseNote tinybench v6.0.0リリース Prettier 3.7: Improved formatting consistency and new plugin features! · Prettier prettier.io/blog/2025/11/27/3.7.0 JavaScript Tools ReleaseNote Prettier 3.7リリース。 Release pnpm 10.24 · pnpm/pnpm github.com/pnpm/pnpm/releases/tag/v10.24.0 pnpm ReleaseNote pnpm v10.24.0リリース。 🎉 Ant Design 6.0 is Here! 🎉 · Issue #55804 · ant-design/ant-design github.com/ant-design/ant-design/issues/55804 JavaScript React UI library ReleaseNote Ant Design 6リリース。 Critical Security Vulnerability in React Server Components – React react.dev/blog/2025/12/03/critical-security-vulnerability-in-react-server-components React Next.js security ReleaseNote Reactのセキュリティアップデート。 New in Chrome 143  |  Blog  |  Chrome for Developers developer.chrome.com/blog/new-in-chrome-143?hl=en Chrome ReleaseNote Chrome 143リリース。 background-position-x/yの辺相対構文/font-language-overrideプロパティのサポート。 Chrome 143  |  Release notes  |  Chrome for Developers Vite 8 Beta: The Rolldown-powered Vite | VoidZero voidzero.dev/posts/announcing-vite-8-beta vite ReleaseNote Vite 8 Betaリリース。 アーティクル Announcing Baseline in action  |  Blog  |  web.dev web.dev/blog/announcing-baseline-in-action?hl=en article browser Baselineについての連載 Accelerate Next.js in Kubernetes blog.platformatic.dev/93-faster-nextjs-in-your-kubernetes Next.js kubernetes performance linux article Node.jsアプリケーションをKubernetes環境でスケーリングする際の問題と、Wattを使った93%のレイテンシ改善について。 SO_REUSEPORTを使い、マスタープロセスなしで各ワーカーが直接接続を受け付けることでオーバーヘッドを削減するアプローチを採用していることについて。 Progress on TypeScript 7 - December 2025 - TypeScript devblogs.microsoft.com/typescript/progress-on-typescript-7-december-2025/ TypeScript article Go言語実装のTypeScript 7の進捗について。 ソフトウェア、ツール、ライブラリ関係 TSDiagram - Diagrams as code with TypeScript tsdiagram.com/ TypeScript diagram TypeScriptのインターフェースでdiagramを書くツール vercel/streamdown: A drop-in replacement for react-markdown, designed for AI-powered streaming. github.com/vercel/streamdown Markdown library Streaming出力などで壊れているMarkdownを修復してMarkdownとしてレンダリングするためのライブラリ New npm package for automatic recovery of broken streaming markdown - Vercel

gihyo.jp

WSL向けUbuntu Pro、Dragonwing IQ-9075用Ubuntu、wikiとPlanet UbuntuのリニューアルとAIの導入

WSL上のUbuntu環境において、Ubuntu Proが利用できるようになりました。

gihyo.jp

Django 6.0リリース ―コンテンツセキュリティポリシーやTemplate Partialsをサポート

Django開発チームは2025年12月3日、WebアプリケーションフレームワークDjangoの最新バージョンDjango 6.0をリリースした。

gihyo.jp

Rustで書かれた高速Python型チェッカー「Pyrefly」の紹介

今月の「Python Monthly Topics」は、型チェッカー「Pyrefly」を紹介します。

gihyo.jp

「ChromeOS + Android = Aluminium OS」新OS登場か？

GoogleがChromeOSを置き換える、Androidベースの新しいOSを準備しているとAndroid Authorityが伝えています。

gihyo.jp

Linux 6.18リリース、2025年最後のメジャーアップデート

Linus Torvaldsは11月30日、2025年最後のメジャーカーネルバージョンとなる「Linux 6.18」を公開した。

gihyo.jp

U-22プログラミング・コンテスト2025最終審査会にて各賞が決定 ―経済産業大臣賞〈総合〉は中学生の作品が受賞

U-22プログラミング・コンテスト実行委員会は、2025年11月30日（日）に行われた最終審査会において、入選16作品を審査、経済産業大臣賞をはじめとする各賞を決定した。

gihyo.jp

第890回　手軽に使えるシンプルな監視サーバー「Beszel」を試す

今回は、Netdataからの移行先として注目されはじめているBeszelを紹介します。

gihyo.jp

FreeBSD 15.0リリース ―pkgツールベースのインストール／アップデート方式を採用へ

FreeBSD Projectは2025年12月2日、FreeBSDの最新リリース版FreeBSD 15.0-RELEASEを公開した。

gihyo.jp

Claude Codeを使った初歩的なデバッグとテストコードを記述する際の注意点

最終回となる第4回目では、TODOアプリをフレームワークを使って作成し、その際生じるエラーへの対処もClaude Codeにやってもらいます。最後にClaude Codeにテストコードを書いてもらう方法とCLAUDE.mdへのテストの注意点の記載の仕方について解説します。

gihyo.jp

効果的なロードマップの作成方法

第2回となる本稿では、ソフトウェア開発におけるロードマップの具体的な作成方法、作成時の注意点、作成に用いる手段の選択肢について論じます。

gihyo.jp

「中高生Rubyプログラミングコンテスト2025」受賞者決定！

今回で15回目を迎えた「中高生Rubyプログラミングコンテスト2025」。2025年11月29日に最優秀賞他、各賞が決定した。

gihyo.jp

Blenderでワールドプロパティの設定をしてみよう

第66回目は、ワールドプロパティの設定を変えると何が変わるのかを見ていきます。

gihyo.jp

第124回　MySQL HeatWaveのイープラスでの導入事例、「PostgreSQL Conference Japan 2025」報告

この連載はOSSコンソーシアム データベース部会のメンバーがオープンソースデータベースの毎月の出来事をお伝えしています。

azukiazusa のテックブログ2

Claude のツール検索ツールを試してみた

MCP では多くのツール定義が LLM のコンテキストを圧迫する問題があります。Claude のツール検索ツールを使用すると、必要に応じて関連するツールのみを LLM に提供でき、コンテキスト圧迫を軽減できます。この記事では Claude の TypeScript クライアントを使用して、ツール検索ツールを実際に使用した例を紹介します。

azukiazusa のテックブログ2

Claude Code のプランモードがより正確な計画を立てられるようになっていた

Claude Code のプランモードはリリース当初から定期的に改善が加えられており、より正確な計画を立てられるようになっています。この記事では最近の改善点について紹介します。

gihyo.jp

「Python Boot Camp」12/20に北九州市で開催

Python Boot Campは、一般社団法人PyCon JP Associationが主催するPythonを学べるチュートリアル講座。

gihyo.jp

Ubuntu 26.04（resolute）の開発; 26.04 LTSのロードマップ

resoluteのロードマップが発表されました。これは「主要なテーマ」とキーとなる日付から構成される、「Ubuntu 26.04 LTSはこうなる」という基本方針です。

gihyo.jp

Waylandの将来に全力を注ぐ ―KDEプロジェクト、PlasmaにおけるX11の完全ドロップとWaylandへの“全振り”を宣言

KDEプロジェクトは11月26日、「Going all-in on a Wayland future（Waylandの将来に全力を注ぐ）」と題したブログを投稿し、将来リリースされる「KDE Plasma 6.8」はWaylandオンリーとなることを明らかにした。

gihyo.jp

AndroidでAirDropが利用可能！ Appleはどう動くか

11月20日、Googleは、Quick Shareを拡張してAndroidとiPhone間でファイル共有ができる機能を発表しました。

gihyo.jp

第889回　Zorin OS 18とは何か

今回はUbuntu派生のLinuxディストリビューション、Zorin OS 18を紹介します。

gihyo.jp

第63回　最近の『らじる★らじる』（その1）

暑くて長い夏がやっと一段落したと思ったら急に冷えこみだし、カレンダーも残りわずかとなりました。

azukiazusa のテックブログ2

読んだ本は忘れていい ― 年間300冊読む私の読書術

以前 YAPC::Fukuoka 2025 で発表した探求の技術では「良いアウトプットを出すためには良いインプットが必要」であるという主張を裏付けるために、私が年間 300 冊の本を読む読書習慣があることを紹介しました。この記事では私がどのような目的で本を読み、どのように本を選び、どのように読書時間を確保し、そして読んだ内容をどのように扱っているのかについて紹介します。

gihyo.jp

第259回　知ってるとちょっと便利なON UPDATE CURRENT_TIMESTAMP

皆さんはDEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMPをご存じでしょうか？

azukiazusa のテックブログ2

MCP におけるインタラクティブな UI を標準化する拡張機能 MCP Apps の提案

MCP Apps は MCP の拡張機能として、AI エージェントがインタラクティブな UI コンポーネントを返すための標準化された方法を提供します。この記事では MCP Apps の概要と実装方法について解説します。

gihyo.jp

トレンドを振り返りながら考える、Web制作の今とこれから――SmartRelease Uが目指すリリース環境の民主化

今回は、その当時からWeb制作に関わる業務を行ってきた5名のパネリストをお招きし、過去のトレンドを踏まえながら「Web制作の今」を考察し、これからについて展望します。 そして、5名がエバンジェリストとして関わる新サービス「SmartRelease U」を紹介します。

gihyo.jp

Google、画像生成モデル「Nano Banana Pro」をリリース

Googleは2025年11月20日、画像生成モデル「Nano Banana」の上位版として、Gemini 3 Proを基にした「Nano Banana Pro（Gemini 3 Pro Image）」を発表した。

gihyo.jp

PHP 8.5.0リリース、組み込みURI拡張の提供、パイプ演算子サポートなど

PHP開発チームは2025年11月20日、PHPの新バージョンPHP 8.5.0のリリースを発表した。

gihyo.jp

WindowsでMCPネイティブサポートのパブリックプレビューを開始 ―ファイルエクスプローラーとシステム設定の組み込みエージェントコネクタも公開

Microsoftは2025年11月18日、テクノロジーイベント「Ignite 2025」にて、WindowsでMCP（Model Context Protocol）のネイティブ サポートをパブリックプレビューとして開始したことを発表した。

gihyo.jp

Ubuntu 26.04（resolute）の開発; RISC-V版Flutterの準備, オープンソースの普及度合いの調査

resoluteの開発が始まってから一ヶ月ほど、実験的なタスクがいくつか開始されています。

gihyo.jp

Blender 5.0リリース ―カラーマネジメント、レンダリング、パフォーマンスなど大幅に強化

Blender開発チームは2025年11月18日、Blenderの最新バージョンBlender 5.0をリリースした。

@sakupi01.com blog

TPAC 2025 @Kobe Diary

TPAC 2025 参加記（Unpolished ver.）

gihyo.jp

Pebble is BACK! Pebble2 Duoレビュー②

今回は、Pebble 2 Duoを1週間みっちり使いこんでみたので、その使用感をレビューします。

gihyo.jp

Google、Gemini 3 Proプレビューを提供開始 ——エージェント活用する新しいIDE「Google Antigravity」もリリース

Googleは2025年11月18日、最新AIモデル「Gemini 3」を発表し、同日よりGemini 3 Proのプレビューの提供を開始した。

gihyo.jp

第888回　【はじめてのUbuntu刊行記念】 あなたのUbuntuはどこから、どこへ？

今回は近日発売される『はじめてのUbuntu』の宣伝も兼ねて、初心者がUbuntuを始める上でどこからスタートすべきなのか、どんな本を手に取ると良いのか考えてみましょう。

gihyo.jp

SUSE、Zig言語でSSHの再実装にチャレンジ

SUSEは毎年、同社に所属するエンジニアのイノベーティブな活動を推進する一環として、「Hack Week」という1週間のイベント期間を設けている。

blog.jxck.io

Web とは何か

見落とされがちだが、「Web とは何か」という仕様はない。Web を定義した W3C のドキュメントもなければ、IETF の RFC もない。Web は仕様ではないのだ。これだけしっかりと標準化された技術の粋を集めた総体が、なぜそんなにもフワっとしているのだろうか?我々は、何を "Web" と呼んでいるのだろうか?

gihyo.jp

ソフトウェア開発におけるロードマップの役割や種類、作成のメリットとは

ロードマップは、ソフトウェア開発に限って使用する取り組みではなく、あらゆるビジネスシーンで活用されています。そこで、第1回となる本稿では、まずはロードマップの役割や種類を整理した後、ソフトウェア開発におけるロードマップの作成・活用、メリットについて紹介します。

gihyo.jp

Kiroの一般提供開始、コマンドライン動作のKiro CLIも登場

AWSは2025年11月17日、AIエージェント型IDE「Kiro」の一般提供を開始した。

gihyo.jp

Visual Studio Code、Agent HQに対応へ、自動承認のサブコマンド検出を改善、エージェント編集ファイルを自動で開く動作をデフォルトでオフに、インライン差分表示で削除コードを選択可能に

Visual Studio Codeは2025年11月12日、今月の更新版であるOctober 2025をリリースした。

gihyo.jp

t-string：テンプレート文字列リテラルの紹介

今月の「Python Monthly Topics」では、Python 3.14の新機能の1つである「テンプレート文字列リテラル（t-string）」について紹介します。

blog.jxck.io

TPAC 2025 参加記録

W3C が毎年開催する国際会議、TPAC 2025 に参加してきた。

gihyo.jp

シンプルなTODOアプリを、Claude Codeを使って5分で作って30分で公開する

第3回目は、Claude Codeにプロンプトを指示して、たったの5分でシンプルなTODOアプリケーションを作ってみます。その後、アプリケーションをGitHub PagesとVercelの両方にデプロイするところまで、Claude Codeと対話しながら行っていきます。

gihyo.jp

Pebble is BACK! Pebble2 Duoレビュー①

桜が咲き始めた3月に予約して、夏が過ぎて秋に入り、冬も目前に迫ったころにようやく手元に到着しました。何のことかと言えば、3月に予約したPebble 2 duoが、11月に入って手元に到着したのでレビューしていきます。

gihyo.jp

Blenderで深度マップを使用して立体的に見えるオブジェクトを作成してみよう～後編～

第65回目は、前回に引き続き深度マップを使用して平面のオブジェクトを立体的に見せる方法を見ていきます。

@sakupi01.com blog

Google Developer Experts にジョインしました

Joined Google Developer Experts (GDE) program as a Web Technologies expert focusing on CSS & UI.

gihyo.jp

Ubuntu 14.04 LTSへの15年サポート・DNSSECのデフォルト化テストと失敗・Ubuntu 25.10リリース記念オフラインミーティング25.11

Ubuntu 14.04 LTSは来年4月で到達する予定だったのですが、今回リリースされたサポート期間の延長により、このサポート期間が15年間になることが確定しました。

azukiazusa のテックブログ2

標準の Web API で URL のパターンマッチングを処理する URLPattern

Web アプリケーションにおけるルーティングは重要な要素です。URL Pattern API は URL のパターンマッチングを標準化するための Web API であり、ブラウザやサーバーサイド環境で一貫した方法で URL パターンを処理できます。この記事では、URLPattern API の基本的な使い方とパターン構文について解説します。

gihyo.jp

専門性が高くライフサイクルの長い医療機器のユーザビリティを向上させるために

毎年恒例、HCD-Net認定人間中心設計スペシャリスト／専門家へのインタビュー。2025年は、島津製作所総合デザインセンターのデザインユニット内にあるUX革新グループで、全社の製品開発のUXの向上活動を横断的に支援されている猪股さんに専門性の高い機器のユーザビリティをどのように向上させているか、取り組みの事例を伺いました。

gihyo.jp

OpenAI、GPT-5.1をリリース ——親しみやすさとの両立へ。応答性能も向上し、応答のトーンもさらに選択できるように

OpenAIは2025年11月12日、GPT‑5世代での改良を盛り込んだ新モデル「GPT‑5.1」を発表した。

blog.jxck.io

1Password AC #10: SSH と Git コミット署名

このエントリは、1Password Advent Calendar の 10 日目である。1Password - Qiita Advent Calendar 2025 - Qiitahttps://qiita.com/advent-calendar/2025/1passwordこのシリーズでは、組織において 1Password Business を運用する上での考慮点を解説していく。1Password Business 運用ガイド素案 - Google ドキュメントhttps://docs.google.com/document/d/1CZ5xdOz2IRHXRKVzcUZG-d4wQmlexBet8_Iee_EJlmwSSH の鍵を使って、直接サーバにログインするような運用は減っているかもしれない。それでも SSH の鍵を使う場面が無くなったわけではない。今回は、1Password への SSH Key 登録と、Git のコミット署名有効化について解説する。

gihyo.jp

Microsoft、.NET 10をリリース —— Visual Studio 2026も一般提供開始

Microsoftは2025年11月11日、ネット上で開催中のバーチャルイベント「.NET Conf 2025」において、.NETの最新バージョンとなる「.NET 10」のリリースを発表した。

gihyo.jp

第887回　AIボイスチェンジャーであるSeed-VC用に、任意の音声ファイルをトレーニングしてみよう

前回はAIを利用した音声合成ツールである「Seed-VC」の使い方を紹介しました。今回はさらにSeed-VCのトレーニング機能を利用して、より自然な音声を生成してみましょう。

gihyo.jp

今回のテーマは「Future of Web Creation」――MTDDC Meetup TOKYO 2025、11/29に開催

>2025年11月29日、Movable Typeを中心としたWebカンファレンス「MTDDC Meetup TOKYO 2025」が昨年に続きオフライン・オンラインのハイブリッドで開催される。

blog.jxck.io

1Password AC #9: Travel Mode

このエントリは、1Password Advent Calendar の 9 日目である。1Password - Qiita Advent Calendar 2025 - Qiitahttps://qiita.com/advent-calendar/2025/1passwordこのシリーズでは、組織において 1Password Business を運用する上での考慮点を解説していく。1Password Business 運用ガイド素案 - Google ドキュメントhttps://docs.google.com/document/d/1CZ5xdOz2IRHXRKVzcUZG-d4wQmlexBet8_Iee_EJlmw

gihyo.jp

第258回　MySQL 8.4で厳格化された外部キー制約仕様

MySQL 8.4（LTS）では、外部キー制約（FOREIGN KEY）の定義ルールに関して、デフォルトの仕様がこれまでから厳格化しました。

blog.jxck.io

1Password AC #8: 1Password CLI

このエントリは、1Password Advent Calendar の 8 日目である。1Password - Qiita Advent Calendar 2025 - Qiitahttps://qiita.com/advent-calendar/2025/1passwordこのシリーズでは、組織において 1Password Business を運用する上での考慮点を解説していく。1Password Business 運用ガイド素案 - Google ドキュメントhttps://docs.google.com/document/d/1CZ5xdOz2IRHXRKVzcUZG-d4wQmlexBet8_Iee_EJlmw前回、Group/Vault を整備したため、チームの中で活用する準備が整った。

blog.jxck.io

1Password AC #7: Group と Vault の運用

このエントリは、1Password Advent Calendar の 7 日目である。1Password - Qiita Advent Calendar 2025 - Qiitahttps://qiita.com/advent-calendar/2025/1passwordこのシリーズでは、組織において 1Password Business を運用する上での考慮点を解説していく。1Password Business 運用ガイド素案 - Google ドキュメントhttps://docs.google.com/document/d/1CZ5xdOz2IRHXRKVzcUZG-d4wQmlexBet8_Iee_EJlmw今回は、Business アカウントを運用する上で重要な、Group/Vault の概念について解説する。

azukiazusa のテックブログ2

MCP ツールのコンテキスト圧迫の問題とその解決策

MCP の普及に伴い、多数のツール定義が LLM のコンテキストを圧迫する課題が浮上しています。本記事では Progressive disclosure（段階的開示）による最小限の情報提供、MCP を使ったコード実行によるツール呼び出しの効率化、単一の検索ツールによるコンテキスト削減など、実践的な解決策を Claude Skills や Cloudflare Code Mode の事例とともに解説します。

blog.jxck.io

1Password AC #6: Business アカウント特典の無料 Family アカウント

このエントリは、1Password Advent Calendar の 6 日目である。1Password - Qiita Advent Calendar 2025 - Qiitahttps://qiita.com/advent-calendar/2025/1passwordこのシリーズでは、組織において 1Password Business を運用する上での考慮点を解説していく。1Password Business 運用ガイド素案 - Google ドキュメントhttps://docs.google.com/document/d/1CZ5xdOz2IRHXRKVzcUZG-d4wQmlexBet8_Iee_EJlmwここでは、1Password Business アカウントに付随する、Family アカウントの無料特典について解説する。要するに、Business アカウントに参加している間は、1Password を無料で使えるという意味だ。

stin's Blog

ts-rest や他色々を試すために Todo アプリを作る

ts-rest という RPC ライブラリを見かけて気になったので、実際に Todo アプリを作って試してみました。 ts-rest とは https://ts-rest.com/ ts-rest は、REST API を型安全に実装するためのライブラリです。サーバーサイドだけでなく、REST API にアクセスするク...

@sakupi01.com blog

Case [email protected] - How Cybozu eliminated browser compatibility overhead with Baseline

Baseline の企業レベル導入事例

blog.jxck.io

1Password AC #5: 1Password アカウントへの 2FA

このエントリは、1Password Advent Calendar の 5 日目である。1Password - Qiita Advent Calendar 2025 - Qiitahttps://qiita.com/advent-calendar/2025/1passwordこのシリーズでは、組織において 1Password Business を運用する上での考慮点を解説していく。1Password Business 運用ガイド素案 - Google ドキュメントhttps://docs.google.com/document/d/1CZ5xdOz2IRHXRKVzcUZG-d4wQmlexBet8_Iee_EJlmwここでは、1Password アカウントに対する 2FA の有効化について検討する。

gihyo.jp

Mastodon、バージョン4.5をリリース ——元投稿者の引用ポリシーを尊重する引用投稿の投稿が可能に

Mastodon 4.5が2025年11月6日にリリースされた。このバージョン4.5では、元投稿者の引用ポリシーを尊重する引用投稿の投稿が可能になった。

gihyo.jp

3年以内に訪れる、ソフトウェアの自律型AIの未来 ——CISOが今すぐ備えるべき理由

今回はGitLabが日本の経営層を対象に行った調査の結果に基づき、CISOが直面する「AI導入を妨げずにリスクを最小化する方法」という課題に焦点を当て、今すぐ取り組むべき実践的なステップを提案します。

gihyo.jp

Visual Studio Code、GitHub Copilotのインラインサジェスト機能をオープンソース化

Visual Studio Code開発チームは2025年11月6日、VS Codeの拡張機能であるGitHub Copilotのインラインサジェスト機能（inline suggestions）をオープンソース化したことを発表した。

gihyo.jp

Steam SnapのCore24版のテスト開始、Dell PowerEdge XR8000を中心にしたエッジAIやネットワーキング, Azure VM utils

近年のLinuxにおける「新しい常識」として、「Steamのゲームはそれなりに動作する」というものがあります。これはSteam DeckがLinuxベースであること、そしてProtonによる互換性が相応以上に提供されていることによります。

blog.jxck.io

1Password AC #4: Secret Key の運用とアカウントリカバリ

このエントリは、1Password Advent Calendar の 4 日目である。1Password - Qiita Advent Calendar 2025 - Qiitahttps://qiita.com/advent-calendar/2025/1passwordこのシリーズでは、組織において 1Password Business を運用する上での考慮点を解説していく。1Password Business 運用ガイド素案 - Google ドキュメントhttps://docs.google.com/document/d/1CZ5xdOz2IRHXRKVzcUZG-d4wQmlexBet8_Iee_EJlmwここまで 1Password における Master Password について解説してきた。記憶に頼る Master Password と異なり、Secret Key は実質的に所有の要素となる。本エントリでは、この Secret Key の扱いについて解説する。

gihyo.jp

systemdフリーのDevuan “Excalibur” 6がリリース

Devuanチームは11月2日、「Devuan GNU+Linux 6.0.0（開発コード：Excalibur）」の安定版（stable）リリースを発表した。

gihyo.jp

Storybook 10リリース ―モジュールシステムをESMに統一しコンパクト化

Storybook開発コミュニティは2025年10月28日、UIフロントエンド開発環境Storybookの最新バージョンStorybook 10をリリースした。

blog.jxck.io

1Password AC #3: Master Password の作り方

このエントリは、1Password Advent Calendar の 3 日目である。1Password - Qiita Advent Calendar 2025 - Qiitahttps://qiita.com/advent-calendar/2025/1passwordこのシリーズでは、組織において 1Password Business を運用する上での考慮点を解説していく。1Password Business 運用ガイド素案 - Google ドキュメントhttps://docs.google.com/document/d/1CZ5xdOz2IRHXRKVzcUZG-d4wQmlexBet8_Iee_EJlmw前回は「1Password の Master Password はマルチアカウントで共通して使って良い」という解説をした。1Password の Master Password は使い回すべき理由 | blog.jxck.iohttps://blog.jxck.io/entries/2025-11-05/reuse-master-password.htmlこれは 1Password のマルチアカウントが「単一ユーザ内のスコープ」として設計されていること、そして「Master Password が覚えるべき最後の 1 つのパスワード」であるという設計思想に基づくものだった。つまり、「Master Password」をいかに堅牢に作るかは、1Password ユーザにとって非常に重要だ。「そんな Master Password はどう作ればよいか?」について解説を試みる。

gihyo.jp

「Swift SDK for Android」のプレビュー版がリリース

10月24日、AppleはSwiftを使ってAndroidのアプリが開発できる開発キット「Swift SDK for Android」のプレビューリリース版を公開しました。

gihyo.jp

「中高生Rubyプログラミングコンテスト2025」の最終審査会進出者10組が決定、2025年11月29日三鷹で最終審査会を開催

今回で15回目を迎える「中高生Rubyプログラミングコンテスト2025」。2025年11月29日に三鷹で開催される最終審査会進出者10組が決定した。

gihyo.jp

第886回　AIボイスチェンジャーであるSeed-VCで自分の声を変えてみよう

生成AIでも人気のある機能のひとつが「音声合成」です。今回は任意の参照音声に変換できる「Seed-VC」をUbuntuで動かしてみましょう。

blog.jxck.io

1Password AC #2: Master Password をマルチアカウントで使い回すべき理由

このエントリは、1Password Advent Calendar の 2 日目である。1Password - Qiita Advent Calendar 2025 - Qiitahttps://qiita.com/advent-calendar/2025/1passwordこのシリーズでは、組織において 1Password Business を運用する上での考慮点を解説していく。1Password Business 運用ガイド素案 - Google ドキュメントhttps://docs.google.com/document/d/1CZ5xdOz2IRHXRKVzcUZG-d4wQmlexBet8_Iee_EJlmw個人で 1Password を使っている人が、1Password Business を導入している組織にジョインする場合、新しく組織用のアカウントが発行される。つまり、1Password をマルチアカウントで運用することになる。関わる組織が増えていけば、切り替えるアカウントもどんどん増えていくが、1Password はマルチアカウントの UI がよくできているため、負担になることは特にないだろう。このとき、追加する別アカウントの Master Password は、それまで使っているものを「使い回す」ことが推奨されている。「パスワードを使い回すのは避けるべき」というのが、認証において啓蒙し続けられた基本だった。ではなぜ 1Password のマルチアカウントでは、推奨されるのだろうか。

gihyo.jp

Chrome 142、DevToolsのAIアシスタンス機能を強化 ——コード提案機能の追加や、トレース情報を渡すだけでパフォーマンス調査が可能に

Chrome 142が10月28日にリリースされた。今回のリリースでDevTools上でAIアシスタンスを簡単に開けるようになり、コード提案機能の追加や、トレース情報を渡すだけでパフォーマンス調査がおこなえるようになった。

gihyo.jp

Kiro v0.5.0リリース、リモートMCPサーバー、AGENTS.mdをサポート

AWSは2025年10月30日、AIエージェント型IDEの新バージョン「Kiro v0.5.0」をリリースした。

gihyo.jp

Claude Codeの料金体系とインストールからセットアップまで

第2回目は、Claude Codeのやや複雑な料金体系を説明した後、Claude Codeをローカル環境にインストール・セットアップするところまで行います。

gihyo.jp

エンジニアリングチームを戦略的に成長させるための行動指針

スケーリングの方法というのは、すべてのリーダーが考えるべきテーマです。チームや製品、インフラ、そして私たちが管理し活動するエコシステムを、どのように拡大していくべきでしょうか？

gihyo.jp

Blenderで深度マップを使用して立体的に見えるオブジェクトを作成してみよう 〜前編〜

第64回目は、深度マップを使用して平面のオブジェクトを立体的に見せる方法を見ていきます。

gihyo.jp

第123回　企画セミナー「データ活用の現状と近未来」開催報告、MySQL 9.5.0のリリースとMySQL AIの登場、オラクルが運営するPostgreSQLサービス！？

この連載はOSSコンソーシアム データベース部会のメンバーがオープンソースデータベースの毎月の出来事をお伝えしています。

blog.jxck.io

1Password AC #1: Business アカウント運用の検証

このエントリは、1Password Advent Calendar の 1 日目である。1Password - Qiita Advent Calendar 2025 - Qiitahttps://qiita.com/advent-calendar/2025/1password1Password を個人で使うだけでなく、組織全体で利用することで、開発に必要なアカウントを共有したり、CLI を使って自動化するといった、様々なメリットがある。組織で 1Password を展開する際は、1Password を Business プランで契約し、ドメインに所属するメンバーにアカウントを発行することになるだろう。その際、組織でどのようなルールを設け、どのような方法で管理し、どのように組織に合わせた設計を行うかは、多くの人が同じような検証を実施することになると思われる。今回は筆者 (Jxck) が、自分で持っている mozaic.fm のドメインを用いて、ビジネスアカウントを契約し、汎用的な運用方法の素案を検討した。その成果をドキュメントにまとめたので、同じように 1Password の組織展開を考えている際は参考になればと思う。

azukiazusa のテックブログ2

Claude Code のサンドボックス機能を試してみた

Claude Code をはじめとする AI コーディングエージェントは、コマンドを実行するたびにユーザーの承認を求める仕組みが備わっていますが、これには開発サイクルの低下や承認疲れといった問題があります。Claude Code のサンドボックス機能は、ファイルシステムやネットワークへのアクセスを制限し、安全に動作させるための仕組みです。この記事では、Claude Code のサンドボックス機能の仕組みと利用方法について解説します。

gihyo.jp

Fedora Linux 43リリース、Linux 6.17 ＆ GNOME 49を搭載

Fedoraプロジェクトは10月28日、「Fedora Linux 43」のリリースを発表した。

gihyo.jp

ベクターデザイン、写真編集、ページレイアウトツールを統合、「Affinity」無料で利用可能に

Canvaは2025年10月30日、同社のグラフィックソフト製品群「Affinity」の写真編集、ベクターデザイン、ページレイアウトツールを1つのプラットフォームに統合し、無料で提供することを発表した。

gihyo.jp

RUBIK Pi 3 developer board、シリコン最適化推論Snap、BlueField-4にまつわるCanonicalとNVIDIAとの提携

Qualcomm Dragonwing QCS6490搭載の小型ボード、RUBIK Pi 3が登場しました。また、BlueField-4にまつわるCanonicalとNVIDIAとの提携が発表されています。

gihyo.jp

PyCon JP 2025開催レポート ―コミュニティの大切さを再発見した3日間

9月26日から28日にかけて広島国際会議場で開催された「PyCon JP 2025」の開催後レポートをお届けします。

gihyo.jp

GitHub、エージェントを指揮するための新しいビジョン「Agent HQ」を発表 ——Agentsページの刷新やGitHub Copilotのカスタムエージェントの作成も可能に

GitHubは10月28日、コーディングエージェントを既存のGitHubフローにネイティブに対応させるための新しいビジョン「Agent HQ」と、これを実現するためのGitHubやVS Codeの一連の新機能や改善を発表した。

gihyo.jp

Cursor 2.0リリース、マルチエージェントに対応、エージェント型コーディングモデルComposerを導入

Anysphereは2025年10月29日、同社が開発するAIコードエディタCursorの新バージョンCursor 2.0をリリースした。

gihyo.jp

Gemini内蔵でGalaxy XRが約1,800ドル登場

10月21日、Samsung ElectronicsがXRヘッドセット「Galaxy XR」を米国と韓国で発表し発売を開始しました。

gihyo.jp

みてね写真プリント自動提案システムの裏側に迫る――データ収集からデータ配信まで

みてね×gihyo.jpスペシャル企画。13回目はみてね写真プリント自動提案システムに関して、データ収集からデータ配信までの仕組みについて解説します。

gihyo.jp

第885回　Windows 11にアップグレードできないCPUでもUbuntuが快適に動作するか検証する

今回は古いCPUでUbuntuを動作させ、現在のCPUと比較してどの程度の速度で動作するのかを検証します。

gihyo.jp

「SciPyDataJapan 2026」2026年1月24日に開催 —科学技術とデータの未来をつなぐカンファレンスが再び

2026年1月24日、「SciPyDataJapan 2026」が2025年に続き東京・御茶ノ水で開催されることとなった。

gihyo.jp

AIが事実確認をおこなう百科事典、Grokpediaが登場

xAIは、新しいオンライン百科事典「Grokpedia」のバージョン0.1をリリースしたことを告知した。

gihyo.jp

huggingface_hub v1.0リリース、HTTPライブラリにhttpx採用、コマンドラインインターフェースを一新

Hugging Faceは2025年10月27日、AI開発プラットフォームHugging Face Hubへのアクセスクライアントライブラリhuggingface_hubの新バージョン1.0をリリースした。

gihyo.jp

データ検証ライブラリPydanticの紹介

2025年10月の「Python Monthly Topics」は、データ検証ライブラリのPydanticを紹介します。

gihyo.jp

第257回　MySQL Group Replicationの基礎知識

MySQL Group ReplicationとはInnoDBで利用可能なレプリケーションプラグインです。ここではGroup Replicationの基本的な仕組みや簡単な構築方法について説明します。

gihyo.jp

Fedoraプロジェクト、条件付きで生成AIによるコード貢献を受け入れへ

Fedoraプロジェクトのリーダーシップとガバナンスを担う組織「Fedora Council」は10月22日、生成AIおよび大規模言語モデル（LLM）を活用したコード貢献を許可する決定を下した。

gihyo.jp

Swift SDK for Androidがプレビューリリース

Swift.orgは2025年10月24日、Swiftを使ってAndroid上で動作するプログラムを開発できるSwift SDK for Androidをナイトリープレビュー版としてリリースした。

azukiazusa のテックブログ2

Claude Skills でエージェントに専門的なタスクを実行させる

Claude Skills は Claude が特定のタスクを実行するためのカスタムスキルを作成・共有できる新しい機能です。この記事では、Claude Skills の仕組みと作成方法、MCP ツールとの違いについて解説します。

gihyo.jp

Ubuntu 26.04 LTS（resolute）の開発; 開発のスタート, EBC7702・XuanTie C930とUbuntu, OSC 2025 Tokyo/Fall

resolute（Ubuntu 26.04 LTS）の開発が本格的にスタートし、まずは開発環境の準備が行われました。

gihyo.jp

AIでUIをデザインするウェブアプリ「Stitch」、公開共有機能を追加

Googleは、AIを使ってモバイルアプリやウェブアプリのユーザーインターフェース（UI）を生成できる「Stitch」をGoogle Labsで提供している。2025年10月16日、公開共有機能を追加したことを案内した。

gihyo.jp

もう少し使いたいときの救世主、LineageOS 23がリリース

Android 16をベースにした、LineageOS 23がリリースされました。

gihyo.jp

Google AI Studio、ビルドモードでAIアプリをVibe Codingするための新しいUXを提供

Googleは2025年10月21日、Google AI Studioにおいて、Vibe CodingでAIアプリを作成するための新しいユーザーエクスペリエンスを提供開始した。

gihyo.jp

Valkey 9.0リリース、スケーラビリティとパフォーマンスを大幅に向上

Valkey開発チームは2025年10月21日、キーバリューデータベースValkeyの最新バージョンValkey 9.0をリリースした。

gihyo.jp

OpenAI、AI搭載ブラウザ「ChatGPT Atlas」を発表 ——macOS版から提供開始

OpenAIは2025年10月21日、新しいAIブラウザ「ChatGPT Atlas」を発表した。発表時点ではmacOS用のアプリのみが提供される。

gihyo.jp

KDE Plasma 6.5リリース、ビジュアルやユーザビリティが大幅にアップデート

KDEプロジェクトは10月21日、「KDE Plasma 6.5」をリリースした。

gihyo.jp

第884回　ser2netでリモートコンソール環境をさらに便利に使う

第879回の「ser2netで作るリモートシリアルコンソール環境」では、ser2netを用いてリモートからtelnetコマンドでシリアルコンソールにアクセスできる環境を整えました。今回は通信の暗号化や認証を導入してみましょう。

gihyo.jp

3Dプリンターで円柱を出力する際の考え方

今回は、身近なはずなのに奥深い、円柱を出力する必要があると思ったときの考え方をいくつか紹介します。

gihyo.jp

Web上でClaude Codeを実行できる「Claude Code on the web」リサーチプレビュー版で提供開始

Anthropicは2025年10月21日、AIコーディングエージェントClaude CodeをWebから操作できる「Claude Code on the web」をリサーチプレビュー版としてリリースした。

gihyo.jp

DroidKaigi 2025 参加レポート 〜コミュニティが彩るAndroidの祭典〜

9月10日から12日にかけて、ベルサール渋谷ガーデンでDroidKaigi 2025が開催されました。本記事では、現地会場の様子をレポートします。

gihyo.jp

Claude Codeは今までのAI支援開発ツールとは何が違うのか

Claude Code以前のAI支援開発ツールとClaude Codeを比較しながら、Claude Codeの特徴と強みを説明します。

blog.jxck.io

3PCA 32 日目: Privacy Sandbox の後始末

このエントリは、_2023_ 年の 3rd Party Cookie Advent Calendar の 32 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie宙に浮いていた Privacy Sandbox プロジェクトの「後始末」が公開された。

gihyo.jp

Anthropic、Claudeに専門性の高いタスク指示ができる「エージェントスキル」を発表

Anthropicは2025年10月17日、同社のClaudeシリーズに特定のタスク実行を効率的に行うことができるファイルセット「エージェントスキル（Agent Skills）」がプレビューとして利用できるようになったことを発表した。

gihyo.jp

Linux 6.18-rc2リリース、Linus“ご立腹”のRustフォーマットチェック関連も修正

Linus Torvaldsは10月19日（米国時間）、開発中の次期Linuxカーネル「Linux 6.18」の2本目のリリース候補版となる「Linux 6.18‐rc2」を公開した。

gihyo.jp

AIモデル「Hunyuan3D 2.1」を使って画像をもとに頂点数などを調整しながらモデルを作ってみよう

第63回目は、AIモデル「Hunyuan3D 2.1」を使えるウェブサービスを通して、頂点数を調整しながらモデルを生成する方法を見ていきます。

stin's Blog

Hono Conf 2025 に参加してきたので感想を書く

2025年10月18日に開催された Hono Conf に現地参加したので、自分が見たセッションについて覚えている限りで感想を書きます。 https://honoconf.dev/2025 以下、「発表タイトル by 発表者名」で区切って書いていきます。発表資料が見つかったものについてはリンクも貼っておきます。 令和最...

azukiazusa のテックブログ2

Remix v3 を実際に動かして試してみた

2025 年 10 月に発表された Remix v3 は React から独立し、Web 標準技術を活用した新しいフレームワークへと進化しました。この記事では、Remix v3 のセットアップ手順と新機能を実際に動かして試してみた内容を紹介します。

gihyo.jp

「Zorin OS 18」Windows 10サポート終了の10/14にリリース、2日間で10万ダウンロード突破

アイルランドのZorin Groupは2025年10月14日、同社が開発するUbuntuベースのデスクトップOS（Linuxディストリビューション）「Zorin OS」の最新バージョン「Zorin OS 18」をリリースした。

gihyo.jp

Vue Fes Japan 2024レポート ～Vueの未来とJavaScriptツールチェインの再定義

このレポートは昨年2024年10月に開催されたVue Fes Japan 2024の取材内容を、今回2025年10月に公開するものです。当時の熱気と重要な技術トレンドをお伝えします。

gihyo.jp

「TSKaigi Hokuriku 2025」11/23に開催、チケット販売中

2025年11月23日（日）にホテル金沢（石川県金沢市）で開催予定の「TSKaigi Hokuriku 2025」のチケット販売が開始されている。

gihyo.jp

Ubuntu 26.04 LTS “Resolute Racoon”の開発, NVIDIA DGX SparkとUbuntu

25.10（questing）のリリースが完了し、次のリリースのための旅路が始まりました。Ubuntu 26.04 LTSとなるリリースは、Resolute Racoon、「決然としたアライグマ」というコードネームが与えられています。

gihyo.jp

PyCon China 2025 参加レポート ―中国のPython事情を初見聞

Pythonの国際カンファレンスPyConは世界中で開催されています。今回筆者は中国で開催されたPyCon China 2025に初めて参加してきたので、その様子をレポートします。

gihyo.jp

PyTorch 2.9リリース、パフォーマンスアップ、Wheel VariantサポートをROCm、XPU、CUDA 13に拡大

PyTorch Foundationは2025年10月15日、同組織が開発を進めるオープンソースのディープラーニングフレームワークPyTorchの新バージョンPyTorch 2.9をリリースした。

gihyo.jp

Node.js 25が登場 ―V8をアップグレード、JSON.stringifyのパフォーマンス向上、JITパイプライン最適化など

Node.js開発チームは2025年10月15日、Node.jsの最新メジャーバージョンであるNode.js v25.0.0をリリースした。

gihyo.jp

Rust製高速コードエディタ「Zed」がWindowsに対応

Zed Industriesは2025年10月15日、同社が開発するオープンソースのコードエディタZedのWindows版をリリースした。

gihyo.jp

Pixel Watch 2/3向けにWear OS 6が配信開始

Googleは、Android 16をベースとしたWear OS 6をPixel Watch 2と3に対して配信を開始しました。Bluetooth/WiFiモデルとLTEモデルの両方が対象です。

gihyo.jp

PyCon TW 2025カンファレンスレポート

こんにちは、齊藤優です。PyCon TW 2025のスピーカーとして登壇してきたので、参加レポートをお伝えします。PyCon TW 2025は2025年9月5日から7日にかけて台湾の台北で実施されました。

gihyo.jp

GitLab企業経営調査2025・日本版の概要と、開発プロセス全体を効率化するGitLab Duo Agent Platform

GitLabは2025年9月25日、調査レポート「GitLab企業経営調査2025（日本版）ソフトウェアイノベーションによる経済効果」とGitLab Duo Agent Platformを紹介するメディア向けの発表会を行った。発表したのはGitLabのHead of Japanである小澤正治氏。この記事ではその模様をレポートする。

gihyo.jp

第883回　Minisforum AI X1 PROでLLMを高速に動作させる

今回はベアボーンのMinisforum AI X1 PROにUbuntu 24.04.3をインストールし、さらにROCm 6.4.4とllama.cppを組み合わせてLLMを高速に動作させます。

gihyo.jp

Visual Studio Code、コーディングエージェントによるマージコンフリクトの解決アクションの追加、ネストされたAGENTS.mdの設置、AppleアカウントでのGitHub Copilotログイン可能に

Visual Studio Codeは2025年10月9日、バージョン1.105をリリースした。この記事ではいくつかの新機能と改善点を紹介する。

gihyo.jp

第256回　MySQL Group ReplicationのFlow Control

MySQL Group Replicationでは、データベースの更新を行うノードを制御するために、Flow Controlという仕組みが提供されています。

azukiazusa のテックブログ2

Playwright Agents によるテストの自動生成を試してみた

Playwright v1.56 で導入された Playwright Agents は、Planner、Generator、Healer の 3 つのエージェントで構成されており、アプリケーションコードを解析してテストケースの計画、テストコードの生成、失敗したテストの修正を自動化できます。この記事では、Claude Code から Playwright Agents を呼び出して、シンプルなカンバンアプリのテストコードを自動生成する手順を紹介します。

azukiazusa のテックブログ2

ChatGPT 内でアプリを直接操作する Apps SDK に自作のアプリを接続する

Apps in ChatGPT は ChatGPT のチャット内で会話の流れに応じて外部のアプリを呼び出し、インタラクティブな操作を可能にする機能です。アプリごとに独自の UI コンポーネントを提供し、ユーザーはチャット画面からシームレスな体験でアプリを操作できます。この記事では Apps SDK を使用して、実際に ChatGPT 内で動作するシンプルなアプリを作成する手順を紹介します。

azukiazusa のテックブログ2

Claude Code の設定をプラグインで共有する

Claude Code は強力なコーディング支援ツールですが、効果的に活用するためには適切な設定が必要です。プラグインを使用することで、スラッシュコマンド、サブエージェント、MCP サーバー、フックなどの設定をパッケージ化し、他のユーザーと簡単に共有できます。この記事では、Claude Code のプラグインの作成方法と利用方法について解説します。

gihyo.jp

10回目を迎えた「iOSDC Japan 2025」カンファレンスレポート

今回で10回目の開催となるiOSDC Japan 2025をレポートします。

gihyo.jp

第18回　日常から離れる楽しさ：一般相対論をExcelで

書籍『幾何で見える必ずわかる一般相対性理論』の補講、第18回です。

gihyo.jp

Claude Code、プラグイン機能をパブリックベータで提供開始

Anthropicは2025年10月9日、Claude Codeのプラグイン機能をパブリックベータで提供することを発表した。

gihyo.jp

Ubuntu 25.10 “Questing Quokka”のリリース

10月9日、Ubuntu 25.10 ("Questing Quokka") がリリースされました。

gihyo.jp

Gemini CLIに拡張機能が登場 ―よく使うツールやMCPサーバー、カスタムコマンドをパッケージ化して適用可能に

Googleは2025年10月8日、AIコーディングエージェントGemini CLIのv0.8.0アップデートで拡張機能が使用できるようになったことを発表した。

gihyo.jp

「PyCon mini 東海 2025」11/8に開催、参加登録受け付け中

東海地方のPythonコミュニティによる技術カンファレンス「PyCon mini 東海 2025」が2025年11月8日（土）、名古屋市で開催される。

gihyo.jp

ReactプロジェクトがLinux Foundationに移管され「React Foundation」設立

2025年10月7日、ReactおよびReact NativeがLinux Foundation傘下のReact Foundationに移行することが発表された。

gihyo.jp

Vega OS搭載！Amazonの新製品「Fire TV Stick 4K Select」発表

Amazonの新製品が発表されました。スマートテレビの「Fire TV Omini QLED」「Fire TV 2」「Fire TV 4」、そして、ステック型のストリーミングメディアプレイヤーの「Fire TV Stick 4K Select」です。

gihyo.jp

ノーコードでAIミニアプリ作成できるツール「Opal」、日本でも利用可能に

Googleは2025年10月7日、ノーコードでAIミニアプリを構築できる実験的ツール「Opal」の提供範囲を拡大し、日本を含む15か国にも段階的に提供を開始することを発表した。

gihyo.jp

UI操作に最適化されたモデルGemini 2.5 Computer Useが公開プレビューに

Googleは2025年10月7日、UI操作に最適化された新しいモデル「Gemini 2.5 Computer Use」を公開プレビューで提供開始した。

gihyo.jp

第882回　Ubuntu 25.10の変更点

今回は10月9日にリリースされる予定のUbuntu 25.10の特徴的な変更点をお知らせします。

gihyo.jp

Codexの一般提供開始 ―新しいSlack統合、Codex SDK、管理機能を追加

OpenAIは2025年10月6日、コーディングエージェントCodexの一般提供を開始した。またこれに合わせて、有料プラン向けの3つの新機能もリリースされた。

gihyo.jp

OpenAI、エージェントを構築、デプロイ、最適化するツール「AgentKit」を発表

OpenAIは2025年10月6日、AIエージェントを構築、デプロイ、最適化するためのツールキット「AgentKit」を発表した。

gihyo.jp

Linus、Rustのフォーマットチェックを「無神経でクレイジー」と酷評

10月12日に予定されている「Linux 6.18」のマージウィンドウ終了と最初のリリース候補版の公開に向け、プルリクエストのチェックに大忙しのLinusが、マージウィンドウ期間中はプルリクエストに対するLinusの手厳しい批判が増える時期でもある。

gihyo.jp

ブラウザ上でお手軽動画圧縮

今回は、Misskey v2025.10.0に含まれる予定の「動画圧縮機能」で採用した、ブラウザ上で動画処理を行えるライブラリMediabunnyを紹介します。

gihyo.jp

AIツール「Copilot 3D」を使って作成した3DモデルをBlenderにインポートしてみよう

第62回目は、Microsoftが提供しているAIツール「Copilot 3D」を使用して作成した3DモデルをBlenderにインポートする方法や、編集する方法などを見ていきます。

azukiazusa のテックブログ2

MCP のツールアノテーションでユーザーにヒントを提供する

MCP ではツールアノテーションを使用して、ユーザーにツールの動作に関するヒントを提供できます。例えば `readOnlyHint` を設定することで、ツールがデータを変更しないことを示すことができます。この記事では TypeScript SDK を使用して MCP サーバーでツールアノテーションを設定し、Claude Code クライアントでどのように表示されるかを確認します。

gihyo.jp

GitHub、マージコンフリクトをワンクリックで解決可能な新しいUIを提供開始

GitHubは2025年10月2日、プルリクエストの際、マージコンフリクトが発生したときにWebインターフェース上でワンクリックで解決可能なボタンの提供を開始した。

gihyo.jp

U-22プログラミング・コンテスト2025 最終審査に進む32作品を発表

U-22プログラミング・コンテスト実行委員会は2025年10月3日、「U-22プログラミング・コンテスト2025」エントリー332作品のうち、事前審査を通過した32作品を発表した。

gihyo.jp

第十二回 技術書同人誌博覧会（技書博12）、10月26日にソニックシティ（埼玉・大宮）にて開催

技術に関する同人誌の即売会「第十二回 技術書同人誌博覧会（技書博12）」が、2025年10月26日にソニックシティ（埼玉県さいたま市）にて開催される。

gihyo.jp

Google、コーディングエージェントJulesをコマンドラインから操作する「Jules Tools」をリリース

Googleは2025年10月2日、AIコーディングエージェントJulesをコマンドラインで操作できるツールキット「Jules Tools」をリリースした。

gihyo.jp

Ubuntu 25.10（questing）の開発; リリースまであと一週間、26.04へ向けて

questing（Ubuntu 25.10）のリリースまで一週間になりました。

gihyo.jp

Markdownをプログラミング言語として用いる仕様駆動開発の可能性 ——GitHub Blogより

GitHubは2025年9月30日、ブログ記事「Spec-driven development: Using Markdown as a programming language when building with AI」を公開し、Markdownをプログラミング言語として用いる仕様駆動開発の可能性の一端が紹介された。

gihyo.jp

Google、AIを使ってGoogleドライブのランサムウェアを検知しファイルを復元する機能を発表

Googleは2025年10月1日、パソコン版GoogleドライブにAIを活用したランサムウェア検知機能を搭載したことを発表した。

gihyo.jp

Microsoft、エージェント型AIアプリ開発基盤「Microsoft Agent Framework」を発表

Microsoftは2025年10月1日、エージェント型AIアプリを開発するためのSDKとランタイムである「Microsoft Agent Framework」を発表、パブリックプレビューとしてリリースした。

gihyo.jp

来年リリース！？ PC向けAndroidが登場

現状は、PC向けのクライアントOSと言えば、WindowsとmacOSが大半を占めています。しかし、Qualcommが開催したSnapdragon Summit 2025のオープニング基調講演で、この状況を変えるかもしれない未来が語られました。

gihyo.jp

OpenAI、動画生成モデル「Sora 2」とソーシャルアプリ「Sora」を発表

OpenAIは2025年9月30日、動画生成モデルSora 2を発表し、同モデルを使える新しいソーシャルアプリSoraのiOS向けの提供とそ段階的利用を米国とカナダで開始した。

gihyo.jp

Linux 6.17リリース、Ubuntu 25.10／Fedora 43などに搭載へ

Linus Torvaldsは9月28日（米国時間）、当初のスケジュールどおりに「Linux 6.17」を公開した。

gihyo.jp

第881回　IPv6オンリー環境でも家庭内サーバーをインターネットに公開できる、トンネル型リバースプロキシPangolinを構築する

DS-Lite接続のようなキャリアグレードNATな環境では、従来のようにIPv4アドレスで家庭のルーターまで到達できません。こうした問題を解決できるのが、今回紹介するトンネル型リバースプロキシです。

gihyo.jp

第122回　セミナー「データ活用の現状と近未来」開催、MySQL HeatWave 9.4.1および9.4.2リリース、PostgreSQL新メジャーバージョン18リリース

この連載はOSSコンソーシアム データベース部会のメンバーがオープンソースデータベースの毎月の出来事をお伝えしています。

gihyo.jp

Microsoft 365 Copilot、エージェントを使ったバイブワーキング（Vibe working）に対応へ ——Officeアプリにエージェントモード、CopilotチャットにOfficeエージェントを搭載

Microsoftは2025年9月29日、Microsoft 365 Copilotにおいて、エージェントを使ったバイブワーキング（Vibe working）を実現するため、Officeアプリに「エージェントモード」とCopilotチャットでの「Officeエージェント」を搭載することを発表した。

gihyo.jp

OpenAI、ChatGPTにACP（Agentic Commerce Protocol）をベースとしたインスタントチェックアウト機能を導入 ―ACPはオープンソースとして公開

OpenAIは2025年9月29日、ChatGPTにAIエージェントコマースに便利な機能であるインスタントチェックアウト機能を導入し、米国のChatGPTユーザーが利用できるようになったことを発表した。

gihyo.jp

Claude Sonnet 4.5リリース、Claude CodeにネイティブVS Code機能拡張など大幅機能強化

Anthropicは2025年9月30日、同社のAIモデルClaude Sonnetの新バージョンSonnet 4.5をリリースした。

gihyo.jp

Python 3.14の新機能：asyncioタスク可視化機能を使ってみよう

2025年9月の「Python Monthly Topics」は、Python 3.14で追加されるasyncioタスク可視化機能であるasyncio psコマンド、asyncio pstreeコマンドと、asyncio.print_call_graph()関数、asyncio.capture_call_graph()関数を紹介します。

gihyo.jp

第255回　ユーザー定義変数を使ってみよう

MySQL には「ユーザー定義変数（User-defined variables）」と呼ばれる仕組みがあります。

azukiazusa のテックブログ2

Chrome DevTools MCP で AI エージェントのフロントエンド開発をサポートする

自律的な AI エージェントを利用したコーディングでは、生成したコードを実行した結果からフィードバックを得て、コードを改善していく反復的なプロセスが重要です。しかし、フロントエンド開発では、生成したコードはブラウザ上で実行されるため、AI エージェントが直接コードを実行したり、ブラウザのコンソールログを取得したりすることは困難です。Chrome DevTools MCP はこの課題を解決するためのツールです。

gihyo.jp

GitHub、プルリクエストの新しいFiles changedページで未変更行へのコメントを可能に

GitHubは2025年9月25日、プルリクエストの新しい「Files changed」ページにおいて、変更されたファイル内の未変更行を含む任意の行へコメントできる機能を追加したことを発表し、リポジトリ単位で段階的に展開していることを案内した。

gihyo.jp

“危険なデスクトップイメージ”を毎日お届け ―Ubuntu Dangerous Daily Desktop images提供開始

2025年10月に予定されている「Ubuntu 25.10」のリリースを間近に控えるなか、Ubuntuリリースチームは9月19日から「Dangerous Daily Desktop（/daily-dangerous）」と名付けたデスクトップイメージの公開を開始した。

gihyo.jp

Cloudflare Workersからメールを直接送信できる「Cloudflare Email Service」発表 ―11月からプライベートベータ版として提供開始

Cloudflareは2025年9月25日、同社のサーバレスアプリケーションプラットフォームCloudflare Workersからトランザクションメールを直接送信できる新機能「Cloudflare Email Service」を発表した。

gihyo.jp

GitHub Copilot CLIが公開プレビューに

GitHubは2025年9月25日、GitHub Copilot CLIの公開プレビュー版を発表した。

gihyo.jp

Sakana AI、ハイパフォーマンスなAIアルゴリズム探索フレームワーク「ShinkaEvolve」をオープンソースとして公開

Sakana AIは2025年9月25日、LLMを用いて桁違いに少ないリソースでアルゴリズムを探索できる新しいフレームワーク「ShinkaEvolve」を発表、Apache 2.0ライセンスの元GitHub上に公開した。

gihyo.jp

Ubuntu 25.10（questing）の開発; ベータリリースとKernel Freeze

questing（Ubuntu 25.10）はベータがリリースされ、10月9日のGAを目指してカーネルも確定され、あと3週間ほどをQA（と、まれに隠し球として投入される新機能）に費やすフェーズになりました。

gihyo.jp

Googleスプレッドシート、日本語でもAI関数によるデータ生成機能をWorkspaceやAIプラン加入者に順次提供へ

Googleは2025年9月23日、日本語を含む7つの言語でもGoogle WorkspaceやGoogle AIプランの加入者向けに、GoogleスプレッドシートのAI関数の提供を始めることを発表した。

gihyo.jp

さくらインターネット、AIモデルを手軽に利用できるAPIサービス「さくらのAI Engine」の一般提供を開始

さくらインターネットは2025年9月24日、生成AI向け推論API基盤「さくらのAI Engine」の一般提供を開始した。

gihyo.jp

NVIDIA、日本の人口統計や地理・文化にもとづいたオープンソースのAI開発向けデータセットを公開

NVIDIAは2025年9月23日、日本における人口統計、地理的分布、性格特性の分布に基づいて合成的に生成されたペルソナのオープンソースデータセット「Nemotron-Personas-Japan」を公開した。

gihyo.jp

第28回 スクラッチで考える生成AIとコンテンツ利用プログラミング

「スクラッチでプログラミングをはじめよう」第28回です。

gihyo.jp

rabbitOS 2で“とっつきにくさ”は解消されたのか②

前回に引き続き、ポケットサイズのAIデバイスrabbit r1向けOSの最新版「rabbitOS 2」について取り上げます。

gihyo.jp

npmjs.com、最近のサプライチェーン攻撃を鑑みて、認証と公開プロセスの強化を計画

npmjs.comを管理しているGitHubは2025年9月24日、npmエコシステムで最近顕在化しているアカウント乗っ取りおよび自己増殖型マルウェアによるサプライチェーン攻撃があったことを鑑みて、認証と公開プロセスを強化する計画を発表した。

gihyo.jp

Figma、リモートMCPサーバーをオープンベータとして段階的に提供開始 ——Figma Makeからのリソース取得、Code Connect UIコンポーネントも追加

Figmaは2025年9月23日、リモートMCPサーバーをオープンベータとして段階的に提供を開始した。

gihyo.jp

Chrome DevTools MCPサーバー、コーディングエージェント向けに公開プレビュー開始

Googleは2025年9月23日、AIコーディングエージェント向けに Chrome DevTools MCPサーバーの公開プレビューを開始した。

gihyo.jp

第880回　GPUに画像の文字を解析させる、あるいはPyTorch入門

今回はAI文章画像解析エンジンであるYomiTokuを通じて、GPUメーカーごとに用意されているPyTorchのインストール方法を紹介します。

stin's Blog

Next.js on Cloudflare Workers (OpenNext) で Drizzle + D1 を使ったユニットテストを書く

OpenNext は Next.js アプリケーションを Vercel 以外に簡単にデプロイするためのツールです。Cloudflare Workers をサポートしています。 Cloudflare 自体も OpenNext によるデプロイを推奨しており、次のコマンドによって OpenNext による Next.js ア...

azukiazusa のテックブログ2

YAML ファイルで AI エージェントを構築する cagent

cagent は Docker 社が開発した AI エージェントフレームワークです。YAML ファイルでエージェントの振る舞い・役割・使用するツールを宣言的に定義でき、コードを 1 行も書かずにエージェントを構築できます。この記事では cagent の概要とインストール方法、YAML ファイルの書き方、実際にエージェントを動作させるまでの手順を解説します。

azukiazusa のテックブログ2

browserslist で Baseline を設定できるようになった

browserslist は、フロントエンド開発において、どのブラウザをサポートするかを指定するためのツールです。これにより、開発者はターゲットとするブラウザの範囲を簡単に定義でき、CSS や JavaScript のトランスパイルやポリフィルの適用を自動化できます。

gihyo.jp

Fedora、Forgejoベースのホスティング/コラボレーションプラットフォーム「Fedora Forge」をソフトローンチ

Fedoraプロジェクトは9月18日、プロジェクト内のサブプロジェクトやSIG（Special Interest Groups）の活動をサポートする新しいコラボレーションプラットフォーム「Fedora Forge」をソフトローンチした。

gihyo.jp

xAI、高コストパフォーマンスの2Mコンテキストウィンドウ・マルチモーダル推論モデル「Grok 4 Fast」をリリース

xAIは2025年9月19日、200万トークンのコンテキストウィンドウを備えたコストパフォーマンスの高い最新の推論モデル、Grok 4 Fastをリリースした。

gihyo.jp

AIツール「Claude」を使ってオブジェクトをたくさん並べてみよう

第61回目は、「Claude」を使って、Blenderのオブジェクトを均等に並べて生成してみたり、ランダムに並べて生成してみたりすると、どのような結果になるのかを見ていきます。

azukiazusa のテックブログ2

GitHub Actions で YAML アンカーを使う

GitHub Actions のワークフローで YAML アンカーがサポートされました。YAML アンカーを使用すると、ワークフロー内でコードの重複を避け、共通の設定を再利用できます

azukiazusa のテックブログ2

AI エージェントのための Agent Payments Protocol (AP2) を試してみた

現状の決済システムでは人間が信頼できる画面上で直接購入ボタンをクリックすることを前提としており、自立型の AI エージェントがユーザーに代わって決済することは想定されていません。そこで Google により Agent Payments Protocol (AP2) と呼ばれる新しいプロトコルが提案されました。プラットフォーム間でエージェント主導の決済を安全に開始・処理することを可能にします。この記事では AP2 のサンプルコードを実際に試してみた手順を紹介します。

blog.jxck.io

サプライチェーン攻撃への防御策

前回は、Nx の事例をベースに「パッケージを公開する側」の対策について解説した。今回は、「パッケージを使う側」、もっと言えば「OSS を使う上で開発者が考えるべきこと」について考察する。

gihyo.jp

FlutterKaigi 2025、11/13開催、チケット販売中

Flutterに関する年次コミュニティカンファレンス「FlutterKaigi 2025」が2025年11月13日（木⁠）に東京、大手町プレイス ホール＆カンファレンスにて開催される。

gihyo.jp

ワイヤーフレーム作成ツールFrame0、1.1.0をリリース ——エージェント機能を使ったワイヤーフレーム生成などが可能に

Frame0は2025年9月17日、ワイヤーフレーム作成ツールFrame0のバージョン1.1.0をリリースした。今回のアップデートで、Frame0 AI Agentを実験的に追加した。

gihyo.jp

GNOME 49リリース ―Showtime、Papersなど最新のデスクトップエクスペリエンスを提供

GNOMEプロジェクトは9月17日、「GNOME 49“Brescia”」の正式リリースを発表した。

gihyo.jp

Rust 1.90リリース、LinuxのデフォルトリンカとしてLLDを採用

Rustリリースチームは2025年9月18日、Rustの新バージョン1.90.0をリリースした。

gihyo.jp

Google、ChromeにGeminiをより深く統合、AIエージェント型ブラウジングアシスタントやアドレスバーでのAIモード検索を実現へ ―9/18から米国向け英語版Chromeで提供開始

Googleは2025年9月18日、WebブラウザChromeの米国ユーザー向け英語版に複数のレベルでAIモデルGeminiを組み込み、AIによるブラウジング体験を向上させるアップデート版を提供することを発表した。

gihyo.jp

CUDAツールキットとランタイムのUbuntuリポジトリ経由での配布、Ubuntu 25.10（questing）の開発; Test RebuildとRust版Coreutilsの改善

Canonicalが、CUDAツールキットとランタイムのUbuntuリポジトリからの配布が可能になったことをアナウンスしています。

gihyo.jp

Google、Discover上のメディアやクリエイターをフォロー可能に ——YouTube Shortsの動画、𝕏やInstagramの投稿も掲載へ

Googleは2025年9月17日、Googleアプリ内のDiscoverで、ユーザーが関心のあるメディアやクリエイターをフォローできるようにすること、また今後数週間のうちにYouTube Shortsの動画、𝕏やInstagramの投稿を表示対象として追加することを発表した。

gihyo.jp

OpenAI、大学生による学生のためのChatGPT役立つチャット例「100 chats for college students」を公開

OpenAIは2025年9月17日、ChatGPTを大学生が利用する場合に役立つチャット例「100 chats for college students」を公開した。

gihyo.jp

DuckDB 1.4.0リリース、今後のLTSリリースは1つおきに

DuckDB Foundationは2025年9月16日、オープンソースの組み込み型データベースDuckDBの新バージョン1.4.0（コードネーム“Andium”）をリリースした。

gihyo.jp

rabbitOS 2で“とっつきにくさ”は解消されたのか

ポケットサイズのAIデバイスrabbit r1向けOSの最新版「rabbitOS 2」の最新動向について取り上げます。

gihyo.jp

Google、Agent Payments Protocol (AP2)を発表 ——AIエージェント決済を支えるオープンプロトコル

Googleは2025年9月17日、AIエージェントがユーザーに代わって安全に支払いを実行するためのオープンプロトコル「Agent Payments Protocol (AP2)」を発表した。

gihyo.jp

GitHub MCP Registryが公開 ——OSSコミュニティのMCPレジストリとの統合も予定

GitHubは2025年9月16日、MCPサーバーを発見・利用するための新たな拠点として「GitHub MCP Registry」を公開した。

gihyo.jp

第181回　2020年代前半のウェブデザインと今後のトレンド［後編］

2020年から2024年までに取り上げられたデザイン要素から、「ウェブデザインのトレンド」とは何か、それ以降のトレンドがどのような方向へと向かっていくのかを考察していきます。後編です。

gihyo.jp

第879回　ser2netで作るリモートシリアルコンソール環境

今回はシリアルコンソールサーバーを、Ubuntuと適当なマシンを使って安価に作ってみましょう。

gihyo.jp

Java 25リリース――初心者向け機能や起動時間短縮など

2025年9月16日（米国時間）にLTS（Long-Term Support、長期サポート）であるJava 25がリリースされました。

gihyo.jp

GNOME 49、X11サポートを一時的に復活

Linuxデスクトップ環境としてもっとも多くのユーザに使われているGNOMEは現在、X11のサポートを段階的に終了し、Waylandセッションのみをサポートすることを計画している。

gihyo.jp

OpenAI、コーディングエージェントにより最適化した「GPT-5-Codex」をリリース

OpenAIは2025年9月15日、AIコーディングエージェントCodex向けにさらに最適化されたGPT-5の新バージョン「GPT-5-Codex」をリリースした。

gihyo.jp

第254回　知っておくと得するかもしれないMySQLの組み込み関数（その2）

今回は以前紹介した 第248回 知っておくと得するかもしれないMySQLの組み込み関数 の「その2」として、「知っておくと得する」可能性のある関数を、再びいくつかピックアップしてご紹介します。

gihyo.jp

第180回　2020年代前半のウェブデザインと今後のトレンド［前編］

2020年から2024年までに取り上げられたデザイン要素から、「ウェブデザインのトレンド」とは何か、それ以降のトレンドがどのような方向へと向かっていくのかを考察していきます。前編です。

azukiazusa のテックブログ2

pnpm の minimumReleaseAge オプションでサプライチェーン攻撃を防ぐ

最近は npm パッケージのサプライチェーン攻撃が増えています。幸いほとんどの場合悪意のあるパッケージは公開から 1 週間以内に削除されるため、公開から一定期間が経過したパッケージのみをインストールすることでリスクを軽減できます。

azukiazusa のテックブログ2

自然言語で CI/CD パイプラインを定義する Agentic Workflows

Agentic Workflows は自然言語で CI/CD パイプラインを定義できるツールとして GitHub Next が開発しています。自然言語で定義されたワークフローは GitHub CLI の拡張機能として提供される gh aw コマンドでコンパイルして実行できます。これは継続体なAI（Continuous AI）を実現するためのツールです。

gihyo.jp

Visual Studio Code、AGENTS.md対応、言語モデルの自動選択機能の追加、拡張機能から言語モデルを提供するAPIを実装 ——Hugging Faceなどの拡張機能からも最新のオープンモデルが使えるように

Visual Studio Code（以下VS Code）は2025年9月11日、August 2025（version 1.104）をリリースした。

gihyo.jp

Ubuntu 25.10（questing）の開発; UI Freezeとrust-coreutilsの投入

questing（Ubuntu 25.10）の開発はUI Freezeが行われ、「ドキュメントのための時間」に突入しました。

gihyo.jp

MCPサーバーの公式オープンカタログ「MCPレジストリ」がプレビュー公開 ―信頼できるMCPサーバーの発見と独自のサブレジストリ展開が容易に

2025年9月8日、MCPコミュニティは、MCP（Model Context Protocol）クライアントに信頼できるMCPサーバーの一覧を提供する公式リスト「MCPレジストリ」をプレビュー版として公開した。

gihyo.jp

ミニマリスト向けの期待の星「Bluefox NX1」

今回は手のひらサイズのミニスマホ「Bluefox NX1」について取り上げます。

gihyo.jp

第878回　VirtualBox 7.2の変更点

今回は8月14日（現地時間）にリリースされたVirtualBox 7.2の変更点について説明します。

gihyo.jp

npmにサプライチェーン攻撃、Chalk、debug、ansi-stylesなど18個のnpmパッケージにマルウェアが注入

2025年9月8日、Chalk、debug、ansi-stylesなど18個の人気npmパッケージにサプライチェーン攻撃の影響があったことが報告された。

gihyo.jp

NotebookLM、レポート作成に「ブログ投稿形式」などをAIが提案する機能が登場、フラッシュカードやテストなど学習支援機能も拡充

Googleは2025年9月8日、同社が提供するAIノートサービス「NotebookLM」で多彩なレポート生成やテスト作成などユーザの学習を支援する新機能をリリースした。

gihyo.jp

初公開から7年、Openwall傘下のセキュリティモジュール「Linux Kernel Runtime Guard 1.0.0」がリリース ―既存のカーネルに後から適用、幅広いカーネル / ディストリビューションに対応

Openwallプロジェクトは9月2日、Linuxカーネルの動作中に脆弱性攻撃や不正な改変を検知するオープンソース（GPLv2）のセキュリティモジュール「Linux Kernel Runtime Guard（LKRG） 1.0.0」をリリースした。

gihyo.jp

Google、検索におけるAIモードで「日本語」対応を発表

Googleは2025年9月9日、検索におけるAIモードで、日本語を含む5つの言語に対応したことを発表した。今後数日で段階的に利用可能になるとみられる。

stin's Blog

Drizzle ORM を使った書き捨てスクリプトから Cloudflare D1 にアクセスしたい

Cloudflare D1 (以下 D1) は Cloudflare のリレーショナルデータベースサービスです。実態はリモートにある SQLite です。 Drizzle ORM は TypeScript で各種データベースに接続するデータベースクライアントで ORM です。テーブルスキーマ管理と型安全性に優れています...

gihyo.jp

AIツール「Claude」を使って画像をもとにBlender上でモデリングしてみよう 〜Hyper3D使用と未使用の比較〜

第60回目は、画像をAIに見せその画像をもとに、Blender上でモデリングを行っていく様子を見ていきます。

azukiazusa のテックブログ2

仕様駆動開発を支える Spec Kit を試してみた

仕様駆動開発（Specification-Driven Development, SDD）は、AI コーディングエージェントを活用した新しいソフトウェア開発スタイルです。GitHub が提供する Spec Kit は、仕様駆動開発を支援するためのツールキットであり、AI との対話を通じて正確な受け入れ基準の定義とコード生成を支援します。この記事では Spec Kit を使用して仕様駆動開発を試してみます。

gihyo.jp

#02 EuroPython 2025 2日目キーノート、3日目突然のLT登壇、そしてクロージング、スプリントへ

プラハで開催されたEuroPython 2025のカンファレンス2日目からクロージング、その後のスプリントまでをレポートします。

gihyo.jp

Ubuntu 25.10（questing）の開発; questing snapshot 4とsudo-rsの実戦投入

8月末にquesting（Ubuntu 25.10）の最後のスナップショット、snapshot 4がリリースされました。

gihyo.jp

Google、デバイス向けオープン埋め込みモデルEmbeddingGemmaをリリース

Googleは2025年9月4日、デバイス埋め込みAI向けに設計された、高効率な新しいオープンモデル「EmbeddingGemma」をリリースした。

gihyo.jp

第877回　リアルタイム文字起こしをローカルマシンで実現できるWhisperLiveKitを使ってみよう

音声認識・文字起こしを実現できるモデルWhisper。ここ数年、それを元にしたさまざまなツールも登場しました。今回紹介するWhisperLiveKitもそのひとつです。

gihyo.jp

Microsoft、「6502 BASIC」をオープンソースとして公開

Microsoftは2025年9月3日、同社が1977年に開発したBASICインタプリタ「6502 BASIC」を、MITライセンスのもとGitHub上にオープンソースとして公開した。

gihyo.jp

自由か、それとも安全か。Androidで開発者認定を導入

8月26日、GoogleはAndroid Developer BlogでPlayストア外からアプリをインストールする「サイドロード」の安全性を高めるために、開発者認証制度（Developer Verification）を導入する計画を発表しました。

gihyo.jp

みてね写真プリントML自動提案の仕組み

みてね×gihyo.jpスペシャル企画。12回目はML自動提案による写真プリントの仕組みについて解説します。

gihyo.jp

9/26、27、広島で開催「PyCon JP 2025」タイムテーブル発表、チケット販売中

2025年9月26日（金）、27日（土）に広島国際会議場で開催されるPyCon JP 2025のタイムテーブルが公開された。

gihyo.jp

GitHub、仕様駆動開発ツールキット「Spec Kit」を紹介 ——コーディングエージェントを利用して仕様を解釈し、開発計画・タスク分解・実装をおこなう

GitHubは2025年9月2日、コーディングエージェントを利用した仕様駆動開発（Spec-Driven Development）のためのツールキット「Spec Kit」を開発し、公式ブログで紹介した。

gihyo.jp

NotebookLM、音声解説の出力形式に「概要」「評論」「議論」の形式を新たに追加

Googleが提供するNotebookLMは2025年9月3日、音声解説の出力形式に「概要」「評論」「議論」を追加したことを発表し、段階的に提供し始めた。

blog.jxck.io

Nx の攻撃から学べること #s1ngularity

Nx リポジトリが攻撃を受け、広範囲にわたるインシデントが発生した。今回の事例は、GitHub Actions を中心に複数のステップが組み合わさった攻撃であり、過去に何度も発生してきた攻撃と本質的には変わらない。しかし、途中で AI が何度か登場するため「AI が書いたコードをマージしたから」などといった表面的な反応もあるが、実態はそこまで単純な話でもない。また、「自分のプロジェクトは Nx を使っていないから関係ない」とも言えない攻撃であるため、特にフロントエンドエンジニアは全員注意と確認が必要となる。この攻撃が何だったのか、そこから学べることは何なのか、解説する。

gihyo.jp

第253回　知っているとちょっと便利なVALUES行コンストラクタ

SQLを書いていると、ちょっとしたテストデータを用意したいときや、固定の値を一時的にテーブルのように扱いたい場面があると思います。

gihyo.jp

Linus、Bcachefsのステータスを「外部メンテナンス」に変更

Linus Tovaldsは8月31日、開発中のLinuxカーネル「Linux 6.17」の4本目のリリース候補版となる「Linux 6.17-rc4」を公開した。

gihyo.jp

11/14、15開催「YAPC::Fukuoka 2025」チケット販売中

2025年11月14日（金）、15日（土）の2日間、Perlを中心としたIT技術に関する年次カンファレンス「YAPC::Fukuoka 2025」が福岡工業大学にて開催される。

gihyo.jp

そこそこエンジニアでもいいんじゃない？

この連載では、それぞれのレベル別にAWSの学び方を紹介します。第4回は、「既にAWSを知っている人が、エンジニアとしてのレベルアップを目指すにはどうすべきか」についていくつかの方策を提案します。

gihyo.jp

AIニュースノート：nano-bananaが話題に、AGENTS.mdの採用広がる、Microsoft Copilotに3Dモデリング機能が追加、ChatGPTでプロジェクト専用メモリー搭載、Claude for Chromeの安全設計など

gihyo.jpのニュース記事として取り上げていなかったもののなかから、直近の興味深いAIに関連するニュース概要を簡単にまとめてみました。

gihyo.jp

第121回　連載10周年記念セミナー第1弾報告、MySQLで自然言語を使った機械学習処理への第一歩、PostgreSQLのセキュリティ脆弱性の修正版を確認

この連載はOSSコンソーシアム データベース部会のメンバーがオープンソースデータベースの毎月の出来事をお伝えしています。

azukiazusa のテックブログ2

AI コーディングエージェントの管理を行う Vibe Kanban を試してみた

Vibe Kanban は、AI コーディングエージェントの管理を支援するためのツールです。カンバン方式の UI でタスク管理を行い、各タスクに対して AI エージェントを割り当てて人間がその進捗を管理できます。この記事では Vibe Kanban を使用して AI コーディングエージェントの管理を実際に試してみます。

gihyo.jp

「Go Conference 2025」9/27、28に開催、チケットは8/29 19:00販売開始

プログラミング言語Goに関する年次カンファレンス「Go Conference 2025」が、2025年9月27日（土）、28日（日）の2日間にわたってに東京・渋谷のAbema Towersにて開催される。

gihyo.jp

10/4開催「builderscon 2025」チケット販売中

技術分野を限定しないエンジニア向けのカンファレンス「builderscon 2025」が2025年10月4日（土）に埼玉会館で開催される。現在参加チケットが販売中。

gihyo.jp

「ぷよぷよ」を改造してゲームプログラミングを楽しもう！ ——書籍『すぐわかる！ ぷよぷよプログラミング』発売記念イベントより

2025年8月11日（山の日）に開催された『すぐわかる！ ぷよぷよプログラミング　SEGA公式ガイドブック』の発売記念イベントのレポートです。

gihyo.jp

xAI、コーディングに特化した高速なエージェント向け推論モデル「Grok Code Fast 1」をリリース

xAIは2025年8月28日、エージェントコーディング向けに優れた性能をもつ高速でコストパフォーマンスの高い推論モデル「Grok Code Fast 1」を発表した。

gihyo.jp

Ubuntu 25.10（questing）の開発; MySQLのメモリ効率の改善、 NVIDIA Jetson Thorのサポート

データベースワークロードに関連する、興味深い取り組みが行われています。MySQL 8.4のUbuntuパッケージにおいてtcmallocを利用するようにしたことで実現されています。

gihyo.jp

OpenAI、Codexの機能を強化し、VS CodeやCursorから使うための新しい拡張機能を公開 ——Codex CLIでは画像入力、メッセージキューイング、ウェブ検索も可能に

OpenAIは2025年8月27日、Codexの機能を強化し、VS CodeやCursorからの使うための新しい拡張機能をリリースした。またGPT-5のリリース以降、Codex CLIの開発が活発に行われており、今回のアップデートで画像入力、メッセージキューイング、ウェブ検索などの新機能が追加された。

gihyo.jp

PrefectではじめるPythonワークフロー・フレームワーク

2025年8月の「Python Monthly Topics」は、データパイプラインやワークフロー、ETLで利用されるワークフロー・フレームワーク「Prefect」について紹介します。

gihyo.jp

これからのFire OS、どうなるのか見てみよう

今後登場予定のAndroid 16 QPR2で、アプリが持つ主要機能をアシスタントが実行できる「App Functions API」が導入されます。

gihyo.jp

Google、一貫性を維持した画像編集を可能にする「Gemini 2.5 Flash Image」をリリース

Googleは2025年8月26日、新しい画像生成・編集モデル「Gemini 2.5 Flash Image」を発表した。

gihyo.jp

3DPでキューブパズルを自作してみる(2) ～キューブパズルデザインの完成とプリント～

前回はキューブパズルのおおまかな仕組みについて解説しました。今回はその続きの具体的なデザインをしていきます。

gihyo.jp

第876回　夏休み特別企画 自作PCを組もう［後編］ ——組み立てたあとにローカルLLM「gpt-oss-20b」を動かす

今回は自作PCを組み立て、Ubuntuをインストールする特別企画の後編です。前編に引き続き、実際に自作PCを組み、UbuntuをインストールしてLLMを動作させるところまでを行います。

gihyo.jp

NotebookLM、「動画解説」機能の日本語対応を段階的に提供開始

Googleが提供するNotebookLMは8月25日、「動画解説」機能において英語以外の80言語で段階的に1週間以内に利用可能になることを発表した。これにより、日本語で解説動画を作成できるようになる。

gihyo.jp

Google、検索における「AIモード」を日本でも段階的に提供開始 ——まずは英文での応答から

Googleは2025年8月21日、検索サービスにおいてAIが回答をおこなう「AIモード」を日本を含む180以上の国と地域で提供開始することを発表し、日本国内でも展開され始めている。

gihyo.jp

AIツール「Claude」を使ってBlender上でモデリングしてみよう ～さらに複雑な実践編～

第59回目は、AIを使って指示を出し、Blender上でモデリングを行い、そこに自分自身で手を加えていく方法を見ていきます。

@sakupi01.com blog

🎨 CSS Advent Calendar: Day 25 / Epilogue

CSS Advent Calendar エピローグ

@sakupi01.com blog

🎨 CSS Advent Calendar: Day 24 / The Future of Web UI is Declarative. - How Design System can bridge Imperative Design?

Design と Web Design の思想を橋渡しする Design System。Semantic Design と Declarative Design System の関係性

azukiazusa のテックブログ2

Claude Code の学習モードで自分の手でコードを書く練習をしよう

コーディングに AI エージェントを活用する流れはもはや避けられないものとなっています。しかし、AI エージェントによってコーディングの多くが自動化されると、開発者が自分の手でコードを書く機会は減少してしまうというジレンマがあります。Claude Code の学習モードを使用すると、自分の手でコードを書く練習ができます。学習モードでは、AI エージェントはユーザー自身にも一部のコードの生成を依頼します。この記事では、Claude Code の学習モードの使い方について解説します。

@sakupi01.com blog

🎨 CSS Advent Calendar: Day 23 / Declarative Web Design

Intrinsic Web Design/Every Layout/Utopia と Declarative Design. そして、Container Size Queries の実現

gihyo.jp

AIニュースノート：AGENTS.mdの採用は広がる？（VS Code, cline）, ExcelのCopilot関数でAIを活用, Claude CodeがTeam・Enterpriseプランに対応など

gihyo.jpのニュース記事として取り上げていなかったもののなかから、直近の興味深いAIに関連するニュース概要を簡単にまとめてみました。

@sakupi01.com blog

🎨 CSS Advent Calendar: Day 22 / Intrinsic Web Design - Beyond Responsive and Embrace the nature of the Web

Web というメディアが本来持つ性質/値を最大限に活かす「Intrinsic Web Design」という考え方

gihyo.jp

Ubuntu 25.10（questing）の開発; Feature Freezeと「デンジャラス」Daily Desktop Image

questing（Ubuntu 25.10）の開発はFeature Freezeを迎え、一応の『仕様が確定する』タイミングとなりました。

gihyo.jp

#01 EuroPython 2025開幕までの道のり、Day 1の注目セッション

EuroPythonはヨーロッパ地域で開催されるPythonに関するカンファレンスです。毎年ヨーロッパの各地域で開催され、今年はチェコのプラハで開催されました。

gihyo.jp

Android 16 QPR2でAIアシスタントがアプリを実行する

今後登場予定のAndroid 16 QPR2で、アプリが持つ主要機能をアシスタントが実行できる「App Functions API」が導入されます。

@sakupi01.com blog

🎨 CSS Advent Calendar: Day 21 / A Quick History of Web Design

Responsive Web Design までの歴史から見る、Web の制約と特性とデザインの理想

gihyo.jp

OpenAI、AIコーディングエージェントをガイドするための「AGENTS.md」サイトを公開

OpenAIは2025年8月20日、AIコーディングエージェントをガイドするためのシンプルなフォーマット「AGENTS.md」を案内するサイトを公開した。

gihyo.jp

GPT-5、開発に使うための基礎知識　 ——ワンショットでのフロントエンド開発の各モデル比較も

今回はOpenAIの新しいモデルGPT-5を、開発者視点で徹底解説します。APIの新機能やプロンプト設計の要点、フロントエンド開発の作例と他モデルとの比較までを一気に見ていきます。

gihyo.jp

第875回　夏休み特別企画 自作PCを組もう［前編］ ——2025年8月におけるミドルローPCを組むためのパーツの選定

今回は自作PCを組み立て、Ubuntuをインストールする特別企画の前編です。まずはパーツの選定です。

@sakupi01.com blog

🎨 CSS Advent Calendar: Day 20 / CSS Scope with backgrounds

CSS Scope の背景と、CSS Scope の提案に至るまでの経緯から考察するメンタルモデル

azukiazusa のテックブログ2

コーディングエージェントが参照するファイルを統一する AGENTS.md

コーディングエージェントを使用する際にはプロジェクトの技術スタックやビルド手順、コーディング規約を記載したドキュメントを用意して、コンテキストに含めるのが一般的な手法です。 しかし、　コーディングエージェントの製品ごとに異なるファイル名で用意しなければいけないという問題がありました。

gihyo.jp

GitHub CopilotがJetBrains、Eclipse、Xcode向けのMCPサポートを一般提供開始

2025年8月14日、GitHub CopilotのMCP（Model Context Protocol）サポートが、JetBrains、Eclipse、Xcode向けに一般提供開始された。

@sakupi01.com blog

🎨 CSS Advent Calendar: Day 19 / Cascade Layers in real world use

Cascade Layers に付随して議論されたトピックと、Cascade Layers の具体的なユースケース

gihyo.jp

第252回　MySQL Shellのバイナリログダンプ・ロード機能

MySQLのバイナリログを扱う新しい機能Binary Log Dumping and Loading Utilitiesを構成する要素とその使い方について紹介します。

gihyo.jp

“11年間、魚をどうもありがとう” ―Fedoraプロジェクト前リーダー マシュー・ミラーが語るオープンソースプロジェクトの魅力とチャレンジ

11年の期間に渡ってFedoraプロジェクトを率いてきたマシュー・ミラー氏に、オープンソースプロジェクト運営の魅力と課題についてお話をうかがいました。

gihyo.jp

9/26、27開催「Kaigi on Rails 2025」チケット販売中

2025年9月26日（金）、27日（土）に東京・JPタワー ホール＆カンファレンスとオンラインのハイブリッドで開催予定の、Ruby on Railsを中心としたWeb技術に関するカンファレンス「Kaigi on Rails 2025」のチケット販売が始まっている。

@sakupi01.com blog

🎨 CSS Advent Calendar: Day 18 / Cascade Layers with background story

Cascade Layers の背景と、Cascade Layers の提案に至るまでの経緯から考察するメンタルモデル

@sakupi01.com blog

🎨 CSS Advent Calendar: Day 17 / Specificity Architecture is what CSS Architecture is

「詳細度設計」としての「CSS アーキテクチャ」、その未来’

azukiazusa のテックブログ2

LLM へのプロンプトを構造化された文書で管理する POML

POML (Prompt Orchestration Markup Language) は、Microsoft によって提案されたプロンプトを構造化された文書として管理するためのマークアップ言語です。プロンプト開発における構造の欠如や複雑なデータとの統合の困難さ、特定のフォーマットへの依存性といった課題を解決することを目指しています。

@sakupi01.com blog

🎨 CSS Advent Calendar: Day 16 / Hard Core Scoping of Standard

標準側での「スタイルのカプセル化」

gihyo.jp

Google、超軽量、低消費電力モデル「Gemma 3 270M」をリリース

Googleは2025年8月14日、2億7000万パラメータをもつコンパクトなモデル「Gemma 3 270M」をリリースした。

gihyo.jp

Ubuntu 25.10（questing）の開発; glibcの更新とUnstable kernel採用の確定、Ubuntu 24.04.3 LTSのリリース

questingの開発は「リリースまであと2ヶ月」、「大物の更新をできるだけ入れ、残りの計画をある程度整理しておく」というシーズンに入りました。

gihyo.jp

第58回　Linuxカーネルのコンテナ機能 ―cgroup v2から使うメモリコントローラ（3）

前回はメモリ保護の動きを確認しました。今回は、ここまで紹介したメモリ制限やメモリ保護において、階層構造が考慮されることを、実際に試しながら確認します。

@sakupi01.com blog

Unlocking Parent Style Inheritance✨/ Nested で Dynamic で Adoptive なスタイルを実現する `inherit()`

「親要素の任意プロパティ」にアクセスする手段として、`inherit()` の仕様が CSS Values and Units Module Level 5 で策定されています。これにより、Custom Properties を経由せず、親要素のプロパティを子要素から直接自己参照でき、長年望まれてきた非常に多くのユースケースが一挙に解決されることが期待されています。

@sakupi01.com blog

🎨 CSS Advent Calendar: Day 15 / CSS meets npm Ecosystem - the second shot - Component Based CSS

Declarative UI の登場による CSS エコシステムの変遷

gihyo.jp

AIニュースノート：Google検索：AIの影響, Microsoft 365 Copilot、GPT-5搭載, Claude Sonnet 4、APIで100万トークンのコンテキストに対応, Kaggle Game Arena：ゲーム対戦による新ベンチマークなど

gihyo.jpのニュース記事として取り上げていなかったもののなかから、直近の興味深いAIに関連するニュース概要を簡単にまとめてみました。

gihyo.jp

Gemini CLI、VS Codeとの連携強化 ―コンテキストを認識しエディタ内差分表示が可能に

Googleは2025年8月13日、コマンドラインAIコードアシスタントGemini CLIをVS Codeに統合し、より連携を強化した開発ができるようになったことを発表した。

@sakupi01.com blog

🎨 CSS Advent Calendar: Day 14 / Thoughts on CSS Architecture

npm エコシステムと並行して、進化してきた CSS アーキテクチャ

gihyo.jp

Visual Studio Code、チャットにおけるGPT-5の利用とチェックポイント復元機能を追加 ——ターミナルコマンドの自動承認機能は設定方法を変更、AI使用状況の統計表示も

Visual Studio Codeは2025年8月7日、 バージョン1.103（July 2025）の一般提供を開始した。このバージョンでは、チャット（Copilot Chat）を中心に多数の新機能や改善が施された。

@sakupi01.com blog

🎨 CSS Advent Calendar: Day 13 / CSS meets npm Ecosystem - the first shot ... AltCSS

AltCSS とも言える SassとPostCSS の登場、エコシステムへの影響

gihyo.jp

Linux 6.17-rc1公開、RISC-VとBcachefsの変更をLinusが“却下”

Linus Torvaldsは8月10日、次期Linuxカーネル「Linux 6.17」の最初のリリース候補版となる「Linux 6.17-rc1」を公開した。

gihyo.jp

AIツール「Claude」を使ってBlender上でモデリングしてみよう～初歩的な実践編～

第58回目は、AIを使って指示を出し、Blender上でモデリングを行う方法を見ていきます。

gihyo.jp

「EuroPython ＆ PHPers Day 2025 参加報告会」8/26に開催 ―海外カンファレンス参加者の体験や学びを共有

2025年7月14日～20日にチェコで開催された「EuroPython 2025」と、2025年5月24日にポーランドで開催された「PHPers Day 2025」にそれぞれ日本から登壇、参加したメンバーが現地の体験を共有する報告会が、2025年8月26日（火）にハイブリッド形式で開催される。

@sakupi01.com blog

🎨 CSS Advent Calendar: Day 12 / Web Apps are demanded! - The Emergence of SPA

アプリケーションとしての Web の進化と SPA

@sakupi01.com blog

🎨 CSS Advent Calendar: Day 11 / The Birth of Responsive Design

iPhone の登場と、Web デザインにおける適応性の黎明

@sakupi01.com blog

🎨 CSS Advent Calendar: Day 10 / Interoperability in CSS, &c.

CSS におけるブラウザの負債とエコシステム側の解決策

azukiazusa のテックブログ2

AI エージェントがインタラクティブな UI を返すことを可能にする MCP UI

MCP UI は Model Context Protocol (MCP) を拡張して、AI エージェントがインタラクティブな UI コンポーネントを返すことを可能にする仕組みです。これにより、AI エージェントとのチャットの返答としてグラフや画像ギャラリー、購入フォームなどを表示できます。この記事では MCP UI の SDK を利用して、AI エージェントがインタラクティブな UI コンポーネントを返す方法を試してみます。

@sakupi01.com blog

🎨 CSS Advent Calendar: Day 9 / Standards and Ecosystem

CSS 標準から、CSS 標準外の変化への転換

gihyo.jp

Webフォントの現在地とWebタイポグラフィの拡がり —⁠—『Webフォント実践ガイド Google Fontsではじめる 美しく機能的なタイポグラフィ』 著者 飯塚修平さんに聞く

2025年8月8日に『Webフォント実践ガイド—Google Fontsではじめる 美しく機能的なタイポグラフィ』を上梓された飯塚修平さんに話を伺いました。

gihyo.jp

OpenAI、GPT‑5をリリース ——これまでで最高の性能で、ハルシネーションの大幅低減も達成、Codex CLIでもGPT-5が利用可能に

OpenAIは2025年8月7日、これまでで最も優れたAIシステムであるGPT‑5を発表した。

gihyo.jp

第874回　Debian 13 "Trixie"登場！ Ubuntuユーザーが押えておくべき新機能と変更点

今回のUbuntu Weekly Recipeでは、来たる2025年8月9日にリリースされる安定版Debian 13 "Trixie"の主な変更点について紹介します。

gihyo.jp

Ubuntu 25.10（questing）の開発; 「錆びさせる」機能の現状とSnapshot 3

questing（Ubuntu 25.10）の開発は順調に進んでおり、Snapshot 3がリリースされました。

@sakupi01.com blog

🎨 CSS Advent Calendar: Day 8 / Basics of Style Resolution

何重ものフィルタリングと計算処理を経て、適用されるスタイルが決定するまでの仕組み

gihyo.jp

AIニュースノート：EU AI Act：General-Purpose AIモデル規則の適用開始, Jules⁠：非同期AIコーディングエージェントの正式公開, Crush⁠：ターミナル特化型AIコーディングエージェントなど

gihyo.jpのニュース記事として取り上げていなかったもののなかから、直近の興味深いAIに関連するニュース概要を簡単にまとめてみました。

gihyo.jp

Gemini CLI GitHub Actionsが登場 ―AIエージェントが開発ワークフローを強力にアシスト

Googleは2025年8月5日、AIが開発ワークフローの自動化をアシストする「Gemini CLI GitHub Actions」をベータ版としてリリースした

gihyo.jp

MCPサーバーとMCPクライアントを作る

AIの活用では、MCPという言葉が注目を浴びています。連載の最後に、JavaでMCPサーバー／クライアントを実装してみて、MCPへの理解を深めます。

gihyo.jp

モダンなスクロール関連機能を使いこなそう ［CSS Modern Features no.7］

今回のテーマは「スクロール」に関するモダンな機能群です。

@sakupi01.com blog

🎨 CSS Advent Calendar: Day 7 / The Cascade for Cascading Style Sheets - The Whole Cascade Universe v1

Origin の続きと、Cascade Sorting Order の全体像

gihyo.jp

Android XRとGeminiの組み合わせで起こる化学変化とは

Android XRは、Project Moohanの名前で呼ばれており、Samsungがデバイスを開発中で、2025年内（Q3からQ4）には発売されるとされています。

gihyo.jp

コンテクストから始まるプレイドのAI技術戦略――AIを最大活用するための技術とエンジニアチーム

「データによって人の価値を最大化する」をミッションに掲げるプレイドは、企業への支援を通じて、そこで生成・解析されるデータを生活者一人ひとりの体験価値に還元していくことを目指し、データと技術を最大限活用したプロダクトやソリューションを日々開発している。 同社はAI専任のチームを立ち上げ、AIを活用した単なる業務効率化ではなく、顧客の「コンテクスト」を深く理解し、新たな顧客価値の創造を支援することを目的としている。 今回はプレイドのAI専任チーム「Data Mind（データマインド）」の開発サイドをリードする牧野祐己氏、小林篤史氏、西村優汰氏が「コンテクスト」を中心とした価値創造につなげるAI技術戦略、そして共に未来を創るエンジニア像について語る。

gihyo.jp

OpenAI、o3-miniと同等以上のオープンモデル「gpt-oss」をリリース ——ハーモニーレスポンス形式を扱うトークナイザーやレンダラーもオープンソースで公開

OpenAIは2025年8月5日、2つのオープンモデル「gpt-oss-120b」と「gpt-oss-20b」をリリースした。

@sakupi01.com blog

🎨 CSS Advent Calendar: Day 6 / Cascade for Cascading Style Sheets - UA Origin in Cascade

Cascade Sorting Order と UA Origin の解剖

gihyo.jp

Debian、22年越し“因縁の？バグ”修正

Debianプロジェクトはまもなく32回目のアニバーサリーを迎えるが、これほど息の長いオープンソースプロジェクトになると、バグトラッカーの追跡をかいくぐり、10年20年に渡って駆除を免れているバグも存在する。

gihyo.jp

Alibaba、画像生成AIモデル「Qwen-Image」をリリース ―精度の高い画像生成・編集機能と強力なテキストレンダリング機能を両立

Alibabaは2025年8月4日、200億パラメータをもつ新たな画像生成AIモデル「Qwen-Image」を公開した。

@sakupi01.com blog

🎨 CSS Advent Calendar: Day 5 / Cascade for Cascading Style Sheets - Behind the Scenes of Importance

Cascade の登場と Importance の裏側

gihyo.jp

第251回 Group Replicationのマルチプライマリモードにおける外部キーの制限

MySQL 8.0のGroup Replicationは、複数ノード間でトランザクションを複製・認証して整合性を保つことにより、MySQLクラスタを構築するプラグインです。

gihyo.jp

オープンソースの2FAアプリ「Proton Authenticator」リリース

スイスProton AG.は2025年7月31日、さまざまなプラットフォームで利用可能なオープンソースの2要素認証（2FA）アプリ「Proton Authenticator」をリリースした。

gihyo.jp

Android Studio Narwhal Feature Dropの安定版が登場 ―Geminiを使ったエージェントモードが利用可能に

Googleは2025年7月31日、Android開発用の公式IDEであるAndroid Studioの最新バージョン「Android Studio Narwhal Feature Drop」を安定版としてリリースしたことを発表した。

@sakupi01.com blog

🎨 CSS Advent Calendar: Day 4 / The Initial Cascade

Cascade Layers 以前の Cascade

gihyo.jp

SUSE アジア市場CTO Vishal Ghariwala氏に聞く、日本におけるクラウドネイティブの普及状況とSUSEの戦略

Fastlyの創業者の1人であり、現在はFellowを務めるTyler McMullen氏に、同社の強みやAIへの取り組み、オープンソースコミュニティへの支援活動などについてお話を伺いました。

azukiazusa のテックブログ2

コーディングのための LLM モデル Qwen3-Coder を試してみた

Alibaba が開発した Qwen3-Coder を使用したコーディングエージェント Qwen Code を試してみた記事です。OpenRouter 経由での認証設定、コードベースの調査、リファクタリング、テストコード生成などの実際の使用例を紹介しています。

@sakupi01.com blog

🎨 CSS Advent Calendar: Day 3 / CSS is Optional. Protect the Content!

ヒントとしての CSS、あるいはコンテンツを守るための Web の設計思想

azukiazusa のテックブログ2

コーディングエージェントの能力を拡張する Serena を試してみた

LSP を活用してセマンティックなコード検索・編集能力を提供する MCP サーバー Serena の導入・使用方法を紹介。Claude Code でのオンボーディングからリファクタリングまでの実践的な活用例を解説します。

@sakupi01.com blog

🎨 CSS Advent Calendar: Day 2 / CSS “to save HTML”

CSS 以前のドキュメントスタイル手法の提案 - Prevent the Web from becoming a giant fax machine!!

azukiazusa のテックブログ2

SvelteKit の remote functions でコンポーネント内で非同期にデータを取得する

SvelteKit の remote functions を使用することで、コンポーネント内で直接非同期にデータを取得したり、サーバーにデータを書き込むことができます。これにより、コンポーネントごとに必要なデータを個別に取得できるようになり、コードの責任の分離が容易になります。remote functions は SvelteKit v2.27 以降で利用可能です。

gihyo.jp

AGNTCYプロジェクトがLinux Foundationに移行 ―AIエージェントの連携インフラ開発を加速

Linux Foundationは2025年7月29日、AIエージェントの相互連携インフラの構築をめざすAGNTCYプロジェクトが、寄贈によりLinux Foundation傘下に移管されたことを発表した。

gihyo.jp

Google、AIを使って非構造化テキストから構造化データを抽出するオープンソースPythonライブラリ「LangExtract」をリリース

Googleは2025年7月30日、非構造化テキストから構造化データを抽出するオープンソースのPythonライブラリ「LangExtract」をリリースした。

gihyo.jp

Ubuntu 25.10（questing）の開発; linux-modules-extraの廃止と6.17カーネルに向けた更新とTPM/FDE

questing（Ubuntu 25.10）の開発では、6.17カーネルの搭載が予定されています。

gihyo.jp

Function Calling (Tool use)とRAGで外部情報を利用する

前回は、LangChain4jを使ってAIチャットを作りました。今回は、処理を呼び出して動的な情報を取り込む仕組みFunction Callingと外部から取り込んだ情報を元に返答を生成するRAGを実装します。

gihyo.jp

第120回　連載10周年！！MySQL 9.4.0イノベーション・リリース、PostgreSQLバージョン18ベータ2リリース

この連載はOSSコンソーシアム データベース部会のメンバーがオープンソースデータベースの毎月の出来事をお伝えしています。

@sakupi01.com blog

🎨 CSS Advent Calendar: Day 1 / Pre-Styling Era

1989年の WorldWideWeb ブラウザから始まる、CSS 誕生前の Web の歴史の振り返り。スタイルのない時代から IMG タグ、FONT タグの登場。

blog.jxck.io

企業向け Web Bootcamp 2025 開催後記

2025 年 6 月初旬に、副業で Web 技術アドバイザをしている企業の Web チームエンジニア向けに、4 日間の Web Bootcamp を実施した。

gihyo.jp

Gemini CLIでカスタムスラッシュコマンドのサポートを開始

Googleは2025年7月31日、コマンドライン型AIアシスタント「Gemini CLI」で再利用可能なプロンプトを定義できる「カスタムスラッシュコマンド」をサポートしたことを発表した。

gihyo.jp

AIニュースノート：America’s AI Action Plan、ChatGPT学習モード、Qwen3-30B-A3B-Instruct-2507-FP8など

gihyo.jpのニュース記事として取り上げていなかったもののなかから、直近の興味深いAIに関連するニュース概要を簡単にまとめてみました。

gihyo.jp

クラスメソッド、Claude Codeを使った開発を体系化、効率化するフレームワーク「Tsumiki」をオープンソースとして公開

クラスメソッドは2025年7月29日、AnthropicのAIコーディングツールClaude Codeを使った開発を体系化・効率化するフレームワーク「Tsumiki」（積み木）をオープンソースとして公開した。

gihyo.jp

伝説のスマートウォッチ「Pebble」の復活まで秒読み段階

2025年1月、Pebble OSがオープンソースになったのを受けて、Pebble復活のプロジェクトが始動したことを本連載でも取り上げました。その復活が秒読み段階に入ったのでご紹介します。

@sakupi01.com blog

🎨 CSS Advent Calendar: Day 0 / Prologue

CSS Advent Calendar Prologue

gihyo.jp

KubeCon + CloudNativeCon Japan 2025 参加レポート

2025年6月16・17日、KubeCon + CloudNativeCon Japan 2025がヒルトン東京お台場にて開催されました。KubeCon + CloudNativeCon（以下、KubeCon）は世界最大のクラウドネイティブ技術の国際カンファレンスであり、この分野の日本国内のエンジニアにとって待望のイベントでした。

gihyo.jp

NotebookLM、Studioパネルを刷新。動画解説の作成も可能に（ただし動画解説は英語のみ）

NotebookLMは2025年7月29日、ノートブック上のStudioパネルをより使いやすくするために刷新したことを発表し、ユーザーに展開し始めた。

gihyo.jp

Linux 6.16リリース ― NVIDIA GPUサポート強化、Intel APXサポート

Linus Torvaldsは7月27日（米国時間）、「Linux 6.16」を公開した。

gihyo.jp

第873回　sosコマンドでUbuntuシステムの情報をあらいざらい収集しよう

今回は「誰かに相談」するときに、過不足なく「こんな環境なんだけど」と伝えるのに役立つ「sosコマンド」を紹介します。

gihyo.jp

Anthropic、Claude ProとMaxで新たな“週次レート制限”の導入を予告

Anthropicは2025年7月29日の𝕏へのポストで、同社のClaude ProおよびClaude Maxプランのユーザーに対して、8月下旬から週ごとの使用レート制限を行うことを予告した。

gihyo.jp

Microsoft Edgeに「Copilot Mode」が登場 ―WebブラウジングをAIがより強力にサポート

Microsoftは2025年7月28日、WebブラウザMicrosoft EdgeにAI搭載のブラウザ機能「Copilot Mode」が実験的に導入されたことを発表した。

gihyo.jp

技術資格に「合格する」ための勉強法 ——IPA&AWS試験で成果を出した“実践ノウハウ”を公開

2025年7月10日に開催された、ハイヤールー社主催の勉強会「Study Hack」では「資格で人生を変える勉強法」というテーマを取り上げました。登壇したのは、IPAとAWS認定資格のすべての区分に合格したENECHANGE社の岩本さんです。試行錯誤を重ねて培った勉強のノウハウをもとに「合格する」ための勉強法のエッセンスが紹介されました。

gihyo.jp

Alibaba、オープンモデルとして最高レベルの推論能力をもつQwen3-235B-A22B-Thinking-2507をリリース

Alibabaは2025年7月23日、同社が開発するLLM「Qwen3」シリーズの最新推論モデルQwen3-235B-A22B-Thinking-2507をオープンソースとしてリリースした。

gihyo.jp

第62回　grubテーマの遊び方（その3）

地区の田植えやそれに伴なう各種作業に手を取られ、前回からちょっと間が空いてしまいましたが、今回はgrubの起動画面の中心を占める「ブートメニュー」を中心に紹介します。

azukiazusa のテックブログ2

Claude Code でカスタムサブエージェントを作成する

Claude Code では特定の種類のタスクを処理するために呼び出されるカスタムサブエージェントを作成できます。カスタムサブエージェントを使用することでメインの会話セッションとは別に独立したコンテキストウィンドウを持つことができ、コンテキストの汚染を防ぐことができます。この記事では、Claude Code でカスタムサブエージェントを作成する方法とその利点について解説します。

azukiazusa のテックブログ2

Cookie を管理する非同期 API CookieStore

従来の JavaScript では Cookie の管理は `document.cookie` を使用して文字列で行われていました。しかし、文字列での Cookie 管理は面倒で間違いやすいです。また `document.cookie` は同期的に動作するため、Cookie の更新が完了するまでイベントループがブロックされてしまいます。さらに `document` オブジェクトに依存しているため、Web Worker や Service Worker などの非同期環境では使用できません。 このような問題を解決するために、非同期 API `CookieStore` が導入されました。`CookieStore` は非同期的に Cookie の読み書きを行うことができ、さらに Cookie の属性をオブジェクトとして扱うことができます。

gihyo.jp

Claude Codeにカスタムサブエージェント機能が登場 ―複数のサブエージェントによるタスク特化の「エージェントチーム」を作成可能に

Anthropicは2025年7月24日、同社のコーディングAIツールClaude Codeでカスタムサブエージェント（Custom Sub Agents）機能が追加されたことをアナウンスした。

gihyo.jp

Ubuntu 25.10（questing）の開発;Raspberry Piデスクトップイメージの軽量化と壁紙コンテスト、linux-qcomカーネルフレーバー

questingの開発では、Raspberry Piのデスクトップイメージの軽量化のための試みが開始されました。

blog.jxck.io

1Password と遺言保管制度を用いたデジタル終活

筆者のように、インターネット上での生活が長く、かつエンジニアとして生きてきた人間には、一般の人には伝わりにくいデジタルの遺品が多く存在する。仮に自分が死んだ場合に、これらをどのように遺族に処分してもらうかは、なかなか難しい問題だ。筆者はこの「デジタル終活」をどうするかを、長いこと模索してきた。今回は、「1Password」と法務局が行う「自筆証書遺言保管制度」を用いた方法を思いついたため、検証を試みる。

gihyo.jp

数理モデルの力を引き出す書籍ガイド

データサイエンスを用いてビジネスで価値を創出したい、と考えたとき、多くの人が「どうやって分析するか」「どの機械学習モデルを使うか」といった「解き方」に注目しがちです。しかし、ビジネスの現場で本当に重要なのは、目の前にある曖昧な「課題」を、どのようにしてデータサイエンスで扱える具体的な「問題」に落とし込むか、というプロセスです。

gihyo.jp

9/10～12開催「DroidKaigi 2025」チケット販売中

Android開発者コミュニティによる年次カンファレンス「DroidKaigi 2025」が、2025年9月10日（水）～12日（金）の3日間、東京・ベルサール渋谷ガーデンで開催される。

gihyo.jp

Wayback 0.1リリース ―“X on Wayland”めざすプロジェクトが始動1ヵ月で最初のプレビュー版

Wayland上でのX11互換レイヤ構築をめざすオープンソースプロジェクト「Wayback」は7月23日、最初のプレビューリリースとなる「Wayback 0.1」を公開した。

gihyo.jp

Google Analytics MCPサーバー、オープンソースとしてリリース

Googleは2025年7月23日、Google AnalyticsのAPIと連携するローカルMCP（Model Context Protocol）サーバーの実験版を、Apache 2.0ライセンスに基づくオープンソースソフトとして公開した。

gihyo.jp

GitHub Spark、Copilot Pro+ユーザー向けパブリックプレビューとして提供開始

GitHubは2025年7月23日、自然言語でアプリを開発できるツール「GitHub Spark」をCopilot Pro+ユーザー向けにパブリックプレビュー版として提供したことを発表した。

blog.jxck.io

親にエンディングノートを書いてもらう

親の年齢に限らず、生きているうちにやってもらった方がいい、たった 1 つのこととして、エンディングノートの作成がある。終活は、それをどのくらい準備しておくかで、本人以上に遺族の負担が格段に減るからだ。

gihyo.jp

Chrome OSとAndroidの統合、Made by Googleイベントなど

今週は、小ネタながらAndroid関連の話題がいくつかあったので、気になるものをピックアップしていきます。

gihyo.jp

LangChain4jを使ってみよう

今回は、LLMへの接続に必要な処理を共通化する定番ライブラリであるLangChain4jを使ってチャットアプリを作っていきます。

gihyo.jp

Alibaba、エージェントを活用するコーディングのためのオープンモデル「Qwen3-Coder」を発表 ——高性能なオープンモデル「Qwen3-235B-A22B-Instruct-2507」も公開

Alibabaは2025年7月22日、エージェントを活用したコーディングのためのオープンモデル「Qwen3-Coder」を新たに発表した。

gihyo.jp

「中高生Rubyプログラミングコンテスト2025」開催決定、作品募集開始～2025年9月30日まで

2025年7月16日、「中高生Rubyプログラミングコンテスト2025」第15回大会の開催が発表されました。15回目となる今回も、昨年に続き会場（三鷹産業プラザ）での対面開催が予定されています。

gihyo.jp

第872回　百度（Baidu）の新しいMoEモデルを、安価なGPUで動作させる

今回は百度（Baidu）が6月30日にリリースした新しいMoEモデル、ERNIE 4.5を使用するために、llama.cppをビルドします。そしてあまり高性能ではないGPUで動作させます。

blog.jxck.io

Passkey への道 #10: 1Password 導入セミナー

先日、Passkey 啓蒙の一環で、まだパスワードマネージャを導入してない人に対する「1Password 導入セミナー」を実施した。その内容を再収録したものを公開する。ざっくりと、前半が一般ユーザ、後半が開発者向けの内容となっている。動画及び資料は、啓蒙目的であれば自由に使ってもらって構わない。なお、筆者は 1Password との利害関係は一切無い。

gihyo.jp

“すべての良いことには終わりがある” ―Intel、Clear Linux OSの終了を発表

Intelは7月18日、同社が独自に開発/保守を行ってきたローリングリリース型のLinuxディストリビューション「Clear Linux OS」の提供を終了することを発表した。

gihyo.jp

Docker MCP ToolkitでLM Studioが利用可能に

Dockerは2025年7月21日、Docker MCP Toolkitが、MCPクライアントとしてLM Studioをネイティブにサポートすることを発表した。

gihyo.jp

第250回　MySQLの統計情報更新

MySQLでクエリを実行する場合、クエリオプティマイザがテーブルやインデックスの統計情報を使用して、最適な実行計画を選択します。

gihyo.jp

AIツール「Claude」を使ってBlender上でモデリングしてみよう～準備編～

第57回目は、AIツールを使って指示を出し、Blender上でモデリングを行うための準備をしていきます。

azukiazusa のテックブログ2

私のキャリアに影響を与えたコンピューター・IT の定番書籍

現代は知らないことがあればすぐにインターネットで調べたり、AI に質問できる時代です。このような時代において本を読む必要はあるのでしょうか？答えは Yes です。なぜなら、検索をしたり AI に質問をするためには、ある程度の基礎知識が必要だからです。この記事では私のキャリアにおいて影響を与えたであろうコンピューター・IT の定番書籍を紹介します。

gihyo.jp

GitHub、機能プレビューとして提供していた「コマンドパレット」を8月に廃止予定と告知 ［記事更新：廃止はいったん取りやめに］

GitHubは2025年7月16日、機能プレビューとして提供していた「コマンドパレット」を8月6日をもって廃止予定することを発表した。

gihyo.jp

JetBrains、Eclipse、XcodeでGitHub Copilotエージェントモードの一般提供開始

GitHubは2025年7月16日、JetBrains、Eclipse、Xcode向けのGitHub Copilotエージェントモードの一般提供を開始した。

gihyo.jp

OpenAI、ChatGPTエージェントを発表 ―ブラウザ、ターミナル、APIからアクセス可能な自律型AIエージェント

OpenAIは2025年7月17日、AIエージェントがさまざまな作業を自律的に行う「ChatGPTエージェント」を発表した。

gihyo.jp

Web APIのテストデータを自動生成してくれるツール「Schemathesis」の紹介

今月の「Python Monthly Topics」は、Web APIのテストデータを自動生成してくれるツール「Schemathesis（スキーマセシス）」を紹介します。

gihyo.jp

Ubuntu 25.10（questing）の開発; ドキュメントの充実, ESWIN EBC77 SBCの登場

questingの開発は夏休みシーズンに突入し、少しだけペースが落ちた気配があります。大きな変化は限定的なものの、SRUポリシーの明確化のためのドキュメントが準備されています。

gihyo.jp

手首にAIで久々の革命か？ GeminiがWear OS搭載をサポート

7月9日、GoogleはWear OS搭載のスマートウォッチでGeminiが利用できるようになったと発表しました。

gihyo.jp

JavaでLLMにアクセスしてみよう

この連載では数回にわたってJavaでAIエージェントを作る基本になるLLM操作のプログラムを作っていきます。今回は導入しやすいLM Studioを使ってLLMにアクセスしてみましょう。

gihyo.jp

GitHub、Googleアカウントでログイン可能に

GitHubは2025年7月15日、Googleソーシャル認証情報を使ってGitHubアカウントにサインアップ、ログイン可能となったことを発表した。

blog.jxck.io

Passkey への道 #9: ユーザに求められる令和のアカウントリテラシ

サービスは、ユーザを守るために Passkey をサポートし、ユーザの移行を促す努力をする必要があった。このプロセスに対して、ユーザはまったくの受動的態度でいることはできない。では、ユーザはいったい何をリテラシとして身につけ、どう自分の身を守っていくべきなのだろうか?

gihyo.jp

第871回　Ubuntu 25.04リリース記念オフラインミーティング開催レポート

2025年の7月12日、グリー株式会社主催のもと、六本木にて「Ubuntu 25.04リリース記念オフラインミーティング」が開催されました。今回はいつもと趣向を変えて、このイベントの様子をレポートします。

azukiazusa のテックブログ2

AWS の エージェント IDE Kiro を使ってみた

Kiro は AWS が開発した IDE 内蔵型の AI コーディングエージェントです。Kiro の特徴は単なるバイブコーディングにとどまらず、スペックを使用して仕様駆動開発でアプリケーションを開発できることです。この記事では Kiro を使ったアプリケーション開発の流れを紹介します。

gihyo.jp

Anthropic、ワンクリックでClaudeに接続できるツールディレクトリを公開

Anthropicは2025年7月15日、Claudeに接続するツールの新しいディレクトリを公開した。

gihyo.jp

NotebookLM、共有機能を活用した公式厳選の「おすすめのノートブック」を提供開始

Googleは2025年7月14日、調査アシスタントサービス「NotebookLM」において、公式が厳選した「おすすめのノートブック」の提供をおこなうことを発表した。

gihyo.jp

Red Hat、ビジネス開発者向けのRHEL無償プログラム「RHEL for Business Developers」の一般提供を開始 ―最大25インスタンスをセルフサービスで利用可能

Red Hatは7月9日、同社が開発者向けに提供する無償プログラム「Red Hat Enterprise Linux（RHEL） for Developers」の新しいサブスクリプションメニューとして「RHEL for Business Developers」を提供開始した。

gihyo.jp

Threads、メッセージ（DM）機能を日本でも展開 ——興味深いトピックを目立たせる「ハイライター」機能も導入

Metaは2025年7月15日、同社の提供するソーシャルサービスThreadsにおけるメッセージ（DM）機能を日本でも展開をはじめた。

gihyo.jp

AWS、AIエージェント型IDE「Kiro」をリリース ―プロトタイプ作成から本番環境までAIがサポートする“スペック駆動開発”が可能に

AWSは2025年7月14日、新しいAIエージェント機能を備えたIDE、「Kiro」をプレビューリリースした。

blog.jxck.io

Passkey への道 #8: サービスにとって「移行」のゴールは何か?

パスワード + TOTP は限界を迎え、Passkey へ移行しなければ、サービスがユーザを守りきれなくなった。逆を言えば、サービスがユーザを守りたいと思うのであれば、Passkey を提供しないわけにはいかない時代に突入している。では、令和のこの状況において、サービスはどう対応していくべきだろうか?

gihyo.jp

Moonshot AI、1兆パラメータのオープンソースLLM「Kimi K2」をリリース ―商用モデルに匹敵する性能

中国Moonshot AI（月之暗面）は2025年7月11日、同社が開発するオープンソースLLMの新バージョンKimi K2をリリースした。

blog.jxck.io

Passkey への道 #7: そして Username-Less へ

Apple が突如発表した Passkey。実態は「WebAuthn の秘密鍵を iCloud で共有」するサービスだった。そして、業界は本格的な Password-Less に向けて進んでいく。

azukiazusa のテックブログ2

サンドボックス環境を MCP サーバーで提供する Container Use

AI コーディングエージェントは便利ですが、任意の Bash コマンドを実行できるため、ユーザーのシステムに影響を与える可能性があります。Container Use は MCP サーバーとして動作し、AI コーディングエージェントにサンドボックス環境を提供します。この記事では Container Use の利用方法について紹介します。

blog.jxck.io

Passkey への道 #6: タブーを破った Apple

TOTP/WebAuthn は、バックアップコードの適切な保管方法が示されないまま、移行だけが推し進められた。YubiKey などの物理 Authenticator の扱いとして、「二本登録して、片方は普段使い、もう片方は貸金庫へ」などと、かなり無理のあるベストプラクティスが啓蒙されたりもしていた。それらをスマホに移行して、登録は便利だが壊したら詰むでは、ユーザは安心して使えない。いや、正確には「よくわからないまま使って、詰んでから Apple のサポートに連絡する」という状態だったのだろう。ここに解決策が提示されたのが、WWDC 2021 だった。

azukiazusa のテックブログ2

v0 の SDK を試してみる

v0 は Vercel が開発した AI ベースの Web アプリケーション・UI 生成ツールです。v0 のプラットフォーム API を使用すると、v0 の機能を自身のコードから利用できます。この記事では v0 TypeScript SDK を使用して、v0 のプラットフォーム API を試してみます。

blog.jxck.io

Passkey への道 #5: 2FA/WebAuthn

Infostealer は、ユーザの権限でインストールされ、ユーザがアクセスできるあらゆる情報を盗んで去っていく。そこから、どんなに暗号化して保存しても、使用時には平文にしないといけない「パスワード」という文字列を守り抜くのは非常に難しい。であれば、最初から文字列に頼らなければ良い。それが WebAuthn と FIDO だった。

azukiazusa のテックブログ2

Claude Code で前回の会話の続きを開始する

Claude Code でうっかりセッションを閉じてしまった経験が一度はあるのではないでしょうか？一度セッションを終了すると会話のコンテキストが失われてしまいますが、Claude Code では前回の会話の続きを開始する方法があります。

gihyo.jp

Visual Studio Code、Copilot Chatのターミナルコマンドの自動承認機能を実験的に追加 ——MCPサーバーの管理はmcp.jsonとして設定へ

Visual Studio Codeは2025年7月10日に、バージョン1.102（June 2025）の一般提供を開始した。多数の新機能と改善を含んでおり、特にターミナルコマンドの自動承認機能が実験的に追加されている。

gihyo.jp

Ubuntu 25.10（questing）の開発; Raspberry Piのブートシステムの変更

例年の開発パターンに比べて「かなり前のめり」な傾向のあるquesting（Ubuntu 25.10）の開発においては、さまざまなものに新しいアプローチが導入されています。今週新しく登場したものは、Raspberry Piの新しいブート方式でした。

gihyo.jp

DTPあるあるのCSS組版的解決法

株式会社ディジタルグロースアカデミア リブロワークス部デザイン室の峠坂あかりと松澤維恋です。今回の記事では、入門書から少しステップアップした、これまでの制作経験から得られたノウハウをご紹介します。

blog.jxck.io

Passkey への道 #4: 文字列の限界

パスワードと TOTP の問題は、「人間が入力する必要がある」ことだった。対策は Autofill であり、そのためにもパスワードマネージャ相当が必要になる。では、パスワードマネージャを使っていれば、パスワードと TOTP で十分なのだろうか?

gihyo.jp

アジャイルプランニング本来の価値を、AI搭載のDevSecOpsプラットフォームで取り戻す

アジャイルプランニングが登場してから25年、アジャイルの概念を体現する次世代のツールを見出すことが重要です。

gihyo.jp

openSUSEプロジェクト、8/9の20周年祝賀企画に向け準備中

20周年という記念すべきアニバーサリーまで1ヵ月を切ったことから、openSUSEプロジェクトはコミュニティメンバーに写真やマイルストーンの共有を呼びかけている。

gihyo.jp

xAI、Grok 4を発表 ―主要なベンチマークで競合AIベンダのフラッグシップモデルを凌駕する性能

xAIは2025年7月10日、同社が提供するライブストリー上でAIモデルの最新バージョンGrok 4を発表した。

gihyo.jp

Google、Gemmaの新たなオープンモデルをリリース ―エンコーダ・デコーダモデルT5Gemmaと医療分野特化のマルチモーダルモデルMedGemma＋MedSigLip

Googleは2025年7月9日、軽量言語モデルGemmaファミリーの新しいモデル2種を発表した。

gihyo.jp

Hugging Face、AI実験ができるオープンソースロボット「Reachy Mini」プレオーダー開始

Hugging Faceは2025年7月9日、Pollen Roboticsとともに開発した、オープンソース小型ロボット「Reachy Mini」の先行予約販売（プレオーダー）を開始した

gihyo.jp

ソラコム、MCPサーバーを提供開始へ ―IoTプラットフォームとAIの融合を目指すサービスも発表

ソラコムは2025年7月9日、翌週に行われる同社の年次カンファレンス「SORACOM Discovery 2025」に先立ちメディア向けの説明会を開催、同社のIoTプラットフォームと生成AIを組み合わせた新たなサービス、戦略を発表した。

blog.jxck.io

Passkey への道 #3: 手入力の限界

パスワードだけでの認証に限界が訪れ、TOTP を用いた 2FA が普及した。しかし、これでもまだ、全くもって不完全であることが、フィッシング詐欺の増加によって証明された。

gihyo.jp

はじめの一歩。SwiftがAndroidを公式にサポートへ

Appleのソフトウェア エンジニアリング マネージャーで、主にSwiftの開発に関わるMishal Shah氏が、Swift.orgのフォーラムにてAndroidを公式にサポートすることを目的とした「Android Workgroup」の発足を発表しました。

gihyo.jp

ローカルLLM実行環境LM Studio、企業・組織での商用利用を無料に

Element Labsは2025年7月8日、同社が提供しているローカルLLM実行環境「LM Studio」を企業利用においても無料で使えるように方針を変更したことを発表した。

gihyo.jp

第870回　Microsoft Editをデフォルトのエディターにする

今回は、MicrosoftがリリースしているEditを、Ubuntuのデフォルトエディターにする方法を紹介します。

blog.jxck.io

Passkey への道 #2: 2FA/TOTP

「パスワード」が認証の最重要要素で、いかにそれを死守するかを「サービス側」「ユーザ側」双方で考え続けてきたのが、平成の認証だった。ところが、それは早々に破綻し、「パスワードだけでの認証」に限界が来た。そこで、導入されたのが二要素認証(2FA: 2-Factor Auth)だ。

gihyo.jp

Fastly、TollBitと提携しAIボットのアクセスを収益化するサービスを提供へ

Fastlyは2025年7月1日、TollBitと提携し、同社のユーザーコンテンツに対するAIボットアクセスを収益化するサービスの提供を発表した。

blog.jxck.io

Passkey への道 #1: 平成の Password 感

まず、今使われているパスワード認証について、これがなぜ問題で、なぜ Password-Less が求められているのかを振り返っていこう。

gihyo.jp

モダンなフロントエンドにおけるテストについて ［Modern Featured Test］

Webフロントエンドを対象にしたテストのツールや手法も増えてきました。今回は、モダンフロントエンドにおけるテストについて、その種類や導入方法などを紹介します。

gihyo.jp

第249回 MySQLに格納した複雑なJSONから値を検索する

MySQLのJSON型は、柔軟なデータ構造をそのまま格納できる点で非常に便利です。ただし、複雑なJSONデータをそのまま詰め込んだ場合には注意が必要です。

gihyo.jp

レガシーXをWayland上で再構築 ―Alpine Linux開発者が軽量“X on Wayland”コンポジタ「Wayback」をローンチ

現在、メジャーなLinuxディストリビューションのほとんどがディスプレイソフトウェアのデフォルト実装をX.OrgからWaylandへとシフトしている。

gihyo.jp

Blenderの機能の一つであるUV展開を行ってテクスチャを描こう

第56回目は、Blenderで用意されている機能であるUV展開を行う方法を見ていきます。

blog.jxck.io

Passkey への道 #0: Intro

フィッシング詐欺や Infostealer を用いた金融サイトの乗っ取り詐欺などは、その被害総額が 5000 億円 を突破してもなお拡大し続けている。米国で発生した 2024 年のオンライン詐欺被害は 166 億ドル に達した。証券や銀行サービスからは「FIDO 認証登録のお願い」のようなメールが絶えず届き、最近では Gmail のような 20 億以上のユーザがいる大手サービス や、警視庁サイバー犯罪対策課まで「Passkey を利用しましょう」と移行を促すアナウンスをするところまできている。まだ、多くの人が "Passkey" という名前すら知らないか、聞いたことはあるがきちんと移行まではしていないという状況だろう。新しい技術とはいえ、Passkey の普及があと 1 年早かっただけで、防げた被害は計り知れないだろうと痛感する。一方、Passkey を知っていながら、誤解のある人も少なくないようだ。複雑なパスワードを登録しているから移行する必要はない2FA を設定しているから必要ない登録したいサービスに、指紋を渡すのは嫌だGoogle や Apple に認証までロックインされたくない変なことしてログインできなくなるのが怖いetc etcまた、移行する必要性を認識しながら、パスワードマネージャ等保存先が十分に浸透していなかったり、サービス側の Passkey 対応が普及途上な側面もある。

azukiazusa のテックブログ2

値の補間計算を簡潔に記述できる CSS の `progress` 関数

CSS の `progress` 関数は、2 つの長さの値の間の進捗を計算するための数学関数です。流体タイポグラフィやレスポンシブなレイアウト調整に利用できます。流体タイポグラフィは `clamp` 関数を使用して実装することもできますが、`progress` 関数を使用することでより意図を明確に記述できます。この記事では、CSS の `progress` 関数の構文と使用例について解説します。

@sakupi01.com blog

From 7 Hours Behind

DISCLAIMER: Non-Tech. Pure life stuff here. Don't read if you expect tech.

gihyo.jp

Google、年齢認証を支援するゼロ知識証明（ZKP）技術をオープンソースとして公開

Googleは2025年7月3日、年齢認証などに利用するためのZKP（Zero-Knowledge Proof：ゼロ知識証明）ライブラリをApache 2.0ライセンスの元、オープンソースとして公開した。

gihyo.jp

GitHub Copilotの便利なカスタマイズリソースをまとめたAwesome GitHub Copilot Customizationsリポジトリ公開

Microsoft/GitHubは2025年7月2日、GitHub Copilotをカスタマイズして最大限に活用できるためのコンテンツ／リソースをまとめた「Awesome GitHub Copilot Customizations」リポジトリをリリースした。

gihyo.jp

Ubuntu 25.10（questing）の開発; Questing Snapshot 2のリリース、Canonical builds of OpenJDK

questing（Ubuntu 25.10）の開発は、節目となるSnapshot 2がリリースされました。また、OpenJDKのサポートビジネスに、Canonicalもチャレンジすることが発表されています。

gihyo.jp

レベルアップ！つよつよエンジニアを目指すには？

この連載では、それぞれのレベル別にAWSの学び方を紹介します。第3回は、「既にAWSを知っている人が、エンジニアとしてのレベルアップを目指すにはどうすべきか」についていくつかの方策を提案します。

gihyo.jp

Cloudflare、AIクローラー制御の新方針を掲げる「Content Independence Day」を発表 ——報酬のないAIクロールのブロック制御機能をすべてのユーザーに提供

Cloudflareは2025年7月1日、同社が運用するCDNサービスにおけるAIクローラーによるウェブコンテンツの利用について、「コンテンツ作成者に報酬を支払わない限り、AIアクセスをブロックできる方針」へと大きく舵を切り、その制御機能をすべてのユーザーに導入することを発表した。

gihyo.jp

データベーススペシャリストへの道 〜試験勉強は実務に役立つ！

都内のとあるIT会社、時計の針は午後9時。オフィスにはまだ何人かが残り、それぞれの席で仕事を続けている。その一人であるA は、自分のディスプレイを見つめながらつぶやいた。AいつになったらB先輩 のようなデータベースエンジニアになれるのかな……。

gihyo.jp

『［作って学ぶ］ブラウザのしくみ』『［作って学ぶ］OSのしくみⅠ』発売記念イベントレポート

書籍発売記念イベントである「［作って学ぶ］OSとブラウザ～IT基礎技術を手を動かしながら学ぼう！」が、2025年6月6日に書泉ブックタワーで開催されました。イベントでは、著者の土井麻未さんとhikaliumさんの2人による、本書の読み方やこれら基礎技術への取り組みが語られました。本稿ではその模様をレポートします。

gihyo.jp

Google Chromeにまつわるアレコレ

今回は、Google Chromeに関する動きがいくつかあったので、まとめておきます。

gihyo.jp

第27回 これからの大学入試とプログラミングの必要性

「スクラッチでプログラミングをはじめよう」第27回です。

gihyo.jp

Docker MCP Catalog、機能強化とオープンな登録受付を発表

Docker社は2025年7月1日、MCPサーバーのDockerイメージを一元的に発見・取得できるカタログ「Docker MCP Catalog」の機能強化と、一般ユーザーによるサーバー登録申請の受付開始を発表した。

gihyo.jp

Sakana AI、フロンティアモデルの「集合知」と「試行錯誤」で難問解決力・推論精度の向上を発表

Sakana AIは2025年7月1日、既存のフロンティアモデルを利用して「集合知」と「試行錯誤」を組み合わせ、難問に対する推論精度を高める新手法AB-MCTSおよび、複数のモデルを動的に使い分ける拡張版であるMulti-LLM AB-MCTSを発表した。

gihyo.jp

第869回　WSLでもcloud-initを活用する

今回は、WSL上のUbuntuの環境構築をcloud-initに任せて、Ubuntu環境を手軽に構築する方法を解説します。

gihyo.jp

U-22 プログラミング・コンテスト2025応募受付開始 ―コード生成AIを使った作品も応募可に

U-22 プログラミング・コンテスト2025の応募受付が2025年7月1日に開始された。締切は8月29日。

azukiazusa のテックブログ2

Claude Code の Hooks で作業が終わった後にフォーマッターを実行する

Claude Code hooks は Claude Code のライフサイクルの特定のタイミングで実行されるユーザー定義のシェルスクリプトです。hooks を使用することで、コードのフォーマットを常に実行することができます。この記事では hooks を使用してコードの変更後に prettier が実行されるように設定してみましょう。

gihyo.jp

AIコードエディタCursorのエージェント機能がモバイルでも利用可能に

Anysphereは2025年6月30日、同社が開発するAIコードエディタCursorのエージェント機能ががモバイル環境で利用できるようになったことを発表した。

gihyo.jp

第119回　MySQLでの非同期タスクのサポート、PostgreSQLエンタープライズ⁠⁠・コンソーシアムの成果報告、そして次回は10周年！

この連載はOSSコンソーシアム データベース部会のメンバーがオープンソースデータベースの毎月の出来事をお伝えしています。

gihyo.jp

#03 Python Steering Councilの活動の今 ―PyCon USカンファレンス3日目/スプリントレポート

第3回は、カンファレンス3日目とカンファレンス後のスプリントの話題をレポートします。

gihyo.jp

Microsoft、Windowsメモ帳アプリでMarkdown形式の書式機能を一般提供へ

MicrosoftはWindows 11の最新アップデートで「メモ帳」アプリに軽量な書式設定機能を導入、GUIで書式を指定できるほか、Markdown形式で書式を設定できるようになった。

gihyo.jp

プライベートクラウドFlavaや開発フレームワークArk Developerなどを公開――LINEヤフー初となる対外テックカンファレンス「Tech-Verse 2025」初日基調講演速報レポート

2025年6月30日、7月1日の2日間、LINEヤフーとして合併してから初となる、対外向けのテックカンファレンス「Tech-Verse 2025」が開催されている。

azukiazusa のテックブログ2

ワンクリックで MCP サーバーをインストールする .dxt ファイル

Model Context Protocol (MCP) サーバーは LLM が外部のツールと対話するための標準的な方法ですが、インストールが複雑でハードル高いという課題があります。`.dxt` ファイルは MCP サーバーを簡単にインストールできるパッケージ形式です。これを使用することでユーザーはターミナルを操作したり JSON ファイルを編集することなく MCP サーバーを利用できるようになります。

azukiazusa のテックブログ2

MCP の Structured tool output を試してみる

MCP の 2025-06-18 バージョンでは Structured tool output がサポートされました。ツールの定義で `outputSchema` を出力のスキーマを定義し、`structuredContent` フィールドに構造化された出力を返すことができます。この記事では MCP の TypeScript SDK を使用して Structured tool output を試してみます。

gihyo.jp

Anthropic、ワンクリックでローカルMCPサーバーをインストールできる「Desktop Extensions」をリリース

Anthropicは2025年6月25日、Claude Desktop上でボタンをクリックするだけでローカルMCP（Model Context Protocol）サーバーをインストールできるパッケージツール「Desktop Extensions」をリリースした。

gihyo.jp

GMOペパボ、ECサイト運営者を対象にした参加費無料のオンライントークイベント「COLOR ME SHOP DAY 2025」を7月24日に開催

GMOペパボ株式会社が運営するネットショップ作成サービス「カラーミーショップ byGMOペパボ」は、ECサイト運営者を対象にした参加費無料のオンライントークイベント「COLOR ME SHOP DAY 2025」を、2025年7月24日（木）に開催する。

gihyo.jp

Google、Gemma 3nをリリース ―エッジデバイスでの動作効率が大幅アップ、フレキシブルなマルチモーダルモデル

Googleは2025年6月26日、軽量AIモデル「Gemma」の新バージョンGemma 3nを正式リリースした。

gihyo.jp

MediaTek Genio向けのUbuntu Core、Ubuntu 25.10（questing）の開発; 新しいゴミ箱アイコンとServer Seedの見直し

UbuntuのIoT向けの展開がさらに広がります。MediaTekとCanonicalから、MediaTek Genio IoTシリーズ向けのUbuntu Coreイメージの提供開始がアナウンスされています。

gihyo.jp

最大の差別化要因はWebAssemblyの採用 ―― Fastly共同創業者Tyler McMullen氏に聞く次世代CDNの最前線

Fastlyの創業者の1人であり、現在はFellowを務めるTyler McMullen氏に、同社の強みやAIへの取り組み、オープンソースコミュニティへの支援活動などについてお話を伺いました。

gihyo.jp

Anthropic、「アーティファクト」に作成アプリへのAI搭載機能と成果物共有のための専用スペースを追加

Anthropicは2025年6月25日、Claudeのコンテンツ作成機能であるアーティファクト（Artifacts）に、成果物の作成、ホスティング、共有のための専用スペースと、作品自体にAIを搭載させる機能を追加したことを発表した。

gihyo.jp

Google、Geminiをコマンドラインから利用できるGemini CLIをオープンソースとして公開

Googleは2025年6月25日、AIアシスタントGeminiをコマンドラインから操作できる「Gemini CLI」をオープンソースとして公開した。

gihyo.jp

Pythonで理解するMCP（Model Context Protocol）

2025年6月の「Python Monthly Topics」では、LLMと外部ツールやデータソースを簡単に接続するためのプロトコル「MCP（Model Context Protocol）」を取り上げます。

gihyo.jp

進化するPromiseオブジェクト ［JS Modern Features no.2］

今回は主にES2020以降で追加されたPromiseの新しい機能をユースケースを交えて解説します。

gihyo.jp

オーバープロビジョニングと制約の欠如 ——セキュリティチームが自律型AIの混乱を最小限に抑える3つの方法

AIエージェントの出現は、現在のSaaSプラットフォームにおける認可システムにとって大きなリスクとなる可能性があります。しかし、セキュリティチームとITチームが適切な視点で積極的に対応すれば、そのリスクを防げます。

gihyo.jp

Google Tensor G5に関わるアレコレのまとめ

Google Pixel 6シリーズ以降は、独自SoC「Google Tensor」が搭載されているのはご存知のとおりです。夏ごろ発売のPixel 10シリーズには、Tensor G5が搭載されると予想されています。今回は、これに関わる話題をいくつかピックアップしてみました。

gihyo.jp

Cloudflare、エッジで動作するコンテナ基盤「Cloudflare Containers」をパブリックベータで提供開始

Cloudflareは2025年6月24日、同社のエッジネットワーク上でコンテナを動かすための「Cloudflare Containers」機能をパブリックベータで提供開始した。

gihyo.jp

Google Colab、AIファーストとなった新バージョンをすべてのユーザーに提供開始 ——ターミナル機能も開放

Googleは2025年6月24日、AIファーストに再設計したGoogle Colabをすべてのユーザーに提供開始したことを発表した。

gihyo.jp

#02 今だから聞きたい「ダイバーシティ＆インクルージョン」パネル、「遊び」の大切さを説くキーノート ーPyCon USカンファレンス2日目レポート

PyCon US 2025カンファレンス2日目のレポートです。

gihyo.jp

第868回　UbuntuでAMD Radeon RX 9060 XTを使用する

今回はASRock DeskMeet X300にRD-RX9060XT-E16GB/DFを取り付け、Ubuntu 24.04 LTSを使用する方法を紹介します。

gihyo.jp

3DPでキューブパズルを自作してみる(1) ～構造の理解～

今回から数回にわたり、私がルービックキューブを模したおもちゃを3DPで自作した際の工程を紹介します。

gihyo.jp

Linux Foundation、Agent2Agentプロジェクトを始動 ——GoogleがA2Aプロトコルを寄贈

Linux Foundationは2025年6月23日、Googleが4月に公開したAgent2Agent（A2A）の寄贈を受けたこと、そしてこのA2Aプロトコルを基盤とした新しい「Agent2Agentプロジェクト」を立ち上げたことを発表した。

gihyo.jp

9/19～21開催「iOSDC Japan 2025」チケット販売開始

2025年9月19日（金）～21日（日）にハイブリッド形式で開催されるiOS関連技術をテーマとした技術カンファレンス「iOSDC Japan 2025」のチケット販売が開始された。

gihyo.jp

「描き続けること」の小さな闘い ——『それっぽく描くコツ』誕生前史 著者96こげさんに聞く

『イラストをそれっぽく描くコツ』の著者、96こげさんのイラスト人生を振り返りながら、本書に込めた思いを赤裸々に語っていただきました。

gihyo.jp

参加総数2500名超え！ 世界一のTypeScriptカンファレンス「TSKaigi 2025」レポート

2025年5月28日、29日の2日間にかけてベルサール神田で世界最大級のTypeScriptをテーマとした技術カンファレンスTSKaigi 2025が開催されました。

gihyo.jp

Java on Azure Day 2025 基調講演レポート――Oracleとの戦略的協業、AI時代のJava開発生産性向上・レガシーモダナイズ・AIアプリ基盤の最新動向

2025年6月17日、日本マイクロソフトは、毎年恒例となった「Java on Azure Day 2025」を開催しました。

gihyo.jp

第248回 知っておくと得するかもしれないMySQLの組み込み関数

MySQLでは標準でさまざまな組み込み関数を用意しています。今回は、その中でも「知っておくと得する」可能性のある関数をいくつかピックアップしてご紹介します。

gihyo.jp

“次のディナーもあるかもね” - Linus、Bill Gatesと「歴史的」初顔合わせ

6月20日、Microsoft AzureのCTOを務めるMark RussinovichはLinus Torvalds、Bill Gates、Dave Cutler、そしてRussinovich本人が写っているスリリングな写真を投稿した。

gihyo.jp

オープンソースのEメールマーケティングプラットフォームBillionMaill V3.0がリリース ―“スパム判定を避ける機能”をベータ版実装

香港aaPanel Ltd.は2025年6月19日、同社が開発するオープンソースのメールサーバー兼EメールマーケティングプラットフォームBillionMailの新バージョンBillionMail V3.0をリリースした

azukiazusa のテックブログ2

Claude Code でカスタムスラッシュコマンドを作成する

Claude Code では `/` で始まる文字列がスラッシュコマンドとして定義されておりあらかじめ割り当てられた操作を実行できます。スラッシュコマンドはユーザーが独自に定義することもできます。この記事では、Claude Code でカスタムスラッシュコマンドを作成する方法について説明します。

azukiazusa のテックブログ2

ブラウザから MCP サーバーに接続する use-mcp React フック

use-mcp はリモートの MCP サーバーに接続するための React フックです。ツールの呼び出しや認証を簡単に行うことができます。この記事では、use-mcp を使用して MCP サーバーに接続し、ツールを呼び出す方法と、OAuth 認証の実装方法について解説します。

gihyo.jp

Visual Studio Code、厳選したMCPサーバーの一覧ページを公開 ——一覧ページ上からのワンクリックインストールにも対応

Visual studio Codeは6月19日、MCPサーバーをVS Codeにワンクリックでインストールできる、厳選したMCPサーバーの一覧ページを公開した。

gihyo.jp

オープンソースのAIコーディングエージェントopencodeが一般利用可能に

ターミナル上で動作するオープンソースのAIコーディングエージェント「opencode」は2025年6月20日、Claude Pro/Maxへの対応や、75以上のLLMプロバイダに対応して一般利用できるようになったことをアナウンスした。

gihyo.jp

Ubuntu 25.10（questing）の開発; RISC-VのRVA23への切り替え・OpenSSL 3.5.0の導入

questing（Ubuntu 25.10）の開発では、Rivosのパートナーシップのもと、RISC-VアーキテクチャにおいてRVA23プロファイルへの対応が進められる予定です。

gihyo.jp

OpenAI、Agents SDKを利用したカスタマーサービスとアプリケーションテスト向けのAIエージェントのデモを公開

OpenAIは2025年6月、Agents SDKを活用したカスタマーサービスおよびアプリケーションテスト向けのAIエージェントのデモアプリをGitHubで公開した。

gihyo.jp

Claude Code、リモートMCPサーバーをサポート

2025年6月19日、Anthropicは同社のAIコーディングエージェントClaude CodeがリモートMCPサーバーをサポートしたことを発表した。

gihyo.jp

オープンソースのAI開発エージェント基盤にコマンドライン版「OpenHands CLI」が登場

2025年6月17日、オープンソースのAIソフトウェア開発エージェントプラットフォームOpenHandsをターミナルからコマンドラインで操作できる「OpenHands CLI」が公開された。

gihyo.jp

9/26、27開催「PyCon JP 2025」キーノートスピーカー発表

2025年9月26日（金） 、27日（土）に広島国際会議場で開催されるPyCon JP 2025のキーノートスピーカーが発表された。

gihyo.jp

KDE Plasma 6.4リリース、Waylandサポート強化が進む

KDEプロジェクトは6月17日、「KDE Plasma 6.4」のリリースを発表した。

gihyo.jp

デザイン・通知・健康が新しいAndroid 16がリリースされました

6月10日に、Android 16（コードネーム Baklava）の正式版がリリースされ、Google Pixelシリーズから順次OTAでの配信が開始されました。年内には、さらに多くのスマートフォンへ展開される予定です。

gihyo.jp

Threads、「フェディバース」フィードとフェディバースアカウントの検索機能を追加 ——別途、ネタバレ注意機能やDM機能も一部アカウントでテスト中

Threadsは6月17日、「フェディバース」フィードと、Fediverseアカウントの検索機能を追加したことを発表した。

gihyo.jp

＃01 PyCon US 2025カンファレンス開幕まで/1日目レポート ―初めてのトーク登壇へ

2025年5月14日～22日にアメリカのピッツバーグで開催された、プログラミング言語Pythonの国際カンファレンス「PyCon US 2025」に参加してきたので、その様子をレポートします。

gihyo.jp

日本企業のオープンソース／クラウドネイティブへの関心の高まりと、CNCFのこれまでと現在 ——KubeCon + CloudNativeCon Japan 2025 記者発表会より

6月16日、17日に東京で開催された「KubeCon + CloudNativeCon Japan 2025」。16日に、Linux Foundationの日本担当VPである福安徳晃氏と、Cloud Native Computing Foundation (CNCF) のCTOであるChris Aniszczyk氏による記者発表会が行われました。本稿ではこの模様をレポートします。

gihyo.jp

第867回　「後で読む」サービスのWallabagをUbuntuでセルフホストする

今回はUbuntu 24.04 LTSのサーバー版の上に、オープンソースの「後で読む」サービスであるWallabagを構築する方法を紹介します。

gihyo.jp

Blenderの機能の一つであるUV展開について知ろう

第55回目は、Blenderで用意されている機能であるUV展開の概要について見ていきます。

azukiazusa のテックブログ2

A2A プロトコルの JavaScript SDK を試してみる

A2A プロトコルはエージェント間の通信を標準化するためのプロトコルです。JavaScript SDK を使って A2A サーバーとクライアントを実装し、エージェント間通信を試してみます。

blog.jxck.io

CSS の ident() による動的な custom-ident の生成

CSS で Custom Ident 値を動的に生成する ident() が提案されている。策定中の仕様をベースに解説する。

gihyo.jp

GitHub、リモートGitHub MCPサーバーをパブリックプレビューで提供開始

GitHubは6月12日、リモートGitHub MCP Serverをパブリックプレビューとして提供を開始した。

gihyo.jp

Ubuntu 25.10（questing）の開発 ; BazaarとXorgにさよならを

Ubuntuの開発では、Launchpadにコードホスティングやバグトラッキング、翻訳などを依存する形で生態系が構築されています。

gihyo.jp

ObsidianとAIを組み合わせて図表を手軽に作成する

今回はObsidianのノート内に図表を入れるときに、AIと連携して作成するための具体的なプロンプト例を紹介します。

azukiazusa のテックブログ2

バイブコーディングチュートリアル：Claude Code でカンバンアプリケーションを作成しよう

バイブコーディングとは、AI エージェントを活用して直感的にアプリケーションを開発する新しいコーディングスタイルです。このチュートリアルでは、Claude Code を使って Next.js でカンバンボードアプリケーションを作成します。

gihyo.jp

GNOMEプロジェクト、インフラ全体をAWSクラウドに移行

GNOME Foundationは6月10日、これまでオンプレミス（OpenShift）で運用してきたWebインフラストクラクチャをAWSクラウドに移行したことを発表した。

gihyo.jp

今わかっているPixel 10のこと

今回は、実際に新UI「Material 3 Expressive」触ってみて、気づいた3点をご紹介します。

gihyo.jp

［オンプレ技術者向け］ AWSを学ぶには？

この連載では、それぞれのレベル別にAWSの学び方を紹介します。第2回はオンプレ技術者向けです。

gihyo.jp

「CMSが集まる場所」――MTDDC Meetup TOHOKU 2025、7月26日宮城県・仙台市で開催

2025年7月26日、Movable Typeを中心としたWebカンファレンス「MTDDC Meetup TOHOKU 2025」がTKPガーデンシティ仙台（宮城県・仙台市）にてオフラインで開催されます。

gihyo.jp

第866回　IPEX-LLMを使用してIntelの内蔵/外部GPUでOllamaを高速化する

今回はIPEX-LLMを使用してOllamaを高速化する方法を紹介します。

gihyo.jp

OpenAI、推論モデルo3-proをリリース ——推論スタックの最適化により、API経由のo3の価格は80%値下げに

OpenAIは6月10日、最新の推論モデルo3-proをリリースした。

gihyo.jp

Apple、macOS上でLinuxコンテナを直接実行できる「container」をオープンソースとして公開

Appleは、Mac上で軽量仮想マシンを使ってLinuxコンテナを作成・実行するためのツール「container」を開発し、Apache License 2.0のもとGitHub上にオープンソースとして公開した。

gihyo.jp

Linux 6.16‐rc1が公開、NVIDIA Hopper/Blackwellに対応、正式リリースは2025年7月末の予定

Linus Torvaldsは6月8日、次期Linuxカーネル「Linux 6.16」の最初のリリース候補版となる「Linux 6.16-rc1」を公開した。

gihyo.jp

第247回　Docker上のMySQLでjemallocを使用してみる

今回はDockerのMySQLでjemallocを使用する方法について紹介していきたいと思います。

gihyo.jp

Node.js 18のサポートが終了、新しいLTSバージョンへの即時アップグレードを ―nodejs.orgが重大なセキュリティリスクを警告

nodejs.orgは2025年5月にメンテナンスサポートが終了したNode.js 18、およびそれ以前のバージョンについて、セキュリティ上の懸念からより新しいLTSバージョンへのアップグレードを呼びかけている。

azukiazusa のテックブログ2

OpenAI Agents の TypeScript SDK

OpenAI Agents SDK は AI エージェントを構築するためのパッケージです。軽量で使いやすく、抽象化を最小限に抑えているのが特徴です。この記事では、OpenAI Agents SDK の TypeScript バージョンの使用例を紹介します。

azukiazusa のテックブログ2

フロントエンドアプリケーションがエージェントに接続する方法を標準化する AG-UI

AG-UI はフロントエンドアプリケーションがエージェントに接続する方法を標準化するプロトコルです。この記事では AG-UI を使用してフロントエンドアプリケーションがエージェントに接続する方法を紹介します。

gihyo.jp

Gemini 2.5 Proアップグレード版プレビューリリース

Googleは2025年6月5日、高性能言語モデルの最新バージョン「Gemini 2.5 Pro」のアップグレードプレビュー版をリリースした。

gihyo.jp

「PyCon US 2025 参加報告会」7/10に開催 ―カンファレンス参加者による技術トレンドや知識を共有

2025年5月14～22日に米国・ピッツバーグで開催された「PyCon US 2025」に関する報告会が、2025年7月10日（木）にリアルとオンラインのハイブリッド形式で開催される。

gihyo.jp

9/26、27開催「PyCon JP 2025」Call for Proposalsが開始

2025年9月26日（金） 、27日（土）に広島で開催されるPyCon JP 2025のCall for Proposals（CfP）が開始されている。

gihyo.jp

Ubuntu 25.10（questing）の開発 ; 月刊スナップショットリリースとlinux-firmwareの分割検討

Ubuntuのリリースパターンはこれまで、「ある程度の開発が続けられた後にベータ版・RC版を出し、それをもとにリリースエンジニアリングを行って正式版をリリースする」というやりかたを踏襲してきました。この流れが今後は（少なくともquestingでは）大きな変化を遂げることになりそうです。

stin's Blog

resend-local というツールを作った

Resend というメール送信サービスがあります。 そのAPIエミュレーターをローカルで起動する npm パッケージを作りました。次のコマンドでサーバー http://localhost:8005 で起動します。 Resend SDK は Base URL を環境変数経由で変更できます。.envなどで次のように指定すれ...

gihyo.jp

Figma、「Dev Mode MCP Server」ベータ版の提供を開始 ―MCPを使ってエージェント型コーディングプラットフォームとデザインコンテキストを共有

Figmaは2025年6月4日、同社のデザインツールFigmaをMCP（Model Context Protocol）に対応させ、Figmaで作成したデザインのコンテキストをLLMに提供するMCPサーバー「Dev Mode MCP Server」をベータ版としてリリースした

gihyo.jp

AIコードエディタCursor 1.0リリース ―BugBotの実装、MCP対応、Background Agentをすべてのユーザが利用可能に

Anysphereは2025年6月4日、同社が開発するAIコードエディタCursorのバージョン1.0をリリースした

gihyo.jp

進化を続けるObsidianの最近の変化とは？ ——データベース型の情報管理やWeb閲覧、AIを利用したチャットや文章整形・関連ノートの検索が可能に

書籍発売時点（1.4.5）からこの記事執筆時点（1.9.1）までの期間に追加されたコアプラグインや注目を集めているコミュニティプラグイン、新たな機能について紹介します。

gihyo.jp

バイブコーディングを導入するための実用的なロードマップ

生成AIツールが引き起こす新たな波によって、ソフトウェアの構築方法や、そのプロセスに携わる人々のあり方が変わりつつあります。この変革のまさに最前線にある手法が、自然言語でのプロンプトを通じて、AIに機能的なコードを生成させる「バイブコーディング」です。

gihyo.jp

Wear OS 6では、より時計らしく使えるかもしれません

今回は、実際に新UI「Material 3 Expressive」触ってみて、気づいた3点をご紹介します。

gihyo.jp

NotebookLM、共有機能を強化し、「公開ノートブック」をNotebookLMユーザー一般と共有可能に

NotebookLMは6月3日、ユーザーが作成したノートブックを一般公開で共有できる新機能を追加した。

gihyo.jp

第865回　UbuntuでDHCPサーバーを構築する（Ubuntu 24.04 LTS対応版）

今回はUbuntu 24.04 LTSでDHCPサーバーを構築する方法を解説します。

azukiazusa のテックブログ2

Claude Code のタスクの完了を通知する方法

AI を使用してコードの生成を行う際、ある程度の時間待機する必要があります。その間ターミナルに張り付いて観察するのではなく、タスクが完了したタイミングで通知を受け取ることができれば、他の作業をしながら待機することができます。 Claude Code でタスクの完了を通知する方法を 3 つ紹介します。

gihyo.jp

Xの新メッセージサービス「XChat」ベータ版が利用可能に ―「消えるメッセージ」やセキュリティ強化、多彩なファイル送信

X上の新メッセージングサービス「XChat」がベータ版として公開された。Xのスマホアプリ等から利用できる。

gihyo.jp

Blenderの機能の一つであるグリースペンシルを使って、パラパラ漫画を作ってみよう

第54回目は、Blenderで用意されている機能のグリースペンシルを使って、パラパラ漫画を描く方法を見ていきます。

gihyo.jp

第118回　HeatWave MySQLの機能アップデート、PostgreSQL新メジャーバージョン18ベータ版などリリース情報いろいろ

この連載はOSSコンソーシアム データベース部会のメンバーがオープンソースデータベースの毎月の出来事をお伝えしています。

azukiazusa のテックブログ2

コーディングエージェントの現状の整理とエンジニアの仕事の変化について

AI によるコーディングの支援はコード補完型からチャット型、そして自律型へと進化しています。この記事では現時点で主流となっているコーディングエージェントの種類とその特徴を整理したうえで、エンジニアの仕事の変化について考察します。

gihyo.jp

生成AIの内部で何が起こっているのか？ ―Anthropic、言語モデルの思考をトレースする“circuit tracer”をオープンソースとして公開

Anthropicは2025年5月29日、大規模言語モデルの思考過程をトレースするツールライブラリ「circuit tracer」を開発、オープンソースとして公開したことを発表した。

gihyo.jp

Ubuntu 25.10（questing）の開発; Chronyのデフォルト化と、『開発者のためのUbuntu』

QuestingではデフォルトのNTPデーモン（兼NTSデーモン）がChronyへ切り替わることになります。

gihyo.jp

第61回　grubテーマの遊び方（その2）

この連載でも何度か生存報告的に紹介してきたPlamo Linux 8.2を去る5月7日にリリースしました。

@sakupi01.com blog

[Thoughts Are Appreciated!] Baseline という指標の活用可能性に関する考察

Baseline という指標の活用可能性に関する考察

gihyo.jp

新UI「Material 3 Expressive」がさっそく試せるぞ

今回は、実際に新UI「Material 3 Expressive」触ってみて、気づいた3点をご紹介します。

gihyo.jp

Linux 6.15リリース、BPFに新しいキュー型スピンロックを実装

Linus Torvaldsは5月25日（米国時間）、「Linux 6.15」の正式リリースを明らかにした。

gihyo.jp

第864回　レコード登録なしに名前解決を行える、ワイルドカードDNS「nip.io」をセルフホストする

社内ローカルなnip.ioを、自社ドメインで構築しようというのが今回の本題です。

gihyo.jp

第246回　MySQLでJSONスキーマを検証する ―JSON_SCHEMA_VALID関数の使い方

今回は、MySQLでJSONデータを扱う際に、特定のスキーマ形式のデータだけを受け入れたい場合に便利なJSON_SCHEMA_VALID関数を紹介します。

gihyo.jp

みんなのPython勉強会 10周年記念！ 5/30にハイブリッド開催

「みんなのPython勉強会」が、2025年5月に記念すべき10周年を迎え、今回は特別なハイブリッド形式（現地＋オンライン）で開催される。

gihyo.jp

［若手エンジニア向け］ AWSを学ぶには？

この連載では、それぞれのレベル別にAWSの学び方を紹介します。第1回は若手エンジニア向けです。

azukiazusa のテックブログ2

Claude Code Action で Claude Code を GitHub に統合しよう

Claude Code Action は Claude Code を GitHub Actions のワークフローに統合するためのアクションです。これを使用することで、GitHub 上でコードの生成やレビューを AI に依頼することができます。

azukiazusa のテックブログ2

Mastra の A2A プロトコルサポート

Mastra は A2A プロトコルをサポートしています。Mastra サーバーを構築することで A2A プロトコルに準拠したサーバーが立ち上がります。この記事では Mastra を使用して A2A プロトコルに準拠したサーバーを構築し、Mastra のクライアント SDK を使用して A2A プロトコルの仕様に従い通信を行う方法を紹介します。

gihyo.jp

まつもとゆきひろさん「Programming Language for AI age」～RubyKaigi 2025 3日目キーノート

2025年4月16日(水)から 18日(金)まで、愛媛県民文化会館にてRubyKaigi 2025が開催されました。最終日のキーノートはRubyの生みの親であるまつもとゆきひろさんが登壇し、「⁠Programming Language for AI age（AI時代におけるプログラミング言語）」について話しました。

gihyo.jp

Ubuntu 25.10（questing）の開発; デスクトップのロードマップ

questing（Ubuntu 25.10）におけるUbuntu Desktop部分のロードマップが提示されています。注目するべき点を、ある程度取捨選択しながら見ていきます。

gihyo.jp

Anthropic、Claude Opus 4とClaude Sonnet 4をリリース ——Claude Codeと新しい4つのAPIも一般提供開始

Anthropicは5月23日、同社の次世代AIモデル「Claude Opus 4」と「Claude Sonnet 4」を発表した。

gihyo.jp

Ivo Anjoさん「Performance Bugs and Low-level Ruby Observability APIs」〜RubyKaigi 2025 2日目キーノート

RubyKaigi 2025の2日目のキーノートとして、Ivo Anjoさんが「Performance Bugs and Low-level Ruby Observability APIs」というタイトルで発表を行いました。

gihyo.jp

こっち側の流儀「Material 3 Expressive」を発表

Googleは、5月13日に開催したスペシャルイベント「The Android Show: I/O Edition」で「Material 3 Expressive」を発表しました。

gihyo.jp

Google、画像生成Imagen 4、動画生成Veo 3、AI映像制作ツールFlowをリリース 〜電子透かしSynthIDの識別を支援する「SynthID Detector」の早期アクセスも案内

Googleは5月20日から開催されているGoogle I/O 2025で、画像生成モデルVeoと動画生成モデルImagenをアップデートしたことを発表した。また、音楽生成モデルLyriaへのアクセスを先月4月に拡大したことを案内し、さらにAI映像制作ツールFlowをあらたにリリースしたことも発表した。

gihyo.jp

第863回　そのSnapdragon X搭載PCでUbuntuを使えますか？ 〜Snapdragon X搭載PCへのUbuntu 25.04の対応状況

今回は、Snapdragon XベースのWoAデバイス特有の事情・背景を解説し、その上で、Ubuntuを動かす前提でSnapdragon XベースのWoAデバイスを選定するならどう考えるべきかについて解説します。

gihyo.jp

ObsidianのノートをVS CodeのAI（Cline）を通して活用する 〜ローカルにMarkdown形式で保存しているメリットを活かす使い方

今回は、なぜObsidian単体ではなく外部のAIと連携するのか、どうすればObsidianで管理するノートをAIと連携して活用できるのか、について解説します。

gihyo.jp

Mari Imaizumiさん「Ruby Taught Me About Under the Hood」 〜RubyKaigi 2025 1日目キーノート

2025年4月16日から18日まで、愛媛県県民文化会館にてRubyKaigi 2025が開催されました。1日目は、ima1zumiさんことMari Imaizumiさんによる基調講演からスタートしました。タイトルは「Ruby Taught Me About Under the Hood」です。

gihyo.jp

Visual Studio Code、拡張機能GitHub Copilot ChatをOSSにして統合、オープンソースAIエディターへ

VS Codeチームは5月19日、拡張機能であるGitHub Copilot Chatのコードが今後数週間のうちにMITライセンスでオープンソース化されること、そしてその関連するコンポーネントをVisual Studio Code本体に統合していくことを発表した。

gihyo.jp

「PyCon JP 2025」9/26、27に広島で開催、スポンサー募集開始

一般社団法人PyCon JP Associationは、Pythonに関する年次カンファレンスPyCon JP 2025を2025年9月26日（金）、27日（土）に開催する。

gihyo.jp

Microsoft、Model Context Protocolを広範囲にサポートへ ―MCPサーバーレジストリ、MCP on Windowsを提供

Microsoftは2025年5月19日、開発者向け年次イベント「Microsoft Build 2025」にて、同社のAIプラットフォームやフレームワーク全体にModel Context Protocol（MCP）のサポートを提供していくことを発表した。

gihyo.jp

NotebookLM、モバイルアプリをリリース

Googleは5月20日、NotebookLMのモバイルアプリをリリースした。Web版と同じように、AIを活用して資料からノートブックを作成したり、資料に対する質問をしたり、ポッドキャスト形式の音声概要を聞くことができる。

gihyo.jp

Microsoft、Windows Subsystem for Linuxをオープンソースに

Microsoftは2025年5月19日、Windows上で動作するLinux環境Windows Subsystem for Linux（WSL）を、オープンソースとして公開することを発表した。

gihyo.jp

OepnAI、ソフトウェア開発全般をアシストするAIエージェント「Codex」をリリース

OpenAIは2025年5月16日、クラウドベースのソフトウェアエンジニアリングエージェント「Codex」をリサーチプレビューとしてリリースした。

gihyo.jp

自律型AI：プラットフォームエンジニアリングの隠された鍵

複雑な開発プロセスや標準化、セキュリティ対策、継続的インテグレーションといった課題に対して、自律型AIは人間の手では追いつかないスピードとスケールで対応し、チーム全体のベロシティ（開発速度）を飛躍的に向上させる可能性を秘めています。本稿では、自律型AIがなぜ今、プラットフォームエンジニアリングにとって不可欠な存在なのか、そして導入にあたって検討すべきポイントと、実際のユースケースを交えて、その全体像を解説します。

gihyo.jp

Blenderのグリースペンシルを使って線を描いてみよう

本連載では、Blender の基本的な知識、機能についてイラストを交えながら紹介しています。第53回目は、前回説明したグリースペンシルを使って、実際に線を描いていきます。

azukiazusa のテックブログ2

TypeScript で AI エージェントを構築する VoltAgent

VoltAgent は TypeScript で AI を活用したアプリケーションを構築するためのツールキットです。VoltAgent Console を使用すると、エージェントの状態をリアルタイムで確認したり、エージェントのワークフローを可視化できる点が特徴です。

azukiazusa のテックブログ2

React Router の Server Components 対応

React Router はプレビュー版として Server Components に対応しました。これにより loader や actions を使用してデータを返す際にコンポーネント渡したり、Server Components ファーストのサーバーコンポーネントルートを作成できるようになりました。この記事では React Router の Server Components 対応を実際に試してみます。

gihyo.jp

GitLab 18.0リリース

2025年5月15日、GitLabの最新バージョンとなるGitLab 18.0がリリースされた。

gihyo.jp

RISC-V関連の新ハードウェアへの対応、Ubuntu 25.04へのアップグレードの再開

パリで開催されているRISC-V Summit Europe 2025にあわせて、「Ubuntuを搭載したRISC-Vハードウェア」の発表やデモ展示が提供されています。

gihyo.jp

AIの新章：今後1年、ソフトウェア開発に起こる4大変革

生成AIの進化がソフトウェア開発に変革をもたらしつつある今、企業は単なる自動化を超えたAI活用のステージへと踏み出しています。文脈を理解し、積極的に判断・提案を行うAIの登場により、開発の在り方、チームの役割、そして技術戦略そのものが大きく変わろうとしています。本稿では、今後1年に起こると予想される4つの重要な変化を中心に、AIがどのようにソフトウェア開発を再構築していくのかを展望します。

gihyo.jp

Google、LLMを使って新たなアルゴリズムを見つけるコーディングエージェント「AlphaEvolve」を発表

Googleは2025年5月14日、大規模言語モデルを使ってより優れたアルゴリズムを開発できるコーディングエージェント「AlphaEvolve」を発表した。

gihyo.jp

期待外れ？ そんなことはない「rabbit r1」レビュー⑤

5回目となるrabbit r1のレビューになります。

gihyo.jp

第862回　「Aider」で、いつものターミナルからAIアシスタントを利用する

Aiderは、ターミナル上で動作するオープンソースのAIペアプログラミングツールです。OpenAIのGPT-4oや、AnthropicのClaude 3.7をはじめとする様々なLLMに接続し、コードの作成、修正、リファクタリングなどを支援します。

gihyo.jp

まだ使えるPCを廃棄物にするなんて！ ―openSUSE、Windowsからの乗り換えをめざす「End of 10」イニシアチブに合流

2015年7月にMicrosoftがリリースしたWindows 10は2025年10月14日にサポートを終了し、この日以降、Microsoftからソフトウェア更新やセキュリティ修正プログラムが無料で提供されることはなくなる。

gihyo.jp

VS Code、GitHub CopilotのMCPでStreamable HTTP・画像出力に対応 〜再利用可能な指示ファイル・プロンプトファイルの設定や、クイックフィックスでHTML・Markdownの代替テキストの生成も

Visual Studio Codeは2025年4月の更新で、GitHub Copilotに組み込まれているMCPにおいてStreamable HTTPと画像出力に対応した。これにより、MCPサーバーとの接続にStreamable HTTPを使えるようになり、また画像生成に対応していれば画像を出力できるようになった。

gihyo.jp

GitHub Actionsでデジタル証明書付きPythonパッケージをリリースする方法

今月の「Python Monthly Topics」では、Pythonのパッケージを公開するときに、デジタル証明書（Digital attestations）を用いてより安全に公開する方法について紹介します。

gihyo.jp

第245回　MySQL 9.2と9.3の新機能について

MySQLのInnovation ReleaseとなるMySQL 9.2が2025年1月、MySQL 9.3が2025年4月にリリースされました。

gihyo.jp

Twemoji、Unicode Emoji 16に対応した絵文字セットを4月にリリース

4月14日、Twemoji v16.0.1がリリースされた。

gihyo.jp

なぜObsidianが2025年になって注目されているのか

2025年になってObsidianが大きく注目を集めています。今回はその背景と理由について解説します。

blog.jxck.io

大フィッシング攻撃時代における攻撃手法と自衛手段の考察

GW のさなか、有名投資家のテスタ氏を中心に、大規模な乗っ取り攻撃の存在が報告された。当初 900 億円程度と試算された被害額は、数日のうちに 3000 億円を超えると修正され、富裕層のみならず一般市民も無視できない状況となっている。今、一体何が起こっているのか。金融資産を預かるサービスはどのようにユーザを守るべきか。我々ユーザはどのように自衛するべきか。判明している情報をもとに考察する。

azukiazusa のテックブログ2

Vercel で MCP サーバーを構築する

Model Context Protocol (MCP) の 2025-03-26 の仕様では新たに Streamable HTTP が追加され、リモート MCP サーバーへの注目が集まっています。この記事では Next.js を使用して Vercel 上に MCP サーバーを構築する方法を紹介します。

azukiazusa のテックブログ2

Cloudflare で MCP サーバーを構築する

Model Context Protocol (MCP) の 2025-03-26 の仕様では新たに Streamable HTTP が追加され、リモート MCP サーバーへの注目が集まっています。この記事では `agents` フレームワークを使用して Cloudflare 上に MCP サーバーを構築する方法を紹介します。

azukiazusa のテックブログ2

Error インスタンスかどうか判定する Error.isError() メソッド

Error.isError() メソッドは、オブジェクトが Error インスタンスかどうかを判定するためのメソッドです。今までも instanceof 演算子を使用して判定することができましたが、偽陽性と偽陰性が発生する可能性があります。Error.isError() メソッドは Array.isArray() と同じく内部スロットを使用して判定するため、より堅牢に判定することができます。

azukiazusa のテックブログ2

Docker の MCP Toolkit を試してみる

Docker の MCP Toolkit はコンテナ化された MCP サーバーを AI エージェントと統合するための Docker Desktop の拡張機能です。コンテナ化された環境で MCP サーバーを実行することができ、信頼された Docker MCP カタログから MCP ツールを簡単にインストールできる点が特徴です。

gihyo.jp

Ubuntu 25.10（questing）の開発; sudoを『錆びさせる』試み、25.04へのアップグレードの一時停止

questing（Ubuntu 25.10）の開発フェーズが開始されて間もないタイミングですが、Coreutilsの置き換えだけでなく、システムを構成する基本的なコマンドを置き換えていく流れも存在することが明らかになりました。

gihyo.jp

OpenSearch 3.0リリース、GPUアクセラレーションにより処理速度が大幅に向上

OpenSearch Software Foundationは2025年5月6日、オープンソースの全文検索・分析エンジンOpenSearchの新バージョンOpenSearch 3.0をリリースした。

gihyo.jp

Google I/Oに先だって、13日にスペシャルイベントを開催

Googleは、今月の20日から始まる開発者向けの年次イベント「Google I/O」に先立って、スペシャルイベント「The Android Show: I/O Edition」を現地時間の5月13日10時に開催すると発表しました。

gihyo.jp

Blenderの機能の一つ、グリースペンシルについて知ろう

本連載では、Blenderの基本的な知識、機能についてイラストを交えながら紹介しています。第52回目は、Blenderで用意されている機能のうち、グリースペンシルについて学んでいきます。

gihyo.jp

第861回　systemdの開発者が作ったmkosiで、お手軽にルートファイルシステムを構築する

ソフトウェアの作成時における悩ましい問題のひとつが「動作確認環境の構築」です。今回はこの動作確認環境をCI等から作成・利用しやすい「mkosi」について紹介します。

azukiazusa のテックブログ2

ESLint を MCP サーバーとして実行する

ESLint v9.26.0 から MCP サーバーとして実行できるようになりました。この機能により LLM（大規模言語モデル）は ESLint のルールを使用してコードを修正することができるようになります。

azukiazusa のテックブログ2

actions/ai-inference を使って GitHub Actions のワークフローから AI モデルを呼び出す

actions/ai-inference は GitHub Actions のワークフローから AI モデルを呼び出すための公式のアクションです。これを使用することで CI/CD のワークフローから AI モデルを簡単に利用できるようになります。この記事ではプルリクエスト上で AI に記事のレビューをしてもらうという実践的な使用例を紹介します。

gihyo.jp

openSUSE Leap 16.0 Betaがリリース、正式版は10月リリース予定

openSUSE開発チームは4月30日、開発中の「openSUSE Leap 16.0」がベータサイクルに入ったことを明らかにした。

gihyo.jp

Redis 8正式リリース、AGPLのもと再びオープンソースとして利用可能に

Redisは2025年5月1日、KVSデータベースRedisの最新バージョンRedis 8の一般提供（GA）を開始した。

gihyo.jp

Anthropic、MCPを介してClaudeとアプリ、ツールを連携させる「Integrations」機能をリリース ―Integrationsを使った高度な検索リサーチ機能「Advanced Research」も

Anthropicは2025年5月2日、MCPを使って同社の対話型生成AIサービスClaudeとさまざまなアプリやツールを連携できる「Integrations」機能をリリースした。

gihyo.jp

Ubuntu 25.10（questing）の開発; 開発を進めるための開発、Qualcomm Dragonwing用Ubuntu Desktop/ServerイメージのBeta

questing（Ubuntu 25.10）の開発がスタートし、「準備」と言えるいくつかのタスクが実行されています。

gihyo.jp

Microsoft、高度な推論機能を備えた小型モデルPhi-4-reasoning、Phi-4-reasoning-plus、Phi-4-mini-reasoningを発表

Microsoftは2025年4月30日、小型でありながら大規模モデルに匹敵する推論能力をもったPhi-4シリーズの3つの新モデルを発表した。

gihyo.jp

Qwen3リリース ―小型モデルは10倍以上のパラメータをもつモデルを上回る性能を発揮

中国Alibabaは2025年4月29日、同社が開発するオープンな言語モデルQwenファミリの最新バージョンQwen3をリリースした。

gihyo.jp

Android 16がOS分断を解決する？

rabbit r1の話題が4回続いたので、今回は話を変えてAndroid 16 beta 4の話題を取り上げます。

gihyo.jp

第117回　MySQL and HeatWave Summit開催、PostgreSQLエンタープライズ・コンソーシアム成果報告会がまもなく

この連載は、OSSコンソーシアム データベース部会のメンバーがオープンソースデータベースの毎月の出来事をお伝えしています。

gihyo.jp

NotebookLM、「音声概要」機能で日本語を含む多言語をサポートへ

Googleが提供しているGeminiベースのAIを搭載した調査アシスタントアプリ「NotebookLM」には、調査したことを音声でまとめてくれる音声概要（Audio Overviews）機能があるが、この機能はこれまで英語のみで提供されていた。Googleは4月29日、この音声概要機能が日本語を含む多数の言語にベータ扱いで対応したことを発表した。

gihyo.jp

第860回　Ubuntu+Visual Studio Code+Ollamaでプログラムの相談をする

今回はVisual Studio CodeにAI Toolkit for Visual Studio Codeをインストールし、Ollamaのフロントエンドとして使用する方法を紹介します。

gihyo.jp

Python Webツールキットの役割と機能

2025年4月の「Python Monthly Topics」は、Python Webツールキットの役割と機能を紹介します。

gihyo.jp

第244回　MySQL Shellで好きなエディタを使用する

MySQL Shellは、第226回や第216回でも紹介したように、高機能な関数を使用してさまざまな事ができるようになりました。

azukiazusa のテックブログ2

UI の一部を非表示にする React の Activity コンポーネント

React の新しい実験的なコンポーネントとして `` が追加されました。これは UI の表示非表示を切り替えるために使用されます。従来の条件付きレンダリングとは異なり、アンマウントされた場合にも状態を保持する点が特徴です。

@sakupi01.com blog

The Outline Algorithm Utopia

本エントリでは、Document Outline Algorithm というユートピアと、その中で繰り広げられた HTML の歴史を振り返ります。また、Outline Algorithm の後継として実現が検討されている Heading Level Concept についての現状を記します。

azukiazusa のテックブログ2

AIと本音トーク：エンジニアの仕事、これからどうなる？

「AI コーディングエージェントの台頭によりエンジニアの働き方はどう変わるのか？」というテーマについて AI と人間のインタビューを通じて探ります。

gihyo.jp

Ubuntu 25.10 “Questing Quokka”の開発、AmpereOneのSoC Certification

Ubuntu 25.04のリリースから時間を置かず、「次」のリリースのための準備が開始されています。Ubuntuの開発におけるお約束であるコードネームがまず決定され、コードネーム当てコンテストが終了しました。

gihyo.jp

第60回　grubテーマの遊び方（その1）

前回、インストーラの更新に合わせて起動時のgrubのメニュー画面を一新したことを紹介しました。その際テーマ設定ファイルの書き方に関する解説はあまり見つからず、結構苦労しました。

blog.jxck.io

3PCA 31 日目: 3rd Party Cookie 廃止の廃止

このエントリは、2023 年の 3rd Party Cookie Advent Calendar の 31 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookieこのエントリもいよいよ終わりに近づいてきたようだ。

gihyo.jp

Discourse、Fediverseと連合できるActivityPubプラグインを案内

コミュニティフォーラムソフトウェアのDiscourseは、2年前にFediverseと接続するためにActivityPubプラグインを開発を始めたが、今回改めて2025年4月現在のActivityPubプラグインの機能を案内した。

gihyo.jp

期待外れ？ そんなことはない「rabbit r1」レビュー④

今週もrabbit r1の使用レポートについてお届けします。

gihyo.jp

第859回　Waylandで行こう［Ubuntu編］

Ubuntuでは、もはやWaylandネイティブで動作させてもいいくらいのところまで成熟が進んでいます。今回はその詳細を紹介します。

gihyo.jp

CSS Variablesはここまで進化した

Misskeyでは2025年も大きな機能改修・リファクタリングに取り組んでいます。その中にCSS Variablesに関する作業もあったので、今回はその紹介も兼ねてMisskeyで使っている便利なテクニックなどを取り上げます。

gihyo.jp

第3回　製造業における生成AIの応用をアーキテクチャから考える

今回は医療業界で生成AIがすでにどう活用されているか、また課題や解決策について、前提となる法律や実現に必要なアーキテクチャを解説していきます。「医療の世界とAI」と聞くと非常に先進的で、私達の生活向上に直結するイメージですが、さまざまな前提が存在し、エンジニアとして把握しておかないと知らず知らずのうちに法令違反してしまうケースがあります。あまりエンジニア向けに解説された記事が少ないので、そこを解説してみます。

gihyo.jp

Blenderでクイックエフェクトを使って炎や煙の設定をしてみよう

第51回は、Blenderで用意されている物理演算のうち、簡単に設定できるクイックエフェクトの設定方法について学んでいきます。

azukiazusa のテックブログ2

Ink を使って CLI アプリを React で書く

Ink は CLI アプリを React で書くためのライブラリです。Flexbox レイアウトエンジンである Yoga を使用しているため、Web アプリケーションと同じような CSS を使って UI を構築できることが特徴です。Codex や Claude Code といったコーディングエージェントの CLI アプリが Ink で書かれています。

azukiazusa のテックブログ2

MCP サーバーの Streamable HTTP transport を試してみる

MCP では stdio と Streamable HTTP の 2 つの transport が定義されています。TypeScript SDK では v1.10.0 から Streamable HTTP transport がリリースされました。この記事では MCP サーバーを構築し、Streamable HTTP transport を試してみます。

gihyo.jp

Ubuntu 25.04 “Plucky Puffin”のリリース

4月17日（現地時間）、Ubuntu 25.04 “Plucky Puffin”（『勇気あるツノメドリ』）がリリースされました。

gihyo.jp

OpenAI、自然言語からコードを生成するオープンソースのコーディングエージェント「Codex CLI」をリリース

OpenAIは2025年4月17日、ターミナルからコマンドラインで動作する軽量コーディングエージェント「Codex CLI」をリリース、GitHubにてApache License 2.0にもとづくオープンソースとして公開した。

gihyo.jp

“これが答えだ！” Fedora Linux 42リリース ―KDE Plasmaはエディションに昇格

Fedoraプロジェクトのリーダーを務めるMatthew Millerは4月15日、「Fedora Linux」の最新版となる「Fedora Linux 42」のリリースをアナウンスした。

gihyo.jp

Googleドキュメント、コードブロックの言語サポートを拡大

Googleは4月14日、Googleドキュメントにおいて、コードブロックのフォーマットにおけるプログラミング言語のサポートを拡大したことを発表した。

gihyo.jp

OpenAI o3、o4-miniを発表 ―ChatGPT内のすべてのツールを組み合わせてエージェントとして利用可能に

OpenAIは2025年4月17日、推論モデルの新バージョンOpenAI o3とo4-miniを発表した。

gihyo.jp

期待外れ？ そんなことはない「rabbit r1」レビュー③

rabbit r1を使い始めて3週間目に入りました。ある程度使い込んで、期待以上だった部分と期待以下だった部分が見えて来たので、今回はこれをご紹介します。

gihyo.jp

第858回　Ubuntu 25.04の変更点

今回は4月17日にリリースされる予定のUbuntu 25.04の特徴的な変更点をお知らせします。

blog.jxck.io

閲覧履歴があってもリンクの色が変わらないケースについて

4 月末にリリースされる Chrome 136 からは、一部のケースで「閲覧履歴があってもリンクの色が変わらない」状態が発生する。もしこの挙動に依存して閲覧をしているユーザがいれば、多少不便に感じるかもしれない。しかし、これは長年問題視されてきた、ユーザのプライバシー保護のための更新だ。ユーザ側でも、「サイトが壊れたのでは?」と思う人もいるだろうため、前半は技術用語を少なめに解説し、エンジニア向けの解説は後半で行う。

gihyo.jp

カスタムサポートではかどる斜めプリント

今回は斜めプリントと、斜めプリントを安定させるためのカスタムサポートを自分で作ることを解説します。

gihyo.jp

第243回　MySQLのJSON_TABLE()を使ってJSONデータを行に分解する

今回は、JSON配列を仮想的なテーブルとして扱えるJSON_TABLE()の使い方と活用方法について紹介します。

azukiazusa のテックブログ2

AI エージェントの連携を標準化する A2A プロトコルを試してみる

AI エージェント同士の連携を標準化するために Agent2Agent プロトコル（A2A）を発表しました。A2A プロトコルは基盤となるフレームワークやベンダーに依存せず、エージェント同士が安全な方法で相互に通信できるように設計されています。この記事ではサンプルコードを通じて A2A プロトコルを使用した AI エージェントの連携を体験してみます。

gihyo.jp

Ubuntu 25.04（plucky）の開発; リリースまで一週間・OrangePi RV2用の開発者用イメージ

pluckyの開発はリリース日である4月17日に向けて、各種コンポーネントのFinal Freezeされ、QAとリリースノートの仕上げが開始されています。

gihyo.jp

Google、AIエージェントを連携させるAgent2Agentプロトコルを発表

Googleは2025年4月9日、同社の年次カンファレンス「Google Cloud Next 25」にて、複数のAIエージェントを連携させるためのプロトコル「Agent2Agent（A2A）」プロトコルを発表した。

gihyo.jp

期待外れ？ そんなことはない「rabbit r1」レビュー②

前回の続きです。今回は、rabbit r1を1週間ほど使った印象をお届けします。

gihyo.jp

第857回　bcacheでHDDへの書き込みを見かけ上速くする

今回はLinuxカーネルのブロック層キャッシュ、bcacheを紹介します。

gihyo.jp

U-22プログラミング・コンテスト2025 応募要項を公開

U-22プログラミング・コンテスト実行委員会は、通算46回目の開催となるU-22プログラミング・コンテスト2025の公式Webサイトにて応募要領を公開した。

gihyo.jp

Linux 6.15‐rc1リリース、Bcachefsのオンディスクフォーマットはソフトフリーズに

Linus Torvaldsは4月6日（米国時間）、次期Linuxカーネル「Linux 6.15」の最初のリリース候補版となる「Linux 6.15-rc1」を公開した。

gihyo.jp

GitHub Copilot、Model Context Protocolをパブリックプレビューで利用可能に ―新たなGitHub MCPサーバーもリリース

GitHubは2025年4月4日、GitHub CopilotのエージェントモードにModel Context Protocol（MCP）サポートがパブリックプレビューとして追加されることを発表した。

gihyo.jp

Meta、Llama 4を発表 ―MoEアーキテクチャを初めて採用したオープンウェイト・ネイティブマルチモーダルモデル

Metaは2025年4月5日、同社が開発するオープンソースAIモデルLlamaの最新バージョン「Llama 4」ファミリーの3モデルを発表、うち2つをリリースした。

gihyo.jp

Blenderでクイックエフェクトを使ってエフェクトの設定をしてみよう

第50回目は、Blenderで用意されている物理演算のうち、簡単に設定できるクイックエフェクトの設定方法について学んでいきます。

azukiazusa のテックブログ2

コーディング AI エージェントを自作してみよう

好むと好まずと関わらず、ソフトウェア開発において AI の活用は重要なパラダイムシフトの 1 つです。AI エージェントはユーザーからの指示を元に自律的にタスクを選択し、実行します。この記事では、コーディング AI エージェントを自作する過程を紹介します。

gihyo.jp

Ubuntu 25.04（plucky）の開発; ベータ以降の調整、“Q”のコードネームクイズ、Ubuntu Stainless Steel Edition～防錆加工～

plucky（Ubuntu 25.04）の開発は無事ベータリリースを済ませ、残り2週間ほどで品質を引き上げつつ調整をするというフェーズに入りました。

gihyo.jp

期待外れ？ そんなことはない「rabbit r1」レビュー①

以前、本連載でも取り上げたrabbit r1が到着しました。まだ、使い始めて日が浅いので、今回はファーストインプレッションをお届けします。

blog.jxck.io

Web における Security, Safety, Trust の相対性

我々は、インターネット上において「信頼」できるサービスを、「安全」に使うことに、「安心」を求める。プライバシーは守られ、不正な取引には加担せず、詐欺被害も受けたくない。技術的に言えば、通信は暗号化し、個人は匿名化し、データは秘匿し、それによって Secure で Safety で Trustworthy な Web が手に入る。それを突き詰めた先に、「自由」で理想的なインターネットがある。本当だろうか?

gihyo.jp

Debian 13 “Trixie”、フリーズプロセスを開始

Debianプロジェクトのリリースチームは3月29日、開発中の次期リリース「Debian 13 “Trixie”」のフリーズプロセス（Milestone 1）が始まったことを明らかにした。

gihyo.jp

第242回　MySQLのデッドロックに関するパラメーターとステータス

過去に発生したデッドロックを確認するにはどうしたらいいでしょうか。今回はデッドロックが発生した時点でログに落とす方法や、その他デッドロックに関するパラメーターやステータスについて紹介したいと思います。

blog.jxck.io

悪いのは全部 Eve だと思ってた

いつも本ブログを読んで頂いている皆様、そしてセキュリティ関係者の皆様へ。この度は、筆者による "Eve" に対する不適切な引用、および、原稿内における不名誉な扱いについて、この場を借りて謝罪させていただきます。

gihyo.jp

第116回　日本MySQLユーザ会25周年&MySQL 30周年イベント、脆弱性が修正されたPostgreSQLの続報

この連載はOSSコンソーシアム データベース部会のメンバーがオープンソースデータベースの毎月の出来事をお伝えしています。

gihyo.jp

PythonのGILと3.13の実験的な新機能「free threading」を知る

今月の「Python Monthly Topics」は、Python 3.13の新機能「free threading」について解説します。

azukiazusa のテックブログ2

Vercel AI SDK で MCP クライアントをツールとして利用する

MCP（Model Context Protocol）は LLM に追加のコンテキストを提供するための標準化されたプロトコルです。Vercel AI SDK は v4.2 から MCP をサポートしており、MCP クライアントをツールとして利用できます。この記事では Vercel AI SDK を使って MCP ツールを使用する方法を紹介します。

gihyo.jp

UbuntuにおけるARM64デスクトップのこれまでと今後、CanonicalとRivosのパートナーシップ

plucky（Ubuntu 25.04）はベータの時期を迎え、リリースまであと3週間となりました。このタイミングで、ARM64デスクトップ環境のこれまでと今後の予定が整理されています。

gihyo.jp

OpenAI、Model Context Protocolをサポート ―ChatGPTアプリにも対応へ

OpenAIは2025年3月27日、同社のAIエージェントSDKがModel Context Protocol（MCP）をサポートし、MCPサーバに接続できるようになったことをアナウンスした。

gihyo.jp

「PyCon APAC 2025 参加報告会」4/4に開催 ―国際カンファレンス参加者が最新の技術トレンドや実践的な知識を共有

2025年3月1～2日にフィリピン・マニラで開催された「PyCon APAC 2025」に関する報告会が、2025年4月4日（金）に日本マイクロソフトとリモートのハイブリッド形式で開催される。

@sakupi01.com blog

Standardizing User Intent with Interest Invokers ! (... and it's complicated)

本エントリでは、Interest Invokers の仕様策定において重要な「Show Interest」という概念と、 HIDs (Human Interface Devices) の「Show Interest」に係る議論の現状を解説します。

gihyo.jp

スマートウォッチ普及の功労者「Pebble」が復活です

Pebbleの創設者であるEric Migicovsky氏は、Pebble復活に向けて「RePebble」プロジェクトを開始し、Pebble OS搭載の新型スマートウォッチの発売を3月18日に発表しました。

gihyo.jp

Linux 6.14リリース、AMD Ryzen AIのNPUをサポート

Linus Torvaldsは3月24日（米国時間）、「Linux 6.14」のリリースをアナウンスした。

gihyo.jp

OpenAI、GPT-4oに組み込まれた画像生成機能を提供開始 ——画像内テキストの指定・一貫した画像の複数回出力が可能に

OpenAIは3月25日、GPT‑4oに組み込まれたより実用的な画像生成機能がChatGPTとSoraで展開しはじめたことを発表した。

gihyo.jp

日本のECとECプラットフォームの過去・現在・未来についてGMOペパボ寺井秀明氏に訊く――「カラーミーショップ byGMOペパボ」提供20周年を迎え

GMOペパボ株式会社 執行役員兼EC事業部部長 寺井秀明氏に「カラーミーショップ」の20年、そして、ECの過去・現在・未来について伺いました。

gihyo.jp

第856回　GoogleアカウントでUbuntuにログインする方法

今回は、authdとGoogle IAM用のブローカーを使い、GoogleアカウントでUbuntuにログインする方法を紹介します。

gihyo.jp

Blenderで設定した物理演算をベイクしてみよう

第49回は、Blenderに用意されている物理演算を設定したあとに行うベイクに関する設定方法について学んでいきます。

gihyo.jp

TSKaigi 2025、5月23・24日に開催、参加チケット販売中

TypeScriptに関するあらゆるテーマを扱う国内最大級のカンファレンス「TSKaigi 2025」が5月23日、24日で開催する。この参加チケットの販売が始まっている。

azukiazusa のテックブログ2

::scroll-button と ::scroll-marker を使って CSS だけでカルーセルを作る

カルーセルは Web アプリケーションでよく使われる UI コンポーネントの一つであるものの、標準化された実装方法が存在しないため、各ライブラリやフレームワークで独自の実装が行われています。この問題を解決するため、CSS だけを使用してカルーセルを実装するための新しい仕様が提案されています。:この仕様では ::scroll-button と ::scroll-marker 擬似要素を使用してカルーセルを実装します。

gihyo.jp

Java 24リリース――AIとポスト量子暗号をサポートする新機能をJavaOne 2025で紹介

2025年3月18日（米国時間）、米Oracle CorporationはJava最新版「Java 24」をリリースした。

gihyo.jp

Ubuntu 25.10でのcoreutilsのRust置き換え、pluckyの開発; ベータへ向けて、Jetson向けオフィシャルイメージ

「Ubuntuらしい」チャレンジングな試みが開始されます。Jon Seagerによる『酸化』の試みのDiscourse上のポストでは、coreutilsをRustベースの新実装であるuutilsで置き換える方向が示唆されています。

gihyo.jp

EMConf JP（Engineering Management Conference Japan） 2025レポート――エンジニアリングマネージャーたちの「増幅」と「触媒」を目の当たりにした1日

2025年2月27日、ベルサール新宿グランドコンファレンスセンターにて、Engineering Management Conference Japan 2025（EMConf JP 2025）が開催されました。ここではその模様をお届けします。

gihyo.jp

Geminiアプリ、文書作成やコーディングでGeminiとの協同作業を強化するCanvas機能を追加 ——音声概要機能も英語から展開

Googleは3月18日、Geminiアプリに、文書作成やコーディングのコラボレーションを強化するCanvas機能を追加したことを発表した。また、音声概要機能も英語から展開されることもあわせて発表した。

gihyo.jp

Android 16ベータ3がリリース。Auracastに興味津々

Android 16 ベータ3がリリースされました。当初は第2四半期（4～6月）にはリリースされることに驚きましたが、オンスケジュールでプロジェクトが進行していることを実感するニュースです。4月には、ベータ4をリリースして、その後、正式リリースとなるので、息つく暇もなくといった感じです。

gihyo.jp

第855回　Sambaで作るActive Directory互換環境 （4） UNIX属性の利用

第852回でSambaを使いドメインを作成した際に--use-rfc2307というオプションを指定しました。今回はRFC 2307に基づくスキーマ拡張で追加したUNIX属性について、実際の挙動や利用方法を紹介します。

gihyo.jp

ニュースレタープラットフォームGhost(Pro)、ActivityPubへの対応をパブリックベータに

ニュースレタープラットフォームGhostは3月17日、マネージドサービス（Ghost(Pro)）上でActivityPubとの連携機能をパブリックベータとして提供を開始した。

gihyo.jp

GIMP 3.0リリース ―GTK3ベースでUIが大幅に改善

GIMP開発チームは2025年3月16日、オープンソースの画像加工ソフトウェアGIMPの最新バージョンGIMP 3.0をリリースした。

gihyo.jp

第241回　MySQLでtimestamp型のカラムを部分一致で検索する

サービスを運用していると、ときどき日や月をまたいだとある時間に起きた処理を探したいことがあるかもしれません。今回はそんな時に役に立つ機能に関して紹介していきたいと思います。

gihyo.jp

PyCon APAC 2025参加レポート

PyCon APAC 2025は、2025年3月1日から3日にかけて、フィリピンのケソン市にあるアテネオ・デ・マニラ大学で開催されました。その参加レポートをお伝えします。

azukiazusa のテックブログ2

Vercel AI SDK を使って Next.js アプリに AI 機能を追加する

Vercel AI SDK は TypeScript 向けの AI 機能を活用するプロダクトを構築するためのツールです。AI SDK は AI モデルのプロバイダー間における API の違いを抽象化することで、開発者はアプリケーションの開発に集中できるようになります。この記事では Vercel AI SDK の使い方を確認し、最終的に Next.js で構築した Web アプリケーションに AI 機能を追加する方法を紹介します。

azukiazusa のテックブログ2

TypeScript で MCP サーバーを実装し、Claude Desktop から利用する

MCP（Model Context Protocol）とはアプリケーションが LLM にコンテキストを提供する方法を標準化するプロトコルです。MCP を使用することで、LLM は外部ツールやサービスからコンテキストを取得するだけでなく、コードの実行やデータの保存など、さまざまなアクションを実行できるようになります。この記事では MCP サーバーを TypeScript で実装する方法を紹介します。

gihyo.jp

Geminiアプリ、アップデート ——2.0 Flash Thinking Experimentalの更新、Deep Researchの無料試用、検索履歴を利用したパーソナライゼーション機能のリリース、専門家にできるGem機能の提供を拡大

Googleは2月13日、Geminiアプリのパフォーマンス改善やパーソナライズするための機能の追加等をおこなったことを発表した。

gihyo.jp

Ubuntu 25.04（plucky）の開発; User Interface Freezeと壁紙の決定、“Crypto-config”

この数週間のplucky（Ubuntu 25.04）の開発の様子を見ていきましょう。まずは壁紙コンテストの結果発表が行われ、あわせてデフォルトの壁紙が公開されました。

gihyo.jp

Google、Gemma 3をリリース ―Gemini 2.0の技術を利用し単一GPU上でのパフォーマンスを大幅に向上

Googleは2025年3月12日、軽量AIモデル「Gemma」の新バージョンGemma 3をリリースした。

gihyo.jp

期待はずれだった？ rabbit r1のその後

AI搭載の専用デバイス「rabbit r1」が、2025年1月に日本語を含む多言語対応が行われました。

gihyo.jp

TypeScript、パフォーマンス改善のためにネイティブ実装の取り組みを発表 ——ネイティブ実装にGo言語を使い、ビルド時間（tsc）は10倍の速度改善

TypeScriptのリードアーキテクトであるMicrosoftの Anders Hejlsberg氏は、TypeScriptのパフォーマンス改善とそれに伴う開発体験の向上のために、TypeScriptコンパイラとそのツールのネイティブ実装に取り組んでいることを発表した。

gihyo.jp

第854回　Sambaで作るActive Directory互換環境 （3） ドメインコントローラーの基本操作

第852回と第853回でSambaを使ったActive Directory互換環境を構築しました。今回は複数のドメインコントローラーの基本的な操作について解説します。

azukiazusa のテックブログ2

TypeScript 製の AI エージェントフレームワーク Mastra

Mastra は TypeScript 製の AI エージェントフレームワークであり Gatsby の開発チームによって開発されています。Mastra サーバーを実行することで REST API サーバーを介してエージェントとやり取りすることができます。Mastra はAI エージェントを構築するために必要なプリミティブな機能を提供するために設計されています。

azukiazusa のテックブログ2

ブログで llms.txt を提供してみた

従来のウェブサイトは人間用のマークアップが主であり、bot が情報を収集するために無駄な情報が多く含まれています。一方でウェブサイトを提供する側にとっても AI エージェントにより過剰なスクレイピングによりサーバーの負荷がかかることが問題となっています。LLM に適したコンテンツを提供するために Answer.AI の共同創業者である Jeremy Howard 氏により `llms.txt` というファイルが提案されました。

blog.jxck.io

CSS における if と function の提案

CSS に if() および @function が提案されている。仕様がこれで確定したとは言い切れないため、背景および現状にフォーカスして解説する。なお先に言っておくが、関数の再帰は初期仕様から外されているため、「CSS がプログラミング言語になった」という話ではない。

blog.jxck.io

OWASP に Cookie Theft 対策 Cheat Sheet を執筆した

OWASP に Cookie Theft 対策の Cheat Sheet を提案し、マージされた。

azukiazusa のテックブログ2

インラインで条件分岐する CSS の if() 関数

if() 関数は CSS Values and Units Module Level 5 という仕様で提案されている関数です。if() 関数は CSS でインラインの条件分岐を可能にします。

blog.jxck.io

Web における Beacon の変遷 (sendBeacon(), fetch() keepalive, fetchLater())

ページを閉じる際に何かしらの情報をサーバで収集したいケースがある。これを Beacon の送信(Beaconing)と呼び、ブラウザではページ表示中に収集したパフォーマンス統計の収集や、広告タグによるトラッキングなどに用いられる。しかし、「ページが閉じる直前に、サーバにリクエストを送信する」を確実に実行するのは実は難しく、これを標準技術で実現する過程で、複数の API が生まれるに至った。各 API の策定経緯と、挙動の違いについて解説していく。

azukiazusa のテックブログ2

ブラウザで非同期イベントストリームを処理する Observable API

Observable API は非同期イベントストリームを処理するための API です。 EventTarget に .when() メソッドを追加し addEventListener() よりも宣言的で優れたイベントハンドリングを提供します。

azukiazusa のテックブログ2

ブラウザに広くサポートされていない CSS を検証する require-baseline ESLint ルール

Baseline はブラウザで利用可能な JavaScript や CSS のサポート状況を明確化するプロジェクトです。ESLint/CSS の require-baseline ルールを使用することで、Baseline でサポートされていない CSS プロパティや値を検出することができます。

azukiazusa のテックブログ2

アップグレードされた CSS の `attr()` 関数を使う

`attr()` 関数は HTML の属性を読み取り、それを CSS で利用できるようにする関数です。従来までは `content` プロパティのみで使用できましたが、CSS Values and Units Module Level 5 ではこの制限が見直され、`attr()` 関数がカスタムプロパティを含む任意の CSS プロパティで使用できるようになりました。

azukiazusa のテックブログ2

ボタンが押し込まれた状態を表す Press Button の提案

UI デザインにおいてボタンが「押し込まれた」状態を表現することはしばしばあります。しかし、ネイティブの HTML 要素では表現できず `aria-pressed` 属性を使用する必要がありました。Press Button Proposal では `type="press"` 属性を追加することでボタンが押し込まれた状態を表現することが提案されています。

azukiazusa のテックブログ2

Deno v2.2 で追加されたビルドイン OpenTelemetry サポートを試してみる

Deno v2.2 でビルドインの OpenTelemetry サポートが追加されました。アプリケーションのコードに変更を加えることなく、Deno のビルトイン API から自動的にテレメトリーデータを計装できるようになります。

azukiazusa のテックブログ2

Prisma で OpenTelemetry のトレースデータを計装する

Prisma は OpenTelemetry の仕様に準拠したトレースデータを計装するためのパッケージを提供しています。この記事では、Prisma で OpenTelemetry のトレースデータを計装する方法について紹介します。

azukiazusa のテックブログ2

Vitest で型のテストを書く

Vitest では `expectTypeOf` や `assetType` を使って型のテストを書くことができます。自作のユーティリティ型が期待する型を返すか検査したり、言語ファイルの JSON スキーマが同じ型を返すことを確認するなどに利用できます。

@sakupi01.com blog

Safari 18.2 「view-transition-name: auto;」への警鐘

Safari 18.2でShipされた`view-transition-name: auto;`は、未だに議論の余地が残るため、仕様をよく理解した上での利用が必要な理由を解説します

azukiazusa のテックブログ2

スキーマバリデーションライブラリの標準インターフェース standard-schema

スキーマバリデーションライブラリはここ数年で人気を集めています。多くのライブラリが登場する中で、standard-schema はスキーマバリデーションライブラリの標準インターフェースを提供します。これにより、エコシステムツールがユーザー定義の型検証ツールをより簡単に受け入れられるようにすることを目指しています。

azukiazusa のテックブログ2

CSS で関数を定義できるようになる

Chrome Canary で CSS 関数のプロトタイプが実装されました。CSS Functions and Mixins Module という仕様に基づいて実装されており、`@function` ルールを使用して開発者が関数を定義できるようになります。

azukiazusa のテックブログ2

パスキーによる認証をブラウザで実装してみる

パスキーとはパスワードに代わる認証方法で、生体認証やデバイス PIN を使ってログインができる仕組みです。ユーザーはパスワードを覚える必要がなく、またフィッシング攻撃にも強いという点からよりセキュア認証方法として注目を集めています。この記事では WebAuthn を使ってパスキーをブラウザで実装する方法を紹介します。

azukiazusa のテックブログ2

React Server Components を手軽に扱うフレームワーク react-server

react-server は Node.js で JavaScript ファイルを実行するかのように React Server Components を扱うことを目的としたフレームワークです。Next.js の機能が過剰に感じられるような小さなアプリケーションを開発する際に有用です。

azukiazusa のテックブログ2

Bun v1.2 では package.json にコメントを書ける

`package.json` は JSON フォーマットのファイルであるため、コメントを書くことができません。`package.json` に定義したスクリプトの説明を書いておくことは重要です。別のファイルに説明を書いたり、`//` で始まるキーを使用してコメントを書くハックが生まれるなど、様々な方法が考案されていたのが思い出されます。

azukiazusa のテックブログ2

TypeScript 5.8 で追加される erasableSyntaxOnly フラグ

TypeScript 5.8 で `erasableSyntaxOnly` フラグが追加される予定です。このフラグは `enum` や `namespace`、`Class Parameter properties` などの「消去可能ではない」構文をエラーとして検知するためのものです。

blog.jxck.io

"Less Password" 時代のアカウント防災訓練

震災の直後、復興のさなかに水害が起こり、再び全てが流される。能登の人々にとっては大変な 2024 年だったと思う。首都直下型や南海トラフはいつ起こってもおかしくないと言われ、戦火すら他人事ではなくなっている。家に災害用の備蓄を用意するのと同様、定期的に「アカウント防災訓練」を個人的に実施するようになって数年経つ。観点は「今、持っているものを全て失っても、リカバリできるだろうか?」だ。現代のアカウントの管理は、"Password Less" を目指す過渡期で、中途半端に複雑だ。Password は無くなっているというより、集約された "Less Password" 状態であり、残る「最後の Password」を起点にどう全体を復元するかが、災害時リカバリの課題となる。これに失敗して全てが詰むと、仮に無事避難できたとしても、相当な喪失を味わうだろう。現状の選択肢と設計方針を振り返りつつ、災害時にデジタルアカウントをどう守るかについて考えたい。

@sakupi01.com blog

Customizable Select ElementにおけるParser RelaxationのアップデートとShipの背景

長年の議論を経て、ようやく仕様が固まった、CustomizableなSelect要素の現状について、Parser Relaxationのを軸に解説します

azukiazusa のテックブログ2

型安全にクエリパラメーターを扱う nuqs

フロントエンドの状態管理のパターンとしてクエリパラメータを信頼できる唯一の情報源(single source of truth)として扱うことがあります。ですが、クエリパラメーターの型が文字列であるため、型安全性が保証されないという課題があります。この記事では `nuqs` というライブラリを使用してクエリパラメーターを型安全に扱う方法について解説します。

blog.jxck.io

Web 技術年末試験 2024 講評 #web_exam2024

2024 年の Web 技術を振り返る試験として、「Web 技術年末試験 2024」を実施した。その問題と想定解答、平均点などを公開する。

azukiazusa のテックブログ2

ダイアログの Light dismiss を有効にする `<dialog closedby>` 属性

`` 属性はダイアログの外側をクリックした際にダイアログを閉じる Light dismiss 機能を実現するための属性です。closedby 属性は `any`, `closerequest`, `none` の 3 つの値を受け付けます。

azukiazusa のテックブログ2

React の `<ViewTransition>` コンポーネントで宣言的にページ遷移アニメーションを追加する

`` コンポーネントは React の実験的なバージョンとして導入されました。これは View Transition API を 宣言的な方法で使用できるようにするものです。

azukiazusa のテックブログ2

MPA でページ遷移アニメーションを行う `@view-transition` CSS アットルール

View Transition API はページを遷移する際に簡単にアニメーションを追加できる API です。SPA では `document.startViewTransition()` メソッドを DOM が変更される前に呼び出すことでページ遷移アニメーションを追加できます。MPA の場合 CSS アットルール `@view-transition` を使用できます。SPA の場合と異なり、JavaScript を使用せずに CSS だけでアニメーションを追加できる点が特徴です。

azukiazusa のテックブログ2

scroll-state() CSS コンテナクエリを使用して sticky で張り付いたときに境界線を出す

scroll-state() はコンテナ要素のスクロール状態に応じてスタイルを変更することができるコンテナクエリです。例えば、スクロール中にヘッダーを sticky な場合の境界線を表示することが挙げられます。

azukiazusa のテックブログ2

ユーザーにヒントを表示するための `popover=hint` 属性

ポップオーバー API は 2024 年の Baseline に組み込まれており、主要なブラウザでサポートされています。Chrome Beta 133 では 3 番目の値として `hint` が追加されました。`popover=hint` はユーザーに対してヒントを表示する「ツールチップ」として動作します。この記事では `popover=hint` 属性について詳しく見ていきます。

blog.jxck.io

Cookie Theft 対策と Device Bound Session Credentials

Chrome チームより提案された Device Bound Session Credentials の実装が進み、Flag 付きで試すことができる。この提案の背景と、解決する問題、現時点での挙動について解説する。

azukiazusa のテックブログ2

Node.js で TypeScript を直接実行できるようになった

Node.js v23.6.0 から `--experimental-strip-types` フラグがデフォルトで有効になりました。これにより、Node.js でTypeScript を直接実行できるようになります。

azukiazusa のテックブログ2

AI エディター Cursor を試してみる

AI エディター Cursor は GitHub Copilot と同様にコードの補完やチャットによるコードの生成をサポートしてくれます。Cursor は VS Code をフォークして作られており、既存の VS Code の拡張機能やキーバインドをそのまま利用することも特徴の 1 つです。

stin's Blog

2025年の目標

あけましておめでとうございました。すでに 6 日が経過してしまいましたが、2024年の振り返りと2025年の目標を立てます。 2024年の振り返り 2024年の目標は以下の通りでした。 https://blog.stin.ink/articles/new-years-resolutions-for-2024 技術ブログ...

azukiazusa のテックブログ2

GitHub Actions で再利用可能なワークフローを作成する

GitHub Actions で CI/CD 環境を構築する際に、同じような処理を複数のファイルで記述するようなことがよくあります。この記事では、GitHub Actions で再利用可能なワークフローを作成する方法と、実際に再利用可能なワークフローを作成する手順を紹介します。

stin's Blog

ハロー！プロジェクトファンクラブのデジタル会員証があまりに杜撰なので、正しい実装を考える

ハロー！プロジェクトのファンクラブ(以下FC)サイトが2024年11月にリニューアルされました。 https://www.upfc.jp/helloproject/news\_detail.php?@uid=s32dbjT7VpPSK55H リニューアル内容のひとつにデジタル会員証があります。 今までプラスチックカード...

@sakupi01.com blog

2024 In Review

2024年の振り返り

blog.jxck.io

2024 年を振り返る

例年通り 2024 年を振り返る。

stin's Blog

指定したWebページを動く状態でクローンする方法

ふと、指定したURLのWebページをクローンして別の環境で再現する方法がないかと考えました。 HTMLとそれが参照するCSS, JavaScript, 画像ファイルなどをダウンロードして保存しておき、静的ファイルとして配信すれば同じWebページを再現できるはずです。 wget を使う wgetコマンドを使えば、HTML...

azukiazusa のテックブログ2

2024 年に読んでよかった本

私は今年 1 年間でおおよそ 300 冊の本を読んだようです。その中から、特に印象に残った本をいくつか紹介します。

@sakupi01.com blog

🎄Open UI Advent Calendar: Day 25 / Epilogue

OpenUI Advent Calendar エピローグ

@sakupi01.com blog

🎄Open UI Advent Calendar: Day 24 / Global Design System Part2

Open UIが提唱するデザインシステム、Global Design Systemとその未来

@sakupi01.com blog

🎄Open UI Advent Calendar: Day 23 / Global Design System Part1

デザインシステムの開発を加速させる、堅牢で柔軟なGlobal Design Systemの提唱

@sakupi01.com blog

🎄Open UI Advent Calendar: Day 22 / Customizable Select Element Ep.20

Customizable Select Elementのまとめ

azukiazusa のテックブログ2

カード UI の入れ子のリンクの問題を解決する Link Area Delegation の提案

多くのウェブサイトではリンクを入れ子にしたカード UI が利用されています。しかし、このような UI では HTML 仕様に違反していたり、ハッキーな手法で実装されていることがあります。Open UI コミュニティでは Link Area Delegation という提案を行っており、標準化された方法で入れ子のリンクを実装することで UX やアクセシビリティを損なうことを防ぐことを目的としています。この記事では Link Area Delegation の内容について紹介します。

@sakupi01.com blog

🎄Open UI Advent Calendar: Day21 / Customizable Select Element Ep.19

Customizable Select Elementの関連仕様: `` - 子Node変更検知タイミングの仕様決定（現時点で）

@sakupi01.com blog

🎄Open UI Advent Calendar: Day 20 / Customizable Select Element Ep.18

Customizable Select Elementの関連仕様: `` - 「同期タイミング」でクローンを作成の方針で決定。`cloneNode()`の制限が浮き彫りになる

@sakupi01.com blog

🎄Open UI Advent Calendar: Day 19 / Customizable Select Element Ep.17

Customizable Select Elementの関連仕様: `` - UAによるLight DOMへのNodeクローンタイミングの検討

@sakupi01.com blog

🎄Open UI Advent Calendar: Day 18 / Customizable Select Element Ep.16

Customizable Select Elementの関連仕様: `` - Light DOMへのクローン追加実装に関して、CSSWGとの合意形成。UAによるLight DOMへのNodeクローンタイミングに関する懸念を深掘る

@sakupi01.com blog

🎄Open UI Advent Calendar: Day 17 / Customizable Select Element Ep.15

Customizable Select Elementの関連仕様: `` - `slot`属性と`behavior`属性が使用廃止を受け、CSE Anatomyが改訂。HTML史上初となる、UAからLight DOMへ変更を加える実装検討へ

stin's Blog

Honoの捉え方、またはNext.jsとの組み合わせ方

この記事は「Hono Advent Calendar 2024 シリーズ 2」17日目の記事です。 https://qiita.com/advent-calendar/2024/hono HonoというWebフレームワークがあります。Express.jsのような書き方でWebアプリケーションを作れるものです。 Hono...

@sakupi01.com blog

Cardのマークアップでもう悩まない！NestedでClickableなUIを実現する、Link Area Delegationとは

本エントリでは、インタラクティブな要素がネストされたUIを、標準的な方法で実現しようという「Link Area Delegation」Proposalについて紹介します。

@sakupi01.com blog

🎄Open UI Advent Calendar: Day 16 / Customizable Select Element Ep.14

Customizable Select Elementの関連仕様: `` - 「選択された``を``にスロットしてカスタマイズできるようにする」唯一の手段、`slot`属性と`behavior`属性が使用廃止へ

@sakupi01.com blog

🎄Open UI Advent Calendar: Day 15 / Customizable Select Element Ep.13

Customizable Select Elementの関連仕様: `` - ``の内部コンテンツ自体を``に反映する仕様の検討

azukiazusa のテックブログ2

MSW で Web Socket のリクエストをモックする

Mock Service Worker (MSW) の v2.6.0 から Web Socket のリクエストをモックすることができるようになりました。Web Socket のサポートのリクエストは 2020 年から存在しており、多くの議論の末 4 年の歳月を経てリリースされた機能となります。この記事では、MSW で Web Socket のリクエストをモックする方法を紹介します。

@sakupi01.com blog

🎄Open UI Advent Calendar: Day 14 / Customizable Select Element Ep.12

Customizable Select Elementの関連仕様: `` - `part`属性をCSEのUA実装で使用することの問題から、`part`属性を`behavior`属性にリネームへ。``のvalueのみならず、内部コンテンツ自体を``に反映する仕様策定の示唆

@sakupi01.com blog

🎄Open UI Advent Calendar: Day 13 / Customizable Select Element Ep.11

Customizable Select Elementの関連仕様: `` - ``提案のきっかけと、選択された``のvalueとスタイルを反映する初期の仕組みとして、`part`属性と`slot`属性について

@sakupi01.com blog

🎄Open UI Advent Calendar: Day 12 / Customizable Select Element Ep.10

Customizable Select Elementの関連仕様: `appearance: base-select;` - `::picker()`のデフォルト色から深掘る、system-color/ color-scheme/ prefers-color-schemeの関係

blog.jxck.io

3PCA 30 日目: 2024 年の 3rd Party Cookie まとめ

このエントリは、2023 年の 3rd Party Cookie Advent Calendar の 30 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookieこのアドベントカレンダーを開始した 2023 年末の時点では、2024 年(つまり今年)の年始に Chrome による 1% Deprecate が始まり、2024 年をかけてその範囲を広げ、今頃は Post 3rd Party Cookie の世界が訪れている見通しだった。しかし、その予定は大きく変更され、これからどうなるのかも不透明だ。つまり、この話は 2025 年も継続することになってしまったため、2024 年の現状を一旦まとめておくこととする。

azukiazusa のテックブログ2

Testing Library の debug で出力される行数を多くする方法

Testing Library では要素の取得に失敗した場合にレンダリングされた HTML がコンソールに表示されます。しかし、デフォルトで出力される行は 7000 に制限されているため目的の要素が表示される前に表示が終了してしまうことがしばしばあります。

@sakupi01.com blog

🎄Open UI Advent Calendar: Day 11 / Customizable Select Element Ep.9

Customizable Select Elementの関連仕様: `appearance: base-select;` - `::picker-icon`のデフォルトスタイルはどうやって決まったのか

@sakupi01.com blog

🎄Open UI Advent Calendar: Day 10 / Customizable Select Element Ep.8

Customizable Select Elementの関連仕様: `appearance: base-select;` - 選択された``のデフォルトチェックマークのスタイルはどうやって決まったのか

@sakupi01.com blog

🎄Open UI Advent Calendar: Day 9 / Customizable Select Element Ep.7

``のその後：``から``に至るまで

@sakupi01.com blog

🎄Open UI Advent Calendar: Day 8 / Customizable Select Element Ep.6

``のその後：``に至るまで

azukiazusa のテックブログ2

Zod を使って OpenAI の構造化された出力を扱う

OpenAI の gpt-4o-2024-08-06 以降のモデルではパラメータとして JSON Schema を指定することで構造化された出力をサポートしています。Node.js 向けの OpenAI SDK では Zod を使ってスキーマを定義し、構造化された出力を扱うことができます。この記事では実際に Zod を使って OpenAI の構造化された出力を扱う方法を紹介します。

@sakupi01.com blog

🎄Open UI Advent Calendar: Day7 / Customizable Select Element Ep.5

Open UIでCSEのResearchが行われる。同時期にMSで``Explainerの作成。Explainerに基づいて、``がIntent to Prototypeに

@sakupi01.com blog

🎄Open UI Advent Calendar: Day 6 / Customizable Select Element Ep.4

Open UIでCustomizable Select Elementの初期提案

@sakupi01.com blog

🎄Open UI Advent Calendar: Day 5 / Customizable Select Element Ep.3

Web標準化の動きが進んでもなお、CustomizableでないForm Controlの紹介。Customizable Select Element提案の契機となるサーベイ

@sakupi01.com blog

🎄Open UI Advent Calendar: Day 4 / Customizable Select Element Ep.2

ブラウザ戦争の激化と、OSに依存したコントロールの問題の顕在化。打開する動きとして、WaSPによるWeb標準の台頭への動き、モダンブラウザの登場、より柔軟なスタイリングを可能にするCSS3の登場

@sakupi01.com blog

🎄Open UI Advent Calendar: Day 3 / Customizable Select Element Ep.1

Form Controlの歴史と、ブラウザやOSに依存するForm Controlのスタイルについて

@sakupi01.com blog

🎄Open UI Advent Calendar: Day 2 / Web UIの抱える課題とOpen UIの発足背景

Web UIの抱える課題とOpen UIの発足背景について

@sakupi01.com blog

🎄Open UI Advent Calendar: Day 1 / Open UIについて

Open UIの概要と、その調査方法

azukiazusa のテックブログ2

Tailwind CSS v4 で導入される CSS First Configurations

Tailwind CSS v4 における最も大きな変更点の 1 つは、CSS First Configurations です。今まで `tailwind.config.js` で設定していたテーマなどの設定を CSS ファイル内で行うことができるようになります。

@sakupi01.com blog

🎄Open UI Advent Calendar: Day 0 / Prologue

OpenUI Advent Calendar プロローグ

stin's Blog

記事をPicture-in-Pictureで読めるようにしてみた

Document Picture-in-Picture APIというWeb APIがあります。まだブラウザの実装が限定的ですが、Chromeなら116から使えるようです。 https://developer.mozilla.org/en-US/docs/Web/API/Document\_Picture-in-Pict...

azukiazusa のテックブログ2

アクセシビリティツリーを比較する Playwright の Aria snapshots がよさそう

Playwright の Aria snapshots はアクセシビリティツリーを比較することでテストする手法です。アクセシビリティツリーは DOM のスナップショットテストと比較して、外部から見た振る舞いが変わりづらいという利点があります。`.toMatchAriaSnapshot()` メソッドを使ってアクセシビリティツリーのスナップショットテストを行うことができます。

azukiazusa のテックブログ2

Node.js では標準モジュールで Promise timer が使える

人為的な遅延を発生させるために、`setTimeout` を Promise をラップする方法がよく使われています。これにより、`await` を使って任意の秒数処理を遅らせることができます。

azukiazusa のテックブログ2

新しいパッケージマネージャーの vlt を使ってみる

vlt は npm と互換性のあるパッケージマネージャーです。`npm` と同じように、パッケージのインストールや script の実行ができます。また、npm registry 互換のサーバーレジストリである vsr も同時に提供されています。

blog.jxck.io

Dialog と Popover #12

Toast 相当を実装する場合、時間が経ったら自動で消えるタイムアウトを設定することがないだろうか?今回 Popover の一連を調べる中であった、これが WCAG 違反だという議論を紹介する。

azukiazusa のテックブログ2

Next.js で OpenTelemetry を使用した計装を行う

この記事では Next.js で OpenTelemetry を使用した計装を行う方法について紹介します。Next.js では `instrumentation.ts` ファイルを使用して監視ツールやログツールの計装を設定できます。

stin's Blog

Next.js 15にアップデートした

このサイトで使っているNext.jsをv15にアップデートしました。 所詮ブログサイトなのでほとんど大きな変更はないですが、変更した内容を残しておきます。 内容 パッケージのアップデート 使っているNext.js関連のパッケージを一気にアップデートします。 注意点は、Next.js自体はv15が正式リリースされています...

azukiazusa のテックブログ2

Next.js の "use cache" ディレクティブによるキャッシュ制御

Next.js の App Router はデフォルトでキャッシュされる設計でリリースされました。一方でデフォルトでキャッシュされることに対して不満を持つ開発者も多かったように思います。このようなフィードバックを受けて、Next.js 15 ではいくつかのキャッシュ戦略が変更されました。さらに現在 canary チャンネルで提供されている dynamicIO フラグを有効にすることで、"use cache" ディレクティブを用いてキャッシュを制御できるようになります。

blog.jxck.io

Dialog と Popover #11

今回考えたいのは、GitHub の Issue や User アイコンをマウスでホバーすると、Issue の詳細や User Profile が表示されるアレだ。挙動としては想像通り、対象要素に Anchoring した <div popover> を表示し、中に好きなようにコンテンツを入れれば良い。ただし、UI のセマンティクスに関しては、複数の議論が行われており、方針もいくつか考えられる。今回は、それらの現状を整理しつつ、考えうる選択肢をいくつか提示する。その中で要件に合わせて何を選ぶかは実装者に委ねたい。

azukiazusa のテックブログ2

JavaScript でスタイルシートを構築する CSSStyleSheet

CSSStyleSheet インターフェースは、JavaScript でスタイルシートを構築し、操作するための API です。CSSStyleSheet() コンストラクターで新しいスタイルシートを作成し、.replaceSync() メソッドでスタイルを適用できます。

@sakupi01.com blog

📝note: What is web accessibility?

Practical Accessibility のメモ

blog.jxck.io

Dialog と Popover #10

ここまで解説した仕様を踏まえ、いくつかの代表的なユースケースの実装について考えていく。あくまで仕様の組み合わせ方についての解説であり、実装そのものの推奨ではない。また、ここで紹介する仕様はまだ変更の可能性があり、かつ実装も揃っていないものがある点に注意

azukiazusa のテックブログ2

react-to-web-component を使って React コンポーネントを Web Components に変換する

@r2wc/react-to-web-component は React コンポーネントを Web Components に変換するためのライブラリです。このライブラリを使用することで、React コンポーネントを任意の HTML 要素として使用することが可能になります。

azukiazusa のテックブログ2

HTML だけで Shadow DOM を構築するための宣言型 Shadow DOM

宣言型 Shadow DOM は `` 要素を使用して Shadow DOM を構築する方法です。宣言型 Shadow DOM を使用することで、従来の JavaScript を使用した Shadow DOM の構築方法と比較して、サーバーサイドレンダリング（SSR）に対応しているため、パフォーマンスの向上や SEO 対策に期待されます。

blog.jxck.io

Dialog と Popover #9

ここまで解説した仕様を踏まえ、いくつかの代表的なユースケースの実装について考えていく。あくまで仕様の組み合わせ方についての解説であり、実装そのものの推奨ではない。また、ここで紹介する仕様はまだ変更の可能性があり、かつ実装も揃っていないものがある点に注意

stin's Blog

Rust始めてみた。JSONフォーマッターを作ってみた

唐突にRustを使ってみたいと思ったので勉強を始めてみました。 始めた理由 始めてみたかった理由は色々あります。 まずはやはりフロントエンド開発ツールが色々とRustで実装されることです。VercelはTurborepoとTurbopackをRustで実装していますね。JavaScriptコンパイラのSWCもRustで...

azukiazusa のテックブログ2

Chrome の組み込み AI の Language Detection API で言語を判定する

Language Detection API は Chrome に組み込まれた AI により、クライアントサイドで言語を判定するための提案です。この API を利用することで、テキストの言語を判定することが可能になります。

azukiazusa のテックブログ2

Chrome の組み込み AI の Summarization API を試してみる

Google では大規模言語モデル（LLM）などの AI モデルをブラウザに直接統合するように設計された、Web プラットフォーム API とブラウザ機能を開発しています。これには Gimini Nano という AI モデルが含まれており、デスクトップパソコンにおいてローカルで実行されるように設計されています。この記事では Summarization API を使用して、文章を要約してみます。

blog.jxck.io

Dialog と Popover #8

ここまで解説した仕様を踏まえ、いくつかの代表的なユースケースの実装について考えていく。あくまで仕様の組み合わせ方についての解説であり、実装そのものの推奨ではない。また、ここで紹介する仕様はまだ変更の可能性があり、かつ実装も揃っていないものがある点に注意

blog.jxck.io

Dialog と Popover #7

ここまで解説した仕様を踏まえ、いくつかの代表的なユースケースの実装について考えていく。あくまで仕様の組み合わせ方についての解説であり、実装そのものの推奨ではない。また、ここで紹介する仕様はまだ変更の可能性があり、かつ実装も揃っていないものがある点に注意

azukiazusa のテックブログ2

Storybook と Vitest の統合したコンポーネントテスト

Storybook v8.3 以降、ストーリーをテストするためのテストランナーとして Vitest を使用できるようになりました。Vitest を使用することで複雑なセットアップが不要になります。また、推奨されているブラウザモードを使用することで、実際のブラウザでの挙動をより正確に再現できます。

blog.jxck.io

Dialog と Popover #6

ついに <toast> -> <popup> -> popup -> popover として、要素から属性になり名前も決まった。とはいえ実装は popup とそんなに変わらないので、popup でやっていた Origin Trials を継続しながら、徐々に実装を進めていくフェーズが 2022/12 くらいの話だ。Intent to extend Origin Trial: Popover APIhttps://groups.google.com/a/chromium.org/g/blink-dev/c/kZXexHhH7EA/m/UmQYwGW3DAAJしかし、popover を実用するには足りていない議論があった。それが Animation だ。

blog.jxck.io

Dialog と Popover #5

このあたりから、まだ議論中の話が多いため、今後変わる可能性が高い点に注意。popup が紆余曲折を経て popover 属性になり、2023/3 に Safari が TP166 で実装した。そのまま Safari 17 に入ることを 2023/6 の WWDC で発表したあたりから、popover の実装は各ブラウザで一気に話が進む。Release Notes for Safari Technology Preview 166https://webkit.org/blog/13964/release-notes-for-safari-technology-preview-166/News from WWDC23: WebKit Features in Safari 17 betahttps://webkit.org/blog/14205/news-from-wwdc23-webkit-features-in-safari-17-beta/そして、2024/4 ごろに発表された Baseline 2024 に popover がエントリしたことで、2024 年は全ブラウザで互換性を高めていくことに合意し、作業を進めていくことになる。俗に言う「元年」というやつと言えるだろう。Popover API lands in Baselinehttps://web.dev/blog/popover-api今回は、この popover の議論と、仕様が完成していくまでをまとめる。

blog.jxck.io

Dialog と Popover #4

ここまでで <dialog> 要素が標準化され、Modal/non-Modal な Dialog がネイティブで出せるようになった。今まで自前で実装していた z-index の指定や、フォーカスの管理、非活性化、キーボードでの処理、スタイルなども、細かい仕様がほぼ標準によってカバーされた。Top Layerinert:modal / ::backdropCloseWatcherFocusable Scrollersetcしかし、<dialog> はあくまで「ユーザのインタラクションを求める」という用途で使うものであり、role=dialog ではない、例えばちょっとしたメッセージの通知などに使うものではない。そこで、これらの資産を活用し、より汎用的な UI を標準化しようという話が、<dialog> の標準化の裏で並行して行われた。

azukiazusa のテックブログ2

UI を閉じる動作を処理する CloseWatcher API

CloseWatcher API は UI を閉じる動作を処理するための API です。キーボードの `Esc` キー、Android の戻るボタンなどのデバイス固有のメカニズムによって閉じるイベントを提供します。

stin's Blog

React useで非同期処理を簡単に扱う

先日 続・URLシェアを支える技術 CompressionStream という記事をZennに投稿しました。 この記事のためにlz-stringとCompressionStreamの圧縮率を比較できるサイト(以下比較サイト)をVite+Reactで作りました。 https://stinbox.github.io/lz-...

blog.jxck.io

Dialog と Popover #3

前回までは <dialog> が標準化されるまでの経緯と、API の概要や関連仕様を解説した。今回は <dialog> の API としての使い方について、具体的に解説していく。

blog.jxck.io

Dialog と Popover #2

showModalDialog() は今から考えれば、確かにひどい API だった。しかし、何か Modal を開き、ユーザにインタラクションをさせ、閉じたらそこで入力された値や選択された結果を取得し、処理を進めたいユースケース自体は、規約への同意取得や、Cookie バナー、ログインなど多々ある。そういった場面では、ライブラリなどを用いて実装する必要があったが、Modal を実装するのは実際にはそんなに簡単ではなかった。

blog.jxck.io

Dialog と Popover #1

HTML の <dialog> 要素と、popover 属性、および関連する様々な仕様が標準化され、実装が進められている。Open UI を中心に進められているこれらの改善は、多くのサイトで共通したユースケースがありながら、長らくミッシングピースとなっていた重要な機能だ。もし今、同等のユースケースを自前で実装しているのであれば、適切な仕様を用いた実装に刷新することで、従来はほぼ不可能だった UX を提供できるようになる。今回から、数回の連載形式で、これらの仕様がどのように標準化され、我々開発者はこれをどのように使っていくべきなのかについて解説する。

azukiazusa のテックブログ2

ユーザーのカラースキーマ設定を上書きする web preferences API の提案

ユーザーのカラーテーマの設定によりスタイルを変更するためには、`prefers-color-scheme` メディアクエリを使用することが一般的です。しかし、多くのウェブサイトでは OS の設定とは独立してカラースキーマを設定する機能が提供されています。この場合、`prefers-color-scheme` メディアクエリを使用せずに、`class` 属性を使ったスタイルの切り替えが行われます。

azukiazusa のテックブログ2

スタイルをカスタマイズ可能な新しい `<select>` 要素

従来の `` 要素は CSS を利用したスタイルを適用することができないため、多くの開発者にとって課題となっていました。この問題を解決するために新しい既存の `` 要素をカスタマイズする手段が提案されました。この疑似要素を利用することで、開発者は `` 要素のスタイルをカスタマイズをオプトインできるようになります。

azukiazusa のテックブログ2

`calc-size()` や `interpolate-size: allow-keywords;` で `height: auto;` な要素のアニメーションをサポートする

CSS において height プロパティを 0 から auto に変化させた場合に、アニメーションが適用されないのはよく知られた問題です。この記事では calc-size() 関数を使って height: auto; な要素のアニメーションを実装する方法を紹介します。

blog.jxck.io

Web Developer Conference 2024 開催後記 #wdc2024

2024/9/7 に、Web Developer Conference を開催した。Web Developer Conference 2024 開催告知 #wdc2024 | blog.jxck.iohttps://blog.jxck.io/entries/2024-06-12/web-dev-conf-2024.htmlConnpasshttps://web-study.connpass.com/event/321711/Togetterhttps://togetter.com/li/2430964

azukiazusa のテックブログ2

アクセシビリティが考慮された React Aria のドラッグアンドドロップ

React Aria は Adobe により提供されている React 用のコンポーネントライブラリであり、アクセシビリティを最優先した設計となっています。本記事では、React Aria により提供されているドラッグアンドドロップ機能を紹介します。

stin's Blog

React.FCを使うよ、理に適っているからね

唐突に、React.FCの是非についてポジションを示そうと思ったので書きます。積極的に使う派閥です。 React.FC vs Normal Function Reactで関数コンポーネントを宣言するとき、TypeScriptの型の付け方として大きく次のような２つの書き方があります。 React.FCを使うパターン コン...

azukiazusa のテックブログ2

フィーチャーフラグの標準規格 OpenFeature の React SDK を試してみる

OpenFeature はフィーチャーフラグのオープンな規格です。特定のベンダーに依存しない API や SDK が提供されています。フィーチャーフラグの API の標準化により、ベンダーロックインを回避し、フィーチャーフラグのツールを自由に選択できるようになります。この記事では OpenFeature の React SDK を使ってフィーチャーフラグを評価する方法を紹介します。

azukiazusa のテックブログ2

React Aria でアクセシブルなコンポーネントを作成する

React Aria は Adobe が提供する React 用のコンポーネントライブラリです。スタイルを持たずに UI の機能やロジックのみを提供するいわゆるヘッドレス UI ライブラリであり、特に React Aria はアクセシビリティを最優先した設計となっているのが特徴です。ヘッドレス UI ライブラリを用いて UI コンポーネントを実装することで、開発者はビジネスロジックやデザインに集中することができます。

azukiazusa のテックブログ2

@axe-core/playwright によるアクセシビリティテストの自動化

axe-core は axe というアクセシビリティテストツールのコアエンジンで、オープンソースとして提供されています。この記事では、E2E テストフレームワークの Playwright と axe-core を組み合わせて使用して、アクセシビリティテストを自動化する方法について紹介します。

azukiazusa のテックブログ2

box-shadow で実装されたフォーカスリングはハイコントラストモードで表示されない

フォーカスリングとは、キーボード操作でフォーカスが当たった要素を視覚的に示すための UI デザインのことです。フォーカスリングのカスタマイズに `box-shadow` プロパティを使うことがありますが、ハイコントラストモードではフォーカスリングが表示されない問題があります。この記事では、ハイコントラストモードでフォーカスリングを表示する方法について解説します。

stin's Blog

viteがプラグインなしでできることを探る

pluginを使わずにviteだけで始めてみることで理解が深まったらいいと思い、やってみる。 セットアップ 適当なディレクトリ内で、git初期化してnpm初期化してviteとTypeScriptをインストールする。 package.jsonのtypeはmoduleにして、scriptsにnpm run buildを追加...

azukiazusa のテックブログ2

CSS の `reading-flow` プロパティで要素の読み上げ順を制御する

Flex や Grid コンテナ内では要素の見た目上の順序と DOM 上の順序が異なることがあります。このような状態はキーボード操作やスクリーンリーダーなどの支援技術を使うユーザーにとって混乱を招く可能性があります。CSS の `reading-flow` プロパティ個の問題を解決するためのプロパティです。見た目上の順序に従って読み上げ順を制御することができます。

blog.jxck.io

3PCA 29 日目: Privacy Sandbox の方針転換は何を意味するか

このエントリは、3rd Party Cookie Advent Calendar の 29 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie先日、Google より Privacy Sandbox の方針転換について発表があった。本当は、まだ記事を書くには情報が足りていないため、あまり書く気はなかったが、今後出てくる発表に備えて経緯をまとめるために、「何がまだ分かっていないか」の現状を書いておくことにする。

azukiazusa のテックブログ2

CSS でランダムな値を扱う `random()` と `random-item()` 関数

`random()` と `random-item()` 関数は CSS でランダムな値を扱うための関数です。`random()` 関数は最小値と最大値を引数に取り、その範囲内のランダムな数値を返します。`random-item()` 関数は引数に渡したリストの中からランダムに 1 つの値を返します。

azukiazusa のテックブログ2

新しいビルドツールの Farm

Farm は Rust 製の新しいビルドツールです。パフォーマンスを重視して設計されており、Vite と互換性のある JavaScript プラグインをサポートしているという特徴があります。バンドルの戦略には Partial Bundling というものを採用しており、モジュールのネットワークリクエスト数を削減するため、20 ~ 30 のファイルにバンドルするという特徴があります。

stin's Blog

真にチラつかないダークモードをついに実現したぞ。実現方法と気付きを書く

このサイトはダークモードに対応しています。なぜならダークモードは基本的人権だからです(要出典)。 しばらく、サイトに訪問した直後ライトモードとダークモードが切り替わってチラつく現象が発生していました。これを改善したので、実装方法と気付いたことを残しておきます。 ダークモードの実装方法 一般に、ダークモードの実装方法は3...

azukiazusa のテックブログ2

CSS の `@property` ルールでカスタムプロパティを定義する

CSS の @property ルールを使うことで、CSS のカスタムプロパティを定義できます。カスタムプロパティを定義することでプロパティの構文チェック、デフォルト値の設定、プロパティが値を継承するかどうかの設定などが可能になります。カスタムプロパティに誤った値が代入されることを防いだり、グラデーションのアニメーションなど、従来は実装が難しかった機能をサポートすることができます。

azukiazusa のテックブログ2

スタイルの適用範囲を限定する CSS の `@scope` ルール

`@scope` アットルールは特定のセレクタの範囲に限定したスタイルを適用するためのルールです。`@scope` のルールセットに 1 つの CSS セレクタを指定すると、そのセレクタがスコープのルートとなります。`@scope` ルール内のスタイルはそのセレクタの範囲内でのみ適用されます。

blog.jxck.io

なぜブラウザエンジンは 1 つではダメなのか? または Ladybird への期待

Ladybird は、他のブラウザエンジンをフォークせず、企業との取引に頼らず、寄付だけで作ることを宣言した新しいブラウザエンジンだ。Ladybirdhttps://ladybird.org/これがいかに価値のある取り組みなのか、Web を漫然と眺めてきた筆者による N=1 の妄言を書いてみる。

azukiazusa のテックブログ2

CSS のカスケードレイヤー `@layer` を使ってスタイルを階層化して管理する

CSS の `@layer` ルールは、カスケードレイヤーを宣言するために使用されます。カスケードレイヤーとは、スタイルの優先度をレイヤー（階層）に分けて管理する仕組みです。`@layer` ルールを使用することでスタイルの記述順や詳細度に関係なくスタイルを宣言できるため、新しい形式の CSS 設計を実現することができます。

blog.jxck.io

「1 分 de Web 標準」のやり方 at Web Developer Conference 2024 #wdc2024

9/7 開催予定の Web Developer Conference 2024 では、「1 分 de Web 標準」という LT 大会を予定しています。CFP も募集中ですが、(筆者の周り以外では)聞き馴染みのないやり方だと思うので、この LT のやり方を解説します。プロポーザル | Web Developer Conference 2024 - fortee.jphttps://fortee.jp/web-dev-conf-2024/proposal/all

azukiazusa のテックブログ2

TypeScript で配列の要素を取得する時 `.at()` メソッドを使うとより安全

JavaScript で配列にアクセスする際、配列の長さを超えるインデックスを指定すると `undefined` が返されることがあります。しかし、TypeScript の型定義上では、配列の長さを超えるインデックスを指定しても `undefined` 型が返されることはありません。これはランタイムエラーを引き起こす恐れがあります。

azukiazusa のテックブログ2

CSS で条件分岐を行う `@when/@else` ルール

`@when/@else` アットルールは条件付きスタイルをまとめて記述するためのルールです。`@media` や `@support` の条件を `@when` にわたすことで、`true` の場合には `@when` ブロック内のスタイルが、`false` の場合には `@else` ブロック内のスタイルが適用されます。このルールを使うことでより簡潔なコードを書くことができます。

azukiazusa のテックブログ2

SVG アイコンの表示に mask-image CSS プロパティを使用する

mask-image プロパティは CSS でマスキングを行うためのプロパティであり、SVG アイコンを表示する際に有用です。mask-image プロパティを使用することで、外部の SVG ファイルを読み込みつつ、アイコンの色を CSS で指定することが可能になります。

blog.jxck.io

URL.parse を Chromium で Ship するまで

Chrome 126 で筆者が実装した URL.parse が Ship された。Chromium にコントリビュートしたことは何回かあったが、単体機能を Ship したのは初めてだった。

blog.jxck.io

Web Developer Conference 2024 開催告知 #wdc2024

夏に Web 開発周りの話をするカンファレンスをやります。参加は Connpass で募集しています。Web Developer Conference 2024 - connpasshttps://web-study.connpass.com/event/321711/Session と LT の募集を fortee で今日から開始したので応募を待ってます。Web Developer Conference 2024 - fortee.jphttps://fortee.jp/web-dev-conf-2024

azukiazusa のテックブログ2

Chrome の 組み込み AI Gemini Nano を試してみる

Chrome 126 から Gemini Nano という AI がデスクトップクライアントに組み込まれる予定です。Gemini Nano は Google の AI モデルの中で最も小さいモデルです。デスクトップクライアントに直接組み込まれることで、ユーザーの手元の環境で AI を利用できることが特徴です。開発者は JavaScript から Chrome に組み込まれた Gemini Nano にアクセスして生成 AI の機能を実装することができます。

azukiazusa のテックブログ2

CSS トランジションの開始時のスタイルを定義する `@starting-style` ルール

`@starting-style` ルールは、CSS トランジションの開始時のスタイルを定義するためのアットルールです。CSS トランジションの既定のルールでは前回のスタイル変更イベントでレンダリングされていなかった要素では、アニメーションが適用されない、`display: none` から他の値に変更した場合にアニメーションが適用されないといった問題があります。`@starting-style` ルールを使用することでこれらの問題を解決できます。

azukiazusa のテックブログ2

scrollbar-gutter CSS プロパティでスクロールバーの切り替わりによる画面のガタツキを解消する

子要素が親要素のボックスからはみ出した時、overflow プロパティの値が auto または scroll の場合にスクロールバーが表示されます。スクロールバーがクラシックスクロールバーの場合、スクロールバーの表示・非表示によりボックスの幅が変わるため、画面がガタつくことがあります。scrollbar-gutter プロパティを使うとスクロールバー用のスペースをあらかじめ確保でき、画面のガタツキを解消できます。

azukiazusa のテックブログ2

SvelteKit チュートリアル - 記事投稿サイトを作ってみよう

SvelteKit は Svelte と Vite で構築たフレームワークです。SvelteKit は Web アプリケーションを開発するために必要な機能を提供します。この記事では、SvelteKit を使用して記事投稿サイトを作成するチュートリアルを紹介します。記事投稿サイトは、記事の一覧表示、記事の詳細表示、記事の投稿、記事の削除の機能を持つシンプルな Web アプリケーションです。

azukiazusa のテックブログ2

Svelte v5 で導入されるスニペット機能

Svelte v5 ではスニペットと呼ばれる新しい機能が導入されます。スニペットとは、コンポーネント内で使用できる再利用可能なマークアップのことです。`#snippet` ディレクティブを使用してスニペットを定義し、引数を受け取ることができます。スニペットを呼び出す際には `@render` ディレクティブを使用します。またスニペットは単なる値として扱われるため、コンポーネントの Props として渡すことができます。

azukiazusa のテックブログ2

楽観的更新を行うための React の useOptimistic フック

React v19 では楽観的更新を行うための `useOptimistic` フックが導入される予定です。楽観的更新とは、ユーザーの操作に対して非同期処理の完了を待たずに UI を更新する手法のことです。楽観的更新によりユーザーの操作に対して即座にフィードバックを提供できるため、UX の向上につながります。

blog.jxck.io

Reverse HTTP Transport が描く新しい Web サービスデプロイ構成

IETF の httpbis で、Reverse HTTP Transport という仕様が提案されている。Reverse HTTP Transporthttps://www.ietf.org/archive/id/draft-bt-httpbis-reverse-http-01.htmlこの仕様は、Origin サーバの前に何かしら Intermediaries (Loadbalancer, Reverse Proxy, CDN etc)があるのが一般的な現代の Web サービス構成において、非常に革新的なアイデアを取り入れたプロトコルと言える。まだ v01 という初期段階ではあるが、発想が非常に面白かったので、読書メモを残す。

blog.jxck.io

Referrer-Policy の制限を強めると安全になるという誤解

Referrer-Policy は、送信される Referer の値を制御することが可能だ。このヘッダの副次的な効果をよく理解していないと、「no-referrer にして送らないのが最も安全だ」という誤解を生むことになる。では、複数あるポリシーの中でどのような観点で、どのディレクティブを採用するのが良いのだろうか?前提として前回の記事の「リクエストの出自をチェックすることは現代の実装のベースプラクティスである」という点を踏まえて考えてみる。令和時代の API 実装のベースプラクティスと CSRF 対策 | blog.jxck.iohttps://blog.jxck.io/entries/2024-04-26/csrf.html

azukiazusa のテックブログ2

Svelte v5 における イベントハンドラの変更点

Svelte v5 では、イベントハンドラの書き方が一新され、いくつか非推奨となった書き方があります。この記事では、Svelte v4 と Svelte v5 のイベントハンドラの書き方の違いについて見ていきます。

azukiazusa のテックブログ2

Svelte v5 で導入された Runes によるリアクティビティシステム

Svelte v5 で導入された Runes によるリアクティビティシステムについて解説します。従来の Svelte は純粋な JavaScript のコードのみを使用してリアクティビティを実現していましたが、アプリケーションが大規模になると複雑性が増すという問題がありました。Runes は Svelte のリアクティビティシステムをより柔軟にし、アプリケーションの規模が大きくなってもシンプルさを保つことを目指しています。

azukiazusa のテックブログ2

エラーや非同期処理をより安全に扱うための TypeScript ライブラリ Effect-TS

Effect-TS は、開発者が複雑なエラーや非同期処理をより安全に開発できるようにすることを目的とした TypeScript ライブラリです。Effect-TS は、TypeScript の型システムを活用して、本番のアプリケーションにおける実用的な問題を解決することを目指しています。

azukiazusa のテックブログ2

Next.js 型安全なルーティングを使う

Next.js では実験的な機能として、型安全なルーティングを利用できます。この機能を使うことでリンク先のパス名を静的に検査できるため、typo などのエラーを事前に防ぐことができます。

azukiazusa のテックブログ2

React v19 から forwardRef が不要になる

今までの React では `ref` をコンポーネントの Props として渡す際に、`forwardRef` を使ってラップする必要がありました。しかし、React v19 からは `forwardRef` が不要になり、`ref` を直接渡すことができるようになりました。

azukiazusa のテックブログ2

Remix v2.9 で導入された Single Fetch

Remix v2.9 で導入された Single Fetch はクライアントサイドでのページ遷移が行われた際に、サーバーへの複数の HTTP リクエストを並行して行う代わりに、1 つの HTTP リクエストを実行しまとめてレスポンスを返す機能です。Single Fetch は v2.9 ではフィーチャーフラグとして提供されており、v3 以降ではデフォルトの挙動となります。

blog.jxck.io

令和時代の API 実装のベースプラクティスと CSRF 対策

CSRF という古の攻撃がある。この攻撃を「古(いにしえ)」のものにすることができたプラットフォームの進化の背景を、「Cookie が SameSite Lax by Default になったからだ」という解説を見ることがある。確かに、現実的にそれによって攻撃の成立は難しくなり、救われているサービスもある。しかし、それはプラットフォームが用意した対策の本質から言うと、解釈が少しずれていると言えるだろう。今回は、「CSRF がどうして成立していたのか」を振り返ることで、本当にプラットフォームに足りていなかったものと、それを補っていった経緯、本当にすべき対策は何であるかを解説していく。結果として見えてくるのは、今サービスを実装する上での「ベース」(not ベスト)となるプラクティスだと筆者は考えている。

azukiazusa のテックブログ2

Math.max() にスプレッド構文で大きな配列を渡すとエラーになる恐れがある

`Math.max()` は、引数に渡された数値のうち最大のものを返す JavaScript の組み込み関数です。この関数は任意の数の引数を受け取るので、配列最大値を求めたい場合にはスプレッド構文で展開して渡す使い方が一般的です。しかし、引数の数が多すぎるとエラーになることがあります。

azukiazusa のテックブログ2

コンテナ要素に基づく相対的な CSS の単位（cqw, cqh, cqi, cqb, cqmin, cqmax）

コンテナクエリ単位とは、コンテナ要素に基づいてスタイルを定義するための相対的な長さを表す単位です。例えば `1cqw` はコンテナ要素の幅の 1% に相当します。

azukiazusa のテックブログ2

CSS でファイルのアップロードボタンをカスタマイズする ::file-selector-button 疑似要素

`::file-selector-button` 疑似要素を使用することで、`` 要素のデフォルトのボタンのスタイルをカスタマイズできます。現在すべてのモダンブラウザでサポートされています。

azukiazusa のテックブログ2

ポップアップが画面内に収まらない場合に自動的に表示位置を調整する CSS Anchor Positioning

CSS Anchor Positioning とは、特定の要素を Anchor（基準）としてツールチップなどの要素の位置を決定する機能の総称です。CSS Anchor Positioning を使用することで、Floating UI のように自動で画面内に表示されるツールチップやコンテキストメニューを実装できます。

stin's Blog

Remix を Cloudflare Pages にデプロイするまでやってみる

Remix に興味を持ったのでドキュメントを読み漁ってだいたい読み切ったので、練習がてら Node.js 向け Remix テンプレートを修正して Cloudflare Pages にデプロイする。 create-remix という npx コマンドでさっとテンプレートを作る。プロジェクト名は remix-on-clo...

azukiazusa のテックブログ2

Promise や Context から値を読み取る use React フック

React の Canary および experimental チャンネルでのみ利用可能な `use` フックについて解説します。`use` フックは Promise や Context から値を読み取るためのフックで、Promise の値を同期的に読み取ることができます。その他の React フックと異なり、`if` 文やループ内で呼び出すことができる点が特徴として挙げられます。

azukiazusa のテックブログ2

親要素のスタイルの基づいてスタイルを適用するコンテナスタイルクエリー CSS

CSS の @container ルールは、コンテナ（親要素）の特性に基づいてスタイルを適用するためのルールです。コンテナースタイルクエリーはコンテナサイズクエリーとコンテナスタイルクエリーの 2 種類に分類されます。コンテナスタイルクエリは style() 関数記法で定義されたスタイルを @container ルールで評価し、指定された条件が一致する場合にスタイルが適用されます。

azukiazusa のテックブログ2

CSS: ダークモードで値を切り替える light-dark 関数

light-dark 関数は CSS のカラー関数で、引数に 2 つのカラー値を取り、ライトモードのときには 1 つ目の値をを、ダークモードのときには 1 つ目の値を返します。 `color-scheme` プロパティの値もしくはユーザーの OS のダークモード設定によって切り替わります。

blog.jxck.io

RFC の URL はどのドメインで貼るのが良いか

IETF の RFC は、いくつかの場所で同じものが公開されている。どの URL が最適なのか、という話。結論は www.rfc-editor.org だ。

blog.jxck.io

Chromium にコントリビュートするための周辺知識

Chromium にコントリビュートするためには、ソースコードを理解する以外にも、もろもろ必要な周辺知識がある。ドキュメントはかなり整備されている方ではあるが、そのドキュメントにたどり着くのが難しい場合もある。レビュアーなどが親切に教えてくれるものをローカルにメモしているが、それも散らばってきたため、ここにまとめることにする。まずは初期状態で公開するが、どんどん更新していき、長くなっても分割しないで追記を繰り返そうと考えている。

azukiazusa のテックブログ2

CSS から React コンポーネントを生成する MistCSS

MistCSS は CSS in JS になぞらえた JS from CSS というコンセプトで、CSS から React コンポーネントを生成するツールです。ピュアな CSS を記述できるので、学習コストが低い、パフォーマンスに影響がないといったメリットがあります。

azukiazusa のテックブログ2

単体テストでスクリーンリーダーをシミュレートする Virtual Screen Reader

Virtual Screen Reader は単体テストのためにスクリーンリーダをシミュレートするライブラリです。このライブラリを使うことでマウスやキボードの操作をテストするように、スクリーンリーダーにより期待する読み上げが行われるかどうかをテストできます。なお、Virtual Screen Reader はあくまでスクリーンリーダーの挙動を模倣したものであり、現実で使われているスクリーンリーダーによるテストを代替するものではないことに注意してください。

azukiazusa のテックブログ2

TypeScript 5.5 で関数による型の絞り込みが改善される

従来までは、TypeScript で関数の引数の型を絞り込んだ結果を返す場合には、ユーザー定義型ガードとして `x is string` のような形式で型ガードを定義する必要がありました。TypeScript 5.5 では自動で型の絞り込みが推論されるようになります。

blog.jxck.io

mozaic.fm 10 周年記念イベント開催後記

2014 年 3 月に開始した mozaic.fm が、気づいたら 10 周年を迎えた。これを機に、10 周年記念イベントとして、初のオフラインイベントをゲンロンカフェで開催した。Podcast でのみ告知し、当日まで情報制限をかけていたにもかかわらず、チケットもグッズも無事完売することができた。イベントを振り返りつつログを残す。

azukiazusa のテックブログ2

フォームのアクセシビリティを考える

今日の Web におけるフォームはユーザーが情報を入力して対話するための重要な要素です。支援技術を利用しているユーザーがフォームの入力を妨げられることは当然避けるべきでしょう。また障害の有無に関わらず、ユーザーに迷いを与えたり、入力ミスを誘発するようなフォームはユーザーがタスクを完了せずに途中で離脱してしまう可能性が高まり、ビジネスの観点からも望ましくありません。この記事ではフォームのアクセシビリティについて考え、実際のフォームの実装においてどのような点に注意すべきかを紹介します。

azukiazusa のテックブログ2

CSS メディアクエリで比較演算子が使える

CSS のメディアクエリで比較演算子（``, `=`）が使えます。この記法を Range Syntax と呼びます。この記法は従来の `min-width` や `max-width` といった記法と比べて、より直感的に記述できるため便利です。

azukiazusa のテックブログ2

React Server Components を使うためのミニマムなフレームワーク Waku

Waku は小規模から中規模の React プロジェクトを構築するためのミニマムなフレームワークです。従来は React Server Components を使うためには Next.js のような比較的大規模なフレームワークが必要でした。Waku もまた React Server Components に対応しているため、最小限の構成で React Server Components を使いたい場合に適しています。

@sakupi01.com blog

内定者アルバイトを終えて

チーム開発何もわからんだった私が、チームワークを大切にする会社の内定者アルバイトに参加して思ったことをつらつら書きます。まとまりはないです。

azukiazusa のテックブログ2

1 つの AbortController で複数の fetch をキャンセルできる

`AbortController` は、fetch API でリクエストをキャンセルするためのオブジェクトです。`AbortController` は複数のリクエストを 1 度にキャンセルできます。

azukiazusa のテックブログ2

CSS の reverse 系の値は可能な限り使わない

CSS の reverse 系の値とは、`flex-direction` の `row-reverse` や `column-reverse` などのことです。これらの値は、アクセシビリティの観点からできる限り使用を避けるべきです。

azukiazusa のテックブログ2

新しい UI テストの手法を提供するテストライブラリ SafeTest

SafeTest は Playwright と Jest/Vitest を組み合わせた UI テストライブラリです。特定のライブラリに依存せず、React, Vue, Angular, Svelte などのフレームワークに対応しています。SafeTest は単体テストと Playwright を使った E2E テストの手法を組み合わせることで、それぞれの手法が抱える欠点を補うことを目指しています。

azukiazusa のテックブログ2

技術の素振りのために記事を書く

技術の素振りを、ここではある特定の言語やフレームワークに対する理解を深めるために、その技術を使って何かしらの成果物を作成することと定義します。素振りの目的としては、ドキュメントからは読み取れない Pro/Con を得ること、その技術が実際のプロジェクトで使えるかどうか調査するといった事項があげられるでしょう。ただ素振りするだけではぼんやりと頭に知識が入っている状態になりがちですが、他者への説明というアウトプットを意識することで、コードを書くことによって得られた知見を整理できるようになります。

azukiazusa のテックブログ2

初心者向けの単純なルールを作る

新しい物事を始めるときは複雑な理屈は抜きにして、単純なルールが規定されていることが初心者にとって大切です。この理屈は開発時の設計やコーディングルールにも当てはまると思います。単純なルールとして lint を設定したり、コンポーネント化して複雑な部分を隠蔽することですべての開発者にとってコードをコミットしやすくなります。

azukiazusa のテックブログ2

type-safe とプログレッシブエンハンスメント、アクセシビリティヘルパーを備えたフォームライブラリ Conform

Conform は React 向けのフォームライブラリです。type-safe であること、Web 標準を利用したプログレッシブエンハンスメントや、アクセシビリティヘルパーを特徴としており、Next.js の Server Actions や Remix に対応しています。

azukiazusa のテックブログ2

フルスタック Web フレームワーク HonoX を使ってみる

HonoX は Hono と Vite をベースにしたフルスタック Web フレームワークです。Hono が提供するサーバーサイドやクライアントサイドの機能を使いつつ、ファイルベースルーティングや Islands Architecture などの新しい機能を使うことができます。

blog.jxck.io

Promise.withResolvers によるイベントの Promise 化

Promise.withResolvers() は、Stage 4 であり ES2024 の候補となった。すでにブラウザでの実装も進んでいるため、その活用方法を解説する。

blog.jxck.io

TC39 に新設された Stage 2.7 について

TC39 の Stage 2 と Stage 3 の間に、新たに Stage 2.7 が追加された。これは何だろうと思った人が検索で辿り着けるよう、その経緯と目的をまとめる。

azukiazusa のテックブログ2

Tailwind CSS を使う時に一緒に入れたいライブラリ

Tailwind CSS を使う上でクラス名をスッキリと書くために一緒に入れたいライブラリを紹介します

azukiazusa のテックブログ2

Hono で Server-Sent Events によるストリーミングを実装する

Server-Sent events（SSE）は、サーバーからクライアントに向けてイベントをストリーミングするための仕組みです。WebSocket と比較すると、サーバーからの単方向の通信、HTTP で通信するという特徴があります。この記事では Hono を使って OpenAI API を使ったテキスト生成をストリーミングする方法を紹介します。

azukiazusa のテックブログ2

npm は isntall でもコマンドを実行できる

npm は install の alias として isntall が用意されているので、typo して isntall と打ってもコマンドが実行されます。

blog.jxck.io

Apple によるブラウザエンジン規制の緩和

以前から騒がれていた Apple によるサイドローディング周りの緩和について、正式な情報公開があった。Apple announces changes to iOS, Safari, and the App Store in the European Union - Applehttps://www.apple.com/newsroom/2024/01/apple-announces-changes-to-ios-safari-and-the-app-store-in-the-european-union/ストアやペイメントの緩和もあるが、ここでは WebKit に関する部分だけを抜粋し、どのような条件があるのかをまとめておく。筆者が公開情報を読んで解釈したものなので、内容は保証しない。

azukiazusa のテックブログ2

クラス名の結合をする軽量ライブラリの clsx

clsx は、複数のクラス名を結合するための軽量ライブラリです。条件によってクラスを付け替えたり、グルーピングをする際に簡潔に記述できます。

azukiazusa のテックブログ2

TypeScript のような構文で OpenAPI のスキーマを定義する TypeSpec

TypeSepc は TypeScript にインスパイアされた言語で、開発者が親しみやすい構文で OpenAPI のスキーマを定義できます。モデルを使ってデータの構造を定義し、`@route` デコレーターを使って REST API のエンドポイントを定義します。

azukiazusa のテックブログ2

CSS で絶対に最前面に表示したい要素には z-index:calc(infinity) を指定する

いつの時代にも z-index の管理には頭を悩ませます。z-index の値には 1 以外の値を許可しないなどの管理方法がありますが、外部のライブラリを使用してる場合に勝つことができません。 そこで　z-index の値に `calc(infinity)` を指定すると、絶対に最前面に表示させることができます。

azukiazusa のテックブログ2

Node.js esm の dirname と filename

commonjs では `__dirname` と `__filename` でファイルのパスを取得できますが ES Modules では使えません。 今まで同等の API が存在していなかったのですが、Node.js v20.11.0 で `import.meta.dirname` と `import.meta.filename` が追加されました。

blog.jxck.io

Web 技術年末試験 2023 講評 #web_exam2023

2023 年の Web 技術を振り返る試験として、「Web 技術年末試験 2023」を実施した。その問題と想定解答、平均点などを公開する。

azukiazusa のテックブログ2

Bun でクロスプラットフォームなシェルスクリプト

Bun の `$` を使うと、クロスプラットフォームなシェルスクリプト（Bun Shell）を書くことができます。Bun Shell は macOS (zsh)、Linux (bash)、および Windows (cmd) と OS の違いを気にせずにシェルスクリプトを書ける、JavaScript オブジェクトとのやりとりが可能であることが特徴です。

azukiazusa のテックブログ2

MSW v2 では　Web 標準の Fetch API をサポート

Mock Service Worke（MSW） v2 では　Web 標準の Fetch API をサポートしました。

azukiazusa のテックブログ2

Remix の SPA モード

Remix は React のフルスタックフレームワークで、Web 標準に基づいた API で構築されていることが特徴です。Node.js のようなサーバーサイドの JavaScript 環境で動作することを前提としています。しかし、現実の世界ではサーバーを用意せずに、静的なファイルをホスティングするだけの環境で Web アプリケーションを構築することが有効な場合も多くあります。このような需要を満たすために、Remix v2.5.0 から実験的に SPA モードが導入されました。

azukiazusa のテックブログ2

TypeScript で任意の文字列を受け取りつつエディタの補完を効かせる型

すべての文字列を受け入れつつ、特定の文字列のみを補完候補に表示させたい場合があります。例えば、CSS の色を指定するプロパティの値には、カラーコードで指定する `#000000` や `#ffffff` などの文字列を受け入れつつ、`red` や `blue` などの特定の文字列を指定します。

azukiazusa のテックブログ2

React でコンポーネントの Props の型を取得する

プリミティブな UI を構築するとき、button や input などの HTML 要素をラップしたコンポーネントを作成することがあります。このようなコンポーネントでは、HTML 要素の Props に加えて、コンポーネント固有の Props を定義することが多いです。

azukiazusa のテックブログ2

配列をグループ化する Object.groupBy 静的メソッド

Object.groupBy 静的メソッドは、ES2024 で追加された配列をグループ化する関数です。配列の各要素に対してグループ化のキーを指定することで、グループ化されたオブジェクトを返します。

azukiazusa のテックブログ2

TailwindCSS で複数行のテキストを省略するとき

TailwindCSS で長いテキストを省略するときには、`truncate` クラスを使用します。しかし、`truncate` クラスは 1 行のテキストにしか対応していません。

azukiazusa のテックブログ2

tabIndex には 0 と -1 だけを指定する

tabIndex 属性は、フォーカス可能な要素を指定するための属性です。この属性自由な数値を指定できますが、これはアクセシビリティの観点から推奨されていません。

azukiazusa のテックブログ2

Svelte の Props 省略記法

Svelte ではコンポーネントに Props を渡す際に省略記法が使えます。

azukiazusa のテックブログ2

GitHub Copilot Chat の inline chat のキーボードショートカットを無効にする

GitHub Copilot Chat を VSCode で使用していると、エディタ上で ⌘ + i を押すと inline chat が表示されます。しかし、このショートカットはコードの補完を表示するためにも使われていました。このショートカットに慣れていた人にとっては、inline chat が表示されるのは意図しない動作でしょう。

azukiazusa のテックブログ2

details 要素の name 属性による排他的アコーディオン

`details` 要素は、開閉可能なコンテンツをマークアップするための要素です。`details` 要素に新たに `name` 属性が追加され排他的アコーディオンとして利用できるようになりました。

azukiazusa のテックブログ2

GitLens で特定のコミットを除外する

GitLens の使用時に、機械的にフォーマットされたコミットがあるとコードの変更履歴を確認する際に邪魔になってしまいます。この記事では、GitLens で特定のコミットを除外する方法を紹介します。

azukiazusa のテックブログ2

大きさが自動で変わる textarea を CSS だけで実現

テキストの入力量に応じて自動で高さが変わる textarea をよく見かけると思います。Slack や X の入力欄がそうですね。

azukiazusa のテックブログ2

TailwindCSS の data 属性

TailwindCSS v3.2 からは data 属性を使って、条件付きでスタイルを適用できます。

azukiazusa のテックブログ2

静的サイト向けの全文検索エンジンと UI ライブラリの Pagefind

Pagefind は、静的サイト向けの全文検索エンジンと UI ライブラリです。特定のフレームワークに依存しない JavaScript ライブラリとして実装されており、静的サイトジェネレーターで生成された HTML ファイルに対して検索機能を追加できます。

stin's Blog

2024年の目標

あけましておめでとうございました。すでに 5 日が経過してしまいましたが、2024 年の目標を立てます。 技術ブログを 20 記事以上書く(媒体は問わない) 個人開発アプリを 1 つリリースする 引っ越す 加えて、達成する目標とはちょっと違いますが、行動指針として「思い立ったらすぐに行動する」を掲げます。 2023 年...

blog.jxck.io

2023 年を振り返る

例年通り 2023 年を振り返る。

azukiazusa のテックブログ2

2023 年に読んでよかった本

年末なので 2023 年のまとめっぽい記事を書きたくなりました。今年は 1 年間でおおよそ 300 冊の本をよんだようです（そのうち 3 割ほどはラノベなのですが...）。その中でも特に印象に残った本を紹介します。

blog.jxck.io

3PCA 最終日: 3rd Party Cookie 亡き後の Web はどうなるか?

このエントリは、3rd Party Cookie Advent Calendar の最終日である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookieここまで、3rd Party Cookie との 30 年にわたる戦いと、ITP 以降それが Deprecation されるに至った流れ、そして Privacy Sandbox の API について解説してきた。最終日は、ここまでを踏まえて、来年以降の Web がどうなっていくのかを考えていく。

blog.jxck.io

3PCA 27 日目: FedCM

このエントリは、3rd Party Cookie Advent Calendar の 27 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie今日は、散々壊れるユースケースとして解説してきた「認証連携」をカバーする FedCM について解説する。

stin's Blog

react-markdown をやめて remark から自力でレンダリングするようにした話

Intro このブログサイトの記事ページではこれまで react-markdown というライブラリでマークダウンを HTML に変換して表示していました。この度、react-markdown を剥がして remark を直接使って記事をレンダリングするように変更しました。 前回の記事で Playwright で VR...

blog.jxck.io

3PCA 26 日目: Related Website Sets

このエントリは、3rd Party Cookie Advent Calendar の 26 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie今日からは、Privacy Sandbox の「広告」以外の API を解説していく。

blog.jxck.io

3PCA 25 日目: Measurement

このエントリは、3rd Party Cookie Advent Calendar の 25 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie今日は、広告の測定について解説する。

blog.jxck.io

3PCA 24 日目: Retargeting

このエントリは、3rd Party Cookie Advent Calendar の 24 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie今日はリターゲティングをカバーする Protected Audience API について解説する。

stin's Blog

ブログに Playwright で VRT を導入した

Intro 記事ページのスタイルを維持したまま内部実装に大きめの変更を加えたかったので、Visual Regression Test(VRT)を導入しました。 といってもあまりに簡易的な内容です。CI で自動化とか Chromatic とか大規模なことはしていません。ただローカルPCで Playwright を動かして...

blog.jxck.io

3PCA 23 日目: Interest Based Advertising

このエントリは、3rd Party Cookie Advent Calendar の 23 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie今回からは、Privacy Sandbox の API を、ジャンルごとに分けて概要を解説していく。個々の API は非常に複雑であり、また今後も細かい点が変わっていくだろう。どうせガッツリ使うのであれば、仕様を読む必要があるため、ここでは「何がしたいのか」「何ができるのか」に絞って解説する。

blog.jxck.io

3PCA 22 日目: Privacy Sandbox

このエントリは、3rd Party Cookie Advent Calendar の 22 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie今日からいよいよ Privacy Sandbox の話に入っていく。

azukiazusa のテックブログ2

input[type=checkbox] 要素に switch 属性を指定することによる HTML 標準のスイッチ UI の提案

スイッチは多くのウェブサイトで使われているものの、HTML の標準要素としては存在していませんでした。そのため多くの開発者は、スイッチを実装するために独自の実装を行っていましたが、このような独自の実装はアクセシビリティの問題を引き起こす可能性がありました。この問題を解決するために、WHATWG により `input[type="checkbox"]` 要素に `switch` 属性を追加することが提案されました。この属性を指定することで、チェックボックスをスイッチとして利用できます。

blog.jxck.io

「議論だけ」のカンファレンスの作り方

「議論だけ」のカンファレンスを、長いこと開催してきた。個人的には好きなので、他にもあったらいいと思っているが、そういうカンファレンスは他に見ない。カンファレンス自体を、筆者のような個人が手弁当でやれるのは、もう最後かもしれないと今回ひしひしと感じたので、これまでどうやってきたのかを残しておくことにする。

blog.jxck.io

次世代 Web カンファレンス 2023 開催後記

2023/12/16(土) に、以下で告知した「次世代 Web カンファレンス」を開催した。次世代 Web カンファレンス 2023 開催告知 | blog.jxck.iohttps://blog.jxck.io/entries/2023-11-16/next-web-conf-2023.html次世代 Web カンファレンス 2023 - connpasshttps://nextwebconf.connpass.com/event/300174/

blog.jxck.io

3PCA 21 日目: SameSite Cookie

このエントリは、3rd Party Cookie Advent Calendar の 21 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookieGoogle が 3rd Party Cookie を Deprecate していく方針を発表してから、最初に始めたのが SameSite Lax by Default だった。これが何のために行われたのかを解説する。

azukiazusa のテックブログ2

OpenTelemetry Collector をカスタムビルドする

本番環境では OpenTelemetry Collector Contrib を使用せず、必要なコンポーネントのみを含むようにカスタムビルドすることが推奨されています。この記事では、OpenTelemetry Collector をカスタムビルドする方法について紹介します。

blog.jxck.io

3PCA 20 日目: 3rd Party Cookie Deprecation

このエントリは、3rd Party Cookie Advent Calendar の 20 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookieここまで ITP について見てきたが、これはあくまで Safari が独断で行っていたことだ。それに対して、他が追従するかどうかはブラウザ次第だっただろう。では、他のブラウザはどのような反応をしたか。この反応には、その時の情勢も鑑みる必要がある。

blog.jxck.io

3PCA 19 日目: Super Cookie

このエントリは、3rd Party Cookie Advent Calendar の 19 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie今日は Super Cookie の解説をする。迂回手段ゾーンとしては、最後に紹介する手法だ。

blog.jxck.io

3PCA 18 日目: Cloaking

このエントリは、3rd Party Cookie Advent Calendar の 18 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie今日は、ITP の迂回で注目された Cloaking について解説する。

azukiazusa のテックブログ2

CSS だけで動くスクロールドリブンアニメーション

Google Chrome 115 で追加されたスクロールドリブンアニメーションを使うことで、今まで JavaScript を使わなれけば実装できなかったようなスクロールと連動するアニメーションを CSS だけで実装できるようになりました。スクロールの進行状況に応じてバーを伸縮させるようなアニメーションや、要素が画面内に入ったタイミングでアニメーションを開始するようなことが実装できます。

blog.jxck.io

3PCA 17 日目: Fingerprinting

このエントリは、3rd Party Cookie Advent Calendar の 17 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie今日は、Cookie に頼らない Tracking 手段としての、Fingerprinting について解説する。

stin's Blog

ポケモンBGMループ再生サイトの音声ファイルをキャッシュするために色々調べた

Intro 以前の記事でポケモンBGMループ再生サイトを Cloudflare Pages に載せ替えた話をつらつらと書きました。 https://blog.stin.ink/articles/pokemon-soundlibrary-on-cloudflare この記事が多くの方にご覧頂けて非常に嬉しい限りです。 そ...

blog.jxck.io

3PCA 16 日目: Bounce Tracking

このエントリは、3rd Party Cookie Advent Calendar の 16 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie今日は 3rd Party Cookie の迂回としてトラッキングに用いられた、Bounce Tracking について解説する。

blog.jxck.io

3PCA 15 日目: Work Around

このエントリは、3rd Party Cookie Advent Calendar の 15 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie今回は ITP が始まったことで試行された、迂回方法について見ていく。

blog.jxck.io

3PCA 14 日目: Partitioning

このエントリは、3rd Party Cookie Advent Calendar の 14 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie今日は Safari, Firefox で導入され、その後 Chrome によって標準化されつつある、Partitioning という概念を解説する。

blog.jxck.io

3PCA 13 日目: ITP

このエントリは、3rd Party Cookie Advent Calendar の 13 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie

blog.jxck.io

3PCA 12 日目: 終わりの始まり

このエントリは、3rd Party Cookie Advent Calendar の 12 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie

blog.jxck.io

3PCA 11 日目: Cookie Banner

このエントリは、3rd Party Cookie Advent Calendar の 11 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie前回は、各国で法律が整備されていった流れや、主な法律の特徴を解説した。しかし、法律はあくまで法律であり仕様ではないため、「どう実装するべきか」は各サービスに委ねられている(ガイドラインなどはあるが)。多くの場合、これを Web の実装に落とし込むと、いわゆる「Cookie バナー」相当になるわけだ。今回は、実世界でどのようなバナーが提供されているのかを見ていく。

stin's Blog

ポケモンBGMループ再生サイトを Cloudflare Pages に載せ替えた

Intro https://pokemon-soundlibrary.stin.ink/ このポケモンのBGMを無限ループで再生できる Next.js 製サイトは、これまで Vercel にデプロイしていました。しかし Vercel にデプロイすることはいくつか問題点を抱えていました。 大量の音声ファイルを publi...

blog.jxck.io

3PCA 10 日目: なぜ Cookie には同意が必要なのか?

このエントリは、3rd Party Cookie Advent Calendar の 10 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie今回は、この話をする上で避けては通れない、規制や法律について触れておく。しかし、筆者はあくまでエンジニアであり、この分野は専門外だ。内容については、素人が適当に書いており、信頼性は AI 以下だと思って読んでほしい。

azukiazusa のテックブログ2

Storybook v8 の React Server Components サポート

Storybook v8 では `experimentalNextRSC` オプションにより React Server Components をサポートしています。しかし、このオプションは React Server Components としての動作を再現しているわけではありません。サーバーサイドで Storybook が動作してるわけではなく、非同期コンポーネントをクライアントでレンダリングしているに過ぎないことに留意すべきです。

blog.jxck.io

3PCA 9 日目: DNT

このエントリは、3rd Party Cookie Advent Calendar の 9 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie今回は、P3P の後に提案され、非常に似たコンセプトで、かつ最近まで使われていた DNT について解説する。

blog.jxck.io

3PCA 8 日目: P3P

このエントリは、3rd Party Cookie Advent Calendar の 8 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie今回は、Cookie2 が失敗した後に、別のアプローチでこの課題に挑んだ P3P を解説する。

blog.jxck.io

3PCA 7 日目: Cookie2

このエントリは、3rd Party Cookie Advent Calendar の 7 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookieここからは第二幕、人類と 3rd Party Cookie の闘いの歴史を見ていく。「歴史の話はいらない、早くコードを見せろ」と思っている読者の気持ちもわかるが、残念ながら背景がわかっていないとまともな闘いはできないだろう。

blog.jxck.io

3PCA 6 日目: トラッキングの問題

このエントリは、3rd Party Cookie Advent Calendar の 6 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie前回は、3rd Party Cookie にはネガティブ/ポジティブを含め、さまざまなユースケースがあるという解説をした。では、なぜ 3rd Party Cookie は今「問題」になっているのだろうか?

blog.jxck.io

3PCA 5 日目: 認証の連携

このエントリは、3rd Party Cookie Advent Calendar の 5 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie前回は、3rd Party Cookie を使った広告のリターゲティングの仕組みを解説した。「あの気持ち悪い広告の正体は 3rd Party Cookie だったのか」と思った人もいるかもしれない。そんな諸悪の根源である 3rd Party Cookie など「さっさと無効にしてしまえばいいのでは?」と思うかもしれないが、それは簡単なことではない。なぜなら、3rd Party Cookie のユースケースは、ネガティブなものだけではないからだ。その一例として、今回は認証連携のユースケースを解説する。

stin's Blog

Next.js App Router の Static Exports の可能性を探るためにブログでやってみた話

Next.js Advent Calendar 2023 の12月4日の記事です。 https://qiita.com/advent-calendar/2023/next Static Exports とは Next.js の Static Exports は Next.js のビルド結果として完全に静的な HTML,...

blog.jxck.io

3PCA 4 日目: 3rd Party Cookie の正体

このエントリは、3rd Party Cookie Advent Calendar の 4 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie前回は「サブリソースにまで Cookie が送られて何が嬉しいのか」という話だった。今回はそのユースケースについて考えていく。

blog.jxck.io

3PCA 3 日目: 自動で送られる Cookie

このエントリは、3rd Party Cookie Advent Calendar の 3 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie前回は「Cookie は 区別 と 識別 の用途があり、区別 だけのユースケースもある」という解説をした。今回も、もう少し Cookie の性質を振り返っていく。

stin's Blog

stin.ink を Google Domains から Cloudflare Registrar に移管した

Cloudflare Registrar に移管した このブログもサブドメインとして使用されている stin.ink は、僕が持つ唯一のドメインです。Google Domains で取得して、色々サブドメインを生やして使っています。 半年ほど前ですが、Google Domains がサービスを終了して事業譲渡されること...

azukiazusa のテックブログ2

MSW v2 で `HttpResponse.json()` の型がおかしいときの対処法

MSW v2 の `HttpResponse.json()` の第 2 引数の型は `Response` オブジェクトの初期化時に渡すオプションを指定できます。しかし、tsconfig.json の設定によっては、この型がおかしくなることがあります。その場合には、`tsconfig.json` の `compilerOptions.lib` に `dom` を追加するのが一時的な対処法です。

blog.jxck.io

3PCA 2 日目: Cookie による区別と識別

このエントリは、3rd Party Cookie Advent Calendar の 2 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie

blog.jxck.io

3PCA 1 日目: 3rd Party Cookie Advent Calendar Agenda

このエントリは、3rd Party Cookie Advent Calendar の 1 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.com/advent-calendar/2023/3rd-party-cookie

stin's Blog

個人ブログ開発でとても便利な Contentlayer を導入してみた

またまた自分のブログサイトを改修した報告です。自分のブログサイトを改修してはそれをネタに記事を書くのを繰り返していて、なんか面白いですね。 このブログはソースコードと同じリポジトリに Markdown 記事を保存しています。サイト自体は Next.js で、Markdown はただの .md ファイルです。 これまで気...

blog.jxck.io

なぜ HTML の form は PUT / DELETE をサポートしないのか?

10 年ほど前に同じことを調べたことがある。なぜ html の form は PUT / DELETE をサポートしないのか? - Block Rockin' Codeshttps://jxck.hatenablog.com/entry/why-form-dosent-support-put-delete当時は全くの素人で、素人なりに調査はしたが、ほとんどが推測の域を出ない結論だった。この問題についてあらためて記す。

azukiazusa のテックブログ2

React Server Components のテスト手法

現代におけるコンポーネントのテストは Testing Library を用いてテストを行うことが一般的です。しかし、2023 年　11 月現在、Testing Library はまだ Server Components のテストを十分にサポートしていません。そのため、Server Components のテストを行うには、別の方法を用いる必要があります。この記事では、Testing Library を用いずに Server Components のテストを行う方法について説明します。

stin's Blog

Chakra UI は "use client" なしで使えるようになった「だけ」

Chakra UI が自分で "use client" を付けている 最近 Chakra UI が "use client" を付けずとも Next.js の App Router で使えるようになったと話題になりました。しかし調べてみると、どうやら JS 非依存なコードに書き換えられた訳ではなく、Chakra UI ...

stin's Blog

ブログの記事ページに Table of Contents を設置したので実装方法などを書く

画面幅 991px 以上で閲覧すると、記事ページの右側に目次リンクが表示されるように実装しました。 目次生成ライブラリ tocbot tocbot というライブラリを使用しました。 https://tscanlin.github.io/tocbot 今までこちらのライブラリの存在を知らずに、どうやって実装しようか迷子に...

azukiazusa のテックブログ2

HTML 標準でコンボボックスを実現する `<combobox>` 要素の提案

コンボボックスとは、テキストボックスとドロップダウンリストを組み合わせた UI コンポーネントです。コンボボックスはユーザーがテキストボックスに入力した文字列に基づいて、ドロップダウンリストのアイテムをフィルタリングできます。`` 要素は、HTML の標準でコンボボックスを実現することを目的としています。

blog.jxck.io

次世代 Web カンファレンス 2023 開催告知

2023/12/16(土) に、3 回目となる「次世代 Web カンファレンス」を開催します。次世代 Web カンファレンス 2023 - connpass名称: 次世代 Web カンファレンス 2023日時: 2023/12/16(土) 11:00-20:00場所: サイボウズ参加費: 無料配信: なしアーカイブ: 未定懇親会: なし入場規制: ありハッシュタグ(全体): #nwc_all

stin's Blog

ポケモンBGMループ再生サイトをアップデートした

https://pokemon-soundlibrary.stin.ink ポケモン公式が公開している「ポケットモンスター ダイヤモンド・パール」の BGM をループ再生できるようにしたサイトを以前作りました。その後公式から「ポケットモンスター 赤・緑」の BGM も配布されたので、追加分も再生できるようにアップデート...

azukiazusa のテックブログ2

なぜ Server Actions を使うのか

Next.js 14 の Server Actions の stable リリースに発表は大きな反響を呼びました。特に `` の `formAction` 属性内で直接 SQL クエリを実行するコードは多くの人に衝撃を与えていました。Server Actions の是非について語る時、導入の背景にユーザー体験の向上があるという観点を忘れてはいけません。また、セキュリティ上の観点についてどのように考えるべきでしょうか？

azukiazusa のテックブログ2

パッケージマネージャーを npm に移行するときには `npm install --package-lock-only` コマンドを使うとよい

既存のプロジェクトで npm に移行する際に `npm install --package-lock-only` を使うことで、依存パッケージのバージョンを変更することなく lock ファイルを移行できます。

stin's Blog

ブログのデザインを刷新した

このサイトのデザインを刷新しました（1 年半ぶり 2 回目）。 変更した理由 最近 Vercel のエンジニアが開発している Nextra という静的サイトジェネレーターをよく見かけるようになりました(出来たばかりのツールではなく、自分が意識的に見るようになったという意味)。このツールで実装できるサイトのダークモードデ...

blog.jxck.io

ブラウザでリロードしながらキャッシュの挙動を確認してる全ての開発者へ

こういうタイトルを付けるのはあまり好きではないが、あえてこのようにした。

azukiazusa のテックブログ2

Server Actions の戻り値には JSX を使える

Server Actions の戻り値には、シリアライズ可能なデータ型を返す必要があります。ドキュメントでは Server Actions の戻り値に JSX を使うことはサポートされていないと記述されていますが、実際には Server Actions の戻り値に JSX を使うことができます。ただし、公式にサポートされている仕様ではないので、思わぬバグを踏む、将来追加される機能に対応しないおそれがあることを理解した上で、使うかどうかを判断する必要があります。

azukiazusa のテックブログ2

Server Actions のフォームバリデーションにおいて useFormState でエラーメッセージを表示する

Next.js の Server Actions でフォームを作成する際に、どのような方法でバリデーションを行い、エラーメッセージを表示する際にどのような手段が考えられるでしょうか。プログレッシブエンハンスメントの恩恵を受けるために、サーバーサイドでバリデーションを行いその結果を表示する方法が効果的です。`useFormStatus` フックはこの一連の動作を行うために使用します。

azukiazusa のテックブログ2

GitLens で特定のコミットを除外する

GitLens の使用時に、機械的にフォーマットされたコミットがあるとコードの変更履歴を確認する際に邪魔になってしまいます。この記事では、GitLens で特定のコミットを除外する方法を紹介します。

azukiazusa のテックブログ2

JavaScript なしでインタラクションを追加する Invokers

Invokers は JavaScript なしでインタラクションを追加するための提案です。`` 要素に `invoketarget` 属性を指定することで、値として指定した id を持つ `` などの要素の開閉状態を切り替えることが可能となります。

azukiazusa のテックブログ2

URL が有効かどうかを判定する `URL.canParse()` メソッド

`URL.canParse()` メソッドは与えられた URL 文字列が有効であるかどうかを判定します。URL 文字列が有効であれば `true` を、無効であれば `false` を返します。これは URL コンストラクターを用いた `try...catch` 文による判定よりも簡潔に記述できます。

azukiazusa のテックブログ2

:user-valid、:user-invalid 擬似クラスでユーザーの操作の後に検証を行う

ユーザーの操作の後にフォームの検証に基づき有効か無効かを示すために使用できる :user-valid、:user-invalid 擬似クラスを紹介します。従来の :valid、:invalid 擬似クラスと異なり、ユーザーがフォームに入力するまではスタイルを適用されません。

azukiazusa のテックブログ2

focusgroup で矢印キーによるフォーカスナビゲーションを実装する

カスタム UI ウィジェットを実装する際には、ウィジェットのロールに応じたキーボード操作によるフォーカスナビゲーションを実装することが求められています。従来このようなキーボード操作は JavaScript を用いて実装する必要がありました。`focusgroup` の提案は、このようなキーボード操作を独立して使用できるプリミティブとして提案されています。この機能を利用することで、開発者は JavaScript を用いることなく一貫したフォーカスナビゲーションを実装できます。

azukiazusa のテックブログ2

`<details>` 要素の `name` 属性による排他的なアコーディオンの実装

`` 要素の `name` 属性を利用してグループ化することにより、排他的なアコーディオンを JavaScript なしで実装できます。

azukiazusa のテックブログ2

よりカスタマイズ可能なセレクトボックスを実現する `selectlist` 要素

`` 要素は、デザインをカスタマイズできなかった従来の `` 要素の問題を解決するために Open UI グループにより提案されている要素です。`` の構成要素の多くはスロットとして提供されていて、高いカスタマイズ性を備えているのが特徴です。

azukiazusa のテックブログ2

`history.replaceState()` にはブラウザによって呼び出し回数制限がある

`history.replaceState()` は、ブラウザの履歴を変更するための API です。使用例としてユーザーのアクションによる UI の状態の変更に合わせて、URL のクエリパラメータを変更することが挙げられます。この API はブラウザにより呼び出し回数に制限が設けられており、使い方を誤ると予期せぬ挙動が発生するおそれがあります。

azukiazusa のテックブログ2

モーダルの開閉状態を URL で管理する

モーダルの開閉状態を URL で管理することで、状態を復元したり、状態を共有できるなどのメリットがあります。この記事では、Next.js を例に URL でモーダルの開閉状態を管理する方法を紹介します。

azukiazusa のテックブログ2

Bun の Web フレームワーク ElysiaJS のチュートリアル

ElysiaJS は Bun の Web フレームワークです。高いパフォーマンスと、シンプルな API や厳格な型チェックにより生産性に優れているという特徴があります。また柔軟性が高く、多くのプラグインを組み合わせて利用できます。この記事では、ElysiaJS を使って簡単なタスク管理アプリの Web API を作成してみます。

azukiazusa のテックブログ2

Bun workspace で始めるモノレポ生活

Bun では `package.json` の `workspaces` を使用することでモノレポの管理が可能です。この記事では Bun によるモノレポを試してみます。

azukiazusa のテックブログ2

Bun のマクロを使ってフィーチャートグルを実装する

Bun にはマクロはビルド時に実行される関数です。関数が返す値がインラインにバンドルファイルに埋め込まれます。マクロには、実行してインライン化した後に、デッドコードを削除するという特徴があります。この機能を使ってフィーチャートグルを実装してみましょう。

azukiazusa のテックブログ2

Bun の Plugins で CSV ファイルを直接 import する

Bun の Plugins API を使用することで、任意の拡張子のファイルのサポートを追加できます。例えば Bun の公式の動画では、Plugins API を使用して Rust ファイル（.rs）を直接 import できる仕組みも作れることが紹介されています。

azukiazusa のテックブログ2

OpenTelemetry Collector の Connector を使ってログをメトリックに変換する

OpenTelemetry には、メトリック、トレース、ログの 3 つの形式があります。これらの形式はそれぞれ別のパイプラインで処理されます。ある形式のデータを別の形式に変換し、あたかも 1 つのパイプライン上でデータを処理したい場合に Connector を使用します。例えば、あるパイプラインはログのパイプラインのエクスポーターとメトリックのパイプラインのレシーバーとして動作します。このような場合、Connector はログをメトリックに変換する役割を担います。

azukiazusa のテックブログ2

最小限のコードで動く最も汚いコードから始める

コードを書く際の重要な要点は、読みやすく他人に理解される「良いコード」を書くことです。しかし、完璧を目指して最初から書こうとすると行き詰まります。代わりに、荒削りながらも動くコードを作成し、徐々にリファクタリングして完成度を高めます。型エラーやリントエラーを無視しても構わないので、まずは動くものを作成しましょう。それからリファクタリングして「良いコード」を作成できます。

azukiazusa のテックブログ2

OpenTelemetry を使用して Node.js アプリケーションを計装する

OpenTelemetry は Observability のフレームワークであり、トレース・メトリクス・ログなどのテレメトリーデータを作成、管理するためのツールキットです。OpenTelemetry はベンダーに依存しない形で標準化されたプロトコルとツールを提供していることが特徴です。この記事では Node.js アプリケーションを計装して Prometheus にデータを送信する方法を紹介します。

azukiazusa のテックブログ2

await は Promise 以外のオブジェクトでも値を取り出せる

await キーワードは `then()` という名前のメソッドを持つオブジェクトに対して使用できます。このようなオブジェクトを thenable object と呼びます。await キーワードが Promise オブジェクトではなく thenable オブジェクトを対象としているのは、ライブラリの相互運用のためです。

blog.jxck.io

Cookie2 とは何か

タイトルを見て「Cookie の新しい仕様か、キャッチアップしよう」と思って開いたのなら、以降を読む必要はない。

azukiazusa のテックブログ2

【React】メモ化したコンポーネントに children を渡すと効果がなくなる

React.memo は Props が変更されないかぎり、コンポーネントを再レンダリングしないようにする関数です。この関数はコンポーネントの余分なレンダリングを防ぎ、パフォーマンスを向上させる目的で使用されます。しかし、React.memo の使い方を誤ると意図しない再レンダリングが発生してしまうことがあります。ここではメモ化したコンポーネントに children を渡すと効果がなくなるというケースについて説明します。

azukiazusa のテックブログ2

アニメーションの無効設定は prefers-reduced-motion に任せるか、アプリケーションの設定で制御するか

prefers-reduced-motion とは、ユーザーの環境設定によって余計な動きを抑制することを要求したことを検出するメディアクエリです。この設定は各 OS ごとに設定できます。ユーザーがアニメーションを無効にできることは、アクセシビリティの観点で重要です。prefers-reduced-motion によりアニメーションを無効にするのでも十分ですが、アプリケーションの設定として持たせるべきだと考えています。

azukiazusa のテックブログ2

【書評】RustとWebAssemblyによるゲーム開発は Rust 開発における設計を学べる良書

本のタイトルは「Rust と WebAssembly によるゲーム開発」となっていますが、反して WebAssembly についての話題はほとんど出てきません。主に Rust における開発の設計についての話題が中心となっています。

azukiazusa のテックブログ2

グラフのアクセシビリティについて考える

`` や `` 要素で描画されたグラフは、スクリーンリーダーを使用するユーザーにとって内容を正しく理解することが難しいです。この記事では、グラフの内容をスクリーンリーダーを使用するユーザーに伝える方法について考えてみます。

blog.jxck.io

Compression Dictionary Transport (Shared Brotli) によるコンテンツ圧縮の最適化

Chrome で Compression Dictionary Transport の Experiment が行われている。Intent to Experiment: Compression dictionary transport with Shared Brotlihttps://groups.google.com/a/chromium.org/g/blink-dev/c/NgH-BeYO72Eこの提案の仕様および本サイトへの適用について解説する。

azukiazusa のテックブログ2

React.memo でメモ化したコンポーネントはモック関数が使えない

テストにおいて子コンポーネントをモックしたい場合には通常のテストと同様に jest.mock() を使います。しかし、React.memo() でメモ化したコンポーネントはモック自体には成功するものの、mockImplementation のようなモック関数が使えません。

azukiazusa のテックブログ2

Document Picture in Picture で任意の要素を Picture in Picture する

Document Picture-in-Picture は、`` 要素に限らず任意の要素を PiP できるようにする提案です。これにより、動画以外の要素を PiP できるようになります。主なユースケースとして、カスタムのメディア・コントロールを使用したり、プレイリストとともに動画を PiP することが挙げられます。

azukiazusa のテックブログ2

スナップショットテストとアサーションテスト

この記事では、スナップショットテストとアサーションテストの違いを説明します。また、それぞれのアプローチでテストを書いたときのメリットとデメリットを見ていき、どちらのアプローチを採用すべきか考えていきます。

azukiazusa のテックブログ2

pnpm でパッケージにパッチを当てる

`pnpm patch` コマンドを使うと、依存パッケージのコードを直接書き換えることができます。

azukiazusa のテックブログ2

aria-label を使いすぎない

aria-label 属性はコンテンツに対してアクセシブルな名前を与えるために使用します。aria-label 属性を使用する代表例として、中身がアイコンのボタンがあげられます。aria-label 属性は手軽に使えますが、できる限り一般的な形式でテキストを提供することが望ましいです。

azukiazusa のテックブログ2

スクリーンリーダーに配慮したテキスト表記

文字を機械的に判断するスクリーンリーダーでは、人間の目によって判断できる文字について異なる解釈をするおそれがあります。そのような場合、利用者に正しい文章の意図を伝えられません。スクリーンリーダーに配慮したテキストの表記法を紹介します。

blog.jxck.io

Cookie Store API による document.cookie の改善

JS から Cookie を操作する document.cookie の改善を目的とした Cookie Store API についてまとめる。

azukiazusa のテックブログ2

ポップオーバー API で JavaScript を使わずにポップアップを表示する

Chrome 114 から追加されたポップオーバー API を使うと、JavaScript を使わずに簡単にポップアップを表示することができます。

azukiazusa のテックブログ2

Vue.js でジェネリックコンポーネントを使う

Vue.js 3.3 から `` 構文を使用してコンポーネントを記述する際に、型引数を指定することができるようになりました。TypeScript で関数に型引数を指定するのと同じように、コンポーネントの props の型を指定することができます。

blog.jxck.io

AbortSignal.any(), AbortSignal.timeout(), そして addEventListener() の Signal

最近 AbortSignal.any() が提案され、急速に実装が進んでいる。すでに定義されている AbortSignal.timeout() や addEventListener() への Signal なども含め、非同期処理の中断を実装する際の API はかなり整備されてきた。これら API のモチベーションと設計を中心にまとめる。

azukiazusa のテックブログ2

GIF アニメーションの使用を控える

技術記事を書く際に、GIF アニメーションを使用することがあるかと思います。しかし、GIF アニメーションを使用することはアクセシビリティ上問題となります。この記事では、GIF アニメーションを使用することを避けるべき理由を説明します。

blog.jxck.io

URL バーの表示の変遷

ついに URL バーから EV 証明書の組織表示が消されるアナウンスが、Chrome から発表された。思えば、URL バーの見た目も、だいぶ変わってきたように思う。URL バーの表示の変遷を一度まとめておく。

stin's Blog

localStorage に同期する React State を作るカスタムフック

React の useState と似た使い方で localStorage に保存されるカスタムフック useLocalStorage の実装を紹介します。このブログサイトのソースコードで使用しています。 react-use に同じ目的同じ名前のカスタムフックが入っていることは知っていますが、インターフェイスも内部実装...

azukiazusa のテックブログ2

list-style: none スタイルを指定した ul 要素には list ロールを指定すべき

WAI-ARIA における role 属性を使用する際のプラクティスとして、暗黙のロールを明示しないというものがあります。しかし、` ` 要素は暗黙のロールとして `list` ロールを持っていますが、明示的に `list` ロールを宣言するべきです。

blog.jxck.io

IETF RFC における ABNF と Parsing Algorithm の関係

HTTPBis では、RFC 8941: Structured Field Values (以下 SFV) の更新作業が行われている。RFC 8941: Structured Field Values for HTTPhttps://www.rfc-editor.org/rfc/rfc8941.html機能面では Date 型が追加されるという点が大きいが、個人的にはその裏で行われるもっと興味深い議論に注目したい。それは、「RFC における ABNF の立ち位置」に関するものだ。

stin's Blog

ブログサイトを Next.js App Router に移行したので学びを書く

このサイトを Next.js App Router で実装し直しました。Server Components が扱えてなんか便利なやつです。 移行にあたって学んだことや App Router の嬉しいポイントなどを書いておきます。 スタイリングメソッドの移行 このブログサイトのスタイリングは vanilla-extrac...

azukiazusa のテックブログ2

Vitest のブラウザテスト

Vitest は実験的な機能として、ブラウザモードをサポートしています。ブラウザテストは Node.js 上で jsdom を用いてテストを実効するよりも信頼性の高い方法ですが、テストのセットアップに時間がかかるといったデメリットも存在します。

azukiazusa のテックブログ2

Next.js の Server Actions について

Next.js の Server Actions はサーバーサイドのデータのミューテーション、クライアント JavaScript の削減、プログレッシブエンハンスメントなフォームを実現します。

blog.jxck.io

技術書籍をシンタックスハイライトする話

「連載するけど、代わりにコードはハイライトさせてほしい」それが Web+DB Press 編集長に俺が出した条件だった。

azukiazusa のテックブログ2

SvelteKit のフォーム操作

SvelteKit のフォームは Web 標準の機能のみで完結しています。つまり、クライアントサイドでは JavaScript を一切使用せずにサーバーにデータを送信できるのです。さらに、JavaScript を利用できる環境であるならばリッチなユーザー体験を追加できます。例えば、フォームを送信した後ページ全体の再読み込みを行わずに、フォームの送信結果を表示することができたり、バリデーションメッセージを即座に表示できたりします。

azukiazusa のテックブログ2

Array.prototype.with() とは

`Array.prototype.with()` は、非破壊的に配列の要素を置き換えるためのメソッドです。非破壊的とは、元の配列を変更せずに新しい配列を返すということです。`arr` に対して `with()` を実行しても、`arr` は変更されず、新しい配列のコピーが返されます。

azukiazusa のテックブログ2

Tailwind CSS のダークモードで System, Light, Dark を切り替える

ダークモードの設定では、OS の設定と同期させるか、ライトモードまたはダークモードに手動で切り替えるかの 3 つの選択肢が用意されていることがあります。手動でライトモードとダークモードを切り替える場合に比べて、OS の設定を自動で反映できるメリットがあります。

azukiazusa のテックブログ2

Next.js の Interception Routes について

Intercepting routes は Next.js 13.3 から追加された機能で、App Router（app ディレクトリ）において使用できます。Intercepting routes ではブラウザの URL を遷移先のものに上書きしつつ、現在のレイアウトに新しいページを表示できます。これは例えば Instagram のように、ユーザーのプロフィールから写真をクリックすると、写真をモーダルを開き、ページを更新したり共通したりするとデフォルトのレイアウトで表示する場合などに便利です。

azukiazusa のテックブログ2

Cloudflare Workers のためのフルスタックツールキット Superflare を試してみた

Superflare は Cloudflare Workers 用のフルスタックツールキットです。D1 Database 向けの ORM や R2 Storage 向けのユーティリティなどの機能を提供しています。Superflare 自体はフレームワークを謳っておりません。実際に、Superflare は Remix、Next.js、Nuxt.js などのフレームワークと組み合わせることで効果を発揮します。

azukiazusa のテックブログ2

HTML の仕様に search 要素が追加された

HTML Standardに新しい``要素が追加された。これまで、ARIAには``に相当するHTML要素がなかったため、` `しか代替要素がなかった。新たに``要素を使用することにより、WAI-ARIA を使用せずともsearchランドマークを定義できるようになった。通常、``要素は少なくとも1つの入力要素を含んでおり、検索を開始するためのボタンもあることが期待されている。

blog.jxck.io

OpenAI API を用いた文書校正(誤字脱字検出)

OpenAI の API を用いて、長年の課題だった文書校正を VSCode 上で実現するプラグインを修作したところ、思った以上の成果だった。

azukiazusa のテックブログ2

ChatGPT3 で出力の形式を固定したい場合には例を提示してあげるとよさそう

ChatGPT は毎回異なる出力を返すことがあるため、APIやアプリ開発にとって不都合が生じる。そこで、出力の例を提示することで固定した形式の回答を得やすくすることができる。提示するためのプロンプトは区切り文字を使用して区切ることが推奨され、回答は通常、「例」に基づいた形式で得られる。

azukiazusa のテックブログ2

TypeScript で網羅性をチェックする

パターンマッチを備えている言語では、コンパイル時に網羅性が検査され、網羅的でない場合にはコンパイルエラーとなります。例えば Rust では match 式は網羅性を検査します。列挙型が取りうる値をすべて網羅していない場合にはコンパイルエラーとなります。TypeScript にはパターンマッチがないため、網羅性の検査は行われません。ですが、TypeScript では `never` 型を利用することで網羅性の検査を行うことができます。

azukiazusa のテックブログ2

SvelteKit で環境変数を使う

SvelteKit プロジェクトは Vite を使用しているので、`import.meta.env` から環境変数を参照できます。単に環境変数を参照するだけならば十分です。ですが SvelteKit により提供されている環境変数の仕組みを使用すると、型安全に環境変数を参照できる、公開してはいけない値をクライアントから参照できなくなるなどのメリットを得られます。

blog.jxck.io

誇りを被った仕様の針に意図を通す

Interop 2022 の目覚ましい成果の一つとして :has() の存在がある。これまでの CSS の限界を突破する、革新的な仕様であり、多くの開発者が期待を寄せる機能の一つだろう。こうした仕様策定の裏には、必ずと言って良いほど互換性の問題がつきまとい、時にそれはそこまでの作業の蓄積を無に帰すレベルで影響を与える場合がある。一方それらは Web 開発者が使う時点では解決されており、基本的に気にされることはない。だからといって、気にする必要がないわけではない。ということを象徴する事件が、今回も裏で起こっていた。

azukiazusa のテックブログ2

React は javascript スキームを使った XSS を防ぐことができない

React を使用していた場合に引き起こす可能性がある XSS 脆弱性の例として、javascript スキームを使った XSS があります。この記事では、javascript スキームを使った XSS についての説明とその対策について紹介します。

azukiazusa のテックブログ2

Web アプリケーションエンジニアのためのウェブアクセシビリティの基礎

ウェブアプリケーションエンジニアを対象に、アクセシビリティの対応について解説した記事。アクセシビリティを向上させるためには、正しいHTMLの書き方が必要である。HTML要素には、アクセシビリティに関する機能が元々備わっているため、適切なHTMLを選択し使用することが大切だ。複雑なUIの場合はWAI-ARIAを使用し、ARIA Authoring Practices Guideに基づき適切に実装する必要がある。UIライブラリ選びの際には、WAI-ARIAに従った実装を行っているかが基準の1つとなる。

azukiazusa のテックブログ2

TypeScript + ESModules の開発環境をシュッと作る

ほぼ設定なしで TypeScript + ESModules の開発環境をシュッと作る時のレシピです。

azukiazusa のテックブログ2

React Hook Form で Zod を使う時の 5 つパターン

React Hook Form で Zod を使用する時によくあるバリデーションのパターンを 5 つ紹介します

azukiazusa のテックブログ2

SvelteKit でページ遷移時のプログレスバーを表示する

SPA で画面遷移をする場合、MPA の場合と違い、ブラウザがローディングの表示を行ってくれません。リンクをクリックしてから画面遷移が完了するまで何も表示されないので、ユーザーからすると何も反応していないように感じてしまいます。 SPA で画面遷移した時にプログレスバーを表示したい場合には NProgress が最適です。コンパクトな JavaScript ライブラリでフレームワークを選ばず利用できます。この記事では SvelteKit で NProgress を使用する方法を紹介します。

azukiazusa のテックブログ2

アクセシビリティに考慮したツールチップを実装する

ツールチップとは、ある要素に対する補足情報を与える UI です。通常ある要素に対してマウスホバーまたはキーボードでフォーカスした時少しのディレイの後に、ユーザーの操作によらず自動的にポップアップして表示されます。このポップアップはユーザーの操作をブロッキングするものではありません。ユーザーがマウスのホバー外すかフォーカスが外れた場合にツールチップは非表示となります。

stin's Blog

個人ブログから Chakra UI を剥がして vanilla-extract を入れた(剥がした理由編)

すてぃんのブログから Chakra UI を剥がして vanilla-extract を導入しました。見た目はほとんど変わっていませんが、Chakra UI でスタイリングされていたものをすべて vanilla-extract で 1 から作り直しました。 ライブラリの変更理由は以下の通り。 最近 vanilla-ex...

azukiazusa のテックブログ2

focus() メソッドで CSS の :focus-visible 擬似クラスが適用されるかどうかは最後の操作によって異なる

:focus-visible 擬似クラスはユーザーの入力方法によって異なるフォーカス表示をしたい時に便利です。この擬似クラスはキーボード操作によりフォーカスされた場合に適用されますが、マウス操作によりフォーカスした場合には適用されません。 それでは、JavaScript の focus()メソッドによりフォーカスされた場合には、`:focus-visible` 擬似クラスは適用されるのでしょうか？実はこれは最後 `focus()` メソッドが呼ばれる前に要素にフォーカスがあったかどうかにより異なります。

azukiazusa のテックブログ2

テストコード内では条件分岐を書かないようにする

誰でも読める愚直なコードであることの 1 つの目安として、テストコードの中に if 文や三項演算子などの条件分岐が入り込んでいていないことが上げられます。if 文が存在するコードはアンチパターンであるといえます。実際に if 文がテストコードの中に入り込んだ例を見てみましょう。

azukiazusa のテックブログ2

無効にしたボタンにフォーカスさせたいときには aria-disabled を使う

例えばフォームの項目になにか入力されるまで、送信ボタンを無効にしたい状況があるかと思います。このような場合には `` に `disabled` 属性を与えることでフォームの送信を無効にできます。`disabled` 属性はデフォルトでコントロールを無効にする一般的に期待されるすべての機能を提供するため、多くの場合はこの属性を使用するべきです。しかし `disabled` 属性には 1 つ問題点が存在します。それは Tab キーによるフォーカスができなくなるという点です。

azukiazusa のテックブログ2

単体テストの単位はコードではなく振る舞いである

単体テストの目的は、ソフトウェア開発プロジェクトを持続可能なものにすることです。この目的を達成するための単体テストの機能の 1 つにリファクタリングに対する耐性が上げられます。これは内部のコードを変更した前後でも、外部の振る舞いから見た振る舞いが壊れていないことを保証してくれる度合いです。この耐性が高ければ、開発者は安全にコードを変更できます。 この記事では、単体テストをコード単位で書いた場合と振る舞い単位で書いた場合をそれぞれ提示して、リファクタリングに対する耐性がどのように異なるのかを見ていきます。

blog.jxck.io

次世代 CSS 仕様が与えるコンポーネント時代の Web への影響

SPA の隆盛で進化したフロントエンドライブラリによって生み出された「コンポーネント」という資産は、それを View 層の最小単位として扱うエコシステムにその重心をずらした。近年の Web 開発は、虫食いのテンプレートエンジンにデータをはめ込む方式から、デザインシステムにカタログされたコンポーネント群に、API から取得したステートを流し込み、それらを「いつ、どこで、どう」レンダリングするかという課題への最適解を、各位が模索するフェーズとなっている。コンポーネントを敷き詰めるコンテナ側の設計は、Flexbox および Grid の登場によるレイアウトの進化が手助けしたところも大いにある。しかし、「ページ」を前提に設計された CSS は、「コンポーネント」を前提にした設計に移行するうえで、ミッシングピースが多かった。現在、提案/実装が進んでいる CSS の新機能群には、この「コンポーネントベースの Web 開発」に大いに影響を与えるポテンシャルを持つものが多い。今回は、2023 年の予習として、それらの仕様を「開発スタイルに与えうる影響」の側面から俯瞰し妄想したものをメモに残す。

stin's Blog

2022 年振り返りを書き散らし

Hello! Project Year-End Party 2022 〜GOOD BYE & HELLO ! 〜参戦帰りの電車内で暇だったので書き散らす。 生活スタイル 2022 年の前半はアパートの隣の部屋の物音が気になりすぎてメンタルを壊しかけた。自分が過敏なだけかもしれないとメンタルクリニック的なところにも行くか...

blog.jxck.io

2022 年を振り返る

例年通り 2022 年を振り返る。

azukiazusa のテックブログ2

今すぐできる Web アクセシビリティ改善

アクセシビリティの対応は、要件定義段階から設計したりなど大変そうなイメージはあります。実際に本格的に対応するにはどの達成基準を目標にするか決めたり、入念なテストが必要になるなど確かに一朝一夕で対応できるわけではないでしょう。 ですが、完璧な対応を目指すのではなく、少しづづ改善できるところから進めることこともできます。実際にやってみると、簡単な HTML や CSS のコードの修正でもよい改善を得られたりします。 この記事では比較的低コストで実践入門できるアクセシビリティの改善を紹介します。

azukiazusa のテックブログ2

Web フロントエンドの実装において本来の機能を損なってはいけない

データの取得・ルーティング・フォームの値の管理に至るまで JavaScript で制御するようになった結果、本来備わっていた機能を損なう形で実装されるような間違いが起きるケースも発生してしまいました。見た目上操作に不都合がないのですが、修飾キーが有効でなかったりと、とある要素が当然に持っているべき機能が失われていることがよくあります。

azukiazusa のテックブログ2

Satori + SvelteKit で OGP 画像を自動生成する

Satori とは Vercel が公開している OGP 画像生成ライブラリです。OGP 画像を表示したい場合、記事ごとに対応する OGP 画像が必要になるわけで、新しい記事を投稿するたびに新たな画像を生成しなければいけません。都度画像を生成する手間は取れないわけで、このOGP 画像を生成する工程を自動化する仕組みが必要となります。Satori は記事のタイトルなどをもとに動的 OGP 画像を生成するユースケースのために使用できます。

azukiazusa のテックブログ2

TailwindCSS のダークモードでページ読み込み時に一瞬ライトモードで表示されてしまうときの対応法

ユーザーの OS の設定や LocalStorage の値をもとにダークモードかどうか判定する場合、コンテンツが読み込まれる前にスクリプトの実行が完了している必要があります。

azukiazusa のテックブログ2

Pa11y CI でアクセシビリティテストを GitHub Actions で実行する

Pa11y とは Web Content Accessibility Guidelines (WCAG) をベースに HTML のアクセシビリティを検査するツールです。適合レベル AA を対象にテストします。Pa11y にはいくつかの種類がありますが、その中でも Pa11y CI は CI 上で実行することにフォーカスしています。

azukiazusa のテックブログ2

モノレポで GitHub Actions の jest coverage report を動かす

jest coverage reportは GitHuba Actions のワークフローの1つで Jest で実行したテストのコードカバレッジをプルリクエスト上にコメントしてくれます。 この記事では yarn workspaces 使用して作成したモノレポ構築のレポジトリで jest coverage report を動かしてみます。

azukiazusa のテックブログ2

TypeScript 4.9 で in 演算子による型の絞り込みが改善された

TypeScript において `in` 演算子を `unknown` 型に対して使用した際の挙動が改善されました。

azukiazusa のテックブログ2

React Router の defer で重要なデータを先に描画する

あるページの中で重要ではない付随的なデータの取得を待たずに、重要なデータの取得が完了したタイミングでページを表示させたい場合があります。例えば、ブログの記事のページを遷移する場合、ユーザーにとって記事のコンテンツは重要なデータですが、それに付随するコメントやいいねの数はそれほど重要ではないので、それらのデータの取得を待つ必要がありません。 この記事では React Router の loaderを使用して重要なデータの完了のみを待機する方法を試してみます。

azukiazusa のテックブログ2

【React】アクセシビリティに考慮したタブを実装する

タブとは、ページ内でコンテンツを切り替えるために使用する UI です。タブ初期表示ではいずれか一つのタブパネルが表示されており、関連するタブがアクティブなスタイルで表示されます。それぞれのタブには関連するタブパネルがあり、タブを選択することで表示されるタブパネルがタブに関連するものに切り替わります。

azukiazusa のテックブログ2

【React】アクセシビリティに考慮したアコーディオンを実装する

アコーディオンは見出しであるヘッダーとコンテンツであるパネルから構成された UI が垂直に積み重ねられたセットです。ユーザーはヘッダーをクリックすることで、ヘッダーに関連付けられたパネルの表示・非表示を切り替えることができます。 アコーディオンは1つのページ内で複数のセクションのコンテンツを表示する際に、スクロールを減らすためによく　使用されます。例えば、「よくある質問」のようなページで使われていることを見たことがあるかと思います

blog.jxck.io

CORB から ORB へ

CORB (Cross Origin Read Blocking) が Fetch の仕様から消え、後継の ORB (Opaque Response Blocking) が策定作業中である。ここでどのような変更が起こっているのかを調査し、記録する。

azukiazusa のテックブログ2

【React】アクセシビリティに考慮したリストボックスを実装する

リストボックスにアクセシビリティ上求められる要件を確認した後に、React で実際に要件に従った実装をおこないます。

azukiazusa のテックブログ2

Qwik City でブログアプリを作る

Qwik City は Qwik のメタフレームワークです。React における Next.js、Vue.js における Nuxt.js のような関係と同等です。

stin's Blog

@vercel/og を使ってブログに動的 og:image 生成を実装した

Vercel で og:image の動的生成するなら一択 先日 Vercel から HTML\&CSS で画像を生成できるライブラリ @vercel/og が発表されました。 https://vercel.com/blog/introducing-vercel-og-image-generation-fast-dyn...

stin's Blog

Firebase Auth, Firestore, Functions for Firebase でサクッと管理者権限を割り振る

Firebase のユーザーに個別に権限を割り振りたい要件は多そう。すでに似たような記事はたくさんありますが、自分も実装方法を調べたので文章にしておきます。 実装イメージ Firebase Auth のカスタムクレームを使用します。Firebase ユーザーオブジェクトに独自のプロパティを生やすことができる機能です。 ...

azukiazusa のテックブログ2

イベントのバブリングは DOM ツリーではなく React ツリーに従う

イベントのバブリングとは、ある要素で発生したイベントがその親要素まで伝播することです。React でポータルを使用した場合、DOM ツリー状親子関係でなかったとしても、React ツリー上親子関係であればイベントがバブリングされます。

azukiazusa のテックブログ2

【React】state のリフトダウンパターン

React において不要な再レンダリングを避けるためのいくつかのパターンを紹介します

blog.jxck.io

XMLHttpRequest とはなんだったのか

Fetch API の実装が広まり、IE もリタイアを迎えたことで、今後忘れ去られていくことになるだろう XMLHttpRequest について。どのように始まり、どのように広まり、どのように使われなくなっていくのか。その間に残した多大な功績を残す。

azukiazusa のテックブログ2

Jest で beforeunload イベントをテストする

beforeunload イベントをテストする方法を紹介します

azukiazusa のテックブログ2

CSS 擬似クラス「:focus-within」

:focus-within は CSS の擬似クラスであり、その要素または子孫要素にフォーカスがある場合に一致します。

azukiazusa のテックブログ2

アクセシブルなダイアログに必要なこと

ダイアログをアクセシビルに実装するための要件を確認しましょう。

azukiazusa のテックブログ2

Sanitizer API で HTML を安全に使用する

ユーザーが入力した情報をそのまま表示するとクロスサイトスクリプティング（XSS）脆弱性につながる問題があることはよく知られています文字列の無害化はこのようにライブラリの実装に頼っている状況でしたが、WING により Sanitizer API という仕様が策定されました。Sanitizer API により外部ライブラリの依存無しで XSS の対策が可能となります。

azukiazusa のテックブログ2

Hono + Cloudflare Workers で REST API を作ってみよう

Hono は TypeScript/JavaScript のシンプルな Web フレームワークです。Hono という名前は日本語の「炎」に由来します。 Hono の特徴としては以下の点が挙げられています。 - ウルトラファスト - 依存関係なし - ミドルウェア - TypeScript - マルチプラットフォーム

blog.jxck.io

HPKE とは何か

HPKE (Hybrid Public Key Encryption) が RFC 9180 として公開された。RFC 9180: Hybrid Public Key Encryptionhttps://www.rfc-editor.org/rfc/rfc9180.htmlHPKE は、公開鍵暗号方式と共通鍵暗号方式を組み合わせて(ハイブリッド)任意の平文を暗号化するための、汎用的な枠組みとして標準化されている。この仕様は、多くのユースケースが想定されており、RFC になる前から ECH (Encrypted Client Hello), MLS (Message Layer Security), OHTTP (Oblivious HTTP) など、さまざまな仕様から採用を検討されている。本サイトで書く予定の他の記事でも HPKE は頻出する予定であり、今後より多くの場面でこの仕様を見ることになると思われるため、一度この仕様の概観について解説する。(筆者は暗号の専門家ではないため、解釈や語彙使用の間違いがあるかもしれない。)

azukiazusa のテックブログ2

Fetch Upload Streaming でチャットアプリを作ってみる

Fetch Upload Streaming とは、ブラウザの JavaScript の POST リクエストで HTTP のストリーミングを行える機能です。より具体的には、Fetch API の `body` に ReadableStream を渡せるようになります。

azukiazusa のテックブログ2

AngularJS のチュートリアルを React にリプレイスしてみた③

それではいよいよ、AnguarJS のルーティングモジュールである `ngRoute` を置き換えましょう。この置き換えが完了したら AngularJS を完全に取り除くことができます。

azukiazusa のテックブログ2

AngularJS のチュートリアルを React にリプレイスしてみた②

AngularJS のチュートリアルを React にリプレイスします。今回の記事では AngularJS のコンポーネントをすべてリプレイスして、angular-resorce の代わりに API クライアントを実装します。

azukiazusa のテックブログ2

AngularJS のチュートリアルを React にリプレイスしてみた①

AngularJS のチュートリアルを React にリプレイスします。

azukiazusa のテックブログ2

pnpm は npm と何が違うのか

pnpm は npm、yarn と並ぶ JavaScript のパッケージマネージャーです。pnpm と言う名前は「performant npm」に由来します。

azukiazusa のテックブログ2

MSW の実践活用例

msw の実践で活用する例を紹介します

stin's Blog

React + TypeScript 用の eslint セットアップメモ書き

Vite で立ち上げた React + TypeScript プロジェクトには eslint のセットアップはされていない。プライベートでちょっとライブラリを試すみたいなケースでしか Vite を使っていなかったので eslint なしで作業していたが、やっぱり useEffect の依存配列の渡し漏れをして混乱するこ...

azukiazusa のテックブログ2

Volar で Vuetify2.x の補完を効かせる

Volar + Vuetify 2.x を利用する場合、型定義ファイルを作成してグローバルコンポーネントを定義する必要があります。

azukiazusa のテックブログ2

【TypeScript】Zod でスキーマ宣言とバリデーションを実施する

[Zod](https://github.com/colinhacks/zod) は TypeScript first でスキーマ宣言とバリデーションを実施するためのライブラリです。 一度バリデータを宣言すれば、Zod が自動的に TypeScript の型を推論してくれるという特徴があります。このおかげで重複した型宣言を排除できます。 また、Zod はエコシステムも多く存在しており、OpenApi、Nest.js、Prisma、react-hook-form などと組み合わせて使うことができます。

azukiazusa のテックブログ2

おまえら禁じられたインデックスアクセスを平気で使ってんじゃねえか！わかってんのか？『ランタイムエラー』が生まれたのは人間がコンパイラオプションに甘えたせいだろうがよ！

TypeScript 4.1 から noUncheckedIndexedAccess オプションが追加されました。このオプションは上記のような配列のアクセスやオブジェクトのプロパティのアクセスをより厳密にします。 具体的には、配列に対するインデックスアクセスやインデックスシグネチャを通じたプロパティのアクセスは常に `undefined` とのユニオン型となります。

stin's Blog

React でキーボードショートカットを設定するためのカスタムフックを実装する

以前、『ポケットモンスターダイヤモンド・パール』の BGM をループ再生できる Web サイトを作成しました。 https://dp-soundlibrary.stin.ink/ この Web サイトの実装については過去に Zenn に投稿しているのでそちらも御覧ください。 https://zenn.dev/stin/...

azukiazusa のテックブログ2

Deno Web フレームワーク Fresh チュートリアル

Fresh は Deno 製の Web フレームワークです。事前のビルドを必要せず、エッジでレンダリングを提供するという特徴があります。また、Islands Architecture を採用しており、デフォルトではクライアントに JavaScript が配信されることがありません。

blog.jxck.io

HTTP 関連 RFC が大量に出た話と 3 行まとめ

2022/06/06 ~ 9 あたりに、長きに渡って策定作業が行われていた HTTP 関連の RFC が大量に公開された。RFC 9110: HTTP SemanticsRFC 9111: HTTP CachingRFC 9112: HTTP/1.1RFC 9113: HTTP/2RFC 9114: HTTP/3RFC 9163: Expect-CT Extension for HTTPRFC 9204: QPACK: Field Compression for HTTP/3RFC 9205: Building Protocols with HTTPRFC 9209: The Proxy-Status HTTP Response Header FieldRFC 9211: The Cache-Status HTTP Response Header FieldRFC 9213: Targeted HTTP Cache ControlRFC 9218: Extensible Prioritization Scheme for HTTPRFC 9220: Bootstrapping WebSockets with HTTP/3RFC 9230: Oblivious DNS over HTTPSいったい何が起こっているのか、それぞれの経緯と開発者が知っておいた方がいいこと、そうでもないことを解説する。

stin's Blog

WebSocket を使ってみたくて簡単なチャットアプリを作って Google Cloud Run にデプロイしてみる

WebSocket でリアルタイム通信したいんじゃ WebSocket 通信を使ってみたいので調べた学習ノート。Node.js 用ライブラリの ws を使わずに WebSocket サーバー実装とかできたらかっこいいけどとりあえずライブラリに甘えます。 ws による最小構成 サーバーを起動する最小構成。 このコードをコ...

azukiazusa のテックブログ2

Atomic CSS エンジン - UnoCSS

UnoCSS はフレームワークではなく、Atomic CSS エンジンです。全ては柔軟性とパフォーマンスを考慮して設計されています。UnoCSS にはコアユーティリティはなく、すべての機能はプリセットで提供されます。

azukiazusa のテックブログ2

Vue 向けの Vite 製の UI コンポーネントカタログツール Histoire

Histoireはフランス語で「Story」という意味の単語であり、Storybook のように UI コンポーネントのカタログを作成するツールです。Vite にネイティブ対応、Vue の SFC 形式で Story を書けるといった特徴があります。

blog.jxck.io

JavaScript のメディアタイプと RFC 9239

長いこと作業が行われていた JavaScript の MIME タイプについての作業が完了し、RFC 9239 として公開された。これにより、推奨される MIME タイプが text/javascript に統一されることになった。かつて推奨されていた application/javascript ではなくなった経緯などを踏まえ、解説する。

azukiazusa のテックブログ2

Jest Preview がけっこーすごい

Jest Preview とは Jest で実行中のテストに debug() 関数を仕込むことで、実行中のテストが作成した HTML をブラウザでプレビューしながらデバッグできるライブラリです。

azukiazusa のテックブログ2

Playwright でコンポーネントテスト

Playwright は E2E テストのための Node.js フレームワークです。v1.22.0 から React,Vue.js,Svelte のコンポーネントに対してテストを実行できるようになりました。つまりもともと備えていた E2E レベルのテストに加えて、結合レベルのテストまでカバーできるようになったということです。

stin's Blog

Google AdSense を Next.js 製ブログに入れるのに一手間かかる話

ブログに広告を入れてみたので許してください ブログにちょっとでも広告収入あると嬉しいなと思っていたものの、Adsense は審査が厳しいと聞いていたので手を出していませんでした。でもふとダメ元で申請してみたらなんと承認されて広告を貼り付けられるようになったので導入しました。煩わしく感じない程度の広告数にしておくのでどう...

azukiazusa のテックブログ2

Tailwind CSS ベースの UI フレームワークという選択肢

この記事を読んでいるみなさんも、Vuetify や MUI のような UI フレームワークを使用したことがあるでしょう。これらの UI フレームワークは Web アプリケーションでよく使われる UI パーツを非常に高機能で提供しており、多大な工数の削減に貢献しています。 その一方で、細かなスタイルの調整に手間取り余分に時間を取られ苦労を経験している方も多いのではないでしょうか？

stin's Blog

見た目が同じなだけのコンポーネントを共通化すべきでない

WET is better than DRY https://twitter.com/stin\_factory/status/1522521205080989696 こんなツイートをしたらちょっと反響がありました。 大した事ないツイートがプチバズりしているの不思議 ではありますが、みんな似た経験をしているのでしょう。...

stin's Blog

『プロを目指す人のためのTypeScript入門』読書感想文

https://twitter.com/stin\_factory/status/1520251902877118464?s=20\&t=ObJNlQRqSKg5E02UCk5xOw 尊敬する TypeScript の師匠(勝手に思ってるだけ)である uhyo さんが書いた『プロを目指す人のための TypeScript...

azukiazusa のテックブログ2

Node.js の標準 API にテストランナーが追加された

JavaScript のテストランナーといえば、Jest　がデファクトスタンダードと言えるでしょう。最近は Vitest と呼ばれる新たなテストランナーも登場していますが、しばらくは Jest が使われ続けられることでしょう。 そんな中、Node.js 18 から標準 API としてテストランナーが組み込まれました。まだ実験的な機能ではありますが、サードパーティのライブラリを使用せずに扱えることもあって注目を集めています。

azukiazusa のテックブログ2

Rust の魅力に感じた点

最近は [Rust](https://www.rust-lang.org/) と呼ばれるプログラミング言語を趣味として触っています。[SWC](https://swc.rs/) や [Rome](https://rome.tools/) のように Rust で作成されたフロントエンドツールが増えていることから興味を持ったのですが、実際に触ってみて Rust が高い人気を誇る理由がよく分かるようになりました。 この記事では私が Rust を触ってみて魅力に感じた点を列挙していきます。

stin's Blog

HTML 解体新書 読書感想文

https://twitter.com/stin\_factory/status/1516718102813511680 https://www.borndigital.co.jp/book/25999.html Amazon で予約開始してすぐに予約していたものが先日届いて 1 周読み切ったので読書感想文的なものを書...

azukiazusa のテックブログ2

markuplint で構文チェックを始めよう

HTML の構文チェックを実施するには適切なツールを導入するのがよいでしょう。この記事では markuplint と呼ばれる HTML の静的解析ツールを紹介します。markuplint は JSX(React),Vue,Svlete のようなテンプレートエンジンにも対応しています。

blog.jxck.io

Navigation API による「JS での画面遷移」と SPA の改善

従来の History API を改善する Navigation API の仕様策定と実装が進んでいる。これは、History API の使いにくかった部分を補うだけではなく、「JS で画面遷移をする」という現状のミッシングピースに取り組み、SPA が抱える多くの問題だけでなく MPA すら改善する可能性がある。この API の目的と仕様を解説しつつ、実装のメモを残す。

azukiazusa のテックブログ2

Node.js のバージョン管理には Volta がよい

皆さん Node.js のバージョン管理ツールには何を使っておりますでしょうか？上記の中でも私がオススメするのは [volta](https://volta.sh/) です。volta は 1.0 がリリースされたのが2020年12月と比較的新しいツールです。

azukiazusa のテックブログ2

npm workspace で始めるモノレポ生活

workspace は複数のパッケージ（`package.json`）をレポジトリを管理するために使用されます。このようなレポジトリは**モノレポ**として知られています。

stin's Blog

Next.js ～RSS フィードの実装方法探訪記、或いは、 getServerSideProps での res.end() の考察について～

この個人ブログに RSS フィード機能を実装しました。 RSS フィードとはブログの記事のタイトルや公開日などの情報を XML 形式で配信するものです。 実装方法自体はググって出てきた記事を参考に行いましたが、その中で一つ疑問があったので調べてみました。 参考記事 https://zenn.dev/catnose99/...

azukiazusa のテックブログ2

君は return と await return の違いを理解して使っているか

`Promise` を返す非同期関数を扱う時 `Promise` をそのまま返す書き方と `Promise` を `await` してから返す二通りの方法があります。これらは一見同じように動作するように見えますが異なる点が存在します。

stin's Blog

ブログに next-seo を導入した

適当にやってた meta タグ設定をちゃんとしました Next.js のプロジェクトの meta タグ類を設定してくれるライブラリ next-seo をインストールしました。 今まで適当に meta タグをセットしていて、特に OGP 系は必須プロパティとかも入れずにやっていましたが、今回 next-seo を導入する...

stin's Blog

Twitter シェアボタン React 作り方

Twitter のシェアボタンをブログに設置しました 記事ページの下部に Twitter のシェアボタンと Buy me a coffee のリンクを設置しました！ Twitter のシェアボタンを作るに当たって考えたことを書いていきます。 コード https://github.com/y-hiraoka/stin-b...

azukiazusa のテックブログ2

import type { ... } from "./module" とは何者何か

TypeScript のプロジェクトにおいて `import type { ... } from "./module"` という記述を見たことはないでしょうか？ これは Type-Only imports and export と呼ばれる機能で TypeScript3.8 より導入されました。これは名前の通りモジュールから型情報のみをインポートするために使用されます。これは通常の利用用途ではあまり考慮する必要はないのですが、特定の問題に立ち向かうために利用されることがあります。

stin's Blog

Twitter ツイート埋め込み機能完全に理解した

Tweet URL を Tweet 埋め込みに変換して表示するように実装しました Tweet の URL だけを Markdown に記述すると ↓ Tweet 埋め込みの iframe が展開されるようにブログを実装しました！↓ https://twitter.com/jack/status/20 この記事では Tw...

stin's Blog

ブログをフルリニューアルした！

すてぃんブログレボリューション 21 (updated) このブログサイトをフルリニューアルしました！(5 記事しか書いていなかったのにもうリニューアルとかｗｗというのはそれはそう) 今回はこのリニューアルについて、こだわりポイントと技術的な内容の 2 つを書こうと思います。 こだわりポイント Web デザイン リニュ...

azukiazusa のテックブログ2

anonymous default export はやめたほうがいいかもね

`anonymous default export` とは名前の通り匿名でデフォルトエクスポートを宣言することです。必ず名前を付与しなければいけない名前付きエクスポートと異なり、以下はすべて有効な構文です。

azukiazusa のテックブログ2

msw でリクエストを検証する方法

msw 使ってテストを記述した時期待したリクエストが送信されているのか検査したくなるかもしれません。リクエストを検証する方法と、それを回避する方法を紹介します。

blog.jxck.io

Markdown の Table 記法を CSS で実現する

本ブログは Markdown で原稿を書き、それを HTML に変換して表示している。このとき、CSS を用いて Markdown のシンタックスに似せた Style を適用している。例えば以下のように h2::before に content: '##' を指定するといった具合だ。しかし、これまで <table> だけはうまく Markdown 記法を再現する CSS が書けないでいた。そこで、周りの CSS 強者に実現できないか聞いてみたところ、@shqld, @araya, @yoshiko 達の協力を得て、かなりの完成度にすることができた。実現方法を記録する。

azukiazusa のテックブログ2

Storybook 単体でインタラクションテストを実施する

Storybook の Component Story Format 3.0 では新機能として play() 関数が追加されました。 `play()` 関数は Storybook 上で ユーザーのインタラクションな操作を表現することができます。 以前は composeStories() 関数により Storybook 上で作成したストーリーを Jest で再利用する方法を書いたのですが、どうやら Storybook のみで完結してテストを実行することができるようですのでこちらを試してみます。

azukiazusa のテックブログ2

Web フロントエンドエンジニアなら当然 Rust も書けますよね？？

本記事では Yew を利用して Web アプリケーションを作成してみたいと思います。Yew は React や Vue などと同じくコンポーネントベースのフレームワークでインタラクティブな UI を作成できます。

azukiazusa のテックブログ2

Q：v-for の key に 配列のインデックスを使うのは犯罪ですか？#Shorts

結論： - `v-for` ディレクティブに渡す配列要素が決して変わらないことがわかっているのであれば使っても良い。 - `id` 属性を持っているのであれば常に `id` 属性を `key` に使用するべき。

azukiazusa のテックブログ2

Q：TypeScript の関数の返り値の型を明示的に書かないのは犯罪ですか？#Shorts

TypeScript において関数の返り値の型は推論させることは可能ですが、これはコードベース全体に意図しない型の変更による影響が広がる可能性があります。

azukiazusa のテックブログ2

Node.js に fetch がやってきた

Node.js で fetch が使えるようになる

blog.jxck.io

サイトの HTTP3 化と DNS HTTPS RR および Alt-Svc Header によるアドバタイズ

本サイトを HTTP3 対応し、Alt-Svc ヘッダおよび DNS HTTPS Resource Record によってそれをアドバタイズする構成を適用した。色々ハマったので作業のログを記す。

azukiazusa のテックブログ2

アクセシビリティを自動で検査する仕組みを整える

様々な方法でアクセシビリティを自動で検査します

azukiazusa のテックブログ2

Storybook の interaction testing と jest を組み合わせる

Storybook の Component Story Format 3.0 では新機能として `play()` 関数が追加されました。 `play()` 関数は Storybook 上で ユーザーのクリックやフォーム入力のようなインタラクションな操作を表現することができます。 `play()` 関数の大きな特徴としては Component Story Format の移植性の高さを利用して Storybook 上で定義したインタラクションを `Jest` など他の領域においても再利用できることです。

azukiazusa のテックブログ2

Vite だと require() が使えないよ〜

皆様はすでにプロジェクトに Vite は導入されていらっしゃいますでしょうか？私はできていません。 Vite はフロントエンドのビルディングツールであり、従来の Webpack 等と比較して高速に動作するといった特徴があります。Vue.js を開発した Evan You 氏によって開発ツールではありますが Vue.js に限らず React や Svelte にも対応しています。

azukiazusa のテックブログ2

フロントエンドのテストのモックには msw を使うのが最近の流行りらしい

最近のテスト手法として API コールをモックする際に Jest ではなく [Mock Service Worker](https://mswjs.io/) (以下 `msw` ）を使用する手法が注目されています。実施にどのように使用されているのか見ていきましょう。

blog.jxck.io

画像最適化戦略 AVIF 編

本サイトの PNG/JPEG で提供している画像については、よりサイズが小さくなりやすい AVIF 形式を提供し、対応ブラウザに配信するようにした。フォーマットを出し分けるため、画像の指定は <picture> 要素を用いて対応した。画像最適化シリーズ第 6 回目のエントリである。画像最適化戦略 PNG/JPEG 編画像最適化戦略 Picture 編画像最適化戦略 WebP 編画像最適化戦略 SVG/Font 編画像最適化戦略 Lazy Loading 編> 画像最適化戦略 AVIF 編

azukiazusa のテックブログ2

【Vue.js】ref vs reactive

さて、そんな Compositon API ですがリアクティブなデータを定義する際に `reactive` と `ref` の2つの方法が用意されています。 `reactive` と `ref` どちらを使用するのがよいのか公式からも推奨する方法がありませんので、どちらを使用するべきか迷ってしまうところです。 `reactive` と `ref` のそれぞれのメリット・デメリットを確認してみましょう。

blog.jxck.io

2021 年をふりかえる

例年通り 2021 年を振り返る。

azukiazusa のテックブログ2

Vitest と呼ばれるテスティングフレームワークがめちゃくちゃ早いらしいな

Vitest は Vite ベースの JavaScript のテスティングフレームワークです。

azukiazusa のテックブログ2

Vuetify 3 Alpha の主な変更点

[Vuetify](https://vuetifyjs.com/) は Vue.js で多く使われている UI コンポーネントです。現在のバージョンは Vue 3 には対応していません。 現在 Vue 3 に対応する Alpha 版の Vuetify 3 が公開されています。開発スケジュールは以下のとおりになっています。

azukiazusa のテックブログ2

Nuxt3 の新しい機能いろいろ

現在 Nuxt.js は バージョン3がパブリックベータ版として提供されています。 Nuxt.js が 2 → 3 に移行するにあたってたくさんの新機能が追加されました。

blog.jxck.io

Web のセマンティクスにおける Push と Pull

筆者は、Web のセマンティクスに対する実装の方針として、大きく Push 型の実装 と Pull 型の実装 があると考えている。もっと言えば、それは実装方法という具体的な話よりも、開発者のセマンティクスに対する態度を表現することができる。この話は「Push よりも Pull が良い」などと簡単に切り分けられる話ではない。「自分は今 Push で実装しているのか、Pull で実装しているのか」この観点を意識するかしないかによって、セマンティクスに対する視野が広くなり、その応用として、たとえば今自分が行っている実装が、将来の Web においてどのような互換性の問題を生じるかなどを想像できるようになるだろう。最近問題になる Ossification を、こうした視点の欠如の結果とみることもできる。(本エントリでの Ossification は、一般に言われている Protocol Ossification よりも、もう少し広義に捉えていることに注意)抽象的な話が続くため、なるべく具体例を交えて解説を試みる。

azukiazusa のテックブログ2

CSS で印刷用のスタイルを設定できる

大抵のブラウザでは Web ページを印刷することができます。 しかし Web ページをそのまま印刷しようとすると改ページがおかしくなったりレイアウトがおかしくなってしまうことがあるでしょう。そもそも Web ページはディスプレイで表示することを目的としているので印刷には不向きなものです。 とはいえ Web ページを印刷したいというニーズは少なからずあるとは思います、そのようば場合には `@media print` などのような印刷用の CSS を利用することで見た目を整えることができます

blog.jxck.io

自作 Markdown プロセッサベースの blog.jxck.io v2 リリース

本サイトは自作の Markdown ビルダを使っていたが、色々と気に食わない部分があったのでフルスクラッチで作り直し、それにともなってサイトの刷新を実施した。必要だった要件や、意思決定を作業ログとして記す。

azukiazusa のテックブログ2

フォーカストラップとは? 〜アクセシブルなモーダル〜

フォーカストラップ(またはループ)とは、ウェブページをキーボードで操作する際にフォーカスをとある領域からはみ出さないようにすることです。フォーカス可能な要素を抽出してその中をループすることで実現ができます。 登場シーンとしてはモーダルで使われることが多いです。実際に例を交えて確認してみましょう。

azukiazusa のテックブログ2

Webpack5 Module Federation ではじめるマイクロフロントエンド

Webpack5 の Module Federation を使用してマイクロフロントエンドを作成します。

azukiazusa のテックブログ2

Youtube すごい裏ワザ！！！

Tab キーでページを操作した時のみ表示される「ナビゲーションをスキップ」は一般にスキップリンクと呼ばれるものであり、ウェブアクセシビリティのガイドライン (W3C 勧告) である WCAG 2.0にあるブロックスキップと呼ばれる達成基準を達成する方法として上げられています。

azukiazusa のテックブログ2

npm の人気パッケージ 「coa」と「rc」にマルウェアが埋め込まれた

2021/11/5 npm パッケージ 「coa」と「rc」がハイジャックされ、パスワードを盗むマルウェアが埋め込まれました。現在の時点では問題のあったバージョンはすべて取り除かれています。

azukiazusa のテックブログ2

ボックスモデル

CSS にはボックスという概念があります。ブラウザは文書をレイアウトする際に、それぞれの要素を CSS のボックスモデルに基づいた長方形の箱（ボックス）として表現します。つまりは、HTMLの個々の要素はすべてボックスにからできており、それらのボックスが組み合わさることによってページ全体が表現されます。 ボックスは CSS において最も基本的な概念であり、ボックスを理解することは CSS でレイアウトを構成したり要素同士を揃えるための手助けとなることでしょう。

azukiazusa のテックブログ2

【TypeScript】type-challenges 中級編

[type-challengs](https://github.com/type-challenges/type-challenges) の medium レベルをやります。

blog.jxck.io

ABNF Parser の実装

IETF の RFC では ABNF 形式の表現がよく使われ、たまに実装することがある。しかし、実装するたびに前のコードを引っ張り出して思い出す、を繰り返しているので、自分用にメモとしてやり方をまとめる。完全に我流であり、目的は「その ABNF が正しいかを確認すること」なので、高速化や効率性を求める実用実装とは目的が違う点は先に言っておく。

azukiazusa のテックブログ2

【TypeScript】type-challenges で学ぶ高度な型

type-challengesを知っていますか？ これは TypeScript の型についての問題集で、問題文の条件を満たす独自のユーティリティ型を作るチャレンジです。いわゆる「型パズル」ってやつですね。 問題の回答はPlayground上で行えるので実際に手を動かしながら問題を解くことができます。型パズルを通じてTypeScript の高度な型について学んでいきましょう。

stin's Blog

react-router の型定義が知らない間にきれいになっていたので使い方を再考する

@types/react-router v5.1.9 から型定義がきれいになっていた react-router の型定義は受け取るパスが全て文字列のため、以前は TS コンパイラでパスの間違いを検出できませんでした。 そのため僕は typed-path-builder というライブラリを作って次の記事を書きました。 h...

azukiazusa のテックブログ2

lodash-es lodash 違い

[lodash-es](https://www.npmjs.com/package/lodash-es) とは [lodash](https://lodash.com/) を `ES module` 形式で提供しているライブラリです。

stin's Blog

Immutable.js で React ステートのモデルクラスを作る

Immutable.js で React ステート用モデルクラスを作る 昨今の React は関数コンポーネント一辺倒になり、 React エンジニアがクラス定義する場面はかなり減ってきているんじゃないかと思います。 関数コンポーネント内部で取り回されるステートもクラスインスタンスではなくプレーンなオブジェクトで、それ...

azukiazusa のテックブログ2

Q: TypeScript を使っているのに関数の引数のオブジェクトや配列に `readonly` を付与しないのは犯罪ですか？ #Shorts

質問来てた👉 Q: TypeScript を使っているのに関数の引数のオブジェクトや配列に `readonly` を付与しないのは犯罪ですか？ 結論：犯罪になる場合がある。 まず、配列の引数に `readonly` を付与しておけば以下の利点を得られます。 - うっかり関数の内部で引数の値を変更してしまうコードを書いてしまったときにコンパイルエラーが得られる - 関数の利用者が安心して関数を呼び出せる

azukiazusa のテックブログ2

Vuex 5 でどのように変わるのか。

現在リリースされている最新のバージョンは Vuex 4 です。 これは Vuex 3 と互換性のあるバージョンで Vue 3 で使用するためのものであり、 Vuex 3 と同じ API となっています。 Vuex 5 は Vue 3 において　Composition API による Reactivity API が登場したことにより Reactivitty API によってどのように Vuex をどうさせるか再考されたバージョンとなっています。

azukiazusa のテックブログ2

【Vue.js】script setup 構文がすごくすごい

Vue.js 3.x から script setup 構文が使えるようになりました。これは単一ファイルコンポーネント(SFC)内で Composition API を使用している際に使える糖衣構文です。下記のようなメリットを得ることができ、公式からも使用が推奨されています。

blog.jxck.io

Private Relay と IP Blindness による Fingerprint 対策

iOS15 がリリースされたため、Private Relay のベータを試すことができた。このようなサービスが提供されるようになった背景を踏まえ、挙動を簡単に確認しつつ、解説する。

azukiazusa のテックブログ2

【Vue3.2】styleタグ内でJavaScript変数をバインドできる

Vue.js3.2からは、JavaScriptの変数をCSS変数としてバインドできるようになりました。 つまりは、CSSの値を動的に設定できるということです。 ものは試しのやってみましょう。

azukiazusa のテックブログ2

Vue2のプロジェクトをVue3へマイグレーションsする

Vue 3が正式リリースされてから約1年が経過しました。 Vuetifyのリリース目標である2021年Q3も近づく中でそろそろVue3へのアップデートを検討されている方もいらっしゃることでしょうか？ この記事ではVue 2からVue 3への移行手順を記述していきます。

azukiazusa のテックブログ2

【Vue.js】Mixinを使うのはもうやめよう

禁止まで言ってしまうとなんだか強い言葉のように聞こえてしまいますが、mixinは基本的にあまり良いアプローチとは考えられません。 実際に、Reactにも過去にはMixinが存在していましたが現在は廃止されています。

azukiazusa のテックブログ2

あの日見たaxiosの機能を僕達はまだ知らない。

axiosは、JavaScriptにおけるHTTPクライアントのデファクトスタンダードといえるでしょう。 Promiseベースで非同期通信を行えるHTTPクライアントとして、ブラウザ標準のfatchやjQuery.ajaxなどがありますが、特にaxiosがよく使われているのには豊富なオプションや設定に理由付けられるでしょう。 axiosの機能について私のように詳しくなくても直感的にHTTPリクエストを送れるのも良い点の1つですが、せっかくなのでaxiosでどのようなことができるのがを見ていきましょう。

azukiazusa のテックブログ2

VuetifyのテーマをCSS変数として使用する

VuetifyのテーマをCSSの変数として生成して使用します。

blog.jxck.io

mouseover 中に表示される DOM のデバッグ

先日、後輩が「mouseover 中にしか表示されない DOM のデバッグ」に手こずっていたのを見て、たまには小ネタもということで、いくつかのテクニックを紹介する。実際には、発生しているイベントを制御するというテクニックなので、応用すると色々使えるだろう。

azukiazusa のテックブログ2

青春JSDocはTypeScript先輩の夢を見ない

時には、TypeScriptという概念が存在しない退屈な世界で開発を行わなけらばならない状況はあるでしょう。私はもはやキーボードでタイピングすることすらままなりません。 そんなJavaScriptしか利用できない状況で代替手段となるのが、JSDocです。JSDocのアノテーションによって型を付与することによって最低限の支援を受けることができます。

azukiazusa のテックブログ2

【TypeScript】型定義をする際にもDRY原則を守る

DRY原則は非常に有名な原則ですし、普段から特に考えずとも自然と重複をさけるようなコードを書いている方も多いことでしょう。 とはいえ、TypeScriptにおいて`interface`や`type`などを用いて型定義を行う際に重複した型定義を行ってしまうことはないでしょうか？ TypeScriptには型定義をする際に重複を抑える手段は確かに存在します。そのようないくつかの方法を紹介します。

blog.jxck.io

Cross Origin iframe からの alert/confirm/prompt 呼び出しの無効化

直近で話題になっている Chrome の挙動変更についてまとめた。Reverse OT による延命はあるが、もともとが「セキュリティ的な理由でできなくする」のが目的のため、OT 期間中に修正が必要そうであることを先に述べておく。なお、これはあくまで筆者が調べた結果に基づいた見解であるため、該当する開発者は常に公式のアナウンスなどに注意し、最新の情報を踏まえて自身で判断すべきである。

azukiazusa のテックブログ2

Jest setTimeout()のようなでタイマー関数をテストする

JavaScriptには、setTimeout()のような時間に関する便利な機能が用意されています。しかし、これらの関数はユニットテストを記述する際に厄介です。Jestのタイマーモックはこのような場合に利用できる便利な機能です。

azukiazusa のテックブログ2

【TypeScript】型アノテーションと型アサーションの違い

型アノテーションと型アサーションによる変数宣言は、一見同じ結果をもたらすように見えます。しかし、型アサーションには明確な欠点が存在します。

azukiazusa のテックブログ2

【mongoose】日付のカラムで時間ごとにグループ化してドキュメント数をカウントする

タイトルのとおりです

azukiazusa のテックブログ2

【mongoose】Cannot overwrite 'Model' model once compiled. エラーの直し方

mongooseで遭遇するCannot overwrite 'Model' model once compiled. エラーの解消方法です

azukiazusa のテックブログ2

JSONオブジェクトのあれこれ

`JSON`オブジェクトはJavaScriptにおいて、JSONをパースしたり値をJSONに変換するためにもっぱら使われます。 普段使っている`JSON.stringify()`や`JSON.parse()`にはオプショナルな引数を渡すことによってその振る舞いを変更することができます。

azukiazusa のテックブログ2

【JavaScript】Objectがプリミティブに変換されるとき

JavaScriptがプリミティブな値に変換されるとき、string型に変換されようとするか、number型に変換されようとするかで挙動が変化する

blog.jxck.io

本サイトの AMP 提供の停止とここまでの振り返り

前回の記事で、奇遇にも本サイトの AMP 対応を落とすことになった。しかし、そうでなくても AMP をどこかでやめることは考えていたため、きっかけの一つが SXG 対応になったのは、順当な流れだと筆者は感じている。これは AMP がなぜ始まり、なぜトーンダウンしつつあるのか、そしてこれからどうなっていくのか、という流れをまとめるいい機会でもある。その過程で生み出され、本サイトでも検証を続けてきた Performance Timing API, Core Web Vitals, Signed HTTP Exchange 、そして今構想されている Bento AMP などを踏まえ、一連の流れを覚えている範囲で記録としてまとめておく。ソースは筆者の主観であり、眺めてきた体感を mozaic.fm の Monthly Web などで話してきたものがベースなので、信頼性や正確性は期待しないで欲しい。

azukiazusa のテックブログ2

ReactのErrorBoundaryで内部のエラーをキャッチする

Error Boundaryとは、自身の子コンポーネントツリーで発生したJavaScriptのエラーをキャッチ・記録しフォールバックのUIを表示するコンポーネントです。 例えるなら、`try/catch`構文を行うコンポーネントのようなものと言えます。

azukiazusa のテックブログ2

仕事で役に立つかもしれないHTML5のマイナー要素

HTMLは書いたことがありますか？プログラミング初心者が最初の一歩として書き出すのに好まれる言語ですが、セマンティクスを追求すると奥深い言語だとわかります。タグの種類も数多くあり、全てを把握している人はそう多くなないでしょう。 今回は、そんなHTMLの普段の仕事では余り見かけないであろう要素を紹介していきます。

azukiazusa のテックブログ2

Nuxt Sentryでユーザーフィードバックを受け取る

Sentryでは、エラーが発生した際に簡単にユーザーフォードバックを求めるダイアログを表示することができます。 Nuxt.jsでは、エラーが発生した際には`layouts/error.vue`へ遷移させることでエラーページを表示するので、このエラーコンポーネントにダイアログを表示させる処理を書いていきます。

azukiazusa のテックブログ2

Node.js(Express)でcsvを生成してダウンロード

Node.js(Express)でCSVファイルを生成してダウンロードさせます。

blog.jxck.io

Non AMP SXG による Prefetch 対応と AMP 提供の停止

本サイトを (Non AMP) SXG に対応した。これにより、Google のモバイル検索では、結果を表示した時点でこのサイトの SXG が Prefetch され、結果を選択したら Cache から素早く表示されつつ、アドレスバーにも本サイトのものとして表示される。この、Non AMP SXG 対応にあたって、本サイトの AMP の提供も停止することになった。移行の作業ログと、関連する流れについて記す。

azukiazusa のテックブログ2

CKADにも合格した

開発者向けのK8sの試験であるCKADにも合格したので同様に合格体験記を記載したいと思います。 といっても、大枠の部分はCKAのときとあまり変わらないのでCKAと異なる部分を中心に記載したいと思います。

azukiazusa のテックブログ2

Vue CLIで作成したプロジェクトをViteに置き換える

Viteは、一言でいうとフロントエンドのめっちゃ早いビルドツールです。Vue CLIで作成したプロジェクトをViteに置き換えるためにvue-cli-plugin-viteをというプラグインを使います。

blog.jxck.io

IE11 サポート終了の歴史

IE11 が役目を終えていく流れを記録として残す。特に MS からのアナウンスや、それに準じた各サービスの反応、特に IE サポート終了アナウンスをまとめることで、IE11 というブラウザがどのように終了していったのかを記録することを目的とする。もともとは Google Docs にまとめていたものである。日付はアナウンスの公開日サポート終了日ではないサポート終了日も書いておけばよかったけど今からやり直す気力はない、、赤字 は MS 関連もしくはサポート終了の影響が大きそうなアナウンスWindows における IE11 自体のサポート終了については以下を参照https://www.atmarkit.co.jp/ait/articles/1503/11/news134.htmlできればある程度の結論が出るまでこのエントリを更新していきたい

azukiazusa のテックブログ2

KubernetesのapiVersion

Kubernetesのマニフェストを作成するときには、`apiVersion`フィールドを指定する必要があります。 例えば`Pod`の場合には`v1`を、`Deployment`の場合には`apps/v1`を指定しますが、これらはどのようなルールで記述するのでしょうか。

azukiazusa のテックブログ2

etcdのバックアップとリストア

etcdは、kubernetesのクラスターの情報を保存するkey-valueストアです。

azukiazusa のテックブログ2

kubectl JSONpath

kubectlはアウトプットの形式としてJSONPathをサポートしています。

blog.jxck.io

Public Suffix List の用途と今起こっている問題について

Public Suffix List (PSL) は、現在の Web プラットフォームの一端を支えている非常に重要な要素だ。実はこれが、少数のボランティアにより GitHub でメンテナンスされた、単なるテキストリストであることは、あまり知られていないかもしれない。最近、このリストへの追加リクエストがあとを絶たず、問題になっている。そもそも PSL とは何であり、今どのような問題が起こっているのかについて解説する。

azukiazusa のテックブログ2

Vue.jsでIE11対応

人生でときにはIE11に対応させなければいけない時があるでしょう。Vue.jsでIE11に対応しなけらばいけなくなったときに読むものを記載しておきます。

azukiazusa のテックブログ2

e2eテスティングフレームワークCypress

Cypressは、JavaScript製のE2Eテスティングフレームワークです。 実行速度が早い、HTTPリクエストの実行を待つなどテストが壊れにくい仕組みが整っています

azukiazusa のテックブログ2

Kubernetes Tips

知っていると時間を短縮できるようなkubectlコマンドのtipsです。

azukiazusa のテックブログ2

Sassの基礎文法

SassはCSSのメタ言語です。CSSに比べてコード量が減り、保守性が優れるといった開発体験を向上させてくれる特徴があります。

azukiazusa のテックブログ2

Kustomizeとは

Kustomizeとは、Kuberbetsコミュニティのsig-cliが提供しているマニフェストのテンプレーティングツールです。環境ごとにマニフェストを生成したり特定のフィールドを上書きするといった機能が提供されています。

azukiazusa のテックブログ2

KubernetesのパッケージマネージャーHelm

Helmは、Kubernetsのパッケージマネージャーです。 例えば、npmを利用して第三者が作成したパッケージをレポジトリで管理して検索・インストールするように、Helmではチャート(Chart)と呼ばれる設定ファイルをレポジトリで管理しています。

azukiazusa のテックブログ2

Kubernetes用語集

仕事上kubernetesを学ぶ必要が出てきました。 筆者のレベルは、Docker・kubernetesの概念・必要性をやんわりと理解している状態です。 勉強をすすめる上で、わからない用語が次々と出てきたて頭の中がパンクしそうになったので、簡潔に随時まとめることとしました。

azukiazusa のテックブログ2

DenoでREST API

この記事では、Denoを使い簡単なCRUD操作を行うREST APIを構築します。

blog.jxck.io

Web Font のメトリクス上書きによる CLS の改善

WebFont を読み込む際に、取得完了までのラグを、システムが持つフォールバックフォントで代替する場合がある。このとき、フォールバックフォントと読み込んだ Web フォントで、高さに関する情報が異なる場合、Layout Shift が発生してしまう。これを防ぐ方法として、CSS からフォントメトリクスの上書きを行う仕様の提案が行われているため、本サイトへの適用を目指し検証を行った。なお、この仕様は Layout Shift ではなく、単純にテキストレイアウトスタイル用途での利用も考えられるが、そこはスコープ外としている。

stin's Blog

React Context を export するのはアンチパターンではないかと考える

Context を export するな みなさんは React Context を使っていますか？非常に便利ですよね。 え、使ってない？みんな React Context 使っとる。使ってへんのお前だけ。 冗談はさておき、この記事では Context を export するなという内容をお話しします。 React C...

azukiazusa のテックブログ2

TailwindCSSでダークモード

昨今のアプリケーションでは、ダークモードを提供しているのがもはや当たり前になってきました。 OSのレベルでダークモードを設定することができ、ダークモードが提供されていないサイトは眩しく感じしてしまって敬遠してしまうなんて経験はあるのではないでしょうか？ そんな一般化されたダークモードの提供をTailwind CSSで実装します。

azukiazusa のテックブログ2

はじめてのGraphQL

GraphQLとは、Facebookが開発したAPI向けのクエリ言語です。RESTに変わるサーバーとクライアントの通信手段として注目を集めています。 リクエスト・レスポンスの型の定義ができる、フロント側から取得するデータを選択することができるなどの特徴があります。 GraphQL自体はSQLのようなクエリ言語としての位置づけなので、Java、Node.js、Ruby、JavaScript、Pythonなど様々な言語で利用することができます。

azukiazusa のテックブログ2

Sapper + contentful + VercelのJamstackで高速なブログを構築する

JamstackのJamはJavaScript/APIs/Markupの頭文字です。 従来の手法と比較して、高速化・堅牢なセキュリティ。より簡単なスケーラブル・開発体験の向上という特徴を持っています。実行時にAPIから取得したデータを動的にレンダリングせずに、ビルド時にAPIから取得して静的なHTMLとして出力されます。

blog.jxck.io

Cache-Control: must-understand ディレクティブとは何か

IETF が策定する HTTP の仕様が更新されようとしている。ここには、Cache の仕様も含まれており、そのなかで must-understand という Cache-Control のディレクティブが追加されている。このディレクティブが追加された経緯と仕様について解説する。

azukiazusa のテックブログ2

【Svelte + TypeScript + tailwindcss】本検索サイト チュートリアル

この記事でははSvelte + TypeScript + tailwindcssで本検索サイトを作成します。 Svelteを使ってアプリケーションを作成1から作成することができます。 以下のことが学べます。 - Svelteの基礎文法 - Svelteのルーティング - Svelteのストア HTML・CSS・JavaScriptの基礎的な理解がある人が対象です。

stin's Blog

Fragment をコンポーネントのトップに置くのはアンチパターンではないかと考える

Fragment をコンポーネントのトップに置くな 「Fragment をコンポーネントにトップに置く」というのは下のようなコンポーネントを作成することを指します。 これは、この MyComponent が生成する HTML 要素が h1 と p のふたつあるということを意味します。 この書き方がアンチパターンではない...

azukiazusa のテックブログ2

Vue3 コンポーネントのテスト

コンポーネントのテストをするのフレームワークとしてJest、vue-test-utils 2を利用します。Vue2系をターゲットにしているvue-test-utils 1とは一部APIが異なります。

blog.jxck.io

Structured Field Values による Header Field の構造化

HTTP Header の値を構造化する Structured Field Values の仕様が RFC になった。RFC 8941: Structured Field Values for HTTPこの仕様の詳細について、筆者の実装を交えて解説する。

azukiazusa のテックブログ2

TailWindCSSとは

TailWindCSSはBootStrap・Materialize CSSなどに代表するCSSフレームワークの一つです。 その特徴として、**Utility First**を掲げています。

azukiazusa のテックブログ2

JavaScriptライブラリ Svelteとは

Svelteとは、ReactやVue.jsのような宣言的UIライブラリの一種です。その最大の特徴は、ReactやVue.js・Angularと異なりSvelteはコンパイラであることを謳っているところです。Svelteによってコンパイルされたコードは、すべてVanilla JS - ネイティブのJavaScript- にで生成されます。 そのため、コンパイル後のファイルサイズも小さくパフォーマンス上での利点が期待されています。

stin's Blog

個人ブログを作ったので初記事を書く

個人ブログを開発しました 「開発」という単語がふさわしいのか不明です。 開発 作成 制作 開発というと大げさな気がします。作成というと軽い気がする。 制作は工作とか美術っぽい。 CMS 使わずにフルスクラッチなので開発でいいでしょう。 stin's blog を支える技術 「〇〇を支える技術」っていう言い回しを使ってみ...

azukiazusa のテックブログ2

Firebase Functions https.onCall()トリガーでアプリから簡単に呼び出す

Firebase Functionsとは、Firebaseの提供するサーバレスフレームワークです。HTTPSリクエストによって関数を実行したり、FireStore・Cloud Storage・AuthenticationのCRUDイベントをトリガーに関数を実行することができます。使用できる言語はJavaScript・TypeScriptに限られているというデメリットはあるものの、手軽にデプロイでき簡単にプロジェクトの他のFirebaseの機能と統合できるメリットがあります。

blog.jxck.io

2020 年をふりかえる

例年通り 2020 年を振り返る。

blog.jxck.io

AMP SXG 対応

本サイトを AMP SXG に対応した。その作業ログを記す。

azukiazusa のテックブログ2

JavaScript テストフレームワークのJestのモックがすごくすごい

Jestは、JavaScriptのシンプルなテスティングフレームワークです。ゼロコンフィグを謳っており、細かい設定なしに動作させることが可能です。 Jestの中でも特に強力な機能がモッキングです。Jestのモックを利用すれば、外部ライブラリであろうとモジュール外のオブジェクトを簡単にモック化することができます。 実際に、テストコードの例を見ていきましょう。

azukiazusa のテックブログ2

Vue.js Composition APIでTODOアプリ作成

Vue3 Composition APIを使って、ハンズオン形式でTODOアプリを作成していきます。

azukiazusa のテックブログ2

イマドキのJavaScriptの書き方

JavaScriptはES2015以降から言語自体が大きく変化しました。 ES2015以降も、毎年JavaScriptはアップデートが行われており、最新の使用はES2020となっています。 このように、JavaScriptという言語は日々進化を遂げています。ES2015より前の書き方の多くが非推奨となっており、過去のWebや本の情報は現在ではあまり役に立たなくなっています。 そんなJavaScriptのイマドキの書き方を見ていきましょう。

blog.jxck.io

CSS Layout API で Masonry Layout

Pinterest でおなじみの Masonry Layout を CSS の標準にする作業と実装が進んでいる。以下のように画像を敷き詰めるタイルレイアウトのことを Masonry (石工やレンガ造りの意味らしい) Layout という。上の例の場合は、Height が不揃いの画像を並べる上で、左から敷き詰め、折り返したら既にある画像の高さに合わせて 2 列目が始まるというロジックになる。これを実現するには、割と複雑な CSS を書く必要があり、様々なサイトで CSS ライブラリや、Grid などを用いて再現する方法が紹介されている。これをそのまま CSS の標準にする作業が Layout API の文脈で行われており、既に一部が(主に Firefox で)実装されている。仕様は以下だ。CSS Grid Layout Module Level 3https://drafts.csswg.org/css-grid-3/従来の CSS Grid は、縦横が揃った Grid を展開し、そこに対して要素を割り当てるのが基本だが、それでは縦が揃わないため Masonry は実現できない。そこで、grid-template-rows / grid-template-columns へ masonry を追加し、これを指定すると Masonry レイアウトが実現できるようになる。省略すると grid: masonry / ${column} になるため、column に repeat などを指定すれば Pinterest のようなレイアウトが実現できる。3 列の Masonry Layout は以下だ。<style>.grid { display: inline-grid; grid: masonry / repeat(3, auto); border: 1px solid; gap: 1vw; masonry-auto-flow: pack; width: 32vw;}img { width: 10vw;}</style><div class=masonry> <img> <img> <img> ...</div>敷き詰めるためのアルゴリズムは仕様で決まっている。https://drafts.csswg.org/css-grid-3/#masonry-layout-algorithmデフォルトでは、敷き詰める際に一番余白が空いているところに画像が挿入される。これを制御するプロパティとして masonry-auto-flow が定義されており、next にすると画像の HTML 上での出現順に積み上げるようにすることもできる。masonry-auto-flow: pack;masonry-auto-flow: next;他の値もあるがまだ定義が明示されていないようだ。このあたりのアルゴリズムは要件によって多様だと思われるため、仕様の策定とともに変わる可能性は高いだろう。https://drafts.csswg.org/css-grid-3/#masonry-auto-flow

azukiazusa のテックブログ2

すぐに使える！JavaScriptの華麗な配列操作

JavaScriptで配列操作をする際には、まずはJavascriptが持つ配列のメソッドを眺めて見るとよいでしょう。JavaScriptはライブラリに頼らなくとも自前で高度な操作を可能にしてくれます。 組み込みの配列メソッドはたくさんありますが、その中で私がよく使うメソッドを紹介します。

blog.jxck.io

Web 技術の調査方法

「新しい API などを、どうやって調べているのか」「仕様などを調べる際に、どこから手をつければ良いのか」などといった質問をもらうことがある。確かにどこかに明文化されていると言うよりは、普段からやっていて、ある程度慣れてきているだけなものであり、自分としても明文化していなかったため、これを機に解説してみる。やり方は一つではない上に日々変わっていくだろうが、頻繁にこの記事を更新するつもりはない。また、筆者は実務で必要になるというよりは、ほとんどを趣味でやっているため、このやり方が合わない場面は多々有るだろう。スコープとしては、ライブラリ、ツール、フレームワークなどではなく、Web プラットフォーム関連の標準やブラウザの実装状況などに限定している。

azukiazusa のテックブログ2

Go言語 テスト

Go言語の提供するテストはシンプルです。テストのために覚えることは多くはありません。 Go言語の単体テスト用の機能は`testing`という標準パッケージとして提供されています。ベンチマークやカバレッジ、標準出力のテストなどをカバーしています。 また、テストは`go test`コマンドによって実行されます。サードパーティのツールなどは必要ありません。まずはこの`testing`パッケージの内容を見ていきます。

azukiazusa のテックブログ2

Go 言語　標準パッケージでHTTPサーバー

Go言語は、標準パッケージでHTTPサーバーと基本的なHTTPクライアントを提供します。 使用するのは、net/httpというパッケージです。

azukiazusa のテックブログ2

Go言語 ポインター

Go言語には、ポインタがあります。 ポインタとは、メモリのアドレスのことです。アドレスは`0xc0000b4008`のような16進数で表されます。

azukiazusa のテックブログ2

Go言語 構造体・インターフェース

構造体(Struct)とは、フィールドの集まりです。JavaScriptのオブジェクトよく似ており、データをまとめて1つの集まりの値として表現します。 例えば、座標を表すには緯度と経度がフィールドとして必要になるでしょう。緯度と経度をそれぞれ別の変数として宣言することはできますが、間違いが生じやすく面倒な処理になってしまいます。

azukiazusa のテックブログ2

Go言語　コレクション（配列・スライス・マップ）

配列は決まった長さを持つ要素を並べた順序のあるコレクションです。 Go言語の配列は固定長になっており、宣言時に長さと要素型を指定します。 長さは後から変更することはできません。 Go言語の配列は柔軟性に欠けるため、実際にはあまり使用されません。可変長であるスライスがよく使われます。 マップはキーと値によって宣言されます。これは、連想配列のようなものです。

azukiazusa のテックブログ2

Go言語　型・関数・メソッド

Go言語は静的型付け言語であり、全ての変数は何らかの型に属し、異なる型同士の演算といった問題点の多くはコンパイル時に検出されます。 関数の宣言にはfuncキーワードを使用します。関数の引数と戻り値には型を指定します。戻り値を複数持たせられる、戻り値に名前をつけることができるといった特徴があります。 クラスやオブジェクトはないですが、メソッドはあります。メソッドは型に紐付けられます。

azukiazusa のテックブログ2

Go言語基礎文法

Go言語(Golang）は、2009年にGoogleによって開発されたオープンソースの静的型付け、コンパイルされるプログラミング言語です。Go言語はコンパイルされるプログラミング言語です。 Go言語はシンプルで、信頼性が高く、効果的なソフトウェアを構築します。

azukiazusa のテックブログ2

CSSの設計

今この文章を読んでいる人ならば、少なくともCSSには触れたことがあると思います。CSSはとても簡単に記述できますが、それゆえにCSSは「壊れやすい」のです。なぜCSSは壊れやすくなってしまうのでしょうか。CSSには「すべてがグローバルスコープ」「複雑化するWeb開発」といった問題点があげられます。そのような状態に対する解決策として、CSSの設計が誕生しました。

blog.jxck.io

Puppeteer で静的サイトの Font Subsetting

Web Font のサブセット化を Font Weight に応じて作り分けるとともに、それを Puppeteer を用いて生成するように変更した。

blog.jxck.io

WebCodecs と WebTransport でビデオチャット

ブラウザの持つ Video/Audio コーデック実装へアクセスする API として WebCodecs の仕様策定と実装が進んでいる。これにより、映像や音声の変換などといったユースケースへの応用も可能だ。本来なら WebCodecs 単体の API について解説するところだが、筆者がこの API を待っていた理由であるところの「WebRTC の代替」としての WebCodecs/WebTransport の応用に注目し、背景も踏まえて解説する。

blog.jxck.io

img の srcset 指定時に選択される画像

<img> や <picture> で srcset に複数の画像を指定することで、デバイスに応じて適切な解像度の画像を提供することができる。この画像が、どういった条件で選択されるのかを頭では勝手に理解していたつもりだが、理解とは違う挙動があったため、仕様と実装を確認した。その記録を記す。なお、先に言うがどのブラウザも 仕様に準拠して 実装されている。

blog.jxck.io

Webbundle によるサブリソース取得の最適化

WebBundle を用いてサブリソースのみを Bundle する、Subresource Bundle の策定と実装が進んでいる。これを用いると、複数サブリソースの取得を一回の fetch で行うことができ、RTT を減らしつつも個別に取得したかのようにキャッシュを制御できる。現時点での仕様と実装を解説する。Intent to Prototype: Subresource loading with Web Bundles

blog.jxck.io

ローカル開発環境の https 化

Web の https 化が進み、それに伴って https を前提とする API も増えてきた。そうした API を用いた開発をローカルで行う場合、localhost という特別なホストを用いることもできるが、それだけでは間に合わないケースも少なからずある。localhost を https にするという方法もあるが、そのように紹介されている方法には、いくつか注意すべき点もある。この辺りの話を、直近 1 ヶ月で 3 回くらいしたので、筆者が普段使っている方法や注意点についてまとめる。特に推奨するつもりはない。

azukiazusa のテックブログ2

Express + TypeScript + MondoDBでやる

Expressは、Node.jsのWebアプリケーションでもっとも利用されているフレームワークです。Expressは、HTTPによるWeb上の相互作用とNOde.jsプラットフォームの中間に位置するので、ある種のミドルウェアと言えます。 Expressを利用して、MVCモデルのアプリケーションを開発してみます。 データベースにはMongoDBを利用し、さらにTypeScriptで書いてみます。

blog.jxck.io

QuicTransport によるアプリケーションレイヤでの QUIC 活用

WebTransport の Quic 実装である QuicTransport の開発が Chrome で行われている。Chrome で Origin Trials が開始されたので仕様と実装を解説する。

azukiazusa のテックブログ2

Node.js - サーバーサイドのJavaScript

Node.jsは、V8 Javascriptエンジン上に構築されたJavaScriptの実行環境です。サーバーサイドのJavaScript環境であり、非同期、イベント駆動といった特徴があります。

azukiazusa のテックブログ2

Firebase④ Cloud FireStore - クエリ

Firebase4回目の記事です。 前回は、Firebaseにおける単一のドキュメントに対するCRUD操作までを取り扱いました。 今回は複数のコレクションから取得するためのクエリについて説明していきます。

blog.jxck.io

Site Isolation 及び Web のセキュリティモデルの更新

Origin は Web におけるセキュリティモデルの一つとして、コンテンツ間の Communication に関する境界を定義し、リソースを保護してきた。しかし、Spectre の発覚以降、Communication に関する制限だけではなく Isolation によるメモリレベルでのアクセス制御が必要となった。そこで現在作業されているのが、CORB, CORP, COEP, COOP といった仕様群であり、これは Web におけるセキュリティモデルの更新作業と見ることができる。概要と現状について解説する。

azukiazusa のテックブログ2

Denoとはなにか - 実際に使ってみる

Denoは、Node.jsの製作者であるRyan Dahlによって作られた、新しいJS/TSランタイムです。簡単に説明すると、Node.jsのイケてなかったところを改良したものがDenoになります。

blog.jxck.io

mozaic.fm v3 リリースと Podcast の PWA 化

mozaic.fm をリニューアルし v3 としてリリースした。今回の更新は以下のような変更/修正を実施している。PWA 化before install promptBackground FetchPeriodic Background SyncContent Index APIBadging APIPlayer UI の刷新Pure WebcomponentsMedia Session APIWAI-ARIAPortal PreviewScreen Wake LockSecurityCSP v3 (not Report-Only)Cross Origin Resource PolicyCross Origin Opener PolicyCross Origin Embedder PolicyExpect-CTNELReferrer Policyその他Transpile LessScroll To Text Fragment SearchSpotifyWIPTemplate InstantiationHTML ModulesDocument PolicySilent PushWASM ID3SXG実施したモチベーションおよび、実施内容について記す。先に言っておくが、実装も仕様も全く安定してないものを、エミュレータだけでエスパー実装しているので、実機で動く保証もなく、しょっちゅう壊れる。サイトが壊れて聴けなかったらご愛用の Podcast アプリで聞いてほしい。

azukiazusa のテックブログ2

Firebase③ Cloud Storage

Firebase3週目の記事です。 今回は、主に画像などのデータを保存するストレージ機能を提供するCloud Storageを取り扱います。 Vue.jsを利用したブログにサムネイル画像を設定する機能をもとに説明していきます。

azukiazusa のテックブログ2

JavaScript ECMAScriptとかBabelとか

JavaScript ECMAScriptとかBabelとか

azukiazusa のテックブログ2

Firebase④ Cloud FireStore

Cloud FireStore(以下FireStore)とは、FireBaseの提供するドキュメント指向型 のNoSQLデータベースです。 NoSQLとしての特徴としてのスキーマレス、スケーラブルといった特徴のほかにリアルタイムアップデート、セキュリティルール、オフラインサポートといった独自の特徴を備えており、特にバックエンドを介さずにクライントサイドから直接操作できるという点が大きなポイントです。 また、β版から正式リリースされたのが2019年2月ということもあり、比較的新しい技術です。

blog.jxck.io

Periodic Background Sync 及び Web を Install するということ

メールクライアントや RSS リーダーのようなユースケースを PWA で実装する場合、バックグラウンドで定期的にタスクを実行したいケースがある。このユースケースに特化した API として提案されているのが、Periodic Background Sync(PBS) だ。しかし、この API を取り巻く議論は「Web にアプリのような API を持ち込む上での難しさ」を物語っている。この API が Web において正当化できるかどうかは、Project Fugu に代表される Application Capabilities を Web に持ち込む場合の試金石になりそうだ。現時点での、仕様、実装、議論について解説する。

azukiazusa のテックブログ2

Firebase② Firebase Authentication

Firebase第二弾です。 Firebase Authenticationのメールアドレスによるログインと、FireStorageについて説明していきます。

azukiazusa のテックブログ2

firebaseとは

Firebaseは、Googleが提供するバックエンドサービスです。 Firebaseは、バックエンドのサービスを担ってくれるので、開発者はアプリケーションの開発に専念することができ、バックエンドで動くサービスを作成、管理する必要はありません。 そのため、素早くアプリケーションをリリースるることができます。 Firebaseは、iOS/AndroidアプリからWebサービスまで幅広く使えます。 認証、データベース、ストレージなどたくさんの機能が使用できます。

blog.jxck.io

Scroll to Text Fragment を用いたサイト内検索の実装

Scroll to Text Fragment のユースケースとして、本サイトにサイト内検索を実装した。

blog.jxck.io

牧歌的 Cookie の終焉

Cookie は、ブラウザに一度保存すれば、次からその値を自動的に送ってくるという、非常に都合の良い仕様から始まった。State Less が基本だった Web にセッションの概念をもたらし、今ではこれが無ければ実現できないユースケースの方が多い。冷静に考えればふざけてるとしか思えないヘッダ名からもわかるように、当初はこのヘッダがこんなに重宝され、Web のあり方を変えるかもしれないくらい重要な議論を巻き起こすことになるとは、最初の実装者も思ってなかっただろう。そんな Cookie が今どう使われ、3rd Party Cookie (3rdPC) の何が問題になっているのかを踏まえ、これからどうなっていくのかについて考える。

blog.jxck.io

3rd Party Cookie 調査のための Web 広告導入

昨今、特に広告サービスを中心に 3rd Party Cookie を用いたトラッキングについての議論が多く行われている。Safari による ITP や、Chrome による Privacy Sandbox への移行など、技術的な変化も著しい。こうした技術の変遷を観測し、調査検証を行うために、これまで避けていた Web 広告を本サイトに導入することにした。

blog.jxck.io

Service Worker の Background Fetch によるメディアのキャッシュ

Podcast を PWA 対応するために、待望だった機能の 1 つが Background Fetch だ。これにより、通常 Range Request で取得するような、大きなファイルを事前にダウンロードしておくことができるようになる。この API と、Service Worker およびブラウザにおける Range Request/Partial Response の扱いについて記す。

blog.jxck.io

ブラウザで何が起こっているのかを知る Reporting API と ReportingObserver

Web サービスにおいては通常、Web サーバから取得できるアクセスログやエラーログを取得し解析する基盤を保有するだろう。しかし、Web サーバから取得できる情報だけでは、ブラウザで何が起こったのかを知るのは限界がある。今回は、ブラウザ内で起こったことを知るための Reporting API と、その Report の収集について解説する。

blog.jxck.io

2019 年をふりかえる

例年通り 2019 年を振り返る

blog.jxck.io

WebBundle によるコンテンツの結合と WebPackaging

依存コンテンツを 1 つにまとめて配信する WebBundle の仕様策定と実装が進んでいる。これは Signed HTTP Exchange と合わせて WebPackaging を実現するための仕様であり、組み合わせれば WebBundle に対して署名することでコンテンツの配信を通信と分けて考えることができる。Signed HTTP Exchange に比べると格段に簡単な仕様なので、現状のフォーマットと挙動について解説する。draft-yasskin-wpack-bundled-exchanges-latest

blog.jxck.io

Intel NUC で自宅 Ubuntu 開発環境構築と SSH Port Forwarding によるアクセス

家では Mac を使っていたが、やはり Ubuntu 開発環境を作ることにした。前々から気になっていた Intel NUC をベースに Ubuntu 環境を構築。また、外出時もアクセスできるように SSH Port Forwarding を使って、固定 IP の無い家に外からアクセスできるようにした。備忘録を兼ねて記す。

blog.jxck.io

Scroll To Text Fragment と :~:text

ページ内の特定の位置へのスクロールは、URL フラグメントと HTML の ID 属性を用いて行われていた。しかし、ID を持たない要素へのスクロールというユースケースをカバーするために、フラグメントの拡張仕様が提案されている。Chrome がフラグ付きで実装しているため、この仕様の特徴について解説する。

blog.jxck.io

Noto Sans Hinted と font-feature-settings: 'palt'

Noto Sans のサブセット生成を見なおし、Noto Sans Hinted から pyftsubset で生成し、ついでに font-feature-settings を有効にした。作業と検証の記録を兼ねて、実施結果を記す。

blog.jxck.io

Promise.allSettled と Promise.any

Promise.allSettled() と Promise.any() の仕様策定が進んでいる。両者は近いレイヤの仕様では有るが、作業の進捗には差がある。Promise.allSettled は Stage 4 であり、Chrome や Safari TP には実装もされているPromise.any は Stage 2 であり、実装はまだないここでは、これらがあると何が嬉しいのかを Promise.all(), Promise.race() の特徴を踏まえて解説する。

blog.jxck.io

WebTransport と WebCodecs そして Web はどこまで "ゲーム化" するか

Transport として HTTP over TCP を基本としていた Web のあり方は大きく変わり、転送するメディアも HTML だけに止まらなくなってきた。その対角線上にあるユースケースとして、UDP でバイナリデータを双方向にやり取りする「ゲーム」があるだろう。WebSocket/MSE/WebRTC/WASM など、Web で Game を行うためのパーツは徐々に揃いつつあり、過去に比べればだいぶ状況は改善してきていると言える。しかし、できることが増えればこそ、それぞれのパーツの不足する部分が浮き彫りになる。WebTransport と WebCodecs は、主にそんな Web Game の需要から「本当に必要としているもの」を再考した結果をまとめた提案と言えるだろう。これが、単に Web Game 開発の需要を満たすだけで終わるものか、ゲーム以外の Web の開発にどこまで影響を及ぼすか。現状の仕様の提案とそのモチベーションを元に、考察していく。

blog.jxck.io

Nullish Coalescing と Optional Chaining

JS における null/undefined の扱いを改善するための 2 つの機能が提案されている。Nullish Coalescing Operator (stage 3)Optional Chaining Operator (stage 3)いずれも Stage 3 に進み、実装も始まっているので、現時点での解説を行う。

blog.jxck.io

Display Locking によるレンダリングの最適化と Async DOM

React や lit-html などにより、DOM 操作の抽象化に加えて最適化が提供されることが一般的となった。見方を変えれば、本来ブラウザがやるような最適化を、ライブラリが肩代わりしていると捉えることもできる。これは、現在の標準 API には、規模が大きく処理が複雑なアプリケーションを開発する際に、足りてないものがあると考えることが可能だ。課題の 1 つとして「DOM 操作が同期処理である」という点に着目し、Async DOM という文脈でいくつかの提案が行われた。今回は、その提案の 1 つであり Chrome で実装が進んでいる Display Locking について現状を解説する。

blog.jxck.io

画像最適化戦略 Lazy Loading 編

長らく議論されてきた <img> や <iframe> における Lazyload について、仕様と実装が動きを見せている。ここでは、特に画像 <img> に注目し、Lazyloading の議論の変遷を踏まえた上で現状を解説する。画像最適化シリーズ第 5 回目のエントリである。画像最適化戦略 PNG/JPEG 編画像最適化戦略 Picture 編画像最適化戦略 WebP 編画像最適化戦略 SVG/Font 編> 画像最適化戦略 Lazy Loading 編

blog.jxck.io

mozaic bootcamp 2019

2019/4/28 - 5/1 の 4 日間で、mozaic bootcamp 2019 というひたすら Web 技術を叩き込むイベントを開催した。その内容やモチベーションについては、以下で話している。ep48 Monthly Web 201901 | mozaic.fmこのイベントの概要と目的について記録する。

blog.jxck.io

Web における技術の解釈とエコシステムによる合意形成プロセスについて

「ユーザが意図する挙動」とは何か。技術的に可能であるが「やらない方が良いこと」は、誰がどう決めるのか。Web には仕様、実装、デプロイ、そしてユーザの利用とフィードバックによって、そうした合意がゆるやかに形成されていく仕組みがあると筆者は考えている。しかし、これは明文化されているわけでもなく、その全体像を把握するのは一般には難しいだろう。今回は、ちょうど何度目かの議論が再発している ping 属性を例に、この合意形成の概観について解説を試みる。

blog.jxck.io

Private Class Field の導入に伴う JS の構文拡張

ECMAScript の Private Class Field の仕様策定と各ブラウザの実装が進んでいる。これにより、従来の JS にはなかった Class の Private フィールドが使えるようになる。提案されている構文や、挙動について解説する。

blog.jxck.io

安全な文字列であると型で検証する Trusted Types について

脆弱性の原因となる DOM 操作の代表例として elem.innerHTML や location.href などが既に知られている。こうした操作対象(sink) に対して、文字列ベースの代入処理を行う際に、一律して検証をかけることができれば、脆弱性の発見や防止に役立つだろう。そこで処理前の文字列に対し、処理後の文字列を安全であるとして明示的に型付ける TrustedTypes という提案がされている。まだ未解決の部分が多い提案だが、現時点での仕様と実装を元に、このアイデアについて解説する。WICG/trusted-typesIntent to Experiment: Trusted Types

blog.jxck.io

Cache Digest と HTTP2 Server Push の現状

httpbis のチェアである mnot から、Cache Digest についての現状確認が ML に投稿された。もしこのまま反応がなければ、Cache Digest は終わり、対ブラウザキャッシュの Server Push は現実的ではなくなる。

blog.jxck.io

次世代 Web カンファレンス 2019 開催後記

2019/1/13(日) に、以下で告知した「次世代 Web カンファレンス」を開催した。次世代 Web カンファレンス 2019 開催告知 | blog.jxck.io前日に初雪が観測されて心配したが、天気にも恵まれ、開催趣旨の通り予定していたセッションを全て終えることができた。次世代 Web カンファレンス - connpass各セッションはこれから録画を見るが、登壇者達に聞いた感触としては、概ね熱い議論ができていたようなので、場を設けた価値はあったと思う。録画や togetter はすでに上がっている。

blog.jxck.io

2018 年をふりかえる

例年通り 2018 年を振り返る

blog.jxck.io

WebPackaging の Signed HTTP Exchanges

WebPackaging は以下の 3 つの仕様を組み合わせたユースケースである。Signed HTTP Exchanges: Signing (コンテンツに署名する)Bundled HTTP Exchanges: Bundling (コンテンツを 1 つにまとめる)Loading Signed Exchanges: Loading (そのコンテンツをロードする)本エントリでは、各仕様を Signing/Bundling/Loading と記す。現状、Signing および Loading の仕様策定が進んでおり、Chrome は Experimental な実装を行っている。全体的に仕様が大きく、今後も変更される可能性が高いため、今回は実装が進んでいる Signing に絞り、ユースケース、仕様、および本ブログへの適用を中心に解説する。

blog.jxck.io

prefers-color-scheme を用いた Dark Mode 対応と User Preference Media Features

macOS Mojave は OS レベルで Dark Mode に対応した。しかし、Web コンテンツは依然として白背景黒文字ベースのデザインが多く、結果ブラウザの中だけ眩しいという問題がある。Safari TP69 では、これにメディアクエリで対応するための prefers-color-scheme が実装された。これを用いた Dark Mode 対応と、本ブログの Dark Mode 対応、および策定中の User Preference Media Features について解説する。

blog.jxck.io

Cookie の性質を利用した攻撃と Same Site Cookie の効果

Cookie はブラウザによって保存され、紐づいたドメインへのリクエストに自動で付与される。この挙動によって Web におけるセッション管理が実現されている一方、これを悪用した攻撃方法として、CSRF や Timing Attack などが数多く知られており、個別に対策がなされてきた。現在、提案実装されている SameSite Cookie は、そもそもの Cookie の挙動を変更し、こうした問題を根本的に解決すると期待されている。Cookie の挙動とそれを用いた攻撃、そして Same Site Cookie について解説する。

blog.jxck.io

Referrer-Policy によるリファラ制御

リファラはリンクなどでページを遷移する際に、遷移元の URL をリクエストの Referer ヘッダに載せる仕様である。この付与はブラウザが自動で行うため、場合によっては非公開として扱っている URL が意図せず漏れることがある。この挙動を制御することができる、Referrer-Policy ヘッダについて解説する。

blog.jxck.io

次世代 Web カンファレンス 2019 開催告知

2019/1/13(日) に、「次世代 Web カンファレンス」を開催します。名称次世代 Web カンファレンス日時2019/1/13(日) 9:00-17:30場所法政大学富士見ゲート 4F 401, 402, 403後援法政大学情報科学部配信Youtube募集Connpass参加費無料(参考) 2015 年実施のログは以下です。bloghttp://jxck.hatenablog.com/entry/next-web-conf-2915connpasshttps://nextwebconf.connpass.com/event/19699/録画405, 406, 407

blog.jxck.io

Clear-Site-Data Header

Clear-Site-Data Header の実装が進んでいる。このヘッダについて解説する。

blog.jxck.io

Element.toggleAttribute

非常にシンプルかつミッシングピースだった Element.toggleAttribute という仕様が提案された。最近になって各ブラウザが一斉に実装を進め、リリースに向けたアナウンスが出始めている。この仕様について解説する。

blog.jxck.io

Monthly Web の作り方 2018 年版

筆者がやっている Podcast である mozaic.fm の中で、Monthly Web という月ごとの Web の動向をまとめる回をやっている。未だに落ち着いたとはいえないが、2017 年 7 月に初めてから 1 年続けたので、結果として現状どうなっているかをログに残す。

blog.jxck.io

Web Authentication API で FIDO U2F(YubiKey) 認証

Web Authentication(WebAuthN) API の策定と実装が進んでいる。これを用いると、FIDO(Fast IDentity Online) U2F(Universal Second Factor) 認証が可能になる。今回は YubiKey 認証の実装を通じて、ブラウザ API の呼び出しと、サーバ側で必要な処理について解説する。https://w3c.github.io/webauthn/

blog.jxck.io

Layered APIs と High Level API の標準化指針

Extensible Web Manifest 以降、標準化作業は Low Level API にフォーカスし、一定の成果が出ている。そこで、これらをベースとし、よりアプリレイヤの需要を満たすための High Level API をどう標準化するか、という点について指針が提案された。基本は、Low Level API を元に Polyfill を作り、そこからのフィードバックにより策定を進めるという方針だ。合わせて ES Modules の Import を用いて、polyfill とネイティブ実装をスムーズに切り替える拡張が提案されている。本記事では Layered APIs (LAPIs) と呼ばれる、この一連の枠組みについて解説する。また、同等の話を 東京 Node 学園 #tng30 で行った資料は以下である。Web over Layered APIs

blog.jxck.io

Linux で出力を別の shell に pts 経由で表示する

tmux, screen, terminal のタブなど、shell を複数起動する方法はいくつかある。Linux では、pts を経由すれば、ある shell の出力を簡単に別の shell で表示することができる。これを応用すると、簡易ダッシュボードを作り色々便利に使うことができる。

blog.jxck.io

Certificate Transparency の仕組みと HPKP から Expect-CT への移行

本サイトは HPKP (public-key-pins-report-only) に対応していた。しかし、HPKP はその運用性の問題などもあり、Chrome はすでに deprecate するアナウンスを出している。代替の仕様として、Certificate Transparency (CT) のエコシステムと、それを利用する Expect-CT の策定/実装が進んでいる。CT エコシステムの概要、Log の登録/検証、HPKP から Expect-CT への移行などについて解説する。

blog.jxck.io

Feature Policy による Permission Delegation

ブラウザの機能を制限する Feature Policy の実装が進みつつある。Feature Policy は、ブラウザが持つ機能について選択的に許可/制限を行う API だ。AMP のように特定の機能を制限する目的にも使えるが、クロスオリジン iframe に対する権限移譲のための API としても使用される。Feature Policy のモチベーションおよび適用方法について、類似する CSP や iframe sandbox と合わせて解説する。なお、今回解説する内容は、まだブラウザの実装に反映されていない部分があるため、注意されたい。

blog.jxck.io

WebFont の WOFF2 対応によるサイズ最適化

Safari 10.0 から WOFF2 がサポートされており、これをもって IE 以外のメジャーブラウザではサポートが揃いつつある。本サイトは WOFF 形式での Web Font を提供しているが、WOFF2 形式では WOFF よりも 12% 程度圧縮率が高いため、本サイトでも WOFF2 に移行することとした。フォーマット変更による効果について解説する。

blog.jxck.io

Safari による User-Agent 固定化と Web における Feature Detection

少し前に Safari Technology Preview 46 がリリースされた。Service Worker のアナウンスに目がそちらに盗まれている一方、しれっと以下の一文がある。Froze the user-agent string to reduce web compatibility risk and to prevent its use for fingerprinting--- Release Notes for Safari Technology Preview 46すぐには無理だろうと思ったが、TP47 でもこれを打ち消すアナウンスはなかったため、これを取り上げることにした。TP はあくまで Preview であり、これが このままリリースされるとは限らない 点に注意したい。今回は、これがそのままリリースされた場合の影響について考察するため、現在の User-Agent の使われ方を解説する。

blog.jxck.io

Apple の AOM 加盟と AV1 への期待

Apple が Alliance for Open Media に加盟したという報道があった。もし、このまま Safari が AV1 をサポートするまで至れば、WebRTC のコーデック戦争に一旦の落ち着きが出ると思われる。Apple joins alliance to shrink your online videos - CNETこの動向について解説する。

blog.jxck.io

record to map in Erlang

Record を Map に変換するだけのマクロ

blog.jxck.io

Form で submit されたデータの収集と FormData & URLSearchParams

<form> の onsubmit をフックして、入力された値を <input> から集めて送るといった処理はよくある。このとき、submit されたデータの収拾方法はいくつかある。submit に限らず、そのイベントに付随する情報は、基本的にイベントオブジェクトに内包されている。Form を例に、イベントオブジェクトを意識したコーディングについて解説する。

blog.jxck.io

Bookmarklet という一番身近な自動化技術

「毎回やるなら bookmarklet にでもすれば?」と言ったら、後輩が「そんな便利なことできたんですね、知りませんでした」と言っていた。そんな時代にこそ、今更だれも解説しないであろう、bookmarklet という技術についてもう一度書いておく。

blog.jxck.io

SDP の Unified Plan と Plan B

新年早々、Blink Dev で Unified Plan の Intent to Implement という嬉しい知らせが届いた。Intent to Implement: WebRTC Unified Plan SDPSDP の互換性についてインパクトの大きいこの変更について簡単に解説する。

blog.jxck.io

2017 年を振り返る

例年通り、今年を振り返る。

blog.jxck.io

ResizeObserver による変更検知と Element Query

ResizeObserver の ship が進みつつある。この仕様の解説および、ElementQuery / ContainerQuery について解説する。Resize Observer 1

blog.jxck.io

WHATWG の IPR Policy と Governance Structure

WHATWG が IPR Policy と Governance Structure についての更新を発表した。おおまかな流れと、これによって引き起されそうな変化について解説する。

blog.jxck.io

Font Display プロパティを用いた FOIT/FOUT 最適化

Web Font 読み込み中の HTML 表示については、ブラウザデフォルトの挙動に依存していた。フォントファイルサイズが大きい場合は、FOIT/FOUT の問題が顕著になり、JS を用いた回避策が利用されることも多かった。これを解決するため、CSS に font-display プロパティが作成され、実装が進んでいる。各プロパティの違いと挙動、そして本サイトへの適用について解説する。

blog.jxck.io

Houdini Paint API

Houdini で議論されている CSS Paint API が Chrome Canary で flag 付きで実装されている。デモの実装を通して、関連仕様を含めた以下の 4 つのドラフトを解説する。CSS Painting API Level 1CSS Properties and Values API Level 1CSS Typed OM Level 1Worklets Level 1

blog.jxck.io

CSS Rhythmic Sizing で Vertical Rhythm

タイポグラフィに関連したデザイン手法の 1 つに Vertical Rhythm がある。そして、現在 CSS でそれを簡単に実現するための CSS Rhythmic Sizing という仕様が提案されている。Chrome にフラグ付きで実装されたこの仕様を用いて、本サイトへの適用を行ったので、解説する。CSS Rhythmic Sizing

blog.jxck.io

予約済みドメイン (.example, .localhost, .test) について

特別なドメインとして予約され、特定の用途で使用可能なドメインとして、.example .localhost .test などがある。localhost の Draft や、gTLD である .dev が Chrome で Preload HSTS になったなどの動きを踏まえ、これらの意味や用途を解説する。

blog.jxck.io

ブラウザで適当なランダム文字列

テストや仮実装で、適当なランダム文字列が欲しい場合に便利なスニペット。

blog.jxck.io

Foreign Fetch が削除されそうな理由と Cookie の double keying

以前、本ブログでも紹介した Foreign Fetch が、仕様から削除される方向で進んでいる。Foreign Fetch による Micro Service Workers | blog.jxck.ioこれは、Safari などが進めている Cookie の double keying が影響しているらしいので、現状についてまとめる。

blog.jxck.io

Brotli を用いた静的コンテンツ配信最適化と Accept-Encoding: br について

High Sierra に乗る Safari 11 で Brotli 対応がされるということで、メジャーブラウザの Brotli 対応が概ね揃うことになる。そこで、本サイトも Brotli による静的コンテンツ配信に対応した。

blog.jxck.io

.mjs とは何か、またはモジュールベース JS とエコシステムの今後

長いこと議論になっていた ES Modules の Node における扱いに一応の決着が付き、.mjs という拡張子が採択された。この拡張子の意味と、今後ブラウザと合わせて Universal JS を実装していく上での作法が見えてきたことになる。合わせてエコシステムが対応していくことで、長年の夢だった JS のモジュール化を進めていくことができるだろう。

blog.jxck.io

Promise.prototype.finally

Promise.prototype.finally の仕様が TC39 stage 3 となり、Safari TP37 で先行実装が入った。tc39/proposal-promise-finally

blog.jxck.io

Service Worker の Navigation Preload による表示遅延回避

Service Worker で Fetch を Proxy する場合、Fetch 発生時に SW が起動していなければ、その起動を待つ必要が出る。そして、この SW の起動には無視できない時間がかかる場合があった。これを改善する Navigation Preload について解説する。

blog.jxck.io

Fetch の中断と Promise のキャンセル方法の標準化

XHR から fetch() に積極的に移行しづらかった最大のミッシングピースとして、中断できないという問題があった。これは、fetch() が選んだ Promise ベースのインタフェースにおいて、キャンセルをどうするかという議論と絡み、長く決着が付かずにいた問題である。最近、やっと話が前進したので、ここまでの経過を解説する。

blog.jxck.io

ネットワーク中立性について #NetNeutrality

US では #NetNeutrality について話題になっている一方、日本ではさほど話題になってないように思う。インターネットを基盤としている Web 開発者にとっても、いつまで他人事でいられるか怪しい。事態そのものがあまり知られてないかもと思い、決して精通しているわけではないが紹介する。

blog.jxck.io

EventTarget の継承可能化による EventEmitter の代替

念願 だった EventTarget の constructible/subclassable が DOM の仕様にマージされた。これにより、いわゆる EventEmitter のブラウザ移植が不要になることが期待される。Allow constructing and subclassing EventTarget

blog.jxck.io

ES Modules への橋渡しとしての nomodule 属性

ブラウザにおける新機能の利用においては、非対応ブラウザの考慮も必要となる。ES Modules の利用においても、いかに非対応ブラウザでフォールバックの手段を提供するかが課題となっていた。今回は、Modules の対応/非対応を切り分けるための仕様である nomodule 属性を解説する。

blog.jxck.io

Web Budget API と Web に導入されつつある Budget と Cost の概念

PWA の普及により、バックグラウンド処理をいかに制限するかといった課題が生まれた。その対策として、バックグラウンド処理における Budget と Cost の概念が提案され、それを扱う Budget API の策定が進んでいる。基本概念と現時点での API 外観について解説する。

blog.jxck.io

Safari 11.0 will support WebRTC

Safari 11 のアップデートに、待望だった WebRTC がリストされた。

blog.jxck.io

WebRTC 1.0 に向けたロードマップ

Google の Product Manager である Huib Kleinhout が、discuss-webrtc の ML に以下のような投稿をした。Completing WebRTC 1.0WebRTC 1.0 を年内に終わらせるためのロードマップ(Chrome の改善を含む)を提示している。このロードマップに期待を寄せ、簡単に現状を振り返りつつ紹介する。

blog.jxck.io

gen_fsm から gen_statem へ

Erlang/OTP 19 から、gen_fsm の後継として gen_statem が導入された。OTP の内部でも ssl などはすでに gen_statem に移行している。このビヘイビアの概要について記す。gen_statem APIgen_statem Behaviorすでにかなり安定はしているが、軽微といえども非互換な変更が OTP 20 以降に発生する可能性があることがドキュメントに言及されている。本記事は 19 時点での API ドキュメントをベースにしている。

blog.jxck.io

Web Share API

Web Share API が Origin Trials を卒業したという知らせが届いた。コンテンツを他のサービスなどと連携するこの API について紹介する。

blog.jxck.io

JavaScript における文字コードと「文字数」の数え方

textarea などに入力された文字数を、JS で数えたい場合がある。ここで .length を数えるだけではダメな理由は、文字コードや JS の内部表現の話を理解する必要がある。多言語や絵文字対応なども踏まえた上で、どう処理するべきなのか。それ自体は枯れた話題ではあるが、近年 ECMAScript に追加された機能などを交えて解説する。なお、文字コードの仕組みを詳解すること自体が目的では無いため、BOM, UCS-2, Endian, 歴史的経緯など、この手の話題につき物な話の一部は省くこととする。

blog.jxck.io

Monthly Web 2017/02

今月の Web メモ

blog.jxck.io

Polyfill のあり方と Web の進化と協調するためのガイドライン

W3C の TAG から、主にブラウザ API の Polyfill に関するドキュメントが公開された。Polyfills and the evolution of the WebPolyfill は便利な一方で、時として標準化の妨げになってしまう場合があるため、それを避けるために、Polyfill 実装者、利用者、仕様策定者などが、どう振る舞うべきかという趣旨である。今回はこの内容を元に、Web の進化と協調する Polyfill のあり方について、主に「実装者」がどうすべきかに着目し記す。

blog.jxck.io

CSP Report 収集と実レポートの考察

このブログで CSP レポートの収集を開始してもうすぐ 1 年になる。現状、対象ドメイン内で <input> は一切提供しておらず、大半が静的に生成されたページであるが、この条件でも、かなり多くのレポートが集まった。今回は、収集した実際のレポートを例に、攻撃ではないと思われるレポートとしてどういったものが送られて来たかを中心に、その内容やレポーティングサーバ、CSP の運用に関する現時点の考察についてまとめる。

blog.jxck.io

Monthly Web 2017/01

月一メモ

blog.jxck.io

mixed contents 対応を促進する CSP ディレクティブ

HTTPS 移行の問題点の一つに、mixed contents への対応がある。逆に mixed contents の発生を恐れ、HTTPS に移行できないサービスもあるだろう。本エントリでは mixed contents の正しい理解と、その検出や解消に利用できる可能性のある、CSP の Upgrade-Insecure-Request および、Block-All-Mixed-Contents を解説する。

blog.jxck.io

2016 年を振り返る

例年通り、今年を振り返る。

blog.jxck.io

HTTP の新しいステータスコード 103 Early Hints

これは、http2 Advent Calendar 2016 の 16 日目の記事である。HTTP に新しいステータスコード 103 Early Hints が追加されようとしている。HTTP/1.1 および HTTP2 双方と関わり、リソース配信の最適化に利用することができる。いったい何のために必要なのか、どういうメリットが考えられるかを解説する。

blog.jxck.io

Foreign Fetch による Micro Service Workers

Service Worker に Foreign Fetch という機能が提案されている。この機能があるとクロスオリジンへの fetch をフックできる Service Worker を、その対象オリジンから提供できるようになる。一体どういう仕組みなのか、これによって何が可能になるのかについて、デモを交えて記す。

blog.jxck.io

Link rel=serviceworker ヘッダによる API やアセットの Offline 対応

Service Worker を登録する方法は現状 3 つある。HTML meta タグでの追加ならば、Service Worker を追加するためだけの JS であれば不要になる。HTTP ヘッダでの追加ならば、HTML を持たない API にも Service Worker を追加した対応が可能である。次の記事で foreign fetch について解説する予定であるため、その前提知識として本機能を分離し紹介する。

blog.jxck.io

Node v7 で入った WHATWG URL 実装について

Node v7.0.0 が公開され、今回のリリースで WHATWG URL の実装が Experimental として入った。既に標準で含まれていた url module との違いや、URL API などについて解説する。

blog.jxck.io

Web 標準化のフィードバックサイクルを円滑にする Origin Trials について

ブラウザに追加される新しい機能に対して、Vendor Prefix の代替となる Origin Trials の導入が徐々に始まっている。今回は、これまでの Vendor Prefix の問題点と、代替として提案された Origin Trials のデザインや導入方法などについて記す。

blog.jxck.io

Google Developer Experts (GDE) になりました

Google の中の人からお声がけ頂き、Google Developer Experts (GDE) に Web Technologies の Expert として Join することになりました。

blog.jxck.io

「Socket.IO は必要か?」または「WebSocket は通るのか?」問題について 2016 年版

「Socket.IO 使ったほうがいいですか?」 という主旨の質問をもらった。これは、WebSocket が繋がらない環境に向けて、フォールバック機能を有する Socket.IO にしておいた方が良いのかという意味である。WebSocket が出てきた当初と比べて、Web を取り巻く状況は変わったが、変わってないところもある。念のためと Socket.IO を使うのもよいが、「本当に必要なのか」を問うのは重要である。Rails も ActionCable で WebSocket に対応し、ユーザも増えるかもしれないことも踏まえ、ここで、もう一度現状について、把握している範囲で解説しておく。

blog.jxck.io

SQL でファイル検索するコマンド selects を書いた話

UNIX コマンドを SQL で抽出できるツール qq を作った。 というエントリを読んで、そういえば似たようなものを作ってたなと思い出した。自分の dotfiles の中にある、便利コマンド集の中にある selects についてである。このコマンドは SQL という検索を記述的に表現する共通言語をファイル検索に応用し、Ruby の動的言語として表現力を使って実装したものといえる。その実装方法と実行例などについて記す。

blog.jxck.io

Fetch での Stream を用いたプログレス取得とキャンセル

WHATWG が定義する Fetch API は、出たばかりの仕様では、途中でのキャンセルや、プログレスイベントの取得が含まれていなかった。しかし、後の更新で fetch 結果の Response Body が WHATWG Stream API を実装することになったため、現在の仕様ではプログレスを取ることもキャンセルをすることも可能となっている。今回は、こうした API のアップデートについて記す。

blog.jxck.io

Cache-Control の Immutable 拡張によるリロード時のキャッシュ最適化

ブラウザはリロード時に、max-age に満たないキャッシュを持っていても Conditional GET によってキャッシュの Validate (有効性の問い合わせ)を行う。Cache-Control Extension として提案されている Immutable 拡張は、キャッシュが max-age 内であればリロード時もキャッシュヒットさせる拡張である。このヘッダの効果と、本サイトへの適用について記す。

blog.jxck.io

Intersection Observer を用いた要素出現検出の最適化

スクロールによる DOM 要素の出現などを効率よく検知するため、新しく Intersection Observer という API が追加された。この API の使い方と、本サイトへの適用について記す。

blog.jxck.io

mozaic.fm の v2 のリリースと Podcast の実装と移行

mozaic.fm をリニューアルし、v2 としてリリースした。今回の更新のモチベーションは大きく分けて 2 つある。tumblr を捨てたかったfeedburner を捨てたかったこれによる breaking change 含む変更の内容と、実装のメモを記す。

blog.jxck.io

リンクのへの rel=noopener 付与による Tabnabbing 対策

本サイト以下全ての target=_blank 付きのリンクに rel="noopener noreferrer" の付与を実施した。このプロパティの意味と、これが無い場合のフィッシング詐欺攻撃の可能性について解説する。

blog.jxck.io

Passive Event Listeners によるスクロールの改善

DOM のイベントリスナの仕様に Passive Event Listeners というオプションが追加された。このオプションは、主にモバイルなどでのスクロールの詰まり(Scroll Junk) を解決するために導入されたものである。今回は、この仕様が解決する問題と、本サイトへの適用を解説する。Passive Event Listeners Spec

blog.jxck.io

中級者向け Service Worker Tutorial

Service Worker の初心者向けのチュートリアルや、使ってみた系のエントリも増えてきました。しかし、Service Worker は通常のブラウザ用 JS の開発と少し経路が違い、慣れるまで開発やデバッグもなかなか難しいと思います。そこで特に難しい部分、そして分かっていないと実際にデプロイした際に難しいと思う部分について、実際に動きを確認しながら解説したいと思います。なお、Service Worker の基本的な概念などについては、他のチュートリアルなどを見て理解している前提で進めます。思いつきで撮ったので色々ミスも有ります、また Chrome Dev Tools の UI はどうせ変わるのでそのつもりで見てください。TODO になっている動画は、そのうち撮って追加します。

blog.jxck.io

Stale-While-Revalidate ヘッダによるブラウザキャッシュの非同期更新

システムにおいてキャッシュの設計は永遠の課題であり、Web のパフォーマンスにおいても非常に重要である。Web では、HTTP ヘッダを用いてブラウザやプロキシにキャッシュの制御を指定する。Stale-While-Revalidate ヘッダは、このキャッシュ制御に選択肢を追加する新しい仕様である。このヘッダの概要と、本サイトへの適用を解説する。

blog.jxck.io

HTTP Strict Transport Security(HSTS) 対応

本サイトにて HTTP Strict Transport Security (HSTS) を有効化した。includeSubdomains を用いた *.jxck.io 全体への適用および、ブラウザへの Preload 登録も検討したが、本サイトの特性上それは見送った。導入に必要な設定や、注意点についてまとめる。

blog.jxck.io

Public Key Pinning for HTTP(HPKP) 対応と report-uri.io でのレポート収集

本サイトにて Public Key Pinning for HTTP を有効化した。CSP 同様、まずは Report-Only を設定し、HPKP Report についても、report-uri.io を用いて収集することにした。導入に必要な設定や、注意点についてまとめる。なお、本サイトへの導入はあくまで 実験 である。運用や影響も踏まえると、一般サービスへの安易な導入は推奨しない。また、本来は HSTS と併用することが推奨されている。(必須ではない)そちらも追って対応する予定である。

blog.jxck.io

Content Security Policy(CSP) 対応と report-uri.io でのレポート収集

本サイトにて Content Security Policy を有効化した。まずは Report Only にて導入し、段階的にポリシーとコンテンツを修正していく方針をとる。CSP Report については、report-uri.io を用いて収集することにした。導入に必要な設定や、注意点についてまとめる。

blog.jxck.io

画像最適化戦略 SVG/Font 編

本サイトで使用している UI アイコン系の画像を、ギリギリまで最適化した手書き SVG に置き換えた(ただしソースは 観賞用 なので、インデントは残す)。また、装飾に画像ではなく CSS の content を利用することで、ローカルフォントデータを利用し、画像転送を減らす工夫にも言及する。画像最適化シリーズ第 4 回目のエントリである。画像最適化戦略 PNG/JPEG 編画像最適化戦略 Picture 編画像最適化戦略 WebP 編> 画像最適化戦略 SVG/Font 編画像最適化戦略 Lazy Loading 編

blog.jxck.io

画像最適化戦略 WebP 編

本サイトの PNG/JPEG で提供している画像については、よりサイズが小さくなりやすい WebP 形式を提供し、対応ブラウザに配布するようにした。フォーマットを出し分けるため、画像の指定は <picture> 要素を用いて対応した。画像最適化シリーズ第 3 回目のエントリである。画像最適化戦略 PNG/JPEG 編画像最適化戦略 Picture 編> 画像最適化戦略 WebP 編画像最適化戦略 SVG/Font 編画像最適化戦略 Lazy Loading 編

blog.jxck.io

画像最適化戦略 Picture 編

本サイトで使用している PNG/JPEG 画像を、対応デバイスと、Device Pixel Ratio に対して最適なサイズで出し分けるために、<picture> 要素を適用した。画像最適化シリーズ第 2 回目のエントリである。画像最適化戦略 PNG/JPEG 編> 画像最適化戦略 Picture 編画像最適化戦略 WebP 編画像最適化戦略 SVG/Font 編画像最適化戦略 Lazy Loading 編

blog.jxck.io

画像最適化戦略 PNG/JPEG 編

本サイトで使用している PNG/JPEG 画像に対し、メタデータ削除、減色、リサイズなど基本的な最適化処理の適用戦略と、その方法および結果について。画像最適化シリーズ第 1 回目のエントリである。> 画像最適化戦略 PNG/JPEG 編画像最適化戦略 Picture 編画像最適化戦略 WebP 編画像最適化戦略 SVG/Font 編画像最適化戦略 Lazy Loading 編

blog.jxck.io

Noto Sans の Web Font 対応とサブセットによる最適化

このサイトのフォントに Web Font を適用することにした。フォントには Google と Adobe が協同で開発した Noto Sans CJK JP を採用した。また、このサイトでは使用しないだろう文字を削除したサブセットを作ることで、フォントサイズを最適化した。

blog.jxck.io

Preload を用いたリソースプリローディングの最適化

Preload を指定する <link rel=preload> の仕様が公開されており、現在 Chrome Canary に実装されている。この仕様のモチベーションについて、Chrome 開発者の Yoav Weiss 氏のブログも公開された。今回は、この仕様の特徴と用途を解説し、本サイトへの適用について検討する。W3C Preload SpecIntent to Ship: <link rel=preload>Preload: What Is It Good For?

blog.jxck.io

JSON-LD と Open Graph で構造化メタデータ対応

本サイトのメタ情報を整理するため、HTML のメタタグの整理、JSON-LD による schema.org 対応、Facebook, Twitter を主とした Open Graph 対応を実施した。これにより、既に AMP 対応していた本サイトが、Google のモバイル検索でキャッシュの対象となる(クロール待ち)。

blog.jxck.io

zopfli で静的コンテンツの gzip 配信と Content/Transfer-Encoding について

HTTP では Accept-Encoding と Content-Encoding でのネゴシエーションにより、gz などで圧縮したコンテンツを転送することができる。本サイトでは zopfli を用いて gzip 形式の配信に対応した。

blog.jxck.io

HTTP2 を前提とした HTML+CSS コンポーネントのレンダリングパス最適化について

Chrome が予定している <link rel=stylesheet> の挙動の変更について、Google Chrome チームの Jake が、興味深いブログを上げている。The future of loading CSSこの内容は、単に Chrome に対する変更だけではなく、HTTP2 によって変化する最適化手法と、それを最も活かすための HTML, CSS の構成についてのヒントがある。今回は、この内容を意訳+補足解説し、本サイトに適用していく。

blog.jxck.io

Resource Hints API でリソースの投機的取得

Resource Hints とは現在提案されている以下のドラフトであり、ブラウザに「次に必要となるリソースを教える」ことで、投機的な取得を行う API 群である。https://w3c.github.io/resource-hints/主に以下がある。dns-prefetchpreconnectprefetchprerender今回は本サイトでこれを適用した話。

blog.jxck.io

Atom の RSS Feed 対応

このブログの Atom feed を吐くようにした。右上の feed アイコン から登録できる。

blog.jxck.io

h2o で https/2 のデプロイと設定

土台がだいたいできたので、このサイトを h2o にデプロイした話。

blog.jxck.io

AMP HTML 対応

Google が推奨する仕様である AMP HTML に、このブログを対応した。言いたいことは色々あるが、とりあえず非常に難しかったため、その対応方法や感想などを残す。

blog.jxck.io

HTML の省略によるサイズ最適化

本サイト blog.jxck.io 以下については、Markdown から静的ファイルを生成するスタイルで作成している。この変換時に以前から思っていた HTML の最適化 を実施することにした。しかし、md->html 変換時にそれをできるツールが見当たらないため、Markdown の AST から HTML を構築する過程で、省略を施すスクリプトを自作した。ただし、ソースはあくまで観賞用なので、インデントやコメントは残している。チューニングではなく単なる実験としてサイト全体にこれを適用し、その結果を記す。

blog.jxck.io

Blog を移転しました

長いこと はてな blog をメインにし、他にも Qiita や Tumblr を使って色々書いて来たが、そろそろ自分のドメインに全部集約していこうかと思う。