見出し画像

Markdownを活用したnoteの書き方（非エンジニア向け、COPILOT対応）

て　し

Markdownを活用してnoteを書くための注意点とテクニックを非エンジニア向けにレクチャーいたします。AIを利用した効率化も提案いたします。


Markdownとは

構造化された文書を記述するためのテキスト形式です。メモ帳などのアプリで開ける平文（Plain text）で書かれています。
htmlやpdfに出力することできれいに整形された文書として表現されます。

ソフトウェア開発の分野を越えて、note.com, notion, evernote, wordpress, slack, teamsなどのサービスやアプリケーションで採用されています。また、ChatGPTやCOPILOTとのやりとりにもMarkdownは有用です。

メリット

  • 「段落を立てる」「文字を太くする」などの操作を素早く行える

  • SEO対策に強い文書（= Googleなどで検索されやすい文書）を作成できる

デメリット 

  • 記法を覚える必要がある

Markdownの記法

Markdownを使ってみる

Markdownの一般的な記法は、Wikipediaに最も一般的な内容が端的にまとめてあり、これから覚えるのが有効です。

note.com で使う

note.com で使用できる記法は、Markdownショートカット としてnote.comにまとめてあります。

投稿画面で実際に入力してみましょう。

半角入力で`##` のように#を２回入力しスペースを１回入力してください。この時点で段落入力に変更されます。

つづいて、「Markdownとは」と入力してください。入力した文字列が段落タイトルとして設定されます。
半角入力で`>`を入力しスペースを１回入力してください。引用入力に変更されます。

つづいて、「吾輩は猫である。名前はまだない。」と入力してください。入力した文字列が引用表示に設定されます。

一般的なMarkdownでできることのうち、下記はnote.comでの制限事項になります。

  • 文書タイトルはタイトル入力から設定してください。#＜文書タイトル＞は使用することができません。

  • `<行コード>`、表形式を表示するテーブル記法が使用できません。(2024/2現在)

  • 画像埋め込みは使用できません。アップロード時点で画像名がハッシュ化されるため、今後の実装も期待できません。

  • 区切り--- は４文字以上の入力では認識されません。３文字で入力してください。

Markdownショートカットに明記されていませんが、下記記法を利用することができます。

  • [google](goole.com) のようなリンク記法でリンクを作成できます。「埋め込み」やURL直接入力の場合はOGPが設定されるため、これを回避する手段として利用できます。

  • ```コード入力記法``` を利用する場合、```の後にプログラミング言語を指定できます。この方法でmermaidを指定することで、チャートやグラフを作成できます。出力結果は「プレビュー」で確認できます。

Markdownを活用するテクニック

Visual Studio Codeで使う

Markdownを覚えてくると、note.comのショートカット機能は冗長に感じてきます。テキスト入力を逐次でプレビューできるほうが自然です。Visual Studio Code のような高機能テキストエディタを利用することで、より素早い文書作成が行えるようになります。

  1. Visual Studio Code を起動したら、新規ファイルを開きます。

  2.  [Ctrl + P] → [>] → [Lang] と入力したあと、`Change Language Mode` を選択し、Markdownに変更してください。

  3. Markdownを入力後、[Ctrl + K] → [V] と入力してください。プレビュー画面が横に展開されます。

ショートカットキーで説明しましたが、クリック操作でプレビューすることもできます。

ChatGPTやCOPILOTに入出力する

記法を覚えきれていない場合、作成した文書をChatGPTやCOPILOTに送信してMarkdown形式に出力しなおしてもらうことで、適切なMarkdownに変換してくれます。
ただし、階層の深い構造は扱えないようです。

COPILOTで実際に変換してみましょう。

  1. 新しいトピックを開始し会話スタイルを「より厳密に」にする

  2. プロンプト入力する

次の文章をMarkdownで出力してください。ただし、note.comで利用できる記法のみを使用してください。

1
玉ねぎはみじん切りにする。耐熱容器に入れて、サラダ油(玉ねぎ用)を加え、600Wで1分加熱し、冷ます。

2
ボウルに牛乳、パン粉を入れてしみこませる。

3
合いびき肉、玉ねぎ、塩、こしょう、ナツメグを加えて粘りがでるまで混ぜる。

ポイント
下味にナツメグを入れることでお肉の臭みを軽減する効果があります。

4
2等分し、空気を抜きながら小判形に成形する(たね)。

ポイント
表面を滑らかにしましょう。

  1. (2)の出力結果をコピーし、プレビューする

下記のMarkdownをプレビューしてください

```
# おいしいハンバーグの作り方

1. 玉ねぎはみじん切りにする。耐熱容器に入れて、サラダ油(玉ねぎ用)を加え、600Wで1分加熱し、冷ます。

2. ボウルに牛乳、パン粉を入れてしみこませる。

3. 合いびき肉、玉ねぎ、塩、こしょう、ナツメグを加えて粘りがでるまで混ぜる。

**ポイント**
下味にナツメグを入れることでお肉の臭みを軽減する効果があります。

4. 2等分し、空気を抜きながら小判形に成形する(たね)。

**ポイント**
表面を滑らかにしましょう。
```

AIが順序書きの記法を正しく修正してくれたほか、太文字にすることを提案してくれました。また、プレビューも実行してくれたように、COPILOTはMarkdownを解釈することもできます。
ただし、文書タイトルはnote.comでは利用できないため、このあたりはAIの精度改善が望まれるところです。

チャートを描画する

```mermaid
pie title 成分
    "水": 50
    "砂糖": 30
    "塩": 5
    "その他": 15
```

テキストでチャートを表現するためにmermaid という記法があります。一般的にMarkdownでは、mermaidを埋め込むことでチャート描画できることができます。
mermaidが扱うものはフローチャートやER図のように情報科学分野で利用されるものが大半ですが、下記のように普遍的に利用できるものもあります。

  • ガントチャート

  • マインドマップ

  • タイムライン

  • グラフ (パイ、ライン、ヒストグラム、スキャター)

  • サンキー

note.comではリアルタイムでプレビューを確認することができません。
そのため、visual studio codeを利用するか、ライブエディタ を利用するのが正解です。

COPILOTを利用すると、適切な記法に変換したり足りない情報を補完したりすることができます。実際に利用してみましょう。

  1. 新しいトピックを開始し会話スタイルを「より厳密に」にする

  2. プロンプト入力する

下記のデータをmermaidのpie chartに変換して出力してください

* 水: 50%
* 砂糖: 30%
* 塩: 5%

残りは「その他」として出力してください。

  1. 出力結果を https://mermaid.live にコピペして確認する

pie title 成分
    "水": 50
    "砂糖": 30
    "塩": 5
    "その他": 15

(2) の出力結果を読むと、「その他」を引き算で算出してくれたほか、タイトルを自動的に作成しくれたことがわかります。
※Mermaidのプレビューはcopilotではまだ対応できていないようです。

note.comに貼り付ける場合は注意が必要です。引用入力に変更してから、「 ```mermaid 」 と入力してください。この動作はファイル保存したMarkdownファイルをそのまま貼りつけしただけでは実現できないため、都度操作する必要があります。

Pandocでファイル変換する

Pandoc は様々な文書フォーマットを相互変換するコマンドラインでツールです。Office文書、PDF、htmlのほか、情報技術における専門的な形式にも対応しています。
つまり、MarkdownをもとにPowerPoint資料を作成することができるのです。

pandoc presentation0201.md -o presentation0201.pptx

note.com からエクスポートできる形式は現在、wxr形式(wordpressのファイル形式)のみです（2024.2）。
これはpandocで扱っていないため、対応が待たれるところです。もしくは、なんらかのプログラムを作成する必要性があります。

Asciidocとは

Asciidocはインデントや注書きなどMarkdownでは表現しきれない表現をサポートした、Markdownの上位に位置する記法です。互換性は低く、機能豊富な一方、覚えることも多くなります。Asciidocが扱えようになると、マニュアル作成や電子出版も可能になってきます。

Markdownを習得しましょう

これまで見てきたように、Markdownはそれなりに暗記する必要があり、習うより慣れろというものです。
しかし、段落構成が高速に行えること、チャート出力ができることなど、メリットが多いです。また、使える記法を記憶しておくことにより、構造化された文書としての表現力が上がります。

チートシートをブックマークしたり、デスクに紙メモを貼ったりを貼って、普段の文書をMarkdownで記述してみましょう。家事タスク一覧、買い物メモ、旅行日程なんでもMarkdownで書いていくと、すぐに習得できますよ。

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