タグ: スマートフォン

スマートフォン向けサイトのブラウザー確認でinitial-scaleを考慮する

blog.cdbk.net

スマートフォン向けサイトを作る際、手間がかかるのがブラウザーでの確認。

実機で見るのが一番なのですが、すぐ見たいときはFireFoxのアドオン、FireMobileSimulatorとDefault Full Zoom Levelを使って確認をしています。

FiremobileSimulatorでUserAgent偽装とウインドウ幅の指定ができ、これだけでも十分なことがほとんどなのですが、パソコンのブラウザー内ではViewportのinitial-scale、画面の拡大縮小の設定が考慮されないため、Default Full Zoom Levelを使って表示幅を拡大、縮小させて確認しています。

FiremobileSimulatorの説明は検索をするといろいろ出てくるので割愛して今回はDefault Full Zoom Levelについて少し触れたいと思います。

FireFoxのアドオンサイトからインストールしたあと、そのままではブラウザーのツールなどに表示されないので、FireFoxの表示→ツールバー→カスタマイズを押してツールバーのアイコンを設置するためのウインドウを開きます。

Caps01

 

その後、Default Full Zoom Levelのアイコンをツールバーにドラッグして適用すればすぐに使える状態になります。

Caps02

 

一般的なスマートフォン向けサイトではintial-scaleを1~0.6で設定するので必要な場合は必要な設定を追加した上で表示を確認します。

Caps03

 

パソコンでの確認をベースに制作と進めてしまうと完成後にフォントサイズに違和感を感じたり、文字の改行がおかしくなったりしやすいので、それを未然に防ぐ意味でも拡大、縮小を、できればスマートフォン上でも文字のサイズ変更ができるので(Androidの場合など)一度形になった時点で確認することをお勧めします。

 

タブレットやスマートフォン向けサイトを画面サイズに合わせてviewportを変える際のTips

blog.cdbk.net

タブレットやスマートフォン向けのサイトを作っているときにぶち当たる問題が端末の画面に対するデザインのサイズ設定。

デザインもリキッドレイアウトをメインにしつつブロック要素で構成していたりすると画面を回転させたとき、幅が可変にならず右に余白が。。。。といったことがあったのでその対処法も少しばかり載せておく。

一般的に画面が回転するとそれに応じてブラウザの縦、横幅のサイズも入れ替わるはずなのだが、一部には入れ替わらないものがあり、そのときの対処を考えるのに無駄に時間がかかったりしてしまう。

自分がいろいろ探して見た結果、回転したときの角度を取得してそれに応じて画面幅をviewportにJavaScriptで振り分ける方法が比較的簡単に適応できる方法だとわかりました。

JavaScriptで window.orientation を使うと角度が取得できる。

自分が検証に使った端末は横長のときに0度or180度、
縦長のとき90度、-90度と表示されていたので、
縦横が入れ替わらない場合の設定は（jQuery使用）

var orientation = window.orientation;
//角度の取得

if((orientation == 0)||(orientation == 180)){
//横長のときの設定
 var hscale = $(window).width();
var wscale = $(window).height();
}else{
//縦長のときの設定
var wscale = $(window).width();
var hscale = $(window).height();
}
var viewport = $(‘meta[name=”viewport”]’);
$(全体幅を指定している要素).css({width:wscale});
viewport.attr(‘content’, ‘width=’+wscale+’, initial-scale=1, maximum-scale=1′);

といった感じで設定。

よりシームレスにするには画面幅に応じていくつかレイアウトデザイン(max-width?など)を定めた上で行うと効果的。

未だ少し理解できていないAndroid OS2.Xと3.Xのブラウザのviewport周りの挙動についてわかり次第またかきます。

jQueryを使ってスマートフォン向けにフォントサイズをリサイズ

blog.cdbk.net
cdbk.net CREATIVES のサイトをスマートフォンでも文字が読めるよう、フォントサイズを可変できるようなjQueryのスクリプトを入れたので紹介。
JavaScriptのソースをべた書きするとこんな感じ

$.browser.android = /android/.test(navigator.userAgent.toLowerCase());
$.browser.iphone = /iphone/.test(navigator.userAgent.toLowerCase());
$.browser.ipod = /ipod/.test(navigator.userAgent.toLowerCase());
function fontsizeset(){
        var defaultwidth = 480;//スマートフォンのデフォルト想定幅
        var fsize = 20;//デフォルトフォントサイズ
        var devicewidth = $(window).width();
        var docwidth = $(document).width();
        var deviceheight = $(window).height();
        var docheight = $(document).height();
        if(devicewidth>deviceheight){
        var resizelength = Math.round((deviceheight / defaultwidth ) * 100)/100;
        }else{
        var resizelength = Math.round((devicewidth / defaultwidth ) * 100)/100;
        }
        var newfsize = fsize * resizelength;
        if(( $.browser.android )||( $.browser.iphone )||( $.browser.ipod )){
        $("body").animate({"font-size": newfsize},"slow");
        }
}
$(document).ready(function(){
        $(window).bind('resize load', function(){
                fontsizeset();
        });
        $(window).load(function(){
                fontsizeset();
        });
});

タブレットでの表示は通常表示を前提に、スマートフォンで極端に小さくなってしまうフォントサイズを端末の幅に合わせて可変するスクリプト。
端末の表示幅は2011年春•夏に発売されている端末の多くが採用している480pxをベースに幅に合わせて指定しているフォントサイズが変更される仕組みにしています。また、横長にしたときは縦、横、短い方を基準にリサイズするようにしているので極端にサイズが大きくなることはないようになっています。
可変スクリプトを「ON」にした状態のサイトはこちら
今後、スマートフォンもHD対応のサイズが主流になりつつある中、端末に応じたCSSをかき分けるのも方法なのですが、こういった方法もあるということで紹介しました。
 
 

  • jQuery+Mobile+スマートフォンサイト+デザイン入門+(WEB+PROFESSIONAL)
  • Web制作の現場で使う+jQueryデザイン入門+(WEB+PROFESSIONAL)
  • JavaScript本格入門　～モダンスタイルによる基礎からAjax・ｊQueryまで
  • Webデザイナーのための+jQuery入門　魅力的なユーザーインターフェースを手軽に作る+(Books+for+Web+Creative)
  • jQueryデザインブック　仕事で絶対に使うプロのテクニック
  • JavaScript+%26+jQueryレッスンブック―最新jQuery対応
  • 10日でおぼえる+jQuery入門教室
  • jQuery+Mobile
  • jQueryクックブック

linked by blog-tools

スマートフォン片手に買い物へ出かけ、スマートフォンで買う時代。

blog.cdbk.net

via youtube.com

ホリデーシーズンは週末にウインドーショッピングをしてほしい物を見て回り、月曜日にAmazonやeBayのボタンを押す。

ところが最近はスマートフォンを片手に買い物へ出かけ、目の前の商品を見つつ、実際はスマートフォンで買い物。

そういう時代らしい。

そして、新しい情報はどこから手に入れますか？
テレビ？新聞？パソコン？　いいえ、スマートフォン。

と考えると広告はテレビ、ウェブサイトよりもむしろスマートフォンのホーム画面やデスクトップとよばれるところに如何に露出するかに掛かってくるような様相。

スマートフォンの予備電池はコンビニで手に入らない。

blog.cdbk.net

スマートフォンはとても便利だけれど、使う頻度が増え、バッテリーはすぐに無くなり、
そして電池を探してコンビニへ行っても携帯用予備電池のみ。
iPhoneはバッテリー付きのカバーの種類が豊富でそれらを使うこともできる。
しかし、他のスマートフォンは？
ということで持っておけば使える予備バッテリーを紹介。
iPadやXperiaにも対応しているエネループの大容量リチウムイオンバッテリー
(iPhone,iPadなどは専用のケーブルが別途必要)

自分が使っているMEDIASも付属のケーブルで充電が可能でした。
スマートフォンやタブレットは通常のUSBの電流、500mAではなくその倍以上の1000mA〜2000mAを必要とする機種が多いため、その他のバッテリーを買う際はUSB接続で出力できる電流量を予め調べておくこと必須。このバッテリーは第2世代で、初代のものは500mAの電流なのでiPadやスマートフォンには対応せずでした。
 
その他のスマートフォン向けバッテリーを探す

スマートフォンの影に潜める高機能デジタルプレーヤーたち

blog.cdbk.net

AndroidやiOS(iPhone)などスマートフォンが世の中のトレンドになっている中、同じOSを使いつつも電話機能を搭載しない、デジタルプレーヤーの市場が来年は本格的に拡大しそうな予感。
iPodのハイエンドモデルとして、タッチパネル操作のプレーヤーとして登場したiPod touchがほぼ独壇場だったが、CreativesがZen touch 2を日本でもリリース、

iPod touchとの大きな違いはAndroidであることと、外部メモリー、microSD対応であるところ。
そして最近カメラを搭載したiPod touchはAPP STOREの使えるアプリが増え、wifi環境であればTwitterやメール、Skypeなどさまざまなことができるようになりました。

そして実は、旧モデルがお買い時。なかなか値段を下げないApple製品なのにかなりお得になっています。

カメラなしモデルが軒並み20％以上安くなっています。