ナギサものおき

【iOS9】SNSのシェアボタンを押した際、内容に半角「+」が入ってしまう問題

calendar

reload

【iOS9】SNSのシェアボタンを押した際、内容に半角「+」が入ってしまう問題

TwitterをはじめとしたSNSは、ブログなどを運営するうえでなくてはならない存在であり、その挙動に不具合がないかどうかは頻繁に確認していたいところであります。

今回、iOS9にアップデートしたからなのか、Twitterアプリをアップデートしたからなのかは不明でしたが、iOSにてTwitterボタンで記事をツイートすると、おかしな文字が紛れ込んでしまうのを修正しました。

半角+がタイトルに入ってしまう問題

念のため言っておくと、現在はもちろん修正しました。ここでは修正前の画像を掲載しています。当ブログをSafariで閲覧しながら、例えば記事をツイートすることができるTwitterボタンをタップしますと…

004

このように既に記事のタイトルとURLを含めてあるツイートが表示されますよね。

005

しかし、このように本来は半角スペースであるべき場所に「+」が入ってしまっており、このままではおかしなタイトルをツイートされることになってしまいます(繰り返しますが、これはSafariだけの問題です)。

006

はて、どういうことでしょうか。

原因

ツイートのURLを見てみますと、Twitterのほうに、こういうテキストとURLをツイートしますよっていうクエリを送信しようとしているわけですよね。

007

これに含まれる半角「+」が、本来は半角スペースに変換されるべきものであるのに、iOS9のSafariは変換を行ってくれず、半角「+」がそのままテキストエリアに入力されてしまうのです。

つまりTwitterに限らず、あらゆるSNSのシェア機能で起こり得るのではないかということになりますね。

ちなみに、なぜiOS9のSafariが原因だと特定したかといえば、

  • 明らかにiOS9にアップデートする前には発生しなかった問題である
  • 他のブラウザでは発生しない

という理由によります。

対策する

言うまでもなく、iOSのブラウザとしてはSafariがほとんど100%のシェアを得ているため、これに対処しなければ、せっかく記事をツイートしてもらっても不格好な内容を晒すことになります。すぐに対処したいところです。

対策は簡単です。SNSのシェア機能に送信するクエリ文字列の「+」を、空白を直接示すURLエンコーディング「%20」に置換してやればよいでしょう。

クエリ文字列はサーバサイドで出力している人もいればJavaScriptで制御している人もいるでしょうから、具体例は示すことはできませんが、それぞれの置換機能を使用してください。

ちなみに、奇跡的にあなたが私と同じくWordPressの「マテリアル」という神テーマを使用している場合、少なくともTwitterについて修正するならば、「share.php」の冒頭のほうに、以下のハイライトされている行を追加してください。

ちなみに、半角「+」自体は「%2B」を入力しないと出ませんので、そっちはあまり心配せずに置換して全くかまいません。

なぜこんなことになったか

今回はSafariがURLエンコーディングの半角スペースとして「+」を認めなかったため、「%20」で代用したということになりましたが、これはどういうことでしょうか。

URLエンコーディングの策定によっては、「+」と「%20」のどっちを推奨するか違っているようなのです。

となるとこれは不具合などではなく、Safariは意図的に、URLエンコーディングとして「+」は使用しないこととしたという可能性もあります。どちらにしろ、何か対応してやらなければいけないことに変わりはないのですが。

終わりに

閑古鳥が鳴いている当ブログだったからよかった(?)ものの、ツイートされる数が4ケタを超えるような人気ページであれば、たかが半角「+」1個でもそれなりの影響を与えてしまうこともあるかもしれません。

Safariが原因であることが判明した以上は、ここで紹介したように対処療法的な回避策しか講じられませんね。もしかしたら意図的なものなのかもしれませんが、そうでなければSafari自体を早急に修正するべきです。

この記事をシェアする

folder リテラシー

【Twitter】悪質な連携アプリの解除方法と正しい見分け方を知ろう
more...

folder ブログについて

ものおき、改修しました。
【お知らせ】サーバ変更を完了しました
ブログ1か月続けて思ったこと
more...