連載
もっと便利に!jQueryでラクラクサイト制作(実践サンプル付き)
本連載では,実践サンプルとともに,jQueryを上手に活用してサイト制作の品質向上・効率化を実現するための実践テクニックを解説します。
- 第21回 jQueryでAJAX入門:Google AJAX Feed APIを利用したRSSの読み込みとプラグインへの組み込み
- Google AJAX Feed API
- Google AJAX Feed APIを使って取得したデータをjQueryを使ってページ内に表示させる
- プラグインへの組み込み
- 2つ目のサンプルについて
- まとめ
2010年10月8日
- 第20回 jQueryでAJAX入門:正規表現でサイトに表示したTwitterにリンクをつける
- Twitterにリンクをつける
- URLにリンクをつける
- hashタグにリンクをつける
- @ユーザー名にリンクをつける
- プラグイン化したものに導入してみる
- プラグインをhashタグ一覧表示に
2010年3月24日
- 第19回 jQueryでAJAX入門:JSONを使いサイトにTwitterを表示
- jQueryでAJAX入門2回目:JSON形式を扱う
- JSON?
- JSONの例
- JSONをリストで表示させるサンプル
- $.getJSON()を使わない場合
- Twitterの自分の発言をサイトに表示させる
- プラグイン化
2010年3月16日
- 第18回 jQueryでAJAX入門:RSSをAJAXで取得してリストに表示する
- RSS
- XML?
- XMLもjQueryで要素を取得できる
- jQueryでAJAX
- RSSをリストに表示する
- プラグイン化
2010年3月9日
- 第17回 「その場編集」を実装する
- 「その場編集」を実装
- 今回の仕組みを考える
- テキストをクリック後にinput要素へ
- 編集中のDD要素にclassを持たせる
- focusが外れたらテキストに戻る
- おまけ1:初期の値に戻す
- おまけ2:内容に変更があった時だけリセット
2010年2月26日
- 第16回 jQueryで楽々実装できるツールチッププラグインを作ってみよう
- 今回使うメソッドの紹介
- プラグインの枠組み
- ツールチッププラグインの作成
2010年2月9日
- 第15回 チェックする項目の選択・未選択を画像でわかりやすくする
- チェック項目を選択・未選択のエリアにわける
- 仕組みを考える
- プラグインにする
- おまけサンプル
2010年2月2日
- 第14回 入力した/入力するパスワードを見えるようにする
- 今回使うメソッドの紹介
- 任意でパスワードを可視化する
2010年1月25日
- 第12回 jQueryでセレクトボックスをデザインする
- デザインされたセレクトボックスを実装する
- 疑似セレクトボックス
- CSSでデザインを適用する
- スクリプトの記述
- プルダウン以外の箇所をクリックでプルダウンが閉じる
- まとめ
- おまけ
2010年1月6日
- 第13回 今すぐできる!ユーザビリティを向上させるフォーム操作実践(5)デザインされたチェックボックスを実装する
- 今回は選択不能とチェックボックスなどをデザイン
- disabled状態のフォーム
- disabledを解除するボタン
- ラジオボタンで切り替え
- 入力内容の一時保存
- ラジオボタンのデザイン変更
- チェックボックスのデザイン変更
2010年1月11日
- 第11回 今すぐできる!ユーザビリティを向上させるフォーム操作実践(3)
- 前回に引き続き正規表現
- Dreamweaverで正規表現の練習
- 覚えておくと便利な正規表現検索
- 電話番号のバリデーション
- 数字のみのバリデーション
- アルファベットのみのバリデーション
- URLのバリデーション
- 必須項目のバリデーション
2009年12月15日
- 第10回 今すぐできる!ユーザビリティを向上させるフォーム操作実践(2):プラグインを使わずにバリデーションを実装
- バリデーションをプラグインを使わずに実装する
- 入力された文字列をチェックする
- 正規表現
- Emailバリデーションを実装してみる
2009年12月7日
- 第9回 今すぐできる!ユーザビリティを向上させるフォーム操作実践(1)
- 今回よりフォーム関連の実践
- 入力例を入れておきフォーカス時に消す
- 入力欄が空白ならデフォルトに戻す
- valueを使わずlabelを利用した実践例
2009年11月30日
- 第8回 タブプラグインを作ってみよう(後編)
- jQueryプラグインについて
- function関数とメソッド
- jQuery(function($){ ~ });と(function($){ ~ })(jQuery);
- タブパネルスクリプトの関数化とメソッド化
- function関数にする
- jQueryオブジェクトのメソッドにする
- 機能の拡張
2009年11月24日
- 第7回 タブパネルを実装する(前編)
- タブプラグインを作ってみよう
- タブパネルを実装するスクリプトを書いてみよう
- 今回のまとめ
2009年11月16日
- 第6回 フェードの活用と簡易ロールオーバー
- 今回はFirebugの利用とフェード効果を使ったサンプル
- コード中のconsole.log()
- 変数の中身を追う
- フェードとFirebug
- 透明度を利用した実践サンプル
2009年11月9日
- 第5回 難しくなる前にFirebugの活用を学ぶ
- 内容が難しくなる前にFirebugに慣れる!
- Firebugをもっと使ってみる
- gihyo.jpのサイトで練習
- console.log()
- $()と$jq()の違い
- gihyo.jp内の要素を表示・非表示
- Firebug活用のススメ
2009年11月2日
- 第4回 ドロップダウンメニューの実装
- jQueryを利用してナビゲーションを実装する
2009年10月26日
- 第3回 アコーディオンパネルの実装
- jQueryを利用してナビゲーションを実装する
2009年10月14日
- 第2回 楽にリストをストライプ模様にする
- 各種セレクタ
- 組み合わせで
- 実践例
2009年10月7日