Translate

ラベル .markdown の投稿を表示しています。 すべての投稿を表示
ラベル .markdown の投稿を表示しています。 すべての投稿を表示
Post Date:2023年3月26日 

Markdown(Typora)でMindmapを描く!

Typoraで描いたマインドマップ

Typoraは優れたMarkdownエディターで、Mac、Windows、Linuxで使えます。有料アプリですが、$14.99(約2,000円)を払う価値のあるMarkdownエディターです。

Mermaidは、Markdown形式のテキストで図を描くことができるオープンソースのJavaScriptツールですが、Typoraは、Mermaidの機能を組み込んでいるので、Mermaidのコードを書くと図形描画ができます。

Mermaidでは、シンプルなテキストを使って複雑なフローチャート、シーケンス図、ガントチャート、クラス図、そしてマインドマップなどを作成することができます。

マインドマップ自体が、階層構造になっているので、Mermaidでの構文もとても簡単です。


Mermaidを使ってマインドマップを作成する

```mermaidでMermaidのコードが書けるようになります。

```mermaid

最初の行にmindmapと書いて、次の行からがマインドマップの構文になります。

mindmap

マインドマップの各ノードを描く

マインドマップは中心のトピックから放射状にアイデアが階層構造で配置されている図です。Mermaid でマインドマップを描くときも、階層構造で記載するので。マインドマップをイメージしながら書くことができます。

下記はrootから3つのメインブランチ(a1, a2, a3)があるマインドマップの例です。階層構造で示せば下記のようになります。

  • Root
    • a1
    • a2
    • a3

mermaid でも同じようにRootから1階層下げてa1, b1, c1 と記載します。

mindmap
	root
		a1
		b1
		c1

下記のように描画されます。

Typoraでマインドマップ

次にa1の下にサブブランチを2つ、a2_1とa2_2を追加します。a1から1階層下げてa2_1, a2_2を記載します。

mindmap
	root
		a1
			a2_1
			a2_2
		b1
		c1

下記のように描画されます。

Typoraでマインドマップ

上記のマインドマップに、a2_1の下にサブブランチ、a3を追加します。

mindmap
	root
		a1
			a2_1
				a3
			a2_2
		b1
		c1

下記のように描写されますが、root --> a1 --> a2_1 --> a3 と階層が下がるとブランチが段々と細くなっていきます。

Typoraでマインドマップ

各ノードの形を変える

各ノードに使える形状には、

  • cloud(雲吹き出し)
    ) ( で括る
  • bang(爆弾吹き出し)
    )) (( で括る
  • circle(円形)
    (( ))で括る
  • round square(角丸四角形)
    ( )で括る
  • square(四角形 )
    [ ] で括る
  • default(デフォルト)

の6種類がありますが、デフォルトは何も指定しない場合です。<br/>は改行です。

mindmap
	)cloud<br/>雲吹き出し(
	))bang<br>星吹き出し((
	((Circle<br>円形))
	(rounded square<br>角丸四角形)
	[square<br>四角形]
	default shap<br>デフォルト

描画すると下記のようになります。squareとdefaulとの違いはよく見るとデフォルトは下に線が入っています。

Typoraでマインドマップ(Shape)

アイコンを使う

ノードの中にアイコンを記載することもできます。Font Awesomrのアイコンが使用でき、class名を指定します。

Font Awesomr のアイコン

Font Awesomrのclass名は、Font Awesome4.7フォント一覧で調べられます。

アイコンを記載したノードの下に同じ階層で

::icon(fa class名)

という形式で指定します。

a1に音符、b1に封筒、c1にユーザのアイコンをそれぞれ指定する場合には下記のように記載します。

mindmap
	)Root(
		music
		::icon(fa fa-music)
		envelope
		::icon(fa fa-envelope-o)
		user
		::icon(fa fa-user)

こんな感じです。Font Awesomrのclass名で記載するので少々面倒ですが、アイコンを使うとマインドマップらしくなります。

Typoraでマインドマップ(Icon)

色の指定と配置はできない

ブランチの色を変更することはできません。またブランチの配置を変更することもできません。しかし、マインドマップ描画ソフトを使わなくてもMarkdownでマインドマップが簡単に描けるのは便利です。


円グラフを書く(おまけ)

最後に Mermaid を使った円グラフの描き方です。こちらも簡単に描けます。

```mermaid コードを記載します。

  • 1行目:pie円グラフの宣言
  • 2行目:titletitleの後が円グラフの表題
  • 3行目以降:円グラフの要素
    ”グラフの項目名”:比率

下記がサンプルコードです。

pie
	title pie chart
	"50%" : 50
	"30%" : 30
	"20%" : 20

下記が、Mermaidで描いた円グラフになります。

Mermaid で描いた円グラフ

bar chart(棒グラフ)もMermaidで描けるともっと便利になるのですが、、、。

Post Date:2020年5月27日 

LaTex で数式を書く最も簡単な方法

Google Colaboratory で Markdown

Markdown(マークダウン)で Latex を使って数式を書く方法について「象と散歩: TyporaでMarkdownを始めよう!」で紹介しましたが、利用頻度の低い LaTex の書式なんて、直ぐに記憶の彼方に、、、。

しかし、今は便利な世の中。オンラインで、ポチポチと式を選んでいくと簡単に LaTex を作成することができます。

アカウントを登録しなくて利用できるサービスには下記の2つがあります。

一長一短ありますが、操作性の観点では HostMath の方が使いやすいです。


LaTexの基本は押さえておく

オンラインサービスを使う前に、LaTexの基本は理解しておきましょう。

基本形は、

\(コマンド){値}

とシンプルです。これだけ理解していれば大丈夫です。

例えば、ルートを使う場合には、

\sqrt{数値 or 式}

と、記載すれば、下記のように表示されます。

\[ \sqrt{数値 \, or \, 式} \]

HostMathでLaTexを作成

では、さっそくHostMath を使って数式を作っていきます。例題は分散です。

\[ \sigma^2 = \frac{1}{n} \sum_{i=1}^n(x_{i} - \bar{x})^2 \]


σの二乗

"GK&Fun (Greek And Function)” からσを選択します。エディター画面に \sigma と表示されて、下のビューアー画面には、σ が表示されます。

HostMathでLaTex

べき乗は、”^” を使います。エディター画面で \sigma の後に ^2= まで入力します。

HostMathでLaTex

式の左側が完成です。


分数の入力

続いて1/nを入力するために、”Math” から ”ab/cd” を選択します。

エディター画面には \frac{ab}{cd} が追加され、プレビュー画面には、ab/cd が追加されています。

HostMathでLaTex

ab が分子、cd が分母なので、ab を 1 に cd を n に書き換えます。

HostMathでLaTex

Σの入力

続いては、Σの部分になります。”Math” から ”Σ” を選択すると、\sum_a^b が追加されました。

HostMathでLaTex

しかし、この形式は、これだけ理解すれば大丈夫といった基本形と異なります。値がひとつなので{}が省略されていますが、正しくは下記となります。

\sum_{下限}^{上限}

エディター画面で、下限を {i=1}、上限を {n} に書き換えます。

※{}で括らないで、a の部分を i=1 にしてしまうと違う解釈となってしまいます。

HostMathでLaTex

(x-x̄)^2

エディター画面で (x-x)^2 を追加します。

HostMathでLaTex

エディター画面で、2二つ目の x を選択して、”Logic” から ā を選択すると \bar{a} となります。

HostMathでLaTex

\bar{a} を \bar{x} とすれば、完成です。

HostMathでLaTex

完成した式(LaTex)をMarkdownで利用する

今回はTyporaではなく、Google Colaboratory で利用します。

Google Colaboratory については、「象と散歩: 1分でPythonの学習を始める!」で紹介していますが、Googleが提供する Python 実行環境です。テキストを Markdown で記載できます。

Google Colaboratory で LaTex を使う場合には、数式を $$ で囲みます。

$$ \sigma^2=\frac{1}{n}\sum_{i=1}^n(x_{i}-\bar{x})^2 $$

Google Colaboratory

ブログで LaTex を使って式を書く

ブログでLaTexで記載した数式を表示するためには 「MathJax」 を利用します。

CDNサービスが提供されているので下記のコードを </head> の前に追加します。

<script async='async' src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML'/

LaTex で記載した数式を使う場合には、下記のように “\[“ で囲みます。

\[
\sigma^2 = \frac{1}{n} \sum_{i=1}^n(x_{i} - \bar{x})^2
\]

下記のように表示されます。

\[ \sigma^2 = \frac{1}{n} \sum_{i=1}^n(x_{i} - \bar{x})^2 \]
Post Date:2019年8月26日 

Markdown(Typora)でガントチャート

Markdownで作成したガントチャート

Typora で Markdown シリーズの第4弾は、Mermaid を使ってのガントチャートの作成です。MarkdownエディタのTyopraは、mermaid でガントチャートを記述することができます。

Markdownで描くガントチャートには、

  • メリット
    • シンプルなガントチャート
    • 簡単にテキストベースでガントチャートが作成できる
    • テキストなので差分管理も簡単
  • デメリット
    • マイルストーンが設定できない
    • 順序を示す矢印が使用できない
    • 複雑なガントチャートには向かない

という特徴があります。


Typora でガントチャート

Typora でガントチャートを作成するために、```mermaid でEnterすると mermaid のコードが記述できるようになるので、最初の行に gantt と書きます。

mermaidの最初の行にganttと記述

タイトル行

title に続けてタイトルを記述します。

ガントチャートのタイトル

日付フォーマット

  • dateFormat
  • axisFormat

dateFormat で gantt の中で使用する日付のフォーマットを定義します。ネットで検索した多くの例は、dateFormat YYYY-MM-DD となっていますが、これは、2019-08-25 のように日付を記述するという意味です。

フォーマット 記述形式
YYYY 年4桁
YY 年2桁
MM 月2桁
DD 日2桁

上記以外の記号文字はそのまま表示されます。つまり、dateFormat MM/DD とすれば、月と日をスラッシュ区切りで記述するという意味になります。

下記の例は、dateFormat で年4桁で記述すると宣言した場合の記載方法です。

```mermaid
gantt
dateFormat YYYY
axisFormat %Y/%m
task1: 2019, 2020
task2: 2020, 2021
task3: 2021, 2022
```

日付の形式を指定する

次に axisFormat ですが、これは、軸の日付フォーマットになります。上記の例でもは、年4桁/月 となります。その他に下記のフォーマットが使えます。

フォーマット 記述形式
%Y yyyy: 年4桁
%y yy: 年2桁
%m mm: 月2桁(01-12)
%d dd: 日2桁(01-31)

上記表以外の記号文字は、そのまま表示されるので %m/%d とすれば、mm/dd の形式で表示されます。


タスクの期間の記述方法

各タスクの期間を記述する方法にはいくつかあります。

  • 開始日付と終了日付+1日で記載
    • e.g. 08/01,08/08
  • 開始日付と日数で記載
    • e.g. 08/01,7d
  • 開始日と週数で記載
    • e.g. 08/01,1w
  • 期間だけを記載(2つ目以降のタスク)
    • e.g. 7d or 1w

下記の例は、何れも1週間の期間となります。

```mermaid
gantt
title 1週間の表記方法
dateFormat MM/DD
axisFormat %m/%d
task1(08/01-08/08): 08/01,08/08
task2(08/08,7d)   : 08/08,7d
task3(1w)         : 1w
```
タスク期間の記入

後続タスクの記述方法

後続タスクは、after を使います。表示上は何ら変わらないので、すべてのタスクを開始日と終了日で記載するのであれば、afterを使う必要はありません。

下記の例では、task1の終了後にtask3が開始されます。

```mermaid
gantt
title 後続タスク
dateFormat MM/DD
axisFormat %m/%d
task1: 08/01,08/08
task2: 08/05,5d
task3: after task1,1w
```

また、タスク名が長い場合などには、エイリアス名を付けることも可能です。下記の例では、task1 を t1 と定義して、8行目で after t1 として利用しています。

```mermaid
gantt
title 後続タスク
dateFormat MM/DD
axisFormat %m/%d
task1: t1, 08/01,08/08
task2: t2, 08/05,5d
task3: t3, after t1,1w
```
後続タスクの記述

タスクのステータスとクリティカルタスク

各タスクは、完了、実行中 と クリティカルタスクを示すことができます。

記述方法 意味
done 完了タスク
active 実施中のタスク
crit クリティカルタスク
crit, done 完了したクリティカルタスク
crit, active 実施中のクリティカルタスク

```mermaid
gantt
title タスクステータスとクリティカルタスク
dateFormat MM/DD
axisFormat %m/%d
task1:       done,   08/08, 1w
task2: crit, done,   08/15, 1w
task3: crit, avtive, 08/22, 1w
task4:               08/29, 1w
task5: crit,         09/05, 1w
```
タスクのステータスとクリティカルタスク

セクション

タスクをセクション毎に分けることができます。下記は、”準備”、”実行”、”確認”と3セクションに分けている例です。

```mermaid
gantt
dateFormat  MM/DD
axisFormat  %m/%d
title ガントチャート

section 準備
終了タスク: done, 07/07, 4w

section 実行
アクティブタスク: active, t1, 08/04, 28d
後続タスク: after t1, 09/29

section 確認
クリティカル: crit, 09/01, 09/15
最終タスク: 09/15, 2w
```
セクション

Typora で Markdown シリーズ

Typora での Markdown の記述方法については、下記のシリーズで紹介しています。





Post Date:2019年8月17日 

Markdown(Typora)でシーケンス図を描く!

手書き風シーケンス図

TyporaでMarkdownを始めよう! | 象と散歩 でTyporaでのMarkdownの書き方、そして、TyporaでMarkdown第2弾として、Markdown(Typora)でフローチャートを描く | 象と散歩 で、flowchart.js を使ったフロチャートの書き方を紹介しましたが、今回は、第3弾、Markdown でのシーケンス図の書き方です。

Typora では、js-sequence-diagramsmermaid を使ってシーケンス図が描けます。


文法サポートでダイアグラムをチェック

フローチャートを描くときにも説明しましたが、最初にTyporaのメニューバーの "ファイル(F) → 設定" で文法サポートのダイアグラムをチェックをします。

Typora文法サポート

これで、Markdownとしてシーケンス図が記述できるようになります。


Markdownでシーケンス図を描く(js-sequence-diragrams)

初めに js-sequence-diagrams を使ってシーケンス図を描写する方法です。Markdownでは、```sequence から ``` の間に記述しますが、Typoraでは、

```seguence

と書いてEnterすると、シーケンスダイアグラムが開きます。

sequenceダイアグラム

ここにコマンドを記載していきます。


js-sequence-diagrams のコマンド一覧

js-sequence-diagrams は、基本的にメッセージしかサポートしていませんので、複合フラグメントなど複雑なシーケンス図は記載できません。

下記がコマンド一覧になります。

コマンド
説明
Title: hogehoge タイトルをhogehogeにする
A->B: message text AからBへの矢印線
A-->B: message text AからBへの破線矢印
A->>B: message text AからBへのオープン矢印線
A-->>B: message text AからBへの破線オープン矢印
participant hoge (as A) ライフライン名 hoge(を A とする)
Note right/left of A: hoge Aの右or左にhogeと記載
Note over A: hoge Aの上にhogeと記載
Note over A,B: hoge AとBの上にhogeと記載

ライフライン名は、コマンドを書いた順番になるので最初に participant で定義するとわかりやすいです。またエイリアス名を付けられるので、コマンドの中ではシンプルにA,B,Cなどが使えます。

では、さっそく シーケンス図を描いてみましょう。

``` sequence
Title: サンプルシーケンス図(js-sequence-diagrams)
participant 処理1 as A
participant 処理2 as B
participant 処理3 as C
A->B: 同期メッセージ
B-->A: 応答メッセージ
B->>C: 非同期メッセージ
C-->A: 応答メッセージ
B->B: 閉じる
```

Markdownで描くシーケンス図 (js-sequence-diagrams編)

下記は、ノートの記載方法ですが、participant でA, Bの順番を定義しておかないと 、最初にBの右側にノートを描くコマンドがあるので、順番が逆転してしまいます。ノートの中を改行するときには、\n を使います。

``` sequence
participant A
participant B
Note right of B: Bの右側に\nノート
Note over A: Aの上にノート
Note left of A: Aの左側に\nノート
Note over A,B: AとBの上にノート
```

Markdownで描くシーケンス図 Notes(js-sequence-diagrams)


Markdownでシーケンス図を描く(js-sequence-diragrams)

js-sequence-diagrams で描いたシーケンス図を memaid で書くと下記のようになります。 ```mermaid で Enter して、エディタを開きます。

先頭行に sequenceDiagram と書くと mermaidシーケンス図が書けます。

mermaid には、非同期メッセージを表すオープン矢印線はありませんが、ライフライン上でイベントの実行範囲を + と - を使って表記できます。

下記の例では、処理2(B)の +Bから-Aまで(処理2が同期メッセージを受けてから処理1に応答メッセージを返すまで)と 処理3(C)の +C から -A まで(処理3が同期メッセージを受けてから処理1に応答メッセージを返すまで)がインベント実行中となります。

``` mermaid
sequenceDiagram
Title: シーケンス図(mermaid)
participant A as 処理1
participant B as 処理2
participant C as 処理3
A->>+B: 同期メッセージ
B-->>-A: 応答メッセージ
B->>+C: 同期メッセージ
C-->>-A: 応答メッセージ
B->>B: 閉じる 
```

Markdownで描くシーケンス図(mermaid編)


sequenceDiagram(mermaid) のコマンド一覧

下記が mermaid でシーケンス図を書くときのコマンド一覧になります。js-sequence-diagramsと大体同じですが、先に記したように mermaid ではオープン矢印はありません。その代わりに 矢印なしの線と破線、があります。participant の使い方も少し異なります。

またアクターの前に + と - 記号を付けることによって、A->>+B から B-->>-A のように 同一ライフライン上の + から - までがイベント実行中の表記となります。

コマンド
説明
Title: hogehoge タイトルをhogehogeにする
A->B: message text AからBへの線(矢印なし)
A-->B: message text AからBへの破線(矢印なし)
A->>B: message text AからBへの矢印線
A-->>B: message text AからBへの破線矢印
A-xB: message text AからBへの矢印 and x(async)
A--xB: message text AからBへの破線矢印 and x(async)
participant A as hoge ライフライン名 hoge を A とする
Note right/left of A: hoge Aの右or左にhogeと記載
Note over A: hoge Aの上にhogeと記載
Note over A,B: hoge AとBの上にhogeと記載

ノートの書き方は、js-sequence-diagrams と同じですが、改行が使えません。

``` mermaid
sequenceDiagram
participant A
participant B
Note right of B: Bの右側に\nノート
Note over A: Aの上にノート
Note left of A: Aの左側に\nノート
Note over A,B: AとBの上にノート
```

Markdownで描くシーケンス図 Notes(mermaid編)


mermaid ではLoop処理が描ける

mermaid では、下記のように記載することでLoop処理も描けます。

loop Loop text
... statements ...
end

``` mermaid
sequenceDiagram
participant A
participant B
Note right of B: Bの右側にノート
Note over A: Aの上にノート
Note left of A: Aの左側にノート
Note over A,B: AとBの上にノート
```

Markdownで描くシーケンス図 Loop処理 (mermaid編)


最後に

Markdown で描くシーケンス図では、複雑なシーケンス図を描くのには少々難ありですが、簡単なシーケンス図を描くのであれば十分な表現力です。

メイン画像に使ったシーケンス図は、WebSequenceDiagramsで作成したものです。コマンドの記載方法は、js-sequence-diagrams とほぼ同じですが、イベントやループなども使えます。また、スタイルを選択して手書き風などにもできます。

URLを指定して、若しくは画像としてExportして、Markdownのドキュメントの中で使うこともできます。


Typora で Markdown シリーズ

Typora での Markdown の記述方法については、下記のシリーズで紹介しています。





Post Date:2019年7月22日 

Markdown(Typora)でフローチャートを描く

flowchart.js で描画した横書きフロー

TyporaでMarkdownを始めよう! | 象と散歩 でTyporaでのMarkdownの書き方を紹介いたしましたが、今回は、TyporaでMarkdown第2弾として、flowchart.js を使ったフロチャートの書き方です。


文法サポートでダイアグラムをチェック

最初にTyporaのメニューバーの "ファイル(F) → 設定" で文法サポートのダイアグラムをチェックをします。

Typora文法サポート

これで、シーケンス図、クラス図、フローチャート、ガントチャートなどを記述することができるようになりますが、今回は、flowchart.js を使ってフローチャートを記述する方法を紹介します。


Markdownでフローチャートを描く

フローチャートは、```flow から ``` の間に記述しますが、Typoraでは、

```flow

と書いて Enterすると、フローチャートダイアグラムが開きますので、こちらに記述していきます。

Typoraでのflowダイアグラム

前半にエイリアス名の定義(エイリアス名==>コマンド: 処理名)を記述します。次に後に定義したエイリアス名を使ってフローを記述していきます。

```flow
# エイリアス名の定義
# フローの記述
```

コマンドの記述方法

エイリアス名で使うコマンド一覧です。利用できるオブジェクトは、処理ボックス、入出力ボックス、サブルーチンボックス、条件分岐などがあります。

コマンド(エイリアス名の定義) 意味
alias_name=>start: TEXT 処理開始
alias_name=>end: TEXT 処理終了
alias_name=>operation: TEXT 処理
alias_name=>iputoutput: TEXT 入出力
alias_name=>subroutine: TEXT サブルーチン
alias_name=>condition: TEXT 条件分岐
alias_name=>COMMAND : TEXT :>URL[https://.....] 処理名のURLリンク
  • alias_name=> の間はスペース不用
  • command:NAME の間にはスペース必要

下表は、フローを記述するコマンド一覧です。フローはすべてのオブジェクトが繋がるように記載します。

コマンド(フローの記述) 意味
alias_name1->alias_name2 name1からname2へ矢印
alias_name(right) 右方向へ矢印
alias_name(left) 左方向へ矢印
alias_name(yes) alias_name1(条件分岐)で"yes"の場合
alias_name(no) alias_name1(条件分岐)で"no"の場合

縦型のフローチャート例

flowchart.js にもサンプルがありますが、実際の記述と図形を見た方がわかりやすいかと思います。

``` flow
st=>start: 開始
op1=>operation: 処理1
op2=>operation: 処理2
cd1=>condition: 条件分岐1
cd2=>condition: 条件分岐2
sb1=>subroutine: サブルーチン
io1=>inputoutput: 出力 
e=>end: 終了

st->cd1
cd1(yes)->op1->sb1->cd2
cd1(no)->sb1->cd2
cd2(yes)->io1
cd2(no)->op2->io1
io1->e
```

下図は、Typoraで描画したフローチャートです。

flowchart.js で描画した縦書きフロー

横書きのフローチャート例

同じフローチャートを横書きにした例です。横方向に矢印を伸ばすために st(right)->cd1 のように (right) を使います。

``` flow
st=>start: 開始
op1=>operation: 処理1
op2=>operation: 処理2
cd1=>condition: 条件分岐1
cd2=>condition: 条件分岐2
sb1=>subroutine: サブルーチン
io1=>inputoutput: 出力 
e=>end: 終了

st(right)->cd1
cd1(yes)->op1(right)->sb1->cd2
cd1(no)->sb1(right)->cd2
cd2(yes)->io1
cd2(no, right)->op2->io1
io1->e
```

Typoraで描画するとこんな感じです。

flowchart.js で描画した横書きフロー

まとめ

draw.ioなどでフローチャートを描いて画像で貼り付けてもいいのですが、Markdownのプレーンテキストの特徴を生かして flowchart.js でフローを描きましょう。同じくTyporaでサポートしているMermaidでもフローチャートを記述できますが、flowchart.jsの方がシンプルなフローで好きです。


Typora で Markdown シリーズ

Typora での Markdown の記述方法については、下記のシリーズで紹介しています。





Post Date:2019年7月21日 

TyporaでMarkdownを始めよう!

最高のMarkdownエディタtypora

Markdownは、文章を記述するための軽量マークアップ言語でネット上で文章を共有するのに便利に使えます。拡張子は.mdですが、中身はテキスト文章なので軽量ですし、特殊なエディタやビューアーがなくても中身を確認できます。

IT技術者でなくてもブログの下書き、メモやレポートなどにも活用できます。


Markdown形式の特徴

  • シンプル

    簡単な記号で書式を指定できるので、HTMLタグよりも100倍簡単です

  • 書式が使える
    Markdownは、表(テーブル)もあり、使える書式も文章を書く上で十分です。また、LaTeX, flow, sequence, mermaid をサポートしているので、数式、フローチャート、シーケンス図、ガントチャートなどもテキスト表記で描けます
  • 互換性がある
    MarkdownからHTML、Word形式、PDFなど他のフォーマットに変換できます

Markdownは、シンプルで書式が使えて、互換性があるだけではありません。何よりも キーボードから手を放さぜずに書けるというのは、文章を書く上でとても大切なことです。


Typoraは最強のMarkdownエディタ

多くのMarkdownエディタが、編集画面と表示画面の二画面で構成されていますが、Typoraは、WYSIWYGWhat You See Is What You Get)なインターフェイスで、入力したものがそのまま描写されます。またフローチャート、シーケンス図、ガントチャートなどもコマンドベースで作成することができます。

更には、後述するGUIでの表(テーブル)機能のサポート、Excelなどからの表のコピペ、画像コピペなど、コマンドで面倒な部分はGUIでサポートしてくれます。Typoraは、Linux/Mac/Windowsで動作し、現在は、β版ということで無料で利用できます。

2021年11月に有料となり¥1,969(税込)です。クレジットカード/デビッドカード、PayPalで購入できます。(2022/1/31追記)

Typoraの特徴
  • 軽量でシンプルなエディタ
  • WYSIWYGなインターフェイス
  • フローチャート、シーケンス図など図が描写できる
  • 面倒なコマンドはGUIでサポート

と、とっても便利なTyporaです。いま時点で最高のMarkdownエディタだと思います。


TyporaでのMarkdown文法

Typoraは、下記の段落と改行以外については、標準のMarkdownに準拠しています。


段落と改行

ネット上で共有されている文章は、読み手の環境に依存するために改行はあまり使われていません。受けとったメールが変なところで改行されていて読みづらいと思ったことは、誰しもが経験したことがあるのではないでしょうか。

文章を読みやすくするためには段落を使います。HTMLでは<p></p>で文章を囲みますが、MarkdownではEnterを押して改行すると次の段落になります。Markdownでも改行はあり、半角スペース2つで改行なのですが、TyporaではSHIFT+ENTERで改行となります。

改行された
文章


見出し

見出しは6段階です。#の数が少ない方が大きな見出しとなり、htmlのh1からh6タグまでに相当しています。

# 見出し(h1)
## 見出し(h2)
### 見出し(h3)
#### 見出し(h4)
##### 見出し(h5)
###### 見出し(h6)

Sample
見出しのサンプル


リスト

リストは -* です。Tabキーでインデントを付けることもできます。

- 順序なし1
 - インデント1
  - インデント2
- 順序なし2

Sample
  • 順序なし1
    • インデント1
      • インデント2
  • 順序なし2

番号を付けたリストも作成できます。番号は、1.からでなくても始められます。Enterで次のリストとなり、文字を入力せずに続けてEnterするとリストは終了します。

1. 順序付き1
 1. インデント1
 2. インデント2
2.順序付き2

Sample
  1. 順序付き1
    1. インデント1
    2. インデント2
  2. 順序付き2

チェックボックスも作ることができます。

- [x] チェック済み
- [ ] 未チェック

Sample
チェック済み
未チェック

文字を強調する

文字を *(アスタリスク)で囲むと斜体になります、アスタリスクふたつで囲むと太字で、三つで囲むとと斜体と太字の組み合わせとなります。

*斜体(イタリック)*
**太字**
***Bold & Italic***

Sample
Shatai(Italic)
太字
Bold & Italic

打消し線

~(チルダ)2つで囲むと打消し線付きの文字となります。

~~打消し線~~

Sample
打消し線

参照リンクは、[タイトル](URL)で記述します。

[象と散歩](https://walking-elephant.blogspot.com)

Sample

画像

画像の差し込みは、参照リンクの記述と似ていますが、先頭に!(エクスクラメーション)を付けます。

![画像タイトル](画像URL)

で指定します。Typoraでは、![画像タイトル](まで入力するとURL指定とフォルダからの画像選択の両方を促す表示となります。WEB上の画像を利用するのであれば ”画像のURLを入力” にURLを指定し、ローカルに保存されている画像を使う場合は、フォルダアイコンをクリックして画像を選択します。

Typoraで画像挿入

もっと簡単に画像をコピー&ペーストすることもできます。画像をコピペするとWindowsであれば、C:\Users\ユーザ名\AppData\Roaming\Typora\typora-user-images\ に画像が保存されます。


引用

引用は > を使います。二重引用の場合は >> です。メールなどの引用符でも使いますから馴染みがあるかと思います。

> 象と散歩をするようにゆっくりとデータ解析やマーケティングについて考えて
> みようと思っていますが、物欲という雑念が払拭できません。
> 趣味のエギング、アクアリム、三線は永遠の初心者です。
>
> 【引用】[象と散歩](https://walking-elephant.blogspot.com)

Sample
象と散歩をするようにゆっくりとデータ解析やマーケティングについて考えてみようと思っていますが、物欲という雑念が払拭できません。趣味のエギング、アクアリム、三線は永遠の初心者です。

【引用】象と散歩

コード

1行でコード(等幅フォントで整形)を記載する場合は、`(バッククォート)で囲みます。

`1+1=2`

複数行の場合は `(バッククォート)3つで括りますが、Typoraの場合、```で改行、若しくは、``` 言語名でコード入力用のボックスが生成されます。

``` gas
function myFunction() {
Browser.msgBox('hello, world!');
}

注釈

文献を引用した場合や、補足説明をする場合に使う注釈は、[^注記号][^注記号]: 補足文 を使います。本文中の注記号にマウスオーバーすると補足文の内容が表示されます。

Sample
注釈のつけ方1
1 注釈1の補足

表(Table)

表(Table)は、各セルの内容を |(パイプ) で括ります。列は2列以上が必要で、最初の行はTable Header(TH)となり、2行目が表レイアウト、3行目からが、Table Data(TD)となります。2行目の表レイアウトは省略できます。

|TH1|TH2|TH3|
|----|----|----|
|TD1|TD2|TD3|

Sample
TH1 TH2 TH3
TD1 TD2 TD3

表の幅は100%(表示画面の最大)ですが、各セルの比率は、-(ハイフン)で変更することができます。またセル内の左揃え、中央揃え、右揃えは、:(コロン)で表します。

|左揃え|中央揃え|右揃え|
|:--|:----:|--:|
|TD1 |TD2 |TD3 |

Sample
左揃え          中央揃え          右揃え
TD1
TD2
TD3

Typoraの場合は、最初のヘッダー行のみ入力をしてエンターを押すと、表ツールが立ち上がるので、行、列の追加削除、文字位置などが簡単に行えます。

Typoraで表を作成


水平線

水平線は、***, 若しくは、---で書きます。

Sample


エスケープ

Markdown として意味がある記号の前に、\ を書くと文字をそのまま記述できます。

\*\*太字になりません\*\*

Sample
**太字になりません**

目次

Tyoraで目次を作成するときは、[TOC]と記載するだけです。見出しの1~6が目次となります。


Typora の文法サポート

Typoraでは、メニューバーの "ファイル(F) → 設定" で文法サポートの各項目をチェックすると、下付き、上付き文字、ハイライトがサポートされます(ダイアグラムについては別途説明)。

Typora文法サポート


下付き文字

下付き文字は、~(チルダ)で囲みます。

H~2~O

Sample
H2O 

上付き文字

上付き文字は、^(ハット)で囲みます。

X^2^

Sample
X2

ハイライト

文字をハイライトするときは、=(イコール)ふたつで囲みます。

==ハイライト==

Sample
ハイライト

絵文字

Markdownでは、絵文字コードを :(コロン)で囲って、絵文字を埋め込めむことができます。しかし、絵文字コードを覚えるのは大変です。絵文字を使うのであれば、EMOJI CHEAT SHEET に絵文字の一覧があります。絵文字をクリックするとコードがコピーされるので便利です。但し、:simple_smile:などのいくつかの絵文字は使えませんでした。

:smile:
:sweat:
:cry:
:thumbsup:
:elephant:

Sample
😄😓😢👍🐘

HTMLタグで文字装飾をする

TyporaではHTMLタグもそのまま記載できます。文字色ぐらいはMarkdownでも対応してもらいたいところですが、下線、文字色、文字寄せ、ルビ文字などは、HTMLタグで記述します。


HTMLで下線

下線はhtmlタグ<u>を使います。

<u>下線</u>

Sample
下線

HTMLで文字色

文字色はhtmlタグ<font>を使います。

<font color="red">文字を赤色にする方法</font>
<font color="blue">文字を青色にする方法</font>
<font color="gray">文字を灰色にする方法</font>

Sample
文字を赤色にする方法
文字を青色にする方法
文字を灰色にする方法

HTMLで文字寄せ

文字寄せは divタグ の style属性 を使います。

<div style="text-align: right;">
右寄せ
</div>
<div style=”text-aligh: center;”>
中央寄せ
</div>
<div style=”text-align: left;”>
左寄せ
</div>

Sample
右寄せ
中央寄せ
左寄せ

追記:2019.08 文字寄せについて追記しました。


HTMLでルビ文字

ルビ文字はhtmlタグ<ruby>を使います。

<ruby>霰<rt>あられ</rt></ruby>

Sample
あられ

LaTeXで文字装飾をする

Typoraの文法サポートでインライン数式をチェックするとLaTeXが使えます。LaTeXは、数式の記述や論文の体裁を整えるためのものですが、ちょっと構文が面倒です。[改訂第7版]LaTeX2ε美文書作成入門 など書籍で勉強するか、LaTeXコマンド集 を参照してください。

TyporaでLaTexを使うには、$(ダラー)で囲みます。複数行にまたがる場合は、$$で囲みます。


LaTexで数式

数式はこんな風に書きます。

$ \ce{CH4 + 2 $\left( \ce{O2 + 79/21 N2} \right)$} $

Sample
数式

LaTexで文字色

LaTeXを使って文字色を付けることもできます。

$ \textcolor{red}{文字色を赤色にする方法} $
$ \textcolor{blue}{文字色を青色にする方法} $
$ \textcolor{gray}{文字色を灰色にする方法} $

Sample
文字色を赤色にする方法
文字色を青色にする方法
文字色を灰色にする方法

Markdownで図形も描ける

Typoraでは、文法サポートのダイアグラムをチェックしていると、フローチャート、シーケンス図、ガントチャートいった図形もプレーンテキストで表記することができます。こちらの記述方法については、別途、書きたいと思います。

簡単シンプルで色々できるMarkdownをTyporaで始めましょう。


Typora で Markdown シリーズ

Typora での Markdown の記述方法については、下記のシリーズで紹介しています。
参考にしてください。









象と散歩:人気の投稿(過去7日間)