エディタのアドオン ユーザー インターフェース（メニュー、サイドバー、ダイアログ）の構築には、Apps Script の HTML サービス。インターフェースは HTML と CSS で開発されており、高度なカスタマイズが可能です。ただし、 構築する際は 優れたユーザー エクスペリエンスを提供できるよう 体験できます
優れたアドオンは、使い慣れたコントロールやツールで各エディタを自然に拡張 サポートします。新しいアドオンを作成する場合:
- アドオン CSS パッケージを HTML サービスのページ。
- デザインについて疑問がある場合は、エディタで同様のダイアログやサイドバーを探して、 一致させるか アドオンのクイックスタートをご覧ください。
- このスタイルガイドに沿って、シームレスなエクスペリエンスを創出します。
テキスト
アドオン名
アドオンの名前は公開するときに設定する必要があります できます。この名前は、アドオンストアやメニュー内など、さまざまな場所に表示されます。
- 語頭を大文字にします。
- ブランド要素の一部でない限り、句読点、特に丸括弧は使用しないでください。
- できる限り短くしてください。30 文字以下が最適です。長い名前は 自動的に切り捨てられます。
- アドオンの対象となる Google プロダクトの名前（ 。
- バージョン情報は省略します。
- アドオンの公開名がファイルのファイル名と同じであることを確認してください。 実行することもできます。プロジェクト名が認証ダイアログに表示されます。
| 悪い例 | すべきこと |
|---|---|
 |
 |
文章のスタイル
記述はあまり必要ありません。ほとんどのアクションは 画像、レイアウト、短いラベルですアドオンの一部が見つかった場合 短いラベルよりも詳細な説明が必要な場合は、 アドオンについて説明したウェブページを別途作成し、そのウェブページにリンクする演習を行います。
UI テキストを記述する場合:
- 最初の語だけを大文字にします（ボタン、ラベル、メニュー項目の場合は特に）。
- 専門用語や頭字語を使用しない、短くシンプルなテキストが好まれます。
| 悪い例 | すべきこと |
|---|---|
|
|
|
インストール後のヒント
インストール後のヒントは、ユーザーがアドオンをインストールした後すぐに表示されます。また、 表示されます。ユーザーがすぐに使用を開始できるよう、いくつかの文を用意してください。
- アクション ワードから始めます。
- アドオンを使用するための最初のステップについて説明します。
- サイドバーなどのメインの UI がある場合は、それを開く方法について説明します。
- アドオンはすでにインストールされているため、ここで宣伝しないでください。
| 悪い例 | すべきこと |
|---|---|
 |
 |
メニュー項目
通常の Apps Script プロジェクトとは異なり、アドオンはスクリプト エディタに表示されません スクリプトマネージャーユーザーはアドオン スクリプトを直接実行できません。代わりに、 [アドオン] メニューに表示されます。 メニュー（ダイアログやサイドバーも含む）を使用して、 操作できます。
- メニューはユーザーがアドオンを制御するうえで重要な要素であるため、メニューを 慎重に検討してください。
- メニュー項目でアドオンの名前を繰り返すことは避けてください。代わりに、 なります。
- メインメニュー項目からワークフローが開始され、それを表す単一の動詞がない場合 説明するので、「Start」と呼んでいます。このパターンは、 ドキュメント アドオンのクイックスタート
- メニューの項目が 6 個を超える場合を除き、サブメニューは使用しない。ユーザーは、 細かく選択しづらいものになります
- メニュー項目に表示される UI コンポーネントではなく、タスクについて説明します。
| 悪い例 | すべきこと |
|---|---|
 |
 |
エラー メッセージ
問題が発生した場合には、わかりやすい言葉を使うことが重要です。説明 ユーザーの立場で考え、解決方法を提案します。
- コードがスローする例外をユーザーが確認できないようにします。代わりに、
try...catchステートメントを使用して例外をインターセプトし、ユーザー フレンドリーなエラー メッセージを表示する インライン テキストが アドオン CSS のerrorクラス アラートのダイアログが表示されます。 - 公開する前に、アドオンによってデバッグ情報がログに記録されていないことを確認してください JavaScript コンソール Stackdriver Logging してください。
| 悪い例 | すべきこと |
|---|---|
 |
 |
ヘルプ コンテンツ
すべてのアドオンのメニューに自動ヘルプ ダイアログが含まれています。ヘルプ URL を提供する場合 公開時に [詳細] ボタンもそのページへのリンクが表示されます。お客様の アドオンは説明不要ですので、その使用方法を説明したページを提供してください。
- 可能であれば、手順は箇条書きまたは番号付きリストで示します。徒歩のユーザー 名前付き UI 要素に明確に参照します。
- 設定などの要件がある場合は、手順にわかりやすく説明してください。 特定の方法で実行できます。
- メインのユーザー インターフェースからいつでもヘルプ コンテンツにリンクできます。 アドオンで新しいドキュメントが作成される場合は、 あります。
カスタム ユーザー インターフェース
シンプルなエディタ アドオンの中にはメニューだけで操作できるものもありますが、ほとんどのアドオンは サイドバーやダイアログを 説明します。
- サイドバーはユーザーが使用する可能性の高い永続的なツールに最適 ドキュメントやスプレッドシートの内容を参照しながら繰り返しアクセスします。
- ダイアログは、使い捨てのツール、設定ページ、重要なメッセージに最適です。
UI テキスト
ダイアログやサイドバーでは、タイトルとボタンのラベルしか読まないと想定します。 ユーザーもインターフェースの機能を理解し、適切な選択をできるでしょうか？
- 独立したタイトルとボタンラベルを使用します。
- 説明文の長いブロックは避けます。
ダイアログ
ダイアログは、一度使った後に次に移るツールに適しています。たとえば、 アドオンを使用すると、ユーザーがグラフィックを挿入できます。また、ダイアログを表示して、 挿入したい内容を入力してから、画像が挿入されたらダイアログを閉じます。ダイアログは アドオンの設定を表示する場合や、 確認しましょう。
- ダイアログ（ アラートやプロンプトなど）のみを使用する 1 つずつ表示します
- ダイアログのタイトルには、単語または短いフレーズを使用し、先頭に大きい番号を付加します。 です。
- ボタンのラベルは、ダイアログのタイトルと関連したものにする必要があります。
- 2 つのボタン（通常はメインの操作と [キャンセル]）が望ましい。特殊なケース向け 3 つ目のボタンが必要な場合は、右下隅を検討してください。
- ダイアログの左下にボタンを配置します。青色のメインボタン が左側にあり、グレーのセカンダリ ボタンが右側にあるはずです。
| 悪い例 | すべきこと |
|---|---|
 |
 |
サイドバー
サイドバーにより、ユーザーは自分のドキュメント、スプレッドシート、プレゼンテーション、 選択する際にまた、他のユーザーがアドオンを繰り返し使用することも可能になります。 新しいサイドバーを開くと、以前のサイドバーは自動的に閉じます。 完了後にユーザーが終了する一時的なモードに最適です。
- ユーザーが他のアドオンに独自のサイドバーを持っている場合もあります。2 つのアドオンが 同時に開くと、1 つだけ表示されます。
- ドキュメントの初回起動時にサイドバーやダイアログを表示しません。
- 次で動作するアドオンのみ:
AuthMode.FULLサイドバーやダイアログを開くことができます。メニュー項目を使用して サイドバーに表示されます。これは、ユーザーに完全な承認を求めるためです。
コントロール
優れたアドオン UI により、操作に少し余裕が生まれます。十分なマージンと 高密度の制御は負担に思えるかもしれません。設定中 エディタ自体からレイアウトを借用してください。たとえば、既存の ダイアログを開きます（[ファイル] >ページ設定: 独自のページを作成するとき。
アドオン CSS パッケージのドキュメントをご覧ください。 には、以下の各タイプのコントロールに対応するサンプル マークアップが記載されています。
ボタン
ユーザー インターフェースの主なアクションを単純なものではなくボタンで制御する リンクなどの要素を追加します。
- 青、赤、緑のボタンを同時に複数表示することは避けてください。グレー ボタンが繰り返し表示される場合があります。
- ほとんどのボタンラベルは文頭を大文字にし、動詞で始まります。赤 ボタン（通常は作成アクション用）はすべて大文字にします。
| 悪い例 | すべきこと |
|---|---|
|
|
|
チェックボックスとラジオボタン
チェックボックスは、ユーザーが複数のオプションを選択できる場合、またはオプションをまったく選択できない場合に使用します。使用 オプションを 1 つだけ選択する必要がある場合は、ラジオボタン（または選択メニュー）を使用します。
- チェックボックスを変更しない使用しないでください。
- 確認後すぐには何もしないでください。人々は間違えることがあります。待機 ユーザーが選択内容を確定するまで 表示されません
メニューを選択
セレクトは、短い選択肢を提示する優れた方法です。
- オプションをアルファベット順またはすべてのユーザーが利用できる論理スキームで並べ替える 理解（日曜日から始まる曜日など）を返します。
- リストが長すぎる場合は、別のコントロールの使用を検討してください。たとえば スクロール可能なリストを表示してメニューのスペースを広げ、 簡単に移動できます
テキスト エリア
複数の単語を入力する必要がある場合は、テキスト領域を使用します。
- テキスト領域を 2 行以上の高さにして、使いやすく、 見えます。
- 上にラベルを配置します。
テキスト フィールド
1 つか 2 つの単語を入力する必要があるだけの場合は、テキスト フィールドを使用します。
- テキスト フィールドの幅は、入力内容の目安となるものである必要があります。
- プレースホルダ テキストはフォーカス時に消えるため、ラベルとして使用しないでください。 プレースホルダ テキストは、例や追加の詳細を示す場合に役立ちます。
- ラベルは上部に配置しますが、短いテキスト フィールドは自由に横並びで配置できます。
ブランディング
アドオン内
ブランディングを使用する場合は、簡潔で簡潔なものにします。これにより、 ユーザーは UI に集中できるため、アドオンもエディタの一部のように感じられます。
- アドオンのすべての側面は、 ブランドの取り扱いガイドライン。
- 「Google」という単語を含めたり、Google プロダクトのアイコンを使用したりしないでください。
- テキストは数語以内にし、
アドオン CSS の
grayクラス パッケージ化されています。 - グラフィックの背景は白色で、サイズは 200 × 60 ピクセル以下とします。
- ダイアログでは、ブランディングは右下隅に配置する必要があります。
- サイドバーでは、ブランディングを上部または下部に配置できます。
店舗
エディタ アドオンを公開するには、 画像アセットの数。 これらのアセットは、アドオンのストアの掲載情報の作成に使用されます。
- ストアの掲載情報のあらゆる面は、 ブランドの取り扱いガイドライン。
- 提供する必要がある画像について詳しくは、 画像に関するガイドラインをご覧ください。
ユーザー補助
アドオンの色に関係なく、すべてのユーザーが楽しめるようにする必要があります スクリーン リーダーを使用するなど、さまざまなニーズがあります。アクセシビリティは このスタイルガイドでは説明しきれないトピックもあります。こちらの Google ユーザー補助のサイトをご覧ください。ここでは、 ヒントをいくつかご紹介します。
- キーボードですべての UI コントロールに移動できることを確認します。追加
tabindex=0からカスタム コントロール（<div>で作成したコントロールなど）に変更し、ユーザーが次の操作を行えるようにします。 タブを開きます。矢印などの他のキーもサポートする必要があるかどうかを検討する 表示することもできます。 - アドオンでスクリーン リーダーを使用するユーザーもいます。したがって、画像には
CANNOT TRANSLATE
alt属性 カスタム コントロールには 使用方法を記述する ARIA 属性。 - 状態を伝えるのに色のみに頼らないでください。アイコンとテキストも使用します。
このガイドで前述したような標準のウェブ コントロールを使用している場合は、 アドオンを簡単に利用できるようにします