かずきち。の日記

サーバサイドエンジニアのつぶやき

トップ > Program > オンラインの会議を迅速化！Googleスプレッドシートの使いこなし術！サイドバーに時計を表示させる方法について解説します！

オンラインの会議を迅速化！Googleスプレッドシートの使いこなし術！サイドバーに時計を表示させる方法について解説します！

Program


Googleスプレッドシート使っていますか？

https://lh3.googleusercontent.com/PHjvBmaCx9FId_EWB2JnyIuhahnRd_RpjaFKytmrYG2uOdih5WgqBIwtc6jHo34nk5vomdZkuGuJhLMiKvJpmd9gLDZqaB_I4lRUiZXNYAZKHqlDVH1j=s0
引用：
https://www.google.com/intl/ja_jp/sheets/about/

GoogleスプレッドシートとはざっくりGoogleが提供しているオンラインのエクセルのようなものです。
オンラインなので同時編集ができるのがメリットですが、魔改造するとスプレッドシートは威力を発揮します。
今回はその方法について解説します。

まずはGoogleスプレッドシートは普通に使っていると単なるエクセルです。
しかしスプレッドシートは実行時に裏で即時コードの実行ができますので、実はhtmloutputという機能を使ってサイドバーを作れます。

function showSidebar() {
  var htmlOutput = HtmlService.createHtmlOutputFromFile('index');
  DocumentApp.getUi().showSidebar(htmlOutput);
}

の4行でサイドバーを作ることができます。

CSSやClientSideのAPIで魔改造もできます。

CSS Package for Add-ons
https://developers.google.com/apps-script/add-ons/css?hl=ja

HTML Service: Create and Serve HTML
https://developers.google.com/apps-script/guides/html/?hl=ja

HTML Service
https://developers.google.com/apps-script/reference/html/?hl=ja

createHtmlOutputFromFile(filename)
https://developers.google.com/apps-script/reference/html/html-service?hl=ja#createHtmlOutputFromFile%28String%29

Class HtmlOutput
https://developers.google.com/apps-script/reference/html/html-output?hl=ja
showSidebar(userInterface)
https://developers.google.com/apps-script/reference/base/ui?hl=ja#showSidebar%28Object%29

Class google.script.run (Client-side API)
https://developers.google.com/apps-script/guides/html/reference/run?hl=ja

今回は会議の迅速化でシートの右に経過時間を表示するサイドバーを作っていきます。

完成形は共有ドキュメントの右に会議時間を表示します。
さくっとコードを書いていきます。

<!DOCTYPE html>
<html lang = "ja">
  <head>
    <!--▽CSSここから▽-->
    <style>
      h2{
        font-size: 4em;
        margin   : 0;
        font-family: "Times New Roman","Segoe",sans-serif;
        text-align: right;
      }
      input{
        width     : 100%;
        font-size : 2em;
        border    : 0;
        font-family : "Arial",sans-serif;
        background-color: #CCC;
        color           : #FFF; 
      }
      div{
        width:100%;
        text-align:center;
      }
      table{
        color           : #FFF;
        background-color: #CCC ;
        width  : 100%;
      }
    </style>
    <!--△CSSここまで△-->
    <!--▽JavaScriptここから▽-->
    <script type="text/javascript"><!--
      var cTime;
      var startTime;
      var flg=0;
       
      window.onload=function timerStart(){
        startTime=(new Date()).getTime();
      }
      function runTimer(){
        cTime=(new Date()).getTime() - startTime -9*60*60*1000;
        document.getElementById('time').innerHTML = clockFormat(new Date(cTime));
      }
      function Clock() {
        var Time = new Date();
        var msg  = clockFormat(Time);
        document.getElementById('Clock').innerHTML = msg;
      }
      function zeroPad2fig(num) {
        var padded;
        if(num < 10){padded = "0" + num;}
        else        {padded = num;}
        return padded;
      }
      function clockFormat(Time){
        var Hour = zeroPad2fig( Time.getHours()  ); 
        var Min = zeroPad2fig( Time.getMinutes() ); 
        var Sec = zeroPad2fig( Time.getSeconds() );
        return  Hour + ":" + Min + ":" + Sec;
      }
      setInterval( function(){Clock(); runTimer();} ,1000);
    // --></script>
    <!--△JavaScriptここまで△-->
  </head>
  <body bgcolor="#CCC">
    <table border="0"><tr><td>
      <div><b>現在時刻</b></div><h2><div id="Clock">00:00:00</div></h2>
    </td></tr></table>
    <table border="0"><tr><td>
      <div><b>経過時間</b></div><h2><div id = "time">00:00:00</div></h2>
    </td></tr></table>
  </body>
</html>

function openSidebar() {
  var htmlOutput = HtmlService.createHtmlOutputFromFile('htmlOutput.html');
  DocumentApp.getUi().showSidebar(htmlOutput);
}

たったこれだけで完成です。
これで誰でも簡単に会議時短の資料を作成できますので、ぜひ使ってみてください。