このエントリーをはてなブックマークに追加

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

読了目安 2分9秒

User Agent で振り分け

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

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

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

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

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

実際のコード、PHP 版

<?php 
$ua = $_SERVER['HTTP_USER_AGENT'];
	if ((strpos($ua, 'iPhone') !== false) && (strpos($ua, 'Safari') === false)) {
		echo $this->Html->css('uiwebview');
	}
?>

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

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

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

<!--nocache-->
//キャッシュさせたくないよー
<!--/nocache-->

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

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

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

ではでは。

このエントリーをはてなブックマークに追加
読了目安 0分31秒

ウエツハラについて

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

中の人

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

連絡手段など

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

I love comments !

メールアドレスが公開されることはありません。* が付いている欄は必須項目です