エンターテイメント!!

遊戯王好きのJavaエンジニアのブログ。バーニングソウルを会得する特訓中。

Markdownエディタをelectronで試し実装

きっかけ

業務でテキストメモは残すけど、あまりにも散在しすぎるので、タグ検索できるようなメモ帳が欲しくなったから作り始めた。

Github

GitHub - IkarashiToshio/markdeck

現状

なんとかMarkdownのリアルタイムプレビューが出来るレベルまで持ってきた。
ものすごい時間がかかった気がする。
aceがとても良さそうなライブラリだったので、それを使うのに苦労した。
プレビューは、marked使ってる。

一番苦戦してたのは、electronと周辺環境揃えること。
あと、reactに結構苦戦した。

環境周り、全然知らなかったんだなってよく分かりましたわ。。。
babel, webpackが全然分からなくて苦戦してた。
自分の現場の環境は、誰かが考えて作ってるから、楽できているんですね。。。

とりあえず、最終目標は、タグ検索機能を実装するまで。
今はそれの下準備までできたところかな?

わかったこ

Node.jsのこと、まだ全然知らなかったんだな。。。
パスをどうやって通すかで四苦八苦してた。

あと、知識が足りなすぎる。
フロントエンドエンジニアの知り合いが欲しいところだ。
reactやってたけど全然分からへんかった。

もう、生まれてきてごめんなさいって言いたいくらいには、打ちひしがれた気がする。

参考書籍

こいつをかなり参考にさせてもらった。
ベースは、ほぼコイツから真似た。

実戦形式が多いので、真似させてもらった。
あと、サイト見渡すと、electron-prebuild使ってるのが多すぎて、最新バージョン使えないのはなんで?って凄く迷ってた。
コイツは、素でelectron使ってたから、重宝した。

参考サイト

Electron+Aceを使って50行ぐらいで作る構文ハイライト付きJavaScriptエディタ - Qiita

テキストエディターを作ってElectronの基礎を学ぼう! HTML5でPCアプリ開発入門 - ICS MEDIA

Reactコンポーネント内でjavascript製エディタaceを使う - Qiita

GitHub - securingsincity/react-ace: React Ace Component

[ Electron + React ] 5分で作るMarkdown Editor - Qiita

JavaScriptで書かれたコードエディタの「Ace」 一言多いプログラマーの独り言

できるだけ適当に語りき: ACE editor で ライブビュー可能な markdownエディタ を語りき

ACEエディターを使ってみる | KIIDAX

ブラウザ埋込み型のJavascriptエディタ「ACE」を実装してみた。 - Qiita

Electronでエディタを作る ~まずはACEを導入~ | 非IT企業に勤める中年サラリーマンのIT日記

Electron: エディタライブラリACEの基本機能まとめ | 非IT企業に勤める中年サラリーマンのIT日記

react-aceのexample実行 - 活きのいいコード目指すお

AceエディタをElectronに組み込む - SIS Lab