タグ: jQuery

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

blog.cdbk.net

Sidr
スマートフォンでよく見かけるサイドバーが横から出てくる仕掛けが簡単に実装できるSidrをcdbk.net CREATIVESヘ導入しました。
ページ左上の三角形をクリックすると出てくるようにしているのですが、スマートフォンでは動作しない様子。
なのでSafariとAndridブラウザーではページを横にスワイプすることで出るようにしました(Chromeはタブ移動がスワイプのため不可)
WordPressでメニューの中身を出しているためか、動作が不安定でたまに503になるためついでにSuper Cacheも導入。
動作がまだ不安定なところがあるのでしばし、様子見です。

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

blog.cdbk.net

Minijs
ウェブサイトでよく使う文字カウンターやTip、画像スライダー、アラートといったインタラクティブな要素を簡単に追加できるjQueryのプラグイン「Minijs」を紹介。
20120513現在β版ではあるものの、JSのコードを数行追加するだけでそれらの機能を追加することが出来ます。
Minijs02
Minijs01
ブログや簡単なランディングページなどにも使えそうなので手早くアクションを追加したいときに役立ちそうです。
http://minijs.com/

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

blog.cdbk.net

Corporate
コーポレートサイトにjQueryベースでいろいろな機能を追加しました。
トップページのタイポグラフィーは上から表示されるように透明→非透明の効果を設定。
各ページヘはContact(お問い合わせ)を除き、ページ読み込みで下から上へイージングで表示されるようにしています。
Lightboxlike
その他サムネイルはリンクから、ページ内でフレーム上にウインドウを開き表示するLightbox的なものに変更。
最初右上に表示されている円はランダムに移動、色が変わります。
cdbk.net CREATIVES. http://creatives.cdbk.net

jQueryを使う理由

blog.cdbk.net

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

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

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

blog.cdbk.net

Jquerymobile

 

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

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

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

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

blog.cdbk.net

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を使った投稿用記事生成ツール

blog.cdbk.net

Jquery ui sample

jQueryで最近制作の効率化が図れるツールなどを作っているので、同じようなツールのサンプルを作りました。
今回はAmazonのAPIを利用して商品の情報を取得、表示してブログなどで貼って使えるタイプのもので商品説明などは出ないようにしていますが、すぐに使えるようタグの出力をテキストエリアに掲載しています。
応用することで、今まで原稿をコピー＆ペーストしていたページ作成などを自動生成出来るようにしたり、
動的な検索、検索結果の反映などを行えるようにすることができます。
更新頻度の高い。固定レイアウトの記事ページ、コンテンツページで業務効率化を図ることが出来ます。
cdbk.net CREATIVESにてサンプルを掲載しております。