Translated by Takesxi Sximada .

Originl file is http://www.goat1000.com/tagcanvas-install.php

このページはTagCanvasのインストールの説明の日本語訳です。

TagCanvasのインストール

このページではTagCanvasをサイト上で動作させるために必要な手順を説明します。 使用しているのはstand-alone版とjQueryプラグイン版です。 もしこれらのドキュメントを読むのでさえ面倒なくらいせっかちなら、 完全にこのドキュメントを読み飛ばして [example_page] のソースを 利用することもできます。

インストール手順

  1. TagCanvasのページからスタンドアローン版かjQueryプラグイン版かを

    選んでダウンロードし、それをサイトにコピーします。

    あなたのサイトに既にjQueryが入っているならプラグイン版を使うことをお勧めします。 一方、スタンドアローン版を使用すれば jQueryをインストールしなくても同じ結果を得ることができます。

  1. ページにjavascriptファイルをインクルードします。

    スタンドアローン版:

    <!--[if lt IE 9]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
    <script src="tagcanvas.min.js" type="text/javascript"></script>
    

jQueryプラグイン版:

<!--[if lt IE 9]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery.tagcanvas.min.js" type="text/javascript"></script>

このコメントはIE用で、IEのバージョンが9未満だった場合excanvas.jsをインクルードします。

jQueryのメインファイルはTagCanvasの前にインクルードされるようにします。 jQueryプラグイン版はjQuery1.3以上で動作するでしょう。(恐らくそれ以前のいくつかのバージョンでも動きます)

  1. ページにcanvasを追加し、高さと幅を設定します。
<div id="myCanvasContainer">
 <canvas width="300" height="300" id="myCanvas">
  <p>Anything in here will be replaced on browsers that support the canvas element</p>
 </canvas>
</div>

幅と高さはピクセルで指定します。<img>タグのような感じです。 canvasのサイズ変更にCSSを使用しないでください。 表示されているものの形状を歪曲し、マウスの位置計算を台無しにしてしまいます。

  1. a: Internet Explore version 8以前のブラウザまではサポートしない場合、canvas内にタグのリンクを配置します。 その場合 “do not support the canvas elemet” として表示されます。
<div id="myCanvasContainer">
 <canvas width="300" height="300" id="myCanvas">
  <p>Anything in here will be replaced on browsers that support the canvas element</p>
  <ul>
   <li><a href="http://www.google.com" target="_blank">Google</a></li>
   <li><a href="/fish">Fish</a></li>
   <li><a href="/chips">Chips</a></li>
   <li><a href="/salt">Salt</a></li>
   <li><a href="/vinegar">Vinegar</a></li>
  </ul>
 </canvas>
</div>

ulタグとliタグを使用する必要はありません。canvasタグ内の全てのリンクを探して使われます。 canvasタグ上のid属性によって参照されています。詳細は以下をご覧ください。

<div id="myCanvasContainer">
 <canvas width="300" height="300" id="myCanvas">
  <p>In Internet Explorer versions up to 8, things inside the canvas are inaccessible!</p>
 </canvas>
</div>

<div id="tags">
 <ul>
  <li><a href="http://www.google.com" target="_blank">Google</a></li>
  <li><a href="/fish">Fish</a></li>
  <li><a href="/chips">Chips</a></li>
  <li><a href="/salt">Salt</a></li>
  <li><a href="/vinegar">Vinegar</a></li>
 </ul>
</div>

つまり下記のようにコンテナのIDを渡す必要があります。 (この例では”タグ”とはdivです)

<script type="text/javascript">
 window.onload = function() {
   try {
     TagCanvas.Start('myCanvas');
   } catch(e) {
     // something went wrong, hide the canvas container
     document.getElementById('myCanvasContainer').style.display = 'none';
   }
 };
</script>

タグがキャンバスの中にリンクされている場合、スタート関数にその他の引数と一緒にコンテナのIDを渡します。 スタンドアローン版の場合

...
TagCanvas.Start('myCanvas','tagList');
...

jQueryプラグイン版の場合

<script type="text/javascript">
$(document).ready(function() {
  if( ! $('#myCanvas').tagcanvas({
    textColour : '#ffffff',
    outlineThickness : 1,
    maxSpeed : 0.03,
    depth : 0.75
  })) {
    // TagCanvas failed to load
    $('#myCanvasContainer').hide();
  }
  // your other jQuery stuff here...
});
</script>

またtagcanvas() はタグのリストのコンテナのIDをオプション引数として受け付けます。

...
$('#myCanvas').tagcanvas({
  depth : 0.75
},'tagList');
...

この関数は開始に成功した場合trueを、そうでない場合はfalseを返します。 これはエラーをハンドルしてキャンバスと何かべつの物を交換したり、あなたのしたい処理をするために利用できます。

上記の例ではTagCanvasが失敗した場合 キャンバスコンテナ要素を非表示にするので注意してください。 キャンバスをサポートしないブラウザで実行した場合、 キャンバス自体が応答しない場合があります。

キャンバス自身はページの一部なので、CSSでスタイルを指定することができます。 例えばボーダー、マージン、背景を指定する場合などは TagCanvasがキャンバスを背景に描画しているわけではないので ページの背景色やイメージが透けて見えます。

個々のタグは描画関数を用いてキャンバス上に描画されます。 そのためCSSを使ったスタイルの設定ができません。 いくつかのオプションは、それらがオプションページに記載され、 描かれるべきかを指定するために提供されています。

目次

このページ

inserted by FC2 system