LANG SELRCT

コードを書く場所

2019年1月13日日曜日

スプレッドシートのアドオンを作りたい(公開・限定公開する)


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

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


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


今回調べて書いた手順
  1. Apps Scriptの standalone script にコードを書いて保存する
  2. テストする
  3. バージョンを保存する
  4. Cloud Platformプロジェクトで設定する
    • APIとサービスの認証情報
      • OAuth同意画面で「承認済みドメイン」「[アプリケーション ホームページ] リンク」を設定して保存する
    • APIとサービスのライブラリ
      • G Suite Marketplace SDKを有効にする
    • G Suite Marketplace SDKの設定
      • 各項目を設定する
  5. ウェブアドオンとしてデプロイする
    • 各項目を設定する
  6. 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プロジェクトで設定する



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



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



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

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


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



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



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





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



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



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





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



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



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



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


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


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



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


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


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



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




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


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




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


アカウントのパスワードを求められたら入力して「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で画像を作ったり、スクリーンショットを撮ったり)



「Small tile image is missing」
440✕280 ピクセルの画像をアップロードすると解決します

「Please select a Primary Category for your item」
カテゴリーを選択すると解決します


「Language is not selected」
言語を選択すると解決します

「Visibility options」
Publicにすると誰でも見ることができます(レビューを通過する必要があります)
Privateにすると限定したユーザにだけ公開できます(レビュー不要)
G suiteの場合はドメイン内だけに限定することもできます
Chrome の限定公開アプリの公開

ちなみにPrivateのtrusted testersはデベロッパーズダッシュボード
「Edit your tester accounts」から設定できます



これでテスターに設定したアカウントに公開することができました


世界に公開する場合は、PrivateではなくPublicを選択して公開し、その後Google側のレビューを通過すると正式に公開されます。