はてなブログをMarkdownで書いてみた

はてなブログはいつも見たままモードで入力している。はてなにおいては、ダイアリー時代からはてな記法という入力方式が親しまれていた。ダイアリーの頃からはてなを利用している人の中では、今でもはてな記法で入力している人だって少なくないだろう。僕ははてな記法を覚えるのが嫌で利用しなかった。はてな記法は他で全く使い道がなく、そういうものを暗記することに抵抗があった。

はてな記法一覧 - はてなダイアリーのヘルプ

Markdownってなんだ

先日、はてなブログ5周年ありがとうキャンペーンの記事を見ていたら、Markdownというものがあることを知った。

1.はてなブログを始めたきっかけは何ですか?

MarkDownでブログ書きたかった

Markdownってなんだろう、htmlのmがMarkupのイニシャルであることは知っている。ではMarkdownとは何か。時折見かけていた単語ではあったから、マークアップする、マークダウンするといった動詞だと思っていたら違った。どうやらはてな記法のような記述様式らしい。

Markdown(マークダウン)は、文書を記述するための軽量マークアップ言語のひとつである。

「書きやすくて読みやすいプレーンテキストとして記述した文書を、妥当なXHTML(もしくはHTML)文書へと変換できるフォーマット」として、ジョン・グルーバー(英語版)により作成された。

Markdown - Wikipedia

利用できるサービスとしては、はてなブログ、Tumblr、WordPressなど幅広い。Mediumはどうかと思ったら、各エディタからのアップロードには対応しているみたい。直打ちは無理っぽい。noteは検索で抽出するのが難しくてよくわからなかった。他にはGitHubやReddit、Qiitaなどこれだけ利用できる範囲が広いとなると、覚える価値も広がるかもしれない。覚えると言ったってブログで利用する記法は限られているんだけど。

マークダウン記法に対応している日本のサービスを探せ!&マークダウンがファッション業界でも流行ってる? | かたログ

Mediumできる投稿Markdown系テキストエディタ比較(2016年4月7日時点)

ちなみにエディタからのアップロードは、はてなブログでも可能みたい。

はてなブログにおけるh2問題

はてなブログ界隈では標準でh2が用意されていないという問題が、古くからまことしやかにささやかれていた。h2はスタイルシートにおける見出しのh2で、はてなブログの標準仕様ではh2はタグを手打ちする以外に対応しておらず、SEO上不利だとかどうとか。

Googleランクの基準としてはhtmlの文法に則っていることが重要だと言われ、文法上はh1をタイトルに掲げ、h1の中のh2、h2の中のh3といった順番に見出しを利用するのが正しいとされている。実際それがどの程度検索結果に影響するのかは知らないが、なぜかはてなブログの見出しはh1の次にh3が来る仕様のままであり、長年放置されている(はてな記法でさえそうなっている)。何か理由があるのかもしれないが、実際はてなブログ上でh2タグを記入してもなんら問題は出ず、現在においても理由はわからないままとなっている。はてなブロが~の間ではこれがSEOのマイナス要素につながり、アクセスダウン、大騒ぎ状態、h2問題対策は至上の命題となっており、jQueryで無理くり対策している人たちもいる。

ここでMarkdownである。Markdownで記入すればh2は標準で利用できる。これまで書いてきたエントリーについてはもちろんそのままだけど、これからは見出しの順番などを気にすることなく記述することができる。

エディタを用意してみた

ブログに書いている日記は、これまでevernoteに下書きしてきた。理由はバックアップが取れることと、仕分けや単語検索に対応していて管理しやすいこと、おまけにアプリで同期できるため他のパソコンやスマートフォン上でも閲覧、編集できることがあった。しかしevernoteは経営状態が危ないらしく、最近ではサービスの劣化も著しい。何より動作が重い。課金ユーザーではないから文句言えた筋ではないんだけど、課金したところでこの状況が改善されるわけでもなく、evernoteは見切り時だと考えている人も多い。

そういうわけで、今までブログの下書き程度にしか使ってこなかったevernote環境を少し見直してみようと思い、今回Markdownを使用するにあたってエディタを入れてみた。試したのはMacDownとAtom。

MacDownについては非常にシンプルで、左に書いたものが右にプレビューされるというだけ。ショートカットが使いやすいという話もあるけれど、まだ使ったことがない。利用上の難点としては、あまりにシンプルすぎてファイル管理機能がないこと。evernoteのように一覧でファイルを管理できず、ひとつひとつ開かなければならない。本当にただMarkdownで記述することに特化しただけのエディタと言える。

Atomは超複雑だった。もともとMarkdown用というわけでもなく、カスタマイズ次第でなんでもできるという感じ。さきほどリンクを貼った、はてなブログに直接アップロードできるパッケージもこのAtomに付加できる拡張機能の一つ。もちろんファイル管理機能もあり、evernoteのように管理している全ての文章の中から特定の文字列を検索することもできる(⌘⇧Fで検索ウィンドウが開く。escで閉じる)。

スマートフォンや他のパソコンで利用するためにデータを同期したければ、上に貼ったセカイノカタチの記事みたいにファイルの保存先をDropboxに指定しておけばいいだけ。これはAtomの機能と関係ないから、evetnoteのように別のデバイスでも同じ環境を保つようなことはできない。

このなんでもできるAtomはやはり、初心者の僕には使いにくい。自分が使いやすいようにカスタマイズしたいなんて思う以前に、何をどうすればいいのかわからない。ということで、AtomをシンプルなMacDownに近づけようと他人の例を参考にしてみた。ほぼ全面的にコピーしている。

他にMarkdown記法でウェブページのタイトル、リンクをコピーできるChrome拡張を入れた。

はてなブログ上におけるMarkdownの難点

そんなMarkdownも、はてなブログで利用するにあたってはいいことばかりではない。まず、リンクを貼るにあたってのブログカードがはてな記法独特のものだから、はてな記法で記入するかブラウザ上の編集画面で試してみないといけない。また、画像のアップロードもはてなフォトライフを利用した独特のものであり、はてな記法で入力するかブラウザ上の編集画面で作業することになる(Atom拡張のhatena-blog-and-fotolifeでは対応しているみたい)。

他に、Instagramの写真を貼り付けたりするにあたり、これもブラウザ上の編集画面で挿入することになるんだけど、サイズの変更ができなかった。画像サイズ変更のMarkdown記法を試してみたが、どれも対応しておらず、結局imgタグに書き換えて変更することになった。めんどくさい。

その他に「続きを読む」を挿入するなど、はてなブログ独自の機能を反映させようと思えばはてな記法を部分的に用いるか、どちらにしてもブラウザの編集画面でちまちまやる作業が欠かせない。これについてはまあ仕方がない。evenoteに下書きしていた頃からやっていたことだから、作業が増えるわけではない。

ただ試してみるのがおもしろかった

以上がMarkdownではてなブログを書いてみた感想でした。今のところは飽くまで下書きを簡単に済ます程度に留めている。楽かどうかはまだよくわからないが、とりあえずMarkdownによってはてなブログのh2問題は解決した。はてなブログに限らず他の媒体での利用状況も考えれば、この際Markdownを覚えておいて損はないだろう。使い続けるかどうかは未定。

Markdownで書いてみること自体は非常に簡単で、単純にこういういことをやってみるのがおもしろかったから、気になった人は次の記事からMarkdownで書いてみましょう。

http://nohack-nolife.hatenablog.com/entry/2014/12/02/121630