electron-vueでマークダウンエディターを作ってみた。

はい、タイトルのまんまです。

先ほど、オーディオプレイヤー作ってまたかと言われそうですが、とりあえず書いていきます。
(開発順的にはこっちが先)

完成品

フルスクリーンモード

環境

• Mac Book Pro (Catalina)
• Node.js(v12.16.1)
• vue-cli(3系)

ドキュメント: electron-vue 日本語
ドキュメント: electron

先ほどと変わってないですね(^^;

使用したモジュール

• BootStrap4
• markdown-it-vue
• fs(Node.jsに最初から組み込まれている)

仕様など

プレビューと入力エリアのスクロール同期、保存済みファイルの(差分検知後10~20sの)
オートセーブなど、最低限マークダウンエディターに必要なものは、追加しました。

それに加えて、Ctrl + S などデスクトップアプリならではの、ショートカットも実装し、Qiitaのスライドモード(---や***でsplitしてスライド用の配列を作る)のようなものも作成しました。

また、デスクトップである利点を生かして、フルスクリーン表示で共有できたら良いと思いwebkitのフルスクリーンの処理について調べて、実装してみました。
(electronは、Chromiumベースなので、どのOSの特殊な処理でもWebKitだけカバー、もしくは、Chromeを想定して開発すればいいのも利点?)

振り返り

今後の改良では、使用者がトークンを設定して、QiitaやmicroCMSに気軽に投稿しやすくなる機能も作成したいと思っています。

また、fsモジュールの書き方が少し読みにくいので、もう少し、node.jsのコアな機能について学ぶ必要があると感じました。

その他、electronに触れたことで、細かいブラウザのレンダリングエンジンや、JavaScriptのエンジンなど、単なるウェブ開発を少し超えたところの歴史や文化にも興味を持てたのは良かったと思います。

最近だと、Chromium版のedgeなどでChromiumが使われる機会が増えているので、今後どんな発展をしていくか、またそれらに対してユーザー、エンジニアの両面の立場から関わって行けることに楽しさを感じている今日この頃です。