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

[ドライブに保存] ボタンを使用すると、ユーザーはウェブサイトからドライブにファイルを保存できます。たとえば、ウェブサイトに、ユーザーがダウンロードできる複数の取扱説明書（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-src URL は、ボタンがホストされているドメインと同じドメイン、サブドメイン、プロトコルから配信できます。ページとデータソースで一致するプロトコルを使用する必要があります。
    • Data 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 のページに [ドライブに保存] ボタンが配置され、データソースが 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(
container,
parameters
)		 指定されたコンテナを [ドライブに保存] ボタン ウィジェットとしてレンダリングします。
コンテナ
[ドライブに保存] ボタンとしてレンダリングするコンテナ。 コンテナの ID（文字列）または DOM 要素自体を指定します。
パラメータ
「ドライブに保存」タグ属性を 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 の問題である可能性があります。