sammyppr

View on GitHub

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

メディア表現 VI TOP に戻る

目次

本日の内容

MarkupとMarkdown

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

Markup

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

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

情報デザインとっていない人向け

HTMLでは論理的な構成を以下のような形で記載していきます。

<!DOCTYPE html>
<html>
  <head>
    <title>タイトル</title>
  </head>
  <body>
    <h1>見出し1</h1>
    <p>段落が入ります。段落が入ります。段落が入ります。段落が入ります。</p>
    <h2>見出し2：リスト</h2>
    <ul>
      <li>リスト項目</li>
      <li>リスト項目</li>
      <li>リスト項目</li>
    </ul>
    <h2>リンク</h2>
    <a href="https://www.google.co.jp">Google</a>
  </body>
</html>

文章の内容をロジックで記述しているのですが、ちょっと長くなったりしてますね。

Markdown

マークダウンは、デジタル文書を作るためのHTMLを、テキスト上で簡略化して表記できるという特徴を持つフォーマットです。

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

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

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

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

Markdownの書き方

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

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

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

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

もう少し見やすいページ

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

映像で見てみましょう.

VSCodeにてMarkdownを扱うには？

拡張機能から

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

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

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

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

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

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

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

## 箇条書き・番号付きリスト
- J1順位(2024/9/18現在)
  1. 町田ゼルビア
  2. サンフレッチェ広島
  3. ヴィッセル神戸
  4. 鹿島アントラーズ
  5. ガンバ大阪
  6. 東京ヴェルディ
  7. 横浜Fマリノス
  8. FC東京

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

## 打ち消し線
- ~~打ち消したい文字~~

## リンク
- [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に絶対負けます。

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

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

調査地 平均気温 最高気温 最低気温
福岡 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からコピペして変換するツールもあります。

コードについて

コード等の記載

には以下のように「`」を3つで挟みます。 「`」はShift+「@」です。

```
ここにコードを記載

```

目次をつける

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

コマンド+Shift+Pをして、コマンドパレットを開きましょう。 メニューの表示 - コマンドパレットでもOKです。

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と呼ばれるバージョンをよく使います。

理工系の分野を中心に論文執筆の標準となっています。 2021まではスライドや資料を全部これで作っていました。 情報デザイン応用演習のスライド以外のPDFは現在もTeXで作ってますし、大学内の事務的文書もTeXで作ることが多いです。

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

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

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

数式においては、LaTeXの方法に影響された入力方法がWord, HP等でも採用されています。

スライド作りたい…

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

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

理由として

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

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

そのため、2021まではスライド作成を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について」という内容で利用方法などをまとめてスライドを作成してみましょう。

manabaから提出してください。

参考