Markdownを活用するためのフローチャート

## フローチャート図

とりま、あなたはMarkdownを使いたいんですね？  
いいでしょう。さて、あなたは今どういう状況でしょうか？  
フローチャートに従って見ていきます。

[![Image from Gyazo](https://i.gyazo.com/29f870c267f1bd45393d7a02cbd1136e.png)](https://gyazo.com/29f870c267f1bd45393d7a02cbd1136e)

フローチャートで確認したら、以下のリンクで記事内から飛んで見てください。

> - [オンラインでどうぞ](#オンラインでどうぞ)
> - [エディタを使おう](#エディタを使おう)
> - [ローカルでmarked.jsを使おう](#ローカルでmarked.jsを使おう)
> - [mdwikiを使おう](#mdwikiを使おう)
> - [スタンドアロンでmarkedとhttplistenerも使おう](#スタンドアロンでmarkedとhttplistenerも使おう)

## オンラインでどうぞ

エディタとかよくわかんない！　パソコンなんて高いし持ってない！　という貴方！  

ともあれ、これを見ているということは、きっとスマホやタブレットでネットも繋がる状態！という方のはずです。
であれば、下のサイトにアクセスすればMarkdownに触れます。

- [Dillinger](https://dillinger.io/)
- [markdown\-it demo](https://markdown-it.github.io/)
- [Marked Demo](https://marked.js.org/demo/)

Marked Demoの方をアクセスしてみましょう。

[![Image from Gyazo](https://i.gyazo.com/1fe4dc396584e4d2e16c2e4e3b971087.png)](https://gyazo.com/1fe4dc396584e4d2e16c2e4e3b971087)

右側にMarkdownを入れると、左側にリアルタイムで表示されますね。

でも、スマホでMarkDown使う猛者っているかしら・・・？

## エディタを使おう

つべこべ言わずエディタを使いましょう。
Markdownを使う人は、だいたいエンジニアを自称できる人なはず。今は高機能なエディタが充実しています。だから、好みのエディタを使えばいいじゃん！  

- [Atom](https://atom.io/)
- [Visual Studio Code](https://code.visualstudio.com/)
- [Sublime Text](https://www.sublimetext.com/)
- [Vim](https://www.vim.org/)

有名所には、オフィシャルでだったり有志がプラグインでだったりで、WYSIWYGできるようにビューアーを見れるようにしているので、間違いないでしょう。

私は、**自宅では**VSCodeを使ってます。

## ローカルでmarked.jsを使おう

はい！この記事のここからが本番です！

会社などでは自由にソフトウェアインストールできない人もいますよね！  
今日日、方向性のおかしなセキュリティ意識が働いているのか、そういう会社、ありますよね。ほんまもう…。

まあ、ネットが使えればネットのエディタを使えばよいかと思いますが、ローカル環境でやりたい人もいますよね。

じゃ、とりあえずなんとかこっそり以下のJavaScriptコードを仕込まえてください。

JavaScriptは、ソフトウェアでは？
大丈夫！　ソースコードはソフトウェアではない！　インターネットにつないでいるということは、その裏でJavaScriptが動いています！　ということは、事実上認められているに決まってます！　はい、論破。

- [markedjs/marked: A markdown parser and compiler\. Built for speed\.](https://github.com/markedjs/marked)

marked.min.jsを手に入れて、ローカルの会社のコンピューターに入れましょう。

「なんとかってなんです？」  
**「なんとかはなんとかなんです！」**

さて、marked.jsさえ入れれば、もう貴方はMarkdownを使用できます。
適当なHTMLコードを組んで、そのなかにMarkdownを仕込みましょう。

仕込み方は、以下のデモコードを参考にしてください。おそらくデフォルトで入っているInternetExploreでできますよね！　Edgeでもいいですよ？　なんでソフトウェアを自由にできない割に、IEを使う会社は多いんでしょうね！

``` HTML
<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Marked in the browser</title>
</head>
<body>
  <div id="content"></div>
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  <script>
    document.getElementById('content').innerHTML =
      marked('# Marked in browser\n\nRendered by **marked**.');
  </script>
</body>
</html>
```

詳細は割愛しますが、```marked('# Marked in browser\n\nRendered by **marked**.')```のようにmarked( *markdownの内容* ) と記載します。すると、その箇所をmarked.jsがHTMLに変換してくれます。

そして、上のHTMLを開くと以下のように表示されます。

[![Image from Gyazo](https://i.gyazo.com/2e4f39bf3b38e71d1e580c70fe2b1d11.png)](https://gyazo.com/2e4f39bf3b38e71d1e580c70fe2b1d11)

JQueryなども利用すれば、ローカルで独立させたMarkdownファイルを読み込んで、表示させることができます。JavaScriptが組める貴方なら楽勝でしょう。

## mdwikiを使おう

なるほどー、JavaScriptがわからない！と。そうきましたか。  
大丈夫いいんです。わからない人がいたって当然です。それに例えばの話、スクリプトが使えない職場の人にも共有したいというニーズだってありますよね。その場合にJavaScriptも覚えろなんて無理な話です。

さて、そんな人には以下のツールが便利です。

[MDwiki \- Markdown based wiki done 100% on the client via javascript](http://dynalon.github.io/mdwiki/#!index.md)

MDWikiは、HTMLファイル一つでmdファイルを読み込むことができる素晴らしいツールです！

しかも、MDWikiは、完全にローカル環境で実行することができます！　やったね！　使い方も簡単ですから、紹介します。

### Mdwikiの使い方

- [ダウンロード](http://dynalon.github.io/mdwiki/#!download.md)しましょう
- zipを展開して、その中から「mdwiki.html」または「mdwiki-slim.html」をコピーしましょう。
- 共有フォルダにでも置きましょう。
- 同じフォルダにmdファイルを置きましょう。
  - まず、index.mdを作っておいておけば間違いありません。
- 最後にブラウザにmdwiki.htmlのある場所をブラウザで開きましょう。
  - 「\\\\server\public\mdwiki.html#sample.md」とでも入れれば、表示することができます！

[![Image from Gyazo](https://i.gyazo.com/754f9251b9969e3e540e9c95b62b26e7.png)](https://gyazo.com/754f9251b9969e3e540e9c95b62b26e7)

ちょっとおしゃれですね！  
mdwiki.htmlは、Bootstrapも使っているので、きれいに表示してくれます。変に自己作成するよりかは、遥かに綺麗なWikiを作れるでしょう。  
他の人と共有するのもこちらのほうがいいかもしれませんね。

具体的な使い方は、mdwiki.htmlのあとに「#」をつなげて、mdファイル名を入れると表示されます。  
上記の画像は、省略していますが、その場合、index.mdが表示されます。

## スタンドアロンでmarkedとhttplistenerも使おう

本当にクローズドじゃん！  
なんならスタンドアローンじゃん！  
そんな端末いっそ自由にできそうじゃん！  
いま、どうやって見てるわけ！？  

と、思ってしまいますが、サーバー室とかにおられる方かもしれません。

そんな人には、Windows限定になりますが、PowerShellがインストールされていれば以下のブログを参照に、ローカルでHTTPサーバーを立ててしまいましょう。  
Linux/Unix/Macであれば、httpdがデフォルトで仕込まれている可能性も高いので、それを立ち上げてしまいましょう。許されるなら。

[PowerShellでHTTPサーバー的なものを作る \- Qiita](https://qiita.com/kikuchi/items/785631cb24dfe5fa8d52)

白状すると、私がMarkDownを試みようとして、最初に出会ったのはこの記事なんですねえ。なんでこんなもの探そうとしたんでしょうねえ（遠い目）

さて、httpListenerを起動させましょう。そうすれば、内部でHTTPサーバーが立ち上がったと同等の状態です。

コードは上のブログを参照してください。丸パクリになってしまいますので…。

重要なところを抜粋すると、以下の箇所になります。

```PowerShell
# .NetからHTTPListenerオブジェクトを生成
$listener = New-Object Net.HttpListener
$listener.Prefixes.add($urlRoot)

try{
    "localhostで簡易httpサーバーを作動させます。"|oh
    # HTTPListenerをstart()すると、
    # ローカル上に擬似的なHTTPサーバーが立ち上がります。
    $listener.Start()
    # 中略
} finally {
    $listener.Dispose()
}
```

これで、localhostからMdwiki.htmlを読み込むことができます。このスクリプトと同じ場所にmdwiki.htmlとmdファイルを置いて、

localhost:18080/mdwiki.html

といれればmdwikiが表示されます。

これのメリットは以下のとおり。

- 正真正銘、完全にローカルです（BootStrapが外部にアクセスしようとするくらい？）
- PowerShellはWindowsにデフォルトで入っているので、Windows OSなら特別にインストールが必要ありません
- HTMLはソフトウェアではありません、ただの文字の羅列です。なので、無断のソフトウェアインストールではありません！　会社規定にも引っかからないよ！

これで、ネットワークから遮断された完全ローカルな場所でもmarkdownを使ったWikiを作ることができますね！

## 最後に自分語り

私のMarkdown歴は、実のところ項目の一番最後から最初のほうに巡っていきました。

いかに会社でMarkdownを普及させてやろうか…と企んでいるんですが、ソフトウェアのインストールは禁じられていますし、そもそもインターネットにすら繋げないような環境もあるんですよね。

そういう場合にどうやればいいんだろう・・・と考えたのがきっかけです。同じような境遇にいる方の一助になれば、と思います。