LotusNotesな日々IBM社のLotusNotesに関係する何かを日々語ってるようなきがしないでもないブログです。 

スポンサーサイト

   ↑  --/--/-- (--)  カテゴリー: スポンサー広告
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

(記事編集) http://mesosune.blog123.fc2.com/?overture" target="_new

--/--/-- | Comment (-) | HOME | ↑ ページ先頭へ |

適用実験シリーズ? - NotesにCanvas(ExplorerCanvas)を適用してみよう!

   ↑  2008/03/19 (水)  カテゴリー: Notes(その他)
「ExplorerCanvas」というJsライブラリを使用してNotesWebで図形(グラフ)をダイナミックに表現しよう!

ブラウザ上に図を描くために策定された仕様のCanvasは、もともとはIE以外で使用できるマップ用の規格。
その規格をIEでも使用可能にしてみよう!というものが「ExplorerCanvas」です。
もともとが図形がかけるっていうものなのでグラフ以外にもいろいろな使い道があります。
日本語を確実に表現できるっぽいので、業務に活用できるかなぁと。

FlashやJavaのようにプラグインを使わずに、JavaScriptベースで図を描くことができる。
 = ダイナミックなグラフ表現が可能になる。ってことで。

※使用条件
Internet Explorer 6以上、Firefox 1.5以上、Opera 9以上、Safari 1.3以上

今回参考にしたサイトさん
HTML5.JPさん
■基本ライブラリの適用
  1.ダウンロードして、内容をコピーしてNotesのライブラリにぺたり。
2.フォームに1.で作成したライブラリを適用。
  3.フォームにベタがきでサンプルJsをかいて適用。
  4.表示してみる

4.まで普通にできました。
まったく重さも感じません。とっても良い感じです。
(画面をおみせできないのが残念です)

これでNotesWebでもHTML上で図形を表示できるということがわかりました。
Domino(サーバサイド)で数値のところだけかわるようにすれば、
ダイナミックなグラフ表現ができるってもんです。

しかし、基本ライブラリだけでは描写処理を記載するのは面倒です。
実際に使用する際は拡張させることをお勧めします。
というわけで、次は拡張ライブラリの適用です。

■拡張ライブラリの適用
フォーム一個につきひとつしかJavaScriptライブラリを適用できないので、
小手先でちょっと一工夫(?)します。

  1.HTML5.JPさんの「ライブラリ」から拡張したい形のグラフを選択してダウンロード
  2.Notesのさっき適用したJsライブラリ(ExplorerCanvas)にグラフ用のJsライブラリの内容を付け足す形で貼り付ける。
  3.フォームにサンプルで記載されているグラフ作成用のJsとHTMLを記述。
4.表示してみる。

4.まで非常に簡単にできました。
基本ライブラリと同じく重さをまったく感じません。
日本語も普通に表示されています。
とっても良い感じです。

HTML5.JPさんの「ライブラリ」によると
カテゴリを10こまでしか表示できないらしいのですが、10個もあれば十分ですよね。
(※カテゴリの文字を大きくしすぎると、表示が崩れるらしいので注意)

すばらしい!!の一言につきます。
本当に画面をお見せできないのが残念。

■グラフ関係拡張ライブラリ
・WebFx(ExplorerCanvas)
・Chart Plugin(jQuery)
・flot(jQuery)
・Plotr(prototype.js)
スポンサーサイト

(記事編集) http://mesosune.blog123.fc2.com/blog-entry-72.html

2008/03/19 | Comment (0) | Trackback (0) | HOME | ↑ ページ先頭へ |

Comment

コメントを投稿する 記事: 適用実験シリーズ? - NotesにCanvas(ExplorerCanvas)を適用してみよう!

お気軽にコメントをぞうぞ。
非公開 (管理人のみ閲覧可能なコメント) にしたい場合には、ロック にチェックを入れてください。

  任意 : 後から修正や削除ができます。
  非公開コメントとして投稿する。(管理人にのみ公開)
 

Trackback

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。