読者です 読者をやめる 読者になる 読者になる

プログラマでありたい

おっさんになっても、プログラマでありつづけたい

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)

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


See Also:
Swaggerとは何か?
クラスメソッドさんの勉強会で、Swaggerの話をしてきました
SwaggerでAWS API Gatewayを作成する
プログラマになりたい Advent Calendar 2015 - Qiita
プログラマになりたい Advent Calendar 2015 - Adventar