iPhoneとアンドロイド携帯に最適化するのバックアップ(No.6)

iPhone及びAndroid携帯での表示について

　iPhoneは大多数の携帯電話よりは少し画面の幅が広く、PCよりはだいぶ狭いので、携帯対応レンダラーなどで携帯用のテーマを使うと痩せた感じになり、かといってフルブラウザだからといってそのまま表示させるとボードゲームで使うこども銀行のお札のようなミニチュアになってしまい、いちいち指で拡大していかないといけないので面倒である。Android(携帯)は解像度に幅があるが、一般的な携帯電話よりは広い、PCよりは狭いという特徴はiPhoneと一致している。

　また、大きな特長として指でタッチすることでマウスのクリックと同じことができるというものがある。カーソルを合わせてリンクを選択する形の携帯ブラウザはリンクの文字が小さくてもあまり問題がないが、指でタッチするということになると、それなりに大きく、リンクとリンクの縦の間隔が空いている方が利用者は使いやすい。XOOPSのiPhone用のテーマはその辺を充分考慮したものになっているので是非導入したい。

XOOPS Cube Legacy用のiPhoneテーマを導入する

　以下のページからiPhone用のテーマをダウンロードできる。iPhoneからのアクセスを認識するためにプリロード(ryusSetIphoneTheme.class.php)が必要(同梱されている)なのでXOOPS Cube Legacy専用ということになる。
　iPhone - XOOPS専門-株式会社RYUS

#ref(): File not found: "iphone_theme.jpg" at page "iPhoneとアンドロイド携帯に最適化する"

　テーマファイルとプリロードを所定の場所にアップロードするだけで使えるので特に難しい部分はないが、基調となる色を変更したいといったテーマのカスタマイズ方法については、以下のページを参照のこと。
　XOOPS CubeのiPhone 用テーマを作ってみました！ダウンロード公開中♪ - XOOPS専門-株式会社RYUS

Android携帯でも同じテーマを使用する

　なにもしないとAndroid携帯ではテーマが適用されないのでryusSetIphoneTheme.class.phpに少し手を加える。

		if(strpos($_SERVER['HTTP_USER_AGENT'],"iPhone")){
			$is_iphone=true;
		} elseif(strpos($_SERVER['HTTP_USER_AGENT'],"iPod")){
			$is_ipod=true;

　この下(39行目辺り)に、

		} elseif(strpos($_SERVER['HTTP_USER_AGENT'],"Android")){
			$is_ipod=true;

　↑を追加する。
　↓こんな感じになればOK。

		if(strpos($_SERVER['HTTP_USER_AGENT'],"iPhone")){
			$is_iphone=true;
		} elseif(strpos($_SERVER['HTTP_USER_AGENT'],"iPod")){
			$is_ipod=true;
		} elseif(strpos($_SERVER['HTTP_USER_AGENT'],"Android")){
			$is_ipod=true;
		} else {
			$is_pc=true;
		}
		if(($is_iphone==true) or ($is_ipod==true)){
			$this->mRoot->mContext->setThemeName($this->iphone_theme);
		} else {
			$this->mRoot->mContext->setThemeName($xoopsConfig['theme_set']);
		}
	}

}

?>

シミュレータで表示を確認する

　実機を持っていない場合はシミュレータで表示を確認できる。

iPhoneシミュレータ

iBBDemo
※AppleのブラウザであるSafariがインストールされている必要あり。

Androidシミュレータ

Android SDK

[PR]

iPhoneとアンドロイド携帯に最適化する のバックアップ(No.6)