2007年05月06日 18:45 [Edit]

Hatena::Diary - スーパpre記法で実行可能なJavaScriptを

そのはてなダイアリーで、こうすれば比較的安全に実行可能なJavaScriptを記述できるのではないかという提案。

404 Blog Not Found:javascript - はてダでは書けないはてなブックマーク技25個
こういう技の紹介って、JSがあればもっとわかりやすいんだけどはてダはJS禁なので。

レシピ

  1. まずは、スーパーpre記法を以下のように拡張。
    >|javascript|
    alert(Math.atan2(1,1)*4);
    |executable|<
    

    このexecutableはrunnableでもevaluableでも構わない。

  2. これを、以下のようなHTMLに展開。

    <!-- ここまでは今までと同様 -->
    <pre class="syntax-highlight"><span class="synStatement">alert</span>(Math.atan2(1,1)*4)
    </pre>
    <!-- ここから新規 -->
    <textarea style="display:none">
    (function(){
    alert(Math.atan2(1,1)*4);
    })()
    </textarea><input type="submit" value="実行"
     onclick="try{eval(this.previousSibling.value)}catch(e){alert(e)}">
    </div>
    
  3. 以下のように表示される。もちろん実行可能。
    alert(Math.atan2(1,1)*4);
    

ポイント

  • 記法中のjavascriptを、(function(){/* ... */})()でくるむことで、変数衝突を回避
  • <textarea style="display:none">に、実行用のscriptをas isで格納しておける
  • その直後にinputタグをおき、onclickでeval(this.previousSibling.value)することで、投稿されたScriptを実行。この部分は、factor outしてももちろん構わない。

はてダにはid:amachangをはじめ、日本を代表するJavaScriptersがいるのに、現状はなんとも勿体ない。<script>モロタグを禁止するのは仕方ないにしても、上記の方法で実行可能なSnippetsぐらい投稿可能にしてもいいのではないだろうか。

Dan the Occasional Hatena::Bookmarker


この記事へのトラックバックURL

この記事へのトラックバック
Ruby → Rails → Ajax → …… という経緯で現在 JavaScript を勉強中。自分のブログにコード断片を貼り付けて実行できたら何かと便利だと思い、その方法を調べてみるも、どうもはてなダイアリーでは(編集画面に直にコードを記述できるような)ストレートな方法がない模
[pukiwiki][php][javascript]PukiWiki で JavaScript 実行【himesuke’s STEP-log】at 2008年05月01日 17:46
はてなアイデア - スーパpre記法で実行可能なJavaScriptを投稿できるようにしてほしい cf. http://blog.livedoor.jp/dankogai/archives/50824976.html 404 Blog Not Found:Hatena::Diary - スーパpre記法で実行可能なJavaScriptを 彈さんが提示してゐる案だと次のやうな問題
『スーパpre記法で実行可能なJavaScriptを』のコードを改良【MORIYAMA Hiroshi's Diary】at 2007年05月07日 12:46
 JavaScript 禁止なのは XSS の関係でしょうがないわけで。だから、「404 Blog Not Found:Hatena::Diary - スーパpre記法で実行可能なJavaScriptを」とか「IT戦記 - Re: スーパー pre 記法で実行可能な JavaScript を」のような苦肉の策がでてくるわけだけれども。ただ、苦...
はてなダイアリーが JavaScript 禁止という件【Kazuho Oku's Weblog】at 2007年05月07日 10:58
この記事を読んで http://blog.livedoor.jp/dankogai/archives/50824976.html うんうん!そのとおり!と思った! でも ちょっと変なコードをクリックしてしまって問題になるかもしれない。 「こんにちはこんにちは!!」みたいな。 だから、ちょっと弾さんの executable を
[javascript] Re: スーパー pre 記法で実行可能な JavaScript を【IT戦記】at 2007年05月07日 07:08