はてなダイアリーでJavaScriptを実行するためのiGoogleのガジェット作ってみた

キッカケは忘れましたが、昨日、はじめてiGoogleのガジェットを作ってみました。

なんだか難しいのかと思ってたら、意外と簡単で、試しに、はてなダイアリーでJavaScriptを実行するためのiGoogleガジェットを作ってみました。

一度作ってしまうと、mixiアプリにも応用が聞いて、勉強する対象としてはなかなかいいなーと思いました。

Google Gadget Editorを使って作るとプレビューがあって楽ですね。でも、opensocialのAPIはプレビューでは動かなかったなー。

iGoogleガジェットのソース

<?xml version="1.0" encoding="UTF-8"?>
<Module>
  <ModulePrefs title="JavaScript Eval for Hatena Diary" width="500" height="500" author="http://www.hatena.ne.jp/jdg/">
    <Require feature="opensocial-0.8" />
    <Require feature="dynamic-height" />
  </ModulePrefs>
  <Content type="html">
  <![CDATA[
  <style type="text/css">
    h1 {
      font-size: 1.2em;
    }
    h2 {
      font-size: 1em;
    }
    p {
      font-size: 0.7em;
    }
    input, textarea {
      margin-top: 1em;
    }
  </style>
  <script type="text/javascript">
    var jsgadget = {};
    jsgadget.event = (function() {
      if (document.addEventListener) {
        return function(elem, event, handler, capture) {
          return elem.addEventListener(event, handler, capture);
        }
      }
      else {
        return function(elem, event, handler, capture) {
          return elem.attachEvent('on'+event, handler);
        }
      }
    })();
    jsgadget.init = function() {
      var output = document.getElementById('jsgadget_output_html');
      var error = document.getElementById('jsgadget_error_html');
      var setup = function(input_id, button_id, handler) {
        var input = document.getElementById(input_id).firstChild;
        var button = document.getElementById(button_id).firstChild;
        jsgadget.event(button, 'click', function(e) {
          if (!input.value) return;
            handler(input, output, error)
        }, false);
      };
      setup('jsgadget_input_html', 'jsgadget_html_render_button', function(input, output, error) {
        output.innerHTML = input.value;
        gadgets.window.adjustHeight();        
      });
      setup('jsgadget_input_javascript', 'jsgadget_javascript_render_button', function(input, output, error) {
        try {
          eval(input.value);
          error.innerHTML = '';
          gadgets.window.adjustHeight();
        }
        catch(e) {
          error.innerHTML = e;
          gadgets.window.adjustHeight();
        }
      });
    };
    gadgets.util.registerOnLoadHandler(jsgadget.init);
  </script>
      <h1>JavaScriptをevalしたり、HTMLをレンダリングしたりするガジェット</h1>
      <p>上のテキストボックスにHTMLを入力し、HTML描画ボタンをクリックすると、ガジェット下部のHTML描画エリアに入力したHTMLが描画されます。</p>
      <p>下のテキストボックスにJavaScriptコードを入力し、JavaScript実行ボタンをクリックすると、入力したJavaScriptコードが実行されます。</p>
      <div id="jsgadget_input_html"><textarea rows="5" cols="55"></textarea></div>
      <div id="jsgadget_html_render_button"><input type="button" value="HTML描画" /></div>
      <div id="jsgadget_input_javascript"><textarea rows="3" cols="55"></textarea></div>
      <div id="jsgadget_javascript_render_button"><input type="button" value="JavaScript実行" /></div>
      <h2>HTML描画エリア</h2>
      <div id="jsgadget_output_html"></div>
      <h2>エラー表示エリア</h2>
      <div id="jsgadget_error_html"></div>
  ]]>
  </Content>
</Module>

単純に単一のHTMLファイルにHTML、CSS、JavaScriptを記述するような感覚で使えます。*1

HTMLが使えるので、適当な場所にホスティングしたJavaScriptライブラリもロードできるし、JavaScriptできなくてもOKってとこが魅力です。

iGoogleガジェット

活用方法

初めは、タイトルどおり、はてなダイアリーでサンプルコードを書いた時の実行環境として使ってもらいたいなと思って作ったんですが、Firebug等のツールが使い慣れていない人は、これをiGoogleに入れてJS遊びをしてみるってのもありかもと思いました。他には、jQuery等のライブラリをHTML側で読み込んでテストしてみるとか、JavaScriptのバージョン指定をして新機能を使ってみるとかの使い方もありそうなので、個人的にも結構使うかも。

element.getElementsByTagName('div')とかする時に、ガジェット中にあるdivも数に入ってしまうのがちょっと気にくわない点です。

折角なので、これを機にmixiアプリをいじってみようかと考えてます。

*1:シンタックスハイライトをxmlにすると見にくかったので、htmlにしました