見出し画像

【GAS活用システム⑦】活動日をカレンダーに一括登録してウェブサイトで表示する

Hoshi-nok（ほし のっく）

Google Apps Script (GAS)を、もっと身近に、日々の暮らしに。

皆さんは、Googleカレンダー、使ってますか？

実は私は個人的にまったく使ったことがありませんでしたが、最近になって、読み聞かせのボランティア活動で、活動日をこんな風にGoogleカレンダーに登録して、ウェブサイトに貼り付けてみたところ、

おそろしく便利！と思いました。こんな風にビジュアルで活動日を表示できれば、文字のリストよりも断然わかりやすいですよね。

紙のカレンダーに、色付きで予定を書き込んだイメージに近いので、子供から年配の方まで万人にわかりやすくて、とてもいいと思います。

そして、Googleサイトですが、これまた無料で簡単にウェブサイトが作れて、Googleカレンダーやスプレッドシートが組み込めるんですね。

これは、サークルや同好会、ボランティア活動などで使用しない手はありません。

ということで、今回はスプレッドシートの予定表から、GASを使ってカレンダーにイベントを一括登録する方法、そして、Googleサイトにカレンダーやスプレッドシートの予定表を組み込む手順をご紹介していきます。


スプレッドシートの予定表を準備

まず、カレンダーの登録元となる、スプレッドシートの予定表を用意します。以下のように、活動日と活動内容（区分）をリストした、シンプルなもので十分です。

※私は、読み聞かせのボランティア用の既存の予定表を使用しますが、カレンダーの一括登録で必要なのは、A列の日付とB列の区分の情報だけです。

  • のちほどGASでシート名を指定します。できれば、シート名は「予定表」に設定しておきましょう。

  • A列の「日付」には、以下のどちらかの日付形式を設定してください。
    　　メニューバー：表示書式 > 数字 > 2008/09/26(金)
    　　または
    　　メニューバー：表示書式 > 数字 > 日付 2008/09/26
    ※この後登録するGASでは、日付をいったん文字をして取得し、yyyy/MM/ddの書式で日付データに変換しています。曜日の表示はお好みですが、yyyy/MM/ddの書式を設定しておきましょう。

  • B列の「区分」の値が、カレンダーの終日イベントのタイトルになります。今回は最終的にウェブサイトに、表示モード「月」のカレンダーを挿入します。色付きでわかりやすく表示するために、予定はすべて終日イベントとして登録することにします。

ちなみに、上記のスプレッドシートの予定表ですが、私はこの予定表を、翌日の予定をLINE通知する（【GAS活用術①】）時の元データ、また、フォームのプルダウンの選択肢を自動生成する（【GAS活用術⑦-2】）時の元データとしても使用しています。

カレンダーの作成とIDのコピー

予定表が作成できたら、今度は、カレンダーを作成します。パソコンでGoogleカレンダーを開いたら、左側の [他のカレンダー] の横の、「＋」アイコンをクリックして

「新しいカレンダーを作成」を選択します。

新しいカレンダーの名前を入力して、カレンダーを作成します。

マイカレンダーに新しいカレンダーが追加されました。その名前をクリックします。

カレンダーの設定画面が開きます。少し下の「予定のアクセス権限」で「一般公開して誰でも利用できるようにする」を選択します。

警告されますが、一般公開しないとサイトに載せても他の人がカレンダーを見れないので、恐れずにOKをクリックします。

もう少し下にスクロールして、「カレンダーの統合」の下にある「カレンダーID」が見つかったら、

「カレンダーID」を@group.calendar.google.comまでしっかり選択してコピーし、どこかにペーストしておきましょう。

イベントを一括登録するGASの登録と実行

ここでいよいよGASの登録・実行へ進んでいきましょう。

GASの登録

予定表のスプレッドシートを開き、メニューバーから、拡張機能 > Apps Script を選択します。

このスプレッドシートに初めてGASを登録する場合は、無題のプロジェクトが生成され、Apps Scriptのスクリプトエディタの、ファイル：コード.gsに「function myFunction」が表示されます。

「function myFunction ( ) { }」のところに、上書きする形で下記のコードをコピぺします（すでに何らかのGASを登録している方は適当な場所にコピペしてください）。

function createAllDayEvents() {

  //「予定表」シートの表をplanTableとして取得（1行目のタイトルは除く）
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("予定表"); 
  const planTable = sheet.getDataRange().getDisplayValues().slice(1); 

  //対象のカレンダーを指定
  const Calendar = CalendarApp.getCalendarById('★★カレンダーID★★');  

  planTable.forEach(row => {          //forEachで一行ずつ予定を取得
    const [formatDate, plan] = row;   //分割代入で初めの2つの項目のみ取得
    const date = Utilities.parseDate(formatDate.slice(0,10), 'JST', 'yyyy/MM/dd');
    //対象カレンダーの同じ日付のイベントを取得
    const events = Calendar.getEventsForDay(date);  

    if (events.length == 0){      //イベントが未登録ならば登録
      Calendar.createAllDayEvent(plan, date);
      console.log(formatDate+"の" + plan + "をカレンダーに新規に登録しました！");
    }else{
      console.log(formatDate+"のイベントは登録済みです"); 
    }
  })
}

エディタにコピペしたら、以下を変更しましょう。

  • （シート名を"予定表"以外に設定した場合）4行目のgetSheetByNameの後をご自身のシート名にあわせて変更します。

  • 8行目のgetCalendarByIdの後の★★カレンダーID★★の部分は、さきほどカレンダーを作成した後にコピぺしておいたカレンダーID（@group.calendar.google.comを含めたもの）に変更します。

お好みでプロジェクト名を設定したら、保存ボタンでプロジェクトを保存します。

GASの実行

では、さっそく登録したcreateAllDayEvents関数を実行してみましょう。今回は極めてシンプルにエディターから実行します。デバッグと実行ログの間に、createAllDayEventsが表示されていることを確認したら、「実行」をクリックします。

一回目の実行では、「承認が必要です」と言われます。

恐れずに以下の手順で「実行権限の承認」を実行しましょう。
→ 「権限を確認」をクリック
→ Googleにログイン画面で、自分のアカウントを選択
→ 「詳細」、「[プロジェクト名]（安全ではないページ）に移動」を順番にクリック
→ 「許可」をクリックすることで、実行権限の承認完了

手順が不安な方は、【GAS活用①-3】のページで、画面ショットつきで説明しているので、そちらを参考にしてください。

実行権限の承認が完了すると、以下のような実行ログが出力されます。

カレンダーを確認すると、、、

ばっちり登録されていますね！終日イベントとして登録すると、色つきで月カレンダーに表示されてわかりやすいです。

イベント登録後の変更方法

さて、この状態で、もう一度、createAllDayEvents関数を実行すると「そのイベントは登録済みです」というログが出力されると思います。

同じイベントが何度も登録されてしまうのを防止するため、今回はシンプルに、同じ日にGASから登録される終日イベントは一つとしています。

これにより、次の月の予定を予定表に追加した後にcreateAllDayEvents関数を実行した場合、既存の予定はイベント登録済み、未登録の予定は新規にイベントとして登録することができます。

予定に変更があった時の手順も確認しておきしょう。カレンダーにイベントを登録後に、6/5と6/19の予定が入り替わり、6/5が1年生の本読みになり、6/19が6年生の本読みになったとします。まず予定表を変更します。

続けて、変更のあった日程のカレンダーを手動で削除しておきます。削除しておかないと、「登録済みです」と言われてしまいますからね。

その後、createAllDayEvents関数を実行すると、以下のようなログが出力されろはずです。

カレンダーの方を確認してみます。

めでたく予定表の変更がカレンダーにも反映されて、スプレッドシートの予定表とカレンダーの同期がとれました。

Googleサイトでウェブサイトを作成してカレンダーを挿入

ここまで来たら完成は間近です。Googleサイトでウェブサイトを作りましょう。

Googleサイトでウェブサイトを作成

Googleドライブを開き、対象のフォルダへ移動後、左上の「＋ 新規」をクリックします。

その他 > Googleサイト を選択します。

無題のサイトが表示されました。

カレンダーの挿入

サイトのドキュメント名やタイトル、画像などをお好みで選択したら、さっそく、カレンダーの表示してみましょう。

ページ右側に表示されているメニューの「挿入」の中から「カレンダー」を選択します。

マイカレンダーの中からさきほど作成したカレンダーと、他のカレンダーの中から「日本の祝日」を選択します。ここで「日本の祝日」を選んでおくと、祝日がカレンダーに自動的に表示されて便利です。
「挿入」ボタンをクリックします。

さっそくそれっぽいものが表示されるので、「設定」を選択してみます。

カレンダーの設定で、表示モードを「月」に変更して、完了を選択します。

すると、もう表示されました！

サイズや位置などをお好みで変更します。

カレンダーの下にスプレッドシートの予定表を表示

さらに、スプレッドシートの予定表も追加してみましょう。メニューの「挿入」の中から「スプレッドシート」を選択する方法もありますが、私のおススメは、スプレッドシートをウェブに公開してそのリンクを埋め込む、という方法です。

スプレッドシートの予定表を開き、ファイル ＞ 共有 ＞ ウェブに公開 を選択します。

ウェブに公開の画面で「公開」をクリックします。

リンクが表示されるので、Ctrl+C キーでコピーします。

Googleサイトに戻り、挿入メニューから「埋め込む」を選択します。

URLにコピーしたリンクをペーストして、「挿入」します。

これもさくっと表示されました。サイズや位置などを整えます。

ウェブサイトの公開

ここまで来たら、さっそくウェブサイトを公開していきます。右上の「公開」ボタンですね。

ウェブアドレスに入力した文字が、https://sites.google.com/view/の後ろにつき、それがウェブサイトのURLとなります。一般公開の検索エンジンにサイトを表示するか否かは判断し、「公開」ボタンをクリックします。

公開後のリンクのコピーは下記のアイコンで確認できます。

リンクをコピーします。

さきほど公開の時にウェブサイトに指定した文字がURLに組み込まれていて、https://sites.google.com/view/<ウェブサイトの文字> の形式になって表示されます。
 
ちなみに後ろに「%E3%83%9B%E3%83%BC%E3%83%A0」とついているのは日本語で「ホーム」です。これはなくてもいいので、https://sites.google.com/view/<ウェブサイトの文字> にスマホからアクセスしてみましょう。

ちゃんと表示されていますね！さらに、カレンダーのナビゲーションボタンで前の月を表示してみると、

5月の祝日もしっかりばっちり表示されています。

おわりに

いかがだったでしょうか。思った以上に簡単に作れて、便利ですよね。

Googleカレンダーをウェブサイトに表示するのは、お店の定休日をサイトに表示するなどの事例はみましたが、サークルや同好会、ボランティア活動などで使用している例は少なかったように思います。

無料・簡単・便利ですから、どんどん活用していきましょう。

今回はカレンダーの一括登録がメインだったので、Googleサイトについては必要最低限のみご紹介しましたが、作成したGoogleフォームのリンクを追加するなど、いろいろなことができるので、ぜひ調べて試してみてください。

なお、今回紹介した、カレンダーの挿入では、色の指定はできません（今回、終日イベントを緑に、祝日をピンクで表示したのは私ではなく、Googleです）。そして、残念ながら、イベントを色別に分けることもできません。

「もっと多くの予定をカレンダーに登録して、イベントの色を分けたい！」という場合については、以下の記事を参照してください。

また、予定表において、予定の日付が過ぎたら、その予定行を削除・移動する方法については以下の記事で紹介しています。


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