アメブロでJavaScriptを実行させよう! | あわあわのブログ

あわあわのブログ

iPhone脱獄のいろいろ

アメブロでJavaScriptを実行させよう!

アメーバブログのフリープラグインを使って、ブログのJavaScriptを実行する方法を紹介しようと思います。

<こんな感じ>

javascriptのテスト1
javascriptのテスト2

このサイトの情報を元にしてやってみました。しかし、私の環境ではうまく動作しなかったのでプラグインに少し改良を加えました。動作しなかった理由は、ブログのテーマによるものだと思います。
http://d.hatena.ne.jp/shunsuk/20080902/1220354891
あえて仕組みを解説すると、プラグインはJavaScriptを記述できるのでブログのJavaScriptをevalで無理やり実行しようというわけです。まぁそれはおいておいて、手順をさっそく紹介します。

<手順>

1. アメーバブログの「マイページ」にいきます。

2. 「ブログを書く」にいきます。

3. 「サイドバーの設定」にいきます。

4. 「プラグインの追加」をクリックします。

5. 「フリープラグイン」のタブをクリックします。

6. テキストエリアに下記のファイルのテキストを入力します。

<script type="text/javascript">
(function(){pre();})();
function pre(){
var codes = document.body.innerHTML.match(/<pre [\w\s:;"=]*class="?eval"?[\w\s:;"=]*>((.|\n)*)<\/pre>/gi);
if(codes == null)
setTimeout("pre();",100);
else
run();
}
function run(){
var codes = document.body.innerHTML.match(/<pre [\w\s:;"=]*class="?eval"?[\w\s:;"=]*>((.|\n)*)<\/pre>/gi);
codes = codes.replace(/
/g, "");
for (var i = 0; i < codes.length; i++) {
eval(codes[i].replace(/<\/pre>/i, "").replace(/<pre [\w\s:;"=]*class="?eval"?[\w\s:;"=]*>/i, ""));
}
}
</script>

(うまくいかない方)
js.txt

7. 「保存」をクリックします。

8. 「設定はこちら」の「こちら」をクリックします。

9. 使用しない機能の中の「フリープラグイン」を使用する機能にドラッグアンドドロップします。

10. 「保存」をクリックします。

11. 完了です。


<JavaScriptの記述方法>

ブログを書く時はこのように本文中に記述します。
<pre class="eval">
// JavaScriptのコードを書く
</pre>

コードをブログに表示したくなければこのように記述してください。
<pre class="eval" style="display:none">
// JavaScriptのコードを書く
</pre>


<感想>
参考のサイトにのってるプラグインのコードを追加していざJavaScriptの実行!っと思ったらピクリともしなかったのでjs実行はしばらく放置しました。それから2日後に暇があったので動かないなら自分でコードを書けばいいじゃんとか思ってアラートを使ってエラーを探してコードを作りました。そしたらテキトーに作ったわりにはみごと動いたのでブログにかきました。バグがあったらコメントしてくれるとうれしいです。