Markdownを活用するためのフローチャート
フローチャート図
とりま、あなたはMarkdownを使いたいんですね？
いいでしょう。さて、あなたは今どういう状況でしょうか？
フローチャートに従って見ていきます。
フローチャートで確認したら、以下のリンクで記事内から飛んで見てください。
オンラインでどうぞ
エディタとかよくわかんない！ パソコンなんて高いし持ってない！ という貴方！
ともあれ、これを見ているということは、きっとスマホやタブレットでネットも繋がる状態！という方のはずです。 であれば、下のサイトにアクセスすればMarkdownに触れます。
Marked Demoの方をアクセスしてみましょう。
右側にMarkdownを入れると、左側にリアルタイムで表示されますね。
でも、スマホでMarkDown使う猛者っているかしら・・・？
エディタを使おう
つべこべ言わずエディタを使いましょう。 Markdownを使う人は、だいたいエンジニアを自称できる人なはず。今は高機能なエディタが充実しています。だから、好みのエディタを使えばいいじゃん！
有名所には、オフィシャルでだったり有志がプラグインでだったりで、WYSIWYGできるようにビューアーを見れるようにしているので、間違いないでしょう。
私は、自宅ではVSCodeを使ってます。
ローカルでmarked.jsを使おう
はい！この記事のここからが本番です！
会社などでは自由にソフトウェアインストールできない人もいますよね！
今日日、方向性のおかしなセキュリティ意識が働いているのか、そういう会社、ありますよね。ほんまもう…。
まあ、ネットが使えればネットのエディタを使えばよいかと思いますが、ローカル環境でやりたい人もいますよね。
じゃ、とりあえずなんとかこっそり以下のJavaScriptコードを仕込まえてください。
JavaScriptは、ソフトウェアでは？ 大丈夫！ ソースコードはソフトウェアではない！ インターネットにつないでいるということは、その裏でJavaScriptが動いています！ ということは、事実上認められているに決まってます！ はい、論破。
marked.min.jsを手に入れて、ローカルの会社のコンピューターに入れましょう。
「なんとかってなんです？」
「なんとかはなんとかなんです！」
さて、marked.jsさえ入れれば、もう貴方はMarkdownを使用できます。 適当なHTMLコードを組んで、そのなかにMarkdownを仕込みましょう。
仕込み方は、以下のデモコードを参考にしてください。おそらくデフォルトで入っているInternetExploreでできますよね！ Edgeでもいいですよ？ なんでソフトウェアを自由にできない割に、IEを使う会社は多いんでしょうね！
<!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を開くと以下のように表示されます。
JQueryなども利用すれば、ローカルで独立させたMarkdownファイルを読み込んで、表示させることができます。JavaScriptが組める貴方なら楽勝でしょう。
mdwikiを使おう
なるほどー、JavaScriptがわからない！と。そうきましたか。
大丈夫いいんです。わからない人がいたって当然です。それに例えばの話、スクリプトが使えない職場の人にも共有したいというニーズだってありますよね。その場合にJavaScriptも覚えろなんて無理な話です。
さて、そんな人には以下のツールが便利です。
MDwiki - Markdown based wiki done 100% on the client via javascript
MDWikiは、HTMLファイル一つでmdファイルを読み込むことができる素晴らしいツールです！
しかも、MDWikiは、完全にローカル環境で実行することができます！ やったね！ 使い方も簡単ですから、紹介します。
Mdwikiの使い方
- ダウンロードしましょう
- zipを展開して、その中から「mdwiki.html」または「mdwiki-slim.html」をコピーしましょう。
- 共有フォルダにでも置きましょう。
- 同じフォルダにmdファイルを置きましょう。
- まず、index.mdを作っておいておけば間違いありません。
- 最後にブラウザにmdwiki.htmlのある場所をブラウザで開きましょう。
- 「\\server\public\mdwiki.html#sample.md」とでも入れれば、表示することができます！
ちょっとおしゃれですね！
mdwiki.htmlは、Bootstrapも使っているので、きれいに表示してくれます。変に自己作成するよりかは、遥かに綺麗なWikiを作れるでしょう。
他の人と共有するのもこちらのほうがいいかもしれませんね。
具体的な使い方は、mdwiki.htmlのあとに「#」をつなげて、mdファイル名を入れると表示されます。
上記の画像は、省略していますが、その場合、index.mdが表示されます。
スタンドアロンでmarkedとhttplistenerも使おう
本当にクローズドじゃん！
なんならスタンドアローンじゃん！
そんな端末いっそ自由にできそうじゃん！
いま、どうやって見てるわけ！？
と、思ってしまいますが、サーバー室とかにおられる方かもしれません。
そんな人には、Windows限定になりますが、PowerShellがインストールされていれば以下のブログを参照に、ローカルでHTTPサーバーを立ててしまいましょう。
Linux/Unix/Macであれば、httpdがデフォルトで仕込まれている可能性も高いので、それを立ち上げてしまいましょう。許されるなら。
PowerShellでHTTPサーバー的なものを作る - Qiita
白状すると、私がMarkDownを試みようとして、最初に出会ったのはこの記事なんですねえ。なんでこんなもの探そうとしたんでしょうねえ（遠い目）
さて、httpListenerを起動させましょう。そうすれば、内部でHTTPサーバーが立ち上がったと同等の状態です。
コードは上のブログを参照してください。丸パクリになってしまいますので…。
重要なところを抜粋すると、以下の箇所になります。
# .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を普及させてやろうか…と企んでいるんですが、ソフトウェアのインストールは禁じられていますし、そもそもインターネットにすら繋げないような環境もあるんですよね。
そういう場合にどうやればいいんだろう・・・と考えたのがきっかけです。同じような境遇にいる方の一助になれば、と思います。
コメント
コメントを投稿