WebViewの高度な使い方


WebViewは通常、次のようにWebページをロードするために使用されます.
mWebView.loadUrl(mUrl);

しかし、場合によっては、すべてではなく、Webページの一部をロードするだけです.例えば、ニュースページはタイトルと本文をロードするだけで、広告、サイドバーなどを捨てます.どうやってこの問題を解決しますか?
次に、次の4つのステップから展開します.
Created with Raphal2.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スタイルがどのように調整されるかなどの詳細は後で議論します.