GoogleGadgetでブログパーツ箱を作ってみた

このガジェットを使えば非対応ブログパーツもはてダで利用できます。


非対応ブログパーツも、GoogleGadgetでwrapしてあげれば(iframe内で)動くというリクツです。


GoogleGadgetを使ってみるでいろいろ試していて、はてダでは、

<script src="http://www.gmodules.com/ig/ifr?url=...

で始まるタグを許可してることが分かりました(パラメータの有無や順序の制約などはあるけど)。


仕組みは簡単。
編集用のガジェットで本来実行したいコードを、GoogleGadget形式のタグを生成するというもの。
生成されたタグから張り付け用のガジェットを呼び出します。

使いかた

このページのBlogPartsBoxEditorに実際に実行したいコードを貼り付ける
<script>
String.prototype.camelize = function() {
	return this.replace(/_([a-z])/g, function(m) {
		return m.charAt(1).toUpperCase();
	});
};

alert("get_element_by_id".camelize());
</script>

すみません。非実用的で;
もともと"JavaScriptEval"的な発想から入ったので、サンプルはモンキーパッチなコード例になっておりますw
実用例はまた...

evalをクリックして動作確認


コードを取得をクリック

ブログパーツタグをコピる


↓こんなタグがでけます

<script src="http://www.gmodules.com/ig/ifr?url=http://loj-gg1.appspot.com/blogPartsBox.xml&amp;up_code=%3Cscript%3E%0AString.prototype.camelize%20%3D%20function()%20%7B%0A%09return%20this.replace(%2F_(%5Ba-z%5D)%2Fg%2C%20function(m)%20%7B%0A%09%09return%20m.charAt(1).toUpperCase()%3B%0A%09%7D)%3B%0A%7D%3B%0A%0Aalert(%22get_element_by_id%22.camelize())%3B%0A%3C%2Fscript%3E%0A&amp;up_codeoff=false&amp;synd=open&amp;w=500&amp;h=200&amp;title=BlogPartsBox&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js"></script>
コピったタグをブログのエントリなんかに貼り付ける

こんなカンジ

こんなことも...

SVG+jQueryで動く笑い男はコチラから拝借しました。
http://jx-script.blogspot.com/2010/02/html5.html
めちゃクール!

参考

とりあえずGAEにホストしています。

  • 編集用のガジェットのコード

http://loj-gg1.appspot.com/blogPartsBoxEditor.xml

  • 貼り付け用のガジェットのコード

http://loj-gg1.appspot.com/blogPartsBox.xml

ご自由にどうぞv

ちなみに

外身はGoogleGadgetなのでもちろんiGoogleでも使えます。