Firebase Cloud Messaging を使用して Flutter アプリの通知を送受信する

1. はじめに

最終更新日: 2022 年 4 月 4 日

この Codelab では、Flutter を使用して Firebase Cloud Messaging（FCM）を使用してマルチプラットフォーム アプリを開発するプロセスについて説明します。アプリの実装を 1 つ記述し、Android、iOS、ウェブの 3 つのプラットフォームでシームレスにビルドして実行します。また、Flutter に FCM を統合する方法と、メッセージを受信して送信するコードを作成する方法についても学びます。最後に、このコードラボでは、FCM HTTP v1 API のプラットフォーム固有のブロック機能について説明します。この機能を使用すると、プラットフォームごとに異なる動作をする 1 つのメッセージを送信できます。

要件

Flutter に関する基本的な知識。

ラボの内容

• Flutter アプリのセットアップと作成の方法
• FCM の依存関係を追加する方法
• アプリに単一の FCM メッセージを送信する方法。
• トピック FCM メッセージをアプリに送信する方法

必要なもの

• Dart プラグインと Flutter プラグインで構成された Android Studio の最新の安定版

この Codelab は、次のいずれかのデバイスを使って実行できます。

• パソコンに接続されている物理 Android デバイス。
• Android Emulator（Android Emulator 上でアプリを実行するを参照）
• 任意のブラウザ（Chrome など）。

必要に応じて、iOS プラットフォームで Codelab を実行するには、iOS デバイス、Apple Developer アカウント、XCode がインストールされた macOS デバイスが必要です。

2. Flutter のセットアップ

Flutter 開発環境をすでに設定している場合は、このセクションをスキップしてください。

Flutter 開発環境を設定するには、次の手順を行います。

1. お使いのオペレーティング システムに対応した Flutter をダウンロードしてインストールします。インストール |フラッター
2. Flutter ツールがパスに追加されていることを確認します。
3. エディタの設定 |Flutter: エディタ用の Flutter プラグインと Dart プラグインを必ずインストールします。この Codelab の残りの部分では Android Studio を使用します。
4. コマンドラインから flutter doctor を実行します。これにより、設定がスキャンされ、修正が必要な不足している依存関係がリストされます。手順に沿って、欠落している重要な依存関係を修正します。一部の依存関係は必要ない場合もあります。たとえば、iOS 向けの開発を行う予定がない場合、CocoaPods の依存関係が欠けていても、ブロックの問題にはなりません。
5. 次のコマンドを実行して、Flutter アプリを fcmflutter ディレクトリ flutter create --org com.flutter.fcm --project-name fcmflutter fcmflutter に作成し、fcmflutter ディレクトリに移動します。

6. Android Studio で [File] -> [Open] に移動し、Flutter アプリのパスを探して [Open] をクリックして、Android Studio でプロジェクトを開きます。アプリコードは lib/main.dart ファイルにあります。

Android Studio のツールバーで下矢印をクリックして、Android デバイスを選択します。ターゲット セレクタが空の場合は、仮想 Android デバイスをインストールします。ウェブブラウザまたは iOS デバイスからアプリを起動する場合は、Chrome ブラウザまたは iOS シミュレータをインストールします。ターゲット デバイスを見つけるには、デバイスを手動で起動してリストを更新する必要があります。

[実行] をクリックしてアプリを起動します。

これで完了です。これで、Flutter アプリを作成できました。

3. Firebase と FlutterFire の設定

Flutter を使用して Firebase Cloud Messaging と統合するアプリを開発するには、以下が必要です。

• Firebase プロジェクト
• 動作中の Firebase CLI。
• FlutterFire のインストール。
• flutterfire configure で構成して生成されたアプリ。

Firebase プロジェクトを作成する

すでに Firebase プロジェクトがある場合は、この手順をスキップできます。

1. Google アカウントをお持ちの場合は、Firebase を開いて Google アカウントでログインし、[コンソールに移動] をクリックします。
2. Firebase コンソールで [プロジェクトを追加] をクリックします。手順に沿ってプロジェクトを作成します。[このプロジェクトの Google アナリティクスを有効にする] はこのプロジェクトで使用されないため、オンにしないでください。
3. プロジェクトを作成したら、[Project Overview] の横にある歯車アイコンをクリックして、プロジェクトの [Project Settings] に移動します。

プロジェクト ID はプロジェクトを一意に識別するために使用され、[プロジェクト名] とは異なる場合があります。プロジェクト ID は、後で FlutterFire を設定する際に使用します。

これで完了です。Firebase プロジェクトが正常に作成されました。

Firebase CLI を設定する

Firebase CLI を設定している場合は、この手順をスキップできます。

Firebase CLI リファレンスにアクセスして、Firebase CLI をダウンロードしてインストールします。次のコマンドを使用し、Google アカウントで Firebase にログインします。

firebase login

FlutterFire をセットアップする

1. コマンド flutter pub add firebase_core を使用して FlutterFire プラグインをインストールします。
2. FCM プラグイン flutter pub add firebase_messaging をインストールします。
3. FlutterFire CLI を設定します。dart pub global activate flutterfire_cli
4. Flutter で Firebase プロジェクトを構成します。flutterfire configure --project=fcm4flutter. 矢印キーと Space キーを使用してプラットフォームを選択するか、Enter キーを押してデフォルトのプラットフォームを使用します。

この Codelab ではデフォルトのプラットフォーム（Android、iOS、ウェブ）を使用しますが、選択できるのは 1～2 つのプラットフォームのみです。iOS バンドル ID の入力を求められたら、「com.flutter.fcm.fcmflutter」または独自の iOS バンドル ID（[company domain name].[project name] の形式）を入力します。コマンドが完了したら、Firebase コンソール ページを更新します。選択したプラットフォーム用のアプリが Firebase プロジェクトの下に作成されていることがわかります。

このコマンドは、lib ディレクトリに firebase_options.dart ファイルを生成します。このファイルには、初期化に必要なすべてのオプションが含まれています。

iOS 向け Cloud Messaging を設定する

1. Apple のデベロッパー ページに移動し、[キー] タブの [キーの作成] をクリックします。

2. キーの名前を入力し、[Apple Push Notifications services（APNs）] をオンにします。
3. キーファイルをダウンロードします。ファイル拡張子は .p8 です。
4. Firebase コンソールで、プロジェクトの [プロジェクトの設定] に移動し、[Cloud Messaging] タブを選択します。

5. [Cloud Messaging] タブで、iOS アプリの APNs キーファイルをアップロードします。[Cloud Messaging] タブの APNs キー ID と、チーム ID を入力します。チーム ID は、Apple メンバーシップ センターで確認できます。

4. FCM の準備

アプリが FCM からメッセージを受信するには、次の作業を行う必要があります。

• FlutterFire を初期化します。
• 通知権限をリクエストする。
• FCM に登録して登録トークンを取得します。

初期化

サービスを初期化するには、メイン関数（lib/main.dart）を次のコードに置き換えます。

// core Flutter primitives
import 'package:flutter/foundation.dart';
// core FlutterFire dependency
import 'package:firebase_core/firebase_core.dart';
// generated by 

flutterfire configure

import 'firebase_options.dart';
// FlutterFire's Firebase Cloud Messaging plugin
import 'package:firebase_messaging/firebase_messaging.dart';

// TODO: Add stream controller
// TODO: Define the background message handler

Future<void> main() async {
 WidgetsFlutterBinding.ensureInitialized();
 await Firebase.initializeApp(
   options: DefaultFirebaseOptions.currentPlatform,
 );

 // TODO: Request permission
 // TODO: Register with FCM
 // TODO: Set up foreground message handler
 // TODO: Set up background message handler

 runApp(MyApp());
}

次に、Android Studio で [Tools] -> [Flutter] -> [Flutter Pub Get] を実行して、FlutterFire を設定するで追加したパッケージを読み込み、Android Studio で適切な Intellisense 設定を使用してコードを表示します。

これにより、生成された firebase_options.dart ファイルからインポートされる現在のプラットフォームの DefaultFirebaseOptions.currentPlatform 用の FlutterFire が初期化されます。initializeApp は非同期関数であり、await キーワードにより、アプリケーションを実行する前に初期化が完了しています。

権限をリクエストする

通知を受信するには、アプリがユーザーに許可を求める必要があります。firebase_messaging が提供する requestPermission メソッドにより、権限を許可または拒否するようユーザーに求めるダイアログまたはポップアップが表示されます。

まず、このコードをメイン関数のコメント TODO: Request permission の下にコピーします。返された settings から、ユーザーが権限を付与したかどうかがわかります。権限をリクエストするのは、アクセスを必要とする機能をユーザーが使用する必要があるとき（ユーザーがアプリの設定で通知をオンにしたときなど）のみにすることをおすすめします。この Codelab では、わかりやすくするために、アプリの起動時に権限をリクエストします。

final messaging = FirebaseMessaging.instance;

final settings = await messaging.requestPermission(
 alert: true,
 announcement: false,
 badge: true,
 carPlay: false,
 criticalAlert: false,
 provisional: false,
 sound: true,
);

 if (kDebugMode) {
   print('Permission granted: ${settings.authorizationStatus}');
 }

次に、Android Studio のツールバーで、ターゲット セレクタから Chrome (web) を選択し、アプリを再度実行します。

その後、Chrome タブが起動され、権限をリクエストするポップアップが表示されます。Allow をクリックすると、Android Studio コンソールに Permission granted: AuthorizationStatus.authorized というログが表示されます。権限リクエストを許可またはブロックすると、その応答はブラウザにアプリとともに保存され、ポップアップは再度表示されなくなります。Android Studio でウェブアプリを再度実行すると、権限を求めるメッセージが再度表示されることがあります。

登録

このコードをコメント TODO: Register with FCM の下のメイン関数にコピーして、FCM に登録します。getToken 呼び出しは、アプリサーバーまたは信頼できるサーバー環境でユーザーにメッセージを送信するために使用できる登録トークンを返します。

// It requests a registration token for sending messages to users from your App server or other trusted server environment.
String? token = await messaging.getToken();

if (kDebugMode) {
  print('Registration Token=$token');
}

Android Studio のツールバーで、Android デバイスを選択してアプリを実行します。Android Studio コンソールで、登録トークンは次のように出力されます。

I/flutter ( 3717): Permission granted: AuthorizationStatus.authorized
I/flutter ( 3717): Registration Token=dch. . . D2P:APA9. . .kbb4

後でメッセージの送信に使用するため、テキスト エディタにコピーします。

uses-sdk:minSdkVersion 16 cannot be smaller than version 19 declared in library [:firebase_messaging]

ウェブでメッセージを受信するための追加の手順

ウェブアプリが登録トークンを取得して受信メッセージをリッスンするには、追加の 2 つのステップが必要です。サポートされているウェブプッシュ サービスへの送信リクエストを承認するには、ウェブから getToken に VAPID 鍵を渡す必要があります。

まず、Firebase コンソールで Firebase プロジェクトの [Cloud Messaging] タブを開き、[ウェブ設定] セクションまでスクロールして既存の鍵ペアを確認するか、新しい鍵ペアを生成します。ハイライト表示されたボタンをクリックして鍵をコピーし、vapidKey として使用できるようにします。

次に、[登録] セクションの登録コードをこのコードに置き換えて、vapidKey を更新します。

// TODO: replace with your own VAPID key
 const vapidKey = "<YOUR_PUBLIC_VAPID_KEY_HERE>";

 // use the registration token to send messages to users from your trusted server environment
 String? token;

 if (DefaultFirebaseOptions.currentPlatform == DefaultFirebaseOptions.web) {
   token = await messaging.getToken(
     vapidKey: vapidKey,
   );
 } else {
   token = await messaging.getToken();
 }

 if (kDebugMode) {
   print('Registration Token=$token');
 }

次に、プロジェクトのルートの web/ ディレクトリの下に firebase-messaging-sw.js ファイルを作成します。以下を firebase-messaging-sw.js にコピーして、ウェブアプリが onMessage イベントを受信できるようにします。詳細については、Service Worker での通知オプションの設定をご覧ください。

importScripts("https://www.gstatic.com/firebasejs/9.6.10/firebase-app-compat.js");
importScripts("https://www.gstatic.com/firebasejs/9.6.10/firebase-messaging-compat.js");

// todo Copy/paste firebaseConfig from Firebase Console
const firebaseConfig = {
 apiKey: "...",
 authDomain: "...",
 databaseURL: "...",
 projectId: "...",
 storageBucket: "...",
 messagingSenderId: "...",
 appId: "...",
};

firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();

// todo Set up background message handler

次に、[プロジェクトの設定] -> [全般] タブで下にスクロールして [ウェブアプリ] を見つけ、firebaseConfig コード セクションをコピーして firebase-messaging-sw.js に貼り付けます。

最後に、Android Studio ツールバーのターゲット選択ツールで Chrome (web) を選択し、アプリを実行します。Android Studio コンソールに、次のように登録トークンが出力されます。

Debug service listening on ws://127.0.0.1:61538/BLQQ3Fg-h7I=/ws
Permission granted: AuthorizationStatus.authorized
Registration Token=fH. . .ue:APA91. . .qwt3chpv

登録トークンをテキスト エディタにコピーし、後でそのトークンを使用してメッセージを送信できるようにします。

iOS でメッセージを受信するための追加手順

FCM からメッセージを受信するには、iOS デバイスで Xcode のプッシュ通知とバックグラウンド モードを有効にする必要があります。

1. Android Studio でプロジェクト名を右クリックし、[Flutter] -> [Open iOS module in Xcode] を選択します。
2. Xcode が起動したら、プロジェクト ターゲットの [Signing & Capabilities] タブで [Push Notifications] と [Background Modes] を有効にします。詳細については、アプリの構成をご覧ください。
3. Android Studio のツールバーで、ターゲット セレクタで iOS デバイスを選択し、アプリを実行します。通知権限が付与されると、Android Studio コンソールに登録トークンが出力されます。

これで、アプリが FCM に正常に登録されました。これで、次のセクションで説明するようにメッセージを受信する準備が整いました。

5. FCM からメッセージを受信する

メッセージ ハンドラを設定する

アプリがフォアグラウンド モードのときにメッセージを受信した場合は onMessage イベントを処理し、アプリがバックグラウンドで実行されているときは onBackgroundMessage イベントを処理する必要があります。

フォアグラウンド メッセージ ハンドラ

まず、イベント ハンドラから UI にメッセージを渡すために、ファイル main.dart のコメント TODO: Add stream controller の後にストリーム コントローラを追加します。

import 'package:rxdart/rxdart.dart';
// used to pass messages from event handler to the UI
final _messageStreamController = BehaviorSubject<RemoteMessage>();

依存関係 rxdart を追加するには、プロジェクト ディレクトリ flutter pub add rxdart から次のコマンドを実行します。

次に、Android Studio で [Tools] -> [Flutter] -> [Flutter Pub Get] を実行して rxdart.dart パッケージを読み込み、Android Studio で適切な Intellisense 設定を使用してコードを表示します。

次に、コメント TODO: Set up foreground message handler の後に、フォアグラウンド メッセージをリッスンするイベント ハンドラを追加します。ログを出力し、メッセージをストリーム コントローラにパブリッシュします。

 FirebaseMessaging.onMessage.listen((RemoteMessage message) {
   if (kDebugMode) {
     print('Handling a foreground message: ${message.messageId}');
     print('Message data: ${message.data}');
     print('Message notification: ${message.notification?.title}');
     print('Message notification: ${message.notification?.body}');
   }

   _messageStreamController.sink.add(message);
 });

次に、ファイル main.dart の元の State ウィジェットを次のコードに置き換えます。これにより、State ウィジェットのストリーム コントローラにサブスクライバーが追加され、ウィジェットに最後のメッセージが表示されます。

class _MyHomePageState extends State<MyHomePage> {
 String _lastMessage = "";

 _MyHomePageState() {
   _messageStreamController.listen((message) {
     setState(() {
       if (message.notification != null) {
         _lastMessage = 'Received a notification message:'
             '\nTitle=${message.notification?.title},'
             '\nBody=${message.notification?.body},'
             '\nData=${message.data}';
       } else {
         _lastMessage = 'Received a data message: ${message.data}';
       }
     });
   });
 }

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text(widget.title),
     ),
     body: Center(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: <Widget>[
           Text('Last message from Firebase Messaging:',
               style: Theme.of(context).textTheme.titleLarge),
           Text(_lastMessage, style: Theme.of(context).textTheme.bodyLarge),
         ],
       ),
     ),
   );
 }
}

Android/iOS 用バックグラウンド メッセージ ハンドラ

アプリがバックグラウンドで動作している間、メッセージは onBackgroundMessage ハンドラによって処理されます。ハンドラはトップレベル関数にする必要があります。UI は、メッセージの処理（インタラクションの処理を参照）またはアプリサーバーと同期することで、アプリがフォアグラウンドになったときに更新できます。

main 関数外のコメント TODO: Define the background message handler の後にハンドラ関数を作成し、main 関数のコメント TODO: Set up background message handler の後に呼び出します。

// TODO: Define the background message handler
Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
 await Firebase.initializeApp();

 if (kDebugMode) {
   print("Handling a background message: ${message.messageId}");
   print('Message data: ${message.data}');
   print('Message notification: ${message.notification?.title}');
   print('Message notification: ${message.notification?.body}');
 }
}

void main() {
 ...

 // TODO: Set up background message handler
 FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);

 runApp(MyApp());
}

ウェブ向けのバックグラウンド メッセージ ハンドラ

FlutterFire firebase_messaging バージョン 11.2.8 以降では、ウェブベースのプラットフォームでバックグラウンド メッセージを処理するには、別のフローが必要です。そのため、サービス ワーカーの web/firebase-messaging-sw.js に別のメッセージ ハンドラを追加する必要があります。

messaging.onBackgroundMessage((message) => {
 console.log("onBackgroundMessage", message);
});

アプリサーバーをセットアップする

1. Android Studio で https://github.com/FirebaseExtended/firebase_fcm_flutter/tree/main/server プロジェクトを開き、スターター サーバーコードをインポートします。このサーバーは Gradle ベースの Java プロジェクトであり、FCM メッセージ送信機能を提供する firebase-admin SDK と依存関係があります。
2. Firebase Admin SDK が FCM API の呼び出しを承認できるように、Firebase サービス アカウントを設定します。Firebase コンソールで [プロジェクトの設定] を開き、[サービス アカウント] タブを選択します。[Java] を選択します[Generate new private key] をクリックして構成スニペットをダウンロードします。
3. ファイルの名前を service-account.json に変更し、サーバー プロジェクトの src/main/resources パスにコピーします。

テスト メッセージを送信する

FcmSender.java ファイルで、sendMessageToFcmRegistrationToken はデータ ペイロードを含む通知メッセージを作成します。登録トークンは、メッセージの送信先となるアプリ インスタンスをターゲットにします。

private static void sendMessageToFcmRegistrationToken() throws Exception {
   String registrationToken = "REPLACE_WITH_FCM_REGISTRATION_TOKEN";
   Message message =
       Message.builder()
           .putData("FCM", "https://firebase.google.com/docs/cloud-messaging")
           .putData("flutter", "https://flutter.dev/")
           .setNotification(
               Notification.builder()
                   .setTitle("Try this new app")
                   .setBody("Learn how FCM works with Flutter")
                   .build())
           .setToken(registrationToken)
           .build();

   FirebaseMessaging.getInstance().send(message);

   System.out.println("Message to FCM Registration Token sent successfully!!");
 }

1. [登録] セクションからコピーした Android 登録トークンを、変数 registrationToken の値に貼り付けます。
2. 実行 アイコン をクリックして main 関数を実行し、FCM を介してユーザーにメッセージを送信します。

Android アプリがバックグラウンドで動作している場合、メッセージは通知トレイに表示されます。

Android アプリがフォアグラウンドにある場合、Android Studio コンソールに「フォアグラウンド メッセージを処理しています」というログが表示されます。UI は新しいメッセージのストリーミング コントローラにサブスクライブされているため、メッセージの内容も UI に表示されます。

登録トークンを貼り付けて、アプリサーバーまたはその他の信頼できるサーバー環境からメッセージを送信する場合も、同様の動作になります。

• ウェブアプリがバックグラウンドにある場合（別のウィンドウに隠れている場合や、別のタブがアクティブになっている場合など）は、ウェブ通知が表示されます。

• ウェブアプリがフォアグラウンドにある場合は、ウェブを右クリックして Inspect を選択すると、Chrome コンソールでログを表示できます。メッセージの内容も UI に表示されます。

6. トピック メッセージを送信する

FCM HTTP v1 API のプラットフォーム オーバーライド機能を使用すると、メッセージ送信リクエストの動作をプラットフォームごとに変えることができます。この機能のユースケースの 1 つは、プラットフォームに応じて異なる通知メッセージ コンテンツを表示することです。この機能は、トピック メッセージングで複数のデバイス（複数のプラットフォームにまたがることがあります）をターゲットにする場合に最も広く使用されます。このセクションでは、プラットフォームごとにカスタマイズされたトピック メッセージをアプリに受信させる手順を説明します。

クライアントからトピックに登録する

トピックにサブスクライブするには、Flutter アプリの main.dart ファイルにある main 関数の最後に messaging.subscribeToTopic メソッドを呼び出します。

// subscribe to a topic.
const topic = 'app_promotion';
await messaging.subscribeToTopic(topic);

[省略可] ウェブ用のサーバーからトピックにサブスクライブする

ウェブ プラットフォームで開発していない場合は、このセクションをスキップできます。

FCM JS SDK は現在、クライアントサイドのトピック サブスクリプションをサポートしていません。代わりに、Admin SDK のサーバーサイド トピック管理 API を使用してサブスクライブできます。このコードは、Java Admin SDK を使用したサーバーサイドのトピック サブスクリプションを示しています。

 private static void subscribeFcmRegistrationTokensToTopic() throws Exception {
   List<String> registrationTokens =
       Arrays.asList(
           "REPLACE_WITH_FCM_REGISTRATION_TOKEN"); // TODO: add FCM Registration Tokens to
   // subscribe
   String topicName = "app_promotion";

   TopicManagementResponse response =     FirebaseMessaging.getInstance().subscribeToTopic(registrationTokens, topicName);
   System.out.printf("Num tokens successfully subscribed %d", response.getSuccessCount());
 }

アプリサーバーを開き、実行 アイコン をクリックして、FcmSubscriptionManager.java ファイル内の main 関数を実行します。

プラットフォーム オーバーライドを含むメッセージをトピックに送信する

これで、トピック プラットフォーム オーバーライド メッセージを送信する準備が整いました。次のコード スニペットでは、

• ベース メッセージとタイトル「A new app is available」を使用して送信リクエストを作成します。
• このメッセージは、iOS とウェブ プラットフォームで「A new app is available」というタイトルのディスプレイ通知を生成します。
• このメッセージにより、「A new Android app is available」というタイトルの表示通知が生成されます。利用できます

private static void sendMessageToFcmTopic() throws Exception {
   String topicName = "app_promotion";

   Message message =
       Message.builder()
           .setNotification(
               Notification.builder()
                   .setTitle("A new app is available")
                   .setBody("Check out our latest app in the app store.")
                   .build())
           .setAndroidConfig(
               AndroidConfig.builder()
                   .setNotification(
                       AndroidNotification.builder()
                           .setTitle("A new Android app is available")
                           .setBody("Our latest app is available on Google Play store")
                           .build())
                   .build())
           .setTopic("app_promotion")
           .build();

   FirebaseMessaging.getInstance().send(message);

   System.out.println("Message to topic sent successfully!!");
 }

FcmSender.java ファイルのメイン関数で、sendMessageToFcmTopic(); のコメント化を解除します。[実行] をクリックしてトピック メッセージを送信します。

7. まとめと次のステップ

ここまでのまとめとして、Flutter と FCM を使用したマルチプラットフォーム アプリ開発の魅力について学習しました。これには、環境のセットアップ、依存関係の統合、メッセージの送受信などが含まれます。詳細については、次の資料をご覧ください。

Codelab

• ユーザー認証やデータの同期など、Flutter が他の Firebase プロダクトと連携する仕組みについて詳しくは、Firebase for Flutter を理解するをご覧ください。
• アプリ内メッセージングやトピックなど、FCM の詳細については、FCM と FIAM を使用してユーザーにメッセージを送信する、および FCM トピックを使用した初めてのマルチキャスト プッシュ メッセージをご覧ください。

参照

• Firebase サイト
• Flutter のサイト
• FlutterFire Firebase Flutter ウィジェット
• Firebase YouTube チャンネル
• Flutter の YouTube チャンネル