アプリ内の WebView を User Agent で振り分けて CSS を適用させる方法

最近は、コワーキングスペース タネマキ の方で、記事を更新しています。@uetsuhara でも気になったニュースや記事など流してます。良かったら覗いてみてください。

読了目安 2分9秒

User Agent で振り分け

アプリ版だけ表示を変えたい!

coffee spot の iPhone アプリを UIWebView をベースに作っているんですが、Web 版や iPhone Safari 版とアプリ版の表示を変えたいなと思う部分があったりします。

コーヒースポットで言えば、アプリ版では、ロゴが必要ありません。レスポンシブデザインでモバイル用に見せているんですが、アプリ版では、独自にヘッダー部分を用意しています。

ですので、ヘッダー部分の CSS、もしくはコードごと消し去りたい。そんな時、ユーザーエージェントを使って振り分ける方法が良かろうってな話です。iPhone 勉強会の nekomimimiさんにアドバイスを頂きつつ、あれしてみました。

なお、Web 版はこちら。http://coffee-spot.info/

実際のコード、PHP 版

[php title=”iPhone 用の User Agent”]
<?php
$ua = $_SERVER[‘HTTP_USER_AGENT’];
if ((strpos($ua, ‘iPhone’) !== false) && (strpos($ua, ‘Safari’) === false)) {
echo $this->Html->css(‘uiwebview’);
}
?>
[/php]

iPhone かつ Safari ではないものを炙りだしています!たぶん使えますが、他にもっと賢い方法あるかも?

あ、上記コードの $this->Html->css(‘uiwebview’); の部分は CakePHP のコードになります。適当にアレして下さい。

ちなみに、CakePHP で、キャッシュを使っているんですが、その部分だけキャッシュさせないことにしました。

[php title=”CakePHP”]
<!–nocache–>
//キャッシュさせたくないよー
<!–/nocache–>
[/php]

で囲むとアレしてくれます。

なお、User Agent に関しては下記サイトさんを参考にさせていただきました!ありがとうございます。
iOS , Androidアプリ内WebView での User Agent について

Android も似た要領でできるかと思います。試してません。

ではでは。

読了目安 0分31秒

ウエツハラについて

主に Web 系、アプリ系のネタを提供していくかもしれないサイトです。比較的雑多。

中の人

横浜でタネマキというコワーキングスペースをやっています。
コーヒースポット(2014年1月)」ってのを作りはじめました。最近は、iPhoneアプリの制作してます。

連絡手段など

info@uetsuhara.com
≫Twitter
≫Facebookページ