今回は6月に入ったので、ふたご座の絵をアドビ社の Snap.svg ライブラリを使って描いてみました。 前回まで利用していた SVG.js とは以下の点が違います。大きな違いとしては、Snap.svg では HTML に書かれた SVG をライブラリから操作できる点でしょう。つまり、Adobe Illustrator などで作成した SVG 形式のベクトル画をそのまま利用できます。SVG.js の場合は改めてライブラリで SVG を生成する必要がありました。
つい先日、とあるシステムの処理の流れと一部処理のフローチャートを付けた見積り資料を書くことになり、ちょうど良い機会だったので、MarkdownでUML図表が描ける「StackEdit」を使って、オールMarkdownで資料を作成してみた。 いやぁ、打ち込んだテキストがリアルタイムに図表化されていく様は、とても新鮮で、そしてすごく面白かった。資料が出来上がった後の達成感というか、完成した図表を見た時の感動が結構はんぱない。技術系の資料作成でこんな良い体験ができたのは初めてかもしれんな…(笑) ──と、結構感動的な体験ができるMarkdownでのUML図表作成なんだが、せっかくなのでそれの書き方を含めてもう少し突っ込んだTIPSとしてまとめておこうかと思った次第。 Markdown+UML とは? とりあえず、「Markdown+UML」というのは私の造語だ。まぁ、正確に言うなら「UML di
Webアプリケーションが企業においても利用されていくようになると必要になるのがグラフです。膨大なデータを見やすく整形して表示し、トレンドを見つけられるようにしなければなりません。 そのためには多種多様なグラフライブラリを知り、それがどのニーズにマッチするかを把握しておく必要があります。今回はリアルタイム系グラフに向いたEpochを紹介します。 Epochの使い方 エリアグラフ。滑らかな曲線がいいですね。 棒グラフ。 複数のグラフを比較もできます。 線グラフ。滑らかに描けます。 こちらも複数描画できます。 円グラフ。 分布図。 ヒートマップ。リアルタイムにデータを描画していきます。 ゲージ。こういうのも面白いですね。 棒グラフの積み上げ版。 エリアの積み上げ。 折れ線グラフの比較。 Epochはデベロッパーフレンドリー、リアルタイムグラフ、Canvas/SVG両方への対応が特徴となっています
前回はSVGの概要を解説したので、今回はSVGの具体的な書き方をざっくりと見ていきます。 と、その前に前回のおさらいとして、SVGをウェブページで用いる方法を2つにまとめます。 SVGをXMLとして記述し、svgファイル(もしくはdataスキームなど)をobjectタグなどで埋め込むか、もしくはXHTMLを用いてHTMLに埋め込む(Firefox 4.0betaやIE9ppなどはHTML(XHTMLでない)に直接記述することも可能) JavaScriptから動的にSVGを作る SVGをXMLとしてあらかじめ記述しておく方法は画像フォーマットとしても利用できますし、InkScapeのようなグラフィカルなインターフェースで作成したものを表示するのに向いています。一方、JavaScriptでSVGを描画する方法は動的に図を描けるので、データを元にグラフを描くといったケースに適していますし、Rap
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く