masaru: May 2008 Archives

JSON Editor のショートカットキーの割り当てを、より vi 風にした Greasemonkey を書きました。

jsoneditorvikeybind.user.js

JSON Editor のキーバインドに馴染めない方は是非お試しください。

それでもどうしても馴染めない方は適宜スクリプトを書き換えてご利用ください。

お好みのショートカットキーを割り振ることができるように、ここは敢えて user.js でのご提供になります。

vi モードでのショートカットキーの一覧

?

Open shortcut help (Shift+"/")

:e

Create a new one

j

Next item

k

Prev item

dd

Cut

p

Paste

h/l

Toggle expand / collapse

cc

Edit - "Ctrl+Enter"->OK, "Esc"->Cancel

ii

Append node

ik

Append Key only

iv

Append Value only

aa

Append child node

ak

Append child Key only

yyp

Duplicate

:r

Read from textarea

:ww

Publish as JSON

:wx

Publish as XML

u

Undo

U

Redo

1

Make textarea size larger

2

Make textarea size smaller

oh

open help page

oa

open about page

JSON Editor では大量のライブラリを利用させてもらっています。

以下に使わせてもらってるライブラリを感謝の気持ちを込めてスタッフロールよろしく並べてみました。

いつもお世話になっております！

jQuery

言わずと知れた JavaScript のフレームワークです。 僕はまだ大して JavaScript わかっていないので、こういうの使わないと無理です。

JavaScript-XPath

この世に XPath があり、このライブラリが公開されていてよかったと思います。今回の用途でいちいち id なんて振ってられません。jQuery 用のプラグインもあります。

json2.js

JSON に関しては本家ですかね。JSON データのパース、生成に。

hotkey.js

LDR や Fastladder でもショートカットキー実現のために使われています。今回、Fastladder のオープンソース版に含まれていたやつを使わせてもらいました。

strutil.js

JavaScript のみで文字コード操作をいろいろできる、すばらしいライブラリです。

XML.ObjTree

XML を JavaScript から扱うためのライブラリです。当初 XML の取り扱いは全く考えていませんでしたが、これを利用するとサクッと実現できそうだったので、追加しました。

jQuery UI

ヘッダ部分のスライダーの実現に使ってます。実は「Value」の表示領域は可変なんです。

jquery.cookie.js

クッキーにはヘルプが開いてるかどうかと、実は可変の「Value」領域の幅を記憶させてます。

ThickBox

ページ遷移すると編集中のデータが消えちゃうので、about ページは別レイヤーでかぶせて表示させてます。

SWFObject

save2local 使うためですね。Flash 埋め込みのための標準ライブラリ。

save2local.js

バックアップ機能の実現に利用してます。詳しくはこちらのエントリで。

僕が書いたのはそれ以外の部分です。

プロトタイプはせいぜい数100行のコードだったのですが、 現在は機能をあれこれ追加していった結果、結局 1800 行くらいのコードになってしまいました。

どれくらい簡単かというと、下の「INSTALL NOW」 をクリックすると
インストーラが立ち上がるので、後はその案内に従うだけという簡単さです。

お使いのマシンに Adobe AIR ランタイムが入って無い場合は、 最初にインストールしてくれます。

因みに、AIR アプリのシームレスインストールの実装方法についてはこちらを参考にしました。

JSON Editor には豊富なショートカットを用意してます。

ほとんど全ての機能がショートカットキーから利用できるのですが、なんせ覚えるのが大変です。

そんな時は、いつでも「?」キー（shift + /）でショートカットヘルプを開いてショートカットを確認することができます。
ショートカットヘルプを開いたままで作業を続けることも可能です。

ショートカットヘルプを開いた状態だとマウスでの操作が一部できなくなったり
、 ショートカットヘルプを閉じようとしても右側に隠れ切らずにちょっとはみ出してたりしますが、
これは使う人に常にショートトカットキーの存在を意識してもらうためでもあります。

ショートカット便利なんで、是非一度〜

こんにちは。この度、株式会社カタマリはカタマライズ･ギャラリーのコンテンツとして

JSON Editor を公開しました。

今後このブログで開発状況や機能などをお知らせしていきます。
どうぞよろしくお願いします。