Edited at

Google Playストア上のHTMLタグについて

More than 3 years have passed since last update.

Google Play上では HTMLタグ を使って、アプリの紹介文に色をつける事ができる。

それぞれの記述に対して、どのような見せ方になるのか検証してみた。

検証環境



  • Nexus 5 os4.4.2

  • Nexus 5 os5.0

  • PlayストアAPP build version: 5.1.11


タグ
概要
Nexus 5
(5.0)
Nexus 5
(4.4.2)
ブラウザ

<h1> ~ <h6>
見出し


×

Decimal
Hexadecimal
絵文字


<font color>



×

<hr>
横罫線
×
×
×

<a>
リンク


<i>
斜体


<span>
スタイルシート
×
×
×

<u>
下線


<strong>
強調


<b>
太字


<big>
大字


×

<table>
テーブル
×
×
×

<center>
センタリング
×
×
×

<li>
<ul>
リスト
×
×

<br>
改行
×
×
×

<img>
画像
×
×
×

以下、詳細です


見出し

アプリ上だと表示されている

しかしPC上だと<h1>タグが削除されている

文字列
Nexus 5
(5.0)
Nexus 5
(4.4.2)
ブラウザ

<h1>見出しh1</h1>
h1.png
h1.png
見出しh1

<h2>見出しh2</h2>
h2.png
h2.png
見出しh2

<h3>見出しh3</h3>
h3.png
h3.png
見出しh3

<h4>見出しh4</h4>
h4.png
h4.png
見出しh4

<h5>見出しh5</h5>
h5.png
h5.png
見出しh5

<h6>見出しh6</h6>
h6.png
h6.png
見出しh6


絵文字

同じ端末でも Android OS のバージョンによってフォントが変わるので、見せ方が変わっています。

文字列
Nexus 5
(5.0)
Nexus 5
(4.4.2)
ブラウザ

&#9729;
e1.png
emoji.png

&#x2601;
e1.png
emoji.png

<font color=Red>&#9729;</font>
e2.png
emoji.png


色文字列指定だと効かないパターンもありますが、RGB指定だと反映されます。

文字列
Nexus 5
(5.0)
Nexus 5
(4.4.2)
ブラウザ

<font color=Orange>Color Orange</font>
c1.png
c1.png
Color Orange

<font color=Red>Color Red</font>
c2.png
c2.png
Color Red

<font color=OrangeRed>Color OrangeRed</font>
c3.png
c3.png
Color OrangeRed

<font color=DarkOrange>Color DarkOrange</font>
c4.png
c4.png
Color DarkOrange

<font color=#ED6103>Color #ED6103</font>
c5.png
c5.png
Color #ED6103


横罫線

表示すらされません。

文字列
Nexus 5
(5.0)
Nexus 5
(4.4.2)
ブラウザ

<hr>
表示なし
表示なし
表示なし


リンク

aタグは play.google.com や market.android.com へのリンクは正常に動作しますが、それ以外は正しく表示されません。

またスキームURLは、aタグが削除されてしまいます。

文字列
Nexus 5
(5.0)
Nexus 5
(4.4.2)
ブラウザ

http://www.google.co.jp/
l1.png
l1.png

http://www.google.co.jp/

<a href="https://www.google.co.jp/">Link</a>
l2.png
l2.png

https://www.google.co.jp/">Link

<a href="https://play.google.com/store/apps/details?id=jp.samril.helloworld2">Google Play Link</a>
l3.png
l3.png
Google Play Link

<a href="http://market.android.com/details?id=jp.samril.helloworld2">market Link</a>
l4.png
l4.png
market Link

<a href="market://details?id=jp.samril.helloworld2">market scheme</a>
l5.png
l5.png
market scheme


斜体

端末のフォントにより、マルチバイト文字列も斜体に"なる/ならない"があるそうです。

文字列
Nexus 5
(5.0)
Nexus 5
(4.4.2)
ブラウザ

<i>斜体i</i>
i1.png
i1.png
斜体i


Span style

spanタグは残りますが、styleはすべて削除されてしまいます

文字列
Nexus 5
(5.0)
Nexus 5
(4.4.2)
ブラウザ

<span style="background-color: #0099FF">青色</span>
s1.png
s1.png
青色

<span style="font-style: italic">斜体style</span>
s2.png
s2.png
斜体style

<span style="font-size: large">大字style</span>
s3.png
s3.png
大字style


下線

すべて効きます。

文字列
Nexus 5
(5.0)
Nexus 5
(4.4.2)
ブラウザ

あああ<u>下線</u>いいい
u1.png
u1.png
あああ下線いいい


強調

すべて効きます。

文字列
Nexus 5
(5.0)
Nexus 5
(4.4.2)
ブラウザ

あああ<strong>強調</strong>いいい
stor1.png
str1.png
あああ強調いいい


太字

すべて効きます。

文字列
Nexus 5
(5.0)
Nexus 5
(4.4.2)
ブラウザ

あああ<b>太字</b>いいい
b1.png
b1.png
あああ太字いいい


大字

PCでは反映されませんが、Playアプリでは効きます。

文字列
Nexus 5
(5.0)
Nexus 5
(4.4.2)
ブラウザ

<big>大字big</big>
big1.png
big1.png
大字big


テーブル

だめです。

文字列
Nexus 5
(5.0)
Nexus 5
(4.4.2)
ブラウザ

<table border="1"><caption>タイトル</caption><tr><td>XXXX</td><td>AAAA</td></tr><tr><td>YYYY</td><td>BBBB</td></tr><tr><td>ZZZZ</td><td>CCCC</td></tr></table>
ta1.png
table.png
タイトル
XXXXAAAA
YYYYBBBB
ZZZZCCCC


センタリング

centerタグは除外されます。

文字列
Nexus 5
(5.0)
Nexus 5
(4.4.2)
ブラウザ

<center>center</center>
効果なし
効果なし

center


リスト

PCでは効くのですが、Playアプリでは表示されません。

文字列
Nexus 5
(5.0)
Nexus 5
(4.4.2)
ブラウザ

<dir><li>あああ</li><li>いいい</li><li>ううう</li></dir>
li1.png
li.png
list1.png

<ul type="disc"><li>あああ</li><li>いいい</li><li>ううう</li></ul>
li1.png
li.png
list1.png


改行

brタグは除外されます。

文字列
Nexus 5
(5.0)
Nexus 5
(4.4.2)
ブラウザ

改行前</br>改行後
br1.png
br1.png
改行前改行後


画像

むりっす。

文字列
Nexus 5
(5.0)
Nexus 5
(4.4.2)
ブラウザ

<img src="http://www.homes.co.jp/search/assets/img/default/info/app/detail/appicon_homes.png" alt="homes">
img1.png
img.png

http://www.homes.co.jp/search/assets/img/default/info/app/detail/appicon_homes.png" alt="homes">


まとめ

PCのPlayストアを見る人は少ないと思うので、Playアプリの見せ方を優先したほうが良い。

フォントの問題でcolor判定が変わったりするので、どうせなら当てた方が良い。

aタグやimgタグのパターンはどういう正規表現で除外されているのか、もう少し詳しく確認してみる予定。