**2025年現在の標準Web APIに関する50の問題**

2025/12/18 13:55

**2025年現在の標準Web APIに関する50の問題**

RSS: https://news.ycombinator.com/rss

要約

Japanese Translation:

記事は、著者が完全にベーシックなHTML5だけで無料のテキスト中心のミステリー調査ゲームを構築した経験を記録しています。初期の楽観主義にもかかわらず、50以上のクロスブラウザ/デバイス問題が開発時間の半分以上を消費しました。

主要な技術的ハードル

  • Apple Safari の挙動の差異により、ナビゲーションバーの不具合、vw/vh ユニットの信頼性低下、Fullscreen API が無効化されること、および UI 要素を折りたたむアグレッシブなソフトキーボード処理が発生しました。
  • iOS の音声再生は困難でした:AudioContext はサウンドを着信音として扱い、
    <audio>.play()
    はユーザー操作を必要とし、MP3 は最初の再生後に切り捨てられ、ボリューム制御が一貫性を欠きました。著者は無音サウンドでプライミングし、先頭に静寂を含むクリップを再録音することで解決しました。
  • レイアウトバグはフォントのフォールバック差異(Arial vs Courier)、Safari の flex gaps の遅延対応、列/行ギャップ、line-height ユニット、scale 文法、およびカスタムプロパティの伝搬問題から生じました。カスタム woff2 フォントを使用することで多くの問題が軽減されました。
  • タッチ特有の奇妙さとして、Safari のドラッグ vs スクロール混乱、大きな見えないヒットターゲットの必要性、ダブルタップズーム防止の欠如、およびモバイルでのホバー相互作用の欠如が挙げられます。
  • モバイルキーボードは UI を崩壊させました:ソフトキーボードが入力フィールドを覆い、フォーカスがフルスクリーンオーバーレイを引き起こし、MouseEvents のシフトキーサポートが限定的でした。
  • Firefox iOS は独自の問題セットを提示しました—svh/ lvh ユニットが無い、正しくないフルスクリーン処理、およびビューポートエッジの欠如により、新しいデバイスでレイアウトが切り捨てられました。
  • CSS 機能の不一致(backdrop-filter,
    filter:blur()
    , アニメーション再起動 API)は、ブラウザ間でバグまたは非対応でした;多くの場合 Safari は Chrome に遅れを取っていました。

ベストプラクティスの教訓
著者はモバイルファーストアプローチ、二重レイアウト(シングルカラム vs マルチカラム)、単位使用の注意(cm/mm を避ける)、タッチとマウスイベントの明示的処理を強調しています。特に古い iPhone の専用テストラボは洗練された結果を得るために不可欠です。

結論
HTML5 はネイティブアプリスタックよりも摩擦が少ないものの、「安全港」機能セットが不足しています。開発者は多くの問題を抽象化するためにポリフィル、フレームワーク、またはゲームエンジンに頼る必要があります。HTML5 は低摩擦プロジェクトには適していますが、高品質でゲームライクな体験はハイブリッドまたはネイティブソリューションの方が適しており、それらはコストを上げ、リリースサイクルを延長します。

この改訂された要約は、すべての主要ポイントを反映し、ソーステキストから推測を避け、曖昧な表現なしに明確で簡潔な概要を提示しています。

本文

はじめに
最近、私は無料のゲームを作りました。 Case of the Golden IdolRoottrees are Dead、そして Return of the Obra Dinn からインスパイアされた小さなミステリー調査タイトルです。UX のアイデアはシンプルで、プレーンな HTML5 だけで実装できると考えていました。

もちろんゲームはエンジンを使って作るのが一般的ですが、このゲームはほぼテキスト主体で、単一ページ(SPA)レイアウト、静止画像数枚、フォント数種類、音声数トラック――サーバーも 3D グラフィックも複雑なアニメーションもありません。クリックして読むだけです。ネイティブインストールを必要とせず、複数のブラウザやデバイスで動作させたいので、ウェブは長年にわたりこのような基本機能をサポートしてきました。HTML5 が自然な選択肢に思えたのです。

ところが実際には、50 以上もの予想外の問題に直面しました。これらは主に Web 標準のギャップに起因し、クロスブラウザ・クロスデバイス対応のために開発時間の半分以上を再設計に費やすことになりました。本稿ではそれらの問題点を列挙し、再作業コストを削減する簡単なアドバイスと、2025 年時点で Web 標準が「提供」しているもの・「提供できない」ものについてまとめます。


TL;DR アドバイス

古い iPhone を購入し、毎日テストしてください。
ノートパソコンでプロトタイピングしても、モバイル環境は大きく異なります。古い iPhone(または他のレガシーデバイス)は「試験用ウマ」として最適です。機能不具合が早期に明らかになるからです。


罪状 1:Apple の独自仕様

問題説明
画面全体を使えないSafari は上部ナビゲーションバーをタッチジェスチャーで隠したり表示したりします。イベントや測定値でこの状態が把握できず、
vw
/
vh
が壊れます。
CSS 単位が壊れる新しい単位 (
svh
,
lvh
) は最近の Safari では動作するものの、Firefox iOS では機能せず、古い Safari では全く無視されます。
Fullscreen API が欠如iPhone の Safari には標準的な Fullscreen API が実装されておらず、本格的にフルスクリーンを使えません。
役に立たないフルスクリーン挙動フルスクリーンになると上部が黒いバーに置き換わり、閉じる X が追加されてもスペースは増えず、スクロールするとフルスクリーンから抜けます。ソフトキーボードもブロックされ、iOS 12 ではフィッシング警告まで表示されます。
タッチドラッグはスクロールのみSafari iOS は指でのドラッグを「スクロール」とみなします。要素がスクロール可能でなくてもドラッグできません。
見えないスクロールバーオーバーレイスタイルのスクロールバーはスクロール可能領域を識別しづらく、視覚的ヒントを追加する必要があります。
指位置アルゴリズムSafari iOS ではクリックイベントが、指の中心が要素に当たったときのみ発火します。そのため小さなタップ対象は使えません。

回避策

  • iOS でフルスクリーンを諦める。
  • position:fixed
    と CSS transform を組み合わせて横幅を最大化する。
  • ユーザーが音声を再生できるように、隠し「開始」画面を設ける(次節参照)。

罪状 2:挙動とバグ

問題説明
フォントの違いArial や Courier のような同名フォントでもプラットフォームにより差が出る。
woff2
フォントをカスタムで埋め込むことで解決した。
Safari iOS でのリガチャデフォルトGoogle Material アイコンはリガチャを使用するため、明示的に
font-variant-ligatures
を設定しないと機能しない。
Flexgap が遅れて導入Flexbox の行・列ギャップは最近になって Safari に実装された。古いバージョンでは無視される。
Flex shrink の問題Safari はスクロール可能な flex アイテムのテキストを過度に縮小する。
lh
単位が欠如
line-height
の単位は昨年まで Safari iOS で未対応だった。
scale()
構文が無視される
Safari は
transform: scale(50%)
を無視し、数値を直接指定する必要がある (
0.5
)。
ResizeObserver が遅れて導入古い Safari では ResizeObserver が存在せず、サイズ変更のポーリング処理に頼らなければならない。
CSS カスタムプロパティのバグカスタムプロパティを変更しても、Safari の
body::backdrop
には反映されないケースがある。
スムーズスクロールが遅れて導入古い Safari は
scroll-behavior: smooth
を無視する。
ボタンのパディングSafari はデフォルトでボタンに余計なパディングを付与するため、明示的に上書きする必要がある。

音声関連の問題

  • iOS では
    AudioContext
    webkitAudioContext
    としてしか利用できず、後に名前変更された。
  • iOS 12 で
    GainNode
    のリニアラップは機能せず、音が歪む。
  • audio.play()
    はユーザーの操作が必要で、Safari はそれ以外をブロックする。
  • 音声タグの最初の再生では 300 ms がスキップされ、次回以降は MP3 を再ロードするまで無音になる。
  • .volume
    プロパティは次のイベントループで 1 にリセットされる。

回避策

  • タップでサイレントクリップを再生し、音声をアンロックするダミー
    audio
    要素を作成。
  • すべての音ファイルに 300 ms の無音前置きを付けることで切り捨てを防止。
  • 音量ゼロに設定せず停止させる。iOS 判定は機能チェックで行う。

罪状 3:モバイル再設計

問題説明
ドラッグ vs スクロールタッチドラッグはスクロール専用のため、カスタムドラッグ・ドロップを実装するには
pointer-events:none
user-select:none
を併用。
ダブルタップズーム
<button>
への連続タップでズームが発生することがあるので、
touch-action: manipulation
を追加。
ホバーは使えないホバーはデスクトップでのみ機能し、モバイルブラウザでは無視される。ホバーに依存した重要なインタラクションは避けるべき。
ソフトキーボードの問題
.focus()
でソフトキーボードが表示され、特に横向き時は画面大部分を覆ってしまう。
Shift‑クリックが発生しないタッチデバイスでは Shift キーイベントが全く発火しない。
レスポンシブレイアウトの落とし穴CSS 単位 (
px
,
cm
) は「知覚的」で物理的な寸法を保証しないため、ピクセル単位で設計するよりも「スクリーンフル」単位でデザインすべき。

デザインのヒント

  • モバイルデバイスやシミュレータ上で最初にプロトタイピングし、早期発見を図る。
  • フォニック:電話用は単一列、デスクトップ用は複数列という二重レイアウトを採用。
  • タップ対象は最低 44 px の幅と高さを確保。

結論

2025 年においても洗練されたインタラクティブな HTML5 ゲームを構築するには、クロスブラウザ・クロスデバイスの再作業が不可欠です。ウェブ標準は「どこでも動く」安全港のような機能セットを提供していません。長年にわたり確立された API でさえも、デバイスごとに挙動が異なることがあります。

ただし:

  • HTML5 は低摩擦プロジェクト向けに依然有効 なプラットフォームです。ネイティブインストール不要なアプリケーションに最適。
  • 古い iPhone(または他のレガシーデバイス)でテストする ことで、ほとんどのクィックルを早期に発見でき、後続の再作業が減ります。
  • モダン CSS/JS 機能 (
    woff2
    フォント、
    grid
    flex-gap
    ) は、古いバージョンへの対策を取れば一貫して動作します。
  • フレームワークやポリフィル は助けになりますが、レイアウト・音声・タッチ入力の問題を完全に排除することはできません。

高度な仕上げ(特にゲーム)を目指す場合は、Unity や Godot のような専用ゲームエンジンを検討してください。よりシンプルなアプリケーションであれば、慎重なテストとターゲットを絞ったワークアラウンドだけで、プライベートな HTML5 でも効率的かつ効果的に実装できます。

同じ日のほかのニュース

一覧に戻る →

2025/12/24 2:33

ファブリス・ベルラドが MicroQuickJS をリリース

## Japanese Translation: GitHubの最新オファリングは、AI駆動のコード作成、統合開発ワークフロー、および組み込みセキュリティを一つの体験に融合した統一プラットフォームです。 - **AIツール**:CopilotとSparkは開発者がより高品質なコードを書き、プロンプトを管理し、外部サービスへ接続するのを支援します。 - **ワークフロー**:Actionsは任意のワークフローを自動化し、Codespacesは即時にクラウド開発環境を提供します。Issues、Plans、およびCode Reviewはチームが作業を追跡し変更点をレビューできるようにし、すべて単一パイプライン内でハンドオフを減らします。 - **セキュリティ**:Advanced Securityはビルド時に脆弱性をスキャンし、シークレット保護は認証情報の漏洩を事前に防止します。 - **対象ユーザー**:エンタープライズから中小チーム、スタートアップ、非営利団体まで、アプリモダナイゼーション、DevSecOps、DevOps、およびCI/CDなどのユースケースで利用可能です。 - **対応業界**:ヘルスケア、金融サービス、製造、政府機関その他多数。 - **追加リソース**:ドキュメント、ブログ、変更履歴、マーケットプレイス、イベント/ウェビナー、電子書籍/レポート、ビジネスインサイト、スキルトレーニング、サポート、コミュニティフォーラム、Trust Center、およびパートナープログラムがすべて利用可能で、チームの成功を支援します。 - **エンタープライズソリューション**:GitHub Enterprise PlatformにはAdvanced Security、Copilot for Business、プレミアムサポート、24/7 エンタープライズレベルサービスなどのAI駆動開発プラットフォームと追加機能が含まれ、それぞれ階層化された価格モデルで提供されます。 これらの機能を組み合わせることで、あらゆる規模の組織においてコード生成をより迅速かつ安全に行い、ワークフローを効率化します。

2025/12/24 6:54

**X‑ray:PDF 文書における不適切な赤字消去(レダクション)を検出するための Python ライブラリ**

## Japanese Translation: --- ## Summary x‑rayは、PDF文書内の不適切な赤字(黒い四角形が背後にあるテキストを完全に覆えていない)を自動で検出するPythonライブラリです。PyMuPDFでPDFをスキャンし、四角形の形状を特定してページコンテンツ上に重ね合わせ、各形状が実際に隠された情報を遮蔽しているかどうかをテストします。不適切な赤字はJSON(またはPython辞書)として報告され、ページ番号、境界ボックス、および隠されたテキストがリスト化されます。 ### Installation ```bash uv add x-ray # 既存のuvプロジェクトに追加 pip install xray # 標準的なpipインストール ``` インストールせずに実行することも可能です: ```bash uvx --from x-ray xray <PDF_URL> ``` ### Usage *コマンドライン:* ```bash xray path/to/file.pdf xray https://free.law/pdf/example.pdf # バッチURL cat urls.txt | xargs -n 1 xray ``` *Python import:* ```python import xray bad_redactions = xray.inspect("some/path/to/file.pdf") # `inspect` は str、pathlib.Path、URL(https://)、または PDF コンテンツの bytes を受け取ります。 ``` ### Output このツールは、ページ番号をキーとし、不適切な赤字オブジェクトのリストを値とするJSONを出力します。各オブジェクトには `bbox` タプルと隠された `text` が含まれます。モジュールとして使用した場合、同等のPython辞書が返されます。 ### Project context - Free Law Projectで数百万件のPDFを監査し、法的透明性を確保するために使用されています。 - GitHub上でオープンソース化されており、貢献にはCLAへの署名が必要で、issues経由で管理されます。 - リリースはGitHub Actionsで自動化されており、手動リリースでは `CHANGES.md`、`pyproject.toml` の更新、タグ付け、およびPoetryによる公開を行います。 - BSDライセンス(許諾型)で配布されています。 x‑rayの軽量なインストールと明確なレポート機能は、法務テック企業や規制当局、オープンデータイニシアチブが不備のある赤字を迅速に特定し、コンプライアンスと透明性を維持するのに役立ちます。

2025/12/24 4:35

テレンス・マリック『Disciples』

## Japanese Translation: テレンス・マリックの独特な美学―長いモンタージュ、自然光、詩的ナレーション、そして従来の物語構造への拒否――は、そのスタイルを直接模倣せずに採用する新しい映画作家たちの波を呼び起こしました。 代表例としてラメル・ロス監督の『ニッケル・ボーイズ』(2024年)が挙げられます。この作品はコールソン・ホワイトヘッド小説の改編で、ベストピクチャー賞ノミネートを獲得しました。ロスはマリックの『The Tree of Life』に触発され、その制作に関わったプロデューサーの一人が手助けしたといいます。彼は監督のアプローチを第一人称視点と断片的な詩性へと翻訳し、没入型の神話的物語を創造していますが、それでも独自性を保っています。 他の現代映画監督――クロエ・ザオ(『ノマドランド』)、クリント・ベンツリー(『Train Dreams』)、デイヴィッド・ゴードン・グリーン(『ジョージ・ワシントン』)、そしてローラ・ダン――はマリックの視覚言語を響かせますが、表面的な模倣を避けるために自らの感性と融合させる必要があります。A.J. エドワーズ(『The Better Angels』)やデイヴィッド・ロウリー(『Ain’t Them Bodies Saints』)による試みは、スタイルフレームワーク内で真の人間性を捉える難しさを示しています。 マリックのキャリアは、『Badlands』と『Days of Heaven』という初期叙事詩から始まり、20年間の休止期間を経て、『The Thin Red Line』『The New World』『The Tree of Life』などの後期作品へと進化しました。彼の作品は常に精神性・自然・人間存在を探求しつつ、批評家から高い評価を受ける一方で、ボックスオフィスでは稀にしかヒットしません。マリックの総合的な目標――失われた精神性とアメリカ映画を再接続すること――は、芸術的解放とハリウッドの従来の物語期待との間で緊張を生み出します。 この記事では、マリックの美学と制作手法が多くの人々にインスピレーションを与えている一方で、本当の影響力は表面的な技術を単純に模倣するのではなく、それらの要素を自分自身の物語ビジョンへと翻訳することにあると主張しています。

**2025年現在の標準Web APIに関する50の問題** | そっか~ニュース