【ITニュース解説】When displayed in landscape mode, the page content is blocked by the hole area

スマートフォンアプリを横画面で使うとき、画面の端にあるカメラの穴、いわゆる「パンチホール」や「ノッチ」と呼ばれる部分が、アプリのコンテンツを隠してしまうという問題が起きることがある。このニュース記事は、まさにこの現象について取り上げ、その原因と、システムエンジニアがどのようにこの問題を解決できるのかを解説している。

まず、なぜこのような問題が起きるのか、その背景から理解する必要がある。現代のスマートフォンは、画面がデバイスの前面いっぱいに広がる「全画面デザイン」が主流となっている。これにより、ユーザーはより大きな画面でコンテンツを楽しむことができるようになった。しかし、カメラや各種センサーは物理的に存在するため、これらを画面の中に埋め込む形で、パンチホールやノッチといった「切り欠き」が設けられるようになった。

アプリを開発する際には、ユーザーがコンテンツに集中できるように「没入型表示」を目指すことが多い。これは、アプリの表示領域を画面全体に広げ、まるでコンテンツがデバイスと一体化したかのように見せる手法だ。没入型表示を実現するためには、通常、アプリのウィンドウをフルスクリーンモードに設定する（setWindowLayoutFullScreenのようなメソッドを使用する）。しかし、単に画面いっぱいに広げるだけでは、OSが表示する重要な要素、例えば画面上部の時間やバッテリー残量が表示される「ステータスバー」や、画面下部の操作ボタンが表示される「ナビゲーションバー」と、アプリのコンテンツが重なってしまう可能性がある。

そこで、アプリ開発では「セーフエリア」という概念が非常に重要になる。セーフエリアとは、OSの要素やデバイスの物理的な切り欠き（パンチホールなど）と重ならずに、コンテンツを安全に表示できる領域のことだ。通常、開発者はgetWindowAvoidAreaのようなメソッドを使ってステータスバーやナビゲーションバーの領域に関する情報を取得し、それらの領域を避けるようにアプリのコンテンツに適切な余白（パディングやマージン）を設定する。

今回の問題、つまり横画面時にパンチホールがコンテンツを隠してしまうのは、アプリがこの「パンチホール」をセーフエリアとして正しく認識し、避けるべき領域として扱っていないことが原因である。多くの場合、アプリの開発者はWindow.getCutoutInfoのようなメソッドを使ってパンチホール（カットアウト領域）の情報を取得し、その領域も避けるようにコンテンツのレイアウトを調整する必要があることを理解している。

しかし、このニュース記事が指摘する根本的な原因は、アプリがexpandSafeAreaというプロパティを使って「セーフエリアを拡張する」設定をしているときに、その拡張対象としてパンチホール領域（SafeAreaType.CUTOUT）まで含めてしまっている点にある。つまり、アプリは「パンチホールがある部分も安全な表示領域の一部だ」と誤解し、その部分までコンテンツを広げて表示しようとしてしまう。結果として、パンチホールの上に重要なコンテンツが重なってしまい、ユーザーからは見えなくなるという事態が発生する。

この問題を解決するためには、いくつかの方法がある。

一つ目の解決策は、アプリの設定ファイルであるmodule.json5に特定の項目を追加することだ。具体的には、metadataセクションに"name": "avoid_cutout", "value": "true"という設定を追加する。この設定をすることで、アプリが起動する際に、OSがパンチホール領域を「安全ではない領域」としてデフォルトで扱うようになる。つまり、OSが自動的にこの領域を避けてコンテンツを表示するように調整してくれるため、アプリのコードを大きく変更することなく、パンチホールによるコンテンツの遮蔽を防ぐことができる。これは、最もシンプルで推奨されるアプローチの一つである。

二つ目の解決策は、アプリのページを記述しているファイル内で、expandSafeAreaプロパティの設定を修正することだ。もしアプリが意図的にセーフエリアを拡張する設定をしている場合、その拡張対象からSafeAreaType.CUTOUT、つまりパンチホール領域を除外する必要がある。例えば、expandSafeArea([SafeAreaType.CUTOUT], [SafeAreaEdge.TOP, ...])のように記述されている箇所があったら、SafeAreaType.CUTOUTの部分を削除する。これにより、アプリ自身がパンチホール部分まで表示領域を不必要に拡張することをやめ、コンテンツが安全な領域内に収まるようになる。これは、問題の原因となっている直接的なコード設定を修正するアプローチである。

三つ目の解決策は、より高度で柔軟な対応を可能にする方法だ。これは、プログラムコードを使ってディスプレイのパンチホール情報を動的に取得し、それに基づいてアプリ内の特定のコンポーネント（ボタンや画像など）の表示位置を調整する方法である。具体的には、Display.getCutoutInfo()のようなメソッドを使って、パンチホール（カットアウト領域）の幅、高さ、そして画面上の位置情報を取得する。この情報（例えばboundingRectsとして返される）に基づいて、アプリのコンポーネントの余白（マージン）を動的に設定することで、パンチホールとコンテンツが重なるのを避けることができる。例えば、パンチホールの位置に合わせて、画面の端にあるボタンの左右のマージンを増やす、といった調整が可能になる。この方法は、アプリのデザインに合わせて細かくレイアウトを調整したい場合に非常に有効だが、コードの記述量が増え、実装の手間がかかる可能性がある。

これらの解決策は、いずれもアプリがスマートフォンの特殊な画面形状に適切に対応し、ユーザーがどのような表示モード（特に横画面）でアプリを使っても、コンテンツが欠けたり見えにくくなったりすることなく、快適なユーザー体験を提供できるようにするためのものだ。システムエンジニアとしてアプリを開発する際には、このようなデバイス特有の仕様やOSのガイドラインを理解し、適切に対応することが、アプリの品質を高める上で非常に重要となる。