携帯WebページをiPhoneで表示する

当ブログのアクセスを解析していると、「UIWebView内の画面遷移をフックする」がよく閲覧されているようです。今回もUIWebView関連で少し書いてみます。

携帯Webページをサーバ側の変更なしiPhone/iPadで読みやすく表示したいということはよくあるかと思います。
携帯WebページというのはPC向けページに比べレイアウトがシンプルなので、場合によっては同じ内容のPC向けページを見るよりも閲覧性は良かったりするのですが、いかんせん文字が小さく表示されるよう設定されており、iPhoneで見る場合にはそこがネックになります。

UIWebViewの機能を用いると、携帯Webページの表示を改良することができます。UIWebViewは、Webページをロードし終わると、webViewDidFinishLoad:というデリゲートメソッドをデリゲートに対して送ってくれます。

さらに、stringByEvaluatingJavaScriptFromString:という、UIWebView内のHTMLドキュメントに対してJavaScriptを実行するメソッドが用意されていたりします。

つまり、この二つのメソッドを用いると、ページをロードし終わった段階で、JavaScriptを実行して、スタイルシートを動的に追加することで、携帯Web向けページのスタイルをiPhoneで見やすいように、クライアント側で変更することができます。

- (void)webViewDidFinishLoad:(UIWebView *)webView {
  // JavaScriptファイルを読み込む
  NSError* error;
  NSString* styleJsPath =    [[NSBundle mainBundle] pathForResource:@"Style" ofType:@"js"];

 
  NSString* js = [NSString  stringWithContentsOfFile:styleJsPath
			    encoding:
				  NSUTF8StringEncoding
			       error:
			    &error];

  //  JavaScript文字列を評価
  NSString* result = [webView stringByEvaluatingJavaScriptFromString:js];

}

JavaScriptのコードは下記の通り。下の例ではfontタグで指定された文字列を強制的に２５ptに設定します。

function style() {

  var styleNode = document.createElement("style");
  var css = document.createTextNode( "font { font-size:  25pt;} " );
  styleNode.appendChild( css );
  var list = document.getElementsByTagName("head");
  list[0].appendChild( styleNode );

}
style();