2013/06/27更新

[XCODE] UIWebView上のフォームにObjective-Cから書き込んで、サブミットも行う

こんにちは、@yoheiMuneです。
以前お仕事でご一緒させて頂いた方からObjective-Cに関する質問を頂いて、実装する機会があったので、掲題の件についてブログを書きたいと思います。

今回頂いた質問内容

以下のようなご質問を頂きました。

ネイティブアプリ内に内部的に表示しているUIWebViewで、ログインフォームなどのフォームに、Objective-Cからログイン名やパスワードなどを書き込んでサブミットまでする、とかって実現できる？

という内容でした。UIWebViewではJSを実行出来るので、その仕組みを使えばいい感じに実現出来そうだなぁということで、実際に試してみました。
今回のブログではその実装を紹介する内容となります。

UIWebView上のフォームにObjective-Cから書き込んで、サブミットも行う

まずは、UIWebView上で表示するフォーム内容をダミーで作ります（Webページがあればそれでも良いです）。今回用意したHTMLは以下のような感じです。

<html><body>
  <h3>Objective-CでHTML上のFormに書き込む＆サブミット</h3>
  <form method='GET' action='http://google.com/'>
    <p>検索キーワード</p>
    <input type='text' name='q'/>
    <input type='submit' value='検索する/'>
  </form>
</body></html>

そしてviewDidLoadなどで、このHTMLを読み込みます。

NSString *html
    = @"<html><body>"
        "<h3>Objective-CでHTML上のFormに書き込む＆サブミット</h3>"
        "<form method='GET' action='http://google.com/'>"
            "<p>検索キーワード</p>"
            "<input type='text' name='q'/>"
            "<input type='submit' value='検索する/'>"
        "</form>"
        "</body></html>";

// webViewはフィールド変数
[webView loadHTMLString:html baseURL:[NSURL URLWithString:@"http://google.com/"]];


// もしくはログインページが既にある場合には、そのページを読み込みます。
NSURL *aURL = [NSURL URLWithString:@"http://aaa.bbb.ccc/login"];
NSURLRequest *request = [NSURLRequest requestWithURL:url];
[webView loadRequest:request];

あと、JS実行を読み込み完了時に行いたいので、webViewのdelegateを設定しておきます。

webView.delegate = self;

そして、読み込み完了の通知を受けるUIWebViewDelegateのメソッドを実装します。

- (void)webViewDidFinishLoad:(UIWebView *)aWebView {

  // ここに後述で処理を追記します。
}

これで準備完了です。

続いて、フォームに入力する処理と、フォームをサブミットする処理をwebViewの処理終了時に実行します。

- (void)webViewDidFinishLoad:(UIWebView *)aWebView {

    // テキストフィールドに入力するJSを実行する
    NSString *js1 = @"document.forms[0].q.value='テキスト'";
    [webView stringByEvaluatingJavaScriptFromString:js1];


    // サブミットするJSを実行する
    NSString *js2 = @"document.forms[0].submit();";
    [webView stringByEvaluatingJavaScriptFromString:js2];
}

これでフォームに入力して、サブミットする処理が完了です。
ただ上記の記述だと一瞬で処理されてしまうので、入力をアニメーションで見せたいとか、フォームサブミットまでdelay時間を置きたいという場合には、追加で実装する必要があります。例えば、フォームに入力後、3秒後にサブミットしたい場合にはこんな感じです。

- (void)webViewDidFinishLoad:(UIWebView *)aWebView {

    // テキストフィールドに入力する
    NSString *js1 = @"document.forms[0].q.value='テキスト'";
    [webView stringByEvaluatingJavaScriptFromString:js1];


    // 3秒後にサブミット
    [NSTimer scheduledTimerWithTimeInterval:3 target:self selector:@selector(submitForm) userInfo:nil repeats:NO];
}

/**
    フォームをサブミットする
*/
-(void)submitForm {
    NSString *js2 = @"document.forms[0].submit();";
    [webView stringByEvaluatingJavaScriptFromString:js2];
}

delayの方法は色々とありますが、NSTimerを使うといい感じに簡単に出来ていいかなぁという印象です。

最後に

iPhoneアプリって作る人によってやりたいことは本当に色々だなぁと思う今日この頃です。
またTipsなことがありましたらブログに書きたいと思いますので、ぜひとも今後ともよろしくお願いします！

最後までご覧頂きましてありがとうございました。