WEB・アプリ開発・音楽制作 | Kaleidoscope » スマホサイト http://blog.kaleido-jp.net WEB・アプリ開発・音楽制作 Mon, 24 Nov 2014 00:40:02 +0000 ja hourly 1 http://wordpress.org/?v=3.6 Android対応スマートフォンサイトのレイアウト（viewport・コンテナ編） http://blog.kaleido-jp.net/web/%e3%82%b9%e3%83%9e%e3%83%bc%e3%83%88%e3%83%95%e3%82%a9%e3%83%b3%e3%82%b5%e3%82%a4%e3%83%88%e3%83%ac%e3%82%a4%e3%82%a2%e3%82%a6%e3%83%881/ http://blog.kaleido-jp.net/web/%e3%82%b9%e3%83%9e%e3%83%bc%e3%83%88%e3%83%95%e3%82%a9%e3%83%b3%e3%82%b5%e3%82%a4%e3%83%88%e3%83%ac%e3%82%a4%e3%82%a2%e3%82%a6%e3%83%881/#comments Sat, 07 May 2011 04:35:55 +0000 kosuke http://blog.kaleido-jp.net/?p=469 最近いろんなスマホ最適化されたサイトを見るようになりました。
それと同時に、多様なAndroid端末が急速に普及し、iPhone3GSが全盛だった去年までの制作方法では対応が不十分になってきてまして、僕自身も試行錯誤中なこともあり、2011年5月時点でのiPhone・Androidに対応できる自分なりのレイアウト方法をちょっとまとめてみようと思います。

今回は全体編なので、主にviewportの設定と全体を囲むコンテナ要素にフォーカスを絞ります。

viewportはdevice-width、コンテナはwidth:100%などの伸縮するリキッドレイアウトに

端末の横幅を最大限に活かした方がよい

特に理由が無ければ、大抵の場合は、
viewportはdevice-width、コンテナはwidth:100%などの伸縮するリキッドレイアウトにする
自然な考え方で考えると、PCに比べるとただでさえ狭いディスプレイサイズなのですから、端末の画面をフルに使った方が良い訳です。

たぶんこれは説明するより、例を挙げて見ていった方がわかりやすいと思います。
下記のようなHTMLソースの場合で試してみたいと思います。
[html]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />

<!–viewportの指定（ここの設定を変えてみる）–>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<!–/viewportの指定–>

<link href="css/imain.css" type="text/css" rel="stylesheet" />
<title>Apple Products</title>
</head>

<body>

<!–コンテナ–>
<!–container（ここのCSS設定を変えてみる）–>
<div id="container">
　　…略
</div><!–/container–>
<!–//コンテナ–>

</body>
</html>

[/html]


1. 良いと思われる例（リキッドスタイル）

・viewport：width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0
・コンテナ幅 width:100% 　

念のため、上記のviewportの記述の簡単に説明をしておくと、width=device-width：横幅はデバイスの幅、initial-scale=1.0：初期の拡大縮小サイズ、minimum-scale=1.0,maximum-scale=1.0：最小・最大の拡大縮小サイズ、user-scalable=0：ユーザーが拡大縮小できるか否か（0またはnoで不可）

※ポイントをviewportとコンテナに絞るため、画像が引き伸されてるのは一旦スルー。別途エントリ予定。
　

capture1

viewport：width=device-width
コンテナ：100%（iPhone 縦）

capture2

viewport：width=device-width
コンテナ：100%（iPhone 横）

iPhone：ご覧のように、縦でも横でも違和感無く表示されています。



capture3

viewport：width=device-width
コンテナ：100%（Android 640×960 縦）

viewport：width=device-width
コンテナ：100%（Android 640×960 横）

Android：iPhone同様に、縦でも横でも違和感無く表示されています。画面解像度は640×960にしています。実機（IS03）でも同様でした。


2. ときどき見かける例（iPhone3GSまでの時代なら、そこそこ問題なかった固定スタイル）

・viewport=320px （幅指定以外はなし）
・コンテナ幅 width:320px

※ポイントをviewportとコンテナに絞るため、画像が引き伸されてるのは一旦スルー。別途エントリ予定。

viewport：width=320px 他の指定無し｜コンテナ幅320px（iPhone横向き）

viewport：width=320px 他の指定無し｜コンテナ幅100%（Android WVGA）

iPhone：とりあえずレイアウトは保たれているが、320px→480pxに無理矢理引き伸しているので、表示範囲も狭く、3G・3GSでさえ画像が引き伸されてしまう。

Android：左右に余白ができてしまう。個人的にはとても不自然に感じます。


1のデメリット

という感じで、個人的には１のリキッドスタイルがオススメなのですが、デメリットもあります。
ぱっと思い当たるケースで言うと、

・絶対配置レイアウトをしたい場合
・CSS3やJSでアニメーションなどしたい場合

全体がリキッドなため、変動的なピクセル指定が難しくなります。
たとえば、「要素を横幅いっぱい分アニメーションで動かしたい」といったときに、端末の向きによって横幅は変わります。端末の機種でも横幅が変わるかもしれません。
縦のときは320px動かす、横のときは480px動かすといったような処理が必要になってきます。

２のレイアウトスタイルであれば、横幅は縦でも横でも320pxですから、いつでも320px動かせばいいんです。

UIに命をかけたようなサイトであれば、いいと思うのですが、個人的には基本的なレイアウトの方が重要かなーと思っています。

また、dpiとかいろいろ細かい設定もできるのですが、その辺は設定せずにサイトのレイアウトや構成で補った方がよいというのが、個人的な見解です。
次はこの辺か画像について書きたいと思ってます。

他の人気エントリ

]]> http://blog.kaleido-jp.net/web/%e3%82%b9%e3%83%9e%e3%83%bc%e3%83%88%e3%83%95%e3%82%a9%e3%83%b3%e3%82%b5%e3%82%a4%e3%83%88%e3%83%ac%e3%82%a4%e3%82%a2%e3%82%a6%e3%83%881/feed/ 2 スマートフォンサイトにフリック・スワイプ実装できるjQueryスライダプラグイン http://blog.kaleido-jp.net/web/%e3%83%95%e3%83%aa%e3%83%83%e3%82%af%e3%82%b9%e3%83%a9%e3%82%a4%e3%83%89/ http://blog.kaleido-jp.net/web/%e3%83%95%e3%83%aa%e3%83%83%e3%82%af%e3%82%b9%e3%83%a9%e3%82%a4%e3%83%89/#comments Fri, 29 Apr 2011 02:58:50 +0000 kosuke http://blog.kaleido-jp.net/?p=227

Demo of Flick Slide

フリック式スライド　デモ

※コメントにも頂いておりますが、この公開版はバグがありますので、承知の上でご利用になるか、ご自身でカスタマイズされる方がお使いください。

スマートフォンサイトにおいて、左のムービーのようなフリック動作ができる画像スライドのjQueryプラグインを作りました。（ムービーはiOSシミュレータによるデモです）iPhone・Androidでご覧の方はデモに直接アクセスしてください（ムービーは再生されません）。

【デモを見る（iPhone・Androidで見てください）】
【ダウンロード】



なぜプラグイン化したか

横向き対応がハードルを高くする

ご自身でこの手のUIを組んだ経験がある方はわかると思いますが、絶対配置（position:absolute）を使ったリキッドレイアウトを組むのはなかなか手の込んだことが必要で、今後の仕事で都度ゼロからUI作成を行うのは効率が悪くなってしまうと思ったからです。

今現在、ディスプレイサイズが多様なAndroid端末が普及しており、横向きになったときにそれぞれの端末において横幅を変える必要があります。わざわざ各機種のディスプレイサイズを登録しておくようなことは、フロントエンドの処理としては非現実的です。

そこで、このプラグインはフレキシブルな端末対応をおこなうために、端末の向きが変わった際に横幅を取得しなおすという処理をおこなっています。

プラグイン化したことで、上記のような手の込んだことを毎回書かなくてもよくなります。

実装方法

ダウンロードしたファイルを解凍後、
jquery.flickslide.jsとflickslide.cssをご自身のサイトの任意の箇所に置いてください。

【解凍後のファイル】
js – jquery.flickslide.js　：プラグインJSファイル　
css – flickslide.css ：　プラグイン用CSSファイル
– arrowL.png 　：　左矢印画像
– arrowR.png　：　右矢印画像

HTML
[html]
<script src="js/jquery.flickslide.js"></script>
<link rel="stylesheet" href="css/flickslide.css" type="text/css" />
[/html]
JavaScript（jQuery）
[javascript]
$(‘適用したい繰返し要素’).flickSlide({target:’差換え要素’});
[/javascript]

※cssフォルダに入っている画像は、flickslide.cssと同じディレクトリに置いてください。
ただ、CSSのカスタマイズをすることで、ご自身でご用意された画像などに変更することができますので、
その場合は、同じディレクトリである必要はありません。


実装例

画像を並べたような下記HTMLがあったとします。

HTML
[html]
<div id="mainImages" class="mainImageInit">
<ul>
<li id="mainImage0">
<a href="/category/web/html5/">
<img src="/images/html5.jpg" />
</a>
</li>
<li id="mainImage1">
<a href="/category/web/smart/">
<img src="/images/smart.jpg" />
</a>
</li>
<li id="mainImage2">
<a href="/category/web/music/">
<img src="/images/music.jpg" />
</a>
</li>
<li id="mainImage3">
<a href="/category/web/iphone/">
<img src="/images/app.jpg" />
</a>
</li>
<li id="mainImage4">
<a href="/category/web/jquery/">
<img src="/images/lovejquery.jpg" />
</a>
</li>
<li id="mainImage5">
<a href="/category/web/moviemusic/">
<img src="/images/moviemusic.jpg" />
</a>
</li>
</ul>
</div>
[/html]

上記のようなHTMLがあった場合、JavaScriptは下記のように記述する。

JavaScript
[javascript]
$(‘#mainImages li’).flickslide({target:’#mainImages ul’});
[/javascript]

適用したい繰返し要素：#mainImages li
スライドとしたいのはli要素の中身なので、上記の用に指定。

差換え要素：#mainImages ul
プラグインが発動されると、UIを生成。差換え要素で指定された箇所と置き換わります。

※iPhone・Androidでアクセスしないとプラグインが自動的に発動を止めますので、テストする際は必ず実機やシミュレータでおこなってください。Mac・PC版のSafariなどのユーザーエージェント変更では、見た目がだいぶ異なると思います。


機能説明

・自動的に5秒ごとにスライド
・スワイプによるスライド
・フリックによるスライド
・横向き時に自動的にサイズ補正・センター寄せレイアウト
・ページング的UIの自動生成
・「前へ」「次へ」のボタン自動生成
・ユーザーエージェント判定し、iPhone・Androidでない場合は発動しません。
・CSSのカスタマイズによるデザイン変更

※ごく稀にAndroidでバグが起きるようです。激しいスワイプやフリックについていけないようです。
　これについてはOSなどに依存するのかなぁという認識です。ゆっくりスワイプしなおすと正常に動作します。
※内部的にはかなりベタ書きで、美しいプログラムではありませんのでご了承ください。
　ご自身でUIなどの開発ができず、とりあえずUIを組込みたい方向けです。
※ライセンスはMITでお願いします。ご使用については一切の責任を持ちませんので、ご理解いただけますようお願いいたします。
※ご要望があれば、これらの設定はパラメータ制御できるようにバージョンアップ予定です。
カスタマイズやご自身のサイトへの最適化のご相談・ご依頼などはコメントもしくはメールでお願いいたします。あくまで業務としてのご相談やご依頼を前提としてください。Web関連の業者の方に無条件での回答などはいたしませんので、ご了承ください。
※Android端末はIS03のみしか確認できていません。他のAndroid端末で表示をご報告いただけたら幸いです。
※【追記（2011.4.30 23:55）】1ページにつき1つまでの実装可能です。またスライドさせる要素は極めてシンプルな要素の方が良いです。
※【追記：2011.5.1 23:36】デモについて最初大きい画像が表示されますが、単純に画像を並べただけのHTMLソースですのでそのようになります。このサイトトップでは、CSSでdisplay:noneしておきページロード後に表示という処理をおこなっているため綺麗に表示されます。プラグイン自体は、あくまでUIの生成・置換えのみの機能ですので、同様の処理をおこなう場合は、対象となる要素をdisplay:noneするなど、独自でCSSやJSの追加をおこなってください。
※【追記：2011.5.2 21:45】上記の画像が一瞬大きく表示されるのをプラグイン側でもある程度制御できたので、修正版をアップしております。2011/5/2 21:45以前にダウンロードされた方は、よろしければダウンロードしなおすことをおすすめいたします。
※【追記：2011.5.6】Androidではブラウザのメニューを開いた際、ローテーションスクロールのキューが溜まり、バグが起きてしまうようです。ブラウザメニューを開いた検知などができないため、次回バージョンアップでローテーションをOFFする設定を設けたいと思っています。


レイアウトや内部の解説

スマートフォンサイトでは横向き時のサイズ変更に対応した、手の込んだレイアウトを組める必要があります。
そのレイアウト術は、スマートフォンサイトを組む上で、今後必要となるスキルだと思われるので、次回のエントリで紹介したいと思っています。

このサイトのスマートフォン対応の全体的なことは、下記エントリーに書いていますので、こちらも合わせてご一読いただけると幸いです。

スマホ最適化でやったこと

また、今回のプラグインはサイトトップで実装されています。

サイトトップ

【追記：2011.5.1】エントリのタイトルに「1行」という表現は不適切であるとのご指摘をいただきました。
エントリ名から削除いたしました。誤解を与えてしまうような表現を用いまして、大変申し訳ありませんでした。

他の人気エントリ

]]> http://blog.kaleido-jp.net/web/%e3%83%95%e3%83%aa%e3%83%83%e3%82%af%e3%82%b9%e3%83%a9%e3%82%a4%e3%83%89/feed/ 8 スマホ最適化でやったこと http://blog.kaleido-jp.net/web/%e3%82%b9%e3%83%9e%e3%83%9b%e6%9c%80%e9%81%a9%e5%8c%96/ http://blog.kaleido-jp.net/web/%e3%82%b9%e3%83%9e%e3%83%9b%e6%9c%80%e9%81%a9%e5%8c%96/#comments Wed, 27 Apr 2011 15:03:03 +0000 kosuke http://blog.kaleido-jp.net/?p=101 ※Androidでアクセスされた方は使用感をいただけると幸いです。
（サイトトップ）

先日簡単なエントリで書いてますが、今まではてなダイアリーにエントリを書いてまして、やはりデザインの限界などがありWordPressに移行しました。

PC Site View of This Site

このサイトのPCビュー

同時に、基本的なスマホ最適化もおこなっています。

ようやく自分のサイトでスマホ最適化ができたので…ということでのエントリです。

ちなみに、このサイト自体はまだまだ作りかけでして…
そもそもサイトの構成がちゃんと考えられておらず、かなりいろいろ行き届いてないサイトです（笑）
（IE系ではちゃんと表示されません…そのうち手入れします。すみません）

どちらかというと、スマホ最適化でのユーザーインターフェースに重きを置いてのエントリとなります。

では、以下にスマホ最適化でおこなったことをまとめてみました。
（ちなみに対象としているスマートフォンはiOSデバイス（iPhone, iPod Touch）、Androidです）


1.PCとスマートフォンの振分け

基本は、CSSとJavaScriptのみでレイアウト変更しています。

PHPではUA判定してスマートフォン用のCSSとJSを読み込む数行を加えた程度で、WordPressのテーマのスイッチなどはおこなっていません。

[html]
<link rel="stylesheet" href="http://blog.kaleido-jp.net/wp-content/themes/station2/iLayout/css/iLayout.css">
<link rel="stylesheet" href="http://blog.kaleido-jp.net/wp-content/themes/station2/css/istyle.css" />
…
<script type=’text/javascript’ src=’http://blog.kaleido-jp.net/wp-content/themes/station2/iLayout/js/iLayout_ui.js?ver=0.1.0′></script>
[/html]

Smart Phone View of This Site

スマートフォンビュー

HTMLソース的には、上記の3行を変えただけでスマートフォン最適化を実現しています。

場合によっては、WordPressのスマホ用テーマを作って、スイッチしてもいいと思うのですが、今回はその方法は見送りました。

なぜかというと、別のテーマを作るということは、サイトの構成を変えたくなったとき
基本的に2つのテーマを管理・更新しなくてはいけなくなるなーと。

CSSとJSによるレイアウト変更であれば、基本的にPCサイトの要素はそのまま引き継げるので、要素の取捨選択や変更することに集中でき、変更するファイルがCSSとJSのみとなり効率が良いからです。

PHPテンプレートを変更する必要がなくなります。

もちろん、サイトを管理する人が複数いるとか、運用体制に余裕がある場合は、テーマ切替による最適化でもよいと思います。

また、iPhone3GS全盛時代までは、CSSのメディアクエリで振り分けることもできたのですが、今現在横幅が480px以上のAndroid端末がだいぶ多いので、サーバ言語かJSなどでUA判定して振り分けるようにしましょう。


2.viewportの設定

ほとんどお決まりの記述ですね。
[html]
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=yes">
[/html]

これについては、いろんなサイトで情報が出ていますので、説明は割愛します。
下記サイトなどをご覧ください。


3.ホーム画面アイコン（iPhone）、ショートカットアイコンの設定（Android）

[html]
<link rel="apple-touch-icon" href="http://blog.kaleido-jp.net/wp-content/themes/station2/iLayout/Images/WebClipIcon.png">
[/html]

WebClipIcon

ホーム画面アイコンの設定

（アイコンがダサいですがスルーで…）

この記述をおこなうことで、iPhoneならホーム画面に追加する際のアイコン、Androidならショートカットアイコンを設定できます。
（iPhoneは用意した画像に、自動的に磨き処理がかかって、いい感じになります）

余談ですが、「スマートフォン対応しました！」とアピールしているものの、この設定がされてないサイトをたまに見かけます。なんだか、アピールしているだけに惜しい感じが出てしまうので出来るだけ設定しておいた方が良さそうです（笑）


4.横向き時のテキスト拡大の無効化

スマートフォン時のCSSには次の記述をしています。
[css]
body {
…
-webkit-text-size-adjust: none;
…
}
[/css]

default

デフォルトのまま

text adjust none

拡大表示無効

これを行うことで、横向きしたときのテキストの自動拡大表示を無効にします。最近は拡大をしないのが一般的のようです。拡大表示されちゃうとなんだか不自然な印象を受けます。

比較していただければわかるように、情報量が全く違います。


5.リキッドレイアウト

このサイトはスマートフォン時には、コンテナ要素をwidth:100%としており、内部要素も必要に応じて横向きにした際に横幅が広がるレイアウトを組んでいます。

悪い例：横幅固定にした場合の横向きビューのイメージ

たまに横幅320pxなどとしたサイトを見かけます。別にそれがいけないというわけではないですが、問題はAndroidで閲覧した時です。iPhoneはレイアウトの組み方によっては、横向きにしたときに自動的にフィットしてくれますが、Androidでは純粋にその固定幅で表示されるため、以下のようなイメージになります。

左右に無駄な余白ができてしまい、なんだか不自然な感じになってしまいます。


6.スマートフォンならではのユーザーインターフェースの実装

フリックできるスライドの実装

サイトトップのバナーは、ユーザーがフリック操作が出来るようにしています。
トランジションはCSS3、UIの構築にはjQueryを使って自前プラグイン化してます。

今後いろんなサイトで使い回せるように、実装は下記の1行で済むようなプラグインを作っています。
[javascript]
$(‘#mainImageArea>#mainImages ul li’).flickSlide({target:’#mainImageArea’, duration:5000});
[/javascript]

Smart Phone View of This Site

スマートフォンビュー

このUIはけっこう手の込んだことをしています。

スマホサイトは横向き時というのを、念頭においてリキッドレイアウトという大前提で組む必要がありますが、絶対配置（position:absolute）などの要素を使うことになると、かなりハードルが高くなります。今までのPCサイトでのCSSレイアウト術より高度なスキルと発想が求められるのでは〜？と思っています。

後日のエントリでプラグインの説明と配布をおこなうつもりです。

ちなみに、このUIはAndroidでたまーにバグることがあります。どうやらYahooさんのサイトなどを見ると、iPhoneではフリックが有効になっているのに、Androidではフリック無効となっているので、まだまだAndroid向けサイトではフリックの実装はおこなわない方がよいのかも知れません。


LightBox風の画像表示の実装

こちらも自前で作成しています。

UI like LightBox

LightBox風のUI

PC時はColorBoxという海外の方のプラグインを使用させてもらってるのですが、それをスマートフォン時でも同様に使うと想定どおりにおかしな表示になりました（笑）

なので、こちらのUIも独自にjQueryで作成しました。PCのように凝ったUIにするとだいぶ重くなってしまうので、とりあえずシンプルにしています。


7.手付かずな部分…

だいぶ基本的な部分は作ったものの、元々サイトの構成ができてない上、細かい部分で最適化が行き届いてないです。
たとえば、リンクがボックスリンク（？）になってなかったり…タッチしにくいですよね。

とりあえずは、ちょっと凝ったUIの部分に時間を割いてみました。

もし、なにか気づかれた部分などあればお知らせください。
まだまだ知らないことが多く、日々勉強中です。

長くなってしまいましたが、少しでもみなさんのご参考になれば幸いです。

他の人気エントリ

]]> http://blog.kaleido-jp.net/web/%e3%82%b9%e3%83%9e%e3%83%9b%e6%9c%80%e9%81%a9%e5%8c%96/feed/ 0