Google Picker ウェブ コンポーネントを使用すると、Google Picker API をウェブアプリに統合する別の方法を利用できます。
このウェブ コンポーネントを使用すると、Google ドライブのファイル選択をウェブアプリに簡単に統合できます。定型的な API の読み込みと認証のロジックはすべて 1 つの HTML 要素にラップされています。gapi
の読み込みロジックを記述しなくても、<drive-picker> タグを
コードに直接追加できます。プレーンな HTML と JavaScript
で使用でき、フレームワークに依存しないため、Svelte、Vue、Angular などとシームレスに連携します。
ウェブ コンポーネント ライブラリについて詳しくは、
@googleworkspace/drive-picker-element をご覧ください。
React アプリの場合は、ウェブ コンポーネントの公式 React ラッパー パッケージ:
@googleworkspace/drive-picker-react を使用します。
主な機能
- 簡単な統合: 数行のコードで Google Picker をウェブアプリに追加できます。
- フレームワークに依存しない: 選択したウェブ フレームワーク（React、Vue、Angular など）とシームレスに連携します。
- オープンソースでカスタマイズ可能: コードは無料で利用でき、特定のニーズに合わせてカスタマイズできます。
- シームレスな OAuth サポート: ユーザー認証を自動的に処理し、スムーズなユーザー エクスペリエンスを提供します。
- カスタマイズ可能なビュー: 属性を設定することで、必要なファイルタイプまたはビューのみを表示するように Google Picker を構成できます。
始める
NPM などを使用してコンポーネントをインストールします。
npm i @googleworkspace/drive-picker-elementCDN バージョンも用意されています。利用可能な形式とバージョンについては、
unpkgをご覧ください。<script src="https://unpkg.com/@googleworkspace/drive-picker-element@latest/dist/index.iife.min.js"></script>@googleworkspace/drive-picker-elementコンポーネントを JavaScript ファイルにインポートします。import "@googleworkspace/drive-picker-element";CDN バージョンを使用している場合、Google Picker ライブラリと認証に使用される Google API クライアント ライブラリが自動的に読み込まれるため、インポートは必要ありません。
カスタム要素を HTML ファイルに追加します。
<drive-picker> <drive-picker-docs-view></drive-picker-docs-view> </drive-picker><drive-picker/>と<drive-picker-docs-view/>の属性と プロパティについては、@googleworkspace/drive-picker-elementのリファレンス ドキュメントをご覧ください。
イベント
<drive-picker/> 要素は、次のカスタム イベントをディスパッチします。
| イベント | 説明 |
|---|---|
picker-picked |
ユーザーが 1 つ以上のアイテムを選択したときに発生します。 |
picker-canceled |
ユーザーが [キャンセル] ボタンをクリックするか、選択せずにダイアログを閉じて選択をキャンセルしたときに発生します。 |
picker-error |
初期化またはファイル選択中にエラーが発生したときに発生します。 |
イベントについて詳しくは、NPM の
@googleworkspace/drive-picker-element
ドキュメントをご覧ください。
イベントの詳細
picker-picked イベントの場合、イベントの詳細には Google Picker の
ResponseObject全体が含まれます。
{
"type": "picker-picked",
"detail": {
"action": "PICKED",
"docs": [
{
"id": ID,
"mimeType": "application/pdf",
"name": NAME,
"url": "https://drive.google.com/file/d/ID/view?usp=drive_web",
"sizeBytes": 12345
}
]
}
}
レスポンス オブジェクトで最もよく使用されるプロパティは次のとおりです。
action: コールバックをトリガーしたアクション（PICKEDなど）。docs: ユーザーが選択したDocumentObjectの配列。各オブジェクトには、次のようなプロパティが含まれています。
picker-error イベントの場合、event.detail にはエラー オブジェクトまたは失敗を説明する文字列（ERR_USER_NOT_AUTHENTICATED など）が含まれます。
例
次のコードサンプルは、一般的なユースケースで Google Picker ウェブ コンポーネントを使用する方法を示しています。各コードサンプルで、次のように置き換えます。
PROMPT: ユーザーに表示する Google アカウントの認証プロンプトのスペース区切りの大文字と小文字を区別するリスト。詳しくは、
TokenClientConfig.promptをご覧ください。ORIGIN: ピッカーの origin パラメータ。例:
https://developers.google.com。詳しくは、PickerBuilder.setOriginメソッドをご覧ください。APP_ID: ドライブ アプリの ID。詳しくは、
PickerBuilder.setAppIdメソッドをご覧ください。CLIENT_ID: OAuth 2.0 クライアント ID。詳しくは、 OAuth 2.0 を使用して Google API にアクセスするをご覧ください。
PDF ファイル
mime-types 属性を使用して、PDF ファイルのみを表示するようにビューをフィルタします。
<drive-picker
prompt="PROMPT"
origin="ORIGIN"
app-id="APP_ID"
client-id="CLIENT_ID"
>
<drive-picker-docs-view mime-types="application/pdf"></drive-picker-docs-view>
</drive-picker>
画像と動画のファイル
mime-types 属性を使用して、画像（JPEG、PNG）ファイルと動画（MP4、QuickTime）ファイルのみを表示するようにビューをフィルタします。
<drive-picker
prompt="PROMPT"
origin="ORIGIN"
app-id="APP_ID"
client-id="CLIENT_ID"
>
<drive-picker-docs-view mime-types="image/jpeg,image/png,video/mp4,video/quicktime"></drive-picker-docs-view>
</drive-picker>
自分がオーナーのファイル
owned-by-me 属性を使用して、現在のユーザーがオーナーのファイルのみを表示するようにビューをフィルタします。
<drive-picker
prompt="PROMPT"
origin="ORIGIN"
app-id="APP_ID"
client-id="CLIENT_ID"
>
<drive-picker-docs-view owned-by-me="true"></drive-picker-docs-view>
</drive-picker>
無題のファイルのクエリ
query 属性を使用して、検索クエリ「Untitled」に一致するファイルを表示するようにビューをフィルタします。
<drive-picker
prompt="PROMPT"
origin="ORIGIN"
app-id="APP_ID"
client-id="CLIENT_ID"
>
<drive-picker-docs-view query="Untitled"></drive-picker-docs-view>
</drive-picker>
スター付きのファイル
starred 属性を使用して、スター付きのファイルのみを表示するようにビューをフィルタします。
<drive-picker
prompt="PROMPT"
origin="ORIGIN"
app-id="APP_ID"
client-id="CLIENT_ID"
>
<drive-picker-docs-view starred="true"></drive-picker-docs-view>
</drive-picker>
関連トピック
- 属性、イベント、プロパティの詳細については、GitHub の完全な
drive-picker-elementドキュメントをご覧ください。