タブレット向けサイトのサイズがうまく出来ないときの対処法

この1年、タブレット向けのサイトを作る機会が増えてきたので実際の解像度とブラウザーの表示サイズが異なることで起こる問題の対処法をまとめました。

ランドスケープ表示とポートレート表示、双方できれいなレイアウトで見せたいとき

ターゲットとするタブレットのアスペクト値によって多少変わりますが、CSS3のmediaqueriesを使い、2サイズをだし分けるのが最も簡単で失敗しない方法だと思います。JavaScriptで回転した際にviewportを書き直してもよいのですが、端末によって挙動や動きが異なる場合が多いので、mediaqueriesなどプログラムをなるべく使わない方法でレイアウトを変更するのが得策。

書き方は

@media screen and (max-width: 820px) {/*820pxまでのサイズのとき*/body{}...}
@media screen and (min-width: 820px) {/*820px以上のサイズのとき*/body{}...}

といった書き方になります。

実際の解像度で作ったところ、拡大表示されてしまうとき

viewportをwidth=device-widthで設定したにもかかわらず、拡大表示される場合があります。
その場合はinitial-scaleを1以下の数字にして縮小表示させることでタブレットのサイズに合わせます。
たとえば

<meta name=”viewportcontent=”width=device-width, initial-scale=0.66,minimum-scale=0.66,maximum-scale=2” />

といった書き方。

微妙に横幅が大きくなり、スクロールしてしまうとき

viewportやmediaqueriesを使い、サイズを合わせたものの、微妙に幅が合わず、スクロールが出てしまうときはCSSでbodyや一番外側のブロック要素にoverflow-x:hiddenの設定を追加します。
そもそもの改善にはなりませんが、横スクロールしなくなり、ユーザビリティが多少改善されます。

リキッドレイアウトを活用して様々なサイズに対応させる。

スマートフォンやタブレットでは出来る限り画面サイズ幅いっぱいにコンテンツを表示させたいので、幅指定を100%にすることを前提に、スマートフォンとタブレットでのコンテンツ表示を共有する場合やレスポンシブデザインを行う場合にはmediaqueriesを使い、全体幅とブロック要素の回り込み、表示非表示を制御します。

アドレスバーを非表示にする+ひと工夫

スマートフォンでもよく使われる方法ですが、JavaScriptを使い、アドレスバーを消すことで画面の高さーステータスバーの高さをコンテンツに当てることが出来ます。ランドスケープの場合ファーストビューの領域がアドレスバーで削られてしまうときの弊害が大きいので下のようなスクリプト(jQuery)を追加することで対処します。

function onloadpage(){
	setTimeout(function(){
	var h = $("body").scrollTop();
	if(h==0){
	setTimeout(function(){ window.scrollTo(0,1); },110);
	setTimeout(function(){ window.scrollTo(0,0); },111);
	}
	},100);
}

読み込み中にユーザーがスクロールしているときには動作しないよう、スクロールを検知するようにしています。

気になるところはご指摘いただければ対応します。また何かわかれば追記します。

Galaxy NEXUSに乗り換えました。

  • 保証付★超美品+docomo+GALAXY+NEXUS+SC-04D+白ロム携帯

linked by blog-tools

Android4.0搭載のGalaxy NEXUSに乗り換えました。

今までMEDIASを使っていたのでおサイフケータイやワンセグなどが使えない端末になっちゃうのですが、SIMカードを入れ替えればそのまま使えるSIMロック端末同士なので特に気にせず、Googleアカウントを入れて必要なアプリをGoogle Playストアからインストールするとすぐ使える状態になりました。

ネガティブなところ

あまりいいデザインのカバーなどが店頭になく、そしておサイフケータイやワンセグ、防水機能など日本メーカーが得意な機能は何もなし、そしてデフォルトで入っているアプリケーションもほとんどなく、素の状態。そしてmicroSDカード用のスロットもないので画像などを前の機種から移そうとするとかなり苦労しそうな印象でした。

でもさすがはGoogleのフラグシップモデル

シンプルで速い、そして画面が綺麗なGalaxy NEXUS。前の機種でも使っていたQuickSnapというカメラアプリが、以前は起動→表示まで数秒かかっていたおのが、クリックと同時に撮影可能な状態なるほど高速。ブラウジング時のスクロールもスルスルスムーズに進みます。

そしてmicroSDカードが使えない代わりに、内蔵の16GBの容量があるのでアプリケーションでメモリーが切迫するようなこともほとんどありません。dropboxなどを使えば端末とPCなどとファイルを同期させることも出来るので普段から同期させると機種変したときなどもあまり気にすることなく、今まで通り使うことかできます。

その他、HD動画の撮影ができたり、そのまま表示できたりといったこともあるのですが、何より、Android端末でストレスに感じることが多いfacebookやtwitterのタイムラインの読み込みや表示が実にスムーズになるので、ワンセグやおサイフケータイ、防水機能はいらないという人にはお勧めしたい端末です。docomoで10年以上契約していたりすると1万円ぐらいで機種変できてしまいます。

カバーなどでオシャレなのがないのかとAmazonで調べたところ、なかなかいいのもありました。

linked by blog-tools

今はとりあえずシリコンの黒いケース。これから標準になるであろうHDサイズディスプレイに対応させたクリエイティブの検証にもこれから役立ちそうです。

コーポレートサイトにjQueryを使ったモーションを追加しました。

Corporate

コーポレートサイトにjQueryベースでいろいろな機能を追加しました。

トップページのタイポグラフィーは上から表示されるように透明→非透明の効果を設定。

各ページヘはContact(お問い合わせ)を除き、ページ読み込みで下から上へイージングで表示されるようにしています。

Lightboxlike
その他サムネイルはリンクから、ページ内でフレーム上にウインドウを開き表示するLightbox的なものに変更。

最初右上に表示されている円はランダムに移動、色が変わります。

cdbk.net CREATIVES. http://creatives.cdbk.net

GumroadにてガーリーなWordPressブログテーマを公開

Blogdesign 01

ガーリーなデザインのWordPressテーマをGumroadへ公開しました。

現状、Alpha版でとりあえず見える程度ですが、レスポンシブデザインでスマートフォンにも対応しているので背景画像とタイトルロゴファイルを変えて自分のデザインでといった時にも使えると思います。

海外のファッションブログなどを参考に、記事の幅100%で画像が表示されるようにしており、スマートフォン上でも画面幅に最適化されるようにリサイズ処理をCSSにいれています。

不具合な都度対応でbeta→正式版へとバージョンアップする予定です。

仕様はHTML5 / CSS3 / less.js / jQuery。

今のところ$5。

サンプル / ダウンロード($5)

1st look(ENTERTAINMENT LIFESTYLE MAGAZINE in Korea)

Lightbox 1331540485398

韓国土産に雑誌をリクエストしたらこんなおしゃれなフリーペーパーをもって帰ってくれました。

1st lookという去年創刊された雑誌でWebサイトには更にいろいろな情報が掲載されています。

ファッションを中心にネット販売をしているようで日本と違う色合いのアイテムが多数ありました。

Lightbox 1331540555837

Lightbox 1331540667195

Lightbox 1331540711499

WebサイトがWordPressで作られていて、TwitterやFacebookをうまく使っているところが先進的だな、、、と思いました。日本もこういった事例あるのかな?

Webサイトで過去のものがいくつかみれます。そしてAndroid向けにアプリがあります。

最初戸惑ったが便利なPogoplug Mobile

  • SoftBank パーソナルクラウド Pogoplug+Mobile(SB-PG01-MBLE)

linked by blog-tools

 

今まではアプリケーションをパソコンやスマートフォンに入れて使っていたPogoplug。保存先がクラウドサーバーにあるDropBoxと違い、自分の端末のストレージを使っているので外出先で使う場合などは家のパソコンの電源をつけていないといけなかったりして非効率なので、LANに直接つないで使う、最近日本でも発売された「Pogoplug Mobile」を手に入れました(Amazonギフト!)。

前から販売されているものは無線LANに対応していたり、USBポートが複数ありHDDを複数つなげたりできるのですが、これは有線LAN+USB1ポート+SDカードスロットのみという構成でサイズもAppleTVより少し大きいぐらいのサイズ。

これをLANネットワーク、ルーターなどにつなげてPogoplugのサイトからアクティベート(登録)するとすぐ使えます。

繋げばすぐ、、、とおもいきや、MacBook Airがなかなか認識してくれなかったので試行錯誤したところ、一度PogoPlugをログアウトしてログインしなおすと認識されるようになりました。

外出先からアクセスすると多少時間はかかりますが、予めDVDなどをリッピングした動画をストリーミング用にPogoplug上で変換しておけば、難なく見ることができます(WiMAXで試しました)。

LANネットワーク内で繋げばLANの速度でインターネットを介さずつながるのでNAS同様のスピードになります。

最近クラウドサーバーのサービスもはじまり、Pogoplug Mobileを買い、3月待つまでにアクティベートするともれなく1年間20GBの使用ができるのでHDDが余っていてNASをと考えている方や、PogoPlugをもう少し使いやすくと思っている方は検討してみてはいかがでしょうか?

 

Coda使い始めました。

昨年から気になっていた「Coda」というマークアップ用アプリケーション。

DreamWeaverを今までずっと、12年ぐらい使っていたのですが、コーディングなどでも11インチMBAを使っているので、複数のサブウインドウなどがあると、作業領域が小さくなり、少し気にしていたりしたのですが、Codaはシングルウィンドウ、プレビューやコード入力がタブ切り替えのように行えるのですごく作業効率が上がりました。

何より、FTP設定すれば即時反映できるのでテスト環境を作ってそこで確認、問題なければ本環境へ反映みたいなフローにしてしまえばいいので、毎回毎回アップロードする手間なども省けます。

Coda

コードナビゲーターにHTMLの要素やJavaScriptのファンクションが表示されるので構造理解を視覚的にサポートしてくれます。

価格がちょっと高めですが、仕事でと考えている方にはおすすめです。

Coda 2がリリースされました。
Coda 2 - Panic, Inc.

cdbk.net CREATIVESのサイトをリニューアルしました。

Creatives

コンテンツ内容の整理を兼ねて、サイトをリニューアルしました。

今回はレスポンシブデザインを取り入れ、640px幅以下になるとスマートフォン向けのビューに切り替わります。

HTML5 + CSS3 +jQueryでマークアップ。
Dinを各ページタイトルのタイトルで大きく使い、右上に円をアニメーションで配置。

作品などはレシピサイトのものをベースにサムネイルからLightbox的な見せ方をしようか検討中です。

色々機能拡張する予定なので更新次第またご報告します。

cdbk.net CREATIVES.