Index > JavaScriptとswfを組み合わせて六角形をブラウザ上で描画
Tue, June 2, 2009

JavaScriptとswfを組み合わせて六角形をブラウザ上で描画

マインドマップやコスモマップ、ロジカルシンキングなど、思考術の多くは イラストを使いますが、それをウェブ上で表現するのは、あまり簡単ではありません。

今回、N2法の六角形を使った思考術の例で、 swf(ActionScript)とjavascriptを組み合わせたブラウザ上での表現に 挑戦してみます。

実装方法

Flash8以降に備わっている ExternalInterface という仕組みを使って JavaScript経由でFlashで描画指定をすることで、結果として この例のような描画を実現します。

safari,firefox,opera等で使える canvas でも同じようなことができますが、 この方法では以下のメリットあり。

IEでも、excanvas.js を使う方法があり、それを考慮すれば、 canvasが使えるブラウザは Flash に匹敵すると思いますが、 やはり微妙に振る舞いが違っていたりして仕事には使いづらい。

HTMLコード

以下のようにHTML中に描画用データを記述しておきます。 後述する JavaScript でこれらデータを読み取って、Canvas.swf を使って六角形描画します。

<div id="placeholder"></div>
<div style="visibility:hidden;">
<ul>
<li id="text0" fontsize="18">6カ国協議</li>
<li id="text1">北朝鮮</li>
<li id="text2">日本</li>
<li id="text3">アメリカ</li>
<li id="text4">中国</li>
<li id="text5">韓国</li>
<li id="text6">ロシア</li>
</ul>
</div>

<script>
buildCanvas("placeholder");
</script>

Canvas.swf

これは、O'reillyの JavaScript 5thEdition の22.6 Flashによるグラフィックを ほぼ流用しているので、そちらをご覧ください。

そこに載っている例をそのまま試したところ、 ロードのタイミングによってはCanvas.swfによる描画がうまく作動しなかったため、 swfがロードされてから、JavaScriptが動くように、 Canvas.asの main() 関数内で、以下のように canvasLoaded をコールしておき、

static function main() {
    var canvas = new Canvas();
    ExternalInterface.call("canvasLoaded", "");
}

HTML側のJavaScriptで、canvasLoaded関数が呼ばれた後、 Canvas.swfを使った描画用JavaScriptコードを動かします。

function canvasLoaded(){
    // do somthing
}

javascript

あとは、Canvas.swf の描画関数をひたすらJavaScriptから呼び出して、目的の描画を作り出します。 この辺は描画対象に応じて泥臭い仕事になります。

六角形の描画は次の二つのJavaScriptで実現。

 Twitter
follow me on Twitter
 Categories