Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vue.jsでesa風Markdownエディタを作成してみた

minase
January 19, 2019

 Vue.jsでesa風Markdownエディタを作成してみた

@[toc](index)

## 自己紹介

- 氏名     水無瀨 忠正(ミナセ タダマサ)
- 年齢     27歳
- 出身地    兵庫県 神戸市
- Vue.jsの経験   業務で使い始めて4ヶ月程
- 所属組織   株式会社 神戸デジタル・ラボ

![logo.jpg](https://firebasestorage.googleapis.com/v0/b/vue-markdown-5dbad.appspot.com/o/images%2F-LW1_akmYRlZsPt18FyP%2Flogo.jpg?alt=media&token=02640c0c-e15f-4d4e-ba30-af1ab959cb0a)

## 本日お話すること
Vue.jsでesa.io風のMarkdownエディタを
作成してみての感想や躓いたところについて

## esa.ioについて

esa社が提供する「情報を育てる」
という視点で作られた、
自律的なチームのための情報共有サービス

Markdownエディタや、スライド機能等
文章共有に必要な豊富な機能を備えている
![esalogo.png](https://firebasestorage.googleapis.com/v0/b/vue-markdown-5dbad.appspot.com/o/images%2F-LW1_akmYRlZsPt18FyP%2Fesa-logo.png?alt=media&token=990f1060-5a96-47ff-93b9-6b84e5fe70d5)

## 作成動機
esa.ioを社内で利用していて、便利だなぁと思う

有料なので個人利用では無料で使いたい..:s

似たようなツールはあるけど、
せっかくVueに慣れてきたので
腕試し的に開発してみよう!

## デモ

実際に触ってみる

## 主に使用した技術要素

- Vue.js
- FIrebase
- Hosting
- Authentication
- Realtime Database
- Storage
![図1.png](https://firebasestorage.googleapis.com/v0/b/vue-markdown-5dbad.appspot.com/o/images%2F-LW1_akmYRlZsPt18FyP%2F%E5%9B%B31.png?alt=media&token=94397dc9-e02f-4bb3-882b-468ce6c11837)

## 使用したライブラリ

- vue-moment(日付変換等)
- mavon-editor(markdownエディタ)
- vue-katex(数式表示)
- reveal.js(スライド表示)
- vuex(状態管理)
- vue-router(ルーティング)
- vuetify(デザインフレームワーク)

## 感想

Vue.jsの良い部分を改めて実感

- 双方向データバインディングと、
ディレクティブが直観的でわかりやすい
- Vue CLIでSPAの土台をすぐ作れるので、
開発がスタートしやすい
- Vuetifyで簡単にモダンなUIが作れる

## 苦労したところ

- サードパーティ製ライブラリとの連携
- デバッグ

## 今後追加したい機能

- カテゴリー機能
- 下書き機能
- コメント機能
- 通知機能(SlackやTeams等)

----

**ご清聴ありがとうございました**

minase

January 19, 2019
Tweet

More Decks by minase

Other Decks in Programming

Transcript

  1. View Slide











  2. View Slide






  3. View Slide


  4. View Slide

  5. View Slide

  6. View Slide

  7. View Slide

  8. View Slide







  9. View Slide








  10. View Slide




  11. View Slide



  12. View Slide





  13. View Slide

  14. View Slide