まいど吉田屋です。
オンラインストレージサービスの「Googleドライブ」が
面白い機能を追加しました。
「保存(Save to Drive)」ボタンで、
ファイルを自分のGoogleドライブに、
一発で保存することができます。
※このボタンはただの画像なので、クリックしても何も起こりません。
ただし、使うにはいくつか条件がありました。
オンラインストレージサービスとは、
ファイルの保管場所をネット上で提供するサービスのこと。
今では、
※SkyDriveはOneDriveに改称されました。など、無料でも大容量のサービスが増えてきました。
Googleも、
というオンラインサービスを展開しています。
が、
吉田屋は、その利用規約がちょっと気に入らなくて、
あまり強くオススメしてきませんでした。でも、
そこは流石に天下のGoogle。
申し分ない機能に加え、
今回、「保存(Save to Drive)」ボタンを公開しました。
画像や文章など、
GoogleDriveに保存できるファイルなら、
サイト上から、ワンクリックで一発保存できるようになります。
設定は簡単。
<script src="https://apis.google.com/js/plusone.js"></script>
<div class="g-savetodrive"
data-filename="マイドライブに保存されるときのファイル名(拡張子付き)"
data-sitename="あなたのサイト名"
data-src="ファイルが保存されているURL">
</div>
サイトに上のようなタグを追加するだけです。
そうすると、
タグを入れた場所に、「保存」ボタンが表示されます。
「保存」ボタンをクリックすると、
ファイル名を表示した保存確認ウィンドウが開きます。
そこで、「保存」ボタンをもう一度クリックすると、
自分のGoogleDriveに、そのファイルがアップロードされます。
一旦ファイルを保存すると、
「保存」ボタンが、グレーの「保存済み」ボタンに替わります。
ファイルは、
GoogleDriveのマイドライブに、
指定したファイル名で保存されます。
ただし、
Googleにログインしていない状態で「保存」ボタンをクリックすると、
ログイン画面が表示されます。
もちろん、保存できるファイルは、
画像ファイルだけでなく、PDFファイル等、
GoogleDriveに保存できるものなら何でも扱えます。
こちらのサイトで、
画像とPDFファイルを自分のGoogleDriveに保存できますから、
実際に、いじってみてください。が、
ここに大きな落とし穴が・・・実は、この「保存」ボタン、
原則、同じドメインにあるファイルか、
クロスドメインアクセスが許可されたドメインにあるファイルしか、
保存することができません。
つまり、CROS (Cross-Origin Resource Sharing)ってこと。
詳しくはこちらのサイトを読んで下さい。英語ですけど。
上のQHMで作ったサイトでは、
サイトのURLとファイルが保存されるURLが同じドメインなので、
「保存」ボタンが問題なく機能します。
画像は、サイトURLのサブディレクトリに保存されているんですね。
しかし、吉田屋ブログのあるJUGEMなどでは、
記事のあるドメインと画像を保存するドメインが異なるため、
このままでは、「保存」ボタンが働きません。
(これ、見つけるのに時間かかったぁ・・・)
ブログのHTMLヘッダー部分に、
Access-Control-Allow-Origin:画像が保存されているドメイン
と書き込むなどして、アクセスを許可しておく必要があります。
あっ
IE8などのブラウザーを使っている場合、
上のサイトでも「保存」ボタンが働かない方もいるでしょう。
CROSはブラウザーに実装されるので、
ブラウザーによっては、働かないケースがあります。
- Chrome
- Firefox
- Safari
- IE9、IE10
原則、これ以外のブラウザーでは「保存」ボタンは使えません。
う〜ん。
かなり便利な機能だと思いましたが、
ちょっと、制約が多すぎますね。
ってことで、
吉田屋は当面、「保存」ボタンは使いません。
まあ、そもそもDropbox使いですしね。(笑