忍者ブログ

[PR]

2024年03月19日
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

HTML5をUIWebViewで表示させる

2010年02月02日
前回の記事「UIWebView と HTML5」だけはちょっと無責任なので、リソースからのロードについて実験をしてみました。
結果から先に書くと、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];

}

 

7.変更を保存したら、ResorcesにあるCanvasTestViewController.xibを開きます。Viewを表示し、LibraryからWeb Viewを選択します。これをViewにドラッグ&ドロップで追加したら、delegateをFile's Ownerに接続します。逆に、File's OwnerのOutletsにあるmyWebViewを追加したWeb Viewに接続します。

8.Xcodeに戻り、ビルドと実行を行います。以下のような画面が表示されます。なお下の画像はステータスバー部分を取り除いたスクリーンショットです。

CanvasTest.png









標準の状態では上と左に10ピクセルの余白が入るようですが、canvasの枠もその内部の三角形もきちんと描画されているのがわかります。

2010年2月11日追記:
Canvas関連のjavascriptメソッドへの対応は、MacやWindows用のSafari3同等の対応のようです。そのためstrokeTextやfillTextなどのテキスト描画系命令は使えないので注意が必要です。
PR

UIWebView と HTML5

2010年02月02日
iPhoneアプリケーション開発で使われるUIWebViewはiPhone版Safariと同じようにHTML5対応が行われているようです。ものは試しとTiny3DのHTMLダウンロード機能(現行バージョンはUIWebView使用)でHTML5で書かれたサイトを表示させてみたところ、Canvasが使われているページがきちんと表示されました。ちなみに実験した実機はiPhone OS 3.1.2にバージョンアップされた初代iPod touchです。アプリケーションのリソースにHTML5のファイルを含めておき、UIWebViewでロードさせるという使い方もできそうですね。

もちろんHTML5はまだ完成形ではないですし、WebGLなどの現在実装作業中のものは対応していませんのでその点はご注意を。
 | HOME |