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

バックアップ一覧
差分を表示
現在との差分を表示
現在との差分 - Visual を表示
ソースを表示
iPhoneとアンドロイド携帯に最適化するへ行く。
- 1 (2010-05-30 (日) 05:01:50)
- 2 (2010-05-30 (日) 15:48:13)
- 3 (2010-06-01 (火) 04:54:00)
- 4 (2010-06-11 (金) 02:32:12)
- 5 (2010-06-11 (金) 14:40:03)
- 6 (2010-06-14 (月) 03:51:52)
- 7 (2010-06-16 (水) 12:38:15)
- 8 (2011-02-04 (金) 09:54:48)
- 9 (2011-02-04 (金) 11:06:57)
- 10 (2011-02-05 (土) 13:02:07)
- 11 (2012-03-12 (月) 16:47:08)

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']);
		}
	}

}

?>

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以上に変更する。
　もう一つ、行間が狭いと思うので、

.content p{
  line-height:1.7;
}

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


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

　更にもう一つ、必須といえる調整がある。デフォルトの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シミュレート画面
	上記の状態からCtrlキーと「2」を同時押しでiPhoneのシミュレート画面(横)になる
	更にCtrlキーと「→」を同時押しで縦画面になる。横画面に戻すときは再度Ctrlキーと→キー。終了させるときは、横画面にしてから□ボタンをクリック

iBBDemo2の再現度について

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

Androidシミュレータ

　Android SDK

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

参考サイト

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

iPadではどうする？

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

[PR]

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