Go to Qiita Advent Calendar 2024 Top
LoginSignup
12
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

スマートスピーカーAdvent Calendar 2019

Day 18
@sheep6box(山桜 ぱぱ)

起きてすぐに「おはホロ」が見たい！

Posted at

##はじめに
この記事はスマートスピーカー Advent Calendar 2019の18日目の記事です。

3行まとめ

  • Amazon Echo Showで動画を再生するスキルを作ったよ。
  • 動画は自前じゃなくてTewitterから検索して再生するよ。
  • VTuberの宝鐘マリンさんはすごく面白かわいいぞ。

前置き

皆さんは、バーチャルYouTuber（以下、VTuber）をご存じでしょうか？
彼ら彼女らは、YouTubeで動画を投稿・配信している人たちです。
通常のYouTuberさんとの大きな違いは、存在がバーチャル（3Dや絵）だということです。

自分は最近、宝鐘マリンさんというVTuberさんにハマりました。
Marine Ch. 宝鐘マリン
お話がとても上手で、話題も絶妙に古く、私はそんなたまにどこか30～40代な話題を話す彼女（17歳設定）に惹かれました。

そしてこの宝鐘マリンさんですが、VTuberの事務所であるホロライブプロダクション（以下、ホロライブ）に所属しています。
宝鐘マリンさんと同じく面白くてかわいいVTuberさんが大勢所属しており、事務所主導でも動画を投稿していたりと、箱推し（事務所まるごと全部応援）したくなる楽しさがあります。

毎日見ている動画

ホロライブさんの活動は活発です。

毎朝7時頃に「おはようホロライブ」（以下、おはホロ）という動画をTwitterに投稿しています。
この動画は、その日の天気・運勢を所属VTuberさんが紹介する動画です。
※朝テレビで見かける番組のVTuber版といった感じです。

事務所まるごと好きになった私は、朝起きてすぐに再生するほど楽しみにしています。
例えば今日（2019/12/18）のおはホロは下記となります。

スキルを作るきっかけ

先日、Alexaのイベントに初めて参加してきました。
Alexa スキル Learning Day tokyo 2019

イベント中、Alexaについて様々なお話を聞いていく中で、あることに気づきました。
毎朝の楽しみであるおはホロをもっと素早く見られるのでは、と。

朝一で動画を見るために私がしている動作を書きだすと7つあります。

  1. 起きる
  2. スマホを探す
  3. スマホの認証を解除する
  4. Twitterアプリを立ち上げる
  5. ホロライブのアカウントを開く
  6. おはホロのツイートを探す
  7. 動画の再生をクリック

それがAlexaなら2つで済みます。

  1. 起きる
  2. Alexaに声をかける（動画が再生される）

「起きた瞬間におはホロを見られる！」と気づいたわけです。

スキルを作る準備

まずはAlexaのスキルが作れるように、開発者アカウントを作りました。
Amazon開発者ポータル - Amazon Developer

イベントのワークショップで体験していたので、すぐでした。
普段使っているAmazonのアカウントでOKなのが嬉しいです。（AWSアカウントも要らない）

次に、おはホロのツイートを取得するためにTwitter APIを登録をしました。
英語なので大変でしたが、下記の記事を参考にさせて頂き、スムーズに登録できました。
Twitter API 登録 (アカウント申請方法) から承認されるまでの手順まとめ

スキルの実装

イベントのワークショップで「Hello, World!」と喋らせるスキルの開発を体験しました。
そのため、ワークショップの流れ同様にテンプレを使ってスキルを実装していきました。
Alexaスキル開発トレーニングシリーズ第1回: 初めてのスキル開発

テンプレ選択時に、Node.jsとPythonどちらを使うかが選べます。
ワークショップではNode.jsでしたので、同じくNode.jsを選択しました。

テンプレでスキルを作成した後、コードエディタ画面に入り
今回使うTwitter APIを登録するためpackage.jsonを下記のように変更しました。
※twitterを追加しただけです。

package.json
{
  "name": "sauce-boss",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "ask-sdk-core": "^2.6.0",
    "ask-sdk-model": "^1.18.0",
    "i18next": "^10.5.0",
    "twitter": "*"
  }
}

そして、同じくコードエディタ画面でindex.jsonにスキルを実装していきました。
Twitterの読み込みと各種キー設定を追加して、LaunchRequestHandlerの中身を変更しました。

index.js
const Alexa = require('ask-sdk-core');

// Twitter APIの設定
const twitter = require('twitter');
const client = new twitter({
  "consumer_key"        :"xxxxxxx",
  "consumer_secret"     :"xxxxxxx",
  "access_token_key"    :"xxxxxxx",
  "access_token_secret" :"xxxxxxx",
});

const Util = require('util.js');
const LaunchRequestHandler = {
  canHandle(handlerInput) {
      return handlerInput.requestEnvelope.request.type === 'LaunchRequest';
  },
  async handle(handlerInput) {
      // ツイートを検索（アカウント指定、RTは含めない、動画付き、ハッシュタグ指定。1件だけ。ツイートの情報全部取得）
      const params = {q:'from:hololivetv exclude:retweets filter:native_video #おはようホロライブ', count:1, tweet_mode: 'extended'};
      let searchData = await client.get('search/tweets', params);
      let tweet = searchData.statuses[0]; // 1件目のツイート

      // ツイートに動画の入ってる情報があるか念のためチェック   
      if (tweet.extended_entities) {
          //ある場合

          // 動画情報を取得
          var video_info = tweet.extended_entities.media[0].video_info;

          // 動画の各ビットレートを取得（1つの動画でも複数のビットレートでわかれて動画URLがある）
          var var_length = video_info.variants.length;
          var video_index = [];
          var video_bitrate = [];
          for (var k = 0; k < var_length; k++) {
              if(video_info.variants[k].content_type == "video/mp4") {
                  video_index.push(k);
                  video_bitrate.push(video_info.variants[k].bitrate);
              }
          }

          // ビットレートが最大の動画URLを取得（一番キレイなのが見たい！）
          var max_index = video_index[video_bitrate.indexOf(Math.max.apply(null, video_bitrate))];
          var video_url = video_info.variants[max_index].url;

          // 動画を再生する（動画URLとタイトルとサブタイトル）
          return handlerInput.responseBuilder
              .addVideoAppLaunchDirective(video_url, "おはようホロライブ", "今日の動画")
              .getResponse();
      } else {
          // ない場合

          // 音声を再生する
          return handlerInput.responseBuilder
              .speak('動画が見つかりませんでした')
              .withShouldEndSession(true)
              .getResponse();
      }
  }
};

// 以下、変更無し

Twitter APIに関しては、下記記事を参考にさせて頂きました。
Alexa + Twitter のスキルの作り方の一例
(17/01/06追記)twitterで特定ユーザの画像を全部ダウンロードする(動画追加)

Alexaの動画再生に関しては、下記記事を参考にさせて頂きました。
http://android-smart.com/2019/06/alexaskilldevelopvideo.html

完成品

完成したのがこちらです。やったぜ！

はまったところ

Twitter APIで取得したツイートのうち、動画付きなのに動画URLが含まれない場合がありました。
ツイート内容の文字数が多い場合に省略されてしまうようです。
下記記事を参考にtweet_mode: 'extended'を指定することで、動画URLを取得することができました。
Twitter APIで取得したつぶやきが「truncated=true」で切れてしまう！

Alexaの開発者コンソールには、シミュレーターがついています。
実機がなくても、その場でスキルの動作検証をできるので非常にありがたいのですが、このシミュレーターは動画再生まではしてくれません。
ですので、動画を再生するスキルを検証したい場合、手元に実機が必要となります。
※これに気づいた時点ではまだ実機購入前でしたので、本当に再生されるか分からず購入して届くまでドキドキでした。

最後に

テンプレートとたくさんの記事に救われ、幸いにも実装はすぐに終わりました。
そのため、イベントに参加した翌々日の朝から私の朝は一変しました。
朝起きて布団の中から目も開けずに「Alexa、おはホロを開いて」と唱えるだけで、大好きなホロライブの最新動画が再生されるのです。
ありがとう、Alexa。ありがとう、Amazon。ありがとう、きっかけをくれたイベントに登壇された方々。

日々の生活を変えるきっかけは、どこに落ちているか分かりません。
これからもいろんなイベントに参加して、人生をより楽しんでいこうと思います。

あ！とこで宝鐘マリンさんはもうチェックされましたか？
面白かわいいのでぜひ！ぜひ！
Marine Ch. 宝鐘マリン

12
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
12
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?