[Я]Twitterアカウント自動リンク化実装で他の表示がおかしくなる時の回避策(追記あり)

スポンサーリンク

自動リンク化は便利だけど、弊害も発生…

Tweet Me
Tweet Me / katerha

以前、以下のエントリーを書きました。

Twitter in Sudan! / simsimt


要約すると、

WordPressの記事内で、@(アットマーク)の直後にTwitterアカウント名を入力すると、自動でTwitterへのリンクに変換してくれる

という機能。WordPressテーマファイルの1つ、functions.phpに処理コードを追加することで実装できます。

イチイチTwitterのページからリンクURLをコピーして、アカウントにリンクを手動設定して、という手間がなくなるので便利なのですが、別の弊害を生じさせてることに後で気付きました。

iTunesバッヂなどが正常に表示されない現象

iPhoneアプリやMacアプリ、iTunesの音楽や映画などをブログで紹介する際、私は以前から「AppHtml」という機能を愛用させて頂いてます。

AppHtmlを使ってリンクを生成すると何の問題もないんですが、公式に提供されている「ITMS Link Maker」などを使ってリンクを生成した場合、おかしな現象が発生します。

実際にITMS Link Makerを使ってリンク用iTunesバッヂを生成してみますね。

Skitched 20140121 225527

↑該当商品をクリックすると、

Skitched 20140121 225826

↑リンク用コードが生成されます。コード欄の下には、コードをブログなどに貼り付けることによって設置されるiTunesバッヂも表示されています。

このコードをそのまんまブログの本文中に貼り付けると、通常であれば何の問題もなくiTunesバッヂが表示されるんです。しかし、冒頭で紹介した「Twitterアカウントへの自動リンク機能」を実装している状態でコードを貼り付けると、

Skitched 20140121 230527

↑こんな表示になっちゃいます。バッヂの上に青い文字が出てるし、リンクコードが途中からそのまんま表示されてしまってる。最初これを見たとき、どこかのハッカー集団が何かのメッセージを送ってきたのかと思った。

原因はコードの中に含まれる「@」

何が原因だろう、とコードをジーッと眺めていると、

Skitched 20140121 231506

コードの中に「@」が含まれていることに気付きました。バッヂの上にカブってる「media」という文字、バッヂ横に出ちゃってる「only screen」うんぬんというコードは、いずれも「@」の直後に書かれているもの。

ってことは、原因は明白ですよね。「@」が悪さをしている。となると、すぐピンと来ました。私が実装した「Twitterアカウントの自動リンク化機能」が根本的な原因なんだな、と。

試しに、コードから「@」の1文字だけを削除してみると、

Skitched 20140121 232320

↑バッヂが表示され、コードは表示されなくなります。

Skitched 20140121 232709

↑バッヂをクリックすると商品ページも表示されました。

ただ、本当にこれでいいの?っていう疑問が付きまといます。「@」を取っちゃうことで別の弊害(不利益)が生じても困るし。この辺りの仕組みに詳しくないので不安だし。

「@」を取らずに正常表示させる回避策

http://daisukeblog.com/?p=1900

↑上記エントリーに回避策が解説されていました。@hondamarlboro さんには「MovieHtmlカスタマイズ」の頃から幾度となくコード関連でお知恵を拝借しています。今回も助けて頂きました。ありがとうございます。

※映画リンク生成機能「MovieHtml」は現在AppHtmlに統合されており、私は現在もお世話になり続けております。

上記エントリー中に「TIPS」として解説がありました。引用させていただきます。

この方法だと”@”以降の文字列をTwitterアカウントと誤認する場合もあります(メールアドレスは対応済み)が、その場合はISO数値コード”@”を使って表記すると回避できます。

via:代助のブログ

この方法をそのまま採用し、

@media only screen{background-image:

と書かれている部分の「@」を、

@media only screen{background-image:

と手動で書き換えてあげると、「@」を削除することなくバッヂなどが正常に表示され、機能もするようになります。

【追記】申し訳ありません。この方法だと、ブラウザ上での表示が正常になるというだけで、本来のiTunesバッヂの機能が正常には動作しないようです。別の回避策を含む詳細はエントリー最下部に追記しました。

iTunesのリンク以外でも「@」を使うことでTwitterアカウントと自動判定され、おかしな表示になっちゃうことがある場合は、「@」という文字列に置き換えてあげれば上手くいくと思います。

りくま ( @Rikuma_ )的まとめ

手動で置き換えるのは少々面倒くさい気もしますが、「@」という文字列を辞書登録しておくと置き換え作業の際に便利かもしれませんね。

【追記】

iTunesバッヂに関しては、今回紹介した方法でも単に文字列を置き換えるだけで、本来の機能である「@media only screen」以降が正常に動作しないようです。

そういう意味では「@」の1文字を削除するのと本質的に変わらない、という旨のご指摘を@hondamarlboro さんから頂きました。@hondamarlboro さん、ありがとうございました。

別の回避策を教えて頂きましたので、このエントリー内にて紹介したiTunesバッヂのサンプルを修正する方法として以下に追記します。

1. 「@media」を、「@」の後ろに半角スペースを入れて「@ media」に変更する。

↑この方法でiTunesバッヂが正常に表示されればOK。

半角スペースを入れても症状が変わらず、まだコードが表示されちゃう場合は、WordPressに入れている「Twitter系のプラグイン」が干渉して悪影響を及ぼしてる可能性があるとのこと。

その「Twitter系プラグイン」がなくても大丈夫な場合は、Twitter系プラグインを停止すると上記1.の方法でバッヂが正常表示&動作するそうです。

Twitter系プラグインを停止させたくない場合は、

2. iTunesバッヂのHTMLコードで「@」以降を全て削除する。

↑本来の「@media」機能は無効になってしまいますが、ひとまずブラウザ上ではバッヂが正常表示されるようになります。

それはイヤだ、バッヂも本来の機能を使いたい、という場合は、

3. functions.phpに追加した「Twitterアカウント自動リンク」の箇所を削除する。

↑となります。

ちなみに、今回のご指摘を受けて私自身、iTunesバッヂの設置テストを再度やってみたところ、上記1.の「半角スペースを入れる」方法で問題なく表示されました。

「@media」うんぬんの機能を十分把握していなかったため、表示だけの解説になってしまいました。申し訳ありません。

そもそも「@media」とは?ということに関しては、以下エントリーで詳しく解説されていました。

http://webdesignrecipes.com/web-design-for-mobile-with-css3-media-queries/

大変参考になりました。ありがとうございました。

※なお、Twitterアカウントではないのに「@」を付けたせいで以降の文字列が勝手にリンク化されちゃう時や、記事リンクでタイトルの途中に「@」が入っていると以降がリンク解除されてしまう時などの回避策としては、今回紹介した「@」に置き換える方法で問題ありません。(文字表示を置き換えるだけですので)
スポンサーリンク
この記事がお気に召したら
「いいね!」をお願いします!
「りくまろぐ」の最新情報を
Facebookにお届けします