[GAS]字幕作成用スプレッドシートからスライドを自動生成

2020年2月11日 11:52

Googleスプレッドシートの文字列データからGoogleスライドを自動生成するGASスクリプトを作成しました。

初めてnoteで記事書きます。
2019年10月頃から、ノンプロ研でプログラミング等の勉強をしています。
その勉強のアウトプットを載せていこうかと思います。

そもそもの始まりは

2020年1月のノンプロ研での英語学習法の分科会イベントです。そこで英語勉強法の一つとして、好きな海外ドラマを英語字幕で見る、という勉強法の紹介があったのがきっかけです。(英語は楽しんで学ぶのがGood!)

私は今まであまり海外ドラマを見る機会がなかったので、何か面白いドラマがないかを探していました。
後日、etauさんのステマにひっかかり「Game of Thrones」が気になったところ、fishbさんやKeiko先生からも面白いよ！というお勧めコメントも頂いたので、見てみることにしました。→うん。面白い。

しかし、いちおう我が家のAmazonPrimeビデオで見れるのですが、残念ながら肝心の字幕が日本語しか出ません。Huluでは英語字幕が出るらしいので、課金すればいいだけなのですが、、、

Huluに課金できないほどお金がないわけじゃないんです！(お金ないけど)

Hulu見れるようになると、元を取りたくなって他の映画やドラマも見てしまい、そうなるとお金より大切な「時間」が失われていきます。今年はプログラミングや英語の勉強で時間を使っていきたいので、今は出来る限り時間の使い道を増やし過ぎないようにしたいのです。

話はそれましたが、そういう事情から、Primeビデオで英語字幕を見る方法を考えました。
で、ネットで調べていたのですが、「Game of Thrones」ほど有名な海外ドラマだと、台詞の英文テキストが載っているサイトがいくつかあります。
私が見たサイトは個人の勉強用であればコピペOKのようです。
その英文をスライドに貼り付けて、PCのモニタに表示することで、英語字幕として使えないかと思いました。

ただ、1話分(1時間程度)の台詞はテキストで600～800行あります。これをちまちまスライドに貼り付ける作業は普通の人間には不可能なので、GAS(Google Apps Script)で自動生成するスクリプトを書いてみました。

参考にしたのは、以下の隣ITのブログ、あとはGASリファレンスなど。
(ほぼほぼ隣ITのブログ丸写しですw)

Google Apps Scriptソースコード

function makeSlides() {
 
 // スプレッドシート名＝出力スライド名を設定(毎回変更)
 var title = 'シート名を貼り付け';
 
 // テンプレートのスライドIDを設定(最初の1回だけ設定)
 var sourceFileId ='スライドIDを貼り付け';

 // スプレッドシート読み込み
 var ss = SpreadsheetApp.getActiveSpreadsheet();
 var valuesShape = ss.getSheetByName(title).getDataRange().getValues();

 // スライドをテンプレからコピーし、open
 var presentation = SlidesApp.openById(copyTemplate(sourceFileId, title))
 
 // コピー元スライドを設定
 var baseSlide = presentation.getSlides()[0];

 // シートの行数ループ
 for(var i = 0; i < valuesShape.length; i++){

   // 貼り付けるテキスト取得
   var script = valuesShape[i][0];

   // 貼り付け先スライド、シェイプ取得
   var slide = presentation.getSlides()[i];
   var id = slide.getShapes()[0].getObjectId();
   var shape = presentation.getPageElementById(id).asShape();

   // テキスト貼り付け
   shape.getText().setText(script);

   // スライド追加
   presentation.appendSlide(baseSlide);
 }

 // 最後のスライドを削除
 presentation.getSlides()[valuesShape.length].remove();
 
}


// テンプレスライドをコピーして新しいスライドのIdを返す関数
function copyTemplate(sourceFileId, newFileName){

 // スライドIDからファイルオブジェクトを取得
 var sourceFile = DriveApp.getFileById(sourceFileId);

 // テンプレスライドをコピー
 var newFile = sourceFile.makeCopy(newFileName); 

 // コピーしたスライドのIdを返す
 return newFile.getId();

}

スライドの作り方

①まず、字幕スライドのテンプレートスライドを作成します。
　タイトルのみ、1ページのみのスライドにします。
　私は黒地に白字で、なるべく大きめ(48p)のフォントを選びました。
　↓こんな感じです。テキストは入れなくてもOK。

テンプレートスライド

②次に、新規スプレッドシートを作成します。
　そのスプレッドシートに英語台詞を1行1文で貼り付けます。
　↓こんな感じです。A列にだけテキストがある状態。

スプレッドシートサンプル

③次に、そのスプレッドシートのスクリプトエディタを立ち上げ、上に記載したコードを登録します。

④コードの7行目のsourceFileId変数に、①で作成したスライドのIDを記載します。スライドIDの取り方はこちらを参照。

⑤コードの4行目のtitle変数に②で作成したシート名を記載します。

⑥スクリプトを保存し、実行ボタンを押します。
　スライドが多い場合は少し時間かかります。
　(私の場合は600行～800行で1～2分程度)

⑦完了するとスプレッドシートがあるフォルダにスライドが生成されます。
　ファイル名は⑤で設定したシート名と同じです。
　↓出来上がりはこんな感じ。長い文はちゃんと折り返してくれます。

これでスライドが完成しました！複数スライドを作りたい場合はスプレッドシートのシートを増やして⑤以降を繰り返せばOKです。

使ってみる

スライドができたら、PCまたはモニターをTVの前に置きます。
↓こんな感じです。(イメージ画像です。我が家ではないです)

スライドはプレゼンモードにしておきます。TVで動画を再生したら、台詞が進むごとにスライドを進めます。ここの操作は残念ながら手動です。
(自動化のアイデアある方は教えて下さい)

私はプレゼン用のリモコン(レーザーポインタについてるやつ)で操作していますが、ワイヤレスマウスとかでも良いと思います。
ちょっと台詞を振り返りたい場合は動画を止めてスライドを戻せばOK。

PC＋大きいモニターで動画を見ている人は、同じ画面でスライドと動画を上手いこと並べて表示してみてもいいかもしれません。

まとめ

今回はGoogleスプレッドシートの文字列データからGoogleスライドを自動生成するGASスクリプトを作成してみました。GAS便利ですね～

実際やってみるとなんか貧乏臭くて切なくなりますが、このやり方だと英語字幕と日本語字幕が両方同時に見れるのがメリットです。英語の原文さえ見つければ簡単にできますので、興味のある方はご活用下さい。

なお、私はGASは完全に素人なので、コードの中身について学びたい方は私が加入しているノンプロ研へどうぞ。初心者講座もあります。(宣伝)

こんなことのためにプログラミング勉強しているわけではないのですが、こんなことにプログラミングが使えるとちょっとうれしいですね。(自己満足)

最後に、今回のきっかけを与えて頂いた、Keiko先生、etauさん、fishbさん、そしてちょうどいいタイミングで隣ITのブログでスライド操作方法を書いておいて頂いたタカハシさん、ありがとうございました。

最後まで読んで頂き、ありがとうございました。