これからもっとメジャーになるかな?
jQuery Mobileのまとめがあったのでメモメモ。
自分は結局jQueryベースで独自のものを使うことが多いのですが、できれば使いたい。
これからもっとメジャーになるかな?
jQuery Mobileのまとめがあったのでメモメモ。
自分は結局jQueryベースで独自のものを使うことが多いのですが、できれば使いたい。
$.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をかき分けるのも方法なのですが、こういった方法もあるということで紹介しました。
linked by blog-tools
jQuery+HTML5+CSS3でリニューアル。
いろいろ小細工を仕込み、アイコンをクリックすると動いたりします。
現状単一構成なのですが、もっとボリュームが増える場合は複数のページに分けようと思っています。
iPadでも普通に見えるサイズに調整しているのでiPhoneやアンドロイド端末では横にしてみていただければ文字も難なく見れると思います。
最近スマートフォン向けのコンテンツを作る機会が多く、いろいろ試行錯誤しているのですが、1年前の標準サイズが320px。現状が480px。そしてこの秋から本格的に展開されていく次期のサイズが720px。それらにあわせてそれぞれにCSSを作ったりしていては、コストがかかりすぎてしまうので、320〜720pxまでハイブリッドな対応が出来るレイアウトをそろそろメインに使っていこうかと思っています。
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を使ったスライドショーを制作しています。
とりあえず、動くようになったのでcdbk.net CREATIVESに掲載。
まだコントロール、ナビゲーヂョンなどがない状態なのでそれらを追加を今後行っていきます。
スマートフォンやタブレットは画面幅が端末を回転させたりする際にかわってしまうのでそれに対応するようリキッドデザインを概念におき、アスペクト比を保った表示を行うスライドショーです。
何か表示、機能面でリクエストなどあれば出来る範囲で盛り込んでいこうと思っています。
でも出来る限り、導入がシンプルに出来、CSSでデザインできるものを目指しています。
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); の数値で設定。
今月立ち上げた、年賀状サイト「Nenga. 皆と違う、年賀状。」
制作当初はFlashでと考えたり、CMSでとも考えていたりしたのですが今回もお得意?のJavaScriptでインターフェースを固めました。
現状様々なJSライブラリがあり、Lightboxなどいいものがたくさんある中で、最近よく使っているのがjQuery。
さまざまな用途に応じたクラスやライブラリが多くあり、複数を使ってもあまり不具合が起こらないのでよく使っています。
Nenga.で使っているのはjQuery+prettyPhoto+Nivo Slider。
トップページで画像が次々と切り替わるアニメーションはNivo Sliderで指定したクラスやIDの中の画像を児童でスライドショーにしてくれるものです。単にIDを指定してしまうと複数をスライドショーにするのが難しくなるので、今回はクラス+タグで指定しています。スライドショーに使う画像は前後で明暗がはっきりした画像にすると切り替わりがシャープに仕上がると思います。
各ページをウインドウで表示するのに使っているのがprettyPhoto。
かなり高機能なビュアのインターフェイスでFlashや動画などにも対応しています。また、デフォルトで数種類のテーマファイルが入っているのでホワイト、ブラックなどサイトのスタイルに合わせて選ぶことができます。
自分の予想以上にアクセスがあるのでちょっとピッチはやめて年賀状のデザインもアップしないと。。。ですね。