2022/07/27に更新

【GASでサボる】スプレッドシートをブラウザにする

スプレッドシートジョーク

スプレッドシートにブラウザを追加するGoogle Apps Scriptです。仕事してるフリしてネットサーフィンしたいときに役立つかも・・・？

こんな悩みを解決します

調べ物をしながらスプレッドシートを利用したいので、ブラウザを表示したい！
仕事してるふりしてネットサーフィンしまくりたい！

用意するもの

特にありません、今お使いのスプレッドシートに組み込むことが出来ます。

このスクリプトで出来ること

スプレッドシートのサイドバーに任意のウェブサイトを表示することが出来ます。
表示した後はリンク先に移動することも可能です。
戻る・進むボタンもついてます！

使い方

1.スクリプトの実行

まずはスクリプトを実行します。
上のメニューにある「スクリプト実行」から「こっそりネットサーフィン」を実行します。

2.URLの入力

プロンプトが表示されますので、開きたいURLを入力してください。
ちょっとワケがあり（後述）、検索エンジンとしてBingを開いてみます。

3.ブラウジング

ウェブサイトが開きました！
あとはもう好きに使うだけです！

検索キーワードを入れてみます。
この表示幅だとスマホ用表示になってもおかしくないはずですが、なぜかPC用表示のままで使いづらい・・・。

動画も再生できちゃいますね。
戻りたくなったらサイドバー上部にある「戻る」「進む」をご利用ください。

4.注意点

仕組みとしてはiframe（インラインフレーム）でURLを呼び出しているだけなのですが、iframeを拒否しているサイトはこのように表示することが出来ません。
GoogleやYahoo、YouTubeは開くことが出来ませんでした。開けるサイトはかなり限られそうです。

このGASを使った場合、ウィンドウタイトルの監視（会社でされがちですよね）は回避できると思います。
しかし、デスクトップ画面自体が監視されている場合や、ファイアウォール等で取得されている通信ログは誤魔化せませんのでご注意ください。

スクリプト

スクリプトは業務に影響がない環境で必ずテストしてから導入してください
何らかの損害が発生しても当方は一切の責任を負いません

/**
 * このスクリプトの説明、使い方はこちら。
 * https://myfunc.jp/items/00125/index.html
 */

function onOpen() {
  // スプレッドシートを開いたときに実行される関数

  // UIの取得
  const ui = SpreadsheetApp.getUi()

  // メニューの表示名
  const menu = ui.createMenu('スクリプト実行');

  // メニューに追加するボタン
  menu.addItem('こっそりネットサーフィン', 'display_sidebar_browser');

  // メニューを画面に追加する
  menu.addToUi();
}

function display_sidebar_browser() {

  // プロンプトを表示するためにUIオブジェクトを取得
  const ui = SpreadsheetApp.getUi();
  
  // プロンプトを表示し、アクセスしたいURLを入力してもらう
  const response = ui.prompt('開きたいURLを入力してください', ui.ButtonSet.OK_CANCEL);

  // キャンセルが押されたらスクリプトを終了する
  if(response.getSelectedButton() == ui.Button.CANCEL){
    return;
  }

  // 開きたいURLを指定
  const url = response.getResponseText();

  // 画面表示用のHTMLソースコード
  const source = `
  <!DOCTYPE html>
  <html>
    <head>
      <base target="_top">
    </head>
    <body>
      <div>
        <button onclick="history.back()">戻る</button>
        <button onclick="history.forward()">進む</button>
      </div>
      <iframe src="${url}" frameborder="no" scrolling="yes" height="600"></iframe>
    </body>
  </html>
  `

  // ソースコードをもとにサイドバーを表示
  const html = HtmlService.createHtmlOutput(source);
  html.setTitle('ひみつのブラウザ');
  SpreadsheetApp.getUi().showSidebar(html);

}