Cocoa勉強会#42 2010/9/25 UIWebKitをコンポーネントとして使う 新居雅行

1. UIWebKitを
コンポーネントとして使う
Cocoa勉強会 #42
2010/9/25
Masayuki Nii
twitter: msyknii
2010年9月24日金曜日
1

2. Agenda
UIWebViewについて
クラスが持つ機能
開発時の使い方
2010年9月24日金曜日
2

3. UIWebView
Safariとほぼ同じ機能を持つコンポーネント
•
HTMLを与えれば、レクタングル内でほぼ「ブラウザでロードし
た」状態で稼働する
Mac OS Xにもある
•
iOSのコンポーネントは機能的には少ない
標準的でないユーザインタフェースを作れる
•
2010年9月24日金曜日
たとえば、タブ
3

4. UIWebViewクラスの機能
HTMLのロード
ナビゲーション
JavaScriptの実行
デリゲート UIWebViewDelegate
各種の設定
•
2010年9月24日金曜日
メディアプレイバック、データ検出（電話番号など）
4

5. CRUDをベースに考える
CRUD
•
•
Create/作成、Read/読み取り、Update/更新、Delete/削除
データのライフサイクルを検討するときの基本概念
UIWebViewは、UIViewオブジェクトのサブビューとし
て存在する
以下の状況での「手法」を知る必要がある
•
•
•
2010年9月24日金曜日
UIWebViewの内部→UIWebViewの内部
外部→UIWebViewの内部
UIWebViewの内部→外部
5

6. 状況に応じた手法の選択
Create
Read
Update
Delete
Inside→Inside
Outside→Inside
Inside→Outside
2010年9月24日金曜日
6

7. 状況に応じた手法の選択
Create
Inside→Outside
2010年9月24日金曜日
Update
Delete
JavaScript:
DOM
Inside→Inside
Outside→Inside
Read
API:
loadHTMLなど
API:
stringByEvaluatingJavaScriptFromString:
リンク
UIWebViewDelegate
7

8. UIWebViewへのHTMLのロード
基本的な方法
•
•
•
HTMLファイルを作成しておき、リソースとしてコピーする
NSBundleの機能でファイルを特定して文字列を取得
loadHTMLString:baseURL:でロード
応用例
•
•
•
•
•
2010年9月24日金曜日
実行時に決まる値を挿入してロードしたい場合
HTMLファイルに「%@」を含める
HTMLファイルをNSStringとして取得→htmlString
[NSString stringWithFormat: htmlString, @ 123 , @ 45 ];
最初の%@が「123」、次の%@が「45」に置き換わる
8

9. JavaScript実行メソッド
stringByEvaluatingJavaScriptFromString:
•
引数のJavaScriptを、UIWebViewで表示しているHTMLページに
対して適用できる
必要な準備
•
•
HTMLの要素にID属性をきちんとつけておけばほぼ問題ない
ex: <div id= ItemsName ></div>
値の設定／変更／削除
•
•
2010年9月24日金曜日
[WEBVIEW stringByEvaluatingJavaScriptFromString:
@ document.getElementById
( ItemsName ).innerHTML= Kind_of_String ; ]
inputタグの要素は、valueやcheckedなどのプロパティを利用
9

10. JavaScript実行メソッド
値の取得
•
•
ex: <input type= checkbox id= box />
[WEBVIEW stringByEvaluatingJavaScriptFromString:
@ document.getElementId( box ).checked; ];
メソッドの実行結果
•
•
•
2010年9月24日金曜日
trueあるいはfalseという文字列が返る
メソッドの返り値はステートメントの評価結果が返る
従って、return…の必要はない
10

11. 内部から外部へのアクセス
HTML内にリンクを作る
•
•
ex: <a href= .?a=1&b=2 >Do It!</a>
自分自身を呼び出すとともに、パラメータを追加する
UIWebViewのデリゲートを設定する
•
•
webView:shouldStartLoadWithRequest:navigationType:メソッ
ドを実装する
NOを返せば、HTMLページは変化しない
クエリーパラメータを解析する
•
•
•
2010年9月24日金曜日
引数requestに、リクエスト情報が渡される
NSArray *queryParams = [[[request URL] query]
componentsSeparatedByString: @"&"];
結果に応じて必要な作業をObjective-Cで記述できる
11

12. その他の考慮点
HTML内のリンクをタップしたときのUI
•
モーダルビューが表示され、リンク先に移動するかをユーザに問い
合わせる
事実上使えないHTMLの手段
•
•
ポップアップメニュー
divを使ったドロップダウンメニュー
UIWebView内部での選択処理
•
•
•
2010年9月24日金曜日
外部にボタンを作る
モーダルビューなど、一覧して選択するUIを作る
選択結果を、HTMLの内部に挿入する
12

13. まとめ
通常のコンポーネントで作りにくいものはUIWebView
JavaScriptのDOMモデルで処理をする
外部へのインタラクトはリンクとデリゲート
and More...
•
•
2010年9月24日金曜日
次回の浦和での勉強会は：2010/10/25(Mon)
http://coolnotify.com/devurawa
13