ElectronでSwagger Editorをアプリ化 - プログラマでありたい

　大幅に遅れてしまいましたが、Electron Advent Calendarの16日目です。秋過ぎからSwagger,Swaggerと言っていたら、色々なお鉢が回ってきました。ついでに、調べようとググると自分のブログやTwitterの呟きがぶつかってしまうようになっていました。ということで、毒食らわば皿までということで、もう1つ。

Swaggerのダメな所

　使いはじめると、いろいろ気になる所があります。その中での最大のものが、Swagger Editorの準備の面倒臭さです。Swagger EditorのGetting Startを見ていると、下記の手順で始められますと書いています。

git clone https://github.com/swagger-api/swagger-editor.git
cd swagger-editor
npm start

　簡単ですね。たった3つのコマンドでスタートできます。と思うかもしれないけど、このコマンド実行するには、gitコマンドとNode.jsがインストール済みである必要があります。エディタ1つ使うために、これを要求するのは少しナンセンスでしょう。Swagger Editor自体は中々優れものなだけに、これは残念です。という訳で、少しユーザフレンドリーな配布方法を考えてみましょう。

ElectronでSwagger Editorをアプリ化して配布する

　Swaggerの実体は、Node.jsをはじめとするJavaScriptです。ということであれば、Electronでアプリ化しやすいのではないでしょうか？試してみました。前提として、gitとnode.jsをインストールしていることとしています。

Electronのインストール

　まずは、Electron関係のモジュールを用意します。electron本体のelectron-prebuiltとアーカイブ化するasar、配布用のelectron-packagerをまとめてインストールしてしまいましょう。

npm install -g install electron-prebuilt
npm install -g asar 
npm install -g electron-packager

Swagger Editor関係の準備

　次にSwagger Editor関係の準備をしましょう。最初の手順は、公式のGetting Start通りです。

git clone https://github.com/swagger-api/swagger-editor.git 
cd swagger-editor 
npm start

npm startすると必要なモジュールを取ってきて、関係ファイル等を生成してくれます。次に、httpdサーバが必要なので、node-web-serverもインストールしましょう。

npm install node-web-server

Electron化にむけて、関連ファイルの作成

　swagger-editorディレクトリ直下のpackage.jsonに、起動するjsファイルの指定を追記します。これは、Electronの流儀というより、Node.jsの流儀のようですね。下記の例は、licenseの下に追加しています。

"description": "Swagger Editor source", 
"license": "Apache-2.0", 
"main":"main.js", //←この一行追加 
"authors": [ 
　　"Mohsen Azimi <me@azimi.me>" 
],

　次にmain.jsを作成します。この辺りは、Electronの流儀にしたがっています。appとかはElectronのモジュールです。他には、node-web-serverを追加しています。単純にrequireで読み出すのか、remote経由で呼び出すのか色々ありますが、とりあえずはrequireで動かしています。

'use strict'; 

var app = require('app'); 
var BrowserWindow = require('browser-window'); 
var nws = require('node-web-server'); 
require('crash-reporter').start(); 

var mainWindow = null; 

app.on('window-all-closed', function() { 
　　nws.stop(); 
　　if (process.platform != 'darwin') 
　　　　app.quit(); 
});

app.on('ready', function() { 
　　nws.run({ 
　　　　host: "localhost", 
　　　　port: 8080, 
　　　　docRoot: "dist", 
　　}, __dirname); 

　　var screen = require('screen'); 
　　var size = screen.getPrimaryDisplay().size; 

　　mainWindow = new BrowserWindow({ 
　　　　width : size.width, 
　　　　height : size.height, 
　　　　resizable : true, 
　　　　"web-preferences": { 
　　　　　　"web-security": false 
　　　　} 
　　}); 

　　mainWindow.loadURL('http://localhost:8080/'); 
　　mainWindow.on('closed', function() { 
　　　　mainWindow = null; 
　　}); 
});

次にdist->scriptsフォルダに、下記の3ファイルをインストールします。バージョンは適当に、最新のものに変えておいてください。

curl -o jquery.min.js http://code.jquery.com/jquery-2.1.4.min.js

最後にdist/index.htmlを編集します。bodyの後に、を追加します。

ここまで出来たら起動です。swagger-editor直下で、下記のコマンドを打ってエラーがでなければ成功です。

electron .

f:id:dkfj:20151220173903p:plain

　どうでしょうか？無事、アプリが起動されたでしょうか？ここまでで、一旦ブラウザ起動から独自にパッケージ化したアプリに切り替えることが出来ました。しかし、起動にはElectronからです。これだと、依然使い手を選ぶことには変わりありません。ということで、配布可能な形式にしてみましょう。

electron-packager ./swagger-editor-electron/ swagger-editor --platform=darwin --arch=x64 --version=0.36.1

　とりあえずMac版を作ってみましょう。Windows版は、platformの部分に,win32をつければ作れます。作ってみたところ、起動しなかったので誰かおしえてください。また引数の--versionの0.36.1はElectronのバージョンです。

　とりあえず出来たのを、ここで配布してみます。動くかどうか試してみてください。ちなみに作り方とか色々問題あると思うので、ぜひご指摘くださいな。
f:id:dkfj:20151221090758p:plain

感想

Electron、面白いです。使い所も多そうなので、もう少し勉強してみます。それにつけても、深刻なNode.js力の不足よ。勉強しましょう。

APIデザインケーススタディ ~Rubyの実例から学ぶ。問題に即したデザインと普遍の考え方 (WEB+DB PRESS plus)

作者: 田中哲
出版社/メーカー: 技術評論社
発売日: 2015/12/16
メディア: 単行本（ソフトカバー）
この商品を含むブログを見る