月 の 上

OSSのJSONエディタをElectronアプリに移植した

josdejong氏作のJSONエディタを、Electronでデスクトップ用アプリに移植しました。

f:id:amagitakayosi:20200201011014p:plain

github.com

元のJSONエディタはこちら。めちゃ高機能で便利。
僕が書いたコードはたった200行くらいです。

github.com

なぜ作った

  • 仕事でイベント用のUnityアプリを作る事が多い
  • 現場でパラメータを調整するために、パラメータをJSONCSVファイルに出しておくことが多い
    • SRDebuggerとかでアプリ内に設定画面を作る事も多いけど、その時間すらない事もある
  • プログラマー的にはJSONを使いたい
    • プログラマー以外の普通の人にとっては、JSONの編集は難しい
    • CSVはエクセルで編集できて便利という世界観
  • 普通の人が使えるJSONエディタがほしい
    • オンラインJSONエディタは良い奴がたくさんある
    • exeで欲しいんだが!!!
    • Electronでラップしたら良いのでは?
  • Electron最近触ってないし、勉強がてら作ってみるか〜〜
    • できた

インストール方法

最新のリリースページからzipファイルをダウンロードしてください。 zipファイルを解凍するとアプリ本体が出てくるので、適当な場所に保存すればインストール完了です。

https://github.com/fand/json-editor-app/releases/latest

Macの場合は「開発元が未確認のため開けません」と表示されてしまうので、初回の起動時は以下の手順で起動してください。

  • アプリを右クリックしてメニューを表示し、「開く」をクリック
  • 確認ウィンドウが表示されるので、もう一度「開く」をクリック
  • 起動成功!

2回目以降は普通にダブルクリックで起動できます。 詳しい解説はこちら: https://nori510.com/archives/14288

.json ファイルとの関連付け

JSONファイルを開く際に、JSON Editorで開くようにしておくと便利です。

Windows

  • エクスプローラーで適当なJSONファイルを右クリックし、「プログラムから開く」をクリック
  • 「常にこのアプリを使ってファイルを開く」にチェックを入れる
  • 「このPCで別のアプリを探す」をクリック
  • JSON Editor.exe を選択
  • 完了

Mac

  • Finderで適当なJSONファイルを右クリックし、「情報を見る」をクリック
  • 「このアプリケーションで開く」をクリックし、「その他」を選択
  • JSON Editor を選択
  • 「このアプリケーションで開く」の下の「すべてを変更」ボタンをクリック
  • 完了

使い方

適当にボタンを押してみてくれ

しくみ

  • Electronでラップしてるだけで
  • electron-forgeを使った
    • TypeScriptでElectronアプリの雛形を作ってくれて便利
    • アプリのパッケージングとかAuto updateとかも面倒みてくれる
    • とはいえ、ハマりどころも色々あった
      • 素直にelectron-builder使った方が楽かもしれん
  • 今回はAuto updateには対応していない
    • Code signing周りが面倒なので……
  • josdejong/jsoneditorが管理してるDOMに無理やりボタンを挿入してたり、実装がメッチャ雑
    • 僕はちょっとしかコード書いてないしまあエエやろ……
    • 元のライブラリがまあまあ枯れてるので、そこまでメンテしなくても動くはず

たぶん便利なので良ければ使ってみてください🙏