2020-05-10に更新

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

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

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

完成品

image

フルスクリーンモード
image

環境

  • 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が使われる機会が増えているので、今後どんな発展をしていくか、またそれらに対してユーザー、エンジニアの両面の立場から関わって行けることに楽しさを感じている今日この頃です。

ツイッターでシェア
みんなに共有、忘れないようにメモ

taka1156

Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?

関連記事

コメント