Vue.js + Electron でマークダウンエディタをサクッとつくってみた

f:id:kokushin:20160426173929p:plain

最近話題の軽量フレームワーク「Vue.js」と簡単にアプリ化できる「Electron」を組み合わせて、練習がてらマークダウンエディタをつくってみました。

Vue.js + marked.js でマークダウンエディタ本体を作る

公式サイトのサンプルをそのまま引用します。
アプリ名は「MarkDown Visual Editor」にします。

jp.vuejs.org

せっかくなので webpack を使ってみる

せっかく覚えたので積極的に使っていくスタイル。
以下、現時点でのディレクトリ構造です。

mdve/
  ├ app/
  │   ├ app.js
  │   └ index.html
  ├ package.json
  └ webpack.config.js

app.jsに「Vue.js」の処理を書きます。

Vue.js インストール

$ npm install vue --save

marked.js インストール

マークダウン実装用JSライブラリである「marked.js」をインストールします。

$ npm install marked --save

webpack.config.js を設定

module.exports = {
  entry: './app/app.js',
  output: {
    path: __dirname + '/app',
    filename: 'bundle.js'
  }
};

app.js を書いていく

var Vue = require('vue');
var marked = require('marked');

var mdve = new Vue({
  el: '#mdve',
  data: {
    input: '# edit here!'
  },
  filters: {
    marked: marked
  }
});

index.html を書いていく

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>MarkDown Visual Editor</title>
  <style>
  html, body, #mdve {
    margin: 0;
    height: 100%;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: #333;
  }

  textarea, #mdve div {
    display: inline-block;
    width: 49%;
    height: 100%;
    vertical-align: top;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 20px;
  }

  textarea {
    border: none;
    border-right: 1px solid #ccc;
    resize: none;
    outline: none;
    background-color: #f6f6f6;
    font-size: 14px;
    font-family: 'Monaco', courier, monospace;
    padding: 20px;
  }

  code {
    color: #f66;
  }
  </style>
</head>
<body>
  <div id="mdve">
    <textarea v-model="input" debounce="300"></textarea>
    <div v-html="input | marked"></div>
  </div>
  <script src="bundle.js"></script>
</body>
</html>

webpack を実行してコンパイル

$ webpack

実行後、「index.html」をブラウザで開いて動作を確認してみましょう。
正常に動作していたら、マークダウンエディタ本体の完成です。

Electron の準備

デスクトップアプリケーション化（パッケージ化）するために、「Electron」を準備します。
グローバルインストールしましょう。

$ sudo npm install electron-prebuilt -g

ついでに、exeやappなどアプリケーション形式にコンパイルしてくれるツール「electron-packager」もインストールします。

$ sudo npm install electron-packager -g

以上で準備完了です。

Electron の処理を書く

main.jsを作成します。
ここまでのディレクトリ構造は以下のとおり。

mdve/
  ├ app/
  │   ├ app.js
  │   ├ bundle.js
  │   └ index.html
  ├ package.json
  ├ webpack.config.js
  └ main.js

main.jsに「Electron」の処理を記述します。

'use strict';

// 必要なモジュールを読み込み
var app = require('app');
var BrowserWindow = require('browser-window');

// エラーをターミナルに出力
require('crash-reporter').start();

var mainWindow = null;

// アプリを閉じた時の処理
app.on('window-all-closed', function() {
  if (process.platform != 'darwin') {
    app.quit();
  }
});

// アプリが起動した時の処理
app.on('ready', function() {

  // アプリ起動時の横幅・高さを設定
  mainWindow = new BrowserWindow({
    width: 1200,
    height: 800
  });

  // アプリ本体を読み込み
  mainWindow.loadUrl('file://'+ __dirname +'/app/index.html');

  // アプリを閉じた時に初期化
  mainWindow.on('closed', function() {
    mainWindow = null;
  });

});

エントリーポイントを設定

package.jsonを編集します。

"main": "main.js",

これで、electronコマンドを実行した際にmain.jsを読み込むようになります。

実行してみる

$ electron .

上記コマンドで、実際にアプリの挙動を確認することが出来ます。

パッケージ化して配布できるようにする

お待たせしました、つくったアプリをパッケージ化してみましょう。

$ electron-packager .  mdve --platform=darwin,win32 --arch=x64 --icon=./icon.icns --overwrite

「mdve」の部分が「アプリケーション名」
「--platform」が「対応OS（darwinがMacOS・win32がWindows）」
「--arch」が「アーキテクチャ（x64かx86）」
「--icon」が「アプリケーションアイコンのパス」
「--overwrite」が「上書きを許可」となります。

しばらくするとパッケージ化されたアプリが出力されます！

f:id:kokushin:20160426184310p:plain