iOSのUIWebViewでアニメーションを滑らかにする(アクセラレータで)

JavaScriptでタイマーを張ってのアニメーション

それだと、iOS(特にiPod touch)ではマシンパワーが足りないのでカクカクしてしまいます。

でもハードウェアアクセラレータを有効にすると、滑らかになります。

このエントリの目次

1. アクセラレータが効いているかを確認する
2. アクセラレータを効かせる方法
3. 検証用ページを作ってみた
4. 検証用ページをシミュレータで確認してみる
5. さいごに

1.アクセラレータが効いているかを確認する

iOSシミュレータで確認できます。

下記のようにiOSシミュレータを起動した状態で、ブレンドレイヤー（カラー）を有効にすると確認できるようになります。


有効にすると、画面が赤と緑で塗りつぶされるようになります。
赤い部分がアクセラレータが効いている領域で、緑の部分が効いていない領域です。
(下の図でいうと、シミュレータ画面 下部の「戻る」、「進む」「更新」ボタンなどです)

2.アクセラレータを効かせる方法

iOSのアクセラレーターが使えるCSS3 | ゆるふわWebデベロッピングによると、CSS3のtranslateを使うとハードウェアアクセラレータが有効になるようです。

translateが使えないとき

でもUIの仕様によってはtranslateが使えない場合もあると思います。

そんなときは、アニメーションをさせたいDOMに対して

-webkit-transform: translate3d(0, 0, 0);

もしくは

-webkit-transform-style: preserve-3d;

というCSSを適用すると、その領域のアクセラレータが有効になります。
(GPUアクセラレーターが使える環境で強制的に有効にできるCSSの指定方法 | 5509より)

3.検証用ページを作ってみた

サンプルとしてアクセラレータがきいていないページとアクセラレータがきいているページを作ってみました。
あるdiv領域をタップすると、それが大きくなったり小さくなったりするだけの簡単なページです。

動作を確認するときは、作ったサンプルアプリ(GitHub)をインストールしてみて下さい。
(UIWebviewで検証ページを表示しているだけですが、アプリじゃないとアクセラレータがきいているかどうかシミュレータで確認できません)。
それが面倒くさい場合はiOSのsafariで検証用ページを開いてみて下さい。

アクセラレータがきいていない方が若干カクカクして見えます(このレベルのアニメーションだと よく見ないと違いが分かりませんが)。

4.検証用ページをシミュレータで確認してみる

上記ののサンプルアプリをXcodeで開いてください。

アクセラレータがきいていない場合は青の部分がそのままの色で表示されています。


一方、アクセラレータがきいている場合は青の部分に赤色が重なって紫色になっています。
意図したとおりにアクセラレータがきいています。

5.さいごに

実は僕のCSS力が低くて、本当はどんな場合もtranslateを適用できるのかもしれませんが...。
でもサクッとチューニングできるので、工数が足りない場合に使えると思います。

参考にさせて頂いたサイト

1. GPUアクセラレーターが使える環境で強制的に有効にできるCSSの指定方法 | 5509
2. iOSのアクセラレーターが使えるCSS3 | ゆるふわWebデベロッピング
3. UIWebViewのサンプル | iOS AppNote
4. UIWebView | iPhoneアプリ開発の虎の巻

HTTP Status Code を見るUIWebView のサンプルコード

はじめに

iOSの開発に手を出しました。
Objective-C は初でしたが、最初は意味不明でしたね。
特にメソッド呼び出しとデリゲートについて。

まあそれは置いておいて。

UIWebViewは簡単にWebページをブラウザできるのでよいのですが、なんとHTTP Status Codeを見れないようです。
404 Not Foundみたいな表示がそのまま出ちゃうと。
それはよろしくないので、HTTP Status Codeを見て、その後の処理を制御するサンプルコードを書いてみました。

このエントリの目次

1. GitHubにあげたiOSプロジェクト
2. ソースの重要な箇所
3. 閑話休題 「GitHub for Mac」について
4. さいごに

1.GitHubにあげたiOSプロジェクト

コチラになります。

2.ソースの重要な箇所

以下に貼付けます。
GitHubのソースの47〜77行目にあたります。
コメントを読めば処理の概要は分かると思います。

- (void)kick:(NSString *)url
{
    NSMutableURLRequest *urlRequest = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:url]];
    
    //UserAgentをセットします
    NSString *userAgent = [webView stringByEvaluatingJavaScriptFromString:@"navigator.userAgent"];
    [urlRequest setValue:userAgent forHTTPHeaderField:@"User-Agent"];
    
    //urlにアクセスします
    NSHTTPURLResponse *response;
    NSError *error;
    NSData *responseData = [NSURLConnection sendSynchronousRequest:urlRequest
                                                 returningResponse:&response 
                                                             error:&error];
    //何らかのエラーが出たとき
    if ([response statusCode] >= 400 || error) {
        UIAlertView *alert =
        [[UIAlertView alloc] initWithTitle:@"エラー" 
                                   message:[NSString stringWithFormat:@"HTTP STATUS CODE:%d", [response statusCode]]
                                  delegate:self 
                         cancelButtonTitle:@"確認" otherButtonTitles:nil];
        [alert show];
    }
    //正常なレスポンスのとき
    else {
        [webView loadData:responseData MIMEType:[response MIMEType] 
          textEncodingName:[response textEncodingName] 
                   baseURL:[response URL]];
        [self setView:webView];
    }
}

参考にしたサイト

1. How do I get the last HTTP Status Code from a UIWebView? | Stack Overflow
2. Changing the userAgent of NSURLConnection | Stack Overflow

3.閑話休題 「GitHub for Mac」について

Mac向けにGitHub for Macというクライアントツールがあります。
GUIでソースのコミットなどがとても簡単にできます。

操作方法はデザイナーのためのGithub for Mac の使い方「リポジトリ作成編」 | KUROIGAMEN(黒い画面)が詳しいです。

さてGitHub for Macですが、このオクトキャットの仕草や表情がめっちゃ可愛い！！


普通のオクトキャットはまぁまぁくらいですが、この絵は衝撃的可愛さ！
アイコンもこの絵なので、Dockに追加すれば いつでも見られます。

あと、いろんな格好をしたオクトキャットがいるサイトを見つけました。
マリオとかロックマンとかゼルダのリンクの格好したやつもいます。

4.さいごに

GitHub for Macのオクトキャット可愛い！