lifeLOG + REPOsitory: 外部ファイルの置き場所を求めて…

CSS によるスタイル定義を外部ファイルにしたい

Blogger には画像とブログ自体のテキスト以外のデータを置く場所がない。Google の提供する他のサービスにも汎用のデータファイルをウェブからアクセス可能な形で保持してくれるものはない。そう思ってきた。だから、このブログのスタイルを変えるときにもブログのテンプレート自体に埋め込むしかない、と。

外部 CSS ファイルを使いたい理由

もし、CSS によるスタイル定義を外部ファイルにしてどこかに置けるなら、iPad (や iPhone) 対応もブラウザのユーザエージェントで切り分ける方法を取れる。メディアクエリーを使い CSS の中で対応するよりも、(デバイスの特性値の組み合わせではなく)デバイス自体を判別するという点でスマートだ。また、デバイスごとのスタイル定義をすべて読み込む必要もなくなり、ロードするサイズも減る。iPhone に iPad 用や Mac 用のスタイルを読ませることもなくなるわけだ。

けど、Blogger には、そして Google にも、外部 CSS ファイルを置く場所はない。

Google 以外のサービスはどう？

もちろん、レンタルサーバを借りるという方法がある。月額がワンコインで足りるものもある。CSS ファイルを置く程度のことならそれで十分だ。ま、そこまでするなら Blogger にこだわる必要もなくなる。レンタルサーバ上で WordPress なんかに乗り換えれば、こんなことや(スタイルを変更するために) Blogger のテンプレートの構造で悩むこともなくなる。けど、やはりネットの向こう側のことでは Google にこだわりたいんだよね。

Amazon が提供するウェブサービスに S3 というサービスがある。正式名称を Amazon Simple Storage Service と言い、そのものずばりの「インターネット用のストレージサービス」だ。「インターネット上の」ではなく「インターネット用の」になっていることに注目。つまり、インターネット上で稼動するウェブサービスから使われることを前提としたストーレジなのだ。

ここに外部 CSS を置くことはできるだろうか？もう少し正確に言うと、S3 に入れたデータは HTTP 経由で公開アクセス可能なのだろうか？

(S3 公式サイト; Amazon S3 Functionarity より抜粋)
Authentication mechanisms are provided to ensure that data is kept secure from unauthorized access. Objects can be made private or public, and rights can be granted to specific users.

オブジェクト(ユーザが S3 に収めたデータをこう呼ぶようだ)は private にも、public にもできると書いてある。

(同上)
Built to be flexible so that protocol or functional layers can easily be added. The default download protocol is HTTP. A BitTorrent^TM protocol interface is provided to lower costs for high-scale distribution.

デフォルトのダウンロードプロトコルが HTTP だと書いてある。

ということで、(試していないから確実ではないが) HTTP でパブリックアクセスできるようだ。有料だけど、データのサイズと転送量が少量だから、びっくりする額になることはないだろう。レンタルサーバを借りるよりも(今まで経験したことがないから)おもしろそうだ。

とまあ、こんな流れで昨日まではすっかり、S3 を試すゾ、という気になっていた。今日、Google のあるサービスのことを思い出すまでは。

静的ファイルがダメなら、動的に作ってしまえば良い

何も CSS がファイルでなければならない理由はない。「ファイル」と呼んでいるものの、ブラウザにとって必要なのは HTTP リクエストに対して text/css で返されるデータストリームだ。サーバの HDD にファイルとして存在していようが、サーバ上のプログラムが生成したデータだろうが、ブラウザは気にしない。

静的な CSS ファイルを動的に生成してやれば良い。つまり、極端な例なら CSS のデータを文字列としてプログラムに埋め込んで、それを出力させれば良い、ってことだ。

これなら、Google のあのサービスが(きっと)使える。

Google App Engine があるじゃないか！

あのサービスとはもちろん Google App Engine (以下 GAE)のことだ。GAE は 2008 年 4 月 7 日に限定的に公開され(→ マイコミジャーナルの記事)、その後 5 月 28 日に一般公開された(→ 公式ブログの記事)。

(公式ドキュメント「Google App Engine について」より)
Google App Engine を使用すると、Google のインフラ上で自作の Web アプリケーションを実行できます。App Engine アプリケーションは、構築や維持管理も簡単です。またトラフィックやデータストレージの増大に合わせて容易なスケーリングが可能です。App Engine では、サーバーを維持管理する必要もありません。アプリケーションをアップロードするだけで、すぐユーザーが利用できるようになります。

プログラミング環境が Python または Java しか用意されていないため、敬遠していたんだが、「静的なCSSファイルを動的に生成する」程度のことであれば Python 本をめくりながらでもどうにかなるだろう。

(公式ドキュメント「Google App Engine について」より)
App Engine アプリケーションを作成するのは容易なだけではなく、費用も一切かかりません。アカウントを作成してアプリケーションを公開すれば、ユーザーは今すぐあなたのアプリケーションを無料で利用できます。もちろん、義務を要求されることもありません。無料アカウントで利用できるストレージは 500 MB まで、ページビューは月間 500 万が上限です。必要に応じて課金を有効にし、日々の予算を設定して各リソースに割り当てることもできます。 1 つのデベロッパー用アカウントを使用して最大 10 個のアプリケーションを登録できます。

もちろん、無料アカウントで十分だ。

登録から SDK のダウンロードについては、公式のスタートガイドか、この記事(→ Google App Engineを使って無料でサイトを立ち上げる方法) を参照すれば迷うこともない。

この記事によれば、静的コンテンツしかないアプリも作れるようだ。CSS ファイルを置くだけなら Python を覚える必要もないらしい。このあたりのことは「スタートガイド: 静的ファイルの使用」にも書かれている。

なんだよ、そういうことはもっと宣伝してくれよ。これがわかっていれば「外部 CSS の置き場所」で悩むこともなかったのに。

とはいえ、せっかく「静的コンテンツを動的に生成する」ということを思いついたのだから、それは試してみたい。Python の入門書も買ってあることだし。