最近話題の軽量フレームワーク「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 を書いていく

< 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」が「上書きを許可」となります。

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

意外とファイルサイズは大きいです...。

軽量化出来るのかな？

実際につくったもの

GitHub - kokushin/mdve: # MarkDown Visual Editor

感想とか

Vue.jsの勉強も最近はじめまして、真っ先に「このマークダウンのサンプル、Electronでアプリ化しよう」と考えていました。

まだまだアプリケーションとしては全然ダメですが、とりあえずここまで簡単にアプリ化できる事に感動。

いやー、これは楽しいですね。

参考資料