[ドライブに保存] ボタンをクリックすると、ユーザーはウェブサイトからドライブにファイルを保存できます。たとえば、ウェブサイトにユーザーがダウンロードできる取扱説明書（PDF）がいくつか掲載されているとします。各マニュアルの横に [ドライブに保存] ボタンを配置すると、マニュアルをマイドライブに保存できます。
ユーザーがこのボタンをクリックすると、ファイルがデータソースからダウンロードされ、データの受信時に 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 プロトコルを使用して読み込む必要があり、ページの任意のポイントから制限なく含めることができます。スクリプトを非同期で読み込んで、パフォーマンスを改善することもできます。
ページで複数のボタンを使用する
[ドライブに保存] ボタンは、同じページに複数配置できます。たとえば、長いページの上部と下部にボタンを配置する場合などです。
data-src パラメータと data-filename パラメータが複数のボタンで同じである場合、1 つのボタンから保存すると、類似したすべてのボタンで同じ進行状況情報が表示されます。複数の異なるボタンがクリックされた場合は、順番に保存されます。
異なるドメインのボタンとリソースを処理する
[ドライブに保存] ボタンがデータソースとは別のページにある場合、ファイルの保存リクエストでは、クロスオリジン リソース シェアリング（CORS）を使用してリソースにアクセスする必要があります。CORS は、あるドメインのウェブ アプリケーションが別のドメインのサーバーのリソースにアクセスできるようにするメカニズムです。
たとえば、http://example.com/page.html のページに [Save to Drive] ボタンが配置されており、データソースが 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 を許可する値 * を指定できます。または、CORS を介してリソースにアクセスできるドメイン（http://example.com/page.html など）を指定することもできます。コンテンツをホストするサーバーがない場合は、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 の問題など）。