どうも、開発部のMです。

アプリ開発では「スッキリとしたデザインで、ババッと動いてシュンと消えてください」と
なんだかよくわからないデザインのお願いをたま～にされたりします。

大抵の場合はリリースされているアプリやWebサイトでみたことのあるものを元に説明されているので、
アニメーションやら表示系に強かったり、比較的時間があれば同様のデザインを参考にして
ネイティブで問題なく実現できるかと思います。
しかし、そうでない場合や意外に動きが細かく凝っているデザインの場合などでは
わりと頭を抱えることになりやすい問題です。

本来であれば時間をしっかりとってしっかりとデザインを固めていくのが良いですが、
時間がない場合はいっその事問題の表示部分をHTMLで作成してみるのも一つの手です。
HTMLならデザインサンプルが多いのでネイティブで作成するとバグが起きやすい部分も
はじめから改善されていたりするので短時間で凝ったデザインを実装するには良い時があります。

ということで、今回はHTMLを使用する際に必須の処理である
「ローカルHTMLを表示して、WebViewで受け取った動作をiOS側で処理する方法」をご紹介します。


サンプル

– (void)viewDidLoad {
    [super viewDidLoad];

    //ローカルに準備したhtmlのパスを作成
    NSString *path = [[NSBundle mainBundle] pathForResource:@”index” ofType:@”html”];
    NSFileManager *fileManager = [NSFileManager defaultManager];
   
    //ローカルファイルの有無を確認(なくてもOK)してhtmlファイルを読み込む
    UIWebView *WebView = 
    [[UIWebView alloc] initWithFrame:
        CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)
    ];
    if (![fileManager fileExistsAtPath:path]) {
        WebView.delegate = self;
        [WebView loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:path]]];
    }
    [self.view addSubview:WebView];
}

#pragma mark UIWebView Delegate

//表示開始
-(void)webViewDidStartLoad:(UIWebView*)webView{
    [UIApplication sharedApplication].networkActivityIndicatorVisible = YES;
}
//表示完了
-(void)webViewDidFinishLoad:(UIWebView*)webView{
    [UIApplication sharedApplication].networkActivityIndicatorVisible = NO;
}
//失敗
– (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error {
    [UIApplication sharedApplication].networkActivityIndicatorVisible = NO;
}

//WebViewへのリクエストを受け取るメソッド
– (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request
 navigationType:(UIWebViewNavigationType)navigationType
{
    //htmlでiOS側に動作させたい処理の独自のURLをリクエストする
    //例 お知らせの画面に画面遷移したい : callURL://apiMethodName=moveWebView&viewName=OshiraseView
    NSString *urlString = [NSString stringWithFormat:@”%@”, [[request URL] absoluteString]];
    if (/*指定のURLか？*/) {
        /*
            URLを元にiOS側の処理を記述する
            パラメータによって動作を切り分ける
        */
        return NO;//WebViewではリクエストURLを処理しない
    }
    return YES;//リクエストURLをWebViewで開く
}


サンプルの流れ
1.DidLoad:でローカルHTMLを表示する。
2.表示したHTMLであった操作(ボタンのタップやスワイプなど)をiOS側にURLリクエストをする
3.shouldStartLoadWithRequest:で受け取ったリクエストを元に処理を行う。

上記のサンプルようにHTMLとiOS側を繋げてあげればネイティブアプリと同様に動かすことが出来ます。
しかし、今回紹介した方法はあくまで期限までギリギリな場合の対処です。
HTMLは表示まで時間がかかる上に見ればすぐにHTMLで表示している事がわかってしまいます。
HTMLで実装した場合はその後のアップデートで少しずつでもネイティブ化していければ良いですね。

といったところで今回は以上です。