UIWebKitをコンポーネントとして使う

Cocoa勉強会 #422010/9/25Masayuki Niitwitter: msyknii

12010年9月24日金曜日

Agenda

UIWebViewについて

クラスが持つ機能

開発時の使い方

22010年9月24日金曜日

UIWebView

Safariとほぼ同じ機能を持つコンポーネント• HTMLを与えれば、レクタングル内でほぼ「ブラウザでロードし

た」状態で稼働する

Mac OS Xにもある• iOSのコンポーネントは機能的には少ない

標準的でないユーザインタフェースを作れる• たとえば、タブ

32010年9月24日金曜日

UIWebViewクラスの機能

HTMLのロード

ナビゲーション

JavaScriptの実行

デリゲート UIWebViewDelegate

各種の設定• メディアプレイバック、データ検出（電話番号など）

42010年9月24日金曜日

CRUDをベースに考える

CRUD• Create/作成、Read/読み取り、Update/更新、Delete/削除• データのライフサイクルを検討するときの基本概念

UIWebViewは、UIViewオブジェクトのサブビューとして存在する

以下の状況での「手法」を知る必要がある• UIWebViewの内部→UIWebViewの内部• 外部→UIWebViewの内部• UIWebViewの内部→外部

52010年9月24日金曜日

状況に応じた手法の選択

Create Read Update Delete

Inside→Inside

Outside→Inside

Inside→Outside

62010年9月24日金曜日

状況に応じた手法の選択

Create Read Update Delete

Inside→Inside JavaScript:DOMJavaScript:DOMJavaScript:DOMJavaScript:DOM

Outside→Inside API:loadHTMLなど

API:stringByEvaluatingJavaScriptFromString:

API:stringByEvaluatingJavaScriptFromString:

API:stringByEvaluatingJavaScriptFromString:

Inside→Outsideリンク

UIWebViewDelegate

リンクUIWebViewDelegate

リンクUIWebViewDelegate

リンクUIWebViewDelegate

72010年9月24日金曜日

UIWebViewへのHTMLのロード

基本的な方法• HTMLファイルを作成しておき、リソースとしてコピーする• NSBundleの機能でファイルを特定して文字列を取得• loadHTMLString:baseURL:でロード

応用例• 実行時に決まる値を挿入してロードしたい場合• HTMLファイルに「%@」を含める• HTMLファイルをNSStringとして取得→htmlString• [NSString stringWithFormat: htmlString, @”123”, @”45”];• 最初の%@が「123」、次の%@が「45」に置き換わる

82010年9月24日金曜日

JavaScript実行メソッド

stringByEvaluatingJavaScriptFromString:• 引数のJavaScriptを、UIWebViewで表示しているHTMLページに

対して適用できる

必要な準備• HTMLの要素にID属性をきちんとつけておけばほぼ問題ない• ex: <div id=”ItemsName”></div>

値の設定／変更／削除• [WEBVIEW stringByEvaluatingJavaScriptFromString:

@”document.getElementById(‘ItemsName’).innerHTML=‘Kind_of_String’;”]• inputタグの要素は、valueやcheckedなどのプロパティを利用

92010年9月24日金曜日

JavaScript実行メソッド

値の取得• ex: <input type=”checkbox” id=”box” />• [WEBVIEW stringByEvaluatingJavaScriptFromString:

@“document.getElementId(‘box’).checked;”];

メソッドの実行結果• trueあるいはfalseという文字列が返る• メソッドの返り値はステートメントの評価結果が返る• 従って、return…の必要はない

102010年9月24日金曜日

内部から外部へのアクセス

HTML内にリンクを作る• ex: <a href=”.?a=1&b=2”>Do It!</a>• 自分自身を呼び出すとともに、パラメータを追加する

UIWebViewのデリゲートを設定する• webView:shouldStartLoadWithRequest:navigationType:メソッ

ドを実装する• NOを返せば、HTMLページは変化しない

クエリーパラメータを解析する• 引数requestに、リクエスト情報が渡される• NSArray *queryParams = [[[request URL] query]

componentsSeparatedByString: @"&"];• 結果に応じて必要な作業をObjective-Cで記述できる

112010年9月24日金曜日

その他の考慮点

HTML内のリンクをタップしたときのUI• モーダルビューが表示され、リンク先に移動するかをユーザに問い

合わせる

事実上使えないHTMLの手段• ポップアップメニュー• divを使ったドロップダウンメニュー

UIWebView内部での選択処理• 外部にボタンを作る• モーダルビューなど、一覧して選択するUIを作る• 選択結果を、HTMLの内部に挿入する

122010年9月24日金曜日

まとめ

通常のコンポーネントで作りにくいものはUIWebView

JavaScriptのDOMモデルで処理をする

外部へのインタラクトはリンクとデリゲート

and More...• 次回の浦和での勉強会は：2010/10/25(Mon)• http://coolnotify.com/devurawa

132010年9月24日金曜日