[PR]
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
HTML5をUIWebViewで表示させる
結果から先に書くと、UIWebViewでもちゃんとHTML5は認識されて表示されました。
実験にはiPhone SDK 3.1.2 with Xcode 3.2.1を使用しました。実験の大まかな手順は以下の通りです。
1.Xcodeで新規プロジェクトを作成する。テンプレートはiPhone OS > Application > View-based Applicationを選択し、プロジェクト名は「CanvasTest」としました。
2.Recorcesに新規ファイルを追加します。テンプレートはMac OS X > Other > 空のファイルを選択し、ファイル名は「CanvasTest.html」としました。内容は以下の通りです。iPhone OSでUIWebViewに表示させるだけなので、titleなどは入れずにシンプルな構成にしています。
<!doctype html>
<html>
<head>
<script type="text/javascript">
function draw() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// 三角形を描きます
ctx.beginPath();
ctx.moveTo(150, 50);
ctx.lineTo(250, 250);
ctx.lineTo(50, 250);
ctx.closePath();
ctx.stroke();
}
</script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body onload="draw();">
<canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>
3.念のため変更を保存します。
4.Classesを展開してCanvasTestViewController.hを開き、@interfaceから@endまでの部分を以下のように変更します。
@interface CanvasTestViewController : UIViewController {
UIWebView *myWebView;
}
@property (nonatomic,retain) IBOutlet UIWebView *myWebView;
@end
5.変更を保存し、CanvasTextViewController.mを開き、＠implementationの直後に以下を追加します。エラー対策なしの手抜きですが気にしなくても問題ないでしょう。
@synthesize myWebView;
- (void)viewWillAppear:(BOOL)animated {
[super viewWillAppear:animated];
NSError *error = nil;
NSString *htmlPath = [[NSBundle mainBundle] pathForResource:@"CanvasTest
ofType:@"html"];
NSString *htmlString = [NSString stringWithContentsOfFile:htmlPath
encoding:NSUTF8StringEncoding
error:&error];
[myWebView loadHTMLString:htmlString baseURL:nil];
}
6.ファイルの後方にあるdeallocメソッドを以下に変更します。
- (void)dealloc {
[myWebView release];
[super dealloc];
}
8.Xcodeに戻り、ビルドと実行を行います。以下のような画面が表示されます。なお下の画像はステータスバー部分を取り除いたスクリーンショットです。
標準の状態では上と左に10ピクセルの余白が入るようですが、canvasの枠もその内部の三角形もきちんと描画されているのがわかります。
2010年2月11日追記：
Canvas関連のjavascriptメソッドへの対応は、MacやWindows用のSafari3同等の対応のようです。そのためstrokeTextやfillTextなどのテキスト描画系命令は使えないので注意が必要です。
UIWebView と HTML5
もちろんHTML5はまだ完成形ではないですし、WebGLなどの現在実装作業中のものは対応していませんのでその点はご注意を。
