本記事は「デジタルサイネージアプリ「Sign!」(iOS版)とその実装機能の紹介」の子記事です。
##目的
WKWebViewに流れる文字列(ティッカー、マーキーなどと呼ばれます)を表示するための、WKWebViewに読み込ませるHTML文字列を紹介します。
手順としては、まず、流れる文字列を実現するHTML文字列(String)を紹介し、その後、WKWebViewでその文字列を読み込む方法を紹介します。
##開発・実行環境
- 開発環境：macOS、Xcode(9~10)、Swift(4~5)
- 実行環境：iOS 11以上
##コード
まずはHTML文字列を定義するコードを紹介します。ほとんどがCSSの定義です。コード中に、ポイントを解説しています。
ViewController.swift
let TICKER_HTML = """
<html lang="ja">
<head>
<style>
/* フォント種類、サイズ、色、背景色などはお好きに設定してください */
* {
/* すべてのHTMタグの余白を除きます */
margin: 0;
padding: 0;
}
html {
/* Safariには、画面の向き(縦横)が変化したときに、文字サイズを適度に調整する機能がありますが、それを抑制します */
-webkit-text-size-adjust: 100%;
}
.box {
/* 流れる文字列を表示する範囲を画面いっぱいに設定します */
width: 100vw;
height: 100vh;
/* 流れる文字列を画面の縦方向中央に表示するための設定です */
display: flex;
align-items: center;
}
/* 流れる文字列を収めるpタグです */
p {
/* 文字列が画面幅より長くても途中で途切れないように、インラインボックスとして表示します */
display: inline-block;
/* 文字列が途中で改行しないようにします */
white-space: nowrap;
/* 画面の横幅分の余白を文字列の前に取ります。これにより、画面右端から文字列が流れ始めます */
padding-left: 100vw;
/* 実際に文字列を流すためのアニメーション設定です。「%d」には、後ほど、流れる速さ(秒数)が入ります */
animation: marquee %ds linear infinite;
}
/* 実際に文字列を流すための設定です */
@keyframes marquee {
from {
/* 文字列の左端が画面の左端に揃っているところから流れ始めますが、先の設定で文字列の左端に100%のpaddingが入っていますので、あたかも画面の右端から文字列が現れるように見えます。なお「%%」は「%」のことです(Stringの中で%を表現するには%%と書きます) */
transform: translate(0%%);
}
to {
/* 文字列の右端が画面の左端に来るまで流します */
transform: translate(-100%%);
}
}
</style>
</head>
<body>
<div class="box">
%@ /* この「%@」に、後ほど、流したい文字列が入ります */
</div>
</body>
</html>
"""
以上のHTML文字列には、2箇所、値を入れるべき箇所があります。文字列が流れる秒数を指定するところ(%d)と、実際に流す文字列を指定するところ(%@)です。これらの値をString(format:)で指定しながら、WKWebViewで文字列をHTMLとして読み込むメソッド loadHTMLString() で読み込みます。
ViewController.swift
@IBOutlet weak var webview: WKWebView!
override func viewDidLoad() {
super.viewDidLoad()
self.webview.loadHTMLString(
String(format: TICKER_HTML, 10, "この文字列が流れます") // 任意の秒数(ここでは10)と文字列を指定しています
, baseURL: nil)
}
以上です。