Googleサイトで作るグループウェア（50）ーGoogle Bard AIでHTML埋め込み時計をつくるー

2023年7月1日 09:53

この記事を読んで欲しい方

Googleワークスペースを企業DXに導入したが、上手く広げられていない方
Googleワークスペースを導入しようと考えてる中小企業の方
無料のGmailやクラウドアプリだけ使っているテレワーカー
GIGAスクールなどでGoogle for Educationを導入している学校

①Bard AIとはなにか

最近、やたらとAI（人工知能）が活況になっていますが、Googleが満を持してAIを投入してきました。
それがBardと呼ばれるAIです。Bardは、Googleアカウントがあれば誰でも使えます。
Bard以外にも、OpenAI社（マイクロソフト系）が公開しているChatGPTがありますね。
ChatGPTの方が先行していたため有名かもしれませんが、機能的にどこまでできるのか、欠点はどこにあるのか調べることが、現在最も重要になっています。（プロンプト・エンジニアリングといいます）

②Bardに問い合わせしてみる

まず、「HTMLとJavaScriptで、Googleサイトにうめこめる時計をつくってください」と書き込んでください。
すると、すぐに回答が得られます。

出力された、HTMLプログラムの画面枠にコードがコピーできるようになっていますので、クリックしてコピーしておきます。

<html>
<head>
<title>Clock</title>
</head>
<body>
<div id="clock"></div>
<script>
var clock = function() {
  var now = new Date();
  var hour = now.getHours();
  var minute = now.getMinutes();
  var second = now.getSeconds();
  var html = hour + ":" + minute + ":" + second;
  document.getElementById("clock").innerHTML = html;
};
setInterval(clock, 1000);
</script>
</body>
</html>

③Googleサイトに埋め込んでみる

埋め込みテスト用のGoogleサイトの画面を新しく起動させてください。
Googleドライブ＞＋新規＞その他＞Googleサイトを選びます。

HTMLプログラムを貼り付けます。
埋め込む＞埋め込みコードに貼り付けます。

HTMLプログラムの時計が表示されました。リアルタイムに動いていると思います。

HTMLプログラムの画面の大きさを小さく調整します。

④年月日も入れてみる

続いて、年月日も入れてくれるように指示しましょう。
「年月日も表示できるようにしてください」を入力します。

HTMLをプログラムが吐き出されてきたので、コピーします。

<html>
<head>
<title>Clock</title>
</head>
<body>
<div id="clock"></div>
<script>
var clock = function() {
  var now = new Date();
  var hour = now.getHours();
  var minute = now.getMinutes();
  var second = now.getSeconds();
  var year = now.getFullYear();
  var month = now.getMonth() + 1;
  var day = now.getDate();
  var html = hour + ":" + minute + ":" + second + " " + year + "-" + month + "-" + day;
  document.getElementById("clock").innerHTML = html;
};
setInterval(clock, 1000);
</script>
</body>
</html>

同様に、Googleサイトに貼り付けます。

⑤まとめ
以上のように、簡単なHTMLプログラムであれば、Bardに問い合わせするだけで作成することができます。（複雑なものに関しては、まだまだです）
ただ、今後のAIの進展によっては、もっと複雑なプログラムも作れるようになるでしょう。
今後が楽しみです。

さて、Googleサイトで作るグループウェアシリーズも50回目を迎えました。
今年の1月からはじめてちょうど６ヶ月間です。
今後の予定ですが、DX向けの人材育成と絡めて、このシリーズをもっと学びやすくするために、初回から教材を作り直していく予定です。
途中で、おもしろい使い方が閃けば、コラムとして公開していきます。

いままで、教材として購入していただいた方々、購読していただいた皆様、まことにありがとうございました。

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