Google Apps Script試行錯誤 Blog: スプレッドシートのアドオンを作りたい（公開・限定公開する）

スプレッドシートのアドオンを公開・限定公開するまでの道がわからず、その壁を越えた手順を順番にキャプチャしながら書き残しました。

公式のリファレンスに沿って試しましたが、設定する画面が多く、
初めてやる場合は動作確認やリファレンス確認で1時間以上はかかると思います。
（もっと簡単な方法があるかもしれません）

アドオン公開手順がメインのため、実行するコードはメッセージを表示するだけの短いものにしています。

今回調べて書いた手順

Apps Scriptの standalone script にコードを書いて保存する
テストする
バージョンを保存する
Cloud Platformプロジェクトで設定する

APIとサービスの認証情報

OAuth同意画面で「承認済みドメイン」「[アプリケーションホームページ] リンク」を設定して保存する

APIとサービスのライブラリ

G Suite Marketplace SDKを有効にする

G Suite Marketplace SDKの設定

各項目を設定する

ウェブアドオンとしてデプロイする

各項目を設定する

Chrome web storeで公開する

各項目を設定する

この記事を書く前の事前知識

ここから実際に作っていきます

1. Apps Scriptの standalone script にコードを書いて保存する
FYI：createAddonMenu(), onInstall(e)

新規スクリプトファイルを作成します
https://script.google.com/macros/create

以下のコード.gsを書いて保存します

プロジェクト名を任意で変更します

コード.gs

function onOpen(e) {
  SpreadsheetApp.getUi()
      .createAddonMenu()
      .addItem('Message', 'showMessage')
      .addToUi();
}

function onInstall(e) {
  onOpen(e);
}

function showMessage() {
  Browser.msgBox('メッセージを表示する');
}

意訳

この機能がやること
スプレッドシートのUIに
アドオンのメニューを追加して
項目名と実行する関数を設定して
追加する


この機能がやること
onOpen(e)を実行する


この機能がやること
メッセージを表示する

2. テストする
FYI：Test an editor add-on

アドオンをテストするためのシートを作ります
sheet.new
スプレッドシートの名前を任意で変更します（例ではAdd-on test sheet）

アドオンのプロジェクトに戻って
実行 > アドオンとしてテストを選択します

「ドキュメントを選択」をクリックします

「スプレッドシート」を選択して
先程作ったスプレッドシート名で検索して
対象のシートをクリックして
「選択」をクリックします

「保存」をクリックします

「最新のコード」をチェックして
「テスト」をクリックします

新規タブでスプレッドシートが開きます
アドオンの中に
Messageを表示する > Message
が追加されているので選択します

「続行」をクリックします

アカウントを選択します

「詳細」を選択します

一番下に現れるリンクをクリックします

「許可」をクリックします

アドオンのコードに書いたメッセージがシートに表示されたら成功です

3. バージョンを保存する
Create a script version

ファイル > 版を管理を選択します

説明を入力して（例ではfirstversion）「新しいバージョンを保存」をクリックします

保存後「OK」をクリックします

4. Cloud Platformプロジェクトで設定する

APIとサービスの認証情報
FYI：Configure the OAuth consent screen

リソース > Cloud Platform プロジェクトを選択します

プロジェクトのリンクをクリックします

このような画面が開きます

※チームドライブ内のスクリプトはCloud Platformプロジェクトにアクセスできないことがあるそうです

左のメニューで APIとサービス > ダッシュボードを選択します

ダッシュボードに移動後
左のメニューから「認証情報」を選択して「OAuth 同意画面」を選択します

・承認済みドメイン
・[アプリケーションホームページ] リンク
を入力して「保存」をクリックします

APIとサービスのライブラリ
FYI：Enable the Marketplace SDK

APIとサービス > ライブラリを選択します

検索ボックスに G Suite Marketplace SDK と入力して
結果に表示される「G Suite Marketplace SDK」をクリックします

「有効にする」ボタンをクリックします

G Suite Marketplace SDKの設定
FYI：Configure the Marketplace SDK

左のメニューで「設定」を選択して「アプリケーションの説明」を入力します

「アプリケーションのアイコン」を設定します

「利用規約のURL」を設定します

「OAuth 2.0 スコープ」のURLを入力します
https://www.googleapis.com/auth/spreadsheets

ちなみにこれはアドオンのコードのファイル > プロジェクトのプロパティの

このスコープと解釈して入力しました

「拡張機能」の項目を適宜チェックします

「ユニバーサルナビゲーションバー」って何？
と思いググってみましたが「これ」という情報が見つかりませんでした。
わかったら追記します。

アドオン拡張機能からスプレッドシートアドオン拡張機能をチェックします
・「スクリプトのプロジェクトキー」には「スクリプト ID」を入力します
・バージョンは保存したバージョンの数値を入力します

「変更を保存」をクリックします

5. ウェブアドオンとしてデプロイする
FYI：Configure the Chrome Web Store listing and publish

公開 > ウェブアドオンとしてデプロイを選択します

「簡単な説明」を入力します
「アドオンの種類」を選択します
「バージョン」を入力します
「ヘルプのURL」を入力します
「問題の報告用 URL」を入力します
「インストール後のヒント」を入力します
「G Suite Marketplace で公開する」にチェック
「ウェブストアアイテムの下書きを作成」をクリックします

アカウントのパスワードを求められたら入力して「Next」をクリックします

6. Chrome web storeで公開する
FYI：Chrome の限定公開アプリの公開

公開するには一番下までスクロールして
Visibility optionsを決めて
右下の「Publish changes」ボタンをクリックします

「OK」をクリックします

するとこのようなエラーが出るので、ひとつずつ設定して行きます

At least one screenshot or video is required.
Small tile image is missing.
Please select a Primary Category for your item.
Language is not selected.

「Icon image is missing」
128 ✕ 128 ピクセルのpng画像をアップロードすると解決します

アイコンの作り方は色々あると思いますがDrawingsで作る例を以下に書きました
Google Drawingsでアイコンを作ってみる

「At least one screenshot or video is required」
1280✕800または640✕400 ピクセルの画像をアップロードすると解決します
（Drawingsで画像を作ったり、スクリーンショットを撮ったり）