Google SpreadSheetをGitHubでバージョン管理するためのアドオンVersion Oceanをリリースしました

インストール

Google Marketplaceからインストーすることができます。

• https://workspace.google.com/marketplace/app/version_ocean/81621531033

これは何？

Google SpreadSheetのデータをGitHubに直接Commit/Pull Requestができるようにするためのアドオンです。

Pull Reqeustを作成する画面

アドオン経由で作成されたPull Request

スプレッドシートにGitHubからデータを復元する

使い方

使い方ページをご覧ください。初期設定後であれば、Git/GitHubを使ったことのある人であればすぐに利用できるでしょう。

※ 今後、使い方の動画とかを用意する予定です。

開発背景

Google Spread Sheetは本当に様々な用途で利用することができる優秀なコラボレーションツールです。しかしながら、バージョン管理に関してはGitを知っている人から見ると機能不足なことは明らかです。Google App Script（GAS）やAPIを駆使すれば実現できることはエンジニア視点だと持つことはできますが、それを非エンジニア領域まで布教するのは明らかに困難です。同じシートを管理している関係者全員が同じようにバージョンを管理できる状態に立てて初めて使い方の教育や導入ができます。

ゆえに、最終的にそのようなアドオンは世の中になく、自作する決意をしました。

機能紹介

• OAuthによる認証機能
  • Access Tokenによる認証もできます
• Git Commmit
• Pull Request
• GitHub上に保存されたデータを復元する機能があります
• データの保存形式は、json, csv, tsvが利用可能です。

※ jsonを利用する場合はcsv、tsvと異なり、利用できる文字列に多少の融通が聞きます。"など。

このアドオンの使い所

非エンジニアにも使ってほしい

目的は第一にアドオンの目的はここにあります。スプレッドシートをバージョンを管理する目的自体は多くのgitを利用するエンジニアが共感を持っていただけると信じていますが、その恩恵を非エンジニアにも提供をしたい。git/githubについての知識がいくらか必要となりますが、その技術的な参入障壁はこのアドオンが壊して行きます。もしバージョンの管理で困っている所があれば本アドオンを利用してみてください。

スプレッドシートはUIとして使える

表形式のデータを扱うためにはExcelやスプレッドシートといったツールが大変便利です。もしGitHub上ですでに管理されているCSVがあればこのアドオンを通してスプレッドシート上にデータを復元し、修正作業を行うことができます。

セキュリティ

アドオンが保持する情報

アドオンが保存するデータはすべてユーザーに属するものとしています。他のユーザーが自分のアドオンに保存したデータを閲覧できないようなスコープで設定しています。

外部サービスとの連携

GitHubに対してスプレッドシートのデータを送受信することになります。GitHubのリポジトリの公開範囲はスプレッドシートの公開範囲と異なるため、それぞれの公開範囲を注意深く確認してください。公開範囲についてはアドオンから指定することは不可能なため、ユーザー側の注意でしか防げません。

※ 昨今この公開範囲についてはニュースでも話題ですので重々ご注意ください。

技術スタック

選定理由は書くと長くなってしま（った）うのでその一覧だけ記しておきます。

Frontend

• preact
• TypeScript
• webpack

Google App Script

• clasp
• googleworkspace/apps-script-oauth2
• @himenon/openapi-typescript-code-generator
  • 別記事参照
• Modern Google Loader in Pure CSS
• CSS package for editor add-ons - Google Workspace for Developers

開発と審査

開発

アプリケーションの実装

Gitの履歴を見る限り、1月の終わりくらいから2月の中旬ぐらいがピークでそこでほとんどが完成。 2月の中旬から審査提出前まではガイドラインに沿ったデザインや挙動の調整を行っています。アプリの開発自体はかなり序盤に終わっているのですが、審査に通すための調整に結構苦労しています。

サイトの作成

サイト自体にも規定があるため、低コスト低運用を目的としてGoogle Siteで作成しました。 アプリケーションの実装がすべて完了してから作成したほうが良いですね。自分で入れた仕様変更に苦しんだりします。文章はスプレッドシートで管理してコピペで済むようにしてました。ちょうど自分が作ったアドオンで管理していたのでそこまで苦ではなかった。

翻訳

• DeepLに課金しました。多分継続します。

審査

２種類ありまして、以下の通りになりました。Editor Add-on reviewの方はOAuth Verificationが終わってからの必要があり、またDeveloper向けのドキュメントがかなりわかりにくいこともありかなりかかってしまいました。

レビュー内容	所要日数
OAuth Verification	9日
Editor Add-on review	19日

OAuth Verificationの審査でなかなか伝わらないので、Fincal Cut Proですべての行動に対して注釈を入れた映像を送ったら次の日に通りました。まさか次のレビューのほうが時間かかるとは、そのとき思っても見ませんでした。

感想・フィードバックお待ちしております

ぜひGoogle Marketplaceに対してレビューをお願いします。不具合を見つけた場合は問い合わせページから送ることができます。

また、zenn.devでもスクラップを用意しております。そちらでも受け付けております。

• https://zenn.dev/himenon/scraps/03e7c468c26419

もう少し詳しく知りたい

なんか書こうと思います。

大変参考になった記事

日本語の記事はかなり少ないですが、以下の２本の記事は大変参考になりました。残念ながら現在はUIが変わっていたりして細かいところで違っていますが大きな流れは現状も変わっていません。ただ間違いなく自分の開発に影響をもたらしたので感謝いたします。

1. Google Apps Script のアドオンの作成手順 - Qiita
2. スプレッドシートのアドオンを作りたい（公開・限定公開する） - Google Apps Script試行錯誤 Blog

※ 細かいとはいえ、かなり時間を溶かした仕様変更が入っていてそれに気がつくまで時間がかかってます。これはまた別の記事にしようかと思います。

最後に

是非インストールして使ってみてください！

Version Ocean - Google Marketplace

（紹介記事とかもぜひ...）