Neo's Monaco Note … オレオレ Monaco Editor を作ってみた
以前、Neo's Python Note という Python CGI 製のノートアプリを作った。
コチラは CGI としてデプロイし、クエリ文字列によって簡易パスワード認証がかけられる。個人的にはコレを Always Free な OCI サーバに配置して利用してきたのだが、最近エディタ部分に不満が出てきた。
エディタ部分は単純な textarea で実装しているのだが、Markdown を書いたりする時にインデントのスペース記号を可視化したいと思うようになった。VSCode とか CotEditor とか NotePad++ とかで設定できるような、スペース部分が点々「・」で表示されるアレだ。自分は Markdown を書く時に一切プレビューを見ないので、シンタックスハイライトなんかは効かなくても別に構わないのだが、コードブロック内のコードインデントとかも、スペース記号は見えてると分かりやすいよなーなんて思った次第。
最初は VSCode Online (vscode.dev) で良いんじゃないかと思ったのだが、コチラはブラウザオンリーで動作する代わりに、ファイルの永続化ができない。一応 GitHub 連携すればコミット・Push することは出来るが、ちょっとメンドい。
- 複数の端末で Markdown を執筆したい
- 各端末に VSCode をインストールして記事は Git 同期、というのは面倒臭い
- Dropbox や Google Drive でファイル同期するのもログインが必要だし、ローカルファイルの同期にはソフトのインストールが必要になるのがダルい
- Evernote・Notion・Google Keep・Google Docs のようなブラウザで動作するオンラインエディタ機能つき同期サービスは、スペース記号の可視化が出来るモノが全然ない
- さらにエディタがさるサービスは、変に WYSIWYG だったりしてプレーンテキストのコピペで Markdown を扱えない場合もあってダルい
…そんな不満が溜まってきたので、業を煮やして (？) VSCode のエディタ部分を担う Monaco Editor を自分でカスタマイズして、オレオレ Monaco Editor をでっち上げ、CGI を組み合わせて自分のサーバにテキストファイルを永続化することにした。そうして出来上がったのが Neo's Monaco Note である。
Monaco Editor は AMD 形式でも配信されており、コレを利用すれば Vanilla JS でも作り込めるので、Webpack も SPA もイジりたくない自分は AMD 形式を使うことにした。見事なモノで、TypeScript などの言語を指定すればシンタックスハイライトや型不正エラーなどがちゃんと表示される。
柔軟にカスタマイズはできるものの、公式ページには Playground と TypeDoc で出力されたドキュメンテーションしかなくて、やりたい機能の実装方法を探すのが大変だった。今回は以下あたりを参考にした。
- Monaco Editor Playground
- テーマを自作する公式デモ
- monaco-themes/Monokai.json at master · brijeshb42/monaco-themes
- Monokai テーマのベースはコレを利用し、イタリック体などを使用しないように調整した
- テーマの細かな部分は、拙作の VSCode Theme non-italic-monokai に近付けている
- IStandaloneEditorConstructionOptions | Monaco Editor API
- Monaco Editor の細かい仕様はこの不親切な API リファレンスを読み解くしかない
- Monaco Editor 使い方事始め - Qiita
F1で開くコマンドパレットを日本語化する方法
- javascript - How to change display language on monaco editor - Stack Overflow
- 動的に表示言語を切り替える API
あとは前作の Neo's Python Note を作った時のノウハウやコードも組み合わせて、テキストファイルとしての永続化と簡易パスワード認証ができるようにした。
- Ruby CGI を使った簡易パスワード認証
- Node.js CGI を使ったテキストファイルの読み込み・保存を行う API
個人の Apache サーバにデプロイして、永続化もちゃんと出来るようになったのでよしよし～。
…と思ったのだけど、せっかく AMD・Vanilla JS で実装したエディタなので、データ永続化を諦めたら GitHub Pages のようなクライアントサイドオンリーで動かせるじゃないか？と思って、データ保存を LocalStorage で行うバージョンも作った。以下は GitHub Pages 上で公開している LocalStorage 版。データはブラウザの LocalStorage に保存され、サーバサイドへの送信等はしていないので、どなたでも安心してご利用ください。
個人的に必要な機能だけに絞って作ったので、エディタ部分が広く取れて満足。
難点といえば iOS 対応か。Monaco Editor は iOS Safari + Simeji キーボードの組み合わせだとカーソル移動ができなかったりするし、ソフトウェアキーボードの表示に合わせてウェブページの高さを調整できなかったりするので、iPhone では閲覧専用で扱うしかないかなー。まぁ iPhone で Markdown をゴリゴリ執筆する機会はほぼないので、気にしない。ｗ
今回初めて Monaco Editor をカスタマイズしたけど、最初からコマンドパレットが実装されていたりしてデフォルト状態から VSCode ちっくに使えるし、実装はちょっとダルいけど何とか Vanilla JS でもココまで作り込めちゃうぐらい、柔軟な作りになっていて素晴らしい。コレまでも StackBlitz や VSCode Online があったので実現可能なのは分かっていたけど、AMD 形式で扱えたりするのもホントにシンプルに作れてメッチャ良かった。
CGI 部分が Ruby だったり Node.js だったりしてスゲーチグハグなんだけど、CGI ってどんな言語を使っても同じように作れるし動いてくれるから、とにかく早く機能を実現するために過去記事からのコピペで済ませる方式ででっち上げた。段々几帳面さが失われていく。ｗ
