WebViewの高度な使い方
WebViewは通常、次のようにWebページをロードするために使用されます.
しかし、場合によっては、すべてではなく、Webページの一部をロードするだけです.例えば、ニュースページはタイトルと本文をロードするだけで、広告、サイドバーなどを捨てます.どうやってこの問題を解決しますか?
次に、次の4つのステップから展開します.
Created with Raphal2.1.0指定urlのページhtmlをキャプチャしてページの指定ラベルを抽出し、ローカルデータ構造を生成データ構造に基づいてローカルHtml WebViewを生成してローカルHtmlをロードする
以上の手順は、Crawler、Parser、Renderer、Loaderの4つのモジュールに対応しています.
CrawlerとParserでは、重要なツールであるJsoupに関連しています.
JsoupはJavaのHTML解析器で、あるURLアドレス、HTMLテキストの内容を直接解析することができます.DOM、CSS、およびjQueryのような操作方法によってデータを取り出し、操作できる非常に省力的なAPIを提供します.
具体的には公式サイトを参照してください.http://jsoup.org/
次に、上記各モジュールの実装について、コードレベルから順に説明する.
まず、全体的なフレームワークを示します.
次はCrawlerで、機能は簡単で、get方式で指定urlのhtmlを捕まえて、以下のようにします
そしてParserは,Crawlerによって得られたページHtmlの関心ラベルを抽出し,ローカルデータ構造を生成するために用いられる.
次に、ローカルデータ構造をレンダーし、ローカルHtmlを生成します.
最後に、WebViewからレンダリング後のローカルHtmlをロードすればよい
全体的に基本的にはこれらですが、画像がどのようにロードされるか、ローカルhtmlスタイルがどのように調整されるかなどの詳細は後で議論します.
mWebView.loadUrl(mUrl);
しかし、場合によっては、すべてではなく、Webページの一部をロードするだけです.例えば、ニュースページはタイトルと本文をロードするだけで、広告、サイドバーなどを捨てます.どうやってこの問題を解決しますか?
次に、次の4つのステップから展開します.
Created with Raphal2.1.0指定urlのページhtmlをキャプチャしてページの指定ラベルを抽出し、ローカルデータ構造を生成データ構造に基づいてローカルHtml WebViewを生成してローカルHtmlをロードする
以上の手順は、Crawler、Parser、Renderer、Loaderの4つのモジュールに対応しています.
CrawlerとParserでは、重要なツールであるJsoupに関連しています.
JsoupはJavaのHTML解析器で、あるURLアドレス、HTMLテキストの内容を直接解析することができます.DOM、CSS、およびjQueryのような操作方法によってデータを取り出し、操作できる非常に省力的なAPIを提供します.
具体的には公式サイトを参照してください.http://jsoup.org/
次に、上記各モジュールの実装について、コードレベルから順に説明する.
まず、全体的なフレームワークを示します.
public void loadRemotePage(String url) {
WebPageTransformer.transform(url, new IWebPageTransformer() {
@Override
public void onPageTransform(String content) {
// TODO Auto-generated method stub
loadLocalPage(content);
}
});
}
public class WebPageTransformer {
public static interface IWebPageTransformer {
public void onPageTransform(String content);
}
public static void transform(final String url, final IWebPageTransformer transformer) {
AsyncTaskUtils.execute(new AsyncTask<Void, Void, String>() {
@Override
protected String doInBackground(Void... params) {
// TODO Auto-generated method stub
Document doc = ArticleCrawler.crawlWebPage(url);
Article article = ArticleParser.parseArticle(doc);
return ArticleRender.render(article);
}
@Override
protected void onPostExecute(String html) {
// TODO Auto-generated method stub
if (transformer != null) {
transformer.onPageTransform(html);
}
}
});
}
}
次はCrawlerで、機能は簡単で、get方式で指定urlのhtmlを捕まえて、以下のようにします
public class ArticleCrawler {
public static Document crawlWebPage(String url) {
try {
Document document = Jsoup.connect(url)
.userAgent("Mozilla").get();
return document;
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return null;
}
}
そしてParserは,Crawlerによって得られたページHtmlの関心ラベルを抽出し,ローカルデータ構造を生成するために用いられる.
public class ArticleParser {
public static Article parseArticle(Document doc) {
Article article = new Article();
Element titleElem = doc.getElementById("artical_topic");
if (titleElem != null) {
Title title = new Title();
title.setText(titleElem.text());
article.addElementRender(title);
}
Elements elements = doc.select("div#main_content p");
for (Element element : elements) {
if (element.hasClass("detailPic")) {
Elements images = element.select("img");
String src = images.get(0).attr("src");
if (!TextUtils.isEmpty(src)) {
Image image = new Image();
image.setUrl(src);
image.setImageSize();
article.addElementRender(image);
}
} else {
Span span = new Span();
span.setText(element.text());
article.addElementRender(span);
}
}
return article;
}
}
次に、ローカルデータ構造をレンダーし、ローカルHtmlを生成します.
public class ArticleRender {
public static String render(Article article) {
StringBuilder sb = new StringBuilder();
List<ElementRender> renders = article.getElementRenders();
for (ElementRender render : renders) {
sb.append(render.getRenderHtml());
}
return sb.toString();
}
}
最後に、WebViewからレンダリング後のローカルHtmlをロードすればよい
public void loadLocalPage(String content) {
String template = CommonUtils.getFileFromAssets(mContext, "newscont.html");
template = template.replace("{{template_content}}", content);
template = template.replace("{{webview_width}}", "" + CommonUtils.getScreenWidthIntPx());
template = template.replace("{{webview_height}}", "" + CommonUtils.getScreenHeightIntPx());
loadDataWithBaseURL("file:///android_asset/", template, "text/html", "UTF-8", null);
}
全体的に基本的にはこれらですが、画像がどのようにロードされるか、ローカルhtmlスタイルがどのように調整されるかなどの詳細は後で議論します.