はてなブログ│アプリにおける最適な編集モードについて考える【Markdown】

はてなブログの公式アプリにおける編集モードの比較です。
この記事は「Markdownモード」で書いています。

はてなブログでは、編集モードが選べます。

見たままモード
はてな記法モード
Markdownモード

アプリのトップ画面の左上にある歯車のアイコンをタップします。
すると、設定の中にある「編集モード」に遷移しますので、こちらで確認や変更をすることができます。

デフォルトは「見たままモード」です。

プログラムはもとより、ブログを書くことについてすらなんの知識もない私は、はてなブログを始めた当初、与えられるたままにアプリの「見たままモード」を使っていました。

記事を書き始めると、なぜだか本文の行間が揃わないことに気が付きました。
不自然な行間は、素人でもしっくり来ません。

仕方がないので、ひとしきり本文を書いたら下書きとして保存し、アプリから離れてiPhoneのブラウザを立ち上げ、パソコン用エディタの「html編集」で邪魔なタグをひとつひとつ削除したり、書き換えるという実に地味で地道な作業を繰り返していたのでした。

これが実際には、本当に肩が凝る作業なのです。
iOSははてなブログと相性が悪いのか、そもそもスマホではパソコン表示のブラウザの操作に限界があるのか、詳しいことはわかりませんが、とにかくちっとも捗りません。

まずもって、テキストエリア内でカーソルが非常に暴れます。
編集したい箇所にカーソルを合わせる、ただそれだけのことで集中力を消耗します。

また、通常のiPhoneの操作では、文字列をダブルタップやロングタップでまとめて選択できますが、パソコン表示のブラウザ、かつテキストエリア内ではそうした動作が一切不能です。
となれば、削除したい文字列の最後尾にカーソルを合わせ、バックスペースで一文字ずつ消していくしかありません。

また、アプリの「見たままモード」ではHTMLの編集ができません。
アプリのツールにないタグを使いたいときは、同じ手順でパソコン表示のブラウザの「html編集」にタグを挿入します。

テキストエリア内では、まとめて文字列を選択できないばかりか、バックスペースに対するロングタップも無効です。
すなわち、削除したい文字の数と同じ回数、バックスペースを連打しなければなりません。
どこかでお借りしてきた長いコードやスクリプトを間違えて貼り付けようものなら、剥がすために修行のような苦痛が待ち受けているのです。

しかも、こうしたことをiPhoneの小さい画面でやろうとするものですから、とても時間がかかるうえに、目も神経も疲れ果て、記事を書くどころではありませんでした。

まだまだブログには不慣れですが、この不便さをどうにかしなければ、もう続けていくことはできないと、他の編集モードも試してみることにしました。

公式アプリは大変便利ですが、「見たままモード」は全くの役立たずです。

最近ではスマホがネットの主要デバイスになっているのに、公式アプリの「見たままモード」は不親切すぎます。

公式アプリの「見たままモード」は、パソコン用エディタと比べると使い勝手がよくありません。

そこで、別の編集モードを試してみることにしました。
この記事は「Markdownモード」で書いています。

「見たままモード」でどうしても気になる「行間」を克服することが、もっとも重要なポイントです。

段落と改行

記事はいくつかの段落（Paragraph）の集まりです。
改行は段落の中に含まれます。

テキストエリアに文章を入力してみました。

　『春よ来い』

　春よ来い　早く来い  
　あるきはじめた　みいちゃんが  
　赤い鼻緒の　じょじょはいて  
　おんもへ出たいと　待っている

　春よ来い　早く来い  
　おうちのまえの　桃の木の  
　つぼみもみんな　ふくらんで  
　はよ咲きたいと　待っている

　作詞：相馬 御風／作曲：弘田 龍太郎

実際のHTMLでは、このように記述されています。

<p>
　『春よ来い』
</p>
<p>
　春よ来い　早く来い<br />  
　あるきはじめた　みいちゃんが<br />  
　赤い鼻緒の　じょじょはいて<br />
　おんもへ出たいと　待っている
</p>  
<p>
　春よ来い　早く来い<br />
　おうちのまえの　桃の木の<br />
　つぼみもみんな　ふくらんで<br />
　はよ咲きたいと　待っている
</p>
<p>
　作詞：相馬 御風／作曲：弘田 龍太郎
</p>

段落

<p>と</p>の間がひとつの段落です。
Markdownは、テキストエリアで空行と空行に挟まれた部分があると、HTMLに変換の際、自動的に段落と認識されます。

　『春よ来い』

（空行）

　春よ来い　早く来い
　あるきはじめた　みいちゃんが
　赤い鼻緒の　じょじょはいて
　おんもへ出たいと　待っている

（空行）

　春よ来い　早く来い
　おうちのまえの　桃の木の
　つぼみもみんな　ふくらんで
　はよ咲きたいと　待っている

（空行）

　作詞：相馬 御風／作曲：弘田 龍太郎

ただ空行を挟めばよいのです。
段落はテキストエリアの中で意図的に分けることができます。

改行

では、改行はどうでしょうか。
Markdownは改行も適切にコントロールすることができます。

上のHTMLの中にある文末の<br />が段落の中の改行です。
半角スペースを2つ入れてリターンをタップすれば、改行になりますよ。

　春よ来い　早く来い␣␣⏎
※ ␣ 半角スペース　⏎ リターン

つまり、上の全文は、段落と改行を使い分けてこのように入力しました。

　『春よ来い』␣␣⏎

⏎（空行）

　春よ来い　早く来い␣␣⏎
　あるきはじめた　みいちゃんが␣␣⏎
　赤い鼻緒の　じょじょはいて␣␣⏎
　おんもへ出たいと　待っている⏎

⏎（空行）

　春よ来い　早く来い␣␣⏎
　おうちのまえの　桃の木の␣␣⏎
　つぼみもみんな　ふくらんで␣␣⏎
　はよ咲きたいと　待っている⏎

⏎（空行）

　作詞：相馬 御風／作曲：弘田 龍太郎⏎

iPhoneは日本語入力でもスペースは全角になりません。
若干不便さを感じていましたが、こういう使い道があるのかと妙に納得してしました。
日本語入力のフリック操作だけで、さくさくと編集が進みます。

つまり、Markdownはアプリにおける「見たままモード」の「行間」の壁をクリアしたことになります。
たったこれだけのことで、とても大きな収穫を得ました。

続いて、アイコンで表示されるツールの使い方も見てみましょう。

見出し

まずは、はてなブログでよく取り上げられる見出しの問題です。

見出しを設定するツールは2ページ目です。
一番左のアイコンをタップします。

タップする回数によって、見出しの種類が変わります。

# 大々見出し <h1>（タップ1回）
## 大見出し <h2>（タップ2回）
### 中見出し <h3>（タップ3回）

大々見出し <h1>
大見出し <h2>
小見出し <h3>

アイコンでは3個までしか入力できませんが、手動で「#」（ナンバー・ハッシュ）を入力すれば、最大6個まで増やせます。

#### 小見出し <h4>（手動）
##### 小々見出し <h5>（手動）
###### 小々々見出し <h6>（手動）

小見出し <h4>
小々見出し <h5>
小々々見出し <h6>

ちなみに、便宜上<h1>を「大々見出し」としていますが、呼び方はあまりお気になさらず。
はてなブログでは、記事の中で扱う一番大きい見出しを「大見出し」としているので、準じたまでのことです。
実際のところ、はてなブログでは<h1>が記事のタイトルとして使われています。

アイコンを続けてタップすると、インデント（字下げ）が挿入されて階層になります。
アイコンがタップできるのは3回、つまり3階層目までですが、足りなければ1階層につき半角スペース2個でインデントを増やすことができます。
手動で挿入するときは、記号の後ろに必ず半角スペースを入れましょう。

* Item A（タップ1回）
  * Sub Item A（タップ2回）
    * Sub Item A.1（タップ3回）
    * Sub Item A.2（タップ3回）
␣␣␣␣␣␣* Sub Item A.2.1（手動で空白6個）

<!-- 以下、タップは同様 -->

* Item B
  * Sub tem B
    * Sub Item B.1
    * Sub Item B.2
␣␣␣␣␣␣* Sub Item B.2.1
* Item C
  * Sub Item C
    * Sub Item C.1
    * Sub Item C.2
␣␣␣␣␣␣* Sub Item C.2.1

Item A（タップ1回）
- Sub Item A（タップ2回）
  - Sub Item A.1（タップ3回）
  - Sub Item A.2（タップ3回）
    - Suc Item A.2.1（手動で空白6個）
Item B
- Sub tem B
  - Sub Item B.1
  - Sub Item B.2
    - Sub Item B.2.1
Item C
- Sub Item C
  - Sub Item C.1
  - Sub Item C.2
    - Sub Item C.2.1

Markdownのリスト
本来のMarkdownでは、通常のリストととして「」「+」「-」のいずれかが使えますが、アプリは「」しかサポートしていません。 Daring Fireball: Markdown Basics

数字リスト

アイコンをタップすると「1. 」が挿入され、番号の付いたリストを記述することができます。

1. Step 1
1. Step 2
1. Step 3

Step 1
Step 2
Step 3

通常のリストと同じく、続けてタップすれば「1. 」が増えて階層になります。
アイコンのタップは3回までですが、キーボードから直接「1. 」と半角スペースを入力して階層を増やすことができます。
アプリでは、半角スペース3個が1階層のようです。
手動で挿入するときは、数字の後ろに必ず半角スペースを入れましょう。

1. Step 1（タップ1回）
   1. Sub Step 1（タップ2回+空白1個）
      1. Sub Step 1.1（タップ3回+ 空白2個）
      1. Sub Step 1.2（タップ3回+ 空白2個）
␣␣␣␣␣␣␣␣␣1. Sub Step 1.2.1（手動で空白9回）
␣␣␣␣␣␣␣␣␣1. Sub Step 1.2.2（手動で空白9回）
␣␣␣␣␣␣␣␣␣1. Sub Step 1.2.3（手動で空白9回）

Step 1
1. Sub Step 1
  1. Sub Step 1.1
  2. Sub Step 1.2
    1. Sub Step 1.2.1
    2. Sub Step 1.2.2
    3. Sub Step 1.2.3

数字リストが面白いのは、階層を自分で判断して、勝手に番号を付けてくれるところです。

5. Step 1
   3. Sub Step 1
         1. Sub Step 1.1
         2. Sub Step 1.2
            9. Sub Step 1.2.1
            4.Sub Step 1.2.2
            7. Sub Step 1.2.3

Step 1
1. Sub Step 1
  1. Sub Step 1.1
  2. Sub Step 1.2
    1. Sub Step 1.2.1
    2. Sub Step 1.2.2
    3. Sub Step 1.2.3

通常のリストと数字リストを組み合わせて、こんなこともできます。

1. Step 1
    * Item A
    * Item B
        1. Sub Step 1
            * Sub Item A
            * Sub Item B
            1. Sub Step 1.1
            1. Sub Step 1.2
            1. Sub Step 1.3

Step 1
- Item A
- Item B
  1. Sub Step 1
    - Sub Item A
    - Sub Item B
      1. Sub Step 1.1
      2. Sub Step 1.2
      3. Sub Step 1.3

通常のリストと数字リストを上手に使って、わかりやすい記事を心掛けましょう。

リンク

記事を編集する際によく使う記述として、リンクがあげられます。

リンクのツールは3ページ目です。
一番左のアイコンをタップします。

アイコンを選択すると「リンクを挿入」するウィンドウが開きます。

ここにリンクしたいURLを入れて「挿入」をタップすると……

あれ、おかしいですね。
「挿入」をタップしたのになにも起こりません。
アプリのMarkdownモードでは、リンクのツールが使えないのでしょうか。

仕方がないので、手動で記述します。
リンクしたいURLを[]（角括弧）で囲むのははてな記法のhttp記法ですが、Markdownモードでも同じように使えます。

[http://www.ビンボウ.com/entry/softbank-usestop]

http://www.ビンボウ.com/entry/softbank-usestop

オプションも使えます。
URLの末尾に「:title」を付けると、ページのタイトルを取得して、自動的にテキストリンクとして挿入します。

[http://www.ビンボウ.com/entry/softbank-usestop:title]

【最新】ソフトバンクの料金未払いと利用停止 - 貧乏からの脱出

末尾の「:title」に「=テキスト」を加えると、任意の文字列をテキストリンクにできます。

[http://www.ビンボウ.com/entry/softbank-usestop:title=利用停止になったのは、かれこれもう何度目でしょう！なにか手を打たなければなりません。]

利用停止になったのは、かれこれもう何度目でしょう！なにか手を打たなければなりません。

埋め込みの「:embed」ももちろん使えますよ。

[http://www.ビンボウ.com/entry/softbank-usestop:embed]

Markdownモードの評価

Markdownモードは、ツールを使ってさくさくと記事を書き進めることができます。

Markdownとは──

本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。
Wikipedia:Markdown

「習うより慣れろ」で、使っていくうちに馴染めそうです。

また、必要に応じてHTMLを直接エディタに書き込むこともできます。
アプリには日ごろよく使う書式がツールとして用意されていますので、ブログ上級者だけでなく、初心者でも利用しやすいのではないでしょうか。

検索すれば、書式や使い方についてたくさんの情報が溢れている一方で、Markdownには方言もたくさんあります。
ネット上で見つけたすべての情報が、はてなブログそのものや公式アプリに通用するとは限りませんので、ご注意ください。

アプリの「見たままモード」の大きな弱点である不審な改行は、Markdownモードを使えば、嘘のように払拭されます。また、取り沙汰されるはてなブログの見出しも適切に記述されます。

Markdownは公式アプリの編集モードを検討するうえで、充分に対象となり得ます。

ただ、今のところ「リンク挿入」のツールが役に立たないことと、リストの表示がやや不安定なことが気になります。

最終更新日：2017年4月2日