© 2022 NTT DATA Corporation
Selenium×PostgreSQL15×Grafanaで思い出を保存&分析するプロジェクト
2022/9/9 第35回 PostgreSQLアンカンファレンス@オンライン
株式会社NTTデータ 技術開発本部 石井愛弓
© 2022 NTT DATA Corporation 2
はじめに このプロジェクトのきっかけ
子どもが保育園に通い始め、「毎日の体温や連絡事項をスマホからweb入力するシステム」を
使うことになった
従来の紙ベースの連絡帳に比べて大変便利
その日の様子を保育士さんが書いてくださるのを読むのが楽しみ
しかし心配な点が…
卒園したらログインできなくなる?ダンプできる機能なさそうだし?
貴重な成長の様子をとっておくことができない!?
→個人的にバックアップをとるしかない!
(例)1歳男子:虫が苦手らしい。
© 2022 NTT DATA Corporation 3
今回のプロジェクト
「保育園連絡システムの個人的バックアップ&分析」
• 1ページずつコピー&画面遷移を手作業でするのは非現実的。
• ログインから全ページ保存までを自動化する!
• どうせなら、後で分析できるように要素ごとにDBへ保存する!
Selenium×PostgreSQL15×Grafana
© 2022 NTT DATA Corporation 4
使った技術要素
Selenium
・ブラウザ操作を自動化するフレームワーク
・Webアプリケーションのテストなどでもよく使われる
今回は、ログイン処理あり&ページ遷移してもURL変わらないタイプのシステムなので採用
PostgreSQL15
・無駄にMERGE文にもトライ
Grafana
・DBのデータを視覚化できるOSS
・データソースとしてPostgreSQLも使える
・今回は入力されたデータのグラフ化&分析用途
© 2022 NTT DATA Corporation 5
簡単なプログラムの流れ
ログイン
↓
最新の日付のコメントページへ
↓
コメントをDBに保存
↓
次のページ
↓
コメントをDBに保存 を繰り返して最古の日付まで戻ったら終了
© 2022 NTT DATA Corporation 6
デモ動画
画面遷移の様子(コメントの内容等はマスキングしています)
© 2022 NTT DATA Corporation 7
データ入力の方法
• INSERT ON CONFLICTを使用
• プログラムは定期的に何度も実行する
• プログラム自体は最新の日付から最古の日付(4/1)まですべて実行する仕様になっている
• データが重複しないように、すでにエントリーのある日付については何もせず、まだエントリーの
ない日付については、INSERTする
INSERT INTO hoikuen (date, gosui_start, gosui_end) VALUES ('2022-08-24',
'12:35', '15:00')
ON CONFLICT (date) DO NOTHING;
※date はユニークキー制約
© 2022 NTT DATA Corporation 8
せっかくなので、リリース前のPostgreSQL15新機能MERGEをつかってみよう
もしMERGEで作るなら?
INSERT INTO hoikuen (date, gosui_start, gosui_end) VALUES ('2022-08-24', '12:35', '15:00')
ON CONFLICT (date) DO NOTHING;
MERGE INTO hoikuen
USING (select '2022-08-24' as date, '12:35' as start, '15:00' as end) as t1
ON t1.date = hoikuen.date
WHEN MATCHED THEN
DO NOTHING
WHEN NOT MATCHED THEN
INSERT (date, gosui_start, gosui_end)
VALUES (t1.date, t1.start, t1.end);
© 2022 NTT DATA Corporation 9
© 2022 NTT DATA Corporation 10
Grafanaでデータを可視化する
バージョン9.1.1のOSS Editionをダウンロード
データソースとしてPostgreSQLを選択
© 2022 NTT DATA Corporation 11
PostgreSQLの接続情報を入力
バージョンは9.3以降を選ぶことができる
14を使用したが、12+で問題なく動作した
© 2022 NTT DATA Corporation 12
睡眠時間分析1:合計睡眠時間
• Min 1時間~Max 3時間
• 夜の睡眠時間は10.5時間程度
とっている
• 1歳は1日あたり11~14時間の睡
眠が必要なので、ちょうどよさそう
© 2022 NTT DATA Corporation 13
グラフ作成
© 2022 NTT DATA Corporation 14
睡眠時間分析2:開始時間と終了時間
• 睡眠開始は12:30前後
• 起床は14:00~15:00
• 週に1~2回は15:00まで起きず
に、起こしてもらっている
© 2022 NTT DATA Corporation 15
Grafana×PostgreSQLで試行錯誤したこと①データ型の条件
• グラフの種類によって、X軸Y軸として使用できるデータ型が決められており、それに合致しないとグラフが作成でき
ない
• 例えば、棒グラフの縦軸は数字でなければならない(時間NG)など
• うまくグラフを作るために、データソース側をいじるか、SQLで変換が必要
1.time without time zone → timestamp without time zone に変換
12:35:00 → 2022-08-24 12:35:00
insert into t2 select date '2022-08-24' + gosui_start from t1;
で新しいテーブルを用意
2.time – time (interval) → numeric
SELECT extract(epoch from (gosui_end - gosui_start))/3600 ;
© 2022 NTT DATA Corporation 16
Grafana×PostgreSQLで試行錯誤したこと②タイムゾーン
• テーブルデータは13:00なのに、グラフでは、22:00と表示されてしまう
• Grafanaは、デフォルトでブラウザのタイムゾーン(JST)が選択されている
• PostgreSQLには、timestamp without time zoneで保存されていた
• PostgreSQLのtimestamp without time zoneは、UTCとして扱われ、GrafanaのJSTに合わせるために、
元データに勝手に+9して出力していた
• GrafanaのタイムゾーンをUTCにすると、元データと同じ13:00で表示される
© 2022 NTT DATA Corporation 17
感想
• Seleniumが楽しすぎてしばしば夜更かししてしまった
• MERGE文が無事動いてよかった
• 色々なツールのデータソースとして選べるのもPostgreSQLの魅力
© 2022 NTT DATA Corporation
その他、記載されている会社名、商品名、又はサービス名は、
各社の登録商標又は商標です。

Selenium×PostgreSQL15×Grafanaで思い出を保存&分析するプロジェクト(第35回PostgreSQLアンカンファレンス@オンライン 発表資料)

  • 1.
    © 2022 NTTDATA Corporation Selenium×PostgreSQL15×Grafanaで思い出を保存&分析するプロジェクト 2022/9/9 第35回 PostgreSQLアンカンファレンス@オンライン 株式会社NTTデータ 技術開発本部 石井愛弓
  • 2.
    © 2022 NTTDATA Corporation 2 はじめに このプロジェクトのきっかけ 子どもが保育園に通い始め、「毎日の体温や連絡事項をスマホからweb入力するシステム」を 使うことになった 従来の紙ベースの連絡帳に比べて大変便利 その日の様子を保育士さんが書いてくださるのを読むのが楽しみ しかし心配な点が… 卒園したらログインできなくなる?ダンプできる機能なさそうだし? 貴重な成長の様子をとっておくことができない!? →個人的にバックアップをとるしかない! (例)1歳男子:虫が苦手らしい。
  • 3.
    © 2022 NTTDATA Corporation 3 今回のプロジェクト 「保育園連絡システムの個人的バックアップ&分析」 • 1ページずつコピー&画面遷移を手作業でするのは非現実的。 • ログインから全ページ保存までを自動化する! • どうせなら、後で分析できるように要素ごとにDBへ保存する! Selenium×PostgreSQL15×Grafana
  • 4.
    © 2022 NTTDATA Corporation 4 使った技術要素 Selenium ・ブラウザ操作を自動化するフレームワーク ・Webアプリケーションのテストなどでもよく使われる 今回は、ログイン処理あり&ページ遷移してもURL変わらないタイプのシステムなので採用 PostgreSQL15 ・無駄にMERGE文にもトライ Grafana ・DBのデータを視覚化できるOSS ・データソースとしてPostgreSQLも使える ・今回は入力されたデータのグラフ化&分析用途
  • 5.
    © 2022 NTTDATA Corporation 5 簡単なプログラムの流れ ログイン ↓ 最新の日付のコメントページへ ↓ コメントをDBに保存 ↓ 次のページ ↓ コメントをDBに保存 を繰り返して最古の日付まで戻ったら終了
  • 6.
    © 2022 NTTDATA Corporation 6 デモ動画 画面遷移の様子(コメントの内容等はマスキングしています)
  • 7.
    © 2022 NTTDATA Corporation 7 データ入力の方法 • INSERT ON CONFLICTを使用 • プログラムは定期的に何度も実行する • プログラム自体は最新の日付から最古の日付(4/1)まですべて実行する仕様になっている • データが重複しないように、すでにエントリーのある日付については何もせず、まだエントリーの ない日付については、INSERTする INSERT INTO hoikuen (date, gosui_start, gosui_end) VALUES ('2022-08-24', '12:35', '15:00') ON CONFLICT (date) DO NOTHING; ※date はユニークキー制約
  • 8.
    © 2022 NTTDATA Corporation 8 せっかくなので、リリース前のPostgreSQL15新機能MERGEをつかってみよう もしMERGEで作るなら? INSERT INTO hoikuen (date, gosui_start, gosui_end) VALUES ('2022-08-24', '12:35', '15:00') ON CONFLICT (date) DO NOTHING; MERGE INTO hoikuen USING (select '2022-08-24' as date, '12:35' as start, '15:00' as end) as t1 ON t1.date = hoikuen.date WHEN MATCHED THEN DO NOTHING WHEN NOT MATCHED THEN INSERT (date, gosui_start, gosui_end) VALUES (t1.date, t1.start, t1.end);
  • 9.
    © 2022 NTTDATA Corporation 9
  • 10.
    © 2022 NTTDATA Corporation 10 Grafanaでデータを可視化する バージョン9.1.1のOSS Editionをダウンロード データソースとしてPostgreSQLを選択
  • 11.
    © 2022 NTTDATA Corporation 11 PostgreSQLの接続情報を入力 バージョンは9.3以降を選ぶことができる 14を使用したが、12+で問題なく動作した
  • 12.
    © 2022 NTTDATA Corporation 12 睡眠時間分析1:合計睡眠時間 • Min 1時間~Max 3時間 • 夜の睡眠時間は10.5時間程度 とっている • 1歳は1日あたり11~14時間の睡 眠が必要なので、ちょうどよさそう
  • 13.
    © 2022 NTTDATA Corporation 13 グラフ作成
  • 14.
    © 2022 NTTDATA Corporation 14 睡眠時間分析2:開始時間と終了時間 • 睡眠開始は12:30前後 • 起床は14:00~15:00 • 週に1~2回は15:00まで起きず に、起こしてもらっている
  • 15.
    © 2022 NTTDATA Corporation 15 Grafana×PostgreSQLで試行錯誤したこと①データ型の条件 • グラフの種類によって、X軸Y軸として使用できるデータ型が決められており、それに合致しないとグラフが作成でき ない • 例えば、棒グラフの縦軸は数字でなければならない(時間NG)など • うまくグラフを作るために、データソース側をいじるか、SQLで変換が必要 1.time without time zone → timestamp without time zone に変換 12:35:00 → 2022-08-24 12:35:00 insert into t2 select date '2022-08-24' + gosui_start from t1; で新しいテーブルを用意 2.time – time (interval) → numeric SELECT extract(epoch from (gosui_end - gosui_start))/3600 ;
  • 16.
    © 2022 NTTDATA Corporation 16 Grafana×PostgreSQLで試行錯誤したこと②タイムゾーン • テーブルデータは13:00なのに、グラフでは、22:00と表示されてしまう • Grafanaは、デフォルトでブラウザのタイムゾーン(JST)が選択されている • PostgreSQLには、timestamp without time zoneで保存されていた • PostgreSQLのtimestamp without time zoneは、UTCとして扱われ、GrafanaのJSTに合わせるために、 元データに勝手に+9して出力していた • GrafanaのタイムゾーンをUTCにすると、元データと同じ13:00で表示される
  • 17.
    © 2022 NTTDATA Corporation 17 感想 • Seleniumが楽しすぎてしばしば夜更かししてしまった • MERGE文が無事動いてよかった • 色々なツールのデータソースとして選べるのもPostgreSQLの魅力
  • 18.
    © 2022 NTTDATA Corporation その他、記載されている会社名、商品名、又はサービス名は、 各社の登録商標又は商標です。