markdownで書いた表を速攻でnote.comに取り込む

Koji Doi｜AIエンジニア｜webライター｜バイオ系ライター・アナリスト

2024年6月28日 20:16

note.comには作表機能のサポートがなく、特に技術系の記事を書く際に不便です。この問題を解決するための方法として、markdown tableをPNGファイルに迅速に変換する手順を紹介します。

必要なものはブラウザとHTMLファイル編集可能なエディタソフトのみ。
手順は超絶簡単。

ぜひ参考にしてください。

はじめに

note.comの大きな弱点

note.comはよくできたシステムですが、一つ大きな不満があります。作表機能がサポートされていないことです。

特に、技術系の情報提供をする記事を書きたいときに、これはちょっと困ります。やむを得ず、noteに記事を書くときは表の部分を画像化して張り付けることになります。

同じような趣旨のサービスを提供しているzennやqiitaでは普通にmarkdown形式の表を埋め込むことが出来るので、この点だけは残念ながらnoteは見劣りしていると言わざるを得ません。

解決策の提案

しかし、不満を言っていても仕方がありません。表の画像化のプロセスをなんとか簡単に済ませたいと考えた末、markdown tableをHTMLを経由して速攻でpngファイル化する手順を見出したので発表します。

markdownテーブルを画像化する基本的な手順

用意するものはブラウザ（Google Chrome推奨）とHTMLファイル編集可能なエディタソフト（Visual Studio Code推奨）が利用できるパソコンです。

まずは、この記事の後の方に示す「markdownスクリーンショット用HTMLテンプレート」を適当な名前のファイルとして保存してください。

表を作ることになったら、このテンプレートをエディタで開くところから始めて、以下の手順を実行することになります。VScodeをお使いであれば、テンプレートをsnippetとして登録しておいてもいいですね。

テンプレートの`<main id="target" class="shadow l-main-editer js-markdown-editer">`と`</main>`の間に、markdownテキストを書きこむ。
テンプレートを適当な別名HTMLファイルとして保存。
上で保存したHTMLファイルをブラウザで読み込む。
自動的にファイル保存のダイアログが出現するので、保存先ディレクトリ・ファイル名を確認して保存。
HTMLファイル中のmainタグ内の内容がそのままpngファイル化されているので、note.comに張り付けて利用する。

markdownスクリーンショット用HTMLテンプレート

<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="generator" content=
"HTML Tidy for HTML5 for Linux version 5.6.0">
<meta charset="UTF-8">
<title>スクリーンショット</title>
<link rel="stylesheet" type="text/css" href=
"https://unpkg.com/mvp.css">
<style>
    body {
  /* 「BIZ UDPゴシック」をWindowsで指定 */
  font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "BIZ UDPGothic",
    Meiryo,
    sans-serif;
}
    main{
      background-color: #eef;
      width: 1700px;
      height: 1000px;
      margin: 10px;
      padding: 0;
    }
    .shadow {
      font-size: 50px;
      -webkit-text-stroke-width: 1px;
      -webkit-text-stroke-color: white;
    }
    .shadow h1 {
    color: red;
    margin: 5px;
    font-size: 200px;
    line-height: 220px;
    font-weight: bold;
    text-shadow: 10px 10px 0px #fff, -10px -10px 0px #fff, -10px 10px 0px #fff, 10px -10px 0px #fff, 10px 0px 0px #fff, -10px 0px 0px #fff, 0px 10px 0px #fff, 0px -10px 0px #fff;
    text-wrap: nowrap;
    -webkit-text-stroke-width: 6px;
    -webkit-text-stroke-color: black;
    }
    .shadow h2 {
    color: red;
    font-size: 160px;
    line-height: 170px;
    margin: 3px;
    font-weight: bold;
    text-shadow: 2px 2px 0px #fff, -5px -5px 0px #fff, -5px 5px 0px #fff, 5px -5px 0px #fff, 5px 0px 0px #fff, -5px 0px 0px #fff, 0px 5px 0px #fff, 0px -5px 0px #fff;
    -webkit-text-stroke-width: 5px;
    -webkit-text-stroke-color: black;
    }
    .shadow h3 {
    color: red;
    font-size: 90px;
    line-height: 100px;
    margin: 3px;
    font-weight: bold;
    text-shadow: 2px 2px 0px #fff, -2px -2px 0px #fff, -2px 2px 0px #fff, 2px -2px 0px #fff, 2px 0px 0px #fff, -2px 0px 0px #fff, 0px 2px 0px #fff, 0px -2px 0px #fff;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: black;
    }

</style>
</head>
<body>
<main id="target" class="shadow l-main-editer js-markdown-editer">
<!--  ↓↓↓↓↓ ◆◆◆◆◆この下にmarkdownテキストを書き込む◆◆◆◆◆ ↓↓↓↓↓ -->

<!-- ↑↑↑↑↑ ◆◆◆◆◆この直上のブロックが画像として書き出される◆◆◆◆◆ ↑↑↑↑↑ -->
</main>
<pre>
    <code>
      # h1 大見出し
      ## h2 中見出し
      ### h3 小見出し
    地の文。*斜体*。**太字**。
    | 表の第1列   | 表の第2列  | 表の第3列  |
    | ----- | ---- | ---- |
    | 1-1   | 1-2  | 1-3  |
    | 2-1   | 2-2  | 2-3  |
    | 3-1   | 3-2  | 3-3  |
    </code>
  </pre>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/markdown-it/8.2.2/markdown-it.min.js"></script>

<script>

  // マークダウンの基本設定
const markdown_setting = window.markdownit({
  html: true, // htmlタグを有効にする
  breaks: true, // md内の改行を<br>に変換
});

const markdown_editer = $(".js-markdown-editer");

// マークダウンの設定をjs-markdown-editerにHTMLとして反映させる
const markdown_html = markdown_setting.render(getHtml(markdown_editer));
markdown_editer.html(markdown_html);

// 比較演算子（=，<>，<，<=，>，>=）をそのまま置換する
function getHtml(selector) {
  let markdown_text = $(selector).html();
  // let markdown_text = document.querySelectorAll(selector)[1].innerHTML;
  markdown_text = markdown_text.replace(/&lt;/g, "<");
  markdown_text = markdown_text.replace(/&gt;/g, ">");
  markdown_text = markdown_text.replace(/&amp;/g, "&");

  return markdown_text;
}
</script>
<script src="https://unpkg.com/modern-screenshot"></script>
<script>

  modernScreenshot.domToPng(document.querySelector('main')).then(dataUrl => {
    const link = document.createElement('a')
    link.download = 'screenshot.png'
    link.href = dataUrl
    link.click()
  })
</script>
</body>
</html>

このテンプレートには2つのJavaScriptコードが仕込まれています。一つはmarkdownコードをHTMLコードに変換し、もう一つがその部分を画像化しています。どちらのJavaScriptも、ブラウザで当該HTMLファイルを開くと自動的に実行されます。

編集作業の概要

編集作業はHTMLテンプレート中の<main>ブロックの中で進めます。ここにmarkdown形式のテキストを書いていきます。

# h1 大見出し
## h2 中見出し
### h3 小見出し
地の文。*斜体*。**太字**。

| 表の第1列   | 表の第2列  | 表の第3列  |
| ----- | ---- | ---- |
| 1-1   | 1-2  | 1-3  |
| 2-1   | 2-2  | 2-3  |
| 3-1   | 3-2  | 3-3  |

制約条件が一つあります。この場所に別のインラインイメージを埋め込むことはできません。正確には、埋め込むことはできても、それは最終的に画像ファイル上には反映されません。

markdown記法のチートシート（書法早見表）がテンプレートの下の方に書いてあるので、慣れてない方はこれを参照しながら編集を進めてください。

PNGファイルの完成

編集がおわったらファイルをセーブし、ブラウザで読み込みます。

すると、すぐにPNGファイルセーブのためのダイアログが出現するはずです。保存場所とファイル名を確認し、必要なら適切に設定を変更します。

上に示したmarkdownテキスト例をもとに作業を進めると、下のような内容のpngファイルが得られるはずです。

カスタマイズ（設定変更）

このテンプレートでは、包括的なレイアウト設定としてmvp.cssというフリーのノンクラスCSSテンプレートを利用しています。

さらに、見出し文字のスタイル設定をテンプレートのstyleの中で上書き規定しています。今回の主題である表の埋め込みではあまり必要ないでしょうが、今回提案している枠組みをタイトルヘッダー画像の作成にも使うことを考慮しており、そのために設定を追加しています。

また、日本語のゴシック系ユニバーサルデザインフォントを優先的に使う設定としています。

この辺のスタイルが気に入らない人は、テンプレートを適当に変更してください。

通常のHTMLファイル作成においては、閲覧者の環境が多様であることを考慮して、奇抜なフォント設定を避けることが多いでしょう。しかし、本件で作るHTMLファイルは自分のパソコンで表示できさえすればいいのです。毛筆フォントだろうが手書き風フォントだろうが、好きなフォントが利用可能です。どんどん個性的なフォントを自分のパソコンにインストールして（あるいはウェブフォントを活用して）遊んでみましょう！

結論

この方法を使えば、表形式の情報をnote.comの記事内に手軽に挿入できます。note.comでの執筆活動をさらに充実させるために役立てていただければ幸いです。

参考記事

本記事で紹介したテンプレートは、以下の記事内容をベースとして筆者が作成したものです。

基本的なアイディアは以下の二つの記事からいただきました。

スクリーンショットの実現には以下の成果物を利用させていただきました。

クラスレスCSSという素敵なアイディア。

最終的にこのCSSフレームワークを採用しています。

この記事が気に入ったらサポートをしてみませんか？