Webシステムのツボ: Ｗeb システムのツボアーカイブ

モバイル3D

ARといえば、iPhoneアプリのセカイカメラやエプソンの「3D年賀状」が有名ですね。

2009年に一大ブームを巻き起こした「Twitter」。
このTwitterのブレイクに続くものとして最も熱いといわれてるのがAR（拡張現実）です。

このARを用いたサービスで面白いものがありましたので紹介します。
それが「モバイル3D」です。

セカイカメラはiPhone、3D年賀状はウェブカメラがないとARを体験できませんが、
この「モバイル3D」は、カメラの付いた携帯電話に専用のアプリケーションをダウンロード
するだけで、3D映像によるAR体験が出来ます。

日本国内では、まだまだiPhoneなどのスマートフォン以外の携帯電話ユーザーが大多数を占めていますが、
このモバイル3Dは、携帯電話のキャリアに関係なくサービスを受けることが出来るので、とても魅力的です。（※注）

動画：モバイル3D：携帯3キャリア対応

※注
iモード（NTTdocomo）、Yahoo!ケータイ（Softbankmobile）、ezweb（au by KDDI）
の携帯電話向けインターネットサービスに対応。iPhoneやスマートフォンには対応しない。

＜参考サイト＞
モバイル3D
http://www.design100.co.jp/mobile/ar/

（tsubasa）

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)ストアロケーター
現在位置情報を利用したショップ検索が可能

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