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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

公式アプリは大変便利ですが、「見たままモード」は全くの役立たずです。
なぜ、デフォルトなのか理解に苦しむのは、私がブログというものを知らないからでしょうか。
最近ではスマホが主要デバイスとなっているというのに、公式アプリの「見たままモード」は不親切すぎます。

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

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

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

段落と改行

記事はいくつかの段落（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>は直にタグを記述しましょう。

- 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

Step 1
Step 2
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（手動）

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

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

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日