Amebloのフリープラグインに貼り付けられるJavaScriptは3800文字以内でというわけのわからない制約があったりして、それを回避するためのブログエントリもちらほら見かけるのですが、他のブログにホストしてそれを読み込むみたいなので、使わないのにブログ余計に開設するのもなぁと言うことでGoogle codeを利用してみることにしてました。（多分、こっちの方がめんどくさい・・・）
Google codeでプロジェクトを開設する
Google code は、Google様が自分またはオープンソースのようなプロジェクトとして作ったコードを管理する環境を無料で提供してくれて、世界中にその環境を通してコードを公開するということができます。
なので、特に今回のようなブログのJavaScriptをホストするようなためのものでもなかったりするのですが、実際そういう用途に向いているとか、Googleの巨大なインフラを通してコードだけでなく画像やドキュメントファイルなどを高速に安定して提供してくれるよ、みたない記事を書いている人もいるようです。
前置きが長くなりましたが、AmebloのフリープラグインのJavaScriptをホストする環境を作るため、まず始めにGoogle codeへプロジェクトを開設します。
プロジェクトの開設は、先のGoogle codeのページトップにある「Create a new project」から始めます。
- Google codeトップ
プロジェクト開始時に入力する情報は6つで、上からプロジェクト名、プロジェクトの概要、そしてプロジェクトの説明、バージョン管理システム（Version control system）、公開時のライセンス（Source code license）、最後にプロジェクトのラベルです。
最初の3つは適当に入力しておきます。
プロジェクト名は英語である必要がありますが、その他は日本語でも登録できます。
実際のオープンソースの公開ということになった場合は、海外の利用者もターゲットにするように英語であった方がいいんでしょうね。。
バージョン管理は、Mercurial とsubversion が選択可能です。
いづれも公開するソース管理をどちらのバージョン管理システムで行うかというものです。
私は使い慣れているsubversionの方を選択しました。
公開時のライセンスは、Google code上にホストしたコードをどのように利用者に使わせるかというものですが、あまり手厳しく管理したくない場合は、GNU General Public License v2 あたりを選択しておけばよいかと思います。
最後は、プロジェクトのラベルですが、こちらはタグみたいなものでプロジェクトのカテゴリや検索時のキーワードを指定しておくためのものです。
そのプロジェクトにそったキーワードを入力しておけばよいでしょう。
- Google codeのプロジェクト登録
これで、Google codeのプロジェクトが開設されました。
プロジェクトごとに専用のページが割り当てられ、その中でソース管理やWikiでの情報発信、課題管理などが行えます。
ちなみに、私のプロジェクトページのURLは下記となります。
http://code.google.com/p/itboy/
Google codeへJavaScriptを登録して管理する
プロジェクトページのSourceメニューを開くと、バージョン管理システムを通してコードをチェックアウト（開発環境へのダウンロード）する方法がかかれています。
- Google codeのSourceメニュー
今回は、借りてるサーバーからコマンドライン上でコードのチェックアウトやコミットを実施していますが、Windows環境でもSubversionのクライアントソフトがあればもっと手軽に操作できると思います。
ということで、手始めにプロジェクトからチェックアウトを実行してみます。
svn checkout https://itboy.googlecode.com/svn/trunk/ itboy --username itboy.org リビジョン 1 をチェックアウトしました。 ls itboy
チェックアウト時に指定するURLやユーザー名は、各々のSourceメニューで表示されている情報を指定してください。
次に、実際にホストしたいJavaScriptコードを書いてそれをGoogle codeのバージョン管理へコミットします。
今回ホストするコードは、「Amebloに設置していたツイートボタンをTwitter公式のものに変えました 」で書いたTwitterの投稿ボタン（と、はてブ登録用ボタン）をAmebloに表示するためのオリジナルコードです。
適当なエディタでコードを書いてファイル（ameblo-itboy.js）を保存します。
cd itboy/ svn add ameblo-itboy.js A ameblo-itboy.js svn commit -m "JavaScript for Ameblo1.0" --username itboy.org --password YourPassword 送信しています ameblo-itboy.js ファイルのデータを送信中です. リビジョン 1 をコミットしました
コミット時はパスワードが必要になります。
Google codeのパスワードは、先ほどのSourceメニュー内の中段に表示されている「googlecode.com password.」のリンクをクリックすると表示されます。
これをsvn commit時に指定します。
これで、JavaScriptがGoogle code内に登録されたので、外部からも呼び出し可能な状態になりました。
ちなみに、登録したソースファイルはSource＞Browse＞trunkメニュー から、またはダイレクトにブラウザから確認 することができます。
Google codeに登録したJavaScriptを呼び出す
ここまでできたら、後は登録したJavaScriptを呼び出してあげるだけです。
フリープラグインのメニューを開き、Google code上にホストしているJavaScriptコードを呼び出すように書いて保存します。
<script type="text/javascript" src="https://itboy.googlecode.com/svn/trunk/ameblo-itboy.js"></script>
見た目は変わりませんが、現在このブログでもGoogle code上のJavaScriptを呼び出してはてなブックマークおよびTwitterボタンが表示されるコードが動いています。
ちなみに、同様の手順（ファイルの追加とコミット）で画像なども登録できたりします。
また、バージョン管理システムを使っている特性上、いつでも前のJavaScriptの状態に戻すとかができるところも大きなメリットです。
ただ、JavaScriptのコードやサービスの形態によってはそぐわなかったり、うまく動作しないものもあるかもしれませんので、ご注意を。
関連記事
Google CodeにホストしていたJavaScriptをBitbucketに移行する
Google+1ボタンがIEだと折り返して表示されることへの対処（暫定版）
SyntaxHighlighterをGoogle code上にホストする
Amebloに貼り付けていた、はてなブックマークボタンを更新してみたよ
Amebaで任意の位置に自動でタグを挿入するブログパーツ書いたよ