開発日誌の最近のブログ記事

開発日誌

jQueryではじめるJavaScript : 処理1

今回はjQueryの第3回目、「処理」について進めていきます。
第1回第2回で「なにを どうするか」の「なにを」の箇所を勉強しましたが、処理は「どうするか」の部分です。

実はjQueryを知るまでは、私もJavaScriptが苦手でした。
HTMLやCSSとの結びつきが難解で、ブラウザ依存する箇所でもあり、頭を悩ませていました。
ところがjQueryを使うとその問題を軽々クリアし、「なにを どうするか」の部分が簡単に表現できるようになります。まさに「必要は発明の母」と言ったところですね。

それでは今日はjQueryの処理の部分の紹介をしていきます。

今回作ったものはこちらからダウンロードできます。sample3.zip

index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

  <head>
    <title>jQueryではじめるJavaScript</title>
    <meta http-equiv="Content-Type" content="text/html; charset=Shift-JIS" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
      function changeStyle()
      {
        $('#sun').css('color', '#f33');
      }
    </script>
  </head>

  <body>
    <div>
      真っ赤な<span id="sun">太陽</span><br />
      <input type="button" onclick="changeStyle();" value="変更" />
    </div>
  </body>

</html>


ブラウザ表示
jqueryimg.gif
ボタンを押してみますと、「太陽」のところが赤文字に書き換わりました!

$('#sun').css('color', '#f33');

このプログラムは、ID 'sun' の要素のCSSのプロパティ 'color' を '#f33' に変更する処理をしています。

ちなみに複数のプロパティを変更したい場合は
function changeStyle()
{
  $('#sun').css('color', '#f33');
  $('#sun').css('font-weight', 'bold');
}

上のように複数並べて書けばできますが、
次のような書き方もできます。処理が数珠繋ぎになっていることから"メソッドチェーン"と呼ばれます。
function changeStyle()
{
  $('#sun').css('color', '#f33').css('font-weight', 'bold');
}

次のようにオブジェクトを使って書くこともできます。
function changeStyle()
{
  $('#sun').css({'color':'#f33', 'font-weight':'bold'});
}

jQueryの特徴的なところなのですが、1つの関数で複数の処理ができるようになっています。最初は混乱するかもしれませんが、覚える関数名が少なくてすむのでなかなか便利です。

たとえば、上の処理とは逆に現在、設定されているものを取得したい場合は
function getStyle()
{
  alert('color : ' + $('#sun').css('color'));
}

これをボタンのonclickに設置するとアラートウィンドウで値が取得できます。


次回はこれらをつかって、ちょっと動くものをつくってみたいと思います。

(teruhisa)



開発日誌 Web システムのツボ

jQueryではじめるJavaScript : セレクター操作

数週間、更新があいてしまっているうちにjQuery1.4がリリースされました。
この記事のソースは旧バージョンでも動きますのでご安心ください。

さて、今回はjQueryの肝であるセレクターの書き方を説明していきます。

前回のおさらいからです。(一部変更してあります)

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

  <head>
    <title>jQueryではじめるJavaScript その1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=Shift-JIS" />
    <style type="text/css">
      .red {
        color:#FF3333; font-weight:bold;
      }
      .blue {
        color:#3333FF; font-weight:bold;
      }
    </style>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
      function changeWord()
      {
        $('span').html('カバ');
      }
    </script>
  </head>

  <body>
    <p>「あれは<span class="blue">ネコ</span>ですか?」</p>
    <p>「いいえ、あれは<span class="red">イヌ</span>です」</p>
    <p><input type="button" value="カキカエル" onclick="changeWord();" /></p>
  </body>

</html>


ブラウザ表示
kakikae1.jpg

ボタンを押してみますと、書き換わりました!が・・・
すべての<span>の内容が「タヌキ」にかわってしまいました。

これじゃ範囲が広すぎて使いづらい時もあります
「イヌ」だけを「タヌキ」にする方法をないんでしょうか?

こういう時こそ「セレクター」の出番です!
コードを少し書かえ、ブラウザでみてみましょう。

index.html
$('span').html('タヌキ');
      ↓
$('span.red').html('タヌキ');

ブラウザ表示
kakikae2.gif

うまく「イヌ」の個所だけ書きかわりました!

それでは解説です。

$('span.red').html('タヌキ');
ここの書き方がポイントなのですが、「.」(ドット)の後ろに書かれた文字はHTML中のclassを意味しています。
したがって、この処理は「<span>タグでclass要素"red"のもの」の「子要素を'jQuery'に書き換え」という意味になります。

ID要素をつかって書換えたいときは、「.」(ドット)のかわりに「#」(シャープ)をつかって

$('span.id').html('タヌキ');
のように書きます。

他にもいろいろな方法がjQueryのサイトに載っていますが。。。
セレクターのドキュメント

とりあえずは「IDを使ったセレクター」と「classを使ったセレクター」の方法さえ覚えておけば、しばらくは大丈夫です。

次回はいろいろな「処理」の紹介をします。

(teruhisa)
Enhanced by Zemanta




開発日誌

Windowsの便利なショートカット

よく使うWindowsの便利なショートカットキーを紹介します。
※Windows7がリリースされ評判がいいようですが、まだまだXPを使用しています。

・「Ctrl + I (F7キー)」・・・全角カタカナ
 「Ctrl + O (F8キー)」・・・半角カタカナ
   全角/半角カタカナに変換するときに使います。
   「Ctrl + ○」「F○」どちらでも変換できますが、素早く押せる「Ctrl + ○」
   を多用しています。

・「Ctrl + BackSpace キー」・・・    一度確定した文字を未確定状態に戻すキー操作
   文字を変換するときに、間違った文字で確定したことがあると思います。
   そんなときに、文字を消さずにもう一度変換して選びなおすことが出来ます。

・「F2 キー」・・・選択したファイル名変更
   ファイル名を変更するときは、ダブルクリックにならないよう間を置いてから
   もう一度クリックしていましたが、F2キーを使うと、素早く変更出来ます。

・「Alt + Tab キー」・・・アクティブウィンドウの切り替え
   複数のアプリケーションが起動されている状態で、アクティブウィンドウを切り替えます。

・「ウィンドウズキー + D キー」・・・全てのウィンドウを最小化
   複数のウィンドウを開いているときに、全てのウィンドウを最小化し
   デスクトップが表示されます。再度押すと元に戻ります。

・「ウィンドウズキー + R キー」・・・ファイル名を指定して実行
   ファイル名を指定して実行ダイアログを開きます。
   コマンド「calc」で電卓起動。意外と使ってました。

・「Alt + Print Screen キー」・・・アクティブウィンドウをクリップボードにコピー
   特定のウィンドウだけをキャプチャしたいときに使います。
   対象のウィンドウをアクティブにしてからキーを押します。

・「Ctrl + 矢印 キー」・・・単語単位でカーソル移動
   コードなどを入力しているときに入力漏れに気づいたときは、
   Ctrl + 矢印キーでその位置まで楽に移動させています。
   範囲選択するときは、Shiftも併用します。
    

こういったショートカットを使うことで短縮される時間は微々たるものですが、
繰り返し作業をこなす場合には特に必要になってきます。

今回はWindows全般のショートカットキーの一部を紹介しましたが、
普段使用しているソフトでも、使ってみると便利なショートカットがあるかもしれませんね。

(tsubasa)

開発日誌

jQueryではじめるJavaScript

今回からJavaScriptのライブラリ「jQuery」を紹介していきます。

jQueryというのはJavaScriptの汎用ライブラリーで軽量・強力なセレクター・各種ブラウザ対応が特徴です。

同じようなライブラリーとして「prototype.js」がありますが、最近はjQueryのほうが人気があるようです。わがジーピーオンラインでもJavaScriptを使用するときはこのライブラリーを使って開発しています。

汎用ライブラリーなのでいろいろなことができるのですが、今回は必要最小限の肝の部分だけ紹介します。


jQueryのプログラムはサイトの「↓Download(jQuery)」からダウンロードしてjquery.min.jsとリネームしてください。

index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

  <head>
    <title>jQueryではじめるJavaScript その1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $('span').html('jQuery');
      });
    </script>
  </head>

  <body>
    <p>Hello <span>HTML</span> World.</p>
  </body>

</html>


ブラウザ表示
Hello jQuery World.

上記のように表示されたら成功です。

今回注目してもらいたい箇所はここの1行です。
 
$('span').html('jQuery');

これはjQueryで特徴的な書き方で
 $(セレクター).処理
という要素からできています。

「セレクター」
 後ろに書く「処理」が実行される箇所です。
 いろいろなセレクターがありますが、上記の「'span'」は<span>タグの箇所です。

「処理」
 いろいろな処理がありますが、上記の「html('...')」 はセレクターの子要素を'...'で書き換えます。>ドキュメント

つまり
 $('span').html('jQuery');
は、
「<span>タグの子要素を'jQuery'」に書き換えます。

同じようにspanの箇所をh1やtd等に変えれば、<h1>や<td>内を書き換えることができます。

次回は「jQueryのセレクターの説明」です。


(teruhisa)
開発日誌

MYSQL 重複データを省いて集計結果をソートしたい場合

アクセス集計とかで、

集計してソートをしたい場合のSQL文

SELECT name ,count(access_count) AS count FROM access WHERE date LIKE '2008-06-01%'
GROUP BY name ORDER BY count DESC

重複を省いて(GROUP BY) カウントした値をソートさせています。
ここでは、AS を用いて集計値のカラム名を変更しています。そのまま ORDER BY count(access_count) としてもいけるのだが、
その場合ORDER BY 'count(access_count)' DESC

とする必要があります。
あまり長いSQL文を嫌ったので、わかりやすくしたつもりです。

開発日誌

携帯電話の対応状況

少し前のデータになりますが、携帯スペック表から「過去1年の間に発売された携帯電話(07年6月以降)」「過去2年の間に発売された携帯電話(06年6月以降)」の各種機能の対応状況を調べてみました

GIF,動画GIF,透過GIF
 100%(1年), 99%(2年)

JPEG
 100%(1年), 100%(2年) 

PNG
 63%(1年), 63%(2年) 

Flash
 未対応:6%(1年), 11%(2年)
 Lite1.1:20%(1年), 35%(2年)
 Lite2.0:58%(1年), 46%(2年)
 Lite3.0:16%(1年), 8%(2年)
 ※上位互換なので、例えばLite3.0対応ならLite1.1、Lite2.0も動作します

Felica(おサイフケータイ)
 66%(1年), 55%(2年) 

QRコード
 92%(1年), 85%(2年) 

New Entries
1  2

Webシステムのツボとは

オープンソースの紹介や、プログラミング講座、フリーソフトのレビューなど、Webエンジニアが送る、つれづれ日記。
【隔週金曜日更新】

運営会社:株式会社ジーピーオンライン

RSSを購読する

Monthly Archive