【めっちゃ便利!】Markdown記法って知ってますか?【ブロガー必見】

f:id:or_chard:20161111110824p:plain
こんにちは、イエロー(@inahime_poke)です。

ぼくは最近クラウドワークスを通じてライターの仕事をやっています。とあるゲームのライターをはじめたんですが、そこの記事執筆の形式が「Markdown」指定だったんです。

そこで、突然ですが質問です!あなたはMarkdown記法って知ってますか!私は知りませんでした!

…あれー、はてなブログやってるひとなら知ってるはずなんですけどねー?(煽り)
f:id:or_chard:20161111111143p:plain

Markdownってなに?

ぼくなりに言うと、Markdownは「書き方の共通様式」です。HTMLを簡単にしたものとも言えます。

Markdownの概要 Markdown(マークダウン)は、文章の書き方です。デジタル文書を活用する方法として考案されました。特徴は、

  • 手軽に文章構造を明示できること
  • 簡単で、覚えやすいこと
  • 読み書きに特別なアプリを必要としないこと
  • それでいて、対応アプリを使えば快適に読み書きできること

などです。Markdownはジョン・グルーバー(John Gruber)によって2004年に開発され、最初は Daring Fireball: Markdown で公開されました。その後、多くの開発者の手を経ながら発展してきました。
出典:日本語Markdownユーザー会

実はその歴史は古く、2004年からずっと使われていたとのこと。まず「日本語Markdownユーザー会」って名前がいい。ド直球ww

MarkdownとHTMLを比較してみる

たとえばこんな文章を書くとしましょう。

メガサーナイト概論

メガシンカすることで、特性「フェアリースキン」の補正がかかったタイプ一致全体攻撃の「ハイパーボイス」を、反動なし命中率100%のノーリスクで放つことができる。第6世代のダブルバトルでは猛威を奮ったポケモンの1つである。

メガサーナイトを使うときに気をつけること

  • ギルガルド、ヒードラン、メガリザードンYのような、鋼タイプと炎タイプに対するケア
  • 中途半端なすばやさのサポート(モロバレルを隣に置く、トリパ運用、追い風や電磁波などのすばやさ操作)

組み合わせると相性のいいポケモン

  1. モロバレル
  2. ヒードラン
  3. 霊獣ランドロス

構築サンプル:WCS日本代表決定大会準優勝構築

これをHTMLで書くと、こうなります。

<h3 id="-">メガサーナイト概論</h3>
<p>メガシンカすることで、特性「フェアリースキン」の補正がかかったタイプ一致全体攻撃の<em>「ハイパーボイス」</em>を、反動なし命中率100%のノーリスクで放つことができる。<strong>第6世代のダブルバトルでは猛威を奮ったポケモンの1つである。</strong></p>
<h4 id="-">メガサーナイトを使うときに気をつけること</h4>
<ul>
<li>ギルガルド、ヒードラン、メガリザードンYのような、鋼タイプと炎タイプに対するケア</li>
<li>中途半端なすばやさのサポート(モロバレルを隣に置く、トリパ運用、追い風や電磁波などのすばやさ操作)</li>
</ul>
<h4 id="-">組み合わせると相性のいいポケモン</h4>
<ol>
<li>モロバレル </li>
<li>ヒードラン</li>
<li>霊獣ランドロス </li>
</ol>
<p>構築サンプル:<a href="http://d.hatena.ne.jp/mor1yama/20150617/1434545907">WCS日本代表決定大会準優勝構築
</a></p>

うわめんどくせえ…。

いや、別に書けるけどちょっとタグ多すぎやろ!!…みたいな。

もうちょっとスッキリ書きたいよね。Markdownだと、こうなります。

### メガサーナイト概論
メガシンカすることで、特性「フェアリースキン」の補正がかかったタイプ一致全体攻撃の*「ハイパーボイス」*を、反動なし命中率100%のノーリスクで放つことができる。**第6世代のダブルバトルでは猛威を奮ったポケモンの1つである。**

#### メガサーナイトを使うときに気をつけること

- ギルガルド、ヒードラン、メガリザードンYのような、鋼タイプと炎タイプに対するケア
- 中途半端なすばやさのサポート(モロバレルを隣に置く、トリパ運用、追い風や電磁波などのすばやさ操作)

#### 組み合わせると相性のいいポケモン
0. モロバレル
0. ヒードラン
0. 霊獣ランドロス

構築サンプル:[WCS日本代表決定大会準優勝構築](http://d.hatena.ne.jp/mor1yama/20150617/1434545907)

なんかメールみたいで書きやすそうじゃないですか?見出しタグとか「#」の数で決められるし、強勢や強調を「*」「**」だけで表現できてしまう。普通のプレーンテキストに少し記号を足すだけで可読性が一気に増します。

「これはいい!」と思い早速導入しているわけです。半角スペース2つで改行ができて、URLは自動リンクしてくれる。覚えてしまえば超便利です。

Markdownのはじめかた
Markdownは、ふつうに電子メールを書く感覚で使えます。例えば、あなたが普段の電子メールで「空行で段落を表す」「引用を> で表す」ようにしているなら、すでにあなたはMarkdownの記法を二つ知っていることになります。

おめでとうございます。あなたはもうMarkdownユーザーです。
出典:http://www.markdown.jp/what-is-markdown/

あちゃー!もう俺Markdownユーザーだったかー!((茶番

メールに着想を得ているってのがポイントで、キーボードさえあれば、誰でもどんなソフトでも書ける共通様式です。

Word、Googleドキュメント、Evernote、その他メモアプリって、互換性がないですよね。それで「イラッ☆」とする経験がある人もいるはずです。

そもそも、ソフトによって記法が違うからこういうことが起こるのであって、統一の記法があれば、プレーンテキストだけでいいわけですよ!それを見事に体現してくれているのがMarkdown記法だというわけです。

そしてこれは、はてなブログも対応しています。スライドショーすら作れるらしい。驚いたもんで…。

慣れてきたらこんなこともできます!

1日Markdownで書いていたらすぐに慣れました。こんな感じで、普通のメモ帳にプレーンテキストとして書いてもいいんじゃないかと。これをコピペすれば構造化された文章にキチンとなるわけです。

# 今週末やることリスト
## 金曜日
- クラウドワークスあと2つ
- 買い物
- 大会の準備
## 土曜日
- 小学生の大会へ
- チェックイン23時まで
## 日曜日
- 大会2日目
- 7時半までに会場到着
- スコア記録

とはいえ、慣れるまではプレビューあったほうがいいと思うので、Markdown形式に対応してるアプリとか探してみました。

Markdownの編集ができるサービスやアプリまとめてみた

はてなブログでMarkdownが使えるということなので、全てのデジタル文書をMarkdownで書くことにしました。どうせなら1か所に文書をまとめたほうがいいので、良いサービスないかなーって探してたらいいのがありました。

Markdownが書けるクラウドサービス!

https://wri.pe/
なんといってもこれです。ぼくがいまつかっているのもこれ。Facebookアカウントがあればログインできちゃうから超簡単。

嬉しいことにEvernoteとも連携しています。だから「wri.pe」で書いて、Evernoteにバックアップを送って、はてなブログにそのままコピペしています。 それから、wri.peの開発エピソードと、開発者である増井雄一郎さんの話もおもしろいです。

Markdown対応のスマホアプリ

http://akiueo.hatenablog.com/entry/markdown-iphone
Markdown形式に対応してるアプリを6つ取り上げて紹介しています。ちょっとお金払ってもいいならこの辺から選ぶといいんじゃないかな。

HTMLタグの無効化Webツール

http://tech-unlimited.com/escape.html
実はMarkdownでもHTMLタグって使えちゃいます。HTMLタグをサイトに紹介したいとき、そのまま書くとHTMLタグがサイトに反映されちゃうので、そうさせないための変換。

HTMLとMarkdown変換のWebツール

http://md2pdf.higty.xyz/md2html
HTMLとMarkdownを変換してくれるサイト。あるとなにかと便利。

関連サイト

いくつか挙げときまーす

日本語Markdownユーザー会

http://www.markdown.jp/
とりあえず「Markdownってなんぞ?」って人は、まずこちらをどうぞ。

はてなブログ勢のためのMarkdownまとめ

http://igcn.hateblo.jp/entry/2016/02/14/073123
はてなブログやってるひとはここから。

Markdown記法の一覧

http://qiita.com/tbpgr/items/989c6badefff69377da7
こちらは少し詳しめの一覧です。まあ辞書代わりに使えばいいと思います。

これから、当ブログはこの記事からMarkdown記法で書いてお届けします!!

きょうの ぼうけんは ここまで
イエローでした~ f:id:or_chard:20160717191054p:plain