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

10319 ワード
JavaScript PowerShell Markdown Marked JavaScript テキストリンク

フローチャート図

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

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