BloggerでCSSなど外部ファイルを設置する方法を模索する

Bloggerを使っていく上で困るのが、JavascriptやCSSや画像などの外部ファイルの扱い。
Blogger単独でサーバ側に外部ファイルを設置することができればいいのですが、今のところできません。テンプレートに全て記述していく方法もありますが、ページを読み込むごとに毎回余計なデータを転送する必要があるので無駄です。知り合いのサイトはそれで凌ぎましたが(;^^。

とりあえず、簡単な解決策を考えてみます。
なお、タイトルでBloggerで外部ファイルをとか書いてますが、単独では無理でした (;^^。

第一に考えられるのは、レンタルサーバを借りてそこに設置する方法です。これは、簡単にできます。ただ、Bloggerは無料ですし、折角のGoogleのサービスなので、Googleのサービスだけでできないか考えました。Googleのサービスの中で簡単に実現できそうなのは、下記の三つほどですかね。

Google App Engineを使う。

Googleサイトを使う(独自ドメイン利用時は不可)。

Googleドライブに共有フォルダを設置し、使う。

1のGoogle App Engineは利用する上で一番使い勝手がいいんですが、転送量によってはコストが発生する可能性があるので却下ですね。今回は2と3について考えてみます。

Googleサイトを使う

Googleサイトは、WYSIWYGライクでHTMLを知らなくても簡単にサイトを作れるサービスです。
ただその分、レイアウトなどに融通は利かないので使い勝手が悪かったりします。
今回はファイル置場的に使うので、良しとします。

まずはGoogleサイトにアクセスして、サイトを適当に開設します。
できたサイトがこちら。何もしてないので何もありません。

こちらの右上にある共有をクリックします。
そうすると下記のような画面が出てくるので、添付ファイルをクリックします。

出てきた画面でアップロードをクリックするとファイルをアップロードできるので、外部ファイルとして使いたいファイルをアップロードします(今回は、saskwave.jsをアップロードしました)。
そして、アップロード後の画面は以下のようになります。

アップロードしたファイルはダウンロードをクリックするとダウンロードできます。
ダウンロードを右クリックでリンクのURLをコピーします。
ここでは以下のようなURLになっていました。
saskwaveがサイト固有名で、saskwave.jsがファイル名となりますので、適宜置き換えてください。

https://sites.google.com/site/saskwave/saskwave.js?attredirects=0&d=1

?attredirects=0&d=1を削って

https://sites.google.com/site/saskwave/saskwave.js

を外部ファイルのURLとして使います。
上記のURLをBloggerのテンプレートにscriptタグとして記述して終わりです。

＜追記＠2014/01/21＞
どうやらBloggerを独自ドメインで運用する場合、Googleサイトに置いたJavascriptやCSSファイルは参照できなくなる模様。つまり、Googleドメイン内では利用できるが、Googleドメイン外では利用できないということのよう。

・Google Sites で javascript ファイルを設置した場合の問題について
　http://blog1.erp2py.com/2012/01/google-site-javascript.html

Bloggerではカスタムドメインを設定すると、blogspot.com 以外のドメインの利用が可能だ。この設定を行ない、Google以外のドメインにすると、Googleサイトに設置した javascriptファイルの利用ができなくなる。

詳細は上記のサイトに記載されているので割愛しますが、独自ドメインで運用する場合は注意が必要ですね。ただ記事が2012年と古いので独自ドメインで使えるかどうか実験してみました。

やはり独自ドメインですと下記のように拒絶されてしまいました。

Refused to execute script from 'https://sites.google.com/site/saskwave/saskwave.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled. (index):1

Googleサイトに置いたファイルは、googlegroups.com経由でアクセスされるみたいです。
現状でもGoogleサイトにファイルをホスティングするのは注意が必要な様子。
これは問題ですね…。

Googleドライブに共有フォルダを設置し、使う。

GoogleドライブはGoogleが提供するオンラインストレージです。
基本は恐らくクローズドな利用でしょうが、外部に共有することもできます。
Googleサイトよりは手順が必要になるので面倒にはなりますが、なんといっても魅力は無料で最大15GBまでOKというとこでしょうか？Googleサイトは100MBですしね。

アップロードしたファイルをインターネットに公開と独自ドメインで利用できるか検証までやってみます。

まずはともかく、Googleドライブにアクセスして、共有フォルダを作ります。
以下の画面にある作成をクリックし、フォルダをクリックします。

そうすると、以下のようなダイアログが出るので新しいフォルダを任意のフォルダ名に書き換えます。ここではフォルダ名をpublic_bloggerにしました。

フォルダ名を入力した後、作成をクリックすると以下の画面になります。

マイドライブに作成したpublic_bloggerフォルダが出来ています。
そのフォルダを右クリックし、共有から共有をクリックします。
クリックすると共有設定ダイアログが表示されますが、非公開になっているかと思います。
なので、変更をクリックします。

今度は共有設定ダイアログが表示されます。
公開設定オプションの中からウェブ上で一般公開を選択して保存します。

アクセス権は全員(ログイン不要)で閲覧者のみとして、他人からは閲覧可能のみで、編集はできないことを確認します。
あとは完了をクリックし、共有フォルダの設定は終了です。
なお、このフォルダに入れたファイルはすべて共有され、Googleなどからも検索対象になるのでちょっと注意が必要です。

では実際にファイルをアップロードしてみます。

このように共有中として、ファイルがアップロードされています。
ではアドレスを確認して、外部ファイルとして利用してみます。
まずはURLの確認です。

共有フォルダを開いた状態で、ブラウザのアドレス欄をみます。
そうすると以下のようになっているかと思います。

https://drive.google.com/＜省略＞#folders/????????????????????????

フォルダ名を表すIDである????????????????????????の部分だけをコピーし、以下の形式でURLを作ります。

http://googledrive.com/host/*********************/filename.ext

*********************の部分は、????????????????????????に、
filename.extの部分はアップロードしたファイル名に置き換えます。
今回は以下のようになりました。

http://googledrive.com/host/0ByEGaClBNxLRM1ZCYlJfSUx6dkU/saskwave.js

できたURLを外部ファイルのアドレスとして使います。
なお、こちらは独自ドメインでも問題なく外部ファイルとして利用できました。

ページ

2014年1月20日月曜日