[XCODE] UIWebViewでJS -> Native、Native -> JS連携を行う方法

こんにちは、@yoheiMuneです。
今日はiPhoneアプリでWebViewベース開発する際のTipsの１つ、JS・Nativeのそれぞれの機能を呼び出す方法をブログに書きたいと思います。

UIWebViewでJSとNative連携をするとは

最近のiPhoneアプリでは、UIWebViewベースで多くのコンテンツはHTML,JS,CSSで実装することもあるかと思います。
多くの機能はJavaScriptで実現しますが、時々Native機能（ダイアログなど）を使いたい場合があります。
また、Native上のボタンを押した際にJavaScriptの機能を呼び出したい場合があります。

そんな要望を実現する機能が、JS・Native連携です。
以下では具体的な実装内容を記載します。

JavaScriptから、iPhoneアプリのNative機能を呼び出す

JavaScriptからNative機能を呼び出す方法として、ここではカスタムスキーマを利用します。
JavaScript側で、以下のような実装を行います。

// JavaScriptの実装
location.href='api-yoheim://someAlert{message from javascript}';

「api-yoheim://」がカスタムスキームと呼ばれるものです。
今回は、someAlertが機能名で、{}に囲まれた内容がsomeAlertで利用する引数です。


上記のリクエストをiPhoneアプリ側でキャッチします。
具体的には、以下のように実装します。

// UIViewControllerでの実装内容
- (void) viewDidLoad {
    // 上記JSが動いているUIWebViewのdelegateを指定します。
	self.webView.delegate = self;
}

#pragma mark - UIWebViewDelegate
// JavaScriptやリンクなどでサーバーへのリクエストが発生した際に呼び出されるメソッド。
- (BOOL)webView:(UIWebView *)aWebView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    
    // もしNative連携用のURLスキームの場合には、処理する。
    NSString *urlStr = request.URL.absoluteString;
    if ([urlStr hasPrefix:@"api-yoheim://"]) {

    	// %エスケープされた内容を、デコードする。
        urlStr = [urlStr stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];

        // 不要な部分を削除する。
        urlStr = [urlStr stringByReplacingOccurrencesOfString:@"api-yoheim://" withString:@""];
        
        // カスタムURLスキームで指定された指示を、正規表現を利用して特定します。
        NSRegularExpression *regexp = [[NSRegularExpression alloc]
                                       initWithPattern:@"^(.*?)\\{(.*?)\\}$"
                                       options:0
                                       error:nil];
        
        NSArray *matches = [regexp matchesInString:urlStr
                                           options:0
                                             range:NSMakeRange(0, urlStr.length)];

        for (NSTextCheckingResult *match in matches) {
            // URLの内容から、メソッドとその引数を取得します。
            NSString *method = [urlStr substringWithRange:[match rangeAtIndex:1]];
            NSString *params = [urlStr substringWithRange:[match rangeAtIndex:2]];
            
            // メソッドをコールします。
            [self performSelector:NSSelectorFromString([NSString stringWithFormat:@"%@:", method])
                       withObject:params];
        }

        // カスタムスキームの場合には、リクエストを中止します。        
        return NO;
    }
    
    // 上記以外は、リクエストが外部へ放出することを許可します。
    return YES;
}


#pragma mark - Actions
// JavaScriptから指定されて呼び出されるメソッド。
-(void)someAlert:(NSString *)message {
    UIAlertView *alert
    	 = [[UIAlertView alloc] initWithTitle:@""
                                      message:message
                                     delegate:nil
                            cancelButtonTitle:@"OK"
                            otherButtonTitles:nil];
    [alert show];
}

少し長い実装ですが、上記のようにカスタムスキームでのJS -> Native連携を行うことができます。

NativeからJavaScriptのメソッドを呼び出す

続いて、Objective-CからJavaScriptの機能を呼び出します。
これは、UIWebViewの機能に用意されているので、簡単に実現することができます。
Objective-Cで以下のように実装します。

NSString *javascript = @"window.yoheim.showError('message from native');";
[webView stringByEvaluatingJavaScriptFromString:javascript];

上記の例では、「window.yoheim.showError」関数を呼び出すことができます。

関連記事

UIWebViewを使ったiPhoneアプリを開発する際には、上記のようなTips(=ノウハウ)をたくさん持つことが効率的な開発に繋がるのかなぁと思います。 UIWebViewのTipsを上記以外にも紹介しておりますので、もし良ければご覧頂ければ幸いです。

- UIWebViewでWebページを表示した際にJSのconsole.logの内容を表示する方法

- UIWebViewでHTML,CSS,JSなどをキャッシュさせない方法

- UIWebViewを用いる際にUserAgentを独自に設定する方法

- UIWebViewの表示コンテンツに独自のCSSを追加適用する方法

- UIWebViewで表示しているコンテンツの高さを取得する方法

- HTML文字列を用いてUIWebViewに表示する方法

最後に

UIWebViewを使うiPhoneアプリなら、良くJavaScriptと連携したいという要望を受けます。
今後もUIWebView関連のTipsをブログで紹介できればと思います。

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