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を編集するブラウザ拡張を作るであるとか、そういったことはできると思います。夢が広がりますね。
追記
などと書いていたら、すでにブラウザ拡張が登場していたようです。夢が広がりましたね。