Google スプレッドシートでYouTubeの埋め込みプレーヤーを表示させる。でもあまり使えない。

まとめ

  • Google Apps Scriptを使ってスプレッドシートのサイドバーにYouTubeの埋め込みプレーヤーを表示させるよ！
  • でもGoogle Apps Scriptの実行は編集権限がないとできないよ！
  • つまり閲覧権限だけしかない場合は実行できないよ！

実行イメージ

www.youtube.com
ちなみにサーモン爆破は10周年らしいです。マジか……

スプレッドシートのデータ

yttest - Google スプレッドシート

やったこと

以下の2ファイルを作成。

code.gs

function onOpen() {
  const ui = SpreadsheetApp.getUi();
  ui.createMenu('Player').addItem('Show Player', 'showPlayer').addToUi();
}

function showPlayer() {
  const ui = SpreadsheetApp.getUi();
  const html = HtmlService.createTemplateFromFile('player').evaluate();
  html.setTitle('Player');
  ui.showSidebar(html);
}

function getCurrentRowData() {
  const sheet = SpreadsheetApp.getActiveSheet();
  const range = sheet.getActiveCell();
  const id = sheet.getRange(range.getRow(), 1).getValue();
  const start = sheet.getRange(range.getRow(), 3).getValue();
  return {'id': id, 'start': start};
}

player.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <div id="ytplayer"></div>
    <div>
      <input type="button" value="Start"
        onClick="google.script.run.withSuccessHandler(playVideo).getCurrentRowData()">
    </div>
    <script>
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('ytplayer', {
          height: '200',
          width: '200',
          videoId: '',
          events: {}
        });
      }

      function playVideo(videoInfo) {
        player.loadVideoById({'videoId': videoInfo.id,
                              'startSeconds': videoInfo.start});
      }
    </script>
  </body>
</html>

これを拡張機能のApps Scriptで設定後、再度スプレッドシートを開くとメニューバーに「Player」が表示、その中の「Show Player」を押下するとサイドバーにYouTubeの埋め込みプレーヤーが表示されます。
サイドバーの「Start」ボタンを押下すると、スプレッドシート中で現在選択中の行の情報で再生を開始します。

問題点

  • サイドバーの幅は300px固定のため、映像は見えないものと思ってください。音を聞く用途なら使えると思います。最初これやろうと思ったのもその用途が目的でした。
  • Apps Scriptが編集権限がないと実行できないらしく、閲覧権限のみでスプレッドシートを開いてもメニューバーに「Player」が表示されません。

結論

GitHub - rutilicus/youtube-custom-music-playerのいい代替手段にはならなかった。(ダイマ)