はてなブログをMarkdown記法で書こう!利点と難点【圧倒的書きやすさ】


こんにちは、イエロー(@inahime_poke)です。

早速なのでMarkdownでブログを更新してみます。予備知識ない人は、Markdownってなに?って人のための記事を書いてますので、そちらをごらんくださいませー。

なんでMarkdownで書くの?

はてなブログの管理画面をあけると、「基本設定」の項目の中から、「見たまま」「はてな記法」「Markdown記法」の3つが選択できます。
f:id:or_chard:20161111111143p:plain

最初にみたときに「はてな記法ってなんぞ?」と思って調べてみると「うーわ覚えるのめんどくさそう」って思ってしまいました。だからMarkdownとかはね、もう、そっ閉じでしたね()

にもかかわらず、この中であえてMarkdownで書くことにした理由は大きくわけて4つあります。以下、順に見ていきますね。

プレーンテキストだから、ソフトとデバイスを選ばない!

前回の記事でも書いたように、メールに着想を得てMarkdownは作られました。したがってそもそもMarkdownはプレーンテキストで書かれることを前提としています。

だからGoogle keepで書こうが、メールの下書きで書こうが、はてなブログのエディターで書こうが、デフォルトのメモ帳で書こうが、MicrosoftのWordで書こうが、Markdown記法で書いてる限り結局できあがるものは同じなんですよ。

見たままモードだとそういうわけにはいかないでしょ?見たままモードで書いたブログ記事は、他のブログサービスにコピペしても使えません。

その点で言うと、いつ、どこで、どんなデバイスをつかい、どんなソフトを使っても、完成品の姿は全く同じ!!優勝。

あと地味に大きいのは、 Markdown使っとくと、はてなブログのアプリで書くときにも便利 ってことです。パソコンのエディターで書くと改行がpタグなのに、はてなブログのアプリの「見たままモード」で書くと改行がdivタグになってるんですよね~。

なんでそこ統一性ないねん!!!!!11!1!!11

いや、あれはほんまにキレそうでした。

あれのせいで、アプリでブログを書く気が一切起きなかったんですよ。

でもMarkdownならその辺心配ないです。さっきから言ってるようにプレーンテキストで書かれるのが前提なので、どこで書こうとも結局できあがるものは同じです。

互換性がある

Markdownと同じようにプレーンテキストで書くことのできるものとして、はてな記法があります。

ぼくも一瞬はてな記法とMarkdownと悩んだんですけど、はてな記法を採用しませんでした。なぜならはてな記法は「はてな内のローカルルール」だからです。よそへ移るとき使えない。互換性がないといってもいい。

さっきも書いた通り、Markdownの強みは、シンプルにプレーンテキストで書けることだとぼくは思っています。プレーンテキストだから、端末も場所もソフトも選ばない。

そんな「互換性のあるプレーンテキスト」で「互換性のないはてな記法」ってのは美しくない。合理的じゃない。

いちばんきついのは、すぐに使えるバックアップをとれないことです。「バックアップ」というからにはすぐにインポートし直せる形式であることが必須です。Markdownで書いとくと、これに対応している他のブログサービスに移動するとき、コピペするだけでそのまま記事として使えますよね。 バックアップとして優秀。

あと、前々から気にはなってたんだけど、はてなブログがある日突然サービスを終了したら、もう泣くしかないわけですよ。

別に自分は有名人でもなんでもないけれど、やぎろぐさんとか、ヒトデさんのとことか、有名ブロガーがある日突然ブログをBANされてるのを見るとやっぱり気になります。今まで書いてきた記事のバックアップはやっぱり必要だろうなあと思いまして。

レンタルブログであるってことを忘れがちだけど、忘れるべきではないですよね。借り物である以上、むこうの都合でいつ使えなくなっても文句は言えない。

いま書いてるこの記事も、はてなブログのエディターではなくて、wri.peというMarkdownに特化したサービスを使ってます(しかもEvernoteとDropbox対応)。あとはそこに書いた内容を、はてなブログのエディターにコピペすればOKってワケ!(フレンダ乙

HTMLより手軽で構造化イメージがわきやすい

プレーンテキストで書く様式としては、はてな記法以外に、HTMLタグもあります。こっちはガチでメジャーですね。プレーンテキストで書けるのに、Webデザインの細かい指定までバッチリできる優等生です。

でもHTMLタグって煩雑じゃないですか?普段のブログを書くときにHTMLで書くってよっぽど物好きなんじゃないかと思いますw

Markdownはその辺すごく便利なんですよね。キーボードほぼワンタッチで文章の構造化ができてしまう。

  • 見出しなら「#」でh1タグの代わり、「##」でh2タグの代わり、「###」でh3タグの代わり
  • 引用なら「>」でblockquoteタグ
  • 強勢なら「*」でemタグ、強調なら「**」でstrongタグ
  • リスト作成なら「- 」でliタグとulタグ

…などなど。以下には全く同じ内容を、HTMLタグと、Markdown記法とで書いてみました。ぜひ比べてみてほしい。

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)

この比較からMarkdownには2つの魅力があることがわかると思います。

ひとつは、手軽さです。普通のプレーンテキストに、ほんの少し記号を入れるだけで可読性が圧倒的に高まる。というところにMarkdownの魅力があるとぼくは考えています。…HTMLタグだとこんな細かく書く気になれませんよね。

もうひとつは、直観(≠直感)に訴えかけるわかりやすさです。プログラミングガチ勢ならともかく、多くの人にとってHTMLタグだとできあがった形がイメージしづらいはず。しかしMarkdown記法ならば大体の文章の完成系のイメージしやすいと思います。

仕事で慣れるため

最後の理由はこれ。そもそもMarkdownを知ったのは、とあるゲームの攻略記事をかくときに、クライアントがMarkdownを指定してきたからなんですよね。

まあ使えるようになっとくと多分どっかで役に立ちますよ。さっきも言ったけどMarkdownって汎用性あるからね!書いてて便利すぎるから「見たまま」モードには戻れない。

慣れてくると、Markdown形式で見出しとかリストとかに変換できないような普通のプレーンテキストのメモ帳にもMarkdownで書いちゃう。頭の中で構造化された文章がイメージできてしまうんですよ。そのぐらいシンプルかつ完成度の高いものだと思っています。

はてなブログでMarkdownを使うときの利点と難点

このエントリーもMarkdownで書いてるんですけど、はてなブログをMarkdownで書く際の利点と難点を見つけたので、早速書いておこうと思いまーす。

利点

h2タグが簡単に使えてしまう。

なんと、「##」と入力するだけでh2タグが使えるんです。WordPress勢的には「だからなんなんだ」って感じかもしれませんが、はてな勢的には結構なニュースだと思いますよ?

「見たままモード」や「はてな記法」の大見出しって、なぜかデフォルトがh3タグなんですよね。大見出しをh2として使っておけばSEO的にも有利らしい。ぼくのブログ、パッと見では変化がなさそうに見えますが、実は大見出しが全てh2タグに変わってます。css弄りましたw

h3タグをh2タグに強引に置き換えるスクリプトかなんかあるらしいけど、それって結局よそのブログサービスに移すときにはh3タグのままってことでしょ?

ちなみに、h2タグに限らず、「#」の数で見出しのh1からh6まで自在に使えてしまいます。すげえわ!

表組みが簡単にできる

たとえばポケモンのパーティ紹介をするときに使える。

ポケモン名 特性 技1 技2 技3 技4 もちもの
サーナイト トレース→フェアリースキン ハイパーボイス サイコキネシス トリックルーム まもる サーナイトナイト
モロバレル さいせいりょく ギガドレイン キノコのほうし いかりのこな まもる ゴツゴツメット
霊獣ランドロス いかく じしん いわなだれ はたきおとす ばかぢから とつげきチョッキ
ヒードラン もらいび ねっぷう だいちのちから みがわり まもる シュカのみ

今までみたいにGoogleスプレッドシートのスクショを貼らなくてすむんだ…!!

というわけで、はてなブログでMarkdown使いたい人は、とりあえずここを参考にすればいいよ!めっちゃいい感じにまとまってるから。

難点

使ってて、いくつか「うーんちょっと不便だな」って思った点を挙げておきます。

フォントの色や大きさを変えられない

emタグやstrongタグに該当する、強勢や太字の強調はできるんだけど、Markdown記法にはフォントの色を変えるコマンドがありません。フォントの下線部を引くuタグも同様です。そんなときは結局HTMLタグ頼みになってしまうのがやや不便。

ただ、おもしろいことにMarkdown記法の中に突然HTMLタグぶっこんでも普通に使えましたw

おまえ、さっきから赤字使えてるじゃねーか!って思うかもしれませんが、それにはちゃんと理由があります。カスタマイズ頑張りましたのよ。明日その記事公開しますのでお待ち下さい。

リンクにtarget設定ができない

外部リンクを設定するときって、だいたい別タブや別ウインドウで開くように設定しますよね。その設定ができません。これもHTML頼み。一応、これはjavaスクリプト使えば解決できるらしいので、あとで設定してきまーす。

この辺の難点の解決方法をまとめた記事は明日投下します!

終わりに…

Markdown開発した人最高かよ!ネ申!!

ユニバーサルデザインってこういうことを言うんじゃないかな。ぼくはMarkdownを流行らせたい。

みんなMarkdownでブログ書こうぜ!!!!

様々なソフトウェアが乱立する中、あらゆるサービスに共通しているのはプレーンテキストです。そのプレーンテキストをベースとしたMarkdownこそ、デジタル文書のリンガフランカに相応しいとぼくは思います。公的機関とかのデジタル文書も全部これに揃えちゃえばいいのにね。

明日の昼ぐらいにMarkdown運用するときのカスタマイズ記事上げます。ほなまた。

以下、関連記事。

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