BloggerでJavascriptのライブラリを使う際のあれこれ

jQueryやらなんやら入れたついでに覚え書きもかねてメモ。

Bloggerをつかっていてjsのライブラリなどを導入しようとした際、 Bloggerには画像以外の独自ファイルをアップロード＆保持できる機能はないため、
1.他のサービス上にホストしたjsファイルを読み込む。
2.テンプレートにライブラリのコードを直書きする。
の2パターンが考えられます。

最近は普通のjsライブラリをホストしておく程度の領域なら無料で利用できるサービスがいくらでもあるので普通は1の方を選ぶことになるとおもいますが、 jQuery本体の導入をする場合などはGoogleでホストしているものが提供されているためそっちを利用する手もあります。
Google Hosted Libraries - Developer's Guide - Make the Web Faster — Google Developers

で、まぁ1の方を選ぶにしても読み込みのためのコードを記述する必要があるわけですが、Bloggerではテンプレートファイルに直接記述する以外にガジェットとして追加する方法もあります。

管理画面の「レイアウト」から「ガジェットの追加」を選ぶと一覧の中に「HTML/JavaScript」というガジェットがあり、任意のHTMLやJavaScriptのコードを記述して設置できます。


いちいちテンプレートのコードとにらめっこせずに済むのでメンテナンスの面ではそれなりに便利かもしれません。
ただしこの方法では<head>タグ内には記述することはできません。

<head>タグ内に記述したい場合は 管理画面の「テンプレート」>「HTMLの編集」の画面から直接テンプレートに記述することになります。 注意点としてBloggerのテンプレートはXMLファイルなので場合によっては（JavaScriptのコードとしては正しくても）エラーが出て保存できないことがあります。
その際はCDATAセクション（<![CDATA[〜]]>）を使って以下のような書き方をすれば大丈夫だと思います。

CDATAセクションというのはXMLの記述ルールで簡単にいうと「『<![CDATA[』と『]]>』で挟んだ部分には何をどんな書き方で書いてもオーケー」というものです。
ちなみに上のコード部分は「SyntaxHighlighter」というjsライブラリを導入してさっそく使ってみました。