まりま

個人的備忘録 MyReferenceManual

VisualStudioCode+Evernote+MarkDownで無料高機能メモ環境

はじめに

 私は普段、Evernoteでメモを纏めています。ふとしたアプリ開発のアイデアなど、とりとめのないことを適当に書き殴るのにEvernoteほど最適なサービスは無いと考えています。しかしプレーンテキストそのままではやはり醜い...ということでMarkDownを使ってメモを見やすくしようと思い、Marxicoを導入しました。非常に使いやすく、これは素晴らしいアプリだなーと感じましたが、使用してから、このアプリが無料で使えるのは10日間限定だと知り落胆しました。素晴らしいアプリには是非お金を払うべきなんでしょうが、何分貧乏学生故にお金がないので...ということで、エディタに普段使ってるVisualStudioCode(以下VSCode)を使用し、MarkDownで楽しく見やすくサクサクメモが取れ、すぐさまEvernoteにアップロード出来る、そんな環境を整えていこうと思います。

環境

-OS - Windows8.1 x64 - エディタ - VSCode 1.5.2 - Evernote 6.2.4.3244 - Node.js 6.6.0 x64

手順

  1. 適当な場所にEvernoteフォルダを作り、さらにEvernoteフォルダ内にVSCodeを使用してMarkDownを編集するワークスペースフォルダと実際にEvernoteにアップロードするファイルを配置するフォルダを作成します。名前は後でわかりやすいように、前者は保存予定のノートブック名+VSWorkSpace,後者は保存予定のノートブック名と名付けるのが良いでしょう。説明の都合上、以下では前者をWorkSpace,後者をSyncSpaceとして説明します。
  2. npmを使い、gulpとgulp-markdownをインストールします
    npm install -g gulp gulp-markdown path
  3. npm modulesへのパスを通します。環境変数NODE_PATHを作り、ユーザーフォルダ以下にある、npmフォルダを探し、その中にあるnode_modulesフォルダのパスを値とします。
  4. 先程作成したWorkSpaceをVSCodeで開き、適当なMarkDownファイルを書きます。
  5. WorkSpace内にgulpfile.jsを作成し、以下の内容を入力し保存します。

     var gulp = require('gulp');
     var markdown = require('gulp-markdown');
     var path = require('path');
    
     gulp.task('markdown', function() {
         return gulp.src(path.basename(fileName))//更新のあったMarkDownファイルのみ    
             .pipe(markdown())
             .pipe(gulp.dest(function(f) {
                 return '../SyncSpaceのフォルダ名/';
                 //WorkSpaceとは別に用意したSyncSpaceに出力する事で、
                 //MarkDownファイル等余分なファイルを転送してしまう事を防ぐ。
             }));
     });
    
     gulp.task('default', function() {
         var watcher = gulp.watch('**/*.md', ['markdown']);
          watcher.on('change', function(evt) {
           fileName = evt.path;
       });
     });
    
  6. .vscodeディレクトリにあるtasks.jsonに以下を記述

     {
         "version": "0.1.0",
         "command": "gulp",
         "isShellCommand": true,
         "tasks": [
             {
                 "taskName": "default",
                 "isBuildCommand": true,
                 "showOutput": "always",
                 "isWatching": true
             }
         ]
     }
    
  7. 後はCtrl+Shift+Bを入力してビルドタスクを実行した後、MarkDownファイルを編集してCtrl+Sを押して保存した時、正しくビルドタスクが走り、SyncSpaceに目的のhtmlフォルダができていれば成功です。

  8. Evernote公式クライアントのツールバーからツール→インポートフォルダを選択
  9. 追加ボタンをクリックして、SyncSpaceを指定、任意のノートブックを設定してOKを押す(念のためソースは保持しておくことをおすすめします)
  10. これで先程作成したhtmlがEvernoteにアップロードされます。 以上で手順は終了です。お疲れ様でした。

終わりに

 ググってみると、VSCodeでMarkDownファイルからhtmlを生成する前例があったり、Evernoteにはフォルダをノートブックにアップロードする機能があるという事を知ったりで、これらの機能を組み合わせるだけで結構簡単に行けると思ったんですよね...実際には前者はgulpfileで定義されている動作がそのままだと全てのMarkDownを変換するので、毎回複数のMarkDownがアップロードされたり、Evernoteも特定ファイルを除外してアップロードする機能がなかったりとで、結構苦戦しました。特にgulpfileについては今まで一切触ったことのない技術だったので、変更のあった特定のMarkDownファイルだけからhtmlを生成するという目的にあった動作をさせるのがなかなか大変でした。ともかく、VSCodeを使って楽に見やすいメモを生成出来る環境づくりはこれで成功しました。VSCodeの軽快さも相まって、メモ取りがかなり捗りそうです。課題としては、guilfile内にパスをべた書きするのがなんだか気持ち悪いとかありますが、それ以上に更新する度に新しいファイルとして、既存のものを上書きせずに追加されるのがとても気持ち悪い...ポジティブに見れば過去のバージョンが残って良いのでは?とか思いますけど、やはり同名ファイルでノートブックが埋め尽くされるのは不便極まりない...やはり、お金があれば使いやすくてそういう問題のないMarxico使うべきなんだろうなぁ...この際、Marxicoをオマージュした拡張機能を作ってみるのも良いかもしれない...
追記:
Evernoteと連携するから悪いんだ。DropBoxと連携すればEvernoteと同じようにどこからでも見られるし…ただ、やはりEvernoteをつかいたさが…Dropboxで快適にメモを共有する方向からのアプローチを検討しますか…

参考

code.visualstudio.com

tasogare66.blogspot.jp

stackoverflow.com

help.evernote.com