
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 はサウンドを着信音として扱い、
はユーザー操作を必要とし、MP3 は最初の再生後に切り捨てられ、ボリューム制御が一貫性を欠きました。著者は無音サウンドでプライミングし、先頭に静寂を含むクリップを再録音することで解決しました。<audio>.play()- レイアウトバグはフォントのフォールバック差異(Arial vs Courier)、Safari の flex gaps の遅延対応、列/行ギャップ、line-height ユニット、scale 文法、およびカスタムプロパティの伝搬問題から生じました。カスタム woff2 フォントを使用することで多くの問題が軽減されました。
- タッチ特有の奇妙さとして、Safari のドラッグ vs スクロール混乱、大きな見えないヒットターゲットの必要性、ダブルタップズーム防止の欠如、およびモバイルでのホバー相互作用の欠如が挙げられます。
- モバイルキーボードは UI を崩壊させました:ソフトキーボードが入力フィールドを覆い、フォーカスがフルスクリーンオーバーレイを引き起こし、MouseEvents のシフトキーサポートが限定的でした。
- Firefox iOS は独自の問題セットを提示しました—svh/ lvh ユニットが無い、正しくないフルスクリーン処理、およびビューポートエッジの欠如により、新しいデバイスでレイアウトが切り捨てられました。
- CSS 機能の不一致(backdrop-filter,
, アニメーション再起動 API)は、ブラウザ間でバグまたは非対応でした;多くの場合 Safari は Chrome に遅れを取っていました。filter:blur()ベストプラクティスの教訓
著者はモバイルファーストアプローチ、二重レイアウト(シングルカラム vs マルチカラム)、単位使用の注意(cm/mm を避ける)、タッチとマウスイベントの明示的処理を強調しています。特に古い iPhone の専用テストラボは洗練された結果を得るために不可欠です。結論
HTML5 はネイティブアプリスタックよりも摩擦が少ないものの、「安全港」機能セットが不足しています。開発者は多くの問題を抽象化するためにポリフィル、フレームワーク、またはゲームエンジンに頼る必要があります。HTML5 は低摩擦プロジェクトには適していますが、高品質でゲームライクな体験はハイブリッドまたはネイティブソリューションの方が適しており、それらはコストを上げ、リリースサイクルを延長します。
この改訂された要約は、すべての主要ポイントを反映し、ソーステキストから推測を避け、曖昧な表現なしに明確で簡潔な概要を提示しています。
本文
はじめに
最近、私は無料のゲームを作りました。 Case of the Golden Idol、 Roottrees are Dead、そして Return of the Obra Dinn からインスパイアされた小さなミステリー調査タイトルです。UX のアイデアはシンプルで、プレーンな HTML5 だけで実装できると考えていました。
もちろんゲームはエンジンを使って作るのが一般的ですが、このゲームはほぼテキスト主体で、単一ページ(SPA)レイアウト、静止画像数枚、フォント数種類、音声数トラック――サーバーも 3D グラフィックも複雑なアニメーションもありません。クリックして読むだけです。ネイティブインストールを必要とせず、複数のブラウザやデバイスで動作させたいので、ウェブは長年にわたりこのような基本機能をサポートしてきました。HTML5 が自然な選択肢に思えたのです。
ところが実際には、50 以上もの予想外の問題に直面しました。これらは主に Web 標準のギャップに起因し、クロスブラウザ・クロスデバイス対応のために開発時間の半分以上を再設計に費やすことになりました。本稿ではそれらの問題点を列挙し、再作業コストを削減する簡単なアドバイスと、2025 年時点で Web 標準が「提供」しているもの・「提供できない」ものについてまとめます。
TL;DR アドバイス
古い iPhone を購入し、毎日テストしてください。
ノートパソコンでプロトタイピングしても、モバイル環境は大きく異なります。古い iPhone(または他のレガシーデバイス)は「試験用ウマ」として最適です。機能不具合が早期に明らかになるからです。
罪状 1:Apple の独自仕様
| 問題 | 説明 |
|---|---|
| 画面全体を使えない | Safari は上部ナビゲーションバーをタッチジェスチャーで隠したり表示したりします。イベントや測定値でこの状態が把握できず、/ が壊れます。 |
| CSS 単位が壊れる | 新しい単位 (, ) は最近の Safari では動作するものの、Firefox iOS では機能せず、古い Safari では全く無視されます。 |
| Fullscreen API が欠如 | iPhone の Safari には標準的な Fullscreen API が実装されておらず、本格的にフルスクリーンを使えません。 |
| 役に立たないフルスクリーン挙動 | フルスクリーンになると上部が黒いバーに置き換わり、閉じる X が追加されてもスペースは増えず、スクロールするとフルスクリーンから抜けます。ソフトキーボードもブロックされ、iOS 12 ではフィッシング警告まで表示されます。 |
| タッチドラッグはスクロールのみ | Safari iOS は指でのドラッグを「スクロール」とみなします。要素がスクロール可能でなくてもドラッグできません。 |
| 見えないスクロールバー | オーバーレイスタイルのスクロールバーはスクロール可能領域を識別しづらく、視覚的ヒントを追加する必要があります。 |
| 指位置アルゴリズム | Safari iOS ではクリックイベントが、指の中心が要素に当たったときのみ発火します。そのため小さなタップ対象は使えません。 |
回避策
- iOS でフルスクリーンを諦める。
と CSS transform を組み合わせて横幅を最大化する。position:fixed- ユーザーが音声を再生できるように、隠し「開始」画面を設ける(次節参照)。
罪状 2:挙動とバグ
| 問題 | 説明 |
|---|---|
| フォントの違い | Arial や Courier のような同名フォントでもプラットフォームにより差が出る。 フォントをカスタムで埋め込むことで解決した。 |
| Safari iOS でのリガチャデフォルト | Google Material アイコンはリガチャを使用するため、明示的に を設定しないと機能しない。 |
| Flexgap が遅れて導入 | Flexbox の行・列ギャップは最近になって Safari に実装された。古いバージョンでは無視される。 |
| Flex shrink の問題 | Safari はスクロール可能な flex アイテムのテキストを過度に縮小する。 |
単位が欠如 | の単位は昨年まで Safari iOS で未対応だった。 |
構文が無視される | Safari は を無視し、数値を直接指定する必要がある ()。 |
| ResizeObserver が遅れて導入 | 古い Safari では ResizeObserver が存在せず、サイズ変更のポーリング処理に頼らなければならない。 |
| CSS カスタムプロパティのバグ | カスタムプロパティを変更しても、Safari の には反映されないケースがある。 |
| スムーズスクロールが遅れて導入 | 古い Safari は を無視する。 |
| ボタンのパディング | Safari はデフォルトでボタンに余計なパディングを付与するため、明示的に上書きする必要がある。 |
音声関連の問題
- iOS では
がAudioContext
としてしか利用できず、後に名前変更された。webkitAudioContext - iOS 12 で
のリニアラップは機能せず、音が歪む。GainNode
はユーザーの操作が必要で、Safari はそれ以外をブロックする。audio.play()- 音声タグの最初の再生では 300 ms がスキップされ、次回以降は MP3 を再ロードするまで無音になる。
プロパティは次のイベントループで 1 にリセットされる。.volume
回避策
- タップでサイレントクリップを再生し、音声をアンロックするダミー
要素を作成。audio - すべての音ファイルに 300 ms の無音前置きを付けることで切り捨てを防止。
- 音量ゼロに設定せず停止させる。iOS 判定は機能チェックで行う。
罪状 3:モバイル再設計
| 問題 | 説明 |
|---|---|
| ドラッグ vs スクロール | タッチドラッグはスクロール専用のため、カスタムドラッグ・ドロップを実装するには と を併用。 |
| ダブルタップズーム | への連続タップでズームが発生することがあるので、 を追加。 |
| ホバーは使えない | ホバーはデスクトップでのみ機能し、モバイルブラウザでは無視される。ホバーに依存した重要なインタラクションは避けるべき。 |
| ソフトキーボードの問題 | でソフトキーボードが表示され、特に横向き時は画面大部分を覆ってしまう。 |
| Shift‑クリックが発生しない | タッチデバイスでは Shift キーイベントが全く発火しない。 |
| レスポンシブレイアウトの落とし穴 | CSS 単位 (, ) は「知覚的」で物理的な寸法を保証しないため、ピクセル単位で設計するよりも「スクリーンフル」単位でデザインすべき。 |
デザインのヒント
- モバイルデバイスやシミュレータ上で最初にプロトタイピングし、早期発見を図る。
- フォニック:電話用は単一列、デスクトップ用は複数列という二重レイアウトを採用。
- タップ対象は最低 44 px の幅と高さを確保。
結論
2025 年においても洗練されたインタラクティブな HTML5 ゲームを構築するには、クロスブラウザ・クロスデバイスの再作業が不可欠です。ウェブ標準は「どこでも動く」安全港のような機能セットを提供していません。長年にわたり確立された API でさえも、デバイスごとに挙動が異なることがあります。
ただし:
- HTML5 は低摩擦プロジェクト向けに依然有効 なプラットフォームです。ネイティブインストール不要なアプリケーションに最適。
- 古い iPhone(または他のレガシーデバイス)でテストする ことで、ほとんどのクィックルを早期に発見でき、後続の再作業が減ります。
- モダン CSS/JS 機能 (
フォント、woff2
、grid
) は、古いバージョンへの対策を取れば一貫して動作します。flex-gap - フレームワークやポリフィル は助けになりますが、レイアウト・音声・タッチ入力の問題を完全に排除することはできません。
高度な仕上げ(特にゲーム)を目指す場合は、Unity や Godot のような専用ゲームエンジンを検討してください。よりシンプルなアプリケーションであれば、慎重なテストとターゲットを絞ったワークアラウンドだけで、プライベートな HTML5 でも効率的かつ効果的に実装できます。