こんにちは。福田泰裕です。
Googleカレンダーとフォームを利用して、三者面談の日程調整を自動化しました。
作り方はこちらの記事に書いています👇
今日は、このカレンダーとフォームを公開する方法をご紹介します。
最後まで読んでいただけると嬉しいです！
目次
それでは、公開までの手順をご紹介します。
まず、公開用のWEBページが必要です。
無料のレンタルサーバでも良いのですが、広告が出るためあまり好ましくありません。
学校のホームページに入れてもらえれば良いですが、担当者でないと難しいでしょう。
そこで、Googleドライブ上にHTMLファイルを置いて、WEBページとして公開する方法をオススメします！
公開方法はこちらの記事に書いているので、参考にしてください👇
Blankの画面から、「File」→「New」→「HTML File」と進めて、新たにHTMLファイルを追加します。👇
ファイル名は何でもいいです。
今回は「1-1.html」としておきます。
（※ファイル名の末尾は『.html』にしてください！）
画面左上に「1-1.html」の編集画面が開くので、下のコードをコピペしてください👇
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>１年１組 三者面談日程調整</title>
<script src="code.js" type="text/javascript" charset="utf-8"></script>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>１年１組 三者面談日程調整</h1>
<div>
</div>
<div>
</div>
</body>
</html>中段の「style.css」には、下のコードをコピペしてください👇
（※ 2行目は表題の色、5行目は背景の色です。変更しても構いません。）
h1 {
color: red;
}
body{
background-color: lightcyan;
text-align:center;
}これでWEBページが準備できました！
このWEBページにカレンダーを入れていきましょう。
まずカレンダーを開き、画面左から面談用のカレンダーの右にあるオーバーフロー「…」を開きます👇
そこから「設定と共有」をクリック👇
設定画面を下にスクロールしていくと、「カレンダーの統合」という項目があるので、そこの「カスタマイズ」をクリック👇
ここでは、表示するカレンダーの形式が選択できます。
見やすいように、カレンダーを週ごとの表示に変更しましょう。
終わったら、右上の「埋め込みコード」をコピーします👆
（右端の四角いコピーボタンをクリックすればコピーできます。）
そのコピーしたコードを、「1-1.html」の12行目に貼り付けます👇
これで、カレンダーを埋め込むことができました。
次は、カレンダーの下にフォームを埋め込みましょう。
Googleドライブから作成した入力フォームを開き、右上の「送信」をクリックします👇
メニューから、上の「< >」をクリックし、高さを調整してコピー👇
（※高さが大きすぎると、回答を送信した後に上に戻らなければいけなくなるため、600くらいが良いと思います。調整してみてください。）
コピーしたコードを、「1-1.html」の15行目に貼り付けます👇
これで入力フォームを埋め込むことができました。
ちゃんと公開できているのか、確認しましょう。
「1-1.html」の編集画面の上の「目のボタン」をクリックします👇
すると、このようにプレビューが表示されます！（感動！）👇
先ほどの画面に戻って、「雲↑ボタン」をクリック👇
「Publish project」をクリック👇
URLが表示されるので、「Open」をクリック👇
これで、WEBページとして公開できました！
このURLを生徒や保護者へお知らせすれば、簡単に三者面談の日程調整を行うことができます。
メールで配信することもできますし、QRコードにして印刷して配布することもできます。
QRコードへの変換の方法は、こちらの記事に書いているので参考にしてください👇
いかがでしたでしょうか。
私はこの全自動・三者面談の日程調整のシステムを作りましたが、まだ一度も使ったことはありません。
実用に向けて、
などが考えられると思います。
この辺の対策をしっかり考えて、実用化していきたいと思います！
最後まで読んでいただき、ありがとうございました！
質問やご意見、ご感想などがあればコメント欄にお願いします👇