もっと便利に!jQueryでラクラクサイト制作(実践サンプル付き)

第5回 難しくなる前にFirebugの活用を学ぶ

この記事を読むのに必要な時間:およそ 3 分

内容が難しくなる前にFirebugに慣れる!

第1回から第4回まで,jQueryについての各セレクタやメソッドなどを見てきました。各回で簡単なサンプルも載せていましたが,皆さんここまでの内容については問題なくついてこれていますでしょうか?

まだjQueryの基礎について全てを説明し終えてはいないのですが,そろそろスクリプトも長くなってきて,考えることも難しくなってきています。第3回第4回の内容を振り返ってみても,少しずつスクリプトの量も増えてきているのがわかると思います。この先も,内容が増えていくにつれて,スクリプトも長く,手順をうまく考えなくてはならなくなってきます。

内容がもっと難しくなっていく前に,一度ここで復習をして,この先に備えておきましょう。

Firebugをもっと使ってみる

ここまで,いくつかサンプルなどを紹介してきましたが,まだまだjQueryがいまいち理解できていない人もいると思います。jQueryやHTMLにしろ,Webの技術を覚えるためには,まずは実際にコードを書いてみる事が大切です。しかし,実際にテストのためのHTMLやCSSをかいて,そこにjQueryの練習のスクリプトを書いていくとなると,少し大変ですよね。

そんなときに活用してもらいたいのが,ここまでにも何回も登場している,FirefoxのアドオンのFirebugとFireQueryです。Firebugのコンソールと,FireQueryのjQuerifyを使うことによって,どんなサイトでもjQueryを試してみることができるようになります。

jQueryをすでに使っているサイトなら,そのままコンソールにコードを書いて実行してみるだけですし,jQueryを使っていないサイトでは,一度jQuerifyのボタンを押して,jQueryを使えるようにしてからコンソールにコードを書くだけで,実際に動作するのかや,どんな動作になるかの確認になるのです。

ちょっとしたスクリプトを試してみるような時でも気軽に利用することができるので,練習に最適のツールだと思っています。

gihyo.jpのサイトで練習

gihyo.jpのサイトでjQuerifyを使う場合,第4回でも紹介した通り,$()ではなく$jq()を使い書きます。この違いについては後ほど説明いたします。まずは前回と同じく一つのタグを入れてみましょう。前回はDIV要素を選択しましたが今回はP要素を選択してみましょう。

jQuerifyをクリックし,jQueryを使えるようにした後に,Firebugのコンソールにて$jq('p')を実行。

jQuerifyの実行

jQuerifyの実行

実行するコードを入力

実行するコードを入力

今回試しに実行するコード

$jq('p');

$jq('p')の実行結果

$jq('p')の実行結果

ページ中のP要素全てがjQueryオブジェクトとなってコンソールに表示されます。

表示された結果はそれぞれの要素がどこの要素なのかを確認することができます。要素にマウスを乗せると,表示画面上の該当位置の色がかわりますし,また,コンソール上の要素をクリックすることができ,クリックするとFirebugのHTML表示画面にて該当部分のHTMLが表示されます。表示されている画面上での位置と,HTML中のどの要素なのかなどが,そこでチェックすることができます。

要素をクリック可能

要素をクリック可能

要素のHTMLを表示

要素のHTMLを表示

複数行になるコードを書くとき

Firebugコンソールの入力部分は2パターンあり,上記の画像などで紹介してきたのは一行で書けるようなコードの時でした。2行以上の複数行にまたがるようなコードを書く場合などは,右下にある赤いボタンをクリックすることで,複数行書ける入力エリアが右側に出てきます。

複数行のコードを入力するとき

複数行のコードを入力するとき

先ほどの一行入力の時と違い,改行やタブでのインデントなどもつけることが可能です。コード実行際は入力エリアの左下にある「実行」のボタンを押すします。

複数行コードの入力エリア

複数行コードの入力エリア

著者プロフィール

長谷川広武(はせがわひろむ;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月からマインドフリー株式会社に参加。

http://moto-mono.net/

コメント

コメントの記入