MENU

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

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



はてなブログでは、編集モードを選択します。

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


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


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

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

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

段落と改行

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

次の文章を入力してみました。

 『春よ来い』

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

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

 作詞:相馬 御風/作曲:弘田 龍太郎

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

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

<p>と</p>の間がひとつの段落です。
<br />は段落の中の改行です。

はてな記法モードでは、エディタで空行と空行に挟まれた部分が、HTMLに変換されると自動で<p>〜</p>となり、普通に改行すれば<br />になります。

つまり、普段のように文章を書けば、タグの効果がそのままブラウザに反映されるというわけです。

このことは、アプリにおける「見たままモード」の大きな障害である「行間」の壁をクリアしたことになります。

とても大きな収穫を得た気分です。
はてな記法モードは使えそうですね。

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

見出し

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

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

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

* 大見出し(仮)<h2>(タップ1回)
** 中見出し(仮)<h3>(タップ2回)
*** 小見出し(仮) <h4>(タップ3回)

大見出し(仮)<h2>→<h3>

中見出し(仮)<h3>→<h4>

小見出し(仮)<h4>→<h5>

ブラウザで見たところ、タップ1回は大見出しのつもりが、<h3>の中見出しになっていて、他も全体的にひとつずつ繰り下がっています。
はてなブログは、やはりアプリでも<h2>が見出しとして設定されていないようです。

でも、心配はいりません。
上記の記事を参考に、必要に応じてスクリプトを貼り付ければよいのです。
そうすれば、自動的に<h3>→<h2>のようにブログ全体の見出しを繰り上げてくれます。

スクリプトがお好きでなければ、無理をする必要はありません。
はてな記法モードはHTMLを直に編集できるので、大見出しにしたい部分を<h2></h2>の間に記述するだけです。

<h2>大見出し(本)</h2>
* 中見出し(本)(タップ1回)
** 小見出し(本)(タップ2回)

大見出し(本)<h2>

中見出し(本)<h3>

小見出し(本)<h4>

見出しはアイコンをタップする代わりに、キーボードで「*」(アスタリスク)を入力しても効果は同じです。

実際には<h1>から<h6>まであるので、はてな記法モードでは「****」が<h6>になるかと思いきや──

*** 小々見出し(仮)<h5>(タップ3回)
**** 小々々見出し(仮) <h6>(手動)
小々見出し(仮)<h5>

*** 小々々見出し(仮) <h6>

<h6>が正しく反映されていません。
ならば、<h2>と同じように直接タグを記述します。

*** 小々見出し(本)<h5>
<h6>小々々見出し(本)<h6></h6>
小々見出し(本)<h5>

小々々見出し (本)<h6>

適切に表示されています。
アプリのはてな記法モードで見出しを使う場合、<h2>と<h6>は直にタグを記述しましょう。

リスト

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

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

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

通常のリスト

アイコンをタップすると、行の先頭に「-」(半角ハイフン・マイナス)が挿入されます。

- Item A
- Item B
- Item C
  • Item A
  • Item B
  • Item C

アイコンを続けてタップすると、「-」が増えて階層になります。
アプリでアイコンがタップできるのは3回がリミット、つまり3層目までですが、足りなければ手動で加えることができます。

- Item A(タップ1回)
-- Sub Item A(タップ2回)
--- Sub Item A.1(タップ3回)
--- Sub Item A.2(タップ3回)
---- Suc Item A.2.1(手動)

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

- 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(手動)
  • 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

数字リスト

アイコンをタップすると「+」(半角プラス)が挿入され、番号の付いたリストを設定することができます。

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

通常のリストと同じく、続けてタップすれば「+」が増えて階層になります。
アイコンのタップは3回までですが、キーボードから直接「+」を入力して階層を増やすことができます。

+ Step 1(タップ1回)
++ Sub Step 1(タップ2回)
+++ Sub Step 1.1(タップ3回)
+++ Sub Step 1.2(タップ3回)
++++ Sub Step 1.2.1(手動)
++++ Sub Step 1.2.2(手動)
++++ Sub Step 1.2.3(手動)

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

  1. Step 1(タップ1回)
    1. Sub Step 1(タップ2回)
      1. Sub Step 1.1(タップ3回)
      2. Sub Step 1.2(タップ3回)
        1. Sub Step 1.2.1(手動)
        2. Sub Step 1.2.2(手動)
        3. Sub Step 1.2.3(手動)

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

+ Step 1
-- Item A
-- Item B
+++ Sub Step 1
---- Sub Item A
---- Sub Item B
+++++ Sub Step 1.1
+++++ Sub Step 1.2
+++++ 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

リスト内で改行したいときは、<br />を記述しましょう。

リンク

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

リンクはツールの3ページ目の一番左のアイコンです。

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

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

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

仕方がないので、手動ではてな記法を記述します。
リンクしたいURLを[](角括弧)で囲むのが、はてな記法における自動リンクの基本です。

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

URLの後ろに「:title」を付けると、ページのタイトルを取得して、自動的にテキストリンクとして挿入します。

[http://www.ビンボウ.com/entry/softbank-usestop:title]
【最新】ソフトバンクの料金未払いと利用停止 - 貧乏からの脱出

「:title=text」を使うと、任意の文字列をテキストリンクにできます。

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

URLの後ろに「:embed」を付けると、サイトごとに最適化された形式で、動画や音楽などのコンテンツを埋め込みます。
一般的なウェブページは、ブログカードが利用できます。

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

はてな記法モードの評価

はてな記法モードにおいて、各ツールは直感的な操作性で、さくさくと記事を書き進めることができます。

「記法」と聞くとなんだか身構えてしまいますが、煩雑なHTMLを簡単に記述できるようにしたものと考えると、慣れれば馴染むのは早そうです。

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

ネット上には、はてな記法の書式や使い方について、たくさんの情報があります。
ちなみに、こちらははてな記法の一覧です。
はてなダイアリーで使うことを前提としているので、はてなブログとは必ずしも一致しませんが、ほとんど同じ書式が通用します。

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

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

ただ、今のところ「リンク挿入」のツールが役に立たないことだけが解せません。
──私だけなのでしょうか。

最終更新日:2017年4月1日