【大阪 / 横浜 / 徳島】インフラ / サーバーサイドエンジニア募集中!

【大阪 / 横浜 / 徳島】インフラ / サーバーサイドエンジニア募集中!

【導入実績 500社以上】AWS 構築・運用保守・監視サービス

【導入実績 500社以上】AWS 構築・運用保守・監視サービス

【CentOS 後継】AlmaLinux OS サーバー構築・移行サービス

【CentOS 後継】AlmaLinux OS サーバー構築・移行サービス

【WordPress 専用】クラウドサーバー『ウェブスピード』

【WordPress 専用】クラウドサーバー『ウェブスピード』

【格安】Webサイト セキュリティ自動診断「クイックスキャナー」

【格安】Webサイト セキュリティ自動診断「クイックスキャナー」

【予約システム開発】EDISONE カスタマイズ開発サービス

【予約システム開発】EDISONE カスタマイズ開発サービス

【100URLの登録が0円】Webサイト監視サービス『Appmill』

【100URLの登録が0円】Webサイト監視サービス『Appmill』

【中国への旅行・出張・駐在なら】中国SIMサービス「チョコSIM」

【中国への旅行・出張・駐在なら】中国SIMサービス「チョコSIM」

【グローバル専用サービス】北米・中国でも、ビヨンドのMSP

【グローバル専用サービス】北米・中国でも、ビヨンドのMSP

【YouTube】ビヨンド公式チャンネル「びよまるチャンネル」

【YouTube】ビヨンド公式チャンネル「びよまるチャンネル」

一日の予定をブラウザのサイドパネルに表示する拡張機能を作ってみた

SideTimeTable リリースのお知らせ

こんにちは、badfalconです。
今回、個人的なプロジェクトとして、Chrome拡張機能「SideTimeTable」をリリースしました。SideTimeTableは、ブラウザのサイドバーに今日の予定を直感的に表示するツールです。日々のスケジュール管理を、面倒なタブの切り替えなくひと目で把握できるようになればと思い、この拡張機能を開発しました。

こんな悩みからアイデアが生まれた

「また会議の予定を忘れてしまった...」

私自身がこうした経験を何度もしていました。仕事に集中しているとカレンダーを確認し忘れてしまうんですよね。そんな時、Chromeの拡張機能にSidePanelという機能が追加されたことを知り、「これを使えば、作業中でも常に予定が見える状態にできるのでは?」とひらめきました。

「Chromeを使っているなら、サイドバーに今日のタイムラインがあれば便利なのに」というシンプルな発想から、SideTimeTableは誕生しました。Googleカレンダーと連携し、予定の更新も自動で反映されます。さらに、カレンダーに登録されていない個人的な予定も、ローカルで追加できる機能を実装しています。

SideTimeTable の主な特徴

SideTimeTableの実際の画面

実際の画面

  • 直感的なサイドパネル表示
    ブラウザ右側に常時表示されるサイドパネルに、今日のイベントが時系列で並びます。シンプルなデザインで、一目でスケジュール全体を確認できます。
  • Googleカレンダー連携
    お持ちのGoogleカレンダーと連携し、予定の追加や変更がリアルタイムで反映されるので、最新情報を手軽にチェックできます。
  • Google Meet会議へのワンクリックアクセス
    Google Meetが設定されている予定では、サイドパネル上の予定をクリックするだけで直接会議に参加できます。会議URLを探す手間がなく、スムーズに会議に参加できます。
  • ローカルイベント管理
    カレンダーに登録されていない予定も、その場で直接追加・編集が可能です。急なメモやアイデアも逃さず記録できます。
  • カスタマイズ可能な設定
    作業時間、表示カラーなど、あなた好みに調整できるオプションで、自分専用の使いやすいタイムラインを作成できます。

実際に使ってみて感じたこと

私自身がこの拡張機能を日常的に使うようになって、予定を見逃すことがほとんどなくなりました。Webブラウザで作業中に常にサイドパネルに予定が表示されているので、「あ、そういえば会議があった」と慌てることがなくなったんです。

また、意外な効果として、今日残っている作業時間が可視化されるため、「この空き時間でどの作業を進めようか」という計画も立てやすくなりました。時間の使い方に対する意識が自然と高まる効果もあるようです。

特に便利なのは、Google Meet会議が設定されている予定では、サイドパネル上の予定をクリックするだけで直接会議に参加できる点です。以前は会議の数分前になると「あれ、URLどこだっけ?」とカレンダーを開き直していましたが、今ではワンクリックでMeetに接続できるので、会議参加までの心理的なハードルが下がりました。

SideTimeTableの強み

実はChromeのSidePanelに情報を表示する系の拡張機能が意外とまだ少ないのです。比較的新しいChromeの機能ということもあり、この領域はまだ開拓の余地があります。SideTimeTableはその先駆者として、ブラウザ上での新しいスケジュール管理の形を提案しています。

サイドパネルという「常に表示されるけれど邪魔にならない」絶妙な位置に情報を配置することで、タブを切り替えたり、別アプリを起動したりする必要がなく、作業の流れを中断せずにスケジュールを確認できる点が大きな利点です。特に会議の多い日や締め切りが迫っているプロジェクトがある時に、この拡張機能の価値を実感できるでしょう。

使い方とインストール方法

SideTimeTableはChrome Web Storeですでに公開中です。
Chromeの「SideTimeTable」ページから「Chromeに追加」ボタンをクリックするだけで、すぐにインストールできます。
また、詳細な使い方やスクリーンショットは公式ランディングページ(https://badfalcon.github.io/SideTimeTable/)に掲載していますので、ぜひご覧ください。(見た目は今後改善します…。)

開発の裏話

SideTimeTableの初期開発は、アイデアがひらめいた瞬間から、できるだけ早く形にしようという思いで進めました。
補助的にAIツール(Clineが流行る前のChatGPT)を活用しながら効率的にコーディングを進め、短期間で初期バージョンを完成させることができました。

しかし、最も苦労したのはGoogleのOAuth認証の申請プロセスでした。ユーザーのカレンダー情報は機密事項なので、利用目的の詳細な説明や免責事項のページを準備する必要がありました。申請しても何度か却下されるなど、予想以上に厳格な審査があることを初めて知りました。

「単純な機能なのに、こんなに手続きが必要なんだ」と驚きましたが、ユーザーのプライバシーを守るための重要なステップだと理解できました。これらのプロセスを乗り越えて今の形に落ち着いたのは、多くの学びがあったからこそです。

今後の展望

今回のリリースは、あくまで第一歩です。実はやりたいことはありすぎて、時間が足りない状況です!皆さんのフィードバックも取り入れながら、これからさらに使いやすいツールにするため、以下の改善や新機能の追加を検討しています。

  • 複数カレンダーの表示対応
    現在はメインのカレンダーの予定しか表示できないので、仕事用・プライベート用など複数のカレンダーを切り替えられるようにします。
  • アラート・リマインド機能
    予定開始前に通知するリマインダー機能を追加し、予定の見落としをさらに防ぐ仕組みを導入予定です。
  • 空きスペースへのメモ追加
    カレンダーの空き時間に簡単なメモを追加できる機能で、ちょっとしたタスクも管理できるようにします。
  • 表示カスタマイズの拡充
    色やフォント、表示形式などより細かいカスタマイズオプションを追加し、使い勝手を向上させます。
  • 不具合修正と安定性向上
    ユーザーからのフィードバックをもとに、バグ修正や動作の安定性向上に継続的に取り組みます。
  • Google Chrome以外のChromiumブラウザへの対応
    Google Chrome以外のSidekickなど、Chromiumベースのブラウザでも快適に利用できるよう改善を進めていきます。

コントリビュートについて

SideTimeTableはオープンソースプロジェクトとしてGitHub上で公開しています。
皆さんのご意見や改善提案、新機能の追加など、どなたでもコントリビュートしていただけると大変嬉しいです。
興味がある方は、ぜひbadfalcon/SideTimeTableをご覧ください。
ご連絡は主にGitHubのIssueをご利用いただければと思います。

まとめ

Chrome拡張機能「SideTimeTable」は、自分自身が会議の予定を忘れてしまうという日常の課題を解決するために開発しました。

直感的なサイドパネル表示、Googleカレンダー連携、Google Meetへのワンクリックアクセス、ローカルイベント管理、そして豊富なカスタマイズ機能で、PC作業中にも予定を手軽に確認・参加できる環境を提供します。

ChromeのSidePanel機能を活用した数少ない拡張機能の一つとして、新しいスケジュール管理の形を提案していきたいと思います。まだまだ発展途上ですが、これからもより良いツールに進化させていく予定ですので、ぜひ使ってみてください!

ぜひ、Chrome Web StoreからSideTimeTableをインストールして、実際に使ってみてください。

皆さんからのフィードバックとコントリビュートをお待ちしています。みなさんの日々の予定管理がより便利になるよう、これからも改善を続けていきますので、どうぞよろしくお願いします!

この記事がお役に立てば【 いいね 】のご協力をお願いいたします!
9
読み込み中...
9 票, 平均: 1.00 / 19
543
X facebook はてなブックマーク pocket
【ウェビナー】【エンジニア必見】AI活用で効率化!サーバー運用の新常識

【ウェビナー】【エンジニア必見】AI活用で効率化!サーバー運用の新常識

この記事をかいた人

About the author

スジュン

過去にはゲーム会社でゲーム制作をしていました。
趣味はプログラミングとゲーム(LoL等)です。
ディズニーではフィガロが好きです!