作り始めたきっかけ
アウトプットのために、Zennに記事を書こうとした、Zennのマークダウンエディタには、プレビューが同時に見れない、いちいちタブを選択しないといけない。Qiitaでも、いちいち記号(ex:水平線とかQuoteなど)も手入力しないといけない。
そんなときに、夏休みだし自分で使うものぐらい自分で作るかと思って、作ったのがきっかけです
使用した技術
開発環境
npm -v
8.11.0
node -v
v16.16.0
yarn -v
1.22.19
少し紹介
このライブラリは、JSのライブラリをforkして作られたライブラリなので、optionでfork元のoptionが使えるのがとても魅力的です！
モジュールで簡単にできること
- D&Dが簡単に実装できる
- 今回は、Firebaseのstorageを用いて、実装しました！
- ツールバーの編集が簡単
- 自分好みカスタマイズしやすかった
- 文章のオートセーブも簡単に実装できる！
- 裏側はLocalStorageを使っているみたいでした(今回は実装してません)
詰まったところ
- 要件を決めずに開発
- 実装のしていく中で、戻りが発生
- 使用している技術に対応していない(Viteに対応していない)
- 作りたい用件に合わない(D&Dが実装するのが複雑)
- UIが気に入らない
- 使用している技術に対応していない(Viteに対応していない)
- 実装のしていく中で、戻りが発生
こんな感じで、行き当たりばったりで開発していたので、少し時間かかってしまいました。
実際に作った機能
- D&Dで画像を表示する機能
- 自分はかなり使うので、実装できて良かったです
- デフォルトで関数が用意されているので、そちらを用いて、Firebase(storage)にアップロードして、アップロードした画像のURLを取得して、マークダウンにURLを埋め込んでるような実装にしてます！
- UIの変更
- 実はデフォルトのフォントではなく、少し変更したりしてます。色合いとかも自分の見やすいように設定してます。
- ツールバーのショートカットキーも自分の使いやすいように設定してます。これのおかげで、かなりマークダウンを書くことが楽になってます。
今後やっていきたいこと
- D&Dしたときの画像サイズが大きすぎるのを修正したり、ダークモードを対応したり、マークダウンのUIが少し変なところあるところの修正
最後に
夏休みにアウトプットができるものが良かったです。これからもいろんなものを作っていきたいと思ってます！！ご清聴ありがとうございました！！