今回のサンプルはこのままFirebugのコンソールを使って実際にコードを書いてみましょう。今回は,gihyo.jp内の要素を使って,どれかの要素をクリックしたら,別な要素を表示・非表示を繰り返しできるようなものを作ってみましょう。クリックする要素を決めます。Firebugの左上の左から2番目のボタンで表示上からよさそうなところを探します。今回は「h2」の要素部分をクリックする要素としましょう。h2要素をクリックしたら,そのh2が含まれているブロック内の他の要素を非表示にするというコードにしてみます。FirebugでHTMLをチェックしたところ,h2の含まれるブロック内の他の要素を選択する方法は,h2の兄弟にあたる要素(同階層の要素)を選択して,それを非表示にすることで実現できそうです。jQuerifyをgihyo.jpのサイトで利用し,コードをFirebugのコンソールに書いてみましょう。});});書いたコードを実行する前に,今回使ったメソッドの解説をしておきます。siblings()siblingsメソッドは要素の兄弟要素を取得して返すメソッドです。console.log($('.brother').siblings());});toggle()toggleメソッドは要素が非表示の場合はそれを表示させ,要素が表示の場合はそれを非表示にするメソッドで,hide()とshow()をあわせたような機能です。表示と非表示を繰り返すような箇所での使用に便利です。});});書いたコードを実行それでは,今回書いたコードを実行してみましょう。実際にFirebugのコンソールに書いて,実行をしてみてください。下の画像のように,h2要素にクリックイベントが付されます。動作させた結果h2要素をクリックしてみる実際に動作をするかチェックしてみましょう。最初はh2の兄弟要素は表示されているので,h2を最初にクリックすると,兄弟要素が非表示になります。h2をクリックした結果いかがでしたでしょうか?きちんと動いたでしょうか?エラーが出た場合は,書き直してみてください。再度実行してみてもコンソールが何も反応しない場合は,一度ページをリロード(更新)してみてから,再度jQuerifyと,書いたコードを実行してみてください。Firebug活用のススメ今回はFirebugを使ってみることに重点をおいて説明をしたのですが,ここで紹介したのは本の一例です。他にも,うまく動作がしなくなる前に,console.log()を使って,入っている変数の中身を表示させて意図どおりの変数が入っているかを確認するなどにも使えます。活用方法はあるので,それは次回以降も随時jQueryの解説とともに入れていきたいと思います。これまでの第4回までの内容と今回の内容を合わせて,まだ試してみてない人などは,ぜひFirebugも使いつつ復習を兼ねて実際にコードを書いてみてください。Webデザイン著者プロフィール長谷川広武(はせがわひろむ;h2ham)1984年生まれ。出版会社勤務でWeb製作・運用更新の経験を経て,2009年より株式会社24-7に入社。Webサイトの運用更新業務を中心に制作業務を行う。各種CMSのカスタマイズやjQueryを利用したUI設計などを得意とする。ブログではjQueryや日々の思いなど書いたり,自作のjQueryプラグインなどを公開している。http://h2ham.seesaa.net/徳田和規(とくだかずのり;5509;nori)マインドフリー株式会社,ディレクター。Web製作会社にてHTML/CSSコーディングなどの業務を行いながらAjax/JavaScriptに興味を持ち,ブログで自作のjQueryプラグインなどを公開する。2009年9月からマインドフリー株式会社に参加。2019」を開催しました。DAY1・DAY2の様子を注目セッションとともにお伝えします。LINEのエンジニア3名がイベントに先駆けて見どころを紹介します。コードの安全性・安定性を高める開発サイクル~テスト管理の効率を上げ,脆弱性診断を自動で行う~本連載では,連載「業務を改善する情報共有の仕掛け」を受けつつ,安全性・安定性を加えた開発サイクルについて考えていきます。若者世代から圧倒的な人気を誇るライブ配信&動画投稿コミュニティアプリ「MixChannel」(ミクチャ)の裏側(レコメンドシステムやサーバサイド開発など)について解説していきます。その他の連載CSS3アニメーションでつくるインターフェイス表現CSS3によるアニメーション表現を紹介していきます。その中でも,幅広い読者に応用してもらえるだろうインターフェイスを主なお題とします。MySQL道普請便り本連載では,MySQLを使ったアプリ開発・運用に関するノウハウをご紹介していきます。RecipeUbuntuの強力なデスクトップ機能を活用するための,いろいろなレシピをお届けします。JavaScriptセキュリティの基礎知識JavaScriptに関するセキュリティ上の問題はどこで発生し,どうすれば防ぐことができるのか?について解説していきます。〜システムをきちんと運用するための基礎知識システムは「作って終わり」ではなく,運用の中でさまざまな問題が発生します。問題の発生に備えて事前にどのような対応をしておくべきなのか,問題発生時に何をしなければならないのか,ポイントを解説していきます。きたみりゅうじの聞かせて珍プレーソフトウェア開発の現場で体験したトホホな失敗,思わずうなる珍プレーをきたみりゅうじ氏が四コママンガで紹介。Linuxのメンテナンスの傍ら,Linuxやオープンソースソフトと日々を過ごす著者が,その魅力とつきあい方を,エッセイ風味でお届けします。PRESS特別編集部員,さわやか笑顔のスーパーハカーはまちちゃんとネット大好き14歳わかばちゃんが,毎号,読者の皆さんから寄せられたおたよりを紹介します。皆さんの日頃の悩みにも答えちゃいますよ。]メールでのお知らせメールで次の案内をお送りしております。メールの配信を希望する方は,利用したい項目をチェックしてメールアドレスを入力し,[登録]ボタンをクリックしてください。UPDATES[ほぼ週間に1回]新刊メールマガジン[ほぼ週間に1回]電脳会議の各号案内[ほぼ1ヵ月半に1回]※変更する場合や停止する場合は,登録情報変更ページをご覧ください。※登録いただいたメールアドレスには,そのお知らせ以外,配信いたしません。Ltd.ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。