Google Docs, Sheets, Slides上でのJavascript実行方法 #JavaScript

動機

~~ネタです。~~
ある日、Googleのドキュメント、スプレッドシート、スライドで
Javascriptを実行したくなる時が、来るかもしれないので（来るか？）、記事を書いておきます。
未来は、予測不可能ですので。ネタ元はこちら。

スライドとかで、コード見せて実行してみるとか、
もしかしたら少しは需要あるかも。

警告
本記事でeval()を使用しています。
しかしeval()は、危険な関数として知られています。
この記事では、引用元のコードを変更せず利用しています。
実際に使われる際には、Functionなど代替手段も、ご検討ください。
以下の記事が参考になります。
eval() - JavaScript | MDN

Google Docs

ドキュメントの場合は、ネタ元と同じです。
以下の手順で、実行が可能です。

ドキュメント作成
メニューバーの拡張機能から、Apps Scriptを選択
エディターが開くので、下記スクリプトを貼り付け&保存
ドキュメントを開きなおすと、メニューバーにCode Runnerが追加される
ドキュメントに、Javascriptを記述
メニューバーのCode Runner > 🦄 Run JavaScript（1回目は、アクセスを許可する必要があります）

main.gs

/**
* @OnlyCurrentDoc
* ネタ元
* https://www.labnol.org/javascript-code-in-google-docs-220922
*/

function codeRunner() {
  const doc = DocumentApp.getActiveDocument();
  const text = doc.getBody().getText();
  const response = eval(text);
  DocumentApp.getUi().alert(response);
}

function onOpen() {
  const ui = DocumentApp.getUi();
  const menu = ui.createMenu('Code Runner');
  menu.addItem('🦄 Run JavaScript ', 'codeRunner');
  menu.addToUi();
}

ドキュメントの方は、なんでもいいです。
例として、下記のようなスクリプトを書いて動かしてみます。

Google Docuemnt

/*
* Calculate the days left until next Christmas
* ネタ元
* https://www.labnol.org/javascript-code-in-google-docs-220922
*/

function daysUntilChristmas() {
  const now = new Date();
  const christmas = new Date(now.getFullYear(), 11, 25);
  if ( now.getMonth() == 11 && now.getDate() > 25) {
    christmas.setFullYear(christmas.getFullYear() + 1);
  }
  const one_day = 1000 * 60 * 60 * 24;
  const days_left = Math.ceil((christmas.getTime() - now.getTime()) / (one_day));
  return `クリスマスまで残り${days_left}日！ 🎅`;
}

daysUntilChristmas();

画像のようになれば成功です！

Google Sheets

スプレッドシートも、似たような手順です。

今回のスクリプトでは、アクティブセルを実行するようにしています。getActiveRangeで取得しているので、変えたい時は、ここを変えてみてください。

スプレッドシートは図形とかに、スクリプト埋め込めたりできます。
なので、トリガーの設置はメニューバー以外にもできるので試してみてください。

以下の手順で、実行が可能です。

スプレッドシート作成
メニューバーの拡張機能から、Apps Scriptを選択
エディターが開くので、下記スクリプトを貼り付け&保存
スプレッドシートを開きなおすと、メニューバーにCode Runnerが追加される
スプレッドシートに、Javascriptを記述
メニューバーのCode Runner > 🦄 Run JavaScript（1回目は、アクセスを許可する必要があります）

main.gs

/**
 * @OnlyCurrentSheet
 */

function codeRunner() {
  const text = SpreadsheetApp.getActiveRange().getValue();
  const response = eval(text);
  SpreadsheetApp.getUi().alert(response);
}

function onOpen() {
  const ui = SpreadsheetApp.getUi();
  const menu = ui.createMenu('Code Runner');
  menu.addItem('🦄 Run JavaScript ', 'codeRunner');
  menu.addToUi();
}

スプレッドシートでも、同じコードを動かしてみます。

GoogleSheet

/*
* Calculate the days left until next Christmas
* ネタ元
* https://www.labnol.org/javascript-code-in-google-docs-220922
*/

function daysUntilChristmas() {
  const now = new Date();
  const christmas = new Date(now.getFullYear(), 11, 25);
  if ( now.getMonth() == 11 && now.getDate() > 25) {
    christmas.setFullYear(christmas.getFullYear() + 1);
  }
  const one_day = 1000 * 60 * 60 * 24;
  const days_left = Math.ceil((christmas.getTime() - now.getTime()) / (one_day));
  return `クリスマスまで残り${days_left}日！ 🎅`;
}

daysUntilChristmas();

画像のようになれば成功です。

出力は、アラートで出していますが、
隣のセルに書き出す、とかすればもっと見やすいかと思います。

Google Slides

スライドも似たような感じです。
スライドに、スクリプトを書いたオブジェクト以外のものがあるとめんどいので、今回はコードを書いたオブジェクトのみを、スライドに置いています。

アクティブスライドを取得しに行くので、任意のスライドで実行できます。

以下の手順で、実行が可能です。

スライド作成
メニューバーのツールから、スクリプトエディタを選択
エディターが開くので、下記スクリプトを貼り付け&保存
スライドを開きなおすと、メニューバーにCode Runnerが追加される
スライドに、Javascriptを記述
メニューバーのCode Runner > 🦄 Run JavaScript（1回目は、アクセスを許可する必要があります）

main.gs

/**
 * @OnlyCurrentSlide
 */

function codeRunner() {
  const presentation = SlidesApp.getActivePresentation();
  const page = presentation.getSelection().getCurrentPage();
  // 要素を取得（今回は1個しかオブジェクトがないので決め打ち）
  // 複数ある場合はgetPageElementById(id)などで指定してあげるとよい
  const element = page.getPageElements()[0];
  const text = element.asShape().getText().asString();
  const response = eval(text);
  SlidesApp.getUi().alert(response);

}

function onOpen() {
  const ui = SlidesApp.getUi();
  const menu = ui.createMenu('Code Runner');
  menu.addItem('🦄 Run JavaScript ', 'codeRunner');
  menu.addToUi();
}

スライドでも、同じコードを動かしてみます。

GoogleSheet

/*
* Calculate the days left until next Christmas
* ネタ元
* https://www.labnol.org/javascript-code-in-google-docs-220922
*/

function daysUntilChristmas() {
  const now = new Date();
  const christmas = new Date(now.getFullYear(), 11, 25);
  if ( now.getMonth() == 11 && now.getDate() > 25) {
    christmas.setFullYear(christmas.getFullYear() + 1);
  }
  const one_day = 1000 * 60 * 60 * 24;
  const days_left = Math.ceil((christmas.getTime() - now.getTime()) / (one_day));
  return `クリスマスまで残り${days_left}日！ 🎅`;
}

daysUntilChristmas();

画像のようになれば成功です。

スライドは、
プレゼン中に実行結果を見せたりできるので、~~そんな奴いるか？~~
多少は使い道あるかもしれないですね。

最後に

GAS(Google Apps Script)は、Googleのサービス（やそれ以外のもの）に対して、簡単にいろいろなことを実現できるので非常に便利です。
しかも、基本javascriptで動くので、大体の人が触れるからよいですね。

面白いと思ったら、「いいね」してくれると励みになります。
ではまた。

参考資料

How to Use Google Docs as a Code Runner

Document Service

Spreadsheet Service

Slides Service