- IndexedDB 2.0 標準が Chrome で完全にサポートされるようになりました。新しいスキーマ管理、一括操作メソッド、標準化されたエラー処理が特徴です。
display: fullscreenを使用すると、プログレッシブ ウェブアプリの没入感が向上します。allow-top-navigation-by-user-activationにより、サンドボックス化されたiframesに新しい権限が付与されます。- 他にもさまざまな機能があります。
変更点の詳細なリストについては、Chromium ソース リポジトリの変更リストを確認する
Pete LePage と申します。Chrome 58 のデベロッパー向けの新機能について詳しく見てみましょう。
IndexedDB 2.0
サイトのデータベースの構造はパフォーマンスに大きな影響を与え、変更が難しい場合があります。IndexedDB 2.0 では、それが変更されます。
objectストアとindexesは、リファクタリング後にその場で名前を変更できるようになりました。- バイナリキーを使用すると、パフォーマンスの低下を心配することなく、より自然なキーを使用できます。
getKey()、openKeyCursor()、continuePrimaryKey()メソッドを使用すると、データの取得が容易になります。
また、データセット全体の一括復元で、getAll() と getAllKey() のカーソルが必要なくなりました。
フルスクリーン プログレッシブ ウェブアプリ
Android のホーム画面からプログレッシブ ウェブアプリを起動すると、オムニボックスが非表示になるスタンドアロン アプリのようなモードで起動します。これにより、魅力的なユーザー エクスペリエンスを実現し、コンテンツ用の画面スペースを解放できます。
ただし、ゲーム、動画プレーヤー、その他のリッチ コンテンツなど、没入感を高めるエクスペリエンスでは、システムバーなどのモバイル UI 要素が邪魔になり、貴重なピクセルを占有する可能性があります。
ウェブアプリ マニフェストで display: fullscreen を設定することで、プログレッシブ ウェブアプリを完全に没入感のあるものにすることができます。
standalone モードでホーム画面から起動した PWA（中央）、fullscreen モードでホーム画面から起動した PWA（右）。
アプリがホーム画面から起動されると、アプリ以外のモバイル UI 要素はすべて非表示になります。
サンドボックス化された iframe の改善
Chrome 58 で、新しい iframe サンドボックス キーワード allow-top-navigation-by-user-activation がサポートされるようになりました。
このキーワードは、ユーザー操作によってトリガーされると、自動リダイレクトをブロックしながら、サンドボックス化された iframe にトップレベル ページを移動する機能を付与します。
その他
他にもさまざまな機能があります。
clearfixハックはサポートされなくなります。浮動やクリアなどの複数のレイアウト プロパティを手動でリセットする代わりに、display: flow-rootを使用して新しいブロック形式のコンテキストを追加できるようになりました。PointerEvents.getCoalescedEvents()を使用すると、PointerEventが最後に配信されてからのすべての入力イベントにアクセスできます。描画アプリなどでポイントの正確な履歴が必要な場合に最適です。- また、
WorkersとSharedWorkersをdata:URL を使用して作成できるようになりました。これにより、Workersで開発する際に不透明なオリジンを指定できるため、セキュリティが強化されます。
以下に、デベロッパー向け Chrome 58 の変更の一部を示します。
この動画がお気に召しましたら、デザイナーとデベロッパーもご覧ください。デザイナーとデベロッパーが連携する際に直面する課題を解決するための新しい動画シリーズです。
YouTube チャンネルにチャンネル登録すると、新しい動画が公開されるたびにメール通知が届きます。
担当の Pete LePage です。Chrome 59 がリリースされ次第、Chrome の新機能についてお知らせします。