Jetpack と 英辞朗 で遊んでみた。

javascript

Jetpackのアップデートから動かなくなった気がします。後で調べます。090530
id:amachang のエントリを参考にJetpackしてみた。
http://d.hatena.ne.jp/amachang/20090521/1242884854


眠いのでとりあえずソースだけ。英辞朗を活用するJetpackです。

  • Fx3.5にJetpack入れてね。
  • 内容に自信がないので公開用HTMLは作ってません。localhost かなんかに設置するといいと思います。（手抜きでごめんなさい。）
  • たぶんutf-8で保存しないとうまく動かない予感。
  • 右下の"eijiro"をクリックするとプロンプトが出るので検索文言入れるとアクティブなタブに検索結果が表示されるよ。（ただし1ページ目のみ。）
  • 開いてるページにノード突っ込むのでCSSが影響して見た目が崩れるかも！
    • 余力があればiframeかなんかに変える。

公開用ファイル

jetpack-eijiro.js
(function() {
jetpack.statusBar.append({
  html: "eijiro",
  width: 35,
  onReady: function(widget){
    $("body",widget).css({cursor:"pointer"});
    $(widget).click(function(){
      var focusedTabDocument = jetpack.tabs.focused.contentWindow.document;
      // 検索文字列
      $(focusedTabDocument).ready(function(){
        var query = jetpack.tabs.focused.contentWindow
                           .prompt('英単語か日本語を入力してちょーだい');
        var url = "http://eow.alc.co.jp/"+query+"/UTF-8/?ref=sa";
        $.get(url, function(content) {
          $("body",focusedTabDocument).append(
          $(content).find("#resultList>ul").addClass("jetpackResutlList"));
          $("ul.jetpackResutlList",focusedTabDocument).css({
            position:"absolute",
            top:"0",
            right:"0",
            width:"30%",
            border:"solid 1px #333333",
            padding:"20px",
            background:"#fff",
            "z-index":"9999",
            cursor:"pointer"
          }).click(function(){
            $(this).remove();
          })
        });
      });
    });
  }
});
})();
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="jetpack" href="jetpack-eijiro.js" />
<title>じぇっとえいじろう</title>
</head>
<body>
<h1>えいじろうとなかよくするよ！</h1>
</body>
</html>