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

[ドライブに保存] ボタンを使用すると、ユーザーはウェブサイトからドライブにファイルを保存できます。たとえば、ウェブサイトにユーザーがダウンロードできる取扱説明書（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 は絶対パスでも相対パスでもかまいません。
  • 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 プロトコルを使用して読み込む必要があります。スクリプトは、ページの任意の場所から、制限なしで指定できます。また、スクリプトを非同期で読み込んでパフォーマンスを向上させることもできます。

注: ボタンはインラインでレンダリングされます。[ドライブに保存] ボタンを別の要素でラップして、初期レイアウトを最終レイアウトに似たものにすることができます。

注: ダウンロードが完了する前にユーザーがページから移動すると、データは破棄され、Google ドライブにファイルは作成されません。

ページで複数のボタンを使用する

同じページに複数の [ドライブに保存] ボタンを配置できます。たとえば、長いページの上部と下部にボタンを配置できます。

複数のボタンで 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 の問題である可能性があります。