こんにちは。マっさんです。
タイトル通り、HTMLやJavaScriptのソースコードの文字列をWebViewに表示させる方法を書きます。
またこの方法はWebViewだけではなく、WebKit Viewでも動作します。
今回は以下の様な Twitter の画面を表示させる事をゴールとします。
以下がソースコードとなっています。
import UIKit import WebKit class ViewController: UIViewController, UIWebViewDelegate { // StoryBoard で接続されている事 @IBOutlet weak var webView: UIWebView! let htmlTwitterString = """ <blockquote class="twitter-tweet tw-align-center"><p lang="en" dir="ltr"><a href="https://twitter.com/hashtag/Turkey?src=hash&ref_src=twsrc%5Etfw">#Turkey</a> hints at pulling access to <a href="https://twitter.com/hashtag/Incirlik?src=hash&ref_src=twsrc%5Etfw">#Incirlik</a> ABand if US acts over <a href="https://twitter.com/hashtag/Russian?src=hash&ref_src=twsrc%5Etfw">#Russian</a> weapons purchase <a href="https://t.co/tp7Oa5w0zO">https://t.co/tp7Oa5w0zO</a></p>— Michael Abrams (@stripes_photog) <a href="https://twitter.com/stripes_photog/status/1153671797843398657?ref_src=twsrc%5Etfw">July 23, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><br/> """ override func viewDidLoad() { super.viewDidLoad() // htmlTwitterString変数を渡す webView.loadHTMLString(htmlTwitterString, baseURL: nil) } }
このloadHTMLStringメソッドにHTMLのCode、もしくはURLを引数として渡すと、UIWebViewに表示させることができます。
・補足
もし、Twitterでタイムラインを取得したい場合は、以下のリンクへ飛んでください。
What would you like to embed?
https://publish.twitter.com
そして以下の様に、埋め込みたいタイムラインのURLを貼り、画面を進むと・・・
上記の写真の様に埋め込み様のCodeを取得する事ができます。 取得したURLをHTMLに記載したら、指定したタイムラインを埋め込むことができます。
以上です!今日はこの辺で!