はてなダイアリーにjsdo.itを貼る

はてなダイアリーにjsdo.itを貼り付ける - Keep on moving
jsdo.it のスクリプトを貼り付けてみた - tenkaoのはてなダ…メモ


を参考にしました。
はてなダイアリーでは、基本的にはiframeは使えず、以下の対応したブログパーツしか利用できません。


対応ブログパーツ一覧 - はてなダイアリーのヘルプ


現状ではwonderflは利用できますが、jsdo.it は未対応のようです。
そこで、上のブログを参考に、Google Gadget経由でjsdo.itのブログパーツを表示させてみます。


jsdo.itで貼付けたいページのタイトルの右下にあるshareの部分のタグをコピーして、

<script type="text/javascript" src="http://jsdo.it/blogparts/5d0F/js"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/annko/5d0F" title="逃げるボタン forked from: CSS3でボタンをつくる!(ジャンプ)">逃げるボタン forked from: CSS3でボタンをつくる!(ジャンプ) - jsdo.it - share JavaScript, HTML5 and CSS</a></p>

scriptのsrcにあるURLのJavaScript

document.write("<div class=\"bpJsdoit\" style=\"text-align:center; width:465px;\"><iframe scrolling=\"no\" src=\"http://jsdo.it/blogparts/5d0F\" width=\"465\" height=\"546\" style=\"border:1px #CCC solid; width: 465px; margin: 0px;\"></iframe></div>");

が生成するiframe(のエスケープを外したもの)

<iframe scrolling="no" src="http://jsdo.it/blogparts/5d0F" width="465" height="546" style="border:1px #CCC solid; width: 465px; margin: 0px;"></iframe>

または、iframeのsrc部分

http://jsdo.it/blogparts/5d0F


http://gimite.net/rails/iframe_gadget
を用いて変換する。この出力を貼付けることで、以下のようにはてダで、jsdo.itのコードを貼付けることができる。

プレビューや確認するで表示されなくてテンパったけど、公開するときちんと表示されます。

雑感

これって、はてなで対応してないブログパーツでもなんでも貼れちゃうけど、okなのだろうか...?