簡単なメモ帳に、markdown形式、ダウンロード、削除のモーダルの機能を追加してみた

カテゴリーから探す

年別から見る

2018/07/11

簡単なメモ帳に、markdown形式、ダウンロード、削除のモーダルの機能を追加してみた

前回の記事で、
フロントエンドのフレームワーク「materialize」を使って簡単なメモ帳を作ってみた
という形でメモ帳を作ったのですが、
機能を追加してみたくなりタイトル通りですが、
・markdown形式で記入
・txtファイルをダウンロード
・削除する際に確認画面を表示する
という機能を追加しました。

SITE

markdown形式で記入

markdown形式に対応するには、marked.jsを使用します。

そして、ソースコードの部分をハイライト表示させるために、
highlight.jsも使用します。
スタイルも豊富にあり、好きなものをダウンロードして適用できます。
highlight.js demo

ちなみに今回は、Monokai Sublimeにしました。


<!--css読み込み-->
<link rel="stylesheet" href="css/monokai-sublime.css" >

<!--js読み込み-->
<script src="js/marked.js"></script>
<script src="js/highlight.pack.js"></script>

まずは以下を記述しておき、


hljs.initHighlightingOnLoad();

1	hljs.initHighlightingOnLoad();

vueのcomputed部分に、


compiledMarkdown: function (memo) {
      var renderer = new marked.Renderer;
      renderer.code = function(code, language) {
        return '<pre'+'><code class="hljs language-'+ language +'">' + hljs.highlightAuto(code).value + '</code></pre>';
      };
      var view = marked(this.memos[this.selected]["body"], { 
        sanitize: true,
        breaks : true,
        highlight: function(code, lang) {
          return hljs.highlightAuto(code, [lang]).value;
        },
        renderer: renderer
      });
      return view;
       
    }

compiledMarkdown: function (memo) {

var renderer = new marked.Renderer;

renderer.code = function(code, language) {

return '<pre'+'><code class="hljs language-'+ language +'">' + hljs.highlightAuto(code).value + '</code></pre>';

};

var view = marked(this.memos[this.selected]["body"], {

sanitize: true,

breaks : true,

highlight: function(code, lang) {

return hljs.highlightAuto(code, [lang]).value;

renderer: renderer

});

return view;

}

を追加しました。

リアルタイムで反映しているため、highlightさせるのが手こずりましたが上述しているような形になりました。

html側は、


<div class="contents" :class="viewMode">
    <div class="contents__edit">
        <textarea v-model="memos[selected].body"></textarea>
    </div>
    <div class="contents__view">
        <article v-html="compiledMarkdown"></article>
    </div>
</div>

</div>

</div>

こんな感じです。

切り替えるボタンについては、Materializeのフロートボタンをまたもや使用し、vueではclassを付け替えるだけにし(上記htmlの「:class=”viewMode”」部分)、それに合わせてcssを変更しています。

ボタン部分のhtmlは以下になります。


<div class="fixed-action-btn fixed-action-btn02" style="right: 100px;">
        <a class="btn-floating btn-large green">
            <i class="large material-icons">{{viewMode}}</i>
        </a>
        <ul>
            <li><a class="btn-floating grey" @click="changeMode('edit')"><i class="material-icons">edit</i></a></li>
            <li><a class="btn-floating grey" @click="changeMode('flip')"><i class="material-icons">flip</i></a></li>
            <li><a class="btn-floating grey" @click="changeMode('remove_red_eye')"><i class="material-icons">remove_red_eye</i></a></li>
        </ul>
    </div>

<i class="large material-icons">{{viewMode}}</i>

</a>

<ul>

<li><a class="btn-floating grey" @click="changeMode('remove_red_eye')"><i class="material-icons">remove_red_eye</i></a></li>

</ul>

</div>

jsでは、
vueのdata部分に、


viewMode : "flip"

1	viewMode : "flip"

を追加し、

vueのmethods部分に、


changeMode: function (mode){
      this.viewMode = mode;
},

changeMode: function (mode){

this.viewMode = mode;

txtファイルでダウンロード

今まであったフロートボタンの削除ボタンを取り、ダウンロードボタンに変更しました。

このダウンロードは、今見ているメモ帳をtxtファイルでダウンロードします。
ダウンロード機能は、html5からdownload属性があるのでそれを利用しつつ、IE系は対応していないのでそれようにjsも追加しました。

html


<li><a class="btn-floating orange darken-2" @click="dataDownload" id="download" href="#" download="test.txt"><i class="material-icons">file_download</i></a></li>

1	<li><a class="btn-floating orange darken-2" @click="dataDownload" id="download" href="#" download="test.txt"><i class="material-icons">file_download</i></a></li>

vueのmethodsに追加、


dataDownload: function (){
      handleDownload(this.memos[this.selected]);
}

dataDownload: function (){

handleDownload(this.memos[this.selected]);

}

ダウンロード自体のjs部分はvueとは関係なく関数を作り、vue側からその関数を呼び出す形にしています。


function handleDownload(memo) {
  var title = memo.title;
  var content = memo.body;
  var blob = new Blob([ content ], { "type" : "text/plain" });

  if (window.navigator.msSaveBlob) { 
      window.navigator.msSaveBlob(blob, title + ".txt"); 
      window.navigator.msSaveOrOpenBlob(blob, title + ".txt"); 
  } else {
      document.getElementById("download").download = title + ".txt";
      document.getElementById("download").href = window.URL.createObjectURL(blob);
  }
}

function handleDownload(memo) {

var title = memo.title;

var content = memo.body;

var blob = new Blob([ content ], { "type" : "text/plain" });

if (window.navigator.msSaveBlob) {

window.navigator.msSaveBlob(blob, title + ".txt");

window.navigator.msSaveOrOpenBlob(blob, title + ".txt");

} else {

document.getElementById("download").download = title + ".txt";

document.getElementById("download").href = window.URL.createObjectURL(blob);

}

削除する際に確認画面を表示する

今まで削除ボタンを押すとすぐ消えてしまう状態でした。
使っていて消すはずじゃなかったメモを消してしまったので追加しました。

こちらはMaterializeのmodalを使用しています。

今までの削除ボタンでmodalを呼び出すように変更し、
モーダルの決定ボタンで今見ているメモ帳を削除するようにしました。

html


<a class="btn-floating btn-small halfway-fab waves-effect waves-light grey modal-trigger" href="#modal1"><i class="material-icons">delete</i></a>

1	<a class="btn-floating btn-small halfway-fab waves-effect waves-light grey modal-trigger" href="#modal1"><i class="material-icons">delete</i></a>


    <div id="modal1" class="modal">
        <div class="modal-content">
            <h4>削除</h4>
            <p>本当に削除しますか？</p>
        </div>
        <div class="modal-footer">
            <a href="#!" class="modal-close waves-effect waves-red btn-flat">キャンセル</a>
            <a href="#!" class="modal-close waves-effect waves-green btn-flat" @click="deleteMemo(selected)">削除</a>
        </div>
    </div>

<p>本当に削除しますか？</p>

</div>

<a href="#!" class="modal-close waves-effect waves-red btn-flat">キャンセル</a>

</div>


document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('.modal');
  var options = "";
  var instances = M.Modal.init(elems, options);
});