[ドライブに保存] ボタンを使用すると、ユーザーはウェブサイトからドライブにファイルを保存できます。たとえば、ユーザーがダウンロードできる取扱説明書（PDF）が複数掲載されているウェブサイトがあるとします。[ドライブに保存] ボタンを各マニュアルの横に配置して、ユーザーがマニュアルをマイドライブに保存できるようにします。
ユーザーがボタンをクリックすると、データソースからファイルがダウンロードされ、データが受信されると Google ドライブにアップロードされます。ダウンロードはユーザーのブラウザのコンテキストで行われるため、このプロセスにより、ユーザーは確立されたブラウザ セッションを使用してファイルを保存するアクションを認証できます。
サポートされているブラウザ
[ドライブに保存] ボタンはこちらのブラウザに対応しています。
[ドライブに保存] ボタンをページに追加する
[Google ドライブに保存] ボタンのインスタンスを作成するには、次のスクリプトをウェブページに追加します。
<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g-savetodrive"
data-src="//example.com/path/to/myfile.pdf"
data-filename="My Statement.pdf"
data-sitename="My Company Name">
</div>
ここで
classは必須パラメータです。標準の HTML タグを使用している場合は、g-savetodriveに設定する必要があります。data-srcは、保存するファイルの URL を含む必須パラメータです。- URL は絶対 URL または相対 URL にできます。
data-srcURL は、ボタンがホストされているドメインと同じドメイン、サブドメイン、プロトコルから配信できます。ページとデータソースの間で一致するプロトコルを使用する必要があります。- データ URI と
file://URL はサポートされていません。 - ブラウザの同一オリジン ポリシーにより、この URL は、配置されているページと同じドメインから提供されるか、クロスオリジン リソース シェアリング（CORS）を使用してアクセスできる必要があります。ボタンとリソースが異なるドメインにある場合は、異なるドメインにあるボタンとリソースを処理する（#domain）を参照してください。
- 同じページが http と https の両方で配信される場合にファイルを配信するには、
data-src="//example.com/files/file.pdf"のようにプロトコルなしでリソースを指定します。これにより、ホストのページへのアクセス方法に基づいて適切なプロトコルが使用されます。
data-filenameは、保存ファイルに使用される名前を含む必須パラメータです。data-sitenameは、ファイルを提供するウェブサイトの名前を含む必須パラメータです。
これらの属性は、任意の HTML 要素に配置できます。ただし、最も一般的に使用される要素は div、span、button です。これらの要素は、ページ読み込み中にわずかに異なる表示になります。これは、ブラウザが「ドライブに保存」JavaScript によって要素が再レンダリングされる前に要素をレンダリングするためです。
このスクリプトは、HTTPS プロトコルを使用して読み込む必要があります。スクリプトは、ページの任意の場所から、制限なしで指定できます。パフォーマンスを向上させるために、スクリプトを非同期で読み込むこともできます。
1 つのページに複数のボタンを使用する
同じページに複数の [ドライブに保存] ボタンを配置できます。たとえば、長いページの上部と下部にボタンを配置できます。
複数のボタンで data-src パラメータと data-filename パラメータが同じ場合、1 つのボタンから保存すると、同様のボタンすべてに同じ進行状況が表示されます。複数の異なるボタンがクリックされた場合、それらは順番に保存されます。
異なるドメインのボタンとリソースを処理する
[ドライブに保存] ボタンがデータソースとは別のページにある場合、ファイルを保存するリクエストは、クロスオリジン リソース シェアリング（CORS）を使用してリソースにアクセスする必要があります。CORS は、あるドメインのウェブ アプリケーションが別のドメインのサーバーのリソースにアクセスできるようにするメカニズムです。
たとえば、http://example.com/page.html のページに [ドライブに保存] ボタンが配置され、データソースが data-src="https://otherserver.com/files/file.pdf" として指定されている場合、ブラウザが CORS を使用してリソースにアクセスできない限り、ボタンは PDF にアクセスできません。
data-src URL は別のドメインから提供できますが、HTTP サーバーからのレスポンスは HTTP OPTION リクエストをサポートし、次の特別な HTTP ヘッダーを含んでいる必要があります。
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Range
Access-Control-Expose-Headers: Cache-Control, Content-Encoding, Content-Range
Access-Control-Allow-Origin の値は * にして、任意のドメインからの CORS を許可できます。また、http://example.com/page.html のように、CORS 経由でリソースにアクセスできるドメインを指定することもできます。コンテンツをホストするサーバーがない場合は、Google App Engine の使用を検討してください。
詳細については、[ドライブに保存] ボタンを提供するオリジンから CORS を有効にする方法について、サーバーのドキュメントをご覧ください。サーバーで CORS を有効にする方法については、サーバーに CORS サポートを追加したいを参照してください。
JavaScript API
[ドライブに保存] ボタンの JavaScript では、gapi.savetodrive 名前空間の下に 2 つのボタン レンダリング関数が定義されています。自動レンダリングを無効にする場合は、parsetags を explicit に設定して、これらの関数のいずれかを呼び出す必要があります。
| メソッド | 説明 |
|---|---|
gapi.savetodrive.render( |
指定されたコンテナを [ドライブに保存] ボタン ウィジェットとしてレンダリングします。
|
gapi.savetodrive.go( |
指定されたコンテナ内のすべての「ドライブに保存」タグとクラスをレンダリングします。この関数は、parsetags が explicit に設定されている場合にのみ使用する必要があります。これは、パフォーマンス上の理由で行うことがあります。
|
明示的な読み込みを使用した「ドライブに保存」JavaScript の例
<!DOCTYPE html>
<html>
<head>
<title>Save to Drive Demo: Explicit Load</title>
<link rel="canonical" href="http://www.example.com">
<script src="https://apis.google.com/js/platform.js" async defer>
{parsetags: 'explicit'}
</script>
</head>
<body>
<div id="container">
<div class="g-savetodrive"
data-src="//example.com/path/to/myfile.pdf"
data-filename="My Statement.pdf"
data-sitename="My Company Name">
<div>
</div>
<script type="text/javascript">
gapi.savetodrive.go('container');
</script>
</body>
</html>
明示的なレンダリングを使用した「ドライブに保存」JavaScript の例
<!DOCTYPE html>
<html>
<head>
<title>Save to Drive Demo: Explicit Render</title>
<link rel="canonical" href="http://www.example.com">
<script>
window.___gcfg = {
parsetags: 'explicit'
};
</script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
</head>
<body>
<a href="javascript:void(0)" id="render-link">Render the Save to Drive button</a>
<div id="savetodrive-div"></div>
<script>
function renderSaveToDrive() {
gapi.savetodrive.render('savetodrive-div', {
src: '//example.com/path/to/myfile.pdf',
filename: 'My Statement.pdf',
sitename: 'My Company Name'
});
}
document.getElementById('render-link').addEventListener('click', renderSaveToDrive);
</script>
</body>
</html>
[ドライブに保存] ボタンをローカライズ
ウェブページが特定の言語に対応している場合は、window.___gcfg.lang 変数をその言語に設定します。設定しない場合、ユーザーの Google ドライブの言語が使用されます。
使用可能な言語コードの値については、サポートされている言語コードの一覧をご覧ください。
<!DOCTYPE html>
<html>
<head>
<title>Save to Drive Demo: Async Load with Language</title>
<link rel="canonical" href="http://www.example.com">
</head>
<body>
<div class="g-savetodrive"
data-src="//example.com/path/to/myfile.pdf"
data-filename="My Statement.pdf"
data-sitename="My Company Name">
</div>
<script type="text/javascript">
window.___gcfg = {
lang: 'en-US'
};
</script>
<script src = 'https://apis.google.com/js/platform.js' async defer></script>
</body>
</html>
トラブルシューティング
data-src URL のダウンロード時に XHR エラーが発生した場合は、リソースが実際に存在することと、CORS の問題がないことを確認します。
大きなファイルが 2 MB に切り捨てられる場合、サーバーが Content-Range を公開していない可能性があります。これは CORS の問題である可能性があります。