「 」は見えない文字で半角スペースに似てます
「HTML表示」の編集画面を良く開く人は見慣れていると思いますが、編集画面で「Enter」を打つと「<p> </p>」というコードが生成されます。
「p要素」は段落を意味するので「<p>見えない文字</p>」で短い1行を作り、これは改行(空白行を入れる)ことになります。 これを DevToolsで見ると、下の様に「<p><br></p>」と解釈される様です。
良く判らないが、これがアメブロ編集画面の標準の「改行」の姿です。 ここに出てくる「 」について調べると、実は1個の文字らしい。 ユニコードのエスケープ表記を使うと「\u00A0」だそうで、普通の半角空白は「\u0020」で、これとは異なるものです。 なぜ半角空白を持ちだしたかというと、「\u00A0」も半角空白と同じ幅で空白として文字列上に幅を持つからです。
このあたりの特殊文字の違いは複雑で、興味がある方は調べて見てください。
pre枠でコード表記をした場合の空白
下のコードを表記したpre枠を例にします。
これを DevToolsで見ると、グレー背景の「 」が沢山混ざり、多くの場合は「半角空白」と交互に並んでいます。
これは編集画面の「HTML表示」でも下の様に全く同じです。
なぜ「 」が混ざり込むのかは判りません。 文字数が大変増えそうに見えますが、「 」は1文字の「半角空白」と同じで、本来はその心配はないはずです。 HTML編集枠やDevToolsが「特殊な空白」と表示しているだけですから。
しかし、アメブロの「最新版エディタ」では、「HTML表示」の編集画面の文字数カウントで文字数制限を判定している様です。
文字数表示(これは通常表示の文字数らしい)が同じでも、「 」の含まれたコードは上図の様に文字数制限を超え、「半角空白」に置き換えた場合は制限を越えない場合が出て来ます。 つまり行数の多いコードでは文字数制限に関係してきます。
また、このページのツールは改行の「 」は対象外ですが、改行(空白行)は、文字数制限のカウントでは「<p> </p>」は「13文字」となり、「<br>」の「4文字」に比べて、ずいぶん無駄です。 長い記事で文字数制限を超えた場合に、改行を「<br>」(Shift + Enter)で書き換えると、クリアできる場合が有り得ます。
この文字数問題以上に「半角空白」の方がHTML表示が見易いのは事実です。 そこで「 」を「半角空白」に置き換えるツールを作りました。 このツールは、記事内の全て置き換えるのではなく、「pre枠」内のみで置換え処理をします。
先ず結果から
上の例のコードを実際に書換えて DevToolsで見たところです。
通常表示や実際のブログ画面は同じですが、HTML表示とDevTools表示は大変にすっきりしました。
JavaScriptのコードをブログ掲載する場合は、「通常表示」編集枠の「pre枠」内にコードをペーストするのが無難です。 JavaScriptのコードは、タグ括弧「<」「>」がコード中に含まれる事があり、「HTML表示」の編集枠でこれをペーストすると想定外の事になります。 しかし、その代償として「 」が大量に混入するのです。
ちなみに、「HTML表示」の編集枠ではコメント行の「<」「>」も実効してしまう事があり、大失敗を経験しました。 コード内のタグ括弧は、コメント部も全部実効すると考えるべきです。
ツールの使い方
❶「To Space (nbsp)」のコードを「Tampermonkey」に登録します。
❷ 変換処理をするスクリプトコードだけを、新規の「通常表示」の編集枠を開いて貼付けます。 この新規編集枠は、処理場所として利用するだけです。
❸ ショートカットキー「Ctrl + F10」を押すと、変換を実行するかどうかの選択ダイアログが表示され、これに「OK」を押すと一瞬で変換が行われます。
❹ 変換と同時に、コード全体が「pre枠」に入って表示されます。 これは「pre枠」に入れないと、変換された「半角空白」が自動削除されるからです。
❺ 変換されたコードをブログページに掲載するには、「HTML編集枠」どうしのコピー&ペーストが必要です。「通常編集枠」どうしでコピー&ペーストでは「 」が再び生成されてしまいます。
コード
〔 To Space (nbsp) 〕 ver. 0.1
改善の余地あり
書換え場所に新規の編集画面を用意する必要があり、そこからのコピペ作業も手間です。 試作コードなので、ページ上の対象コード以外の文字列にも影響します。 特定の「pre枠」だけを指定して処理ができれば、変換の結果をそのまま保存できます。 操作上で発展させたいところです。