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

著者：川上洋

公開日：2019/02/07

最終更新日：2019/02/07

カテゴリー：技術情報

こんにちは、川上です。

WebViewで縦書き対応は、iOSのVer10.0以降が対応と思われます。
My実機の初版iPadminiは9.3以上にUpできなかったので、縦書きできませんでした（；；’）

  // MARK:+++++ HTML 縦書きヘッダーの設定
    func  makeTategakiHTMLHeader(_ htmStr: inout String,_ bgColor:String = "#ffffff" )
    
    {
        htmStr += "<head>"
        htmStr += "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=Shift_JIS\">"
        htmStr += "<meta http-equiv=\"Content-Style-Type\" content=\"text/css\">"
        //電話番号にリンクが自動で付くのを防ぐ方法
        htmStr += "<meta name=\"format-detection\" content=\"telephone=no\">"
        
        // 拡大はするがユーザーがピンチで拡大や、スクロールができないようにする。 add ver1.2(1)
        htmStr += " <meta name=\'viewport\' content=\'width=device-width,user-scalable=no\' />"
        // アプリ側　　webView.scalesPageToFit = true;
        
        // MARK:CSS（スタイルシート）入門のコードを組み込む
        htmStr += "<style type=\"text/css\">"
        htmStr += "<!--"

        // 縦書きにする
        htmStr += "body{"
        htmStr += "   -ms-writing-mode: tb-rl;"
        htmStr += "    writing-mode: vertical-rl;"
        htmStr += "}"

        htmStr += ".red_atr { border-bottom:solid 3px #ff0000;}"
        htmStr += ".green_atr { border-bottom:solid 3px #008000;}"
        htmStr += ".blue_atr { border-bottom:solid 3px #0000ff;}"
        htmStr += ".sample4 { border-bottom:solid 3px #ff0000;}"
        htmStr += ".darkgray_bkcolor {background-color:#0000ff;}" //使用時に編集する

        htmStr += "-->"
        htmStr += "</style>"
        htmStr += "</head>"
        
        htmStr += "<html> "
        htmStr += "<body bgcolor=" + bgColor + ">"
    }

// MARK:+++++ HTML 縦書きヘッダーの設定

func makeTategakiHTMLHeader(_ htmStr: inout String,_ bgColor:String = "#ffffff" )

{

htmStr += "<head>"

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

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

//電話番号にリンクが自動で付くのを防ぐ方法

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

// 拡大はするがユーザーがピンチで拡大や、スクロールができないようにする。 add ver1.2(1)

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

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

// MARK:CSS（スタイルシート）入門のコードを組み込む

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

htmStr += "<!--"

// 縦書きにする

htmStr += "body{"

htmStr += " -ms-writing-mode: tb-rl;"

htmStr += " writing-mode: vertical-rl;"

htmStr += "}"

htmStr += ".red_atr { border-bottom:solid 3px #ff0000;}"

htmStr += ".green_atr { border-bottom:solid 3px #008000;}"

htmStr += ".blue_atr { border-bottom:solid 3px #0000ff;}"

htmStr += ".sample4 { border-bottom:solid 3px #ff0000;}"

htmStr += ".darkgray_bkcolor {background-color:#0000ff;}" //使用時に編集する

htmStr += "-->"

htmStr += "</style>"

htmStr += "</head>"

htmStr += "<html> "

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

}

なので、記述形式は、先と同様で、

var htmStr:String = ""

//HTML 縦書きヘッダーの設定
makeTategakiHTMLHeader(&htmStr,"#000000")

本体

htmStr += "</html>  </body>"   //HTML EOF

WebView.loadHTMLString(htmStr, baseURL:nil)

var htmStr:String = ""

//HTML 縦書きヘッダーの設定

makeTategakiHTMLHeader(&htmStr,"#000000")

本体

htmStr += "</html> </body>" //HTML EOF

WebView.loadHTMLString(htmStr, baseURL:nil)

で、こんな感じに表示されます。

ではでは。