[ドライブに保存] ボタンを追加する

[ドライブに保存] ボタンを使用すると、ユーザーはウェブサイトからドライブにファイルを保存できます。たとえば、ウェブサイトにユーザーがダウンロードできる複数の取扱説明書（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>

ここで

  • 標準の HTML タグを使用している場合、class は g-savetodrive に設定する必要がある必須パラメータです。

  • data-src は、保存するファイルの URL を含む必須パラメータです。

    • URL には、絶対パスまたは相対パスを指定できます。
    • data-src URL は、ボタンがホストされているドメインと同じドメイン、サブドメイン、プロトコルから提供できます。ページとデータソースの間で一致するプロトコルを使用する必要があります。
    • データ 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 は、あるドメインのウェブ アプリケーションが別のドメインのサーバーのリソースにアクセスできるようにするメカニズムです。 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 を許可する * を指定できます。または、CORS を介してリソースにアクセスできるドメイン（http://example.com/page.html など）を指定することもできます。コンテンツをホストするサーバーがない場合は、 Google App Engine の使用を検討してください。

詳細については、[ドライブに保存] ボタンを提供するオリジンから CORS を有効にする方法について、サーバーのドキュメントをご覧ください。サーバーで CORS を有効にする方法について詳しくは、 サーバーに CORS サポートを追加するをご覧ください。

JavaScript API

[ドライブに保存] ボタンの JavaScript は、gapi.savetodrive 名前空間にボタンのレンダリング関数を 2 つ定義します。自動レンダリングを無効にする場合は、これらの関数のいずれかを呼び出す必要があります 。それには、parsetags を explicit に設定します。

メソッド 説明
gapi.savetodrive.render(
container,
parameters
)		 指定されたコンテナを [ドライブに保存] ボタン ウィジェットとしてレンダリングします。
コンテナ
[ドライブに保存] ボタンとしてレンダリングするコンテナ。 コンテナの ID （文字列）または DOM 要素自体を指定します。
パラメータ
`data-` 接頭辞なしで、[ドライブに保存] タグ属性を key=value ペアとして含むオブジェクト。 data-例: {"src": "//example.com/path/to/myfile.pdf", "filename": "My Statement.pdf", "sitename": "My Company Name"}.
gapi.savetodrive.go(
opt_container
)		 指定されたコンテナ内のすべての [ドライブに保存] タグとクラスをレンダリングします。 この関数は、パフォーマンス上の理由で parsetags が explicit に設定されている場合にのみ使用してください。
opt_container
レンダリングする [ドライブに保存] ボタンタグを含むコンテナ。 コンテナの ID（文字列）または DOM 要素 自体を指定します。opt_container パラメータを省略すると、ページ上のすべての [ドライブに保存] タグがレンダリングされます。

明示的な読み込みを使用した [ドライブに保存] 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 の問題である可能性があります。