Webでいまいちくすぶっている技術をElectronにのせると格段に便利になることがある気がする

Electron Advent Calendar 2015の7日目です。
前日はElectron x WebSpeechAPIで遊んでみた話でした。

JSON Editorというブラウザ向けライブラリをElectronにのせてみました。

経緯を説明すると、

・ちょっと仕事でエンジニア以外の人がJSONデータをいじりたいということになりまして
・でもテキストそのままメモ帳でいじるのは勘弁なので、なにかエディタが必要だよねと言うながれになり
・既存のWindows用エディタを探してみたけれどいまいち用途に合致したいいものがなく
・ふとWeb系大好きっ子の筆者が「JSON Schema Editor」とかでググるとWeb用のそれっぽいライブラリ「JSON Editor」が出てきたので
・ElectronにのせてWindowsで使えるようにした

という話です。

今回いじりたかったJSONデータは

・スキーマを書ける程度に仕様が定まっていて
・エディタがないとしんどい程度に複雑で
・IDを記述すると特定の画像ファイルを意味するなど外部データとの関係性をもっている

というもので、他にも見つかった「JSONエディタ」の名を持つものでカバーするには手に余るものでした。

そこで見つけた「JSON Editor」。これはまあたしかにJSONをEditできるものではあるんですが、どちらかといえば「JSONスキーマを利用した構造化データ編集フォーム作成ライブラリ」が実質のところのものです。
ライブラリなので、プログラマがよしなにすれば構造化データに変換可能なあらゆる形式のデータの編集フォームを作成できるポテンシャルを持っていて、正直ちょっと名前で損をしているんじゃないかと思います。

これを使えばプログラマがUIの裏方で自由に処理が書けるので、こういう事情持ちのJSONを便利に編集したいという需要が満たせそうでした。

というわけでElectronにのせた版「WithSchemaEditor」を作りました。

名前は本家JSON Editorよりは体を表していて良いと思っている……（ぉ

基本的に大本のJSON Editorにファイル/フォルダ選択ダイアログをつけて、ファイルシステム上の実際のファイルを読み書きできるようにしただけのものです。

Q: 「それだけ？その編集したかったJSONスキーマとかはのせてないの？」
A: のせてません

なぜならWithSchemaEditorは基本的に具体的な処理はプラグインに全部任せるランタイムライブラリのような作りにしたからです。

本家JSON Editorを採用した理由が「ライブラリゆえに自由がきくから」なので、元のライブラリの自由さをそのままに、ただ動作環境をブラウザでなくデスクトップにしたという感じです。

具体的なJSONスキーマと、さらにはファイルの読み込み、書き出しなどの処理は全てプラグイン("with-schema-editor-schema-"から始まる名前のnpmモジュール)に定義します。
プラグインを入れ替えることによって、前述のJSONを編集したり、さらにその他の既存のJSONを編集したり、あるいはpackage.jsonを編集したり、色々出来る感じです。

元々のWeb用のものから多少方法は変わりましたが、JSON Editorを「ライブラリ」のまま素直にデスクトップ移植できたと思います。

所感

これをやってみた所感としては、Webでいまいちくすぶっている技術がElectronにのせると格段に便利になることがあるのではないかと思いました。

JSONいじるとか、実際のところブラウザ上でやるなんてことはあんまりなくて、むしろデスクトップ利用が主眼となる作業です。
Webで多機能なものが作れる中で、「出来るからつくってみた」ものっていろいろあると思います。
それの主戦場が実はWebではなかった場合でも、Electronを使えば簡単に移植できます。（WithSchemaEditorの実質は300行にも満たないです）

これ以外にも、視覚障害者用にWebカメラを使って文字を見やすくする反転拡大鏡というのを過去に作ってみたのですが、Webカメラからの映像の取得、その拡大縮小、さらに階調反転・コントラスト・明度調整といった(たぶん)複雑な処理がHTML5のAPIとCSS3のフィルタを使って爆速で作れたりして、「Web技術」という枠ではお遊びみたいに感じていた機能が、デスクトップというフィールドですごい実用性をもったという体験を得たりしました。

というわけでまとめ

いまやあらゆる分野の技術を一度に、しかも簡単に使えるブラウザと言う環境、そしてさらにそれを拡張したElectronという環境はときに「Web技術」というとらえ方からは思いも寄らないような可能性を持っています。

ゆたかになったWeb技術の自由さを活用して、技術を最も効果的に使えるようにしたいですね。