noteに表を埋め込む (Gist)

今回は、noteにgistを使って表を埋め込む方法を紹介します。

gistを埋め込んだ際に表が記事中で空白になることがありますが、リロードすれば読み込まれます。

動画

クオリティは酷いですが、全体的な操作感くらいは分かるかなと...いつかリメイクします。

リメイクしました!

noteに表機能は無い

noteには2024/01/08現在、表やテーブル機能がありません。
ですので、gistというgitの機能「テキストファイル公開サイト(?)」を使用します。

流れ

1. gistでマークダウンを使って表を作る

2. noteに埋め込む

gistの使い方

githubにログインして以下のサイトにアクセスします。
または、githubサイトの自分のアイコンからYour gistを選択します。

2024/11/04: 先日「ねむいさん」さん記事にて紹介いただきました。ありがとうございます☺️。以下のとのことなのでちょっと説明を増強しました。

GitHubアカウント 2024/11/04追記

アカウントを持っていない場合は無料で作成できるので作ってしまいましょう。右上の「sign up」からメールの登録などをします。詳細は以下参考。(自分が登録した時とUI変わってますね…)

テンプレート作りました。 2025/03/29

ログイン後に以下のurlをクリックするとテンプレートがあるのでそれを使用することも可能です。

https://gist.github.com/Uliboooo/6ad1d73e4612b3553d5c7f8f102693d1

ログインした状態で👆に入るとこのようになると思うので、右上のForkというボタンを押してください。(フォークが嫌ならコピペから新規作成でも)

こうすることで、私のテンプレートを元にした新しいgistがあなたのアカウントに作成されます。左に自分のアカウント名が出ていることを確認し、右側のEditを押します。

これで準備ができたので次の「新規Gist 2024/11/04追記」は飛ばしてokです。

新規Gist 2024/11/04追記 (テンプレート使用時は不要)

ログインした後にgithub.comにアクセスすると以下の画面になると思うで、右上のアイコンを押してメニューを出します。もしくは以下のリンク(Discover gists)をクリックしていくこともできます。

'24/1/8:下記のリンクを差し替えました。

そしたら、右上の+押して以下の画面を出します。

新規作成できました。

そしたら「gist_type_list.md」のように、ファイル名の後に.mdを付けます。.mdとはマークダウンのファイルを表す拡張子です。

.mdが認識されると「Edit file」や「Preview changes」のようなタブがファイル名の横に表示されます。
これで準備はできましたので、ここに表の情報を書き込んでいきます。

マークダウンとは

だそうです。自分もメモをマークダウンで書くことも多いです。wordなどではボタンのクリックなどで太字などを設定しますが、マークダウンでは記号で囲んだりすることで、通常のテキストのみで装飾や見出しなどを設定できます。
以下に軽く例を。

**アスタリスクx2で囲まれた文字は太字になる。**
👆の文はwordで太字に設定したのと同じような感じになる。👈の文は太字ではない
## 見出し2

👇でマークダウンの話もしてますのでよろしければ。

記法を軽く 2024/1/8追記

表に関係するmarkdownの記法を紹介します。

マークダウンで表を書く

マークダウンでは見出しだけでなく表を表す記法もあるため、今回はそれを使用します。

上の表でほとんどネタバレしてますが、基本の話とエスケープという処理だけ紹介します。

マークダウンでは「 | 」 を挟むことで、エクセルで言うセルの枠を作成します。
また、見出しとして2行目に「---」と入れます。こうすることで、1列目の内容が行に対する見出しになります。

この「---」の形によってその行(縦方向)の文字の寄せ方向を変更できます。

• :---: は中央よせ

• :---  は左寄せ(デフォルト)

• ---:  は右寄せ

また、エスケープと言う処理があります。(名前は覚えなくてok)
これは記号をそのまま表示できる機能です。マークダウンでは*や|などの記号が上記のような表を作るために使われているため、このような文字を表そうとしてもマークダウンが命令と勘違いして非表示にしてしまいます。

これを回避するため記号の手前に\(バックスラッシュ)を置くことでその次の記号は命令ではなくただの文字だとマークダウンに言い聞かせます。

上記の記法表のソースコードはエスケープの嵐です。(マークダウンでマークダウンの紹介をしているので…)下記参考。

# markdown_Table.mdのソースコード

| 記法 | 記号(ソースコード) |
| :---: | :---: |
| 枠 | \| 内容 \| |
| 見出しのやつ | --- |
| 左寄せ(デフォ) | :--- |
| 右寄せ | ---: |
| 中央寄せ | :---: |
| **太字** | \*\*太字\*\* |
| *斜体* | \*斜体\* |
| 注釈[^1] | 注釈[^1] |

[^1]: ←は半角スペースが必要。あと絶対最後に記述される

表の公開

表が作れたら、右下の緑のcreate~(テンプレを使用した人はUpdate secret gistかも)を押して完成させます。
次に、赤丸のEmbedを押して、Shareを選びます。Embedだとhtmlなどへの埋め込みに使用できます。

Shareのurlをコピー。

noteに埋め込む

先程のurlをnoteの埋め込み機能で埋め込みます。
そうすると、下のようになります。

ちなみに、後から修正する場合は右上のEditで編集します。保存されればnoteの記事も更新されます。

ちなみに、C#シリーズでの表はこれ使ってます。

まとめ

今回はnoteで表を作成する方法でした。
githubのアカウントは無料で作成出来るため、結構手軽かなと思いました。

2024/01/08: 結構多くの方の参考になっているようなので、全体的に整理&情報追加しました。参考になれば幸いです。

2024/11/05: ちょっと説明不足な点を増補しました。もっと具体的な操作を知りたい方は以下の動画や「ねむいさん」さんの記事(動画リンクの下にリンクあります。)をご参照ください。「ねむいさん」ありがとうございます😊。

2025/03/29: テンプレートを追加しました。

参考

参考にさせていただきました。