タグ: サイト

レシピ本サイトを作りました。

blog.cdbk.net

KURIMO（クーリモ） ギフトサイト

Iluvrecipe 01

最近外食より内食が主流なので家にレシピ本も増えてきたので、良さそうなものを集めてサイトを作ろうと思い、作りました。

名前は「I ♥ recipe.」。AmazonのAPI使っているのでAmazonに載っていないものは載せられないのですが、独自のカテゴライズをして増やしていく予定です。

最近はシリコンスチーマーやココットなどの調理器具がセットになったムック本などもあるのでバレンタインのために作ってみるなどしてもいいかもしれません。

個人的には小太り系のレシピ本をもっと載せたいところですが、できるだけ作りやすそうなものを中心にということで。

この本も載せてほしいなどリクエストあれば、コメントいただけると幸いです。

Iluvrecipe 02

レシピ本の話はここまでで、ここからはサイトの仕様。

システムはWordPressを使い、HTML5+CSS3+jQuery+less.jsで制作。

タグ部分やサムネイル一覧はjQueryで少し回転させてワンポイントにしています。

トップから本の詳細ページを見る際は基本、Lightboxのようにページ内で表示させるようにしています。

WordPressのテンプレートとして別途改変して普通のブログでも使えるようにするかは現在模索中。

 

 

スマートフォン向けサイトのブラウザー確認で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の場合など)一度形になった時点で確認することをお勧めします。

 

WebサイトでjQueryを使ってTwittelatorの画像表示のようなエフェクトを追加する方法

blog.cdbk.net


Caps
最近UIが一新され、新たなアプリケーションのインターフェイスを形にして切れた「Twittelator」。
そのインターフェースの中で自分が一番気になった画像表示のエフェクトをjQueryを使ってcdbk.net CREATIVESのshowcaseで形にしました。
使うのはjQuery.js(今回は1.4.2)とイージングのエフェクトを簡単に追加できるjQuery.easing.js(1.3)のみ。
エフェクトを施したい画像を<span class=”jumpin”></span>で囲みcssでdisplay:block,overflow:hiddenを指定。
JavaScriptはjQuery、easingを<head>内に追加したあとに下記を追記。

//初期表示設定
function jumpin_set(){
	$(".jumpin").each(function(){			//指定するクラス
		var img_w = $(this).width();		//デフォルトの画像幅取得
		var img_h = $(this).height();		//デフォルトの画像高取得
		$(this).attr({"data-h":img_h});		//デフォルトの画像高を属性として保存
		$(this).animate({opacity:0.5,"box-shadow":"0 0 2px #111",width:img_w,height:(img_h/4)},100); //画像の高さを縮小
	});
}
$(document).ready(function(){
	$(window).load(function(){
		setTimeout(function(){
		jumpin_set();
                }, 100);
	});
	$(".jumpin").hover(function(){//マウスオーバー時の動作
		var img_w = $(this).width();
		var img_h = $(this).height();
		var next_h = $(this).attr("data-h");
		if(next_h){
		$(this).animate({opacity:1,"box-shadow":"none",width:img_w,height:next_h},1000,"easeOutElastic");
		$("img",this).animate({height:img_h},100).animate({height:next_h},100);
		$(this).removeAttr("data-h");
		}
	});
	$(".jumpin").mouseout(function(){//マウスアウト時の動作
		var img_w = $(this).width();
		var img_h = $(this).height();
		$(this).attr({"data-h":img_h});
		$(this).animate({opacity:0.5,"box-shadow":"0 0 2px #111",width:img_w,height:(img_h/4)},1000,"easeOutElastic");
	});
});

サンプルスクリプト
上記でスクリプトやCSSがバッティングしていなければ動作すると思います。
続きを読む “WebサイトでjQueryを使ってTwittelatorの画像表示のようなエフェクトを追加する方法”

タブレットやスマートフォン向けサイトを画面サイズに合わせて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周りの挙動についてわかり次第またかきます。

スマホサイトを作るときに気をつけているところ

blog.cdbk.net

NewImage
スマホサイトを作るときに気をつけているところをまとめてみました。

片手、親指だけで操作できるナビゲーション配置

ボタンやタブのサイズは狭すぎず、細すぎず、リンクとリンクの間にマージンを設定して誤操作を防ぐといった配慮をしてレイアウトしたい。横に並べる数は３〜５が理想的。それ以上は押しづらい。

ヘッダーには要素を並べすぎないようにする

たまに目にするアクセスすると画面の3/4がヘッダー＋メニューのサイト。コンテンツが増えるとヘッダーのメニューが増えるといったことは避け、ページへアクセスした際にヘッダーで画面が埋まるといったことのないようにしたい。ナビゲーションメニューはプルダウンやダッシュボード化などで数が増えても対応できるようにするのが望ましい。

ページ遷移はできるだけ階層を深くしない

スマートフォン向けサイトはできる限りシンプルな遷移を意識して2,3クリックで目的のページへいけるような構成を心がける。「自分はどのページにいるのか？」「自分は何処のページを見たいのか？」ユーザーが意識して動けるようなナビゲーションリンクの配置にすることで離脱されないようにする。できればブラウザーの戻るボタンを押さずに完結できるようにしたい。

高解像度ディスプレイ×リキッドレイアウトを意識したデザインを行う

スマートフォンは回転すると横幅が変わるため、それを見越したデザインをする。たとえば、iPhone4は幅は320×480が基本ではあるが解像度は300dpi以上なので普通に画像をおいただけでは滲んだりして見えてしまう。画像は高解像度のdpiでもきれいに見えるサイズで用意して縮小させてレイアウトしたり、CSS3でアイコンの角丸やグラデーションを作る。縦横でも対応できるようにオブジェクトの配置は％指定やinline-blockを活用して不意なレイアウト崩れがおこらないようにする。などPC向けよりも気遣いが必要になる場面が多い。

Viewportを活用する

使いこなせるとかなり便利なViewport。デフォルト幅が320pxのブラウザーで480pxサイズのサイトを見せる際の設定などはviewportで行う。また、zoomを設定するとフォームのテキストエリアを選択したときに拡大表示されたりするといった動作があるのでその辺りも加味してデザインを行うとより、使いやすいナビゲーションに結びつけられる。タブレット端末では「initial-scale」が有効にならない場合があるのでターゲットとする場合は実機での検証が必須。

jQueryとCSSで気をつけたいこと

スマートフォンサイトでjQueryを使う際に気をつけたいのはliveがiOSで有効にならない点。clickやタグないに入れるonclickなどで代替できる場合は代替。できない場合はほかの方法を模索することになる。またCSSのfixedの挙動がiOSではまだ不完全なところが多いので使うことをさけた方がよいかもしれない。

制作時に参考になるサイト

ここでまとめた内容のより細かいところなどが掲載されていたので、より詳しいことは下記サイトを。。。
スマートフォン向けサイトの作り方｜ユージック
スマートフォンサイトをデザインする上で知っておくべき10のTIPS[to-R]
 
 
 
 
 
 

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

blog.cdbk.net


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

サイトの内部遷移リンクをブラウザーのボタンに対応

blog.cdbk.net


先週リニューアルしたcdbk.net CREATIVES.のタブメニューによるリンク遷移に手を加え、各メニューに直リンクできなかったものを直リンクできるようにしました。
cdbk.net CREATIVES.
jQueryを使ってタブメニュー毎にレイアウトを設定しているので、その設定をクリックした際にページ内の遷移がわかるよう内部リンク（#〜）の追加とクリックした際に飛び先をフラグとして残す機能を追加。フラグとアドレスを判定して、違う場合はアドレスにあったコンテンツに移動するようにしています。
たとえばサービス内容のページ、お問い合わせのページなどもリンクとして指定できるようになりました。

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

blog.cdbk.net


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