Markdown(Marp for VS Code)で落合フォーマット

# はじめに

卒業論文が本格化してきて、たくさんの論文を読まなければならなくなってきました。そこで今回は、爆速で論文が読めるようになるとウワサの [落合フォーマット](https://phd-kada.com/ochiai-format/) を便利に実践するための環境を作っていきたいと思います。

## 落合フォーマットとは？

論文を読む際に、

1. どんなもの？
1. 先行研究と比べてどこがすごい？
1. 技術や手法のキモはどこ？
1. どうやって有効だと検証した？
1. 議論はある？
1. 次に読むべき論文は？

というフォーマットに従って問いを埋めていくことで、論文ひとつの内容をA4半分～1枚に爆速で圧縮できるというものです。筑波大学の落合陽一先生の講義で紹介されたものが有名になり、「落合フォーマット」と呼ばれるようになりました。

<iframe src="//www.slideshare.net/slideshow/embed_code/key/2HlTo21lsJ2N18" width="595" height="485" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <a href="//www.slideshare.net/Ochyai/1-ftma15" title="先端技術とメディア表現1 #FTMA15" target="_blank">先端技術とメディア表現1 #FTMA15</a> </strong> from <strong><a href="//www.slideshare.net/Ochyai" target="_blank">Yoichi Ochiai</a></strong> </div>

<br>

上スライドのp.48に落合フォーマットが登場します。 
![slide48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/684531/e9d02394-b68f-8d37-262f-7ecf7c94b2e0.png)


## 目指すもの

```md:readme.md
---
marp: true
theme: my_theme
---
<!-- _class: ochiyai -->

# 論文タイトル
### 論文著者名

<code>

## どんなもの？
こんなもの

## 先行研究と比べてどこがすごい？
あそこがすごい

## 技術や手法のキモはどこ？
キモはここ

## どうやって有効だと検証した？
検証法はこれ

## 議論はある？
ある

## 次に読むべき論文は？
あれかな

</code>
```

をレンダリングして、
![example.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/684531/3f08bf5a-91fb-6ab9-40d9-b24926116db8.png)
というスライドが出来上がる状態を目指します。

# 設定の方法

Marp for VS Code の自作テーマをCSSで書いて反映させることで実現します。

## Visual Studio Codeのインストール

Microsoft公式サイトからVisual Studio Codeのインストーラーをダウンロードして、実行すればOKです。

https://code.visualstudio.com/download

## Marp for VS Code のインストール

[Marp](https://forest.watch.impress.co.jp/docs/review/1422278.html) とは、Markdownファイルをプレゼンテーションの形式に変換することができるエコシステムです。メモ程度に書き溜めたMarkdownファイルを簡単におしゃれなスライドへ変換できるほか、CSSで自作テーマを適用できるなど、自由度の高いものになっています。

https://marp.app/

Visual Studio Codeの拡張機能が公開されており、Markdownファイルの編集からスライドのエクスポートまでが全てVS Code上で完結するため、お手軽に導入することができます。
マーケットプレイスからダウンロード・有効化できます。
![スクリーンショット 2023-10-04 17.06.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/684531/d1a8e657-ffa9-01ed-3f57-3e3de151d051.png)

## 自作テーマの作成と適用

### CSS組版の作成

適当な場所に `my_theme.css` などと名付けたCSSファイルを作成し、以下の内容をコピペします。

:::note info
すでに自分オリジナルの Marp Theme を持っている方は、そこに以下の内容 (主に `section.ochiyai` の内容) を追加すればOKです。
:::

```css:my_theme.css
/* @theme my_theme */
@import "gaia"; /* ベースとなるmarpテーマ (なんでも良い) */

:root {
    --black: rgb(40, 40, 40);
    --white: rgb(255, 255, 255);

    --main-font-size      : 30px;
    --font-weight-normal  : 400;
    --font-weight-bold    : 700;
    --normal-border-radius: 5px;
    font-family           : 'Segoe WPC', 'Segoe UI', system-ui, 'Ubuntu', 'Droid Sans', sans-serif;
}

section {
    background : var(--white);
    color      : var(--black);

    padding    : 60px 40px 10px 40px;
    font-size  : var(--main-font-size);
    font-weight: var(--font-weight-normal);
}

/* 落合フォーマットのスタイル定義 */
section ochiyai {
    columns      : 1;

    background   : var(--white);
    padding      : 60px 40px 10px 40px;

    font-size    : var(--main-font-size);
    font-weight  : var(--font-weight-normal);
}

/* 論文タイトルなど */
section.ochiyai h1 {
    columns      : 1;

    border-bottom: none;

    text-align   : center;
    font-size    : 40px;
    font-weight  : var(--font-weight-bold);
}

/* 論文著者名など (中央揃え) */
section.ochiyai h3 {
    columns      : 1;

    text-align   : center;
    font-size    : var(--main-font-size);
    font-weight  : var(--font-weight-normal);
}

/* 落合フォーマットの本文ボックス (codeを改造) */
section.ochiyai code {
    columns      : 2;
    column-rule  : 2px dashed #ccc;
    column-gap   : 3em;

    background   : var(--white);
    color        : var(--black);
    width        : 100%;
    padding      : 0 auto;
    margin-top   : 20px;

    text-align   : justify;
    line-height  : 2;
    font-family  : 'Segoe WPC', 'Segoe UI', system-ui, 'Ubuntu', 'Droid Sans', sans-serif;
    font-size    : var(--main-font-size);
    font-weight  : var(--font-weight-normal);
}

/* 落合フォーマット の注目ポイント */
section.ochiyai code h2 {
    columns      : 1;

    padding      : 0 auto;
    border       : 2px solid var(--black);
    border-radius: 20px;
    margin       : 0 auto;

    text-align   : center;
    font-size    : 32px;
    font-weight  : var(--font-weight-normal);
}

/* 落合フォーマット の本文 */
section.ochiyai code p {
    margin-top   : 10px;
    margin-bottom: 20px;
}
```

:::note info
ベースとなるテーマとして`gaia`や`uncover`をインポートしている場合、
```css:
:root {
    --white: var(--color-background);
    --black: var(--color-foreground);
}
```
とすると、背景色や文字色がテーマのデフォルト色と同じになります。
:::

CSS組版を保存したら、Visual Studio Code上で `my_theme.css` をMarp Themeとして読みこむ設定をしていきます。

エディタ上で `Command` + `Shift` + `P` (Windows の方は `Ctrl` + `Shift` + `P`) を押し、`Preferences: Open User Settings`を選択します。Settings内の検索で「marp theme」などと検索し、

- **`Markdown> Marp: Themes`**

に先ほど保存した `my_theme.css` のパスを指定して `OK` をクリックします。
![スクリーンショット 2023-10-04 17.32.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/684531/0a2f16ab-f5f3-47d9-2db3-d4265900db6d.png)

設定は以上です。

# 使い方

VSCode上でMarkdownファイル(`.md`)を編集していきます。 ファイルの先頭に以下の内容を記述することで、marp が有効になります。

```md:readme.md
---
marp: true
theme: my_theme
---
```

:::note warn
テーマ名は `my_theme.css` のファイル名ではなく、一行目のコメント部分で規定されています。CSSのファイル名ではなく、コメント部分の `@theme` の直後の文字列を名前として指定する必要があります。

```css:my_theme.css
/* @theme my_theme */
```
:::

ページの先頭 (`---` の直後) に以下の内容を記述することで、`my_theme` 内の `section.ochiyai` が適用されます。

```md:readme.md
<!-- _class: ochiyai -->
```

ここまでを「おまじない」として、これ以降に書き込んだ内容が落合フォーマットの形式でレンダリングされます。

`<code>` ブロックで囲んだところが2段組になり、落合フォーマットの本命の内容となります。`<code>` ブロック内で `h2` は角の丸い四角形で囲まれるようにCSSを書いています。

```md:readme.md
# 論文タイトル
### 論文著者名

<code>

## どんなもの？
こんなもの

## 先行研究と比べてどこがすごい？
あそこがすごい

## 技術や手法のキモはどこ？
キモはここ

## どうやって有効だと検証した？
検証法はこれ

## 議論はある？
ある

## 次に読むべき論文は？
あれかな

</code>
```

この時、エディタ画面の右上に表示されている虫メガネのマークをクリックすると画面が分割されてリアルタイムにプレビューを確認できます。
![スクリーンショット 2023-10-04 17.54.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/684531/1e8ecbaa-4232-3a65-fb4a-2c7a21b09bbd.png)
スライドやPDFとして出力する際は、虫メガネのマークの右隣にあるMarpのマークをクリックして、`Export Slide Deck...` を選択します。PDF、HTML、Power Pointなどの形式が選べますが、いずれも出力後のテキスト編集は不可となっています。

私は自分で注目ポイントを増やしたり、そのままセミナーのプレゼン資料に載せたりして使っています。

以上です。ありがとうございました。