MENU

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

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


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

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

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

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





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

そこで、別の編集モードを試してみることにしました。
この記事は「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>が記事のタイトルとして使われています。

リスト

わかりやすい記事を書くうえで、リストはとても便利で効果的な表現方法です。

リストを記述するツールは2ページ目です。
左から2番目もしくは3番目のアイコンをタップします。

2番目は通常のリスト、3番目は数字リストです。

通常のリスト

アイコンをタップすると、行の先頭に「* 」(アスタリスク)が挿入されます。

* Item A
* Item B
* Item C
  • Item A
  • Item B
  • Item C

アイコンを続けてタップすると、インデント(字下げ)が挿入されて階層になります。
アイコンがタップできるのは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
  1. Step 1
  2. Step 2
  3. 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回)
  1. 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
  1. 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
  1. 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日