Google は今年、Google ドキュメントでサードパーティのスマートチップの一般提供を開始することを発表しました。この新機能を利用すれば、重要な情報をサードパーティ アプリから直接 Google ドキュメントに追加、表示、および操作できます。Asana、Atlassian、Figma、Loom、Miro、Tableau、Whimsical など、多数のパートナーがすでにスマートチップを開発し、自社アプリのコンテンツをユーザーが直接ドキュメントに埋め込めるようにしています。Google Workspace の Google Developer Expert であり、趣味でもアプリを開発している Sourabh Choraria は、サードパーティのスマートチップ ソリューション「Link Previews」を Google Workspace Marketplace 上で公開しました。このアプリを使えば、一般的に使用されているさまざまな SaaS ツールから Google ドキュメントに情報を追加することができます。
このブログ投稿では、Google ドキュメント用に独自のスマートチップを作成する方法をご説明します。
サードパーティ製スマートチップは Google Workspace アドオンを基盤として動作し、Google Workspace Marketplace 上で公開できます。管理者またはユーザーがそのページからアドオンをインストールすると、Google ドキュメントの右側にあるサイドバーに表示されます。
Google Workspace アドオンはサービスのリンクを検出し、Google ドキュメントのユーザーがそのリンクのプレビューを確認できるようにします。つまり、一般公開されている URL を持つあらゆるサービスのスマートチップを作成できるということです。アドオンを構成して、サポートケースや、セールスリード、従業員プロフィールへのリンクなど、さまざまな URL パターンのプレビューを表示できます。この構成はアドオンのマニフェスト ファイルで行います。
{
"timeZone": "America/Los_Angeles",
"exceptionLogging": "STACKDRIVER",
"runtimeVersion": "V8",
"oauthScopes": [
"https://www.googleapis.com/auth/workspace.linkpreview",
"https://www.googleapis.com/auth/script.external_request"
],
"addOns": {
"common": {
"name": "Preview Books Add-on",
"logoUrl": "https://developers.google.com/workspace/add-ons/images/library-icon.png",
"layoutProperties": {
"primaryColor": "#dd4b39"
}
},
"docs": {
"linkPreviewTriggers": [
{
"runFunction": "bookLinkPreview",
"patterns": [
{
"hostPattern": "*.google.*",
"pathPrefix": "books"
},
{
"hostPattern": "*.google.*",
"pathPrefix": "books/edition"
}
],
"labelText": "Book",
"logoUrl": "https://developers.google.com/workspace/add-ons/images/book-icon.png",
"localizedLabelText": {
"es": "Libros"
}
}
]
}
}
}
マニフェスト ファイルには、Google Books API の URL パターンが含まれています。
スマートチップはリンク先のコンテンツのアイコンと、簡潔なタイトルまたは説明文を表示します。ユーザーがチップにカーソルを合わせると、そのファイルまたはリンクに関する詳細情報がカード型インターフェースによってプレビュー表示されます。ユーザーがスマートチップにカーソルを合わせた際に表示されるカード型インターフェースはカスタマイズが可能です。カード型インターフェースを作成するには、リンクに関する情報を表示するウィジェットを使用します。また、ユーザーがリンクを開いたり、その内容を変更したりするアクションを開発することもできます。プレビュー カードでサポートされているすべてのコンポーネントのリストについては、デベロッパー向けドキュメントをご参照ください。
function getBook(id) {
// Code to fetch the data from the Google Books API
}
function bookLinkPreview(event) {
if (event.docs.matchedUrl.url) {
// Through getBook(id) the relevant data is fetched and used to build the smart chip and card
const previewHeader = CardService.newCardHeader()
.setSubtitle('By ' + bookAuthors)
.setTitle(bookTitle);
const previewPages = CardService.newDecoratedText()
.setTopLabel('Page count')
.setText(bookPageCount);
const previewDescription = CardService.newDecoratedText()
.setTopLabel('About this book')
.setText(bookDescription).setWrapText(true);
const previewImage = CardService.newImage()
.setAltText('Image of book cover')
.setImageUrl(bookImage);
const buttonBook = CardService.newTextButton()
.setText('View book')
.setOpenLink(CardService.newOpenLink()
.setUrl(event.docs.matchedUrl.url));
const cardSectionBook = CardService.newCardSection()
.addWidget(previewImage)
.addWidget(previewPages)
.addWidget(CardService.newDivider())
.addWidget(previewDescription)
.addWidget(buttonBook);
return CardService.newCardBuilder()
.setHeader(previewHeader)
.addSection(cardSectionBook)
.build();
}
}
スマートチップを作成するための Apps Script コードの例
この投稿で使用されているコードの詳細なチュートリアルについては、スマートチップを使用して Google ブックスからのリンクをプレビューするのサンプル チュートリアルをご覧ください。
リンク プレビュー用のスマートチップを作成する場合、アドオンの作成には Google Apps Script を使用することも、それに代わるランタイムを使用することもできます。
Apps Script は Google Workspace に組み込まれた高速なアプリケーション開発プラットフォームです。開発環境を自分で用意する必要がないため、スマートチップ ソリューションのプロトタイピングと検証に適しています。Apps Script の用途はそれだけにとどまりません。Apps Script で Google Workspace アドオンを作成し、さらにはそのスクリプトを Google Workspace Marketplace に公開して、ユーザーがインストールできるようにするデベロッパーもいます。
Apps Script を使用してスマートチップを作成する場合は、以下の動画をご覧ください。Google ドュメントでリンクのプレビューを表示するスマートチップを開発する方法が、余すところなく紹介されています。動画チュートリアルで使用されているコードをダウンロードするには、スマートチップを使用して Google ブックスからのリンクをプレビューするのサンプルページをご確認ください。
Link to Youtube Video (visible only when JS is disabled)
独自の開発環境、プログラミング言語、ホスティング、パッケージなどを使って Google Workspace アドオンを作成する場合は、Apps Script に代わる別のランタイムのご使用をおすすめします。Node.js、Java、Python など、さまざまなプログラミング言語から選択できます。ランタイム コードを HTTP(S) のパブリック エンドポイントとして公開できる限り、クラウドかオンプレミスかを問わずどのインフラストラクチャでも、アドオンのランタイム コードをホスティングできます。Apps Script に代わるランタイムを使用してスマートチップを作成する方法の詳細については、デベロッパー向けドキュメント をご参照ください。
アドオンは Google Workspace Marketplace を通じて他のユーザーと共有できます。たとえば、スマートチップ ソリューションをチームで共有するとしましょう。その場合は「限定公開アプリ」として、チームの Google Workspace 組織に対してのみアドオンを公開できます。反対に、Google アカウントを持つすべてのユーザーとアドオンを共有したい場合は、「一般公開アプリ」として公開します。
Google Workspace Marketplace での公開について詳しくは、こちらの動画をご覧ください。
リンク プレビュー用のスマートチップの作成方法について詳しくは、デベロッパー向けドキュメントをご参照ください。ソリューションの構築に役立つ詳細な情報とコードサンプルを確認できます。皆さまが開発したスマートチップ ソリューションを拝見できることを心待ちにしています。
