LoginSignup
10
10

More than 1 year has passed since last update.

Java × GoogleCalendarAPI でタスク管理アプリ

Last updated at Posted at 2021-08-21

はじめに

ご覧いただきありがとうございます!
ポートフォリオとして制作したアプリケーションのポイントを投稿させていただきます。

(追記1)
GoogleAPIを用いるための審査の中で、Gmail情報にアクセスする場合は費用が発生することが判明したため、 審査を通過させて一般公開することは断念しました。

(追記2)
2021年9月24日現在、まれにログインページの表示速度が遅くなる事象が発生しています。
Apache HTTPを導入することで改善しましたが、引き続き原因を調査しております。

2022年5月4日現在、こちらの問題は解消しております。
(しばらく以前に解決しましたが、更新を失念しておりました)
ロードバランサーに設定する2つのサブネットのうち、片方がprivateなサブネットであったことが原因でした。
当privateサブネットのルートテーブルのターゲットにIGWを追加することで解決しました。
参考にさせていただいた記事
(追記3)
AWSは一部サービスが有料のため、herokuへ移行しました。
しかし、タスク名を日本語で登録した際にすべての文字が「?」と表記される事象が発生しております。
原因調査中です。

アプリケーションのコンセプト

①全タスクをメモし、

②所要時間を見積もり、

③全てカレンダーに入れる。

多忙な時に真価を発揮する、タイムマネジメントアプリ

前職時に本当に多忙な毎日を送る中で、タイムマネジメントの重要性を知りました。
タスクをメモするだけでは、いつ何をするのかが不明確です。
「どのタスクに何時間かける予定か」をカレンダーに落とし込むことができていれば、
タイムマネジメントができているといえます。

①〜③ができていると
→新しいタスクが発生した時に、いつ実行可能なのか瞬時に判断できる。

①〜③ができていないと…

▲下手にタスクを受け、期限内に終わらない量のタスクを抱えることになる。
→一人でタスクを抱え込み、チーム内で自分のタスクが過多となる。
▲期限延長を依頼するべきか or 周囲を頼るべきなのか等を適切に早く判断できない。
→最悪期限を守れなかった場合は社内外に迷惑をかける。

理想

(今を月曜の午前中とすると)
先輩「悪いけどこの見積やっといてもらえる?多分30分くらいで終わるからさ。」
自分「今タスクが↓こんな感じの状況なので最速でも取りかかれるのが水曜の13時からですね。それでもOKですか?」
スクリーンショット 2021-08-21 13.19.28.png
先輩「あ〜じゃあ他の人に任せるわ。」
自分「了解です〜。」(勝った…!)

アプリの概要

以下の機能を備えています。
1.SpringSecurity と GoogleOAuthを用いたログイン機能があります。
2.シンプルなタスクのCRUD処理ができます。
3.各タスクに設定した見積時間から、今週の各日のタスク山積状況が分かります。
4.GoogleCalendarAPIを用いてタスク情報からGoogleCalendarに予定を追加できます。

環境・使用技術

  • macOS BigSur
  • Java (AdoptOpenJDK 11.0.10)
  • SpringBoot 2.5.2
  • MySQL 14.14
  • MyBatis 2.2.0
  • Thymeleaf 2.5.4
  • SpringSecurity(Spring Boot Starter Security » 2.5.4)
  • Google OAuth 2.0
  • GoogleCalendar API
  • HTML / CSS / MDBootstrap
  • JavaScript(画面の一部のみ)
  • AWS(VPC/EC2/RDS/Route53/ALB/ACM(SSL化))

画面イメージ・使い方

ログインページ

image.png
スクリーンショット 2021-08-21 15.30.02.png

Topページ

ログインすると下記のような画面に遷移します。
(タスクの予定日が昨日以前の場合は背景が薄赤色になります。)
(タスクの予定日が当日の場合は予定日が赤字、翌日の場合は予定日が太字になります。)
スクリーンショット 2021-08-31 9.18.56.png

  • タスク追加デモ
    タスク追加デモ 30ms.gif

  • 「予定日順」と「優先度順」並び替えデモ
    ソートデモ 50ms.gif

  • カレンダー追加デモ(Googleカレンダーに予定としてタスクを追加できます。)
    Googleカレンダー追加デモ 50ms.gif

タスク追加のコツ
・見積時間や予定日は仮でもOKなので入れてください。
・「週間タスク状況」欄には今週のタスク山積状況が表示されます。
・こちらを見ながら予定日を決めていってください。
・ほとんど予定日が確定したら、Googleカレンダーに予定として追加してください。
  • タスク完了デモ(Doneページにタスクが移動します。)
    Doneデモ 50ms.gif

Todayページ

予定日が本日となっているタスクのみ表示されます。
Todayページ画面.png

Doneページ

完了したタスクの一覧が表示されます。
「未完了に戻す」ボタンもあります。
Doneページ画面.png

最も苦労したポイント

同環境で実装している情報が無かった点

Googleカレンダーに予定を追加する機能を実装する際、

  • Java
  • Spring Boot
  • Spring Security
  • Google OAuth

を用いてカレンダーに予定を追加する方法については、
GoogleCalendarAPIの公式ドキュメントに記載がなく解説している記事等も無かったため、
GoogleAPIの公式Javadocから必要な情報を読み解いた点が最も苦労しました。

image.png

注意点

  • 動作確認はGoogleChromeのみで行っています。
  • 連動できるGoogleカレンダーは、タイムゾーンAsia/Tokyoのプライマリカレンダーのみです。

課題・今後改善したい点

  • タスクとGoogleカレンダーのイベントは、追加時以外リンクしていない状況なので、編集/削除時にも連動するようにしたい。
  • FullCalendar(JavaScriptのライブラリ)などを利用して、Googleカレンダーの表示を綺麗にしたい。

改善状況

  • (21/09/23)ApacheとTomcatを連携させる。(ApacheからTomcatへ接続する部分、AWSのポート設定部分の理解に苦心した)
  • (21/09/24)Topページ表示速度に波がある問題について対応中。
  • (21/05/04)Topページ表示速度の波については改善しました。

はじめてWebアプリを自作してみた感想

"自分が作成してみたいと思ったものを実現し、誰でもアクセスできるよう公開できる"
というプログラミングの魅力の第一歩を踏み出せたような気がしています。
エラーで詰まった苦労の分だけ自分の糧となり、解決時の快感も増します。
今後も当アプリ製作時の感動を忘れず、精進したいと思います。

以上です!

お読みいただきありがとうございましたm(_ _)m

10
10
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
10