nook:net:

2025-05-13 summaries in Japanese

The Height Enigma • Josh W. Comeau

View on Josh W Comeau's Blog

高さの謎 - CSSにおけるパーセントベースの高さの仕組みを解き明かす

この記事では、CSSにおけるパーセントベースの高さが意図通りに動作しない場合の謎を解き明かし、その原因と解決策を初心者にもわかりやすく解説しています。

主な内容:

  1. CSSにおける高さと幅の違い:

    • widthは、親要素のサイズを参考に計算されるため、シンプルにパーセント指定で機能する。
    • heightは、デフォルトでは子要素の高さに依存するため、親要素と子要素間で循環的な計算が発生し、パーセント指定が効かない場合がある。

  2. パーセントベースの高さが機能する条件:

    • 親要素の高さが子要素の高さに依存しない「既知の高さ」を持っている必要がある。
    • 親要素に固定値（pxやrem）のheightを指定することで、この条件を満たせる。
    • 親要素が固定の高さを持つと、その中の子要素でパーセント指定が可能になる。
    • ネストされた場合、paddingなどの影響で、パーセント計算がcontent boxに対して行われるため、実際のサイズと異なる場合がある。

  3. html要素におけるパーセント指定:

    • html要素は特別な扱いを受け、親を持たないため、height: 100%を指定すると、ビューポート全体（初期包含ブロック）の高さを参照する。
    • これにより、html要素は「既知の高さ」を持つことになり、子要素でパーセント指定が機能するようになる。
    • 近年では、vhやsvhなどのビューポート高さを指定する単位が推奨される。

  4. min-heightの問題点:

    • min-heightを設定しても、親要素の高さが子要素に依存する状況を回避できないため、パーセント指定が機能しない場合がある。

  5. 解決策:

    • FlexboxまたはGridの使用:
      • display: gridまたはdisplay: flexを使用することで、子要素が親要素の高さに依存せずに、利用可能な空間を埋めるようにできる。
      • Gridでは、子要素はデフォルトでグリッドセルを埋めるように振る舞う。
      • Flexboxでは、flex: 1を指定することで、子要素が残りの空間を占めるようにできる。

  6. まとめ:

    • CSSは、それぞれ異なる目的に特化した、ミニ言語の集合体のようなものであり、適切なレイアウトアルゴリズムを選択することが重要である。
    • Flowレイアウト（デフォルト）は、記事のようなドキュメントには適しているが、ウェブアプリのレイアウトにはFlexboxやGridの方が適している。

補足:

  • 著者はCSSの学習コースを提供しており、この記事の内容をさらに深く理解できる。

The spring 2025 cohort of Vercel’s Open Source Program - Vercel

View on Vercel Blog

Vercel Open Source Program 春季2025年参加プロジェクト発表

この記事は、Vercelが開催するオープンソースプログラムの、2025年春の参加プロジェクトを発表するものです。

Vercel オープンソースプログラムとは: オープンソースコミュニティを支援するため、Vercelが提供する開発者向けのイニシアチブです。参加プロジェクトは、Vercelクレジット$3,600、パートナーからの特典、専用Slackスペースなどを利用できます。

春季2025年参加プロジェクト一覧: 以下、各プロジェクトの概要と、開発者、GitHubリポジトリへのリンクを記載します。

  • Vecto3d: SVGを3Dモデルに変換するツール。
    • Lakshay Bhushan
  • Script Kit: スクリプト実行用のデスクトップアプリ。
    • John Lindquist
  • Lenis: 軽量で高性能なスムーズスクロールライブラリ。
    • Clément Roche
  • Fumadocs: Next.js向けの美しいドキュメントフレームワーク。Vercelのドキュメントでも利用。
    • Fuma Nama
  • Shadcn-table: shadcn/uiのテーブルをサーバーサイドのページネーション、ソート、フィルタリングと連携させるツール。
    • Sadman Sakib
  • Morphic: AIを活用した、検索結果をインタラクティブに表示する検索エンジン。
    • Yoshiki Miura
  • Zola: 高速でクリーン、マルチモデル、使いやすい、AIチャットアプリ。
    • Julien Thibeaut
  • Valibot: スキーマを使用してデータを簡単に検証できるライブラリ。
    • Fabian Hiller
  • shadcn-form: shadcn/uiとreact-hook-formやzodなどのツールを組み合わせた、フォーム作成支援ツール。
    • Hasan Harman
  • jsPDF: JSで最初のPDF生成ライブラリ。NASAなど大手企業でも利用。
    • James Hall
  • LobeChat: AIインタラクション用のコントロールパネル。
    • Arvin Xu
  • Milkdown: リッチテキストMarkdownエディターを構築できるツール。Crepeエディターをパッケージで提供。
    • Mirone Saul
  • KokonutUI: shadcn/ui CLIでインストールできる、またはv0でカスタマイズ可能なコンポーネント集。
    • Dorian Baffier
  • nuqs: Reactフレームワーク向けの型安全な検索パラメータ状態管理ツール。
    • François Best
  • Nemo: Next.js開発者がミドルウェアの構築方法を理解するためのツール。
    • Mateusz Janota
  • RetroUI: React、Next.js、shadcn/uiをベースとしたオープンソースUIライブラリ。
    • Arif Hossain
  • Tweakcn: shadcn/uiデザインシステムを基盤とした、ウェブサイトの外観をカスタマイズするためのプラットフォーム。
    • Sahaj Jain
  • CourseLit: ウェブサイトでデジタル商品を販売するためのプラットフォーム。
    • Rajat Saxena
  • Comp AI: Vanta & Drataの代替となる、オープンソースのコンプライアンス自動化プラットフォーム。
    • Lewis Carhart
  • EsJS: スペイン語構文でJSにコンパイルされるプログラミング言語。
    • Enzo Notario
  • Gridiron Survivor: 開発者コミュニティが、オープンソースプロジェクトを通じて実績を積み、就職を目指す。
    • Shashi Lo
  • Frontpage: Blueskyコミュニティ向けのリンクアグリゲーター。
    • Tom Sherman

次期プログラムへの参加について: 夏の参加者の募集は7月に開始されます。

Introducing HealthBench | OpenAI

View on OpenAI News

HealthBenchの紹介 | OpenAI

概要:

OpenAIは、AIシステムの医療分野における能力を評価するための新たなベンチマーク「HealthBench」を発表しました。HealthBenchは、現実的な医療シナリオでのAIモデルのパフォーマンスを測定するために設計されており、262人の医師との連携によって構築されました。この記事では、HealthBenchの詳細、OpenAIモデルのパフォーマンス評価、そして今後の展望について解説しています。

主な内容:

  • HealthBenchの目的: AIシステムが医療分野で役立つために、その有用性と安全性を確保するための評価が不可欠です。HealthBenchは、現実的なシナリオを反映し、専門家の意見に基づいた厳格な検証を行い、最先端のモデルが改善できる余地を残すことを目指しています。
  • HealthBenchの特徴:
    • 意味のある評価: 実際のインパクトを反映するスコアリングを目指し、複雑な現実世界のシナリオやワークフローを捉えます。
    • 信頼性の高い評価: 医師の判断を忠実に反映し、医療専門家の基準と優先事項を評価に反映します。
    • 進歩を促す評価: 現在のモデルに改善の余地を残し、継続的なパフォーマンス向上を促します。
    • 5,000件の会話: 医師が作成したカスタムルーブリックを用いて、各モデルの回答を評価します。
    • 7つのテーマ: 緊急事態、不確実性への対応、グローバルヘルスなど、現実世界の医療シナリオを網羅しています。
    • 多言語対応: 様々な言語に対応し、世界中の医療ニーズに合わせた評価を行います。
  • データセットの説明: HealthBenchは、AIモデルが現実的な医療シナリオでどの程度うまく機能するかをテストします。5,000件の会話は、AIモデルと個人ユーザーまたは臨床医との間のやり取りをシミュレートし、モデルはユーザーの最後のメッセージに最適な回答を提供する必要があります。HealthBenchは、合成生成と人間による対抗テストの両方を通じて作成され、マルチターン、多言語対応で、様々なペルソナ、専門分野、およびコンテキストをカバーしています。
  • 評価例: 記事には、具体的な評価例（例: 70歳の隣人が反応がない場合の対応、ウイルス感染予防に関するクエルセチンの効果、心臓リハビリの経過記録、腹痛と血便に対する自己診断など）と、それに対する候補回答、医師が作成したルーブリック基準とグレードが示されています。
  • OpenAIモデルのパフォーマンス:
    • o3モデルが、Claude 3 SonnetやGemini 2.5 Proよりも優れたパフォーマンスを示しています。
    • OpenAIの最新モデルは、過去数ヶ月でHealthBenchにおいて28%の改善を見せています。
    • 小型モデルも大幅に改善しており、GPT-4.1 nanoは、より安価でありながら、2024年8月のGPT-4oモデルよりも優れたパフォーマンスを発揮しています。
    • モデルの信頼性も重要視されており、最新モデルは、最悪の場合のパフォーマンスも向上しています。
  • HealthBenchのバリエーション:
    • HealthBench Consensus: 医師の合意に基づき、エラー率をほぼゼロに近づけた高精度な評価を目指しています。
    • HealthBench Hard: 現在の最先端モデルが苦戦する1,000件の例を含む、さらなるモデルの改善を促すためのベンチマークです。
  • 医師との比較: OpenAIモデルのパフォーマンスを理解するために、医師がHealthBenchの例に対して専門的な回答を作成し、モデルの回答と比較しました。その結果、最新モデルは、医師の専門知識を上回る回答を提供することが示されました。
  • HealthBenchの信頼性: HealthBenchの評価は、医師の評価と非常に一致しており、専門家の判断を反映していることが示されています。
  • 今後の展望: HealthBenchの評価とデータは、GitHubリポジトリで公開されており、AIシステムの医療分野における改善を促進するために、コミュニティからのフィードバックを歓迎しています。
  • 注意点: データセットからの例をオンラインで公開することは、モデルのトレーニングデータへの漏洩や不正行為を招く可能性があるため、控えるように呼びかけています。また、訓練データからのHealthBenchのフィルタリングを容易にするために、特定の文字列（canary string）を含めています。

結論:

HealthBenchは、AIシステムの医療分野における能力を評価するための重要なツールであり、OpenAIは、大規模言語モデルが時間とともに大幅に改善し、専門家を上回るパフォーマンスを発揮することを示しました。

Enhancements to the <permission> element  |  Blog  |  Chrome for DevelopersGitHubGlitchLinkedInMastodonBlueskyHomepage

View on Google Chrome Developers Blog

<permission>要素の強化に関する要約

このブログ記事は、Chromeチームが開発中のHTMLの&lt;permission&gt;要素に対する最近の強化について解説しています。この要素は現在オリジントライアル中で、Webアプリケーション内での許可要求をより柔軟かつ制御しやすくすることを目指しています。

主な強化点:

  • コンテンツサポート: Chrome 137以降、&lt;permission&gt;要素はコンテンツをサポートし、開閉タグ &lt;permission&gt;... &lt;/permission&gt; で囲むことが必須になりました。これにより、未対応ブラウザや未対応のtype属性の場合に、フォールバックUIを表示できるようになり、より良いユーザーエクスペリエンスが実現されます。
  • プログラム的な機能検出: HTMLPermissionElement.isTypeSupported('許可タイプ')という静的メソッドが導入され、特定の許可タイプがサポートされているかどうかをプログラム的に判定できるようになりました。
  • イベント名の更新: 以前のondismissとonresolveイベントが、onpromptdismissとonpromptactionに置き換えられました。古いイベントはChrome 138で非推奨になる予定です。
  • アイコンサポート: Chrome 138で、&lt;permission&gt;要素内でのアイコンサポートが予定されています。許可タイプに対応したアイコンを表示でき、色やサイズなどの限定的なスタイル調整も可能になります。
  • プラットフォームと機能の拡張:
    • Androidデバイスで機能するようになりました。
    • type&#61;"geolocation"の許可を&lt;permission&gt;要素で要求できるようになり、preciselocationブール属性も利用可能になりました。

この強化により、Web開発者は許可要求をより細かく制御し、ユーザーエクスペリエンスを向上させることができます。記事では、これらの新機能の利用を促し、フィードバックを提供して更なる改善に貢献することを推奨しています。