サイドメニュー向けのjQueryプラグイン、Sidrをサイトに導入してみました。

Sidr

スマートフォンでよく見かけるサイドバーが横から出てくる仕掛けが簡単に実装できるSidrcdbk.net CREATIVESヘ導入しました。

ページ左上の三角形をクリックすると出てくるようにしているのですが、スマートフォンでは動作しない様子。

なのでSafariとAndridブラウザーではページを横にスワイプすることで出るようにしました(Chromeはタブ移動がスワイプのため不可)

WordPressでメニューの中身を出しているためか、動作が不安定でたまに503になるためついでにSuper Cacheも導入。

動作がまだ不安定なところがあるのでしばし、様子見です。

インタラクティブなアクションを簡単に使えるjQueryプラグイン「mini.js」

Minijs

ウェブサイトでよく使う文字カウンターやTip、画像スライダー、アラートといったインタラクティブな要素を簡単に追加できるjQueryのプラグイン「Minijs」を紹介。

20120513現在β版ではあるものの、JSのコードを数行追加するだけでそれらの機能を追加することが出来ます。

Minijs02

Minijs01

ブログや簡単なランディングページなどにも使えそうなので手早くアクションを追加したいときに役立ちそうです。

http://minijs.com/

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

Corporate

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

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

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

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

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

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

jQueryを使う理由

最近はJavaScriptよりもjQueryという言葉を目にする機会が増えてきた。

jQueryはJavaScriptを扱いやすくするために使うフレームワーク(もしくはライブラリと呼ばれているもの)の一つで、ほかのフレームワーク、prototypeなどと比べると視覚的にプログラムを組むことができる。

簡潔に言ってしまえば、「AのときBの動作を行う」これが基本でjQueryのプラグインと呼ばれているものを使えば、前述のBのバリエーションを簡単に増やすことができ、そしてCSSなどでも使うHTML上のセレクターが扱いやすい構造になっているので、結果としてWebデザイナーやマークアップエンジニアにも難なく使えるものになっている。つまりは手っ取り早くJavaScriptが使える。

たとえばスライドショーの機能や動くスクロール遷移、検索入力欄にウォーターマークを追加するといったことに使われ、年始にアップした年賀状サイトおみくじのプログラムも主なものはjQueryでできている。

JavaScript自体は10年以上前から使われているのに、どうして最近になってjQueryが目立つようになったのか、昔はドラック&ドロップさせるにも処理速度が乏しく、ぎこちないものになりがちだったものが、現在では端末やブラウザーの性能が向上したお陰で特に問題なく、まるでアプリケーションのような動作をサイトで行うことも出来るようになってきた。

今後、スマートフォンなどのカメラデバイスやコンタクトリストなどとブラウザーが連携を取れるようになるとアプリケーションをマーケットなどからインストールする手間をかけなくても様々なアプリケーションを使える時代が数年でやってくる。となるとアプリ開発もJAVAやObject CベースのものからWebベースのサーバーエンドのプログラミングとブラウザーベースのフロントエンドのプログラミング、マークアップになる。つまりはjQueryなどが今以上に使われるようになる(はず)

近々cdbk.net CREATIVESのサイトを作り替えるのでその際作ったplug-inは公開していく予定です。

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


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の画像表示のようなエフェクトを追加する方法”

jQuery mobile 1.0が正式リリース – スマートフォン、タブレット向けUIライブラリ-

Jquerymobile

 

スマートフォンやタブレット向けのサイトを作る際のひとつの選択肢となる「jQuery mobile」がBeta版から正式版へとバージョンアップされました。

HTML5ベースのサイトで使用できるJavaScriptのjQueryをベースとしたフレームワークでHTML5の「data-role」属性やjQuery mobile独自の「data-theme」などでインターフェイスやカラーテーマなどを簡単に選択できるようになっています。

デモサイトに大まかな使い方とその実物があるので一度触ってみて検討するとよいかもしれません。

jQueryを使ったトップページイメージ用プラグイン「Slide interface」

Slide if cap

以前作った「fallslider」を再設計して新たに作りました。

特設ページも開設しました。

再設計し、画像だけでなくHTMLコンテンツへの対応もできるようになり、順を逐って説明が必要なものなどにも使うことができます。

使い方は、
ページにjQuery(1.4.2以上)、プラグインJSファイル(slide_if.js)、CSSファイル(slide_if.css)を設置して、表示したい部分に

<div id="slide_if">
	<div id="slide_if_view">
		<div id="slide_scene_a"></div>
		<div id="slide_scene_b"></div>
	</div>
	<ul id="scene_list">
		<li>表示させたい画像などをリストないに記載</li>
		<li>上限は指定していないので追加可能。</li>
	</ul>
</div>
<br clear="all" />

上記ソースを記述。liに表示したいもの(画像など)を追加することでスライドアニメーションを設定できます。
機能面は完成次第、順次追加していきます。

またグレードをあげたバージョンでブロック要素での構成を可能にしたいと考えております。
→現行バージョンで対応しました。

要望などあればコメントorメッセージorTwitterなどにいただければ幸いです。

jQueryを使った投稿用記事生成ツール

Jquery ui sample

jQueryで最近制作の効率化が図れるツールなどを作っているので、同じようなツールのサンプルを作りました。

今回はAmazonのAPIを利用して商品の情報を取得、表示してブログなどで貼って使えるタイプのもので商品説明などは出ないようにしていますが、すぐに使えるようタグの出力をテキストエリアに掲載しています。

応用することで、今まで原稿をコピー&ペーストしていたページ作成などを自動生成出来るようにしたり、
動的な検索、検索結果の反映などを行えるようにすることができます。

更新頻度の高い。固定レイアウトの記事ページ、コンテンツページで業務効率化を図ることが出来ます。

cdbk.net CREATIVESにてサンプルを掲載しております。

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でデザインできるものを目指しています。