きっかけ
業務でテキストメモは残すけど、あまりにも散在しすぎるので、タグ検索できるようなメモ帳が欲しくなったから作り始めた。
Github
GitHub - IkarashiToshio/markdeck
現状
なんとかMarkdownのリアルタイムプレビューが出来るレベルまで持ってきた。
ものすごい時間がかかった気がする。
aceがとても良さそうなライブラリだったので、それを使うのに苦労した。
プレビューは、marked使ってる。
一番苦戦してたのは、electronと周辺環境揃えること。
あと、reactに結構苦戦した。
環境周り、全然知らなかったんだなってよく分かりましたわ。。。
babel, webpackが全然分からなくて苦戦してた。
自分の現場の環境は、誰かが考えて作ってるから、楽できているんですね。。。
とりあえず、最終目標は、タグ検索機能を実装するまで。
今はそれの下準備までできたところかな?
わかったこと
Node.jsのこと、まだ全然知らなかったんだな。。。
パスをどうやって通すかで四苦八苦してた。
あと、知識が足りなすぎる。
フロントエンドエンジニアの知り合いが欲しいところだ。
reactやってたけど全然分からへんかった。
もう、生まれてきてごめんなさいって言いたいくらいには、打ちひしがれた気がする。
参考書籍
Electronではじめるアプリ開発 ~JavaScript/HTML/CSSでデスクトップアプリを作ろう
- 作者: 野口将人,倉見洋輔
- 出版社/メーカー: 技術評論社
- 発売日: 2017/03/28
- メディア: 大型本
- この商品を含むブログ (1件) を見る
こいつをかなり参考にさせてもらった。
ベースは、ほぼコイツから真似た。
実戦形式が多いので、真似させてもらった。
あと、サイト見渡すと、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エディタ を語りき
ブラウザ埋込み型のJavascriptエディタ「ACE」を実装してみた。 - Qiita
Electronでエディタを作る ~まずはACEを導入~ | 非IT企業に勤める中年サラリーマンのIT日記
Electron: エディタライブラリACEの基本機能まとめ | 非IT企業に勤める中年サラリーマンのIT日記