UIWebKitを
コンポーネントとして使う
Cocoa勉強会 #42
2010/9/25
Masayuki Nii
twitter: msyknii

2010年9月24日金曜日

1
Agenda

UIWebViewについて
クラスが持つ機能
開発時の使い方

2010年9月24日金曜日

2
UIWebView

Safariとほぼ同じ機能を持つコンポーネント

•

HTMLを与えれば、レクタングル内でほぼ「ブラウザでロードし
た」状態で稼働する

Mac OS Xにもある

•

iOSのコンポーネントは機能的には少ない

標準...
UIWebViewクラスの機能

HTMLのロード
ナビゲーション
JavaScriptの実行
デリゲート UIWebViewDelegate
各種の設定

•

2010年9月24日金曜日

メディアプレイバック、データ検出(電話番号など)
...
CRUDをベースに考える

CRUD

•
•

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

UIWebViewは、UIViewオブジェクトのサブビューとし
...
状況に応じた手法の選択
Create

Read

Update

Delete

Inside→Inside

Outside→Inside

Inside→Outside
2010年9月24日金曜日

6
状況に応じた手法の選択
Create

Inside→Outside
2010年9月24日金曜日

Update

Delete

JavaScript:
DOM

Inside→Inside

Outside→Inside

Read

AP...
UIWebViewへのHTMLのロード

基本的な方法

•
•
•

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

...
JavaScript実行メソッド
stringByEvaluatingJavaScriptFromString:

•

引数のJavaScriptを、UIWebViewで表示しているHTMLページに
対して適用できる

必要な準備

•
•
...
JavaScript実行メソッド

値の取得

•
•

ex: <input type= checkbox id= box />
[WEBVIEW stringByEvaluatingJavaScriptFromString:
@ docum...
内部から外部へのアクセス
HTML内にリンクを作る

•
•

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

UIWebViewのデリゲートを設定する

•
•

we...
その他の考慮点
HTML内のリンクをタップしたときのUI

•

モーダルビューが表示され、リンク先に移動するかをユーザに問い
合わせる

事実上使えないHTMLの手段

•
•

ポップアップメニュー
divを使ったドロップダウンメニュー

...
まとめ

通常のコンポーネントで作りにくいものはUIWebView
JavaScriptのDOMモデルで処理をする
外部へのインタラクトはリンクとデリゲート

and More...

•
•

2010年9月24日金曜日

次回の浦和での勉強...
Upcoming SlideShare
Loading in …5
×

Cocoa勉強会#42-UIWebKitをコンポーネントとして使う

525 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Cocoa勉強会#42-UIWebKitをコンポーネントとして使う

  1. 1. UIWebKitを コンポーネントとして使う Cocoa勉強会 #42 2010/9/25 Masayuki Nii twitter: msyknii 2010年9月24日金曜日 1
  2. 2. Agenda UIWebViewについて クラスが持つ機能 開発時の使い方 2010年9月24日金曜日 2
  3. 3. UIWebView Safariとほぼ同じ機能を持つコンポーネント • HTMLを与えれば、レクタングル内でほぼ「ブラウザでロードし た」状態で稼働する Mac OS Xにもある • iOSのコンポーネントは機能的には少ない 標準的でないユーザインタフェースを作れる • 2010年9月24日金曜日 たとえば、タブ 3
  4. 4. UIWebViewクラスの機能 HTMLのロード ナビゲーション JavaScriptの実行 デリゲート UIWebViewDelegate 各種の設定 • 2010年9月24日金曜日 メディアプレイバック、データ検出(電話番号など) 4
  5. 5. CRUDをベースに考える CRUD • • Create/作成、Read/読み取り、Update/更新、Delete/削除 データのライフサイクルを検討するときの基本概念 UIWebViewは、UIViewオブジェクトのサブビューとし て存在する 以下の状況での「手法」を知る必要がある • • • 2010年9月24日金曜日 UIWebViewの内部→UIWebViewの内部 外部→UIWebViewの内部 UIWebViewの内部→外部 5
  6. 6. 状況に応じた手法の選択 Create Read Update Delete Inside→Inside Outside→Inside Inside→Outside 2010年9月24日金曜日 6
  7. 7. 状況に応じた手法の選択 Create Inside→Outside 2010年9月24日金曜日 Update Delete JavaScript: DOM Inside→Inside Outside→Inside Read API: loadHTMLなど API: stringByEvaluatingJavaScriptFromString: リンク UIWebViewDelegate 7
  8. 8. UIWebViewへのHTMLのロード 基本的な方法 • • • HTMLファイルを作成しておき、リソースとしてコピーする NSBundleの機能でファイルを特定して文字列を取得 loadHTMLString:baseURL:でロード 応用例 • • • • • 2010年9月24日金曜日 実行時に決まる値を挿入してロードしたい場合 HTMLファイルに「%@」を含める HTMLファイルをNSStringとして取得→htmlString [NSString stringWithFormat: htmlString, @ 123 , @ 45 ]; 最初の%@が「123」、次の%@が「45」に置き換わる 8
  9. 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. 10. JavaScript実行メソッド 値の取得 • • ex: <input type= checkbox id= box /> [WEBVIEW stringByEvaluatingJavaScriptFromString: @ document.getElementId( box ).checked; ]; メソッドの実行結果 • • • 2010年9月24日金曜日 trueあるいはfalseという文字列が返る メソッドの返り値はステートメントの評価結果が返る 従って、return…の必要はない 10
  11. 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. 12. その他の考慮点 HTML内のリンクをタップしたときのUI • モーダルビューが表示され、リンク先に移動するかをユーザに問い 合わせる 事実上使えないHTMLの手段 • • ポップアップメニュー divを使ったドロップダウンメニュー UIWebView内部での選択処理 • • • 2010年9月24日金曜日 外部にボタンを作る モーダルビューなど、一覧して選択するUIを作る 選択結果を、HTMLの内部に挿入する 12
  13. 13. まとめ 通常のコンポーネントで作りにくいものはUIWebView JavaScriptのDOMモデルで処理をする 外部へのインタラクトはリンクとデリゲート and More... • • 2010年9月24日金曜日 次回の浦和での勉強会は:2010/10/25(Mon) http://coolnotify.com/devurawa 13

×