フリープラグインの文字数制限以上のjavascriptを実行してみる
photo credit: Franco Foliniフリープラグインはアメブロでjavascriptを記述できる唯一のスペースです。
しかし、文字数制限があるため、本格的なプログラムを書くことはできません。
ブログパーツを埋め込むための<script>タグにも文字数制限がありますので、気に入ったブログパーツもいずれは削る時が来るかもしれません。
ん・・・？なんだかどちらのパターンも滅多になさそうな気がしてきましたが・・・折角だから話を進めてみましょう。
今回のハックは、その文字数制限を回避する方法です。
簡単に言うと、フリープラグイン以外の場所にjavascriptを書いて読み込みます。
その場所とは・・・過去の記事です。
直接javascriptのコードを書く場合と、外部javascriptを読み込む場合とで方法が違います。
それぞれの場合に分けて説明します。
直接javascriptのコードを書く
最初に「記事を書く」から新規記事を作成します。
記事の中身はこのように書いてください。
**javascript_section**
//ここに任意のjavascriptコードを書きます
**javascript_section**
//ここに任意のjavascriptコードを書きます
**javascript_section**
下の写真のような感じです。
この記事が最新記事として表示されないように、日付を古く設定してから公開します。
次に、先ほど書いた記事のページを開き、URLをメモしておきます。
最後にフリープラグインに以下のコードを記述します。
url:の部分にはさっきメモしたURLを書いてください
<script type="text/javascript">
$.ajax({
url: "http://ameblo.jp/～",
cache: true,
success: function(html){
eval(html.split("**javascript_section**")[1].replace(/<br \/>/g,""));
}
});
</script>
$.ajax({
url: "http://ameblo.jp/～",
cache: true,
success: function(html){
eval(html.split("**javascript_section**")[1].replace(/<br \/>/g,""));
}
});
</script>
すると・・・
きちんとjavascriptが実行されました！
ブログのどのページを開いても実行されます。
では次に、外部javascriptを実行してみましょう。
外部javascriptを読み込む
今回は例として
<script type="text/javascript" src="http://t-rix.net/te/exjs.js"></script>
<script type="text/javascript" src="http://t-rix.net/te/exjs2.js"></script>
この2つの外部javascriptタグを実行する実験をしてみます。
こちらも最初に「記事を書く」から新規記事を作成します。
記事の中身はこのように書いてください。
***external_js_section***
*url*http://t-rix.net/te/exjs.js
*url*http://t-rix.net/te/exjs2.js
***external_js_section***
*url*http://t-rix.net/te/exjs.js
*url*http://t-rix.net/te/exjs2.js
***external_js_section***
実行したい外部javascriptの数だけ、↓のように同じ書式でurlを追記できます。
***external_js_section***
*url*http://t-rix.net/te/exjs.js
*url*http://t-rix.net/te/exjs2.js
*url*http://t-rix.net/te/exjs3.js
*url*http://t-rix.net/te/exjs4.js
***external_js_section***
*url*http://t-rix.net/te/exjs.js
*url*http://t-rix.net/te/exjs2.js
*url*http://t-rix.net/te/exjs3.js
*url*http://t-rix.net/te/exjs4.js
***external_js_section***
そして先ほどと同じように公開→URLをメモして、フリープラグインに以下のように記述します。
url:の部分は先ほどメモしたURLに書き換えてください。
<script type="text/javascript">
$.ajax({
url: "http://ameblo.jp/～",
cache: true,
success: function(html){
var urlArray = html.split("***external_js_section***");
urlArray = urlArray[1].replace(/<br \/>/g,"").split("*url*");
var len = urlArray.length;
for(var i=1;i<len;i++){
$.getScript(urlArray[i]);
}
}
});
</script>
$.ajax({
url: "http://ameblo.jp/～",
cache: true,
success: function(html){
var urlArray = html.split("***external_js_section***");
urlArray = urlArray[1].replace(/<br \/>/g,"").split("*url*");
var len = urlArray.length;
for(var i=1;i<len;i++){
$.getScript(urlArray[i]);
}
}
});
</script>
これで問題なく実行できます！
ただ、非同期通信で読み込むので、実行タイミングが少し遅れます。
ページ読み込みと同時に実行する必要があるコードでの使用は避けたほうが良いかと思います。
使う機会は殆ど無いかもしれませんが・・・ｗ