Fullscreen APIについて

2025年12月24日（更新: 2025年12月25日）

はじめに

12月1日から25日まで、毎日1記事ずつ公開していくアドベントカレンダー企画です。この連載では、Web標準とDDDについて学びを深めていきます。第24回は「Fullscreen API」がテーマです。 Fullscreen APIとは何か、どのように実装するのかを紹介します。

Fullscreen APIは特定の要素を全画面モードで表示したり、全画面モードを抜けたりする方法を提供します。 Fullscreen APIはDocument、Elementのインターフェースにメソッドを追加しており、全画面モードを追加したり終了したりすることが可能です。

名称	概要
`Document.exitFullscreen()`	全画面モードからウインドウモードに切り替えることをリクエストする
`Element.requestFullscreen()`	全画面モードに切り替えることをリクエストする

また、全画面モードを解除するのを実装で行うのではなく、ESCやF11キーを押すことで抜けることも可能です。そして、ユーザに対してこれらの操作が出来ることを伝える設計にした方が良いとされています。 Chromeで全画面表示すると「全画面表示を終了するにはescを長押しします」と表示されます。

「全画面表示」ボタンを押下すると全画面表示に切り替わる例です。 ※zennのウインドウだとvideoの全画面が出来ないようなので、私のcodepenに遷移するかローカルでお試しください。 @codepen

今回はFullscreen APIについて紹介しました。全画面モードの切り替えはOSのショートカットで行っていましたが、それがAPIでも可能なのですね。