はてなダイアリーの記事にjsFiddleを埋め込みたい
はてなダイアリーでコードのせたりしてるときにふいにデモのせたいってなるときってありますよね。
jsfiddleとか埋め込めるブログもあるけどそのまんまiframeでうめこんでもみれないので色々調べてみた。
なんかこの辺とかこの辺とか見てるとできそうだったので色々ためしてみた。
公式のサイトみてるとどうやらgoogleガジェットとして扱えば埋め込むことができるらしい。
googleガジェット作るのはXMLでリソース（表示したいタグ）を用意してやればいいらしい。
というわけでせっせとjsfiddleから埋め込み用のタグをもってくる
jsfiddleの右上にある『Share』をクリックしてプルダウンから『Embed on your page』のタグを取得する
僕の場合こんなタグ
<iframe style="width: 100%; height: 300px" src="http://jsfiddle.net/nazomikan/xkgLs/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
このタグを使ってこんなXMLを書いて自分のサーバーかどっかにあげる
<?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="jsfiddle" author="nazomikan" width="700" height="150" /> <Content type="html"><![CDATA[ <iframe style="width: 100%; height: 300px" src="http://jsfiddle.net/nazomikan/xkgLs/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe> ]]></Content> </Module>
http://nazomikan.com/demo/jsfiddle/2012_01_17_0001.xml
↑
こんな感じでサーバーに設置
下記URLを表示する
http://www.gmodules.com/ig/creator?url=[設置したxmlのURL]
そしたら多分こんな感じの画面になるので
適当に横幅とか高さとか枠のレイアウト設定して、コードを取得ボタンを押す。
<script src="//www.gmodules.com/ig/ifr?url=http://nazomikan.com/demo/jsfiddle/2012_01_17_0001.xml&synd=open&w=500&h=300&title=jsfiddle&border=%23ffffff%7C0px%2C1px+solid+%23004488%7C0px%2C1px+solid+%23005599%7C0px%2C1px+solid+%230077BB%7C0px%2C1px+solid+%230088CC&output=js"></script>
するとこんな感じのタグができあがります。
なんかタグ中のURLの参照文字の部分がはてなダイアリーでうまく拾えないっぽいのと出力されたscriptタグのsrcが解決できないっぽいので & を & になおしたり srcの値の前に http: をつけたりして少し整形します。
<script src="http://gmodules.com/ig/ifr?url=http://nazomikan.com/demo/jsfiddle/2012_01_17_0001.xml&synd=open&w=500&h=300&title=jsfiddle&border=%23ffffff%7C0px%2C1px+solid+%23004488%7C0px%2C1px+solid+%23005599%7C0px%2C1px+solid+%230077BB%7C0px%2C1px+solid+%230088CC&output=js"></script>
あとはこれを記事にぺっとしてやるとこんな感じに。
めでたしめでたし。
jsfiddle まめ知識
ちなみにjsFiddleの結果のところだけみせたいんだよ＞＜って人は最初jsFiddleからiFrameのタグをもってきたときにsrcのURLの末尾(...embedded/の後)に result/ を追加すると結果だけのページが見れたりします。
同様にcss/ とか html/ とかつけるとそれぞれcss, htmlの画面になります。
<iframe style="width: 100%; height: 300px" src="http://jsfiddle.net/nazomikan/xkgLs/embedded/result/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
こんな感じで同様の行程をたどると...
こんな感じでresultの画面だけを出すこともできます＞＜
唯一問題なのは最近jsfiddleのサーバーがよわっててちゃんとレスポンスかえしてくれないことがあるくらいでしょうか。。
