68
61

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-01-23

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タグのパターンはどういう正規表現で除外されているのか、もう少し詳しく確認してみる予定。

68
61
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
68
61

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?