上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

先日のセミナーを受けているときに「自分でもあとで作ろうと思っていたので、ざっくりと作ってみました。jQueryの実装にかかった時間は約30分。

HTML

	<dl id="accordion">
		<dt>サンプル1</dt>
		<dd>サンプル1サンプル1サンプル1サンプル1サンプル1サンプル1サンプル1サンプル1サンプル1サンプル1サンプル1サンプル1サンプル1サンプル1サンプル1サンプル1サンプル1サンプル1サンプル1</dd>
		<dt>サンプル2</dt>
		<dd>サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2</dd>
		<dt>サンプル3</dt>
		<dd>サンプル3サンプル3サンプル3サンプル3サンプル3サンプル3サンプル3サンプル3サンプル3サンプル3サンプル3サンプル3サンプル3サンプル3サンプル3サンプル3サンプル3サンプル3サンプル3</dd>
	</dl>

CSS

#accordion{
	width: 400px;
	margin: 20px 0 0 20px;
}
#accordion dt{
	border:solid 1px #999;
	background: #ccc;
}
#accordion dd{
	display: none;
	height: 100px;
	border:solid 1px #999;
	border-top: none;
}
.selected{
	background-color: #f60 !important;
}

jQuery

$(function(){
 $("dl#accordion dt").click(function(){
  $("dl#accordion dt").removeClass("selected");
  $(this).addClass("selected");
  if( $(this).next().css("display") == "none" ){
   $('dl#accordion dd').slideUp('fast');
   $(this).next().slideDown('fast');
  }else{
   $(this).removeClass("selected").next().slideUp("fast");
  }
 });
});

今回はdt要素を隠すために全てCSSでdisplay:none;とやっていますが、これだとJavaScriptを無効にしている人には一切dd要素を表示できない状態になってしまうので、実際に使う場合にはCSSにdisplay:none;と記述するのではなく $("#accordion dd").css("display","none");という形でスクリプト側でCSSを設定したほうがユーザーに優しいUIになると思います。

ふぉーんなハナシ:本当になぞるだけでOK???「Swype」で文字入力してみた - ITmedia +D モバイル
 Samsung電子が5月末から欧州や北米、アジア地域での発売を予定している(日本での発売は未定)Android端末「Samsung GALAXY S」は、Android 2.1やスーパー有機EL、1GHzプロセッサを搭載するなど、高いスペックが特徴だが、“文字入力方式”にも注目したい。Samsung GALAXY Sは「Swype」と呼ばれるタッチパネル用の文字入力方式を採用しており、画面のQWERTYキーボードを一筆書きのようになぞるだけで文字を入力できる。このほか、Windows Mobile 6.5搭載の「OMNIA II」もSwypeを利用できる。

指で一筆書きするだけ文字入力ができるというSwype。英語版ではすでに実用化され5月末に発売されるAndroid端末には実装されているそうです。画面をポチポチ叩かなくても文字が入力できるのはおもしろいですし、入力ミスも減りそうですね。現在、日本語対応のバージョンを2010年後半に提供する目標で開発しているみたいなので今後に期待。



使用電力が一目でわかる - サンワダイレクトがメーター付電源タップ | パソコン | マイコミジャーナル

サンワサプライの直営ショッピングサイト「サンワダイレクト」は、ワットチェッカー付き電源タップ「700-TP1052DW」の販売を開始した。価格は2,980円。

前々からサンワサプライからワットチェッカーは販売されていましたが、今回 電源タップにワットチェッカーが内蔵されたモデルが発売されたそうです。普段何気なく使っている電気もこれで簡単に測定できて便利そうですね。ACアダプタや携帯の充電器なんかも使い易いように考慮されていてなかなか素敵な商品です。電気代が気になる人や節約を心がけている人は購入してみるといいかも。


ワットメーター 付き 電源タップ 700-TP1052DWワットメーター 付き 電源タップ 700-TP1052DW
サンワダイレクト

商品詳細を見る
Evernoteにガリガリ書いていたものをちょちょっと整形したものなのでやや荒削りですが、とって出しレポートです。ASKII.jpで連載していたWeb制作の現場で使えるjQuery UIデザイン入門の書籍であるWeb制作の現場で使う jQueryデザイン入門ということで内容としては連載内容ともややつながりのある内容で、対象としてはかなりビギナー向けのものでした。

表紙はなぜドーナツなのか? → お手軽 おいしい 手作り ということとjQueryのロゴにかけている

jQueryとは?
JavaScriptで書かれたライブラリ
write less, do more というコンセプトで書かれている
現在、jQueryがライブラリの中で一番使われている
断トツ 検索数が多い→情報が多い→Tipsも多い ので、使いやすい
Google Trendsのデータとしては「JavaScript」よりも「jQuery」のほうが人気

何ができるの?
JavaScriptで書かれているのでJavaScriptでできることの大半
最初としては HTMLとCSSの操作 を覚えるとよい
HTML/CSSの知識がある人はコードが理解しやすい

HTML/CSSの知識に自信がない場合は「現場のプロから学ぶXHTML+CSS」を読むと良い
→ HTML/CSSの知識をつけてからjQueryを使いましょう

jQueryの利用方法
まずはライブラリを読み込む
それからコードを書

セレクターの基礎
ある要素のHTMLやCSSを変更したい
ある要素? → これがセレクター

セレクタ色々
#nav IDセレクタと同義
.image Classセレクタと同義
h1,h2
dt+dd IE6対応してないけど、CSS level2で定義されているもの
CSS3までのセレクタが使える

dd;first → jQueryが搭載しているフィルタ
CSSだけでは選べないときはフィルタを使って指定

要素を操作?
$("#nav li").css("color","red");

メソッドチェーン
.でメソッドをつなげていくことができる

イベントの基礎
マウスクリックなどのイベントをトリガーにして処理を行うことができる

アニメーション操作
jQueryのすぐれたところでフェード、スライドアップ/ダウンなどのアニメーションが簡単に実装できる

jQueryを利用したサンプル
 アコーディオンパネル

ケーススタディ

  少ないスペースを有効活用する
  スライドギャラリー
  アコーディオン
  タブパネル
  カルーセルパネル

  テーブルをわかりやすくする 
  ストライプテーブル

  お問い合わせフォームのユーザビリティを向上
  フォームバリデーション

  ナビゲーションをわかりやすく
  ロールオーバー
  透過ロールオーバー
  ドロップダウンメニュー

  補足情報を表示する
  ツールチップ
  フローティングウィンドウ

  ページ遷移せずに情報を表示
  モーダルウィンドウ → LightBoxみたいなUI。画像をクリックすつと拡大表示する
  Ajaxページング

クライアントの声にこたえる最大のポイントはWebサイトごとのオプティマイズ
Webサイトの使いやすさまでデザインできる

Q : アコーディオン スライドアップ/ダウンを同時にやってるように見えますが、アップ→ダウンと順番に処理できますか?
A : できます。アップした後にダウンを処理したい場合は完了時にファンクションで書くことで可能

Q : サーバサイドとクライアントサイドで開発を分担する際の利点はなんですか?
A : 仕様をしっかりと決めることで 分業によって連携して、同時に作業できる

Q : そのときの注意点はありますでしょうか?
A : 将来的に必要になるであろう項目もサーバサイドから出力してもらうこと

Q : (すみません、ここの質問内容を失念しまいました。)
A : UIに関してはクライアントの要望というよりは、制作サイドが提案するという形ほうがよい。プロが逆提案したほうがよい

Q : prototypeができてjQueryできないことはありますか?
A : パッとは思いつきませんが、jQueryにもできないことがあるので JavaScriptで補完することができます

Q : prototypeとjQueryではどっちが高速なのでしょうか?
A : 実装による。でも、単純なことをやるようであればprototype.使い回しという面ではjQueryに軍配

FizzBuzz問題のJavaScriptコードを改良。

function FizzBuzz(){
	var n, buf, res="";
	for(n = 1 ; n <= 100; n++){
		buf="";
		if( n%3 == 0 ){ buf += "Fizz"; }
		if( n%5 == 0 ){ buf += "Buzz"; }
		if( buf == "" ){ buf = eval( n ) }
		res += buf + '<br />';
	}
	document.getElementById('result').innerHTML = res;
}

前回に比べて違うのは毎回 document.write() で書き出さなくなったのと、条件式を1つ省略しました。

openclose

カテゴリ一覧

そま宗助

  • Author:そま宗助
  • タイ生まれのちょっと変な?日本人。
    農学博士の父とブラジル日系1世の母の間に生まれたため、普通の日本人とはちょっと違う視点で世界を見つめる男。

    最近、勉強会やカンファレンスにちょいちょい顔出ししてます。

    読書週間継続中?

    ストレングスファインダー
    1.収集心
    2.学習欲
    3.共感性
    4.指令性
    5.運命思考
プロフィール

※注意書き※
当ブログに掲載されているJavaScriptの動作確認はFirefoxでのみ行っております。他ブラウザでの動作に関しては保障できませんのでご注意ください。






1キロバイトの素材屋さん
フリーエリア
FC2カウンター

名前:
メール:
件名:
本文:

メールフォーム

Page Top

Powered by FC2 Blog |

FC2Ad

| Template Design by スタンダード・デザインラボ

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。