ルームにjQueryを導入してみる

ちょっと今回は初心者お断りな内容です。スミマセン・・・。

ルーム内にjQueryを導入する方法があります。
あんまりおおっぴらにするとアメブロ側に対策されてしまうかな～なんて思って今まで記事にしなかったのですが、意外とリクエストがあったので書いちゃおうかと思います。
ここのアクセス数なんてたかが知れてるし、大丈夫でしょ！ということで・・・

ルームとブログの違い

アメーバのルームとブログの違いの一つに、jQueryが標準装備されているか否か、という要素があります。
ブログではjQueryを使ったテンプレートを使用しているので、(実は旧バージョンですが)便乗して使うことが出来ます。
しかし、ルームで使われているのはjQueryではなくmootoolsというライブラリなんです。
そこで、ルームでjQueryを使うには自分で導入するしかありません。
導入にはサーバーを自分で用意する必要があります。
まだお持ちでない方には(しつこいようですがｗ)、ロリポップ！が超オススメですので検討してみて下さい！

jQueryをダウンロード

まず、jQueryをダウンロードしましょう！
download jQueryのロゴをクリックしてダウンロードしてください。
ダウンロードしたらメモ帳などのテキストエディタで開き、一番最後に

jQuery.noConflict();

と書き加えて保存し、サーバーにアップします。

なぜ「jQuery.noConflict();」が必要なのかというと、その理由はmootoolsと深く関わってきます。
先ほど書いたようにルームには標準でmootoolsが使われているのですが、mootoolsもjQueryも「$」を名前空間に使いますので、一緒に使ってしまうと意図しない動きをしてしまうのです。
「jQuery.noConflict();」はjQueryの「$」を使えないようにする命令です。
これを書くことにより「$」をjQueryのために使うことは一切出来なくなりますので「$」を使ったjQueryのコードは全ての「$」を「jQuery」と書き換えなくてはいけなくなりますが、安定した動作は約束されます。

では実際にルームにjQueryを導入してみましょう。

ルームのフリースペースを使ってjQueryをインポートする

ルームのフリースペースにスクリプトタグを書きますが、普通に書くだけではスクリプトタグが文字列として表示されるだけでスクリプトは実行されません。
一工夫が必要です。
このように書いてみましょう。

</p>"<script type="text/javascript" src="アップしたjQueryのURL"></script>"<p>

pタグと「"」が変な位置にありますが、こう書かないと動きませんので、細かいことは気にしないでこのまま書いちゃってください。
※改行は絶対にNGです
スクリプトタグが文字列として表示されなければ成功です。
これでjQueryのインポートは出来ましたので、あとはそれを使ってプログラミングするだけです！

プログラムは外部ファイルに！

jQueryを導入するだけでは何も起きませんから、それを利用してプログラムを書かないといけません。
ルームのスクリプトは外部ファイルに書いて、サーバーにアップしてインポートするのがベストです。
というのも、ルームのフリースペースでは改行するとBRタグが自動的に挿入されてしまいますので、エラーを起こしたり非常に見辛くなってしまいます。
ですからプログラムは外部ファイルに書いて、先ほどjQueryをインポートしたのと同じやり方でインポートすればOKです。

ここに一例を示します。

</p>"<script type="text/javascript" src="アップしたjQueryのURL"></script>""<script type="text/javascript" src="自作javascriptファイルのURL"></script>"<p>

このように、フリープラグインのような感覚で書くことができます(ただし改行はしないこと)
ボクの旧ブログのルームはjQueryがふんだんに使用されていますので、試しにいろいろ触って遊んでみてください！

今回はちょっと初心者お断りな内容でしたが、脱初心者した頃に思い出していただければ幸いです。
わかっちゃう方は、早速ルームの改造を楽しんでください！