Swiftワン・ピース・コード：UIWebViewを使う・・ヘッダー部分(標準用)

著者：川上洋

公開日：2019/02/04

最終更新日：2019/02/04

カテゴリー：技術情報

こんにちは、川上です。

UIWebViewでHtmlを記述する順序は、
＜1.ヘッダー＞
＜2.HTML本体＞
＜3.HTML終わり＞
なので、＜1.ヘッダー＞に色んな設定をしておくと、＜2.HTML本体＞内の記述がラクになるのです。
＜1.ヘッダー＞にcssで記述できるので、諸々設定ができるのでした。

func  makeHTMLHeader(_ htmStr: inout String,
                            _ bgColor:String = "#ffffff" ,
                            _ abbwidth:String = "200") // Cell内省略化対応
{
    htmStr += "<head>"
    htmStr += "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=Shift_JIS\">"
    htmStr += "<meta http-equiv=\"Content-Style-Type\" content=\"text/css\">"
 
    // 拡大はするがユーザーがピンチで拡大や、スクロールができないようにする.
    // アプリ側　　webView.scalesPageToFit = true;
    htmStr += " <meta name=\'viewport\' content=\'width=device-width,user-scalable=no\' />"
// アプリ側　　webView.scalesPageToFit = true;

    //電話番号のリンク形式を防ぐ
    htmStr += "<meta name=\"format-detection\" content=\"telephone=no\">"

    // MARK: ＝＝＝　CSS（スタイルシート）を組み込む
    htmStr += "<style type=\"text/css\">"
    htmStr += "<!--"
    
    // MARK: ＝＝　タグで指定する
    htmStr += "body     { line-height:150%}"
  
    // MARK: ＝＝　省略化
    htmStr +=  ".shortcut {"
    htmStr +=  " width:" + abbwidth + "px;" //要素の横幅を指定 150 ～　200
    htmStr +=  " white-space: nowrap;" //横幅のMAXに達しても改行しな
    htmStr +=  " overflow: hidden;"         //  ハミ出した部分を隠す
    htmStr +=  " text-overflow: ellipsis;" // 「…」と省略
    htmStr +=  "}"
//cf  <div class="shortcut">hogehoge123456789</div>
// →  "hogehoge123..." の省略表示
    
    htmStr += "-->"
    htmStr += "</style>"
    htmStr += "</head>"
    
    htmStr += "<html> "
    htmStr += "<body bgcolor=" + bgColor + ">"
}

func makeHTMLHeader(_ htmStr: inout String,

_ bgColor:String = "#ffffff" ,

_ abbwidth:String = "200") // Cell内省略化対応

{

htmStr += "<head>"

htmStr += "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=Shift_JIS\">"

htmStr += "<meta http-equiv=\"Content-Style-Type\" content=\"text/css\">"

// 拡大はするがユーザーがピンチで拡大や、スクロールができないようにする.

// アプリ側　　webView.scalesPageToFit = true;

htmStr += " <meta name=\'viewport\' content=\'width=device-width,user-scalable=no\' />"

// アプリ側　　webView.scalesPageToFit = true;

//電話番号のリンク形式を防ぐ

htmStr += "<meta name=\"format-detection\" content=\"telephone=no\">"

// MARK: ＝＝＝　CSS（スタイルシート）を組み込む

htmStr += "<style type=\"text/css\">"

htmStr += "<!--"

// MARK: ＝＝　タグで指定する

htmStr += "body { line-height:150%}"

// MARK: ＝＝　省略化

htmStr += ".shortcut {"

htmStr += " width:" + abbwidth + "px;" //要素の横幅を指定 150 ～　200

htmStr += " white-space: nowrap;" //横幅のMAXに達しても改行しな

htmStr += " overflow: hidden;" // ハミ出した部分を隠す

htmStr += " text-overflow: ellipsis;" // 「…」と省略

htmStr += "}"

//cf <div class="shortcut">hogehoge123456789</div>

// → "hogehoge123..." の省略表示

htmStr += "-->"

htmStr += "</style>"

htmStr += "</head>"

htmStr += "<html> "

htmStr += "<body bgcolor=" + bgColor + ">"

}

背景色など、いろいろ設定を変更してみると、結構、イメージが💡できそうです。

ではでは。