[Safari Extension] lookup.safariextzのパターン定義の書き方

lookup.safariextz はバージョン 1.0.2 から、呼び出すサイトをユーザが独自に定義できるようになりました。



パターン定義の部分にJSON形式で記述すれば良いわけですが、これを素でいじるというのはどうみてもしんどいので、それっぽいUIを機能拡張ビルダーで作ろうと思い、昼間っからゴニョゴニョとやっておりました。

で、結論から申しますと「無理です」。この程度のパーツで一体どうしろとw

というわけで、Chrome Extensionでおなじみの、HTMLで設定用UIを書くという方針に変えました。しばらくかかりそうなので、お茶濁しではありますが、エディタでパターンを編集して貼付けるというありがちな方法を書いておきます。

まずは上の画面（Safari→環境設定→機能拡張→lookup）のパターン定義の内容をコピーして、エディタに貼付けると、こんな感じです。

[{"command": "googleEJ", "url": "http://translate.google.co.jp/?hl=ja&tab=wT#en|ja|{}", "title": "lookup: Google翻訳(英和)"},   {"command": "alc", "url": "http://eow.alc.co.jp/{}/UTF-8/?ref=sa", "title": "lookup: アルク"}, {"command": "ud", "url": "http://www.urbandictionary.com/define.php?term={}", "title": "lookup: Urban Dictionary"}]

このままだと扱いづらいのですが、そこはJSONですから、好きな書式に書き換えましょう。私はこんな感じにしています。

[
  {
    "command": "googleEJ",
    "url": "http://translate.google.co.jp/?hl=ja&tab=wT#en|ja|{}",
    "title": "lookup: Google翻訳(英和)"
  },
  {
    "command": "alc",
    "url": "http://eow.alc.co.jp/{}/UTF-8/?ref=sa",
    "title": "lookup: アルク"
  },
  {
    "command": "ud",
    "url": "http://www.urbandictionary.com/define.php?term={}",
    "title": "lookup: Urban Dictionary"
  }
]

これでおわかりかと思いますが、基本的な構造は

[{site1},{site2}, ...]

と、個々のサイトの記述が配列に格納された形になっており、サイトの記述は

{"command": ---, "url": ---, "title": ---}

という３つの項目を持っています。

titleにはサイト名を、commandには何らかのユニークな文字列を入れてやります。urlはサイトに応じてパターンを見つける必要があります。たとえばgoo辞書（英和）でtestという単語を引き、URLを見ると

http://dictionary.goo.ne.jp/srch/ej/test/m0u/

となっていますので、testの部分を入れ替えてやれば他の単語も同様に引けるというのがわかります。lookup.safariextzはurl内の{}の部分を、ページ内で選択された単語やフレーズをencodeURIComponent()したもので置き換えるようにしていますので、この場合は

http://dictionary.goo.ne.jp/srch/ej/{}/m0u/

としてやれば良いという事になります。なお、辞書サイトの全てがこのパターンで行けるとは限らないのでご注意ください。POSTメソッドでないと駄目とか、文字コードはShift-jisでないと駄目といったタイプのサイトには、今のところ、lookup.safariextzは対応出来ません。

私はWikipedia(J)とウィクショナリー日本語版の２つを追加して、

[
  {
    "command": "googleEJ",
    "url": "http://translate.google.co.jp/?hl=ja&tab=wT#en|ja|{}",
    "title": "  Google翻訳(英和)"
  },
  {
    "command": "alc",
    "url": "http://eow.alc.co.jp/{}/UTF-8/?ref=sa",
    "title": "  アルク"
  },
  {
    "command": "ud",
    "url": "http://www.urbandictionary.com/define.php?term={}",
    "title": "  Urban Dictionary"
  },
  {
    "command": "wikipediaJ",
    "url": "http://ja.wikipedia.org/wiki/{}",
    "title": "  Wikipedia(J)"
  },
  {
    "command": "wiktionaryJ",
    "url": "http://ja.wiktionary.org/wiki/{}",
    "title": "  ウィクショナリー日本語版"
  }
]

という記述にしました。titleには、他の機能拡張のアイテムと並んでもまぎらわしくないように、頭にスペースを入れてみました。

あとはこれをパターン定義の項目にペーストしてやればOKということになるのですが、その前に、ちゃんとしたJSON形式になっているかどうか確認することをお勧めします。私はJSONLintでチェックしています。チェックしてみてOKだったら、記述をパターン定義の項目にペーストしてやりましょう。

適当なページを右クリックしてコンテキストメニューを表示すると



という具合に、新たな項目２つが追加されているのが確認出来ると思います。

ちなみにtitleは何を書いても構わないので

[
  {
    "command": "googleEJ",
    "url": "http://translate.google.co.jp/?hl=ja&tab=wT#en|ja|{}",
    "title": " ____ ∧ ∧"
  },
  {
    "command": "alc",
    "url": "http://eow.alc.co.jp/{}/UTF-8/?ref=sa",
    "title": "|＼ /(´～`)＼"
  },
  {
    "command": "ud",
    "url": "http://www.urbandictionary.com/define.php?term={}",
    "title": "|　|￣￣￣￣￣|"
  },
  {
    "command": "wikipediaJ",
    "url": "http://ja.wikipedia.org/wiki/{}",
    "title": "|　|＝みかん＝|"
  },
  {
    "command": "wiktionaryJ",
    "url": "http://ja.wiktionary.org/wiki/{}",
    "title": " ＼|＿＿＿＿＿|"
  }
]

と記述すると



といった感じのコンテキストメニューになります。こう見えても、耳の部分を選べばGoogle翻訳が、みかんの部分を選べばWikipedia日本語版がきちんと呼び出されます。はてしなく使いづらいですがw

ちなみにメニューアイテム個数の上限は今のところ１０個までとなっています。そのため、１２行のクマーAAをtitleに入れてみたところ足が切れてしまいました。ならば、ということで機能拡張ビルダーでメニューアイテムを１００個くらいまで増やしたれ、と手を動かしかけましたが、何か間違ってるような気がしましたのでやめましたw