Flutter開発でYouTube動画を埋め込む際によくある落とし穴：iOSアプリがApp Storeでリジェクトされた話

はじめに (対象読者・この記事でわかること)

この記事は、FlutterでiOSアプリを開発しており、YouTube動画の埋め込みを検討している、または既に実装済みだがApp Storeへの申請で懸念がある開発者の方々を対象としています。

この記事を読むことで、以下のことがわかります。

  • youtube_player_flutter を使用した際にiOSアプリがApp Storeでリジェクトされる主な原因
  • リジェクトを回避するための具体的な対策方法
  • App Store審査ガイドラインにおける動画コンテンツに関する注意点

Flutterで魅力的な動画コンテンツを含むアプリを開発したいと考えている方にとって、App Storeへのスムーズな申請は重要な課題です。本記事では、実際に youtube_player_flutter を使用した際に経験したリジェクト事例と、その解決策を共有することで、皆さんの開発プロセスにおけるリスクを軽減し、より効率的なアプリ開発に貢献できれば幸いです。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 * Flutterの基本的な開発経験 * Dart言語の基本的な知識 * youtube_player_flutter パッケージの基本的な導入・使用方法

App Storeリジェクトの背景：youtube_player_flutterとYouTube APIの利用規約

FlutterでYouTube動画をアプリに埋め込む際、多くの開発者が利用するであろうパッケージに youtube_player_flutter があります。このパッケージは、YouTubeの公式APIを利用して、アプリ内での動画再生機能を手軽に実装できるため非常に便利です。

しかし、この手軽さの裏側には、App Storeの審査において注意すべき重要なポイントが隠されています。具体的には、YouTube APIの利用規約と、それに準拠しない形での動画表示が、リジェクトの主な原因となり得ます。

App Storeの審査チームは、アプリがAppleの定めるガイドラインを遵守しているかだけでなく、利用しているサードパーティのAPIが、そのAPI提供元の利用規約に違反していないかも確認します。YouTube APIは、Googleが提供するサービスであり、その利用には厳格な規約が存在します。

主な規約違反のポイントとしては、以下のようなものが挙げられます。

  • UIの改変・非表示: YouTubeのロゴやコントローラーといったUI要素を、ユーザーに予期せぬ形で改変したり、意図的に非表示にしたりすること。
  • 直接的な動画再生の強制: ユーザーの同意なく、バックグラウンドでの動画再生を強制したり、広告目的で動画を連続再生したりすること。
  • 著作権・コンテンツ保護: 許可されていない方法での動画のダウンロードや、著作権を侵害するコンテンツの表示。

youtube_player_flutter は、これらの規約に準拠する形で実装されていることが多いですが、開発者側が意図せず規約違反を犯してしまうケースが存在します。例えば、UIのカスタマイズをしすぎたり、再生方法に配慮を欠いたりすることで、問題が発生することがあります。

App Storeのリジェクトは、単にアプリがストアに公開されないというだけでなく、開発者の信頼性にも影響を与えかねません。そのため、youtube_player_flutter を使用する際には、その裏側でどのようなAPIが使われており、どのような規約が存在するのかを理解しておくことが非常に重要です。

実際にリジェクトされた事例とその解決策

リジェクトされた具体的な状況

私が担当したFlutterプロジェクトで、youtube_player_flutter を用いてYouTube動画をアプリ内に埋め込む機能を実装しました。当初は問題なく動作しており、App Storeへの申請を行ったところ、数日後に以下のような理由でリジェクトされました。

Metadata Rejected

Reason: Your app displays the YouTube logo or branding in a way that is not authorized by YouTube. Apps that use YouTube videos must comply with the YouTube API Services Terms of Service and the YouTube branding guidelines.

Specifically: The YouTube logo appears to be overlaid or obscured by other UI elements on certain screens. Please ensure that the YouTube logo is clearly visible and not altered in any way as per the YouTube branding guidelines.

要約すると、「YouTubeのロゴが、他のUI要素によって覆い隠されている、または改変されており、YouTubeのAPI利用規約およびブランディングガイドラインに違反している」という内容でした。

原因の特定：UIカスタマイズによる意図しないロゴの非表示

詳細を確認したところ、問題は動画プレーヤーのUIカスタマイズにありました。動画プレーヤーの上に、カスタムの再生ボタンや進捗バー、その他のコントロールUIを配置していたのですが、その配置やデザインが、意図せずYouTubeのロゴを覆い隠してしまっていたのです。

youtube_player_flutter パッケージ自体は、デフォルトでYouTubeのロゴを表示するための仕組みを持っているのですが、我々のカスタムUIがその表示領域を侵してしまっていたことが原因でした。App Storeの審査チームは、このような細かな点も厳しくチェックしていることを改めて痛感しました。

解決策：YouTube API利用規約とブランディングガイドラインの厳守

このリジェクトを解決するために、以下の対策を実施しました。

  1. YouTube API Services Terms of Serviceの再確認: まず、Googleが公開している「YouTube API Services Terms of Service」と「YouTube branding guidelines」を改めて詳細に確認しました。特に、ロゴの表示方法、動画プレーヤーのUIに関する規定に注意を払いました。

  2. UIの再設計とロゴ表示領域の確保: カスタムUIの配置を見直し、YouTubeのロゴが常に見えるように、プレーヤーのUI要素との重なりを完全に解消しました。具体的には、以下のような変更を行いました。

    • ロゴの表示位置の固定: 動画プレーヤーの適切な位置（通常は左下や右下など）に、YouTubeロゴが常に表示されるようにレイアウトを調整しました。
    • コントロールUIの配置調整: カスタムの再生ボタンや進捗バーなどが、YouTubeロゴや公式のコントロールバーと重ならないように、配置やマージンを調整しました。
    • 不要なUI要素の削除: もし、YouTubeの規約で許可されていないUI要素（例えば、自社独自の「いいね」ボタンを動画プレーヤーのど真ん中に配置するなど）があれば、それらを削除または適切な位置に移動させました。

  3. youtube_player_flutter の設定確認: youtube_player_flutter パッケージには、プレーヤーの表示に関する様々な設定オプションがあります。これらの設定が、YouTubeの規約に反するような動作を引き起こしていないかを確認しました。例えば、showControls や showThumbnails といったオプションは、デフォルトでYouTubeのUIに準拠するように設計されていますが、これらを不適切に無効化していないかなどを再度チェックしました。

  4. テスターによる徹底的な検証: 修正後、社内のテスターや、可能であれば外部のテスターにも協力を依頼し、様々なデバイスやOSバージョンでアプリをテストしました。特に、動画プレーヤーが表示される全ての画面において、YouTubeロゴが正しく表示されているか、UI要素の重なりがないかを重点的に確認しました。

  5. App Store Connectでの説明の追加: 再申請時には、App Store Connectの「App Review Information」セクションで、今回のリジェクト内容と、それに対する修正内容を具体的に説明する文章を追加しました。これにより、審査担当者が我々の修正内容を理解しやすくなるように配慮しました。

変更後のコード例（概念的な説明）

以下は、UIの修正を概念的に示すDartコードの抜粋です。実際のコードは、プロジェクトの構造によって異なります。

Dart

import 'package:flutter/material.dart';
import 'package:youtube_player_flutter/youtube_player_flutter.dart';

class VideoPlayerScreen extends StatefulWidget {
  final String videoUrl;

  const VideoPlayerScreen({Key? key, required this.videoUrl}) : super(key: key);

  @override
  State<VideoPlayerScreen> createState() => _VideoPlayerScreenState();
}

class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
  late YoutubePlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = YoutubePlayerController(
      initialVideoId: YoutubePlayer.convertUrlToId(widget.videoUrl)!,
      flags: const YoutubePlayerFlags(
        autoPlay: true,
        mute: false,
        // 規約に準拠するために、デフォルトのUI表示を優先させる設定を検討
        // showControls: true, // デフォルトでtrueだが、確認
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('YouTube Video Player'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            YoutubePlayer(
              controller: _controller,
              showVideoProgressIndicator: true,
              progressIndicatorColor: Colors.blueAccent,
              // 以下のbottomActionsやprogressColorsなどは、
              // YouTubeのブランディングガイドラインに抵触しない範囲でカスタマイズするか、
              // デフォルトのまま使用することを推奨します。
              // 規約違反にならないように、UI要素の重なりには細心の注意を払います。
              bottomActions: [
                // 規約に沿ったコントロールUIを配置
                CurrentPosition(),
                ProgressBar(isExpanded: true),
                RemainingDuration(),
                PlaybackSpeedButton(),
              ],
              // YouTubeロゴが常に見えるように、プレーヤーのレイアウトを調整
              aspectRatio: 16 / 9, // アスペクト比を適切に設定
            ),
            // カスタムUIを配置する場合、YouTubeロゴや公式コントロールバーと重ならないように配置
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Column(
                children: [
                  // 例：カスタムボタン
                  ElevatedButton(
                    onPressed: () {
                      // カスタムアクション
                    },
                    child: const Text('Custom Action'),
                  ),
                  // 他のカスタムUI要素
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

この修正により、アプリは無事にApp Storeの審査を通過し、公開されました。

まとめ

本記事では、Flutterで youtube_player_flutter を使用した際にiOSアプリがApp Storeでリジェクトされた具体的な事例と、その解決策について解説しました。

  • リジェクトの主な原因: YouTube API利用規約違反、特にYouTubeロゴの非表示やUIの改変が指摘されるケースが多い。
  • 解決策: YouTubeの公式ガイドラインを厳守し、UIの配置やカスタマイズに細心の注意を払うことで回避できる。
  • 重要なポイント: デフォルトのUI要素を尊重し、カスタムUIがそれらを覆い隠さないようにレイアウトを調整することが肝要。

この記事を通して、youtube_player_flutter を使用する際には、単に機能を実装するだけでなく、利用するAPIの規約を理解し、それに準拠した開発を行うことの重要性を改めてご理解いただけたかと思います。App Storeへの申請プロセスをスムーズに進めるために、今回紹介した内容が皆様の開発の一助となれば幸いです。

今後は、より高度な動画再生機能の実装や、他の動画プラットフォームとの連携といったトピックについても記事にする予定です。

参考資料