スクリーンショット_2018-12-14_23

[Android-9]YouTube動画(どうが)の再生(さいせい)!!

AndroidアプリでYouTube動画(どうが)を再生(さいせい)してみましょう!

ライブラリのダウンロードと設定(せってい)

まず、YouTubeをプログラムで操作(そうさ)するために必要(ひつよう)なライブラリをダウンロードします。

ダウンロードしたら、ダブルクリックして解凍(かいとう)します。

Android Studioをひらいて、画面左上(がめんひだりうえ)にある「Android▼」をクリックして「Project」を選択します。

プロジェクト名(めい)の矢印(やじるし)アイコン「▶」をクリックして、「プロジェクト名」→「app」をひらきます。

「app」フォルダ内(ない)の「libs」フォルダへ解凍(かいとう)した「YouTubeAndroidPlayerApi.jar」をマウスでドラッグ・アンド・ドロップします。

ファイルを移動(いどう)しますか?というメッセージが表示(ひょうじ)されたら、そのまま「OK」をクリックします。

ファイルがプロジェクトの中(なか)にはいりました。

つぎに画面左上(がめんひだりうえ)の「Project」をクリックして、「Android」をクリックします。

「Gradle Scripts」の「build.gradle(Module: app)」をダブルクリックしてひらきます。

そのファイルの中の「dependencies」の欄(らん)に、次(つぎ)のように追加(ついか)します。

compile files('libs/YouTubeAndroidPlayerApi.jar')

ファイルのなかは次(つぎ)のようになります。

apply plugin: 'com.android.application'

android {
    compileSdkVersion 28
    defaultConfig {
        applicationId "com.coderdojo_ginowan.dojoapp.coderdojoginowanapp"
        minSdkVersion 16
        targetSdkVersion 28
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
    compile files('libs/YouTubeAndroidPlayerApi.jar')
}

Keyの作成(さくせい)

つづいて、APIを利用(りよう)するためのKeyを作成(さくせい)します。Keyの作成(さくせい)には、gmailが必要(ひつよう)です。事前(じぜん)に準備(じゅんび)してから、この後(あと)に進(すす)んでください。

次(つぎ)のWebサイトにアクセスして「Credentials page」をクリックします。

次(つぎ)のページで「作成(さくせい)」をクリックして、「APIキー」をクリックします。

「プロジェクト名(めい)」を入力(にゅうりょく)して、「作成(さくせい)」ボタンをクリックします。

APIキーが作成(さくせい)されました。「閉(と)じる」ボタンをクリックします。

次(つぎ)に、Android Studioをひらいて、YouTube動画(どうが)を再生(さいせい)するActivityを追加(ついか)します。

プロジェクト名(めい)を右(みぎ)クリックして、「New」→「Activity」→「Gallery」をクリックします。

「Empty Activity」をクリックして、「Next」をクリックします。

Activity Name:を入力(にゅうりょく)します。ここでは、「YoutubeActivity」としました。「Finish」をクリックします。

「YoutubeActivity.java」に、YouTube動画(どうが)を表示(ひょうじ)するIntentを追加(ついか)します。必要(ひつよう)なimport文(ぶん)も次(つぎ)のプログラムを参考(さんこう)にしながら追加(ついか)してください。

Intentの「YOUR_DEVELOPER_KEY」は、さきほど作成(さくせい)した開発(かいはつ)Keyをコピー・アンド・ペーストします。また、「VIDEO_ID」には、YouTube動画(どうが)のIDをコピー・アンド・ペーストします。
YouTube動画(どうが)のIDとは、次(つぎ)の部分(ぶぶん)です。

YoutubeActivity.java

package com.coderdojo_ginowan.dojoapp.coderdojoginowanapp;
import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import com.google.android.youtube.player.YouTubeStandalonePlayer;
public class YoutubeActivity extends AppCompatActivity {
   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_youtube);
       Intent intent = YouTubeStandalonePlayer.createVideoIntent(this, YOUR_DEVELOPER_KEY, VIDEO_ID);
       startActivity(intent);
   }
}

KEYはパスワードみたいな大切(たいせつ)なものです。他(ほか)の人(ひと)には伝(つた)えないように注意(ちゅうい)しましょう。

トップページの「activity_main.xml」をひらいて、ボタンを追加(ついか)、IDを入力(にゅうりょく)します。ここでは、「youtube_button」と入力(にゅうりょく)しました。

ボタンの表示(ひょうじ)を変更(へんこう)します。「TextView」→「text」の「・・・」をクリックします。

「Add new resource▼」をクリックします。

ボタンに表示(ひょうじ)する文字(もじ)を入力(にゅうりょく)します。ここでは、Resource name:を「main_youtube」に、Resource value:を「YouTube動画へ」としました。「OK」をクリックします。

また、ボタンの場所(ばしょ)も指定(してい)しましょう。

最後(さいご)に、トップページのプログラム「MainActivity.java」を開(ひら)いて、ボタンをクリックしたらYouTubeがひらくようにプログラミングします。

MainActivity.java

package com.coderdojo_ginowan.dojoapp.coderdojoginowanapp;
import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
public class MainActivity extends AppCompatActivity {
   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
       Button aboutButton = findViewById(R.id.about_button);
       aboutButton.setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View v) {
               Intent intent = new Intent(getApplication(), Main2Activity.class);
               startActivity(intent);
           }
       });
       Button webButton = findViewById(R.id.web_button);
       webButton.setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View v) {
               Intent intent = new Intent(getApplication(), WebPageActivity.class);
               startActivity(intent);
           }
       });
       Button youtubeButton = findViewById(R.id.youtube_button);
       youtubeButton.setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View v) {
               Intent intent = new Intent(getApplication(), YoutubeActivity.class);
               startActivity(intent);
           }
       });
   }
}

Runボタンをクリックして、スマートフォン画面(がめん)で確(たし)かめてみましょう。

ボタンをクリックします。

YouTubeが表示(ひょうじ)されました。

画面(がめん)回転(かいてん)ボタンをクリックすると、横(よこ)にすることもできます。

他(ほか)にも「Fragment(フラグメント)」という仕組(しく)みを使(つか)って、動画(どうが)の表示(ひょうじ)画面(がめん)をカスタマイズしたりする方法(ほうほう)もあります。参考(さんこう)サイトを見(み)ながら、チャレンジしてみてくださいね。

[Android] YouTube Android Player API で Youtube 動画を再生
https://dev.classmethod.jp/smartphone/android/android-youtube-android-player-api-movie-play/

子どもたちの新しい学びの場つくりへ、ご支援よろしくです!