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

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・jQueryまで
  • Webデザイナーのための+jQuery入門 魅力的なユーザーインターフェースを手軽に作る+(Books+for+Web+Creative)
  • jQueryデザインブック 仕事で絶対に使うプロのテクニック
  • JavaScript+%26+jQueryレッスンブック―最新jQuery対応
  • 10日でおぼえる+jQuery入門教室
  • jQuery+Mobile
  • jQueryクックブック

linked by blog-tools

サイトをjQuery+HTML5+CSS3で衣替え


jQuery+HTML5+CSS3でリニューアル。
いろいろ小細工を仕込み、アイコンをクリックすると動いたりします。
現状単一構成なのですが、もっとボリュームが増える場合は複数のページに分けようと思っています。
iPadでも普通に見えるサイズに調整しているのでiPhoneやアンドロイド端末では横にしてみていただければ文字も難なく見れると思います。
最近スマートフォン向けのコンテンツを作る機会が多く、いろいろ試行錯誤しているのですが、1年前の標準サイズが320px。現状が480px。そしてこの秋から本格的に展開されていく次期のサイズが720px。それらにあわせてそれぞれにCSSを作ったりしていては、コストがかかりすぎてしまうので、320〜720pxまでハイブリッドな対応が出来るレイアウトをそろそろメインに使っていこうかと思っています。

jQuery関連で気になったコンテンツのブックマーク

33のエクセレントなjQueryのチュートリアル。
http://spyrestudios.com/33-excellent-jquery-tutorials/

 ソースもみれたするので、仕組みを理解して実際の制作に使えるものが33。

jQuery Mobileがいよいよベータに
http://www.dzone.com/links/rss/jquery_mobile_beta_1_released.html 

今後スマートフォン向けのWebページUIにおいて目が離せないjQuery Mobile。

そしてそれ(jQuery Mobile)をブログに導入してみよう的なチュートリアル
http://blogs.lessthandot.com/index.php/WebDev/ServerProgramming/PHP/trying-out-jquery-mobile-on

これでおしゃれなスマートフォン向けのブログができる。。。。のかな? 

jQuery Mobileのデフォルト見た目をそのままつかうとどこかそっけないところは要注意。

 

こんな感じでブックマークを時折更新します。 

jQueryを使ったスライドショー「fallslider」のα版


スマートフォンやタブレット端末でも見ることが出来るスライドショー機能をコンセプトにjQueryを使ったスライドショーを制作しています。
とりあえず、動くようになったのでcdbk.net CREATIVESに掲載
まだコントロール、ナビゲーヂョンなどがない状態なのでそれらを追加を今後行っていきます。
スマートフォンやタブレットは画面幅が端末を回転させたりする際にかわってしまうのでそれに対応するようリキッドデザインを概念におき、アスペクト比を保った表示を行うスライドショーです。
何か表示、機能面でリクエストなどあれば出来る範囲で盛り込んでいこうと思っています。
でも出来る限り、導入がシンプルに出来、CSSでデザインできるものを目指しています。

jQueryを使ってRSSをテキストで表示


jQueryを使ってページ内に簡単にRSSの一覧を表示するサンプル。
<head>内にjqueryを読み込んだあとに以下のコードを記載。
今回はページ読み込み時ではなくボタンなどを押すと表示されるようにしたものです。
RSSはTwitterのログ。

以下サンプルコード
$(document).ready(function () {
$(“.xmlrss”).click(xmlrss);
});
function xmlrss(){
$.ajax({
  type: “GET”,
  url: “RSSのURL”,
  dataType: “xml”,
  success: xmlP
});
};
function xmlP(xml) {
$(“item”,xml).each(function (i) {
  $(“表示したいクラスもしくはID名”).append(‘<a href=”‘+$(this).find(” target=”_blank”>’ + $(this).find(“title”).text() + ‘</a>’);
  return(i!=5);
});
}
のような形で表示件数は return(i!=5); の数値で設定。

Quicksand、ボックスを必要に応じてソートできるjQueryプラグイン


ボックス要素を値に幼児てソートできるプラグイン「Quicksand」。
サイトにあるデモページではファイルサイズや名前などでソートできるようになっています。ソート時のアニメーションがスムーズ、かっこいいのでボックスを多用するサイトなどでこれから活躍していきそうなプラグインです。
Quicksand

年賀状サイト「Nenga. 皆と違う、年賀状。」で使っているjQueryプラグインなどのTips。


今月立ち上げた、年賀状サイト「Nenga. 皆と違う、年賀状。
制作当初はFlashでと考えたり、CMSでとも考えていたりしたのですが今回もお得意?のJavaScriptでインターフェースを固めました。
現状様々なJSライブラリがあり、Lightboxなどいいものがたくさんある中で、最近よく使っているのがjQuery。
さまざまな用途に応じたクラスやライブラリが多くあり、複数を使ってもあまり不具合が起こらないのでよく使っています。
Nenga.で使っているのはjQuery+prettyPhoto+Nivo Slider
トップページで画像が次々と切り替わるアニメーションはNivo Sliderで指定したクラスやIDの中の画像を児童でスライドショーにしてくれるものです。単にIDを指定してしまうと複数をスライドショーにするのが難しくなるので、今回はクラス+タグで指定しています。スライドショーに使う画像は前後で明暗がはっきりした画像にすると切り替わりがシャープに仕上がると思います。
各ページをウインドウで表示するのに使っているのがprettyPhoto
かなり高機能なビュアのインターフェイスでFlashや動画などにも対応しています。また、デフォルトで数種類のテーマファイルが入っているのでホワイト、ブラックなどサイトのスタイルに合わせて選ぶことができます。
自分の予想以上にアクセスがあるのでちょっとピッチはやめて年賀状のデザインもアップしないと。。。ですね。