iOSプログラミングの話です。

アプリ内にWebブラウザコンポーネントであるUIWebViewを埋め込んで簡易的にWebページを扱えるようにする必要があったんですが、その表示倍率を直接制御するメソッドやプロパティがありませんでした。海外の掲示板も含めて結構質問は出てたんですが、有用な回答は得られず。

まず散見されたのはUIScrollViewの上にUIWebViewを置いて、UIScrollView側でピンチやスクロールを制御すればいいんじゃね？というアイデア。実際にやってみたんですが、以下の問題点がありました。

• UIIWebViewの標準操作であるダブルタップでブロック最適化ズーム(?)動作が使えなくなる
• ズームの品質が低い（文字がボケる）

そして何より、よくよくAPIガイドを読んだら「UIWebViewとUITableViewをUIScrollViewの上に置くのは予期せぬ動作を引き起こす可能性があるので推奨しない」と書いてあった。禁止ではないのでAppStoreの審査でリジェクトされるといほどではないかも知れないけれど、将来的なAPIの仕様変更でおかしなことにならないとも限らない。

で、悩んだ末に辿り着いた答えは、stringByEvaluatingJavaScriptFromStringメソッドを使ってWebコンテンツを書き換える方法。

まず単純な例。

[webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat: @"window.scrollTo(0, 100);"]];

これを実行すると、Webコンテンツ上で「window.scrollTo(0,100);」というJavaScriptを実行したことになります。つまり画面が下に100ピクセル分スクロールします。

これを応用して、iOSのブラウザに対するズーム定義をmetaタグで追加してやる、ということをしてやるワケです。metaタグの仕様についてはAppleのドキュメントを参照するか、「meta viewport」などでググって下さい。

今回の閲覧対象ページはこのmetaタグ自体が存在しなかったので、タグ自体を作成してheadタグの中、titleタグの前に挿入しています。

[webView stringByEvaluatingJavaScriptFromString:@"var bodyNode = document.getElementsByTagName(‘head’).item(0);"  
"var titleNode = document.getElementsByTagName(‘title’).item(0);"
"var newNode = document.createElement(‘meta’);"
"newNode.name = ‘viewport’;"
"newNode.content = ‘width = 1024, initial-scale = 1.2, minimum-scale = 0.3, maximum-scale = 1.2’;"
"bodyNode.insertBefore(newNode, titleNode);"];

@””の文字オブジェクトは;で切らない限り改行入れて列挙できるので、見やすさの為にそうしています。

１行目でbodyNodeという変数にheadタグの位置を取得。

２行目でtitleNodeという変数にtitleタグの位置を取得。

３行目でnewNodeという変数にmetaタグを作成。

４行目でそれに「name=’Viewport’」に相当する記述を追加。

５行目に更に「content = ‘width = 1024, initial-scale = 1.2, minimum-scale = 0.3, maximum-scale = 1.2’;" 」を追加。数値は適宜状況にあわせて調整を。ちなみに=の前後にスペースがないとダメとどっかで読んだのでそうしてます。

６行目で、bodyNode(=headタグ)内のtitleNode(=titleタグ)の直前にnewNode（=metaタグ)を挿入して完成です。

 

最初から「<meta name=’viewport’…>」が書かれているページに対してはcontentだけを書き換えるような処理をしないといけないので、汎用的なWebブラウザとして使うなら分岐処理も入ったもう少し複雑なJavaScriptが必要でしょうが、今回は対象サイトが固定のアプリなのでこれだけで済みました。

参考になれば幸いです。