Vue.js + Electron でマークダウンエディタをサクッとつくってみた
最近話題の軽量フレームワーク「Vue.js」と簡単にアプリ化できる「Electron」を組み合わせて、練習がてらマークダウンエディタをつくってみました。
Vue.js + marked.js でマークダウンエディタ本体を作る
公式サイトのサンプルをそのまま引用します。
アプリ名は「MarkDown Visual Editor」にします。
せっかくなので 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」が「上書きを許可」となります。
しばらくするとパッケージ化されたアプリが出力されます!
意外とファイルサイズは大きいです...。
軽量化出来るのかな?
実際につくったもの
GitHub - kokushin/mdve: # MarkDown Visual Editor
感想とか
Vue.jsの勉強も最近はじめまして、真っ先に「このマークダウンのサンプル、Electronでアプリ化しよう」と考えていました。
まだまだアプリケーションとしては全然ダメですが、とりあえずここまで簡単にアプリ化できる事に感動。
いやー、これは楽しいですね。