メディア表現 VI 3. Markdown記法

メディア表現 VI TOP に戻る

本日の内容

【第３回】文書を記述するMarkdown記法について、及びその応用について学修する。情報を扱う上で基本となるテキストデータの取り扱いについてより実践的な手法について学修する。

来週、ひょっとしたらWebデザイナーとして働いている先輩を特別講師として呼び、Webデザインの現状についてお話ししていただく予定です。

MarkupとMarkdown

HTMLはHyperText Markup Languageの意味でしたね。

Markup

マークアップとは、文書を構成する文章等に対して、その論理的構成を明示し、どんな文書要素であるかを（その範囲を含めて）マーク（指定）したテキストファイルです。

ただし、HTMLでは開始タグ・終了タグを入力する必要があるので、多少めんどくさい面もあります。

Markdown

Markdownもマークアップ言語の一つではあるのですが、なるべく軽量に表現できるようにしたものです。

手軽に文章構造を明示できること
簡単で、覚えやすいこと
読み書きに特別なアプリを必要としないこと
それでいて、対応アプリを使えば快適に読み書きできること

が特徴として挙げられます。

「書きやすくて読みやすいプレーンテキストとして記述した文書を、妥当なXHTML（もしくはHTML）文書へと変換できるフォーマット」として、ジョン・グルーバー（英語版）により作成された。アーロン・スワーツも大きな貢献をしている。Markdownの記法の多くは、電子メールにおいてプレーンテキストを装飾する際の慣習から着想を得ている。(https://ja.wikipedia.org/wiki/Markdown)

実は、このHPもマークダウンにて記述されています。そのおかげで昨年度のHTMLで記述するより、楽に記述ができ、内容に専念することができます。

メモ等を取るときにも、非常に便利ですので、ぜひ覚えてみましょう。

Markdownの書き方

仕様としてはここにまとまっています。

CommonMark Spec

サービスによって一部拡張が行われていることがあります。一番有名なのがGitHub Flavored Markdownで、

GitHub Flavored Markdown Spec

で、緑の部分が異なっています。

いや、これ全部見れないし、という人「Markdown チートシート」でググりましょう。

Markdown記法チートシート

もう少し見やすいページ

【超入門】Markdown記法の使い方（サンプル付き）

ファイル名は「.md」という拡張子を付けます。

映像で見てみましょう.

Markdown超入門

VSCodeにてMarkdownを扱うには？

拡張機能から

Markdown All in One
Markdown PDF

をインストールしましょう。

今日の作業フォルダを作成して、test.mdというファイルを作成しましょう。

右上のアイコンの「プレビューを横に表示」をクリックしましょう。

そして、Markdownを書いてみましょう。

# 初めてのマークダウン
---
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6

## 改行
連続した行は、改行されません。
ね、されないでしょ？

でも、行末に半角スペース2つつけると  
改行されますね。

## 箇条書き・番号付きリスト
- J1順位(2022/9/29現在)
  1. 横浜FM
  2. 川崎F
  3. 広島
  4. セレッソ
  5. 鹿島
  6. レイソル
  7. FC東京
  8. サガン

## 強調
- **強調したい文字**

## リンク
- [Google](https://www.google.co.jp)

## 引用
> Markdown（マークダウン）は、文書を記述するための軽量マークアップ言語のひとつである。本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。しかし、現在ではHTMLのほかパワーポイント形式やLATEX形式のファイルへ変換するソフトウェア（コンバータ）も開発されている。各コンバータの開発者によって多様な拡張が施されるため、各種の方言が存在する。([Wikipedia](https://ja.wikipedia.org/wiki/Markdown))

## 水平線

-を３つです。

---

## 画像
![マークダウンロゴ](https://upload.wikimedia.org/wikipedia/commons/4/48/Markdown-mark.svg)

表について

HTMLでもそうですが、表の作成はテキストエディタだとExcelに絶対負けます。

すると、便利なサービスを作成してくれる人が現れます。

Markdown表テーブル作成ツール

ちょっと触って、以下のようなものを作ってみましょう。

調査地	平均気温	最高気温	最低気温
福岡	15.5	20.6	8.8
大阪	14.7	19.5	8.8
東京	15.6	18.3	9.4
仙台	12.8	16.3	5.3
札幌	10.3	14.7	3.6

Excelからコピペして変換するツールもあります。

Markdown表変換ツール

目次をつける

見出しは#の個数で設定できます。ですから、そこを見れば目次の作成自動できそうですね。というわけで、目次を一番上に付けてみましょう。

コマンド+Shift+Pをして、コマンドパレットを開きましょう。メニューの表示 - コマンドパレットでもOKです。あれ、オプション+Xでも出るみたいですね。

tocと入力して、

Markdown All in One: 目次(TOC)の作成

を選びましょう。

保存するたびに目次をアップデートしてくれます。

PDFに書き出してみよう

同じくコマンドパレットを開いて

pdfと入力して、

Markdown PDF:Export(pdf)

を選択してください。すると、PDFが作成されます。

他にもhtml,png,jpg等に書き出すこともできます。

TeX

ちょっと休憩して、TeXという言語について紹介します。

TeX は，ドナルド・クヌース (Donald E. Knuth) が開発し，広く有志による拡張などが続けられている組版処理システムである。 TeXは以下のようなメリットがある[3]。

オープンソースソフトである。

出力結果がWindows, Macといった機器によらない。

自動処理が多い。 -数式の仕上がりに定評がある（cf.「数式の表示例」） (https://ja.wikipedia.org/wiki/TeX)

1977年からあり、古くから文書を作成するためのマークアップ言語として使われてきました。

実際にはLaTeXと呼ばれるバージョンをよく使います。

[改訂第7版]LaTeX2ε美文書作成入門

理工系の分野を中心に論文執筆の標準となっています。昨年まではスライドや資料を全部これで作っていました。

Web上で利用できるサービスもあります。

ブラウザでTeX文章を作成出来るCloud LaTeXの使い方

Markdownのおかげでかなり使う頻度は減りましたが、正式な文書を作成したくなるとまだLaTexを使いたくなります。

自分にとって初めてのマークアップ言語がLaTeXだったので、やはり使い慣れているとはおもいます.

スライド作りたい…

スライド作成というと一般的には

PowerPoint
Keynote(Macのみ)

ということになりますが、個人的に好きではありません。

理由として

マウス操作が必須になってしまう
効率悪い

ということが挙げられます。

テキストエディタだけであれば、ひたすら内容に特化することができます。

そのため、昨年度まではスライド作成をtexで作っていましたが…

マークダウンで作れないか探してみると、ありました！

reveal.jsが非常に魅力的なのですが、教材作成にはシンプルなのでいいかな、ということでmarpを利用しています。

marpの使い方

VSCodeの拡張機能を追加しましょう。

Marp for VSCode

新しくslidetest.mdを作成しましょう

冒頭に

---
marp: true
---

と記述しましょう。これでmarpが有効になります。

実際に自分が利用しているのはもう少しカスタマイズして

---
marp: true
theme: default
size: 16:9
paginate: true
headingDivider: 2
header: 科目名
footer: ""
---

となります。

あとは、マークダウンにて記述するだけです。スライドの区切りには

---

を使います。

同じくプレビュー画面でスライドを閲覧できます。

PDFを作成するにはコマンドパレットで

Marp: Export Slide Deck…

とするだけです。

課題

内容はなんでもいいです。Marpを使ってPDFを作成しましょう。内容浮かばない人は、「Markdownについて」というスライドを作成してみましょう。

参考

【VS Code + Marp】Markdownから爆速・自由自在なデザインで、プレゼンスライドを作る