このブログ内を検索

このブログ内を検索

2020年4月28日火曜日

Google Driveに保存したJavascript・CSSファイルをHTML上で呼び出す方法(2021/4 JSファイル不可)

 Bloggerで外部ファイルを読み込んでCSSやJavascriptを利用したいときは、外部サーバーを利用しないといけないのですが、Google Driveに保存したファイルは共有URLでは呼び出すことができません。

 かつてはGoogle Driveにはホスティング機能があり、
http://googledrive.com/host/~
のURLを利用して呼び出すことができました。
Google DriveにJSやCSSのファイルを置いて読み込む - しろかい!
しかし、Google Driveのホスティング機能はすでに廃止されてしまったので利用できませんが、別の方法で呼び出すことができます。

参考👇
Google Drive に保存した画像を直接呼び出せるURLの取得 - Qiita

上記参考にした記事では画像の直接呼び出しができる方法として紹介されていましたが、JSファイル、CSSファイルについても呼び出し可能であることを確認しました。
 方法手順はまずGoogle Driveに保存したファイルを選択して、「共有」をクリックします。
「共有可能なリンクを取得」をクリックして、共有リンクの上の共有範囲を「リンクを知っている全員が閲覧可」を選択します。
共有リンクの
https://drive.google.com/file/d/○○○○○○/view?~
の○○○○○○の部分を控えておきます。

そしてscriptタグで呼び出したいときはsrcに
https://drive.google.com/uc?export=view&id=○○○○○○
と記入します。
以下に実際に外部ファイルの呼び出しをしてみたデモを載せています。

デモ

・Javascript


・CSS


これはCSSが適用されるかのテストです。

 Javascript側にはいらすとやの画像5種がランダムに1つ表示されるスクリプトを呼び出しています。ページをリロードするたびに表示されている画像が変わるかと思います。
CSS側にはテスト用の文章の文字の色、背景色の変更と中央揃え、太字にして、枠線と上下に余白の追加するCSSを適用させています。HTMLでは一切の修飾をしていません。
(2021/4月 追記)
Javascriptのみ何も表示されていないかと思います。どうやらGoogledriveからJSファイルの呼び出しができなくなった模様。

 Google Driveは外部ファイル置き場として活用できないという認識だったので、レンタルサーバーを利用するか直リンク発行可能なファイル共有サービス(Easy Uploaderどっとうpろだ)を利用するかなんて考えているところでした。