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 その１</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>

ブラウザ表示

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

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

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

index.html

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

ブラウザ表示

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

それでは解説です。

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

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

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

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

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

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

（teruhisa）

アパレルECの新しいカタチ

日頃からネットで服などを購入する機会が多いのでショッピングモール「ZOZOTOWN」の成功を体感している今日この頃ですが、モバイルやPCから商品を購入することに抵抗があるひとがまだまだ多い世の中で丁度いい買い物スタイルをiPhoneに見ました。

約一年前に「ジャーナルスタンダードメンズ／レディース」「エディフィス」を展開する
ベイクルーズが国内アパレル初となる本格「カタログ・アプリ」を無料で配信というニュースを
見かけました。それ以降、僕が知る限りアパレルブランドでiPhoneアプリを発表しているのは
ZARA、GAP、Style.com...と海外ブランド、サイトのみです。（多分）

ベイクルーズのカタログ・アプリの主な機能は
(1)カタログアプリケーション
最新のカタログを見ることができる
(2)ストアロケーター
現在位置情報を利用したショップ検索が可能

今までの携帯電話では決してできなかったスタイリッシュな表現によって
より購買意欲がかきたてられそうです。

画像引用元：ASCII.jp

iPhoneの普及がなお広がっている今日、「iPhoneで商品を見て、ストアロケーターで現在位置に近い店舗を探して実店舗で購入する」というアパレルECの新しい流れができつつあるかもしれません。

（masato）

路線・駅名情報APIの紹介

路線名・駅名など、
都道府県毎に分かれていて、ひとつずつ情報を集めるとなると、
大変な労力が必要になってしまいます。

そこで、路線・駅名の情報を検索できるAPIのご紹介です。

HeartRails Express
http://express.heartrails.com/

「都道府県」と「路線」から駅情報を絞り込む事ができ、
情報はXMLデータで扱えるようになっています。

XMLで扱えるデータは下記になります。

・name（駅名）
・next（次の駅名）
・prev（前の駅名）
・x（駅の経度）
・y（駅の緯度）
・postal（駅の郵便番号）
・prefecture（駅がある都道府県）
・line（駅がある路線名）

駅名だけでなく、
前後の駅情報、経度・緯度等もXMLデータで取り扱う事が可能です！

経度・緯度を利用して、GoogleMap上での位置表示や、
前後の駅に関するリンクを付けて、ユーザビリティの向上などが行えますね。

実際に駅名情報を検索となると、
「URLエンコード」された都道府県名と路線名が必要になるのですが、

例として、「大阪府」「JR大阪環状線」で設定してみました。

こんなURLになります。
http://express.heartrails.com/api/xml?method=getStations&prefecture=%E5%A4%A7%E9%98%AA%E5%BA%9C&line=JR%E5%A4%A7%E9%98%AA%E7%92%B0%E7%8A%B6%E7%B7%9A

基本はAPIのURLに、変数を与えてやるだけでいいです。
必要な変数は、下記の３点になります。

method=getStations（取得する情報の変数）
prefecture=（URLエンコードされた都道府県名）
line=（URLエンコードされた路線名）

その他の使い方もご紹介します。

【都道府県一覧】
http://express.heartrails.com/api/xml?method=getPrefectures

【大阪府の路線一覧】
http://express.heartrails.com/api/xml?method=getLines&prefecture=%E5%A4%A7%E9%98%AA%E5%BA%9C

変数は、下記の２点。
「method=getLines」（取得する情報）
「prefecture」（URLエンコードした都道府県情報）

路線・駅名情報を取得しようとなると、
URLエンコードされた情報を変数で送らないといけないのが、
多少難点ではありますが、

上手い事利用すると、業務の効率を非常に短縮できるのではないでしょうか？

こういう便利なAPIはどんどんと使っていきたいですね。

（hirohito）

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 その１</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.

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

今回注目してもらいたい箇所はここの１行です。
　

$('span').html('jQuery');

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

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

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

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

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

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

（teruhisa）

無料携帯サイト解析ツール第１弾【myRT mobile】

最近、ＰＣだけではなくモバイルでのアクセス解析を気にされるお客様が増えてきています。
モバイル版のアクセス解析はあまり市場で出回っているものではないようで手軽にできるものを
探していたときに見つけた【myRT mobile】をご紹介します。

■myRT mobileとは
myRT mobile とは、オーリック・システムズ社が提供する、タグ埋め込み型の無料アクセス解析ツールです。
モバイルサイトのアクセスログ解析に特化しており、キャリアや端末の判別だけでなく、待ち受け画像の幅や Flash 再生機能の有無など、ユーザーの利用情報を細かく分析することが可能です。
もちろん、時間帯別レポートやサイト参照元の情報も得ることが出来ます。
また、PHP にも対応しているので、動的に生成されたページのデータも収集出来ます。

続きを読む: 無料携帯サイト解析ツール第１弾【myRT mobile】

Google Books

初めてGoogle Books見たときは度肝を抜かれました。

入力フォームに、本のタイトルを入力し、検索結果から気になった本を選択すると、

なんとその本の中身が丸見え！
（多少の制限はありますが、ほぼ丸見えです！）

こんなサービスいいのか！？っと思いました。

個人が購入した本をスキャンして、ウェブサイトにアップロードしてるのと一緒やん！

と思いましたが、その辺の著作権はクリアできてるんでしょうね。

試しに、自分の趣味の本や、仕事で必要とする参考書なども検索すると、
ある程度中身が見られました。

今までamazon等で、他人の評価を見ながら本の購入をしてましたが、Google Booksで中身を一通り見てから購入することができます。

数年前では考えられないサービスですね。

その他、Wikipedia等で調べてみると、
「著作権が切れた書籍であれば全ページが無料で表示される」との事。

スゲーです！

大学図書館とも提携が行われているようで、

慶應義塾大学
ハーバード大学
スタンフォード大学
オックスフォード大学

その他にも多数の大学とも提携しているそうです。
本を読むのが好きな人にはたまらないサービスです。

今後、どんどんこういうサービスを利用して、
知識の吸収に励んでいく必要がありますね。

Google Books
http://books.google.co.jp/books

（hirohito）

Firefoxのアドオンの紹介2

システムグループMTGで、Firefoxの便利なアドオンを紹介する機会があったので、下記に記述します。

・アドオンではないですが、Firefoxのレジストリの書き換え方法
URLに、「about:config」と打つと、レジストリを変更することができる。

画像1.gif

Foxtab：
Firefox内の、タブを一覧表示・タブ切り替えをカッコよくしてくれます。
普通のタブ切り替えでは物足りない！って思ってる方にオススメです。
サムネイル表示もできて、タブをいっぱい表示する片にも便利だと思います。

画像2.jpg

サムネイル表示の種類を変更する時は、タブの右端の「▽（タブの一覧表示）」をクリックし、
右下に出てくるパターンを選ぶと変更ができます。

ViewSourceWin：
Firefoxのソースを表示するときに、好きなエディタを指定して開くことができます。
デフォルトのエディタでは、ソースの改行や切り取りなどができなく、不便に思っている方にオススメです。

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文を嫌ったので、わかりやすくしたつもりです。