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

はじめに

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

落合フォーマットとは？

論文を読む際に、

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

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

先端技術とメディア表現1 #FTMA15 from Yoichi Ochiai

上スライドのp.48に落合フォーマットが登場します。

目指すもの

readme.md

---
marp: true
theme: my_theme
---
<!-- _class: ochiyai -->

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

<code>

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

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

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

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

## 議論はある？
ある

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

</code>

をレンダリングして、

というスライドが出来上がる状態を目指します。

設定の方法

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

Visual Studio Codeのインストール

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

Marp for VS Code のインストール

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

Visual Studio Codeの拡張機能が公開されており、Markdownファイルの編集からスライドのエクスポートまでが全てVS Code上で完結するため、お手軽に導入することができます。
マーケットプレイスからダウンロード・有効化できます。

自作テーマの作成と適用

CSS組版の作成

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

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

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;
}

ベースとなるテーマとしてgaiaやuncoverをインポートしている場合、

: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 をクリックします。

設定は以上です。

使い方

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

readme.md

---
marp: true
theme: my_theme
---

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

my_theme.css

/* @theme my_theme */

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

readme.md

<!-- _class: ochiyai -->

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

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

readme.md

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

<code>

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

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

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

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

## 議論はある？
ある

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

</code>

この時、エディタ画面の右上に表示されている虫メガネのマークをクリックすると画面が分割されてリアルタイムにプレビューを確認できます。

スライドやPDFとして出力する際は、虫メガネのマークの右隣にあるMarpのマークをクリックして、Export Slide Deck... を選択します。PDF、HTML、Power Pointなどの形式が選べますが、いずれも出力後のテキスト編集は不可となっています。

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

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