デジタル・デザイン・ラボラトリーな日々

アラフィフプログラマーが数学と物理を基礎からやり直す。https://qiita.com/yaju

はてなダイアリーおよびはてなブログ(はてな記法モード)にてjsdo.itを貼る方法

はてなダイアリーおよびおよびはてなブログ(はてな記法モード)はjsdo.itのブログパーツをそのまま貼り付けられませんでした。

はてなブログの基本設定の編集モードには、「見たままモード」と「はてな記法モード」があります。
「見たままモード」の場合なら、jsdo.itのEmbedボタンを押されたscriptコードがそのまま使えます。


今回、ここに貼るのに際し以下のサイトを参考にさせて頂きました。


はてなダイアリーにjsdo.itを貼る - あんこの成長記録

さて、方法ですが上記のサイトを参考にしてみたものの、jsdo.it側に変更があり説明と少し違ってきています。

1.貼り付けたいjsdo.itのEmbedボタンを押すと、scriptコードが生成されるので、そこからsrcのURLのみを抽出します。
http://jsdo.it/blogparts/bmLF/js?view=design

2.iframe → Google Gadget コンバータのサイトに移動して、先ほどのURLを入れて変換します。

3.変換するとプレビューのテキストボックス内にdocument.writeから始まるコードが生成されます。

4.document.writeから始まるコードからiframeタグを含めた中身を抽出します。そして、「\」マークを空文字に置換します。

5.iframe → Google Gadget コンバータのサイトに再度移動して、先ほどのiframeタグを含めた中身を入れて変換します。

6.「以下のHTMLをコピーしてはてなダイアリーなどに貼り付けてください。」のテキストボックスの内容をはてなダイアリーに貼り付けます。

7.プレビューや確認するでは表示されないですが、公開するときちんと表示されます。

補足:
はてなダイアリーでは、基本的にはiframeは使えず、以下の対応したブログパーツしか利用できません。
対応ブログパーツ一覧 - はてなダイアリーのヘルプ
現状ではwonderflは利用できますが、jsdo.it は未対応なので対応するようにして欲しいですね。