"Save to Drive" ボタンを追加する

ユーザが、彼らのブラウザを介して、任意の URLから、ファイルを彼らの Driveアカウントに保存できるようにするには、あなたのウェブサイト上に "Save to Drive" ボタンを使用します。 ボタンは、HTMLマークアップ内の divタグにて少しの属性を伴って構成されます、それは、+1 buttonが作成される方法と似ています。

次の動作する Save to Driveボタンの例は、あなたの Google Driveに画像を保存します:

[TOC]

入門

あなたのページ上に Save to Driveボタンを表示するための最もシンプルな方法は、必要な Javascriptリソースをインクルードし、Save to Driveボタンのタグを追加することです:

<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>

このスクリプトは、HTTPSプロトコルから読み込まれなければならず、制限なしにページ上の任意の場所から含められることができます。 さらには、パフォーマンスを改善するために、スクリプトを非同期に読み込むことができます。

それはどのように動作しますか?

ファイルをアップロードするために使用される技術は、Google Driveのウェブのユーザインターフェイスによって使用されるものと似ています。 ファイルは、ユーザのブラウザに部分的にダウンロードされ、データが受信されると、Google Driveにアップロードされます。

これは、ダウンロードがユーザのブラウザのコンテキストにて行われるので、ユーザが、HTTP認証の幾つかの形式を必要とするファイルを保存できるようにします。

もしユーザが、ダウンロードが完了する前にページから離れて移動するならば、データは破棄され、ファイルは作成されません。

ページごとの複数のボタン

同じページ上に、複数のボタンを配置することができます、例えば、長いページの上部および下部にセーブボタン。 もし data-srcおよび data-filenameパラメータが複数のボタンで同じであるならば、1つのボタンから保存することは、すべての同様のボタンに、同じ進捗情報を表示することを引き起こします。 もし複数の異なるボタンがクリックされたならば、それらは順番に保存されます。

CORS

異なるサーバ上のファイルのためのリクエストは、Cross Origin Resource Sharing (CORS)の制約の対象となっています。

例えば、もしボタンが http://example.com/page.htmlのページに配置され、データソースが data-src="https://otherserver.com/files/file.pdf" として指定されているならば、ブラウザがリソースにアクセスするために CORSを使用することができない限り、ボタンは、ブラウザの同じ発信元ポリシーのために、PDFへのアクセスに失敗するでしょう。

これらの制限を満たすには、2つの方法があります:

1. data-src URLは、ボタンがホストされているドメインと同じドメイン、サブドメイン、およびプロトコルから提供されることができます。

   ページとデータソース間で一致したプロトコルを使用するようにしてください。

   同じページが httpと httpsの両方でサービスされているとき、ファイルを提供するには、data-src="//example.com/files/file.pdf" といったプロトコルを伴わないリソースを指定します、それは、ホスティングページがアクセスされた方法に基づいて、適切なプロトコルを使用します。

2. data-src URLは、別のドメインから配信されることできますが、HTTPサーバからの応答は、HTTTP 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を許可するために値 *を持つことができ、あるいは、代わりに、https://developers.google.comのように、CORSを経由してリソースへのアクセスを持つドメインを指定することができます。 もしあなたのコンテンツをホストするサーバを持っていなければ、Google App Engineを使用することを考慮することができます。

詳細については、あなたの Save to Driveボタンを提供している発信元から、CORSを有効にする方法に関する、あなたのサーバのドキュメントを参照してください。 あなたのサーバで CORSを有効にする方法については、I want to add CORS support to my serverを参照してください。

savetodriveタグ属性をカスタマイズする

幾つかの属性を用いて、Save to Driveボタンをカスタマイズすることができます。 任意の HTML要素上にこれらの属性を配置するかもしれません; しかしながら、最も一般的に使用される要素は、div、span、あるいは buttonです。 Save to Drive JavaScriptが要素を再レンダリングする前にブラウザが要素をレンダリングするので、これらの要素のそれぞれは、ページが読み込み中に、わずかに異なって表示されます。

class

必須パラメータ。 もし標準的な HTMLタグを使用しているならば、これは、g-savetodriveにセットされなければなりません。

data-src

必須パラメータ。 保存されるファイルの URL。 URLは、絶対的あるいは相対的とすることができます。 Data URI、および file:// URLはサポートされていません。 ブラウザの同じ発信元のポリシーのため、この URLは、それが配置されているページと同じドメインから提供されなければ、あるいは、CORSを経由してアクセスできなければなりません。

data-filename

必須パラメータ。 ファイルが保存されるときに使用される名前。

data-sitename

必須パラメータ。 データを提供しているウェブサイトの名前。

サポートされるブラウザ

Save to Drive buttonは、ウェブ上の Google Driveと同じブラウザをサポートします。 それは、次のブラウザの 2つの最新バージョンをサポートしています:

• Chrome
• Firefox
• Safari
• Internet Explorer (それは、IE9および IE10)

Internet Explorer 9の CORSサポート

デフォルトでは、Internet Explorer 9は、Internet Zoneの Cross Origin Resource Sharing(CORS)を禁止しています。 これは、XHRエラーが Google Driveにアップロードされることを示しています。 CORSを有効にするには:

1. Control Panel、あるいは Internet Explorer 9ツールメニューのいずれかから、Internet Optionsを開きます。
2. Securityタブを開きます。
3. Custom Levelボタンをクリックします。
4. Miscellaneousセクションまでスクロールし、Access data sources across domainsを有効にします。

onloadおよび scriptタグパラメータを用いた遅延実行

すべての依存関係が読み込まれた後にウィジェットコードを実行するには、onloadコールバックを使用します。

scriptタグパラメータを使用するには、次の構文を使用します:

<script >
  window.___gcfg = {
    lang: 'zh-CN',
    parsetags: 'onload'
  };
</script>
<script src="https://apis.google.com/js/platform.js" async defer></script>

JavaScript API

Save to Driveボタンの Javascriptは、gapi.savetodrive名前空間の下に 2つのボタンレンダリング機能を定義しています。 もし自動的なレンダリングを無効にしているならば、parsetagsを explicitにセットすることによって、これらの関数のいずれかを呼び出さなければなりません。

メソッド	説明
gapi.savetodrive.render( container, parameters )	指定されたコンテナを、Save to Driveボタンウィジェットとしてレンダリングします。 container Save to Driveボタンとしてレンダリングするコンテナ。 コンテナの ID(文字列)あるいは DOM要素自体のいずれかを指定します。 parameters data-接頭辞を伴わない key=valueのペアとして、Save to Driveタグ属性を含むオブジェクト。 例えば、{"src": "//example.com/path/to/myfile.pdf", "filename": "My Statement.pdf", "sitename": "My Company Name"}。
gapi.savetodrive.go( opt_container )	指定されたコンテナ内に、すべての Save to Driveタグおよびクラスをレンダリングします。 この機能は、parsetagsが explicitにセットされている場合にのみ使用されるべきです、それは、パフォーマンス上の理由のために行うかもしれません。 opt_container レンダリングするための Save to Driveボタンのタグを含むコンテナ。 コンテナの ID(文字列)あるいは DOM要素自体のいずれかを指定します。 もし opt_containerパラメータが省略されているならば、ページ上のすべての Save to Driveタグはレンダリングされます。

例

基本ページ

<!DOCTYPE html>
<html>
  <head>
    <title>Save to Drive Demo: Basic Page</title>
    <link rel="canonical" href="http://www.example.com">
    <script src="https://apis.google.com/js/platform.js" async defer></script>
  </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>
  </body>
</html>

明示的な読み込み

<!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>

明示的なレンダリング

<!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 Drive言語が使用されるでしょう。 利用可能な言語コードの値については、list of supported language codesを参照してください。

<!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の問題がないことを検証します。

もし Save to Driveボタンが Internet Explorer 9を除くすべてのブラウザで動作するならば、CORSを有効にするために、あなたのブラウザを構成する必要があるかもしれません、それは、デフォルトでは無効になっています。

もし大きなファイルが 2MBに切り詰められるならば、あなたのサーバが Content-Rangeを公開していない可能性があります、それは、恐らく CORSの問題です。