noteの記事をMarkdownで書く方法

弁護士ドットコムではnoteにてブログを運営しているのですが、主にエンジニアの方から「Markdownで書けないんですか?」という質問をいただく事があります。

記事を公開する前には簡単な社内レビューをしているのですが、レビューを受けて記事を修正する際、Gitなどでバージョン管理をしたくなるのがエンジニアの習性です。記事をMarkdownなどで書いて、ローカルファイルとして保存しておければ、履歴管理は簡単にできるようになります。

しかし残念ながら、2019年8月現在では、Markdownで書くとか、Markdownからインポートするといったインターフェイスは用意されていません (たぶん)。

しかしそれは、Markdownで書けないということを意味しません。要は、Markdownで書いたり編集したりした内容を、簡単にnoteに反映できればいいのです。その方法の一つをここでご紹介しましょう。

noteの記事保存の仕組みを調べる

noteで記事を下書き保存する際、通信内容を監視すると、以下のようなURLに対するPOSTアクセスが確認できます。

https://note.mu/api/v1/text_notes/draft_save?id=xxxxxxx

POSTのリクエストボディを見ると、JSONが送られていることがわかります。 そのJSONには、記事のタイトルと説明文を表すと思われるname, descriptionというパラメータ、そしてbodyというパラメータがあります。 このbodyの中身を見ると、以下のような文字列が格納されています。

<p name="yTP0V">2019年8月5日、弁護士ドットコムの会場提供で<a href="https://bengo4.connpass.com/event/136265/" rel="nofollow">タピオカLT（初LT歓迎）</a>というイベントを開催しました。</p>
……

これは記事本文のHTMLそのものです。

p要素に謎のname属性がついたりしていますが、開発者ツールで確認すると、現在の編集画面のHTMLにも全く同じ属性がついている事がわかります。つまり、現在編集中の本文のHTMLを、そのまま文字列にして送っているのではないかと予想できます。

そこで試しに、下書き中の本文を、(noteのインターフェイスを使用せずに)開発者ツールを用いて書き換え、「下書き保存」ボタンを押してみると、書き換えた内容がPOSTされることがわかります。また、その内容は問題なく保存されました。

つまり、下書き画面のHTMLを何らかの方法で好きなように書き換え、その状態で「下書き保存」を押せば、それがそのまま保存できるというわけです。

以上でもうおおよその話は終わっているのですが、もう少し細かいところを説明しておきましょう。

MarkdownからHTMLを作る

ここまでで、noteの編集画面のHTMLを書き換えて保存すると反映されるという事がわかりました。 つまり、記事のHTMLを用意し、編集画面にそのHTMLを反映できれば良いわけです。

さて、Markdownで書きたいという話でしたが、Markdownは簡単にHTMLに変換する事ができます。 私は pandoc というコマンドラインツールをよく使っています。たとえば以下のようなコマンドで変換できます。

pandoc noteの記事をMarkdownで書く方法.md -o temp.html

これで temp.html にHTMLが書き出されます。 あとは、そのHTMLを開いてコピーし、noteの編集画面に貼るだけです。

noteに貼る

記事の投稿画面に入ったら、記事の見出しを普通に入力してください。

そして記事の本文を貼ります。 さて、どこに貼るのかですが、編集画面のHTMLを探すと以下のようなdivがあるはずです。

<div class="body-wrapper editable medium-editor-element" data-placeholder="ノート本文" id="note-body" ng-bind-html="$ctrl.noteModel.note.body" contenteditable="true" spellcheck="true" data-medium-editor-element="true" role="textbox" aria-multiline="true" data-medium-editor-editor-index="1" medium-editor-index="xxxx" data-medium-focused="true">

要は div#note-body を探してください。このdivは残して、中身を全て置き換えます。 あとは下書きを保存するだけです。

画像を追加する

画像はnoteのインターフェイスからアップロードしないとダメだと思います。 テキストを反映して保存した後に、手動で追加しましょう。

画像追加後は代替テキストを指定する

noteのインターフェイスで画像を追加すると、ファイル名がaltに入ることがあります。 必ず入るわけではなく、ファイル名によっては「画像1」のようなaltになることもあります。 これは不適切なので、画像を追加したら必ず画像のalt属性を書き換えましょう。

なお、alt属性の値を空にした場合、空の状態で保存できますが、次に編集画面を開いた際には「画像1」のようなaltに置き換えられてしまいます。

注意点

ということで簡単なのですが、注意点がいくつかあります。

消されるマークアップがある

まず、保存すると消されてしまうマークアップが結構あります。 たとえばscript要素などは書けません (私が試した範囲では書けなそうでした)。 また、属性は書けません。書いてもエラーにはなりませんが、すべて削除されます。classもalignもtitleも消えます。

以前はimgのaltも無視されていましたが、最近、imgのaltに空でない値が入っていると維持されるようになりました。 これは非常にありがたい変更です。

見出しレベル

noteの編集画面のUIでテキストを見出しにすると、h3になります。記事タイトルはh1で、h2は存在せずにいきなりh3になります (こういうところはいかにもnoteらしいです。もちろん悪い意味でです)。

DOM操作でh4などの見出しを入れると、保存後にp要素に変更されてしまいます。

h2見出しは維持されます。 では、h2とh3を使って見出し構造を作れば良いのでは……と思うかもしれません。 しかし困ったことに、noteの目次機能ではh3以外の見出しは無視されてしまいます。 目次を使わなくてもよければ、h2とh3を使うのが良いかもしれません。

スタイルがおかしくなるもの

消されないけれどもスタイルがおかしくなるマークアップがいくつかあります。 

ul要素を入れると、普通に入りますし保存できますが、スタイル上、リストマーカーが消えてしまいます (以前はリストマーカーは残っていたと思いますが、今は消えるようです)。

code要素もスタイルが怪しく、黒背景に黒文字になって読めなくなったり、文中のcodeがdisplay:blockになったりするようです。 noteの編集画面で、怪しくなった部分を選択して「code」を押す、という操作を何度か繰り返すと読めるようになります。

他にも怪しい要素はあるかもしれません。 

まとめ

noteの編集画面を強引に編集するという方法のご紹介でした。

とはいえ基本的に、公式が動作保証している方法ではないので、いろいろうまくいかないところはあるでしょう。また、noteの仕様が変わって突然使えなくなる可能性もありますので、その点はご承知おきいただければと思います。

当初は社内のバージョン管理の仕組みに乗せたいと思って調査をはじめたのですが、結局、全体で導入できるほど確実な方法でもありませんので、私が趣味の範囲で実践しているだけのものになっています。

とはいえ、下書き編集のDOMを操作するといろいろなことができるというのは、さまざまな応用が利きそうです。たとえば、画像のaltを編集するブラウザ拡張を作るであるとか、そういったことはできると思います。夢が広がりますね。

追記

などと書いていたら、すでにブラウザ拡張が登場していたようです。夢が広がりましたね。