Webサイトの”見える化”&”カイゼン”講座　基本編

を一通り読んで、箇条書きですがまとめてみました。
とはいえ、実践にはうまく活用できませんが・・・。

基礎知識

• 単純にPVが多いからといっていいわけではない。
  商品なら詳細ページが見られているかどうか、一覧から誘導出来ているかどうか等も見るべき。
• PDFは95%が直帰する
• 約75%が下層ページから入ってくる。（ほとんどが末端の詳細ページ）
• 末端のページはニーズを持ったユーザを受ける最前線のページ。そこからの導線を考える。（どこに誘導したら良いか）
• 検索やリスティング広告から入ってきたユーザは自分の得たい情報関連でより詳しい情報を求める。このとき、グローバルナビゲーションはより浅い階層へのリンクになるので、あまり活用されない場合が多い。
• サイトの場合、何をすればいいか迷ったら、帰ってしまう。
• 更新頻度が高いページ（CMS等）、Q&A、サポートページ、詳細ページが上位に来やすい。
• 実店舗がある場合、店舗で商品を買ったユーザがネットを利用すると得をする仕組みを考えると良い。（サイトへの流入が増える）
• 価格.comからのユーザは引き留めにくい。

トップページについて

• トップページから入ってくる人は約35%しかいない（1999年時は70%）
• 時間が経つにつれトップページ以外からの流入が増える（リピータ、SEOによる）
• トップページの入り口率はあげなくていい。
• トップページからくるユーザは顧客ではない場合が多い。取引先等。
• トップページから会社情報等をアピールすることで取引先に対して有効。
• トップページのPVが低い場合、アピールコンテンツはトップだけでは不十分。

導線

サイト内のコンバージョンを高めるためには、ページを作るだけではだめ。

リンクを設定し、しっかりと目的のページに誘導することが必要。

（※ユーザのモチベーションを高めるようなリンクにする。）

同時に、ゴールとなるページへの導線を知ることが重要。

• ゴールとなるページはどこから誘導されているのか。
• 誘導できているページを強化する。もしくは、誘導できるページを増やす。
• 導線を見極めて、定期的に観測する。保守していく。同時に新たな導線を探す。

ゴール

• サイトのゴールを設定する。
  どのブランドが重要か、どういうコンテンツが重要か等を決める。
• ゴールとなるページはどこから誘導されているのか。
• ゴールとなるページを見ているユーザはどのページから誘導されているか。
• そのページを強化する。もしくは誘導できるページを増やす。
• ゴールとなるページを解析してどのようなユーザがゴールにたどり着いているか。
• ゴールにたどりついているユーザの属性を調べ、同じ属性のユーザの流入を増やすように対策する。
• ゴールに到達したユーザの入り口ページ
• ゴールに到達したユーザの検索キーワード
• ゴールに到達したユーザの経由ページ　など

平均PVを活用

単純にPVを追うのではなく、1ユーザあたりの平均PVを活用するとより良い解析ができる。

このとき、設定したゴールによってどの程度平均PVが必要かを算出する。

（※お問い合わせがゴールなら、入力・確認・完了ページで最低3PV必要）

この最低ラインの平均PVを常に維持するようにする。

平均PVの伸ばし方

伸ばす方法は2つのタイプがある。

【すぐに帰らない人を増やす】

サイトに訪れるユーザをターゲットに近いものにする。（通りすがりを少なくする）

適切なキーワードでSEOをする等。

【すぐに帰る人を引きとめる】

サイトに訪れたユーザに対し、ユーザにあったコンテンツへ誘導したり、サイトの構成をわかりやすくするなど。

※サイトのターゲットにあっていない人なら引きとめる必要なし

ページの解析方法

ページを入り口数と直帰数によって4つのタイプに分けて対策を考える

1.集客が多いが直帰も多い

→直帰させない対策を練る。どんなキーワードで来ているか、どこから来ているか。

2.集客が少なく、直帰は多い

→対策が必要だが緊急ではない。じっくり育てる。キーワードの追加等

3.集客は少ないが、直帰も少ない

→良いページになる可能性大。集客を増やしていく。ページを訪れすユーザのニーズを解析し、集客する。

4.集客が多く、帰らせないページ

→この状態を目指す！

入り口ページ

入り口ページとは、サイトに訪れるユーザが一番最初に閲覧するページのこと。

入り口ページを解析の対象にすることでコンバージョンを改善する手がかりとなる。

特に、入り口ページの直帰率を下げることでサイト内を回遊するユーザを増やすことができる。

• 入り口になっているのに直帰率が高いページを探す
• その動機を調査する（どんなキーワードできたか、どんなサイトからきたか）
• 訪問者が望んでいる情報があるか、またはその情報へのリンクはあるか。なければ改善していく。

その他、

• どうしてこのページは入り口になっているのか？ 訪問者の動機は？
• このページからどこへ移動しているのか？ ゴールとなるページに移動しているだろうか？
• 重要なキーワードにおいて、望ましくないページが入り口になっていないか？
• 訪れた人のキーワードなどからそのニーズを捉え、そうしたニーズを持った人ならどんな情報を見たいと思うかを考える。

など。

キーワード

キーワード：単体キーワード

検索フレーズ：複合キーワード

とする。

検索フレーズをばらしてカウントすると隠れていたキーワードが見えてくる。

フレーズを見てみるとブランディングが見えてくる。

（※どんな印象を与えているのか、どう思われているのか）

• 下位キーワードに注目。対策をしていないのに来ているのはニーズが高い証拠。
• キーワードリストとサイトの方向性を照らし合わせる。
• 商品の特徴を3つ程度書き出し、そのキーワードに関連するキーワードを調査する。
• 洗い出したキーワードをページに埋め込んでいく。
• 関係ないキーワードから訪れる通りすがりもいる。

  →無理に引きとめる必要はないが、対策はしておいて損はない。

キーワードを分類する。

分類したキーワードをもとに重要なものを割り出していく。

コンテンツに力を入れている、訪問が少ない　→　対策を急ぐ、実はテキストが少ない？

コンテンツに力を入れていない、訪問が多い　→　コンテンツを作成する等育てていく

コンテンツに力を入れていない、訪問が多いかつ判別できないキーワード　→　解析してみる

※ちからを入れていないのに訪問があるキーワードとは

1. 実は全体の検索数が多い
2. 検索者がアクティブで下位までチェックしている
3. ライバルが少ない（重要視されていない）

既存のキーワードを強化する。

新規のキーワードを抽出する。

の2点

Q&A

Q&Aの導線によってニーズが見えてくる。

Q&Aから目的のページへ到達しているなら、その導線の強化とそのニーズをもったユーザの拡大を狙う。

用語集

いろいろなキーワードを入れるのに適している。

解析をしてどの用語でユーザを集められているかを調べる。

そのキーワードは競合が少ないので狙い目。

javascriptに置ける論理演算子についての実験 – jsdo.it – share JavaScript, HTML5 and CSS

論理積演算子（&&）

&&は前と後ろにオペランドを持ちます

A && B

単純な理解でいくと、

AとBの両方がtrueの場合true、どちらかがfalseの場合falseを返す

ということですが、実際の挙動はもうちょっと複雑なようです。
javascript 第5版によると、

まず、&&記号の左側にあるオペランド（式）を評価します。この式の値がfalseに変換できる場合（例えば、左側のオペランドの評価結果がnull,0,”",未定義値のいずれかである場合）、左側の式の評価結果を返します。それ以外の場合は右側のオペランド（式）の評価結果を返します。

と書かれています。
trueを返すというよりは評価結果を返すということだったんですね。

翻って上記のコードを見てみます。

■両方trueの場合

alert(1 && 2)

このように両方trueになりうる場合は、

1. 「1」を評価する。
2. trueなので、「2」を評価する。
3. 「2」を返す。

で、「2」がalertされます。

■左はtrueで右はfalseの場合

alert(1 && 0)

この場合の挙動は上記と同じです。

1. 「1」を評価する。
2. trueなので、「0」を評価する。
3. 「0」を返す。

結果、返される値がfalseになりうる値なので、if文等に使用した場合はfalseとして評価されるわけです。

if(1 && 0){// 0が返るのでfalseと評価される
    //実行されない
}

■左はfalseで右はtrueの場合

alert(0 && 2)

このような場合は、

1. 「0」を評価する。
2. falseなので、「0」を返す。

となります。
右側の式、「2」は評価すらされません。

■両方falseの場合

alert(0 && "")

もうお分かりのように、右側の式はほぼ関係ありません。
同じように、「0」が返ります。

いくつもつなげて書く

&&はいくつもつなげて書くこともできます。
評価方法は同じように、左から右へと進んでいきます。

ただ、&&自体は前と後にオペランドを持つだけですので仕組みとしては

A && B && C

と書いた場合は、

(A && B) && C

という評価方法になるんですかね。
これは論理和演算子（||）でも同じです。

論理和演算子（||）

||も同じく前と後ろにオペランドを持ちます

A || B

単純な理解でいくと、

AとBのどちらかがtrueの場合true、両方falseの場合falseを返す

ということですが、実際の挙動について調べると、

まず、演算子（||）の左側のオペランド（式）を評価します。この式の値がtrueに変換できる場合は、左側の式の値をそのまま変換せずに返します。
falseの場合は右側のオペランド（式）を評価し返します。※1

※1 最後の一文は明記されていませんでしたが、そういう挙動になります。

と書かれています。
&&と同じように評価されたものが返されます。

■両方trueの場合

alert(1 || 2)

このような場合は、

1. 「1」を評価する。
2. trueなので、「1」を返す。

となります。
左側がtrueの場合は右側は評価すらされません。
これは右側がfalseの場合も同様です。

■左はtrueで右がfalseの場合

alert(1 || 0)

これは上記と同じ。「1」が返って、右側は評価されません。

■左はfalseで右がtrueの場合

alert(0 || 2)

この場合は、

1. 「0」を評価する。
2. falseなので、「2」を評価する。
3. 「2」を返す。

です。
もうだんだんわかってきましたね。

■両方falseの場合

alert(0 || "")

同じように、

1. 「0」を評価する。
2. falseなので、「”"」を評価する。
3. 「”"」を返す。

ということです。
&&と同じように、if文等の中に入った場合はどちらかの値が返されそれがbooleanに変換されて評価されるわけですね。

if( 0 || "" ){// ""が返され、booleanに変換、falseになる
    //実行されない
}

応用

論理演算子を使用する際のポイントとしては、

1. どちらかの式の評価がそのまま返される。
2. 評価できるのは式。

ということでしょうか。
これらを応用するといろんな面白いコードが書けるようです。

論理演算子（&&と||）を応用する – てっく煮ブログ

また、オライリーにはこんな例文も載っています。

var max = max_width || preference.max_width || 500;

どれか、trueとなる値が使われるということです。
まあ、思いついた人はほんとすごいなあとしかいいようがないですね。

何ができるのか

まあ、スマートフォン用とはいってもアプリみたいになるわけでもないので、普通にHTML組んだっていいんですよね。
じゃあjQuery Mobileを使うと何ができるのかっていうと、主には

• スマートフォン用のUIの提供
• スマートフォン用の遷移
• スマートフォン用の設定（viewport等）
• クロスデバイス対応

あたりを、「簡単に」実装できるということでしょうか。
デモを見ると分かりやすいかと思います。

jQuery Mobile:Demos and Documentation

あとは下記のものもとても分かりやすいです。
資料がjQuery Mobileで作られていますね。

jQuery Mobile:第12回HTML5とか勉強会

jQuery Mobileについて少し

• スマートフォンサイト構築用フレームワーク
• 現在Alpha版リリース（2011/2/22現在）
• マークアップドリブン（マークアップ中心に構築していく）
• もちろんjQueryベース
• ファイル自体も軽量
• ライセンスはMIT。商用利用可。

です。
まだ、正式リリースではないんですね。
今後は、テーマのを簡単に修正できるツールがでるとか、DreamWeaverと連携できるようになるとか、なんとか。
期待のフレームワークです。

じゃあ、ちょっと使い方を。

1.ファイルを読み込む

まずは、使用するファイルを読み込みます。
こちらで使用するファイルをダウンロード

http://jquerymobile.com/download/

<link rel="stylesheet" href="jquery.mobile-1.0a3.min.css" />
<script src="jquery-1.5.min.js"></script>
<script src="jquery.mobile-1.0a3.min.js"></script>

パスは使用する環境に合わせてください。(※2011/2/23 CSSファイルへのパスが抜けていたので訂正)
ダウンロードもいいですが、ネット上のものを使うのも。

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>

どちらでも。

2.ベースとなるHTMLを記述

ファイルを読み込んだらベースとなるHTMLを記述します。
jQuery Mobileはほとんどスクリプトは触りません。
決められたHTMLを書くことで、スクリプト側で置換され色々なUIを実装しているようです。

<div>
    <div>
        <h1>Header</h1>
    </div>
    <div>
        Contents
    </div>
    <div>
        <h1>Footer</h1>
    </div>
</div>

基本の形です。
「header」、「footer」、「content」の3つのブロックに分かれます。
みての通り「header」はページ上部にタイトルのような形で、「footer」はページ下部に。
コンテンツ内容は「content」内に書いていきます。

上記の記述で1ページの表示になります。

3.ページを遷移させる

さて次に別ページへの遷移方法について。
同一ファイル内に同じようなページの記述を追加して、id属性を付けます。

これで、#リンクを貼ることでスライドやポップアップなどの遷移をさせることができます。

<div>
    <div>
        <h1>Header</h1>
    </div>
    <div>
        <a href="#about">to About</a>
    </div>
    <div>
        <h1>Footer</h1>
    </div>
</div>
 
<div id="about">
    <div>
        <h1>Header</h1>
    </div>
    <div>
        this is About
    </div>
    <div>
        <h1>Footer</h1>
    </div>
</div>

別のファイルへのリンクについては、指定がない場合コンテンツをファイルに読み込む形で表示します。

<!--             index.htmlファイル                -->
<div>
    <div>
        <h1>Header</h1>
    </div>
    <div>
        <a href="other.html">to Other</a>
    </div>
    <div>
        <h1>Footer</h1>
    </div>
</div>
<!--             index.htmlファイル                -->
 
<!--             other.htmlファイル                -->
<div>
    <div>
        <h1>Header</h1>
    </div>
    <div>
        遷移先だよ
    </div>
    <div>
        <h1>Footer</h1>
    </div>
</div>
<!--             other.htmlファイル                -->

上記のように書いてあった場合、index.htmlにother.htmlファイルが読み込まれ指定した遷移方法で遷移します。
（※通常は横スライド）
このときURLも「hogehoge.com#other.html」のようになります。

PCサイトと同じように、別ページへ遷移するには

rel="external"

を追加、もしくは

target="_blank"

を設定します。
こうすることで、「hogehoge.com/other.html」に遷移するようになります。

遷移テスト

※注意
別ページをAjaxで読み込んで遷移する場合、エラーになる場合があります。
（読み込むファイルの容量？要調査）
別ページへの遷移はrel=”external”のほうが確実かもしれません。

ちなみに、一度エラーがおきてしまうと、その後ページをリロードするまでリンクがきかなくなってしまいます。

これで、ページの遷移は終了。
簡単ですね。
ちなみに、戻るリンクなんかは自動的にヘッダに追加されます。
あとはこの基本HTMLに属性値を追加することで、色々なUIが作成できます。

4.いろいろな設定をしてみる

リスト表示

<ul>
	<li>リスト表示</li>
	<li><a href="other.html">リスト1</a></li>
	<li><a href="other.html">リスト2</a></li>
</ul>

ボタン

<a href="other.html">ボタン</a>

※data-iconの指定方法を変更することでアイコン変更可能

アコーディオン

<div>
<h2>アコーディオンタイトル</h2>
アコーディオン内容アコーディオン内容アコーディオン内容アコーディオン内容アコーディオン内容</div>

アコーディオンタイトルはh1～h6の見出しタグならなんでも使えます。

フォーム

フォームはそのままの記述でUIが実装されます。

<input type="text" />
<input type="search" />
<select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

など。

ヘッダにボタン追加

    <div>
        <h1>Header</h1>
        <a class="ui-btn-right" href="#about">About</a>
    </div>

フッタにバナー風ボタン追加

<div>
    <div>
        <ul>
	    <li><a rel="external" href="index.html">ホーム</a></li>
	    <li><a href="http://blog.wonder-boys.net">ブログ</a></li>
        </ul>
    </div>
    <h1>Footer</h1>
</div>

デザインテーマを変更する

data-theme="a" // a～dを指定

を追加することでページ単位やパーツ単位でデザインテーマを変更出来ます。

<
a href="other.html">ボタンa</a>
<a href="other.html">ボタンb</a>
<a href="other.html">ボタンc</a>
<a href="other.html">ボタンd</a>

設定テスト

他にも色々な設定があるので組み合わせてページを作ることが出来ます。
下部参考サイト参照。

5.使ってみての懸念

• 一つのページに要素を詰めすぎると読み込みが遅くなるので、適度に分割する。
• を画面いっぱいに設置すると画面のフリック移動がやりづらい。（リストにフォーカスが当たってしまう）
• デザインの変更がめんどくさい。（cssファイルをダウンロードして修正）
• フッターの下部固定に注意。（見づらい）

くらいでしょうか。
デザインについては、独自のCSSファイルを作成して当てることもできます。
（※ただし、HTMLについてはスクリプトで置き換わる箇所があるので注意）

フッターについては、設定で下部に固定することができますが（常に画面内下部に表示されている感じ）、コンテンツが見づらくなってしまうためあまり良いとは言えませんでした。

まとめ

フレームワーク自体はUIを簡単に作成できる分、使ってみる価値はあるかと思います。
jQuery Mobile以外にも色々なフレームワークが出てきているので使い分けていくのも必要かもしれません。

jQTouch
Sencha Touch
WINK TOOLKIT

参考サイト

jQuery Mobile:Demos and Documentation
jQuery Mobile:第12回HTML5とか勉強会
jQuery Mobile [基礎編]
jQuery Mobile リファレンス的なもの

前にちょっと調べたなあと思いながらググったのでメモ。

actionscript3.0側

actionscript3.0側ではとりあえずこんな感じで使います。

1
2
3

import flash.external.ExternalInterface;
 
ExternalInterface.call("getCookie","start");

クラスをimportして、任意の関数内で、ExternalInterface.callを実行します。
引数は、使用するjavascriptの関数名。
第二引数以降は、使用する関数に渡す引数になります。

今回、こちら側は特に問題なし。

javascript側

じゃあ、javascript側はというと、普通の関数を用意しておくだけ。

1
2
3
4

var getCookie = function(key){
    //処理を書く
    alert(key);
};

こんな感じ。関数の中身は割愛します。
ここでのkeyは上記でいくと”start”が入りますね。
で、alertされると。

こちら側もまったく問題ないようです。

では、どこが問題だったかというと、FlashをHTMLに埋め込む際のコードに問題がありました。

埋め込みコード

通常以下のようなコードを動的に書き出してFlashを表示させていました。

1
2
3
4
5

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="200" height="200">
    <param name="movie" value="パス" />
    <param name="FlashVars" value="value" />
    <embed src="パス" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="200" height="200"></embed>
</object>

この埋め込み用コードは色々書き方があると思うのでスルーをしていただいていいんですが、IEではobjectタグにid値が必要ということなのだそうです。
しかもid値に「external」という文字が含まれていないといけないとか。
（※さらに「external」だけでもダメ！）

なんということでしょう。

ということで、id値を以下の通り設定したら無事機能しました。

1
2
3
4
5

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="200" height="200" id="externalid"> //id値を追加
    <param name="movie" value="パス" />
    <param name="FlashVars" value="value" />
    <embed src="パス" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="200" height="200"></embed>
</object>

今回の場合、id名だけで済むのでそれほど大掛かりにはなりませんでしたが、ほんとにIEはたまらんですね。

DataGridにボタンを入れたい

DataGridは通常文字列なり数字なりが入ります。
基本的なDataGridは、

1
2
3
4
5
6
7
8
9
10
11
12
13

<mx:DataGrid width="100%" height="100%">
    <mx:ArrayCollection>
        <mx:Object func="開く" contents="お知らせですよ1" />
        <mx:Object func="開く" contents="お知らせですよ2" />
        <mx:Object func="開く" contents="お知らせですよ3" />
        <mx:Object func="開く" contents="お知らせですよ4" />
        <mx:Object func="開く" contents="お知らせですよ5" />
    </mx:ArrayCollection>
    <mx:columns>
        <mx:DataGridColumn dataField="func" headerText="操作" width="200" />
        <mx:DataGridColumn dataField="contents" headerText="内容" />
    </mx:columns>
</mx:DataGrid>

こんな感じです。
カラムが2つでそれぞれに内容が入ります。

さて、このDataGrid内にボタンを追加します。
DataGridの各カラムの表示方法はitemRendererを使います。

1

<mx:DataGridColumn dataField="func" headerText="操作" width="200"　itemRenderer="mx.contorols.Button" />

itemRenderer属性をつけます。
値はコンポーネントの種類になりますので、今回は「mx.contorols.Button」となります。

1
2
3
4
5
6
7
8
9
10
11
12
13

<mx:DataGrid width="100%" height="100%">
    <mx:ArrayCollection>
        <mx:Object func="開く" contents="お知らせですよ1" />
        <mx:Object func="開く" contents="お知らせですよ2" />
        <mx:Object func="開く" contents="お知らせですよ3" />
        <mx:Object func="開く" contents="お知らせですよ4" />
        <mx:Object func="開く" contents="お知らせですよ5" />
    </mx:ArrayCollection>
    <mx:columns>
        <mx:DataGridColumn dataField="func" headerText="操作" width="200"　itemRenderer="mx.contorols.Button" />
        <mx:DataGridColumn dataField="contents" headerText="内容" />
    </mx:columns>
</mx:DataGrid>

これででるでしょうか？
ラベルがでませんね。
これ、このままだとラベルの設定ができないんですね。
こういう場合は、属性値ではなくて子要素にコンポーネントを追加します。

1
2
3
4
5
6
7

<mx:DataGridColumn dataField="func" headerText="操作" width="200"　>
    <mx:itemRenderer>
        <mx:Component>
            <mx:Button label="ラベルです"/>
        </mx:Component>
    </mx:itemRenderer>
</mx:DataGridColumn>

itemRendererタグの中にcomponentを入れて、さらに表示させたいコンポーネントタグを入れます。
こうしておいて、ラベルの設定をします。

さらに、dataProviderとして持っているArrayCollectionの値を使いたいなあと言う場合はデータを取得します。

1
2
3
4
5
6
7

<mx:DataGridColumn dataField="func" width="200"　>
    <mx:itemRenderer>
        <mx:Component>
            <mx:Button label="{data.func}"/>
        </mx:Component>
    </mx:itemRenderer>
</mx:DataGridColumn>

これで、ArrayCollection側で設定したラベルを出すことができます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<mx:DataGrid width="100%" height="100%">
    <mx:ArrayCollection>
        <mx:Object func="開く" contents="お知らせですよ1" />
        <mx:Object func="開く" contents="お知らせですよ2" />
        <mx:Object func="開く" contents="お知らせですよ3" />
        <mx:Object func="開く" contents="お知らせですよ4" />
        <mx:Object func="開く" contents="お知らせですよ5" />
    </mx:ArrayCollection>
    <mx:columns>        
        <mx:DataGridColumn dataField="func" headerText="操作" width="200"　>
            <mx:itemRenderer>
                <mx:Component>
                    <mx:Button label="{data.func}"/>
                </mx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>
        <mx:DataGridColumn dataField="contents" headerText="内容" />
    </mx:columns>
</mx:DataGrid>

ボタンにイベントを設定したい

今回ボタンにしましたが、ボタンにしたなら当然クリックしたときにアクションをさせたくなります。
ちょっとやってみます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<mx:Script>
    <![CDATA[
    import mx.controls.Alert;
    import flash.events.MouseEvent;
 
    private function showMessege(e:MouseEvent):void {
        Alert.show("hello!");
    }
    ]]>
</mx:Script>
 
<mx:DataGrid width="100%" height="100%">
    <mx:ArrayCollection>
        <mx:Object func="開く" contents="お知らせですよ1" />
        <mx:Object func="開く" contents="お知らせですよ2" />
        <mx:Object func="開く" contents="お知らせですよ3" />
        <mx:Object func="開く" contents="お知らせですよ4" />
        <mx:Object func="開く" contents="お知らせですよ5" />
    </mx:ArrayCollection>
    <mx:columns>        
        <mx:DataGridColumn dataField="func" width="200"　>
            <mx:itemRenderer>
                <mx:Component>
                    <mx:Button label="{data.func}" headerText="操作" click="showMessege( event )" />
                </mx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>
        <mx:DataGridColumn dataField="contents" headerText="内容" />
    </mx:columns>
</mx:DataGrid>

こんな感じで関数を呼び出してみますが、うまくいきません。

Call to possibly undefined method showMessage.

なんてエラーがでます。
関数が認識されていないようです。

いろいろ調べてみるとどうやら直接は呼べないようで以下のようにouterDocumentが必要だということでした。
さらに、関数側もpublicにしておくようです。
なるほど、スコープが違うんでしょうかね・・。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<mx:Script>
    <![CDATA[
    import mx.controls.Alert;
    import flash.events.MouseEvent;
 
    private function showMessege(e:MouseEvent):void {
        Alert.show("hello!");
    }
    ]]>
</mx:Script>
 
<mx:DataGrid width="100%" height="100%">
    <mx:ArrayCollection>
        <mx:Object func="開く" contents="お知らせですよ1" />
        <mx:Object func="開く" contents="お知らせですよ2" />
        <mx:Object func="開く" contents="お知らせですよ3" />
        <mx:Object func="開く" contents="お知らせですよ4" />
        <mx:Object func="開く" contents="お知らせですよ5" />
    </mx:ArrayCollection>
    <mx:columns>        
        <mx:DataGridColumn dataField="func" headerText="操作" width="200"　>
            <mx:itemRenderer>
                <mx:Component>
                    <mx:Button label="{data.func}" click="outerDocument.showMessege( event )" />
                </mx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>
        <mx:DataGridColumn dataField="contents" headerText="内容" />
    </mx:columns>
</mx:DataGrid>

これでイベントも設定できるようになりました。
なかなかクセがあって慣れるまでは大変ですね。

さて、今回ポイントとしたところをご紹介します。

マークアップはhtml5

やはりマークアップを勉強している身としてはhtml5でしょうということでhtml5でマークアップしました。
以前少し勉強したので、ぜんぜん分からなかったことはないんですが、やはりsectionとか見出しのタグ付けをどうするかは少し迷いました。
まあ、それなりにはできたと思っています。

デザインはシンプルに

とりあえず極力シンプルなデザインにしたいなあと。
レイアウトはあまり変えていないので色数を減らしたり要素を減らしたり。
タグのあたりはちょっと修正が必要かなあ・・。

記事の検索方法

以前にはなかった、サイト内検索とタグやカテゴリの一覧ページを作りました。
少しは探しやすくなったと思います。

コードはWP-Syntaxで

今回のコード部分はWP-SyntaxとWP-Syntax Hacktifyを使いました。
こんな感じです。

1
2
3

var hoge = function(){
    alert("hello!");
};

なんか黒くてかっこいいです。

• WP-Syntax
• WP-Syntax Hacktify

その他

とりあえずのリニューアルはできましたが、過去の記事の見栄えが崩れてしまっています。
これを早急に修正したいと思っています。
あとは、プロフィールページを作ってないので、これもしっかり作ろうと思います。

Special thanks!!

@paz__para

WordPressの大部分を組んでいただきました。
ほんとにありがとうございました！

これほどまでに、わからないとは自分が情けないです。
ちゃんと勉強します！

数学的な三角関数

さて、まずいわゆる学校で習う三角関数についての復習をしてみます。
高校で習っているはずですね！数学I・Aでやりましたね！

図のような「直角三角形」において、角度が分かると辺の比率の関係を表しているのが三角関数です。
公式は、

1
2
3

sinθ = a / c　//サイン
cosθ = b / c　//コサイン
tanθ = a / b　//タンジェント

となります。
例えば、角度が45°のときの辺cと辺aの比率は、

1

sin45° = 1 / √2 = a / c　※角度に対する比率というのは決まっています。

ですね、よって

1

a : c = 1 : √2

となるわけです。

つまり、三角関数の基本的な意味とは、

・角度と辺の比率の関係を表す。
・角度から辺の比率が分かる。
・辺の比率から角度が分かる。

ということです。

javascriptでの三角関数の書き方

まあ、これは書くまでもないですが、一応。
今回はjavascriptでの書き方。

javascriptではMathクラスが予め用意されています。
このMathクラスのメソッドを使います。

1
2
3

Math.sin( 角度 )
Math.cos( 角度 )
Math.tan（ 角度 ）

と書きます。
返り値は辺の比率が小数点で返ってきます。
このとき重要なのは、角度に入る部分が「度」ではなくて「ラジアン」だということです。

ラジアン　wikipedia

ラジアンの意味は上記を見てもらうとしまして、角度とラジアンの関係は

1

360度 = 2π（パイ）ラジアン

になります。
javascriptでいくと、

1

360度 = Math.PI * 2

です。
つまり、sin360°を求めたいときは

1

Math.sin( Math.PI * 2 )

と書きます。
ちょっとめんどくさいですね。

座標における三角関数：sinとcosの意味

ここからは実際にプログラミング中での使い方を見ていきます。
実際に使う箇所として一番多いのは、図形やいろんなオブジェクトを運動させる（アニメーション）ときではないかと思います。
つまり、ある座標上のx値とy値をもとに動かしていくわけです。

座標上における三角関数というのはどのようなものでしょうか。

上記の図を見てもらうと分かりますが、この三角形の「点Ｂ」において、x座標はb、y座標はaになります。
つまり、点Bの座標は（ b, a ）ということになりますね。
さらに、点Bの座標を知りたければ、辺bと辺aを知ればよいということになります。

さて、どうやるのか。
一番上の三角関数の基本に戻ると

1
2

sinθ = a / c
cosθ = b / c

この公式がありましたね。
この式を変形すると、

1
2

a = sinθ * c
b = cosθ * c

になります。
cは対辺と呼ぶので

cosに対辺をかけたものがx座標
sinに対辺をかけたものがy座標

になります。
また、

基準点からの角度と対辺の長さが分かれば座標を取得できる

ということにもなります。
ちなみにtanについてふれていませんが、実際あまりつかわないのでここではそっとしておきましょう。

三角関数を使って円運動

基準点からの角度と対辺の長さが分かれば座標を取得できる

と書きましたが、この方法を使って表現できる一番スタンダードなものは円運動です。
円運動させたい図形の座標を「点B」、円運動する円の中心点を「点Ａ」とみたてて三角形を書いてみます。

どうでしょうか。
半径と中心点の座標を決めて、角度だけ変えていけば点Bは図の円の上を移動することになりますね。
これを利用して円運動をさせます。

1
2
3
4
5
6

//基準点
var centerX = 200;
var centerY = 200;
 
//半径
var radius = 50;

としてみます。
これを使い座標を取得します。

1
2

var posX = Math.cos( angle ) * radius;
var posY = Math.sin( angle ) * radius;

angleには角度が入ります。
5度づつ動かしたい場合は、

1
2
3
4
5

//角度の初期値
var angle = 0;
 
//変化率（5度）
var per = Math.PI / 36;

としておきます。

それから、実際に動かすとわかりますが、このままでは原点（0,0）を中心に動いてしまいます。
設定した点を中心に周るように点をずらします。

1
2

var posX = Math.cos( angle ) * radius + centerX;
var posY = Math.sin( angle ) * radius + centerY;

これらをまとめて、定期的に動作させます。

これが円運動の基本です。

三角関数を使って円運動（2）

上記の座標算出方法は、

1. 中心点を決める
2. 円運動させる円の半径を決める。
3. 角度を決め、角度を増やしていく。

という方法でした。 「基準点を決めて半径がこのくらいで円運動させる」というように、あらかじめ全ての情報が分かっている場合は特に問題ないです。 ただ、例えば座標上に一つ点があってそれをある基準点の周りを円運動させたいときなんかは少し面倒なことになります。

• 点が基準点からみて角度が何度あるのか。
• 点と基準点との距離（円運動させる円の半径）はいくつか。

という処理をはさまなければいけません。 この処理は、

1
2
3
4
5
6
7
8
9
10
11

var targetX; //移動する点のx座標とする
var targetY; //移動する点のy座標とする
 
//角度を求める
var dx = targetX - centerX;
var dy = targetY - centerY;
 
var angle = Math.atan2( dy, dx ); //点と点の距離から角度を求める式
 
//距離を求める
var radius = Math.sqrt( dx*dx + dy*dy ); //ピタゴラスの定理

とやって初めて角度と距離を取得することが出来ます。 ちなみに距離を求める方法はピタゴラスの定理です。覚えてますか？ サンプルはこちら。

設定した位置から基準点に対して円運動します。

三角関数の数値を使った運動

ここまでは三角関数を使ってある点との角度を求めたり位置を求めたりしましたが、ちょっと視点を変えてみようと思います。
wikipediaさんからちょっと拝借させて頂きました。ごめんなさい。

これを見るとわかりますが、sinやcosというのは-1.0～1.0の値をいったりきたりしています。
これに注目してみましょう。。

1

Math.sin( angle );

angleを少しづつ増やしていくと、sinは

1

0　→　1.0　→　0　→　-1.0　→　0

となっていきます。
この値を例えば位置に加え続けてみます。

1
2

var vx = posX + Math.sin( angle );
angle += 0.1;

という感じですね。
これで、ある範囲を往復する運動になります。
しかもちょっとイージング（加速したり減速したりする）気味で。

同じように、図形の大きさに適用してみます。

なんか面白い動きになりましたね。

まとめ

以上で基本終わりです。
なかなか奥が深い三角関数ですので気になる方は色々と調べてみてください。

サンプル

こんな感じで。
四角い箱がぐるぐる回ります。
let’s play !!

3D Cube – jsdo.it – share JavaScript, HTML5 and CSS

簡単にコードの解説を。

座標の決定は遠近法を使う

3Dの描画を行う場合データとしては、x、y、zの座標を持たないといけません。
しかし、スクリーン上は2次元なのでx、yしかありません。
そこで遠近法を使って”3Dっぽく”見せる必要があります。
奥行きを感じる絵を描くのと同じ感覚でしょうかね。

遠近法 Wikipedia

具体的には、消失点（上記ページ参照）を作り、その座標点を考慮して点を配置します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

■106行目
var Point3D = function( posX, posY, posZ ){
    this.x = posX;
    this.y = posY;
    this.z = posZ;
    this.cx = posX;
    this.cy = posY;
    this.cz = posZ;
    this.centerX = 0;
    this.centerY = 0;
    this.centerZ = 0;
 
    this.fl = 250;
    this.vpX = 0;
    this.vpY = 0;
};
 
Point3D.prototype = {
    setVanishingPoint: function( vpX, vpY ){
        this.vpX = vpX;
        this.vpY = vpY;
    },
    setCenter: function( centerX, centerY, centerZ ){
        this.centerX = centerX;
        this.centerY = centerY;
        this.centerZ = centerZ;
    },
    screenX: function(){
        return this.vpX + this.centerX + this.x * this.getScale();
    },
    screenY: function(){
        return this.vpY + this.centerY + this.y * this.getScale();
    },
    getScale: function(){
  return this.fl / ( this.fl + this.z + this.centerZ );
    }
};

これが基本となるオブジェクト。
点の座標を管理します。

1
2

this.vpX = 0;
this.vpY = 0;

ここが消失点を持つプロパティです。
インスタンス化した後に外部から設定できるようにしてあります。

1
2
3
4
5
6
7

■277行目
for( var i = 0; i < points.length; i++ ){
    var point = points[i];
    point.setVanishingPoint( stage.stageWidth / 2, stage.stageHeight / 2 );
    point.setCenter( 0, 0, 50);
    stage.setPoint( point );
}

ステージのちょうど真ん中を消失点に設定しています。

1
2
3
4
5
6
7

■132行目
screenX: function(){
    return this.vpX + this.centerX + this.x * this.getScale();
},
screenY: function(){
    return this.vpY + this.centerY + this.y * this.getScale();
}

screenXとsccreenYというメソッドを使って、スクリーン上に配置する場所を計算しています。
x値とy値が同じでもz値が大きくなるとその分消失点に近づいていくというわけです。

3Dの回転

3Dの座標回転は三角関数を使います。

1
2
3
4
5
6
7
8
9
10
11

■51行目
rotateX: function( point, angle ){
    cosX = Math.cos( angle );
    sinX = Math.sin( angle );
 
    y1 = point.cy * cosX - point.cz * sinX;
    z1 = point.cz * cosX + point.cy * sinX;
 
    point.y = y1;
    point.z = z1;
}

この関数はx方向の軸を中心に回転させるメソッドです。 angleというのは角度。
原点を中心として現在の位置から何度回転させるか。で位置を決めています。
同じ原理で、y軸、z軸の回転もできます。

面の描画（ポリゴン）

上記にあったPoint3Dクラス（※正確にはクラスじゃないけど）の座標を元に面を描く場合三角形を使います。
Point3Dインスタンスを3つ集めて三角形を描きます。これがいわゆるポリゴンですね。

ポリゴン　Wikipedia

三角形というのはどうやらいろいろと使いやすいものだそうです。

1
2
3
4
5
6
7
8

■145行目
var Triangle = function( pointA, pointB, pointC, color ){
    this.a = pointA;
    this.b = pointB;
    this.c = pointC;
    this.color = color;
    this.light;
};

メソッド部分は割愛しますが、Triangleクラスを使っています。
引数に入るPoint3Dインスタンス3つを使って三角形を描くようにします。
実際に描くのはCanvasですが。

Triangleクラスは三角形データの保持です。

1
2
3
4
5

■86行目
this.canvas.moveTo( triangle.a.screenX(), triangle.a.screenY() );
this.canvas.lineTo( triangle.b.screenX(), triangle.b.screenY() );
this.canvas.lineTo( triangle.c.screenX(), triangle.c.screenY() );
this.canvas.lineTo( triangle.a.screenX(), triangle.a.screenY() );

こんな感じで。

陰面消去

ポリゴンを使って三角形を描画すると奥に配置されるべきポリゴンが手前に来てしまうことがあります。
これはちょっとよろしくないので、裏側になるポリゴンは描画しないようにします。
これが、陰面消去。

1
2
3
4
5
6
7
8

■159行目
isBackFace: function(){
    var cax = this.c.screenX() - this.a.screenX();
    var cay = this.c.screenY() - this.a.screenY();
    var bcx = this.b.screenX() - this.c.screenX();
    var bcy = this.b.screenY() - this.c.screenY();
    return cax * bcy > cay * bcx;
}

3つの点の配置順をチェックして面が裏面なのか表面なのかを判断します。

1
2

■77行目
if( triangle.isBackFace() ){ continue; };

こんな感じで裏面だったら描画しないようにします。

3D照明

ついでに、面の位置によって明るさを調整できるとリアルに感じますね。
光源データを持つクラスを作ります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

■204行目
var Light = function( posX, posY, posZ, brightness ){
    this.x = -100;
    this.y = -100;
    this.z = -100;
    this.brightness = 1;
 
    if( arguments[0] ) this.x = posX;
    if( arguments[1] ) this.y = posY;
    if( arguments[2] ) this.z = posZ;
    if( arguments[3] ) this.brightness = brightness;
};
 
Light.prototype = {
    setBrightness: function( num ){
  this.brightness = Math.max( num, 0 );
  this.brightness = Math.min( this.brightness, 1 );
    }
};

位置とか。明るさとか。
このクラスに対して面がどっちを向いているかを算出します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

■179行目
getLightFactor: function(){
    var ab = new Object();
    ab.x = this.a.x - this.b.x;
    ab.y = this.a.y - this.b.y;
    ab.z = this.a.z - this.b.z;
 
    var bc = new Object();
    bc.x = this.b.x - this.c.x;
    bc.y = this.b.y - this.c.y;
    bc.z = this.b.z - this.c.z;
 
    var norm = new Object();
    norm.x = ( ab.y * bc.z ) - ( ab.z * bc.y );
    norm.y = -(( ab.x * bc.z ) - ( ab.z * bc.x ));
    norm.z = ( ab.x * bc.y ) - ( ab.y * bc.x );
 
    var dotProd = norm.x * this.light.x + norm.y * this.light.y + norm.z * this.light.z;
    var normMag = Math.sqrt( norm.x * norm.x + norm.y * norm.y + norm.z * norm.z );
    var lightMag = Math.sqrt( this.light.x * this.light.x + this.light.y * this.light.y + this.light.z * this.light.z );
    return ( Math.acos(dotProd / (normMag * lightMag)) / Math.PI) * this.light.brightness;
}

とっても難しいので理解できません。
また、この結果をもとに色を調節します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

■166行目
getAdjustedColor: function(){
    var color = parseInt( '0x'+( this.color.charAt(0) == "#" ? this.color.substring(1) : this.color ) );
    var red = ( color & 0xff0000 ) >> 16;
    var green = ( color & 0x00ff00 ) >> 8;
    var blue = ( color & 0x0000ff );
 
    var lightFactor = this.getLightFactor();
    red *= lightFactor;
    green *= lightFactor;
    blue *= lightFactor;
    color = red << 16 | green << 8 | blue ;
    return "#" + color.toString(16);
}

一度、RGBに分けて各色ごとに調整して元に戻しています。ビット演算ですね。
まあこの辺もあんまり理解してないんですけど。

というわけで

簡単な解説でした。 ここまでこればあとはどんなものでも描けそうです。
球体とかも。

3D Sphere – jsdo.it – share JavaScript, HTML5 and CSS

それから、この球体にテクスチャを貼り付けたりとかしたいです。
やりかたわからないけど。

参考サイト

こちらを読めばもっと理解が深まるかも。（actionscriptですけど！）

AS3.0 で 3D プログラミングを１から勉強する (1)　てっく煮ブログ

text

SVGでテキストを使用する場合はtext要素を使用します。
表示させたいテキストはtext要素で囲むことで表示されます。
色(fill)、境界線(stroke)、透明度(opacity)、座標(x、y)、等図形と同じ属性値を設定することができます。
フォントサイズはfont-size属性にて設定します。

1
2
3

<text x="10" y="10" font-size="20" fill="red">
    テキストを使用します。
</text>

デフォルト座標はテキストの左下になりますので、x座標y座標を指定しない場合はエリアから外にでてしまいます。

1
2
3

<text font-size="20" fill="red">
    テキストを使用します。　//デフォルト座標値は（0,0）なのでエリア外に配置されてしまう。
</text>

SVGサンプル – テキストの配置

テキスト要素の装飾

上記以外にも、テキストの装飾をすることができます。

・font-family
[serif, Verdana, Arial ....]

フォントの種類を指定します。

1

<text font-size="12" fill="blue" font-family="Verdana">テキストを使用します。its text</text>

・font-weight
[normal, bold ....]

フォントの太さを指定します。

1

<text font-size="12" fill="blue" font-weight="bold">テキストを使用します。its text</text>

・font-style
[normal, italic, oblique ....]

フォントのスタイルを指定します。

1

<text font-size="12" fill="blue" font-style="italic">テキストを使用します。its text</text>

・text-decoration
[none, underline, overline, line-through]

下線や打消し線等フォントの装飾を指定します。

1

<text font-size="12" fill="blue" text-decoration="underline">テキストを使用します。its text</text>

・word-spacing
[数値]

単語と単語の間隔を指定します。

1

<text font-size="12" fill="blue" word-spacing="2">テキストを使用します。its text</text>

・letter-spacing
[数値]

文字と文字の間隔を指定します。

1

<text font-size="12" fill="blue" letter-spacing="2">テキストを使用します。its text</text>

HTMLやCSSで指定する要素とほとんど同じなので分かりやすいと思います。

SVGサンプル – テキストの装飾

テキスト要素の部分的な装飾の指定

text要素の内部でtspan要素を追加することで、部分的に違う装飾を指定することができます。
tspanにはtextと同じ装飾を指定することができます。

1

<text font-size="12" fill="blue">テキストを使用します。<tspan fill="red" text-decoration="underline">its text</tspan></text>

tspanには、xやy等の座標も独自に設定することができます。
ただし、親要素になるtext要素の座標は継承しません。原点からの絶対座標になります。
CSSでいうと、position: absoluto;を指定したようなものです。

1

<text y="20" font-size="12" fill="blue">テキストを使用します。<tspan fill="red" y="30">its text</tspan></text>

SVGサンプル – 部分的なテキストの装飾

テキストの配置（寄せ）

テキストは通常左寄せで表示されます。
テキストのセンタリングや右寄せをする場合はtext-anchorを指定します。
通常の寄せと少し違うのが、
指定していない場合はx=”0″がテキストの左端になりますが、middleやendを指定するとx=”0″がテキストの中央もしくは、右端になります。

・text-anchor
[start, middle, end]

指定する名称からして、どこからテキストを始めるかという感じで覚えるといいかと思います。
デフォルトはstartです。

1
2
3

<text font-size="12" fill="blue" text-anchor="start">テキストを使用します。左寄せです。</text>
<text font-size="12" fill="blue" text-anchor="middle">テキストを使用します。中央寄せです。</text>
<text font-size="12" fill="blue" text-anchor="end">テキストを使用します。右寄せです。</text>

SVGサンプル – テキストの配置（寄せ）

まとめ

テキスト要素の配置については、そんなに戸惑うことなくできました。
装飾についてもCSSと同じような指定でいけるので助かります。

あとは、SVGでテキストを配置するべきか、通常のHTML内に用意するべきかの判断を見極めたいですね。

グループ化の方法

各要素をグループ化する方法は3つあります。

1
2
3

<g> 要素を単純にグループ化します。
<symbol> 各要素をグループ化しシンボルにします。
<defs> 参照が想定される要素をグループ化するためのもの。

g要素

要素をグループ化して共通の装飾をすることができます。
また、id属性を指定しておくことで、グループ単位でのアニメーション等に使用できます。
g要素に指定された属性値は内部の要素に継承されます。
内部の要素では属性値を上書きすることもできます。

1
2
3
4

<g id="figs" fill="lightgreen" stroke="darkgreen" stroke-dasharray="2,2">
    <rect x="10" y="10" width="100" height="100" fill="red" />
    <circle cx="170" cy="60" r="50" />
</g>

文書構造的には、HTMLのdiv要素のような意味合いに近いかもしれません。
title要素やdesc要素と一緒に使用することで的確な意味づけを行うことができます。

SVGサンプル – 図形のグループ化：g

symbol要素

各要素をグループ化することに関してはg要素と同じですが、symbolはグループ化した時点では描画されません。
use要素を使い参照することで描画されます。
use要素を使って描画されたものはsymbol要素でグループ化された図形のインスタンスになります。
Flashのシンボル機能に近いと思います。

※下記にも記載しますが、use要素のhrefを使うときは、xlinkの名前空間が必要になります。

1
2
3
4

<symbol id="figs" fill="lightgreen" fill-opacity="0.5">
    <rect width="50" height="50" />
    <rect x="20" y="20" width="50" height="50" />
</symbol>

g要素と違うのは、

• 参照されなければ、描画されないこと
• viewBox属性とpreserveAspectRatio属性を持つことができること

です。
HTML文書にsvgを読み込むような感じに近いです。

1
2
3
4
5
6

<symbol id="figs2" width="70" height="70" fill="lightgreen" fill-opacity="0.5" viewBox="0 0 100 100">
    <rect width="50" height="50" />
    <rect x="20" y="20" width="50" height="50" />
</symbol>
 
<use x="10" y="10" xlink:href="#figs2"/>

SVGサンプル – 図形のグループ化：symbol

defs要素

参照が想定される要素をグループ化するためのもの。
symbolと同じようにdefs要素内は参照されない限り描画されません。
gやsymbolと似ていますが仕様書によると、

‘defs’ 要素は被参照要素のためのコンテナ要素である。可読性と アクセシビリティ の要求から、参照される可能性のある要素は可能ならこの要素内に定義することが推奨される。
http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/struct.html#DefsElement

とあるので、参照されるもの全体を包みこむように使うのが良いと思われます。
上記で書いた例でも、全体をdefsで囲むほうが良いですね。

1
2
3
4
5
6

<defs>
    <g id="figs" fill="lightgreen" stroke="darkgreen" stroke-dasharray="2,2">
        <rect x="10" y="10" width="100" height="100" fill="red" />
        <circle cx="170" cy="60" r="50" />
    </g>
</defs>

また、id属性を付けることは出来ますが、どうやら参照してまとめて描画させることはできないようです。
個別にidを付けて参照します。

1
2
3
4
5
6
7
8
9

<defs id="figs">
    <g id="figs-in" fill="lightgreen" stroke="darkgreen" stroke-dasharray="2,2">
        <rect x="10" y="10" width="100" height="100" fill="red" />
        <circle cx="170" cy="60" r="50" />
    </g>
</defs>
 
<use xlink:href="#figs"/> //描画されない
<use xlink:href="#figs-in"/> //描画される

SVGサンプル – 図形の参照

use要素

上記の挙げた、グループ化要素を参照することでインスタンス化して再利用できるようになります。
使いまわせるという事ですね。
参照は、idを使います。
use要素のhref属性値に「#hoge」のように参照先のidを指定します。

1
2
3
4
5
6
7
8

<defs>
    <g id="figs-in" fill="lightgreen" stroke="darkgreen" stroke-dasharray="2,2">
        <rect x="10" y="10" width="100" height="100" fill="red" />
        <circle cx="170" cy="60" r="50" />
    </g>
</defs>
 
<use xlink:href="#figs-in"/> //g要素を参照して描画

注意するべき点は、use要素のhref属性値に参照先を指定する際、xlinkという規格を用います。
xlinkはxmlの規格の一種なのでnamespaceを指定します。

1

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

use要素を使用するときには、忘れないようにします。
その他、a要素等でも使うので予め指定しておいてもいいかもしれません。

XMLリンク言語（xLink）

use要素ですが、座標を設定することで、位置をずらすこともできます。
また、いくつでも参照して描画できます。

1
2
3
4
5
6
7
8
9

<defs>
    <g id="figs-in" fill="lightgreen" stroke="darkgreen" stroke-dasharray="2,2">
        <rect x="10" y="10" width="100" height="100" fill="red" />
        <circle cx="170" cy="60" r="50" />
    </g>
</defs>
 
<use xlink:href="#figs-in"/> //g要素を参照して描画
<use x="50" y="20" xlink:href="#figs-in"/> //いくつでも描画できる

参照できる要素としては、上記のグループ化要素をはじめ、svg、各図形要素（rect、circle等前回の記事参照）も参照することができます。
何回も使用する予定のあるものはuseで使いまわしたほうが良さそうです。

SVGサンプル – 図形の参照

まとめ

やろうと思えばどの要素を使ってもできるようなので、どの要素をいつ使うかっていう所が重要なのかなあと思います。
HTMLもdivの使いどころに迷うように、また迷いそうな気がします。