Googleカレンダーシフト日程登録容易化GAS

Tマート店長です。

昨日アルバイトの面接に行って合否連絡待ちなんですけど、もしバイトを始めたときのシフト記録どうしようかなと。

私はGoogle信者ということで、カレンダーはGoogleカレンダー使ってます、まあそういうもんですよね。

で、スマホのウィジェットもこんな感じで。トップから左にスワイプすると見れるようになってます。まあご覧の通りからっけつなんですけど()

ほんまはブログの担当とか学校の行事予定とか載ってるんですけど隠してます

で、肝心の予定の追加方法なんですけど、

タイトル入れて日付と時間を指定して、時には場所も指定して、、、

めんどくせぇ

どうせタイトルも場所も同じなんだから、簡単に登録したいよねってことで、

GASで作っちゃいました。

入力して送信すると、

なんか勝手にカレンダーに追加されてます。ね、簡単でしょ？

今のとこ自分自身しか使ってないのでデザインはゴミですけど、まあ暇があれば修正しようかなって感じで。

ってことでソース貼ってきますがその前に。

Googleカレンダーにカレンダーを追加しましょう。

なに言ってんだって話ですけど、ジャンル毎にカレンダーを変えることができるのです。

こんな感じで。それぞれのチェックを外すことでカレンダーに表示されなくなります。スクショ取るときに便利。

まず下記にPCでアクセスして、

Google カレンダー – 自分のスケジュールにアクセスして編集するにはログイン

Google カレンダーには、無料の Google アカウント（個人ユーザー向け）または Google Workspace アカウント（ビジネスユーザー向け）でアクセスできます。

左下の「+」を押してください。

適当な名前をつけて、

そして左から追加したばっかのカレンダーを選択するとこんな感じになります。

しばらくスクロールすると、「カレンダーID」ってのが出てきます。これを控えてください。

そしたらGASを開いて、下記のコードをいい感じに貼り付けるだけです。GASの開き方は自分で調べてください。

Apps Script – Google Apps Script

「新しいプロジェクト」を開いて、

画像の「+」から、

index
result
css
js

を全部「html」で追加してください。勝手に「.html」が付くのは仕様です。

後はコピペしていきます。それぞれ、最初からあるコードは全部消しましょう。あと、「※」で挟んであるところは自分で入力するところです。「〒」で挟んであるのは後で説明するので一旦置いときましょう。

まずコード.gs

const Shift_Calendar = CalendarApp.getCalendarById('※上記のカレンダーID※'); //カレンダーの取得

function doGet(){
  const htmlOutput = HtmlService.createTemplateFromFile("index").evaluate();
  htmlOutput.addMetaTag('viewport', 'width=device-width, initial-scale=1')
  return htmlOutput;
}

function doPost(e){
  Logger.log(e.parameters);

  const title = '予定のタイトル名';
  const startTime = new Date(e.parameters.date.toString() + " " + e.parameters.starttime.toString() + ":00");
  const endTime   = new Date(e.parameters.date.toString() + " " + e.parameters.endtime.toString() + ":00");
  const option = {
    description: '※予定の説明(空っぽでも良し)※',
    location   : '※予定の場所(空っぽでも良し)※'
  }  

  Logger.log(startTime);
  Logger.log(endTime);
  Shift_Calendar.createEvent(title, startTime, endTime, option);
  
  const htmlOutput = HtmlService.createTemplateFromFile("result").evaluate();
  htmlOutput.addMetaTag('viewport', 'width=device-width, initial-scale=1')
  return htmlOutput;
}

次にindex.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
  </head>

  <body>
    <h2>カレンダーにシフト登録</h2>
    <form method="post" action="〒後で言うよ〒">
      登録日　：<input type="date" name="date"><br>
      開始時刻：<input type="time" name="starttime"><br>
      終了時刻：<input type="time" name="endtime"><br>
      <input type="submit" value="送信する">
    </form>
    <?!= HtmlService.createHtmlOutputFromFile('js').getContent(); ?>
  </body>

</html>

続いてresult.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
  </head>
  <body>
    送信が完了しました。<br><br>
    <a href="〒後で言うよ〒">もう一度回答する</a>
    <?!= HtmlService.createHtmlOutputFromFile('js').getContent(); ?>
  </body>
</html>

次にcss.html

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

最後にjs.html

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

さて、index.htmlとresult.htmlの途中に「〒後で言うよ〒」ってありましたが、これの説明をします。

このGASプログラムを動かすためには、URLを発行する必要があるんですが、そのURLの発行方法がちょっと特殊です。

全部コピペが終わったら保存してください。その後に「以前のエディタを使用」を押してください。右上です。