コスパ重視で生きたい人生だった

なるべく楽して生きて行きたい30代サラリーマンのブログ

Googleドライブに外部JSファイルを設置してみる

f:id:dett0826:20151010171348j:plain

このブログ(はてなブログ)でjavascriptを動かしてみたくて、外部javascriptをどこかで公開しないとなーと。
選択肢としては
 

  1. レンタルサーバで公開
  2. Googleドライブで公開
  3. Dropboxで公開

があったけれど、今回は汎用性がありそうな2.Googleドライブで公開をやってみた。

Googleドライブでファイルを公開するなら、フォルダ丸ごと公開する

1.公開用のフォルダを新規に作成する

まずはフォルダを新規に作成します。
フォルダを丸ごとに公開することになるので、既存のフォルダを流用すると、見せたくないファイルまで見えてしまうので、注意。

f:id:dett0826:20151010172055j:plain
フォルダの作成の仕方は、マイドライブの画面から、

【新規】→【フォルダ】
で作成可能。
名前はなんでもOK。

2.新たに作成したフォルダを共有設定にする

先ほど作成したフォルダ上で右クリック
【共有】→【詳細】

以下の画面が表示されるので、「ウェブ上で一般公開」を選択します。
f:id:dett0826:20151010172848j:plain

共有設定ができたら、右上の「共有可能なリンクを取得」をクリックして、共有リンクを取得してください。

例えば下のようなリンクが取得できるはず。

https://drive.google.com/folderview?id=0B05rPwMNPUVeUlBJZEJwSC1WU0U&usp=sharing

3.共有リンクを変更する

上記で取得したリンクだと、Googleドライブでファイルを開くことになってしまいます。
そのため、Web上のhtmlファイル(あるいはjsファイル)として開けるようにリンクを加工します。

まず、idの部分を抜き出します。
上の例でいけば「0B05rPwMNPUVeUlBJZEJwSC1WU0U」の部分。



このidを以下のURLの「xxxxxxxx...」の部分に埋め込みます。
ファイル名になっているところは、フォルダ内の公開したいファイルの名前(例えばChatr.js)に変更してください。

https://www.googledrive.com/host/xxxxxxxxxxxxxxxxxxxxxxx/ファイル名

最終的にこんなURLになりました。

https://www.googledrive.com/host/0B05rPwMNPUVeUlBJZEJwSC1WU0U/Chart.js

これで、googleドライブに配置したファイルを外部JSとして読み込むことができます。
終わってみれば簡単なことだけど、ここまでたどり着くのに結構苦労した・・・

●10/15追記
このGoogleドライブのウェブホスティング機能は2016年8月31日で廃止となります。
それにともない、このやり方もできなくなってしまいます。

●10/15追記
URL変換のツールを作ってみた。
Googleドライブ用URL変換

注意点

ファイルの共有ではできない(Googleドライブ画面での表示となってしまうため)
フォルダを共有だけでは、やはりだめ(上記と同じ理由により)