読者です 読者をやめる 読者になる 読者になる

しろかい!

アプリ開発や機械学習などの開発Tips.

Google DriveにJSやCSSのファイルを置いて読み込む

はてなブログをはじめ、多くのブログサービスでは画像以外のファイル(Javascript, CSSなど)をアップロードして利用することができません。これらを利用するには基本的には外部のサーバーをレンタルしなくてはなりませんが、無料の場合はファイル置き場としての利用を禁止しているところがほとんどです。
そこで、Google Driveの出番です。Google Driveでは、少し設定を変えるだけで簡単にファイルをウェブ上に公開できるようになるホスティングサービスがあるので、これを利用します。


2015/9/1 追記
Google Driveホスティングサービスは2016/8/31に終了します.
今後は GitHub Pages 等の別のホスティングサービスを使用されることを推奨します.


以下,test.jsというファイルをWebサイトから呼び出すまでの方法を紹介します.

1. ファイル置き場用のフォルダを作成

新規→フォルダをクリックします.

f:id:shun9167:20141226192959p:plain

そして,任意のフォルダ名を決めれば,現在開いているフォルダ内に新しいフォルダが作成されます.

2. 作成したフォルダのアクセス権限を変更

作成したフォルダをクリックして選択状態にして,右クリック -> 共有... をクリックします.

f:id:shun9167:20141226193655p:plain

出てきたモーダルの右上の「共有可能なリンクを取得」をクリックします.

f:id:shun9167:20141226193814p:plain

次に,「リンクを知っている人全員が閲覧可」をクリックします.

f:id:shun9167:20141226193959p:plain

「詳細...」をクリックします.

f:id:shun9167:20141226194305p:plain

「ウェブ上で一般公開」をチェックし,保存します.

f:id:shun9167:20141226194534p:plain

これで,このフォルダにアップロードしたファイルはウェブ上からURLでアクセスすることが可能になります.

3. ファイルのURLを調べる

次は,実際にtest.jsをアップロードしてURLを取得します.
あらかじめtest.jsはアップロードしてある前提で話を進めます.

まず,フォルダのアクセス権限を変更した時と同じように,test.jsを右クリック -> 共有... をクリックします.
以下の画面になるので,表示されたURLのhttps://drive.google.com/file/d/***/...***の部分をコピーするなりして控えておきます.

f:id:shun9167:20141226195215p:plain

すると,URLは以下のようになります.

https://googledrive.com/host/***

例えば,筆者のtest.jsの場合はhttps://googledrive.com/host/0B5mziiRs4CT_S2JNVlVRR3JJbEEとなります.

後は,このURLを<script>タグを使って呼び出せばOKです.

読み込み速度は?

Web用のサーバーではないので,そういうのと比べると遅いかもしれませんが,Googleのサーバーということもあり,十分実用できるレベルの速度が出ているように思います.
(検証したわけではなく,あくまで体感です.あしからず.)

さいごに

今回は公開用のフォルダを作成しましたが,同様の手順でファイル単体を公開することも可能です. また,一旦フォルダを作成してアクセス権限を変更しておけば,次回以降は1, 2のステップは省略できます.
最初だけ少々面倒ですが,無料で大容量(15GB)の公開ファイル置き場を使えると思えば大したことはないと思います!
ファイル置き場に困っている方は是非試してみてください^^

おまけ:フォルダにアクセスされた時に中身を見られないようにする

この方法には欠点があり,フォルダそのものにアクセスされると中身が見えてしまいます.
それが嫌な場合は,フォルダに「index.html」というファイルをアップロードしておけばOKです.
そうしておけば,フォルダの中身の代わりに「index.html」が表示されるようになります.
通常のウェブサーバーと同じですね^^

参考