【Info.plist設定】アプリ名・画面向き・YouTube表示に関わるiOS設定を確認する | NETFLIX風動画アプリを作りながらUI・検索・動画再生・共有機能を学ぶFlutter（iOS・Android）アプリ開発 | Flutterアプリケーション開発概論

この節で学ぶこと

前の節では、My Netaflix画面を作りました。

プロフィール画像、通知、ダウンロード、視聴中リスト、My Listを表示することで、アプリ全体の画面構成がかなり完成に近づきました。

今回の節では、少し画面づくりから離れて、iOS側の設定ファイルである Info.plist を確認します。

FlutterでiPhoneアプリを作るとき、画面そのものはDartで作ります。

しかし、アプリ名、画面の向き、外部サービス表示、通信まわりなど、一部の設定はiOS側のファイルで管理します。

その代表的なファイルが、Info.plist です。

Flutterの画面
↓
main.dartなどで作る

iOSアプリとしての設定
↓
Info.plistで確認する

この節では、NETFLIX風アプリをiOSで動かすために、Info.plist のどこを見ればよいのかを学びます。

Info.plistとは？

Info.plist は、iOSアプリの基本情報や設定を書いておくファイルです。

Flutterアプリの場合、通常は次の場所にあります。

ios/Runner/Info.plist

このファイルには、たとえば次のような情報が入っています。

設定項目	役割
アプリ名	ホーム画面などに表示される名前
画面向き	縦向き・横向きの対応
権限説明	カメラ・写真・位置情報などを使う理由
外部通信設定	HTTP通信などに関する設定
URLスキーム	他アプリとの連携設定

今回のアプリでは、主に次の3つを確認します。

アプリ名
画面向き
YouTube表示に関係する設定

なぜInfo.plistを確認するのか

Flutterでは、Dartコードを書くだけでかなり多くの画面を作れます。

しかし、iOSアプリとして動かすときは、iOS側のルールにも従う必要があります。

たとえば、次のような場面です。

ホーム画面に表示されるアプリ名を変えたい
↓
Info.plistを確認する

アプリを縦向き固定にしたい
↓
Info.plistを確認する

YouTubeやWeb表示がうまく動かない
↓
iOS側の設定も確認する

つまり、Info.plist は「Flutterの外側にあるiOS用の設定ファイル」と考えると分かりやすいです。

Info.plistの基本構造

Info.plist は、XML形式で書かれています。

見た目は少し難しく見えますが、基本は key と value の組み合わせです。

たとえば、次のような形です。

<key>CFBundleDisplayName</key>
<string>Netaflix</string>

これは、次の意味です。

CFBundleDisplayName
↓
アプリの表示名

Netaflix
↓
表示する名前

Info.plist では、<key> のあとに、その値が続きます。

<key>設定名</key>
<string>値</string>

文字列の場合は <string> を使います。

配列の場合は <array> を使います。

真偽値の場合は <true/> や <false/> を使います。

keyとvalueの考え方

Info.plist を読むときは、まず key を探します。

<key>CFBundleDisplayName</key>

そのすぐ下、または次に続く部分が、その値です。

<string>Netaflix</string>

このように、Info.plist はペアで読んでいきます。

keyを見る
↓
その下の値を見る
↓
何の設定か理解する

慣れないうちは、すべてを理解しようとしなくて大丈夫です。

まずは、今回必要な項目だけ読めるようになりましょう。

アプリ名に関係する設定

iOSで表示されるアプリ名に関係する代表的な設定は、次の2つです。

<key>CFBundleName</key>
<string>$(PRODUCT_NAME)</string>

<key>CFBundleDisplayName</key>
<string>Netaflix</string>

それぞれの役割は、次の通りです。

key	役割
`CFBundleName`	アプリ内部で使われる名前
`CFBundleDisplayName`	ホーム画面などに表示される名前

ホーム画面でユーザーが見る名前を変えたい場合は、基本的に CFBundleDisplayName を確認します。

<key>CFBundleDisplayName</key>
<string>Netaflix</string>

CFBundleDisplayNameとは？

CFBundleDisplayName は、iPhoneのホーム画面などに表示されるアプリ名です。

<key>CFBundleDisplayName</key>
<string>Netaflix</string>

この場合、ホーム画面には Netaflix と表示されます。

iPhoneホーム画面
↓
Netaflix

もしアプリ名を変えたい場合は、<string> の中を変更します。

<key>CFBundleDisplayName</key>
<string>NETAFLIX</string>

ただし、ホーム画面に表示される名前は長すぎると省略されることがあります。

そのため、短く分かりやすい名前にするのがおすすめです。

CFBundleNameとは？

CFBundleName は、アプリの内部的な名前として使われることが多い項目です。

<key>CFBundleName</key>
<string>$(PRODUCT_NAME)</string>

$(PRODUCT_NAME) は、Xcode側で設定されているProduct Nameを使うという意味です。

初学者の段階では、まず CFBundleDisplayName を見ると考えておけば大丈夫です。

ユーザーに見える名前
↓
CFBundleDisplayName

内部的な名前
↓
CFBundleName

画面向きに関係する設定

次に、画面向きに関係する設定を見ます。

iOSアプリでは、対応する画面向きを Info.plist に書くことがあります。

代表的なのが、次の項目です。

<key>UISupportedInterfaceOrientations</key>
<array>
    <string>UIInterfaceOrientationPortrait</string>
    <string>UIInterfaceOrientationLandscapeLeft</string>
    <string>UIInterfaceOrientationLandscapeRight</string>
</array>

これは、「このアプリがどの向きに対応しているか」を表しています。

値	意味
`UIInterfaceOrientationPortrait`	縦向き
`UIInterfaceOrientationLandscapeLeft`	横向き左
`UIInterfaceOrientationLandscapeRight`	横向き右
`UIInterfaceOrientationPortraitUpsideDown`	逆さ縦向き

今回のようなスマホ向け動画アプリでは、基本UIは縦向きで作っているため、縦向き中心に考えます。

UISupportedInterfaceOrientationsとは？

UISupportedInterfaceOrientations は、iPhoneで対応する画面向きを指定する項目です。

<key>UISupportedInterfaceOrientations</key>
<array>
    <string>UIInterfaceOrientationPortrait</string>
</array>

このように書くと、基本的に縦向きに対応する設定になります。

UIInterfaceOrientationPortrait
↓
縦向き

Home画面、Search画面、Clips画面、My Netaflix画面は、どれも縦長のスマホUIとして作ってきました。

そのため、アプリ全体としては縦向きの方が自然です。

iPad用の画面向き設定

Info.plist には、iPad用の画面向き設定が別にある場合もあります。

<key>UISupportedInterfaceOrientations~ipad</key>
<array>
    <string>UIInterfaceOrientationPortrait</string>
    <string>UIInterfaceOrientationPortraitUpsideDown</string>
    <string>UIInterfaceOrientationLandscapeLeft</string>
    <string>UIInterfaceOrientationLandscapeRight</string>
</array>

~ipad がついているので、iPad向けの設定です。

iPhoneとiPadで対応する向きを変えたい場合に使われます。

UISupportedInterfaceOrientations
↓
主にiPhone向け

UISupportedInterfaceOrientations~ipad
↓
iPad向け

iPadでは横向き利用も多いため、デフォルトでは複数の向きが入っていることがあります。

縦向き固定にしたい場合

スマホ向けアプリとして縦向き固定にしたい場合、UISupportedInterfaceOrientations を縦向きだけにします。

<key>UISupportedInterfaceOrientations</key>
<array>
    <string>UIInterfaceOrientationPortrait</string>
</array>

iPad側も縦向きにしたい場合は、UISupportedInterfaceOrientations~ipad も確認します。

<key>UISupportedInterfaceOrientations~ipad</key>
<array>
    <string>UIInterfaceOrientationPortrait</string>
</array>

ただし、iPadで横向きを禁止すると、ユーザー体験や審査上の考え方に影響する場合もあります。

教材では、まず「どこで画面向きを管理しているか」を理解することを優先します。

App Transport Securityとは？

iOSには、App Transport Security、略してATSという仕組みがあります。

これは、アプリの通信を安全にするための仕組みです。

簡単に言うと、iOSは安全でない通信、つまりHTTP通信を制限することがあります。

HTTP
↓
安全性が低い通信として制限される場合がある

HTTPS
↓
安全な通信として扱われやすい

今回のYouTubeリンクは https:// なので、基本的には安全な通信です。

そのため、特別なATS例外設定を増やさずに済むことが多いです。

NSAppTransportSecurityとは？

ATSの設定は、Info.plist では次のような項目で書かれることがあります。

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

これは、かなり広く通信を許可する設定です。

ただし、基本的には安易に追加しない方がよいです。

なぜなら、すべてのHTTP通信を許可するような設定は、安全性の観点で望ましくない場合があるからです。

必要な通信だけ許可する
↓
安全性を保ちやすい

何でも許可する
↓
安全性の説明が難しくなる

今回の教材では、YouTubeのようなHTTPSサービスを使う前提なので、まずは不要な例外を増やさない考え方を持っておきましょう。

YouTube表示でまず確認すること

YouTubeが表示されないときに、すぐ Info.plist を変更するのではなく、まずFlutter側も確認します。

確認するポイントは次の通りです。

確認項目	内容
動画ID	`youtubeVideoId` が正しいか
パッケージ	`youtube_player_iframe` が入っているか
Controller	`YoutubePlayerController.fromVideoId` を使っているか
通信	実機やシミュレーターがネットに接続されているか
iOS設定	通信や画面向きの設定が極端に制限されていないか

Info.plist は大切ですが、すべての問題が Info.plist で解決するわけではありません。

YouTubeが表示されない
↓
Flutter側のコードを確認
↓
ネットワークを確認
↓
それでもだめならiOS設定も確認

ここまでのまとめ

ここまでで、Info.plist の役割と、アプリ名・画面向き・YouTube表示に関係する基本項目を確認しました。

大切なポイントは次の通りです。

Info.plist は、iOSアプリの基本情報や設定を書くファイル。
Flutterアプリでは、通常 ios/Runner/Info.plist にある。
Info.plist は、key と value の組み合わせで読む。
CFBundleDisplayName は、ホーム画面などに表示されるアプリ名。
CFBundleName は、内部的なアプリ名として使われることが多い。
UISupportedInterfaceOrientations は、対応する画面向きを指定する。
UISupportedInterfaceOrientations~ipad は、iPad向けの画面向き設定。
縦向き固定にしたい場合は、UIInterfaceOrientationPortrait を確認する。
YouTube表示では、まず動画ID、パッケージ、Controller、通信環境を確認する。
iOSの通信設定として、App Transport Securityという考え方がある。
HTTPS通信が基本なので、不要なATS例外は増やさない方がよい。

Q. アプリ名を変えたのに、ホーム画面の表示が変わりません。

まず、Info.plist の CFBundleDisplayName を確認してください。

<key>CFBundleDisplayName</key>
<string>Netaflix</string>

ホーム画面に表示される名前を変えたい場合は、基本的にこの <string> の中を変更します。

<key>CFBundleDisplayName</key>
<string>NETAFLIX</string>

ただし、iOSシミュレーターや実機では、以前のアプリ情報が残っていることがあります。

その場合は、アプリを一度削除してから再インストールすると、表示名が反映されることがあります。

アプリ名を変更
↓
flutter run
↓
変わらない場合
↓
端末からアプリを削除
↓
再インストール

Q. アプリ名が長すぎて省略されます。

iPhoneのホーム画面では、アプリ名が長いと省略されます。

たとえば、次のような名前は長すぎる場合があります。

<string>Netaflix Movie Streaming App</string>

ホーム画面では、途中で ... のように省略されることがあります。

そのため、アプリ名は短くするのがおすすめです。

<string>Netaflix</string>

今回のような教材用アプリでは、Netaflix や NETAFLIX のように短い名前が扱いやすいです。

Q. iPadだけ横向きになります。

UISupportedInterfaceOrientations~ipad を確認してください。

<key>UISupportedInterfaceOrientations~ipad</key>
<array>
    <string>UIInterfaceOrientationPortrait</string>
    <string>UIInterfaceOrientationLandscapeLeft</string>
    <string>UIInterfaceOrientationLandscapeRight</string>
</array>

~ipad がついている設定は、iPad向けです。

iPhone側の UISupportedInterfaceOrientations を縦向きだけにしていても、iPad側に横向き設定が残っていると、iPadでは横向きになることがあります。

iPhone向け設定
↓
UISupportedInterfaceOrientations

iPad向け設定
↓
UISupportedInterfaceOrientations~ipad

確認項目	見る場所
動画ID	`movie.youtubeVideoId`
パッケージ	`pubspec.yaml`
import	`main.dart`
Controller	`YoutubePlayerController.fromVideoId`
通信環境	シミュレーター・実機
iOS設定	`Info.plist`

Q. HTTP画像やHTTP通信が表示されません。

iOSでは、HTTP通信が制限されることがあります。

安全な通信である https:// を使うのが基本です。

http://
↓
制限されることがある

https://
↓
基本はこちらを使う

今回の作品画像やYouTubeリンクは、できるだけ https:// のURLを使います。

どうしてもHTTP通信が必要な場合は、NSAppTransportSecurity の設定を検討することがあります。

ただし、安易にすべての通信を許可する設定は避けた方がよいです。

まずカスタマイズしてみよう

まずは、アプリの表示名を変更してみましょう。

ios/Runner/Info.plist を開いて、次の項目を探します。

<key>CFBundleDisplayName</key>
<string>Netaflix</string>

表示名を大文字にしたい場合は、次のように変更します。

<key>CFBundleDisplayName</key>
<string>NETAFLIX</string>

変更後、アプリを再起動して表示を確認します。

反映されない場合は、シミュレーターや実機からアプリを削除して、再度 flutter run してみましょう。

画面向きを縦向き中心にしてみよう

スマホ向けの縦長UIとして作っている場合、iPhone向けの画面向きを縦向きだけにすることがあります。

次の項目を探します。

<key>UISupportedInterfaceOrientations</key>
<array>
    <string>UIInterfaceOrientationPortrait</string>
    <string>UIInterfaceOrientationLandscapeLeft</string>
    <string>UIInterfaceOrientationLandscapeRight</string>
</array>

縦向きだけにしたい場合は、次のようにします。

<key>UISupportedInterfaceOrientations</key>
<array>
    <string>UIInterfaceOrientationPortrait</string>
</array>

ただし、横向き再生やiPad対応を考える場合は、横向きを残す判断もあります。

動画アプリでは、通常の画面は縦向き、動画の全画面再生では横向きも使いたいという設計もあります。

iPad設定も確認してみよう

iPad向けの画面向き設定がある場合は、こちらも確認します。

<key>UISupportedInterfaceOrientations~ipad</key>
<array>
    <string>UIInterfaceOrientationPortrait</string>
    <string>UIInterfaceOrientationPortraitUpsideDown</string>
    <string>UIInterfaceOrientationLandscapeLeft</string>
    <string>UIInterfaceOrientationLandscapeRight</string>
</array>

iPadでも縦向き中心にしたい場合は、縦向きだけにできます。

<key>UISupportedInterfaceOrientations~ipad</key>
<array>
    <string>UIInterfaceOrientationPortrait</string>
</array>

ただし、iPadは横向きで使う人も多いため、実際のアプリではユーザー体験を考えて判断します。

教材では、「iPhone用とiPad用で設定が分かれていることがある」と理解することが大切です。

YouTube表示で確認するコード

Info.plist を確認する前に、YouTube再生側のコードも見ておきます。

controller = YoutubePlayerController.fromVideoId(
  videoId: widget.movie.youtubeVideoId,
  autoPlay: true,
  params: const YoutubePlayerParams(
    showFullscreenButton: true,
    playsInline: true,
    strictRelatedVideos: true,
  ),
);

ここで大切なのは、次の3つです。

項目	役割
`videoId`	再生するYouTube動画ID
`autoPlay`	自動再生するかどうか
`YoutubePlayerParams`	再生プレイヤーの細かい設定

YouTubeが表示されない場合、まず videoId が正しいか確認します。

playsInlineとは？

YouTubeの設定には、playsInline があります。

playsInline: true,

これは、動画をアプリ内の領域で再生するための設定です。

playsInline: true
↓
アプリ内のプレイヤー領域で再生しやすくする

iOSでは動画再生の挙動が環境によって変わることがあるため、プレイヤー側の設定も確認する必要があります。

今回のアプリでは、YoutubePlayerScaffold と AspectRatio を使って、画面内に16:9のプレイヤーを表示しています。

HTTPSを使う意識を持つ

Info.plist の通信設定を大きく変更する前に、まずURLが https:// になっているか確認します。

YouTubeのURLは、次のような形です。

https://www.youtube.com/watch?v=動画ID

画像URLも、できるだけ https:// のものを使います。

https://example.com/image.jpg

http:// のURLを使うと、iOSのATSにより制限されることがあります。

アプリでネットワーク画像や外部リンクを使うときは、まずHTTPSを使うことを基本にしましょう。

NSAllowsArbitraryLoadsを安易に使わない

Info.plist には、次のような設定を書くことがあります。

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

これは、通信制限を広く緩める設定です。

しかし、教材ではこの設定を安易に追加することはおすすめしません。

理由は、アプリ全体で安全でない通信まで許可してしまう可能性があるからです。

NSAllowsArbitraryLoads = true
↓
広く通信を許可
↓
安全性の説明が難しくなる

まずは、画像URLや動画URLをHTTPSにする。

それでも必要な場合だけ、通信許可の設定を検討する。

この順番で考えると安全です。

チャレンジ2：iPhone向けの画面向きを縦向きだけにしよう

次の設定を探してください。

<key>UISupportedInterfaceOrientations</key>
<array>
    <string>UIInterfaceOrientationPortrait</string>
    <string>UIInterfaceOrientationLandscapeLeft</string>
    <string>UIInterfaceOrientationLandscapeRight</string>
</array>

縦向きだけにする場合は、次のようにします。

<key>UISupportedInterfaceOrientations</key>
<array>
    <string>UIInterfaceOrientationPortrait</string>
</array>

Home画面、Search画面、Clips画面が縦向きで安定するか確認してください。

チャレンジ3：iPad向けの画面向き設定を探そう

Info.plist の中から、次のkeyを探してください。

<key>UISupportedInterfaceOrientations~ipad</key>

この下に、iPad用の対応画面向きが書かれています。

iPhone用とiPad用で設定が分かれていることを確認しましょう。

チャレンジ1の答え

変更前：

<key>CFBundleDisplayName</key>
<string>Netaflix</string>

変更後：

<key>CFBundleDisplayName</key>
<string>NETAFLIX</string>

アプリの表示名が NETAFLIX になります。

反映されない場合は、一度アプリを削除してから再実行します。

チャレンジ3の答え

探すkeyはこちらです。

<key>UISupportedInterfaceOrientations~ipad</key>

この下の <array> に、iPadで対応する画面向きが書かれています。

たとえば、次のようになっている場合があります。

<array>
    <string>UIInterfaceOrientationPortrait</string>
    <string>UIInterfaceOrientationPortraitUpsideDown</string>
    <string>UIInterfaceOrientationLandscapeLeft</string>
    <string>UIInterfaceOrientationLandscapeRight</string>
</array>

この節のまとめ

この節では、iOSアプリの設定ファイルである Info.plist を確認しました。

大切なポイントは次の通りです。

Info.plist は、iOSアプリの基本情報や設定を書くファイル。
Flutterプロジェクトでは、通常 ios/Runner/Info.plist にある。
Info.plist はXML形式で、key と value の組み合わせで読む。
CFBundleDisplayName は、ホーム画面などに表示されるアプリ名。
CFBundleName は、内部的なアプリ名として使われることが多い。
アプリ名を変えたのに反映されない場合は、アプリ削除や再インストールが必要になることがある。
UISupportedInterfaceOrientations は、iPhone向けの対応画面向き。
UISupportedInterfaceOrientations~ipad は、iPad向けの対応画面向き。
縦向き中心にしたい場合は、UIInterfaceOrientationPortrait を確認する。
YouTube表示がうまくいかない場合は、まず動画ID、パッケージ、Controller、通信環境を確認する。
playsInline: true は、動画をアプリ内で再生しやすくする設定。
iOSにはApp Transport Securityという通信安全性の仕組みがある。
HTTP通信よりも、HTTPS通信を使うのが基本。
NSAllowsArbitraryLoads を安易に有効化せず、まずはURLや通信方法を確認する。
Info.plist はXMLなので、タグの閉じ忘れに注意する。
変更後に反映されない場合は、flutter clean、flutter pub get、flutter run を試す。

次のステップ

次の節では、アプリアイコンの設定を行います。

flutter_launcher_icons を使って、icon.png をiOSやAndroidのアプリアイコンとして反映させる方法を学びます。

アプリ名とアイコンが整うと、ホーム画面に並べたときに「自分で作ったアプリ」という実感が一気に高まります。

設定項目

役割

アプリ名

ホーム画面などに表示される名前

画面向き

縦向き・横向きの対応

権限説明

カメラ・写真・位置情報などを使う理由

外部通信設定

HTTP通信などに関する設定

URLスキーム

他アプリとの連携設定

ホーム画面に表示されるアプリ名を変えたい ↓ Info.plistを確認するアプリを縦向き固定にしたい ↓ Info.plistを確認する YouTubeやWeb表示がうまく動かない ↓ iOS側の設定も確認する

key

役割

CFBundleName

アプリ内部で使われる名前

CFBundleDisplayName

ホーム画面などに表示される名前

<key>UISupportedInterfaceOrientations</key> <array> <string>UIInterfaceOrientationPortrait</string> <string>UIInterfaceOrientationLandscapeLeft</string> <string>UIInterfaceOrientationLandscapeRight</string> </array>

値

意味

UIInterfaceOrientationPortrait

縦向き

UIInterfaceOrientationLandscapeLeft

横向き左

UIInterfaceOrientationLandscapeRight

横向き右

UIInterfaceOrientationPortraitUpsideDown

逆さ縦向き

<key>UISupportedInterfaceOrientations~ipad</key> <array> <string>UIInterfaceOrientationPortrait</string> <string>UIInterfaceOrientationPortraitUpsideDown</string> <string>UIInterfaceOrientationLandscapeLeft</string> <string>UIInterfaceOrientationLandscapeRight</string> </array>

確認項目

内容

動画ID

youtubeVideoId が正しいか

パッケージ

youtube_player_iframe が入っているか

Controller

YoutubePlayerController.fromVideoId を使っているか

通信

実機やシミュレーターがネットに接続されているか

iOS設定

通信や画面向きの設定が極端に制限されていないか

<key>UISupportedInterfaceOrientations~ipad</key> <array> <string>UIInterfaceOrientationPortrait</string> <string>UIInterfaceOrientationLandscapeLeft</string> <string>UIInterfaceOrientationLandscapeRight</string> </array>

確認項目	見る場所
動画ID	`movie.youtubeVideoId`
パッケージ	`pubspec.yaml`
import	`main.dart`
Controller	`YoutubePlayerController.fromVideoId`
通信環境	シミュレーター・実機
iOS設定	`Info.plist`

確認項目

見る場所

動画ID

movie.youtubeVideoId

パッケージ

pubspec.yaml

import

main.dart

Controller

YoutubePlayerController.fromVideoId

通信環境

シミュレーター・実機

iOS設定

Info.plist

controller = YoutubePlayerController.fromVideoId( videoId: widget.movie.youtubeVideoId, autoPlay: true, params: const YoutubePlayerParams( showFullscreenButton: true, playsInline: true, strictRelatedVideos: true, ), );

項目

役割

videoId

再生するYouTube動画ID

autoPlay

自動再生するかどうか

YoutubePlayerParams

再生プレイヤーの細かい設定

<array> <string>UIInterfaceOrientationPortrait</string> <string>UIInterfaceOrientationPortraitUpsideDown</string> <string>UIInterfaceOrientationLandscapeLeft</string> <string>UIInterfaceOrientationLandscapeRight</string> </array>