Googleサイトで作れる5つの便利なカスタムデータダッシュボード

Googleサイトは、最小限の手間でウェブサイトを作成・公開できる非常に便利なツールです。標準搭載されている機能をうまく活用すれば、仕事の整理や生産性向上に役立つ実用的な個人用ダッシュボードを作ることもできます。

この記事では、Googleサイトを使って作成できる、次のような便利なダッシュボードの具体例をご紹介します。

1. メールの監視
2. ウェブサイトのパフォーマンス分析
3. 時間管理システム
4. ライブニュースのチェック
5. お気に入りの場所の保存

1. メール監視ダッシュボード

メールの面倒なところは、新しいメールが届いたかどうかを確認するために、何らかのメールクライアントを開く必要がある点です。

Googleのメールアカウントをお使いなら、ブラウザ版のGmailや、各種デスクトップメールクライアントがそれにあたります。

しかし、Googleサイトを使えば、すべての受信メールを一箇所に表示するカスタムデータダッシュボードを作成できます。ダッシュボードをひと目見るだけで、その日に届いた新着メールをすばやく確認できます。

この仕組みは、GmailをGoogleスプレッドシートと同期し、そのスプレッドシートをGoogleサイトのページに表示することで実現します。

最新メールのタイムスタンプを表示する

IFTTTを使えばGmailとGoogleスプレッドシートを同期できますが、IFTTTで連携できるのは1つのGmailアカウントだけです。複数のGmailアカウントを複数のスプレッドシートに同期したい場合は、Zapierを使うのがおすすめです。ただし、Zapierは有料である点に注意してください。

Zapierでは、監視したいGmailアカウントを入力として「Zap」を作成し、新着メールを受信するたびにトリガーされるよう設定します。出力先にはGoogleスプレッドシートを指定します。

事前に「受信メール」という名前のスプレッドシートを作成しておきましょう。

Zapierでは、スプレッドシートを名前で選択し、メール情報を書き込みたいワークシートを指定できます。

最初の例として、各アカウントの状況を表示するウィジェットをダッシュボードに作成してみましょう。

スクリプトは数分ごとに実行され、指定した行の2列目を更新します。

たとえば、MakeUseOfの行を受信トレイの最新メールのタイムスタンプで更新するには、「3行目」を選択します。次に、取り込みたいメールデータを選びます。

ここでは、最新メールの受信日時を取得しています。

各Gmailアカウントに対して個別の「Zap」を作成すると、ダッシュボードのウィジェットは下記のような見た目になります。

このウィジェットをGoogleサイトのページ(ダッシュボード)に挿入するには、画面右側の「挿入」メニューから「スプレッドシート」をクリックします。

当日の受信メールをすべて表示する

その日に届いたメールをすべて表示するウィジェットを追加するには、同じ要領でZapを作成します。あわせて、スプレッドシートに「名前」「日付」「件名」の3つの列を作成しておきます。

Zapでスプレッドシートアクションを追加する際は、同じワークブックを選択し、そのメールアカウント専用に作成したシートを指定します。

そして、取り込みたいメールデータを各フィールドに入力します。

これで、新しい受信メールがすべてGoogleスプレッドシートに蓄積されます。ダッシュボードに挿入すると、ウィジェットは下記のように表示されます。

もちろん、シートを際限なく増やし続けるのは望ましくありません。このウィジェットの目的は「当日の受信メール」を表示することなので、毎日午前0時にシートを自動消去するスクリプトを追加しましょう。

手順はとても簡単です。Googleスプレッドシートで「ツール」メニューを開き、「スクリプトエディタ」を選択します。

スクリプトエディタに、次の「ClearAll」という関数を貼り付けてください。

function ClearAll() {
var start, end;
var sheet = SpreadsheetApp.getActive().getSheetByName('Makeuseof');
start = 2;
end = sheet.getLastRow() - 1;//最終行の行番号
//内容のある最終行より後の空白行は削除されない
sheet.deleteRows(start, end);
var sheet = SpreadsheetApp.getActive().getSheetByName('IAMMarketing');
start = 2;
end = sheet.getLastRow() - 1;
sheet.deleteRows(start, end);
var sheet = SpreadsheetApp.getActive().getSheetByName('Gmail');
start = 2;
end = sheet.getLastRow() - 1;
sheet.deleteRows(start, end); 
}

「getSheetByName」の部分は、実際にメールデータが保存されているシート名に合わせて編集してください。

このスクリプトを毎日午前0時に実行するには、スクリプトエディタで「ファイル」→「保存」をクリックしてスクリプトを保存します。続いて「編集」→「現在のプロジェクトのトリガー」をクリックします。

イベントの種類を「時間主導型」、「日付ベースのタイマー」、「午前0時~午前1時」に設定し、「保存」をクリックします。

これで毎晩午前0時にすべてのシートが消去されるため、毎朝ダッシュボードはまっさらな状態から始まり、当日の最新の受信メールだけが表示されます。

2. ウェブサイトパフォーマンスダッシュボード

ウェブサイトを所有・運営している方にとって便利なのが、パフォーマンスを可視化するダッシュボードです。

ウェブサイトのパフォーマンスデータを表示するダッシュボードを作るには、データが自動更新される仕組みが必要です。GoogleサイトではGoogleスプレッドシートのグラフを取り込めるため、まずGoogle Analyticsからスプレッドシートへ自動的にデータを送る設定をしておきましょう。

その具体的な手順は本記事の範囲外ですが、大きく2つの方法があります。IFTTTのアプレットを使ってAnalyticsのデータをメール経由でスプレッドシートに送信する方法と、Google Core Reporting APIを使って自前でスプレッドシートを作る方法です。

Reporting APIのほうがはるかに強力で、Google Analyticsが収集するウェブサイトのほぼすべてのデータにアクセスできますが、学習コストはやや高めです。

スプレッドシートへのデータ取得が始まり、トラフィックやユーザー属性を描くグラフをいくつか作成できたら、いよいよダッシュボードの構築です。

Googleサイトで「挿入」メニューをクリックし、「グラフ」を選択します。Googleドライブ上のスプレッドシートを指定すると、その中に存在するグラフを選択できるようになります。

含めたいグラフを順番にクリックして、ページ上の好きな位置に配置していきましょう。

わずか数クリックで、見栄えの良いウェブパフォーマンス監視ダッシュボードが完成します。

ダッシュボードごとに個別のGoogleサイトを作る必要はありません。 サイト内にサブページを作成すれば、ダッシュボードごとにページを分けられます。

こうすれば、監視したいものすべてにアクセスできるURLは1つだけで済みます。

3. 時間管理ダッシュボード

複数のGoogleカレンダーをお使いなら、「予定リスト」「週」「月」の3つの表示形式を並べて確認できる時間管理ダッシュボードが便利です。

通常のGoogleカレンダーでは表示を切り替える必要がありますが、Googleサイトのダッシュボードなら、3つすべてを一度に表示できます。

さらに、すべてのGoogleアカウントのカレンダーを1枚のダッシュボードに埋め込むことも可能です。手順は以下の通りです。

Googleサイトで「挿入」メニューから「カレンダー」をクリックします。

これで、挿入したいGoogleカレンダーを選択できるようになります。

埋め込むカレンダーを選択したら、「表示の選択」で「月」「週」「予定リスト」のいずれかを選びます。

3つの表示すべてを備えたダッシュボードを作るには、1つずつ順番に挿入していきます。

3つの形式を見やすいレイアウトで配置すれば、実用性の高い時間管理ダッシュボードの完成です。

予定リストビューは非常に細長いので、その隣に週間カレンダーを並べてもすっきり収まります。

さらに、その下により大きな月間カレンダーを追加しましょう。

また、公開後のダッシュボード上でも、各ウィジェットの表示モードはいつでも切り替えられます。設定時のまま固定されるわけではありません。

他のGoogleアカウントのカレンダーも同じページに載せたい場合は、下にスクロールしてどんどん追加していけます。あるいは、Googleアカウントごとに新しいサブページを作成してもよいでしょう。

ダッシュボードのレイアウトは、あなたの自由自在です!

4. ライブニュースダッシュボード

大量の情報が同時に流れ込む「ミッションコントロール」風のモニターパネルを夢見たことはありませんか? Googleサイトはそれを実現するのに最適なプラットフォームです。

「挿入」メニューの「YouTube」をクリックすると、検索フィールドが表示され、ページに埋め込みたい動画を探せるようになります。

ただし、ほとんどのYouTube動画は静止画ベースで、少し物足りないかもしれません。幸い、YouTubeには埋め込み可能なライブニュースチャンネルがあります。「ライブニュース」や、お気に入りの報道局名に「ライブ」を付け加えて検索すれば見つかります。

監視したいライブ配信をすべて埋め込んだら、それぞれをクリックして再生を開始できます。

すべての動画が同じページ上で同時にストリーミングされます。かなり迫力があり、シャイアン山の地下にあるミッションコントロール室のデスクに座っているような気分になれるはずです。

5. Googleマップのお気に入り場所ダッシュボード

Googleマップでリストを作成・共有できる機能をまだ使ったことがない方は、ぜひ試してみてください。

お気に入りの場所を整理されたリストとして管理できる、とても便利な機能です。

これをGoogleサイトのダッシュボードにどう活用するのか? 実は簡単です。Googleサイトの「挿入」メニューで「マップ」をクリックすると、「マイマップ」という項目が表示されます。

そこをクリックすると、保存済みのお気に入り場所リストがすべて表示されます。

リストを1つ選ぶだけで、保存した場所がすべて表示された埋め込みマップがダッシュボードに追加されます。

お気に入りスポットを1つのURLにまとめておくのに、これほど便利な方法はありません。

次回、よく訪れるハイキングコースの場所をうっかり忘れてしまったら、ダッシュボードを開いて「ハイキングコース」マップを確認すればすぐ解決です。

ダッシュボード同士の切り替えは、「ホーム」の横にあるドロップダウンアイコンをクリックして、見たいダッシュボードを選択するだけです。

このようなダッシュボードは、旅行の行程表を作成してURLを共有する用途にも活躍します。

相手は場所を問わず、ブラウザやスマートフォンからいつでもアクセスできます。

今日からGoogleサイトのデータダッシュボードを活用しよう

今回ご紹介した例は、暮らしをぐっと楽にしてくれるダッシュボード活用法のごく一部にすぎません。

YouTubeの動画、地図上の場所、GoogleドキュメントやGoogleスプレッドシートの情報などを組み合わせれば、アイデア次第で無限の可能性が広がります。

Googleサイトは昔から手軽なウェブページ作成ツールでしたが、新版のGoogleサイトなら、このように美しく実用的なダッシュボードも作れます。もう専用のダッシュボードソフトは必要ありません。