Ogawa::Memoranda

小ネタ。

GoogleのJavaScript API(Maps・Search・Feed)を使う場合、API keyを取得しておいて各ページに下のようなコードを埋め込むことになっています(コード例はGoogleのJavaScript APIがこっそり統一されてきている件について。 - Ogawa::Memorandaを参照)。

<script type="text/javascript"
        src="http://www.google.com/jsapi?key=API key"></script>

それは良いのですが、そのページがWebクローラによってクロールされてキャッシュされたとします。ブラウザでそのWebキャッシュにアクセスすると、「AJAX Search API Load Failure: invalid api key supplied」などのアラートメッセージが表示されるはずです。というのも、Google API keyはAPI利用者のURLごとに払い出されるもので、URLとkeyに不一致があると機能しなくなるものであるのに対して、Webキャッシュは元のURLを(Webキャッシュの)サービス提供者のURLに置き換えてしまうからです。他にも翻訳サービスのようにサーバ側で一旦オリジナルのページ情報に代理アクセスするサービス一般に当てはまります。

この問題は、script要素を各ページに張る代わりに、下のようなスクリプト片を記述するか別ファイルにしてscript要素で読み込んでやれば回避できますよ、という本当に本当の小ネタ。

(function() {
  var keys = { 'http://your.domain.name/': 'Google API Key' };
  var url = location.href;
  var idx;
  while ((idx = url.lastIndexOf('/')) != -1) {
    url = url.substring(0, idx);
    var key = keys[url + '/'];
    if (key) {
      document.write('<script type="text/javascript" src="http://www.google.com/jsapi?key=' + key + '"></script>');
      return;
    }
  }
})();

このスクリプト片では、ページのURLがhttp://your.domain.name/以下にあるときにはscript要素を生成しますが、そうでないときには生成しません。そのため、Webキャッシュ経由でアクセスした場合にはAPI自体使えなくなり、アラートも出なくなります。