上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
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に軍配

Comment
Trackback













管理者にだけ表示を許可する

Comment form

openclose

カテゴリ一覧

そま宗助

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

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

    読書週間継続中?

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

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






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

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

メールフォーム

Page Top

Powered by FC2 Blog |

FC2Ad

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

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