iOS版Wordpressのバグにハマった話。

最近、iPhoneでブログ更新する機会が以前より増してきました。

Macに比べると流石に効率は落ちますが、下書き程度なら意外と問題ないです。

それよりも、軽装で済むメリットが勝ります。

書きたいときにかける感じが実に心地良く、ストレスなく執筆できます。

文章作成には「Ulysses」を使っているので、Macとの同期もスムーズ。

iPhoneで書いた文章を、自宅のMacで修正して公開するようにしています。

本題

先日、ふと「iPhoneからブログを更新してみよう」と思い立ち、iPhoneの「Ulysses」から投稿してみました。

「Ulysses」には「アップロード機能」が備わっており、アプリから直接Wordpressサーバーに記事を投稿することができます。

実際アップロードもスムーズに終わりました。

その後、iOS版Wordpressアプリで記事の校正後、記事を公開。

しかし、投稿された記事をプレビューしてみると、いくつか文章が乱れていました。

再投稿してみましたが、改善せず。

仕方なく、原因を調査することにしました。

症状としては、

文章中の文字サイズが突然小さくなる
文章中の単一のリンクが複数のリンクに分かれている

この時点で察しのいい方はお気づきかと思いますが、明らかに文章中のHTMLが怪しい事が分かります。

では、HTMLの異常がいつどこで発生しているのだろう？と言う話になります。

今回の場合、HTMLを生成している部分は以下の2箇所に絞られます。

Ulyssesからアップロードする際のMarkdown→HTML変換
WordPressでの文章校正（表示をビジュアルからテキストに変更した際）

1はまずないでしょう。

なぜなら、今までも何度かiPadからアップロードした事はありましたが、今回のような問題に遭遇したことはないからです。

となると、疑うべきは2のほう。

もう一度記事をアップロードした後、2の操作を確認してみると、恐るべき処理が行われている事が分かりました。

怪奇現象その1：Spanタグの異常増殖現象

突然だが、今月の22日から12月2日までの10日間、イタリアとスイスへ旅行する予定だ。

上の青の蛍光ペンのように装飾された文字。

一見何の問題もないように見えますが、ソースコード上ではこのようになっています。

突然だが、<span class="keiko_blue">今月の</span><span class="keiko_blue">22</span><span class="keiko_blue">日から</span><span class="keiko_blue">12</span><span class="keiko_blue">月</span><span class="keiko_blue">2</span><span class="keiko_blue">日までの</span><span class="keiko_blue">10</span><span class="keiko_blue">日間、イタリアとスイスへ旅行する予定</span>だ。

これは、先で説明したWordpressアプリの変換処理によって発生したものです。

何かしらの不具合が発生しているのは間違いないです。

見た目上問題ないとはいえ、ちょっと気持ち悪いですよね。

怪奇現象その2：リンク文字列が半角スペース毎に発生

これも上と同じような現象ですが、こっちの方が派手ですね。

これが、

<div class="kaerebalink-box" style="text-align: left; padding-bottom: 20px; font-size: small; zoom: 1; overflow: hidden">
<div class="kaerebalink-image" style="float: left; margin: 0 15px 10px 0"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B07GZ8DZC8/sheklog-22/" target="_blank"><img src="https://images-fe.ssl-images-amazon.com/images/I/41%2BfPCmY5VL._SL160_.jpg" style="border: none"></a></div>
<div class="kaerebalink-info" style="line-height: 120%; zoom: 1; overflow: hidden">
<div class="kaerebalink-name" style="margin-bottom: 10px; line-height: 120%"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B07GZ8DZC8/sheklog-22/" target="_blank">ソニー</a><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B07GZ8DZC8/sheklog-22/" target="_blank"> SONY </a><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B07GZ8DZC8/sheklog-22/" target="_blank">ワイヤレスノイズキャンセリングヘッドホン</a><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B07GZ8DZC8/sheklog-22/" target="_blank"> WH-1000XM3 : LDAC/Bluetooth/</a><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B07GZ8DZC8/sheklog-22/" target="_blank">ハイレゾ</a><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B07GZ8DZC8/sheklog-22/" target="_blank"> </a><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B07GZ8DZC8/sheklog-22/" target="_blank">最大</a><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B07GZ8DZC8/sheklog-22/" target="_blank">30</a><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B07GZ8DZC8/sheklog-22/" target="_blank">時間連続再生</a><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B07GZ8DZC8/sheklog-22/" target="_blank"> </a><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B07GZ8DZC8/sheklog-22/" target="_blank">密閉型</a><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B07GZ8DZC8/sheklog-22/" target="_blank"> </a><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B07GZ8DZC8/sheklog-22/" target="_blank">マイク付</a><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B07GZ8DZC8/sheklog-22/" target="_blank"> 2018</a><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B07GZ8DZC8/sheklog-22/" target="_blank">年モデル</a><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B07GZ8DZC8/sheklog-22/" target="_blank"> </a><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B07GZ8DZC8/sheklog-22/" target="_blank">ブラック</a><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B07GZ8DZC8/sheklog-22/" target="_blank"> WH-1000XM3 B</a></div>
<div class="kaerebalink-name" style="margin-bottom: 10px; line-height: 120%">
<div class="kaerebalink-name" style="margin-bottom: 10px; line-height: 120%">
<div class="kaerebalink-powered-date" style="font-size: 8pt; margin-top: 5px; font-family: verdana; line-height: 120%">posted with <a href="https://kaereba.com" rel="nofollow" target="_blank">カエレバ</a></div>
</div>
<div class="kaerebalink-detail" style="margin-bottom: 5px"> ソニー 2018-10-06</div>
<div class="kaerebalink-link1" style="margin-top: 10px">
<div class="shoplinkamazon" style="display: inline; margin-right: 5px"><a href="https://www.amazon.co.jp/gp/search?keywords=Wh-1000xm3&__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&tag=sheklog-22" target="_blank">Amazon</a></div>
</div>
</div>
</div>

こうなってます。

これは上のリンクをよくみるとわかるのですが、半角スペースの所で文字が区切られているように見えます。

ほー。

これはいけない。