目次
- はじめに
- 完成イメージ
- RichTextの機能
- 実装方法
- 最後に
はじめに
文章中に強調したい部分に色をつけたり、太文字で表示したり、
文字にリンクを挿入したりしているページがあると思います。
Visualizerでは、RichText Widgetを使って、
開発経験のない人でも超簡単に文字の装飾をすることが可能です。
今回は、例として簡単な商品紹介ページを作成していきましょう！
先にどんな機能があるかを知りたい人は、
RichTextの機能の説明をご確認ください
完成イメージ
今回は、以下のような商品紹介ページを作成していきます。
2行目からRichText Widgetを使用しています。
実装の前にRichTextでできることを簡単に紹介します。
RichTextの機能
RichTextでは、HTMLフォーマットを使って、
下記のような様々な表現をすることができます。
サポートされているHTMLフォーマットタグ
| HTMLタグ | 表示内容 |
|---|---|
<b>テキスト</b> |
テキストを太字で表示 |
<i>テキスト</i> |
テキストを斜体で表示 |
<u>テキスト</u> |
テキストに下線（アンダーライン）を表示 |
<a href=""> </a> |
リンクを表示 |
<img src = ""> </ img> |
画像を表示 |
<sub>添え字</sub> |
テキストを下付き文字として表示 |
<sup>上付き文字</sup> |
テキストを上付き文字として表示 |
<label style = "color：#rgbhexformat"> </ label> |
色付きのテキストを表示 |
<br/> |
改行 |
<tel number = ""> </ tel> |
ネイティブアプリケーションで電話番号を表示 |
<a href="tel:"> </a> |
モバイルWebプラットフォームで電話番号を表示 |
注意
- リッチテキストウィジェットはHTMLタグのサポートが制限されており、
ラベルタグは色属性のみをサポートします。
その他の、フォントサイズの変更などには対応しておりません。 -
<a>タグ内のスキンは、デフォルトのSkinが適用され、リッチテキストのSkinは適用されません。
リッチテキストで出来ることが理解できたところで、
早速実装に入っていきましょう！
実装方法
まずは、フォーム内にRichText Widgetを配置していきます。
RichTextを配置したら、右側のLookタブのText入力欄に
表示したい文章を追加していきましょう。
今回は以下のように入力しました。
なんとこの商品が、<label style = "color : #c71585">本日限り</label>999円!!
<img src="https://1.bp.blogs
pot.com/-9u47rZ8kS7U/YHuAgIecucI/AAAAAAABdpw/riNa6OfXu9Mu0rqmr9Tsj-22_4OhuV8aACNcBGAsYHQ/s400/sports_katsudouryoukei.png"></img>
</br>
お申し込みは《<a href= "https://www.yahoo.co.jp/"><u>こちら</u></a>》からどうぞ！
-----------------------
お問い合わせ先
株式会社○○：<a href="tel:">030-000-0000 </a>
-----------------------
順番に詳細を説明します。
文字色の変更
リッチテキストでは、文章中の一部の文字の色を変更することができます。
文字色を変更したい文章をlabelタグで囲んで、#以降にカラーコードを指定してください。
<label style = "color : #c71585"></label>
画像の挿入
文章中に画像を入れることも可能です。
img src以降に、画像のURLを直接指定すると画像の表示が可能です。
下線、リンクの挿入
下記のように、リンク入り文字に下線を引く等、
同じテキスト内に複数の形式を適用する必要がある場合は、
タグをネストすることで表現することができます。
今回は、下記のように<a>タグの中に<u>タグを入れて、
リンク入りの下線付き文字を表現しています。
お申し込みは《<a href= "https://www.yahoo.co.jp/"><u>こちら</u></a>》からどうぞ！
電話番号の表示
アプリで電話番号を表示しタップ時に電話アプリを開きたい場合は、
Webアプリの場合、<a href="tel:">タグを
ネイティブアプリの場合は、<tel number = "">タグを使用します。
表示された画面で電話番号をタップした時に
WebではFaceTimeを開く確認ポップアップが開き、
モバイルの場合は、電話番号を発信する確認ポップアップが開きます。
| Web | Mobile |
|---|---|
 |
 |
実装は以上となります！簡単ですね
最後に
リッチテキストの機能について紹介しました！
リッチテキストウィジェットだけでも様々な文章を表現できるので、
今回紹介したような画面を作成したい方は、ぜひ活用してみてください！
うまく実装できない箇所や、不明な点があればコメントしてもらえると嬉しいです
参考
リッチテキストの機能について：
https://docs.kony.com/konylibrary/visualizer/viz_widget_prog_guide/Default.htm#RichText.htm%3FTocPath%3DReference%7CRichText%2520Widget%7C_____0
フォントサイズの変更に関するQA：
https://basecamp.temenos.com/s/question/0D56A00000RYZTqSAP/rich-text-font-size-has-no-effect