iPhoneとアンドロイド携帯に最適化する

Last-modified: Wed, 03 Sep 2014 23:25:04 JST (1665d)

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

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

android.jpg

 また、大きな特長として指でタッチすることでマウスのクリックと同じことができるというものがある。カーソルを合わせてリンクを選択する形の携帯ブラウザはリンクの文字が小さくてもあまり問題がないが、指でタッチするということになると、それなりに大きく、リンクとリンクの縦の間隔が空いている方が利用者は使いやすい。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']);
		}
	}

}

?>

 あと、ユーザーエージェントとして「Windows Mobile」「Opera Mini」「Opera Mobi」を足してもいいと思う。

CSSの微調整

 個人の好みもあると思うが、初期状態では他のスマートフォン対応サイトに比べても、本文にあたる部分の文字の大きさがかなり小さいように思う。なのでiPhoneテーマのstyle.cssを開いて微調整を行う。手を入れるのは、まず以下の二つ。

.blockContent {
	font-size: 12px;
	font-family:HiraKakuProN-W6;
	padding: 4px 0px 0px 0px;
	line-height:14px;
	color: black;
}


.content {
	font-size: 12px;
	font-family:HiraKakuProN-W6;
	padding: 4px 26px 4px 10px;
	line-height:14px;
	color: black;
}

 この二つのfont-sizeの部分を12pxから14px以上に変更する。大きめのフォントで安定感を持たせたいのなら16px以上。うちは16pxでやっている。
 もう一つ、行間が狭いと思うので、

.content p{
  line-height:1.7;
}

 と付け加えてみる。この部分は表示されるモジュールの挙動で変わってくる。本文にあたる部分を必ずpタグで括ってくるモジュールであれば効いてくるが、そうでないモジュールの場合はタグを確認して.content pの「p」の部分を該当タグに書き換え、付け加えていく。

bbdemo4.jpg
bbdemo3.jpg
デフォルトでの表示上記のカスタマイズを行った場合の表示

 更にもう一つ、必須といえる調整がある。デフォルトのcssでは、

li {
	list-style-type: none;
	font-family:HiraKakuProN-W6;
	border-bottom: solid 1px #d9d9d9;
	line-height: 14px;
	overflow: hidden;
}
li a {
	list-style-type: none;
	display: block;
	padding: 4px 24px 4px 10px;
	height: 25px;
	background-image: url("images/listarrow.png");
	background-repeat: no-repeat;
	background-position: right;
	font-family:HiraKakuProN-W6;
	text-decoration: none;
	color: black;
}

 と書かれている。つまり、liタグで括ったところは全部上記のデザインになってしまうということになるが、このデザインはあくまでもスマートフォン上でリンクを指でタップするのに最適、ようするに目次として機能しているリスト用の表示ということで、行間がたっぷりと取られている。だが、本文中で文字通りリストとして文章を並べている場合、

今学期の目標

  • 授業中におしゃべりをしない
  • 先生が来るまで黒板を消しておく
  • けじめをつける

 たとえば、上のような感じのものに適用されると変である。なので、目次になるようなliにはclassを付け、それに適用するように変更した方がよい。
 新着記事のタイトルをブロック表示するブログモジュールがあるとして、表示部分のHTMLが、

<ul>
  <li><a href="#">記事1</a></li>
  <li><a href="#">記事2</a></li>
  <li><a href="#">記事3</a></li>
</ul>

 となっていたとしたら、

<ul>
  <li class="shinchaku"><a href="#">記事1</a></li>
  <li class="shinchaku"><a href="#">記事2</a></li>
  <li class="shinchaku"><a href="#">記事3</a></li>
</ul>

 とclassを付けて、iPhoneのテーマのcssの以下の部分を、

li {
	list-style-type: none;
	font-family:HiraKakuProN-W6;
	border-bottom: solid 1px #d9d9d9;
	line-height: 14px;
	overflow: hidden;
}
li a {
	list-style-type: none;
	display: block;
	padding: 4px 24px 4px 10px;
	height: 25px;
	background-image: url("images/listarrow.png");
	background-repeat: no-repeat;
	background-position: right;
	font-family:HiraKakuProN-W6;
	text-decoration: none;
	color: black;
}

.shinchaku {
	list-style-type: none;
	font-family:HiraKakuProN-W6;
	border-bottom: solid 1px #d9d9d9;
	line-height: 14px;
	overflow: hidden;
}
.shinchaku a {
	list-style-type: none;
	display: block;
	padding: 4px 24px 4px 10px;
	height: 25px;
	background-image: url("images/listarrow.png");
	background-repeat: no-repeat;
	background-position: right;
	font-family:HiraKakuProN-W6;
	text-decoration: none;
	color: black;
}

 と書き換える。

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

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

iPhoneシミュレータ

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

 最新(2011年2月4日現在)のバージョン(iBBDemo2)ではiPadのシミュレーションも可能になっている。air形式で圧縮されているのでAdobe AIRをあらかじめインストールしておくこと。すると、ダウンロードしたiBBDemo2のファイルをダブルクリックすることで直接インストールすることができる。

iBBDemo2の操作方法

 初期起動時はiPadのシミュレータ画面が表示される。これをiPhoneのものに変更したい場合は「Ctrlキー」と「2」を押すこと。この場合の2はテンキーの2ではなく、日本語キーボードでいうとひらがなの「ふ」のところにある2なので注意。画面の縦横を変更したい場合は「Ctrlキー」と矢印キーの右(→)をクリックすることで行う。ちなみにウインドウ切り替えなどは機能しない。

ipad.jpg
起動すると最初に表示されるiPadシミュレート画面
bbdemo.jpg
上記の状態からCtrlキーと「2」を同時押しでiPhoneのシミュレート画面(横)になる
bbdemo2.jpg
更にCtrlキーと「→」を同時押しで縦画面になる。横画面に戻すときは再度Ctrlキーと→キー。終了させるときは、横画面にしてから□ボタンをクリック

iBBDemo2の再現度について

 文字の大きさ、全体のバランスといった点については問題なく、ほぼiPhoneの実機で見るのと変わりないが、CSSの解釈が一部違っている(たとえば、iBBDemo2ではposition:fixedが使えるが、実機では無視される)。可能であれば最終確認を実機で行った方がよい。

Androidシミュレータ

 Android SDK

 このソフトは一言でいって面倒。なので、インストールは参考サイトを見ながら時間に余裕があるときに。

参考サイト

 Android SDKをインストールする [AndroidでHello Worldする]

iPadではどうする?

 iPadの横解像度は1024ピクセルあり、これは15インチ液晶モニタの一般的な横解像度と同じで、PC向けのサイトをそのまま表示しても特に問題ない。ユーザもそう考えてサイトを閲覧するはずで、iPhone用のテーマで表示される方がストレスになるだろう。したがってiPad向けに特別なにかするというのは考えなくていいように思う。


[PR]