概要
Chrome拡張機能を作成して、プログラミングスクール生の専用アプリ内のイベント情報を、
自分のGoogleカレンダーにサッと登録できるようにしました。
今回の成果物だとHTML/CSS/JavaScript(ライブラリ無し)の知識で行けるのでハードルは高くなかったです。
この記事で取り扱うこと
- なぜ拡張機能を作ろうと思ったか（解決したい課題）
- Chrome拡張の概要と参考にした記事
- Googleカレンダーへの予定追加用リンクの作り方 ※今回の拡張機能に関係なく転用できそうです
この記事では扱っていない技術
- TypeScript
- React,Vueなどのライブラリ・JSフレームワーク、Webpack
- Day.jsなどのJavaScriptのUtility系のライブラリ
できるだけ使いたい人の導入のコストを下げるため、かつ自分で弄ったりできるよう解説しにくいものは使いませんでした。
面倒だったからではないです。
完成品
RUNTEQ生で同じ悩みのある人はローカル端末に導入して使ってみてください。
非公式アプリなのでサイトの変更に伴って利用できなくなったり、データの種別によっては正常に動作しない場合があります。
- イベントの詳細ページで拡張機能を起動すると以下のように画面がポップアップし、カレンダーへの連携ボタンが表示されます。 追記(11/14)：面談予約詳細ページにも対応
- 「Googleカレンダーへ登録」ボタンを押すと新しいタブでカレンダー追加用のページが開き、保存するだけです（データはデフォルトで入力済）。
なぜ拡張機能を作ろうと思ったか（解決したい課題）
RUNTEQでは受講生のみ利用できる学習カリキュラムやその他諸々の情報が載っているサイト（Webアプリ）があり、
その中の1機能としてRUNTEQ内で開催されているイベントの参加予約が行えます。
RUNTEQで開催されているイベントについては以下記事を参照ください。（毎日多種多様なイベントが行われてます！）
困っている点として、Webアプリ内では何個か遷移すると自分が予約したイベント一覧を確認できるのですが、
他のスケジュールはGoogleカレンダーで管理していたため、カレンダーに登録し忘れた時はイベント直前まで忘れることがありました。
（イベント開始の2時間前にリマインダーメールが配信されるため、すっぽかすところまでは行きません）
予定を一元管理したいと言う思いがあり、自動化でなくともGoogleカレンダーに登録しやすくできないかなーと思っていたところ、connpassで以下のボタンを見つけました。
このボタンは特殊なことをしているわけではなく、後述しますが特定のURLに対してクエリパラメータで予定の情報を付与しているだけのようです。
機能追加についてユーザーの1意見として改善提案することも考えられますが、
- 誰もがスケジュール管理にGoogleカレンダーを使っているわけではない
- いつ実装されるかはわからない
という観点からエンジニアだったら自分で作ったれやと思い立ち、今回はChrome拡張機能作成に至りました。というか作ってみたかったんや。
イベントページを開いてから3クリックで予定登録まで完了するので かなり楽になりました。
本編
Google Chrome拡張機能と今回作成した拡張機能の概要
外部サイトやQiitaなどでも参考となる記事は多数あるため、参考としたリンクを中心に紹介しつつ簡単に説明します。
各サイトで触れられている通りmanifest.jsonに、以下のような情報を登録します。
- 実行するアクション
- 拡張機能で各種ブラウザの情報にアクセスするためのパーミッション
- アイコンの情報
- ショートカットキー
etc..
今回のmanifest.jsonは以下の通りです。
{
"name": "RUNTEQ event to goole calendar",
"description": "RUNTEQのイベントをGoogleカレンダーに登録しやすくするための拡張機能です。",
"version": "1.0",
"manifest_version": 3,
"permissions": ["activeTab", "scripting"],
"action": {
"default_popup": "popup.html",
"default_icon": "icon.png"
}
}
また、ソースコードのフォルダ構成は以下の通りです。
└ README.md
└ icon.png // 拡張機能のアイコン
└ manifest.json // 拡張機能を規定するJSONファイル
└ popup.html // アイコンをクリックした際に表示されるHTML
└ popup.js // ポップアップ時の表示＋ボタン押下時の動作を記載
└ style.css // ポップアップ内のスタイルを記載（別途BootStrapも利用）
今回の拡張機能は割とHelloWorldのコード+BootStrap導入+JavaScriptで追加用のコードを書いたくらいです。
（実装にかかった時間自体も1日程度）
拡張機能へのBootStrap導入について
BootStrap導入については以下の記事を参考にさせていただきました。
HTML中で4.x系のBootStrapをCDNから読み込むことで導入できました。
【入門】Google Chrome Extension (拡張機能)でBootstrapを使用する
Googleカレンダーへの予定追加用リンクの作り方
connpassのボタンに設定されているリンクを見たり調べてわかったのですが、
https://www.google.com/calendar/renderというURLに対して各種クエリパラメータを設定した状態でアクセスすることで、完成品で示したように値が埋められた状態で予定追加ページに遷移できます。
以下の記事も参考にさせていただきました。
イベントの詳細ページにタイトルや日時があるので、今回は以下のようなマッピングにしています。
（何個かはconnpassの設定値を参考にしています）
| パラメータ | 説明 | 設定値 |
|---|---|---|
| action | 基本「TEMPLATE」固定 | TEMPLATE |
| text | 予定の件名 | イベントページ中のタイトル |
| dates | 予定の時間。「YYYYMMDDThhmmss/YYYYMMDDThhmmss」で指定。(一つの日時のみ指定した場合は終日判定) | イベントページ中のイベント日時 |
| details | 予定の説明 | 対象のイベントページのURL |
| location | 場所 | 「オンライン」固定 |
| trp | 外部向け公開オプション | 「false」固定 |
実装時に引っかかった点、実装を見送った点
-
Chrome拡張機能のお作法
Chrome拡張機能初心者ということが大きいですが、ブラウザのアクティイブなタブと拡張機能のポップアップのタブは見た通り別物なので、chromeのAPIであるchrome.tabs.query(APIリファレンス)で情報を取得したり、chrome.scripting.executeScript(APIリファレンス)でスクリプトを実行するというお作法があることを学びました。 -
JavaScript系のライブラリ導入
勉強中のVue.jsや、イベントの日時の文字列を取り扱ったりするためDay.jsを導入するため、BootStrap同様にCDNから読み込んで使おうと思いました。
ただ、こちらは単純に読み込みだけを行うと以下記事のようにCORSポリシーの問題からエラーとなってしまいます。（参考記事）
webpackを利用してビルドをしたり、manifest.jsonに回避用の記述を書くという記事も見たのですが、今回は一旦課題解決の本質では無いかなと思い見送りました。
さらにステップアップするなら...
-
JSライブラリ導入（技術面）
vue-web-extensionなどを利用してVueを適用することを考えています。 -
ショートカットキーの導入追記(11/3)：Ctrl+Shift+Uとして追加済み
manifest.jsonに少し記述を追加すれば、拡張機能を呼び出すためのショートカットキーの割り当てが行えます。
どーでもいい話ですが、どのキーをバインドしようか悩んだので今回は見送りました。以下の記述でショートカットキーを追加しました
manifest.json(中略) "commands": { "_execute_action": { "suggested_key": { "default": "Ctrl+Shift+U", "mac": "MacCtrl+Shift+U" }, "description": "拡張機能を起動します。" } } -
別ページにも対応する（横展開）追記(11/14)：面談予約詳細ページにも対応しました
似たような思いで、Webアプリ内の面談予約ページについてもGoogleカレンダーに登録しやすくしたいなーと思ってます。
（ページの構造は異なるので個別ロジック追加）
終わりに
今回はGoogle Chromeの拡張機能作成に入門しました。
予想していたよりずっと楽に実装ができたので、課題を解決するための色々な選択肢の一つに入りそうです。
とはいえまだ理解していない部分も多いので、ガッツリとした機能を作るならドキュメント等の読み込みが必要そうだなと感じました。
無い機能を嘆くのではなく、作ってみるという選択肢もアリだなと考える体験になりました。
以上です。