見出し画像

GASを使ってスプレッドシートからフラッシュカードを作成する

giga_koumu

GASを使って、スプレッドシートのデータから、Googleスライドでフラッシュカードを自動的に作成します。

今回の手順
１　スプレッドシートを作成し、英語と日本語訳を入力。
２　スプレッドシートにGASを貼り付ける。
３　スプレッドシートにGAS実行用のボタンを作成します。
４　ボタンを押すと、Googleスライドでフラッシュカードが作成される。

今回作成したスプレッドシートは、英語と日本語訳を変更すれば、
何度でも使えます。

では、早速作ってみましょう。

手順１　スプレッドシートを作成し、英語と日本語訳を入力。

①スプレッドシートを作成し、
・１行目にはタイトルを入力（A1には英語、B1には日本語訳）
・２行目以降は、A列に英語、B列に日本語訳を入力します。

②必要な英語と日本語訳を入力したら、手順１は終了です。

A列には英語、B列には日本語訳を入力


手順２　スプレッドシートにGASを貼り付ける。

①メニューから『拡張機能』→『Apps Script』を選択。

Apps Scriptを選択

②Google Apps Script（GAS）のエディタが起動する。

Google Apps Scriptのエディタ

③エディタ部分のfunction myFunction()以下を全て削除します。

④次のコードをコピーして、エディタ部分に貼り付けます。
※コードについての解説は、ページの一番下に解説を載せておきます。参考にしたい場合にはどうぞ。

function makeFlashcards() {
  // アクティブなシートの取得
  let sheet = SpreadsheetApp.getActiveSheet();
  let lastRow = sheet.getLastRow();

  // スライドの定義
  let d = new Date();
  let date = Utilities.formatDate(d, "JST", "yyyyMMdd_HHmm_ssSSS");
  let slides = SlidesApp.create('フラッシュカード_' + date);
  
  // 最初のページ（スライド）を削除
  let firstSlide = slides.getSlides()[0];
  firstSlide.remove();

  // スプシのデータを一度に取得
  let data = sheet.getRange(2, 1, lastRow - 1, 2).getValues();

  data.forEach(function(row) {
    let en = row[0];  // 英語
    let jp = row[1];  // 日本語

    // 英単語のスライドを作成 テキストサイズを140ptに
    let enSlide = slides.appendSlide(SlidesApp.PredefinedLayout.BLANK);
    let enShape = enSlide.insertShape(SlidesApp.ShapeType.TEXT_BOX, 0, 0, 720, 400);
    let enText = enShape.getText();
    enText.setText(en);
    enText.getTextStyle().setBold(true).setFontSize(140);
    enText.getParagraphStyle().setParagraphAlignment(SlidesApp.ParagraphAlignment.CENTER);
    enShape.setContentAlignment(SlidesApp.ContentAlignment.MIDDLE);

    // 日本語訳のスライドを作成 テキストサイズを100ptに
    let jpSlide = slides.appendSlide(SlidesApp.PredefinedLayout.BLANK);
    let jpShape = jpSlide.insertShape(SlidesApp.ShapeType.TEXT_BOX, 0, 0, 720, 400);
    let jpText = jpShape.getText();
    jpText.setText(jp);
    jpText.getTextStyle().setBold(true).setFontSize(100);
    jpText.getParagraphStyle().setParagraphAlignment(SlidesApp.ParagraphAlignment.CENTER);
    jpShape.setContentAlignment(SlidesApp.ContentAlignment.MIDDLE);
  });
}

⑤次のようになったら、プロジェクトを保存したいので、
フロッピーディスクのアイコンをクリックします。


エディタ部分にコードを貼り付けた状態
フロッピーディスクのアイコン（プロジェクトを保存）をクリック
プロジェクトが保存されます。

手順３　スプレッドシートにGAS実行用のボタンを作成する。

①スプレッドシートに戻って、
メニューから『挿入』→『図形描画』を選択。

図形描画を選択

②次のような画面が表示される。

図形描画の画面が表示される。

③メニューから図形→『ベベル（面取り）』を選択

上から４段目、一番左側のベベル（面取り）を選択
ベベル（面取り）

④適当な大きさにする。
（クリックしたままドラッグすると図形の大きさが変化する。）

⑤テキストボックスを選択して、テキストを配置する。

テキストボックスを選択

※今回、テキストは、『フラッシュカードの作成』とした。

テキストを配置

⑥右上の『保存して閉じるをクリック』すると、
スプレッドシート上に作成したボタンが現れる。

右上の『保存して閉じる』をクリック
スプレッドシート上に作成したボタンが現れる

⑦ボタンをクリックすると移動できるようになるので、
邪魔にならない場所に移動し、右上の３つの点をクリックすると
メニューが表示されるので、『スクリプトの割り当て』を選択する。

３つの点をクリックし、スクリプトの割り当てを選択

⑧『スクリプトを割り当て』が表示されるので、
入力ボックスに『makeFlashcards』と入力し、確定をクリックする。
※makeFlashcardsは、手順２で張り付けたコードの関数名（function名）

張り付けたコードの関数名を入力

⑨これで手順３が終了。

手順４　ボタンを押すと、Googleスライドでフラッシュカードが作成される。

いよいよ、最後の手順です。
早速、スプレッドシートのボタンを押してみましょう。

『スプリクトを実行しています。』と表示された後、
『認証が必要です』という画面が表示されますので、
OKを選択します。

※たとえ自分で作成したGASであっても、
始めてスクリプトを実行する場合、認証が必要になります。

※GASで何かを行う時は、必ずと言っていいほど行う作業になります。
手順に慣れてしまいましょう。

『認証が必要です』と表示されます。

OKを押すと、『アカウントの選択』が表示されるので、自分のアカウントを選択。

『このアプリはGoogleで確認されていません。』と表示されるので、
左下の詳細をクリック。

左下の詳細をクリック
無題のプロジェクト（安全ではないページ）に移動

『無題のプロジェクト（安全ではないページ）』に移動をクリック

すると、
『無題のプロジェクトがGoogle アカウントへのアクセスをリクエストしています』と表示されるので、
下にスクロールして、『キャンセル』と『許可』が表示されるようにします。

下にスクロールできます。
下にスクロールすると『キャンセル』と『許可』が見えるようになります。

『許可』をクリックすると、ようやく先ほどのGASが使用可能になります。
自分で作成したスクリプトも許可を出さないと使用できないようになっています。
一度、リクエストを許可すれば同じスクリプトを実行する場合には認証がでなくなります。

改めて、ボタンを押して実行してみましょう。

『スプリクトを実行しています』と表示された後、
『スクリプトが終了しました』と表示されると思います。

Googleドライブ上に
『フラッシュカード_20241015_2200_12345』
のように、
『フラッシュカード_年月日_時分_秒ミリ秒』
という形式のGoogleスライドが作成されています。

スプレッドシートに入力した英語、日本語訳の順になっています。

作成されたGoogleスライド

このスプレッドシートは何度でも再利用できます。
また、このコピーして誰かにあげることもできます。（その場合、使用する人が初めに認証を行う必要があります。）

長々説明してきましたが、実際に行っている作業は、
スプレッドシートを作成
スプレッドシートからGASのエディタを開き、コードを貼り付け
スクリプトの実行
の３つのみです。
慣れてくれば、５分もあれば作成できるものです。

英語のフラッシュカードを作成するのに使用したり、
語句などを暗記したりするのに使えると思いますので、
ぜひ自分で作ってみて下さい。

お疲れさまでした。


以下、GASのコードについて、解説を載せておきます。
解説者はChatGPTです。

このGoogle Apps Script（GAS）のコードは、Googleスプレッドシートのデータをもとに、Googleスライドでフラッシュカードを自動的に作成するためのものです。具体的には、スプレッドシートにある英単語とその日本語訳を使って、英語のスライドと日本語のスライドを交互に作成するというものです。以下で詳細に解説します。

1. シートの取得とスライドの作成

let d = new Date(); let date = Utilities.formatDate(d, "JST", "yyyyMMdd_HHmm_ssSSS");
let slides = SlidesApp.create('フラッシュカード_' + date);

  • sheet: 現在アクティブになっているスプレッドシートを取得します。

  • lastRow: シート内で最後にデータが入力されている行番号を取得します。これにより、データの範囲を動的に決定します。

let d = new Date(); let date = Utilities.formatDate(d, "JST", "yyyyMMdd_HHmm_ssSSS");
let slides = SlidesApp.create('フラッシュカード_' + date);

  • d: 現在の日時を取得します。

  • date: 日付と時間を「yyyyMMdd_HHmm_ssSSS」という形式でフォーマットし、それをスライドのタイトルに使用しています。例えば、20241015_1123_00345のような形式です。これにより、ユニークなファイル名が生成されます。

  • slides: 新しいGoogleスライドを作成し、そのタイトルに「フラッシュカード_」に現在の日付・時間を加えた名前を付けています。

2. 最初のスライドの削除

let firstSlide = slides.getSlides()[0]; firstSlide.remove();

  • Googleスライドは作成時に自動で1枚のスライドが含まれますが、これは不要なため削除しています。

3. スプレッドシートのデータ取得

let data = sheet.getRange(2, 1, lastRow - 1, 2).getValues();

  • getRange(2, 1, lastRow - 1, 2): スプレッドシートの2行目から、1列目と2列目のデータを取得しています。lastRow - 1はヘッダー行を避けてデータの範囲を指定しているためです。

  • getValues(): 取得した範囲内のデータを2次元配列として取得します。1列目には英単語、2列目には日本語訳が入っています。

4. スライドの作成（ループ処理）

data.forEach(function(row) { let en = row[0]; // 英語 let jp = row[1]; // 日本語

  • forEachで取得したデータを1行ずつ処理します。各rowは2つの要素からなり、1つ目が英単語（en）、2つ目が日本語訳（jp）です。

英単語のスライド作成

let enSlide = slides.appendSlide(SlidesApp.PredefinedLayout.BLANK);
let enShape = enSlide.insertShape(SlidesApp.ShapeType.TEXT_BOX, 0, 0, 720, 400);
let enText = enShape.getText(); enText.setText(en);
enText.getTextStyle().setBold(true).setFontSize(140);
enText.getParagraphStyle().setParagraphAlignment(SlidesApp.ParagraphAlignment.CENTER);
enShape.setContentAlignment(SlidesApp.ContentAlignment.MIDDLE);

  • appendSlide(SlidesApp.PredefinedLayout.BLANK): 新しい空白スライドを追加します。ここで英単語用のスライドを作成します。

  • insertShape(SlidesApp.ShapeType.TEXT_BOX, 0, 0, 720, 400): スライドにテキストボックスを追加し、座標（0, 0）から横720、縦400のサイズに設定します。

  • setText(en): テキストボックスに英単語（en）を設定します。

  • getTextStyle().setBold(true).setFontSize(140): テキストを太字にし、フォントサイズを140ptに設定します。

  • getParagraphStyle().setParagraphAlignment(SlidesApp.ParagraphAlignment.CENTER): 段落の中央揃えを設定します。

  • setContentAlignment(SlidesApp.ContentAlignment.MIDDLE): テキストを縦方向に中央揃えにします。

日本語訳のスライド作成

let jpSlide = slides.appendSlide(SlidesApp.PredefinedLayout.BLANK);
let jpShape = jpSlide.insertShape(SlidesApp.ShapeType.TEXT_BOX, 0, 0, 720, 400);
let jpText = jpShape.getText(); jpText.setText(jp);
jpText.getTextStyle().setBold(true).setFontSize(100);
jpText.getParagraphStyle().setParagraphAlignment(SlidesApp.ParagraphAlignment.CENTER);
jpShape.setContentAlignment(SlidesApp.ContentAlignment.MIDDLE);

  • 英単語のスライドと同様に、日本語訳のスライドを作成します。違いとして、フォントサイズは100ptに設定されている点です。

まとめ

このスクリプトは、スプレッドシートに入力された英語とその日本語訳のデータを元に、それぞれの言語ごとにスライドを作成し、フラッシュカード形式で表示するためのものです。英語と日本語のスライドを交互に作成し、視覚的に学習をサポートする仕組みです。

この記事が気に入ったらサポートをしてみませんか？