この記事で紹介した手順をライブラリ化して公開しました🎉 こちらの別記事 で使い方など詳しくご紹介していますので、ぜひご参照ください！ 2024/05/07 追記 最新の登壇スライドバージョンはこちらです。 登壇時の様子がYouTubeに上がっているのでよろしければあわせてご覧ください。 はじめに 言い切りタイトルすみません 僕を含む一定数の人にとって現時点でのベストプラクティスとなりうる手法という意味で紹介しています 極めてシビアな帳票出力の世界にいる人から見ると使い物にならない内容かもしれないと思います 帳票印刷の世界では SVF というサービスが有名らしいです。が、こういった外部サービスは使わずに自力で実装するというのがこの記事の前提です 動的に明細行の数が増減する連票はこの記事の解説では考慮していませんが、追加で実装するのはそれほど難しくないということは読んでいただければ分かるかな
こんにちは！ Cacoo チームの中原です。現在CacooチームはFlashで作られている図の編集画面(以下エディタと表現します)を* HTML5 で置き換える開発を進めています。このブログでは、 HTML5 版 Cacoo で図形の描画に使用される、SVGを選択した理由と経緯について説明したいと思います。 （*置き換える理由については「Good-Bye Flash ~ CacooはHTML5で生まれ変わります」をご覧ください） どの技術を使って図形を描く?重視したのは「パフォーマンス」 図形の描画にどんな技術を使うか。いくつか候補を上げました。 2D Canvas 3D Canvas (WebGL) SVG (これ以外に、Unityという意見もありましたが今回はWeb標準技術を使うことを前提にしました。) さて、どれを使おう。私たちがどの技術を選択するのか、基準を決める必要があります。そ
フローチャートなどの高度なグラフを描こうと思った時に使われるのがGraphvizです。テキストベースで記述していくだけでできるというのはやはり手軽です。しかしローカルソフトウェアをインストールしたり、セットアップしたりするのは面倒と感じる人も多いでしょう。 そこでさらに再利用性を高めてくれるのがViz.jsです。WebベースでGraphvizを使えるようにしてくれます。可能にするのはまたしてもEmscriptenなのですが、面白さを体感してください。 例として以下のようにGraphvizのDOT言語をそのままscriptタグに記述します。 <script type="text/vnd.graphviz" id="cluster"> digraph G { subgraph cluster_0 { style=filled; color=lightgrey; node [style=fill
概要 JavaScriptでSVGを描画するライブラリRaphael.jsを使って、 操作可能なレーダーチャートを描画するライブラリ Raphael Radar を作りました。 Raphael Radar は次の2つの機能を持ちます。 レーダーチャートをSVGで表示 レーダーチャートの各軸の値をフォームと対応づけて、インタラクティブに値を選択 (2)の機能は任意で無効化して単純なレーダーチャートとして利用することもできます。 入手と使い方 依存ライブラリ Raphael Radar を使う前に、2つのライブラリをインストールする必要があります。 Raphael.js (1.3.1 以降) jQuery (1.4.2 以降) もしうまく動作しない場合、Raphael.jsとjQueryのバージョンを合わせてみてください。 インストール方法 上記の依存ライブラリをインストール Raphael
Internet Explorer 9では、Webブラウザ上にベクター形式で画像を描画できるSVG（Scalable Vector Graphics）のサポートが表明されています。ITproの記事「IE9の登場で画像フォーマットの本命に浮上するSVG」では、IE9がSVGをサポートすることでSVGの普及が始まるのではないかと予想しています。同意します。 SVGはHTML、CSS、JavaScriptと並ぶWebの要素に SVGは2001年にバージョン1.0、2003年にバージョン1.1がW3Cの勧告として策定されました。しかしマイクロソフトはIE6、IE7、IE8とずっとSVGに対応せず、一方でSVG策定以前から同社などが推進していたVML（Vector Markup Language）と呼ばれるベクター形式の言語を実装してきました。 Webブラウザで最大シェアを持つIEで使えないSVGは
3月中旬、米国ラスベガスで開催されたマイクロソフトの技術カンファレンス「MIX10」でInternet Explorer（IE）の次期バージョンIE9の概要が発表された。そこで、JavaScript実行速度の向上など、IE9における様々な強化点が発表された（関連記事）。中でも、筆者が関心を持ったのはHTML5への対応で、特にSVGの標準サポートを正式表明した点に興味を覚えた。 SVGとはScalable Vector Graphicsの略で、画像を扱うためのフォーマット形式である。JPEGやGIFなどと同じようなものと考えればよい。ただし、JPEGやGIFがラスター方式と呼ばれる画像を細かいドットで表す方式を使っているのに対し、SVGはベクター形式と呼ばれる画像を構成する線の位置や関係といった情報で表す方式を使っている点が異なる。ベクター方式を使うことで、画像サイズが携帯電話のような小さな
Closure DrawはJavaScript製のオープンソース・ソフトウェア。最近は何でもWebブラウザ上で動作するようになっている。メール、RSSリーダー、カレンダー、画像編集と何でもござれだ。そんな中、弱めだったのがドロー系アプリケーションだ。 プロジェクトサイトで試せる 元々ローカルアプリケーションでもあまり数の多くないドロー系だけに、Web上で使い勝手の良いものを作るのは難しい。だが幾つか候補が出てきている。一つは先日紹介したSVG-edit、もう一つは日本製のClosure Drawだ。 Closure Drawは直線、円、四角といったオブジェクトの他、文字や画像を埋め込むこともできるWebブラウザ上で動作するドローアプリケーションだ。できあがった図はSVGで出力できるので、保存すれば別なツールで読み込むこともできる。 配置の変更やオブジェクトの移動ができる 描いたオブジェクト
WebOS Goodies へようこそ！ WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。 先々週、 Python Hackathon #3 でのハンズオンの題材として 簡易ドローツールを公開しましたが、せっかくなのでもう少し実用的なものに発展させて、 Closure Draw というライブラリとして公開しました。特徴・機能は以下のとおりです。 長方形、楕円、テキスト、画像、直線パスを描画。 図形の移動、回転、削除、重なりの順序変更。 パスの頂点の編集。
2010/01/14 Webブラウザ上のJavaScript環境でFlashのランタイムを実装したオープンソースプロジェクト「Gordon」が1月14日にGitHub上で公開された。開発したのはミュンヘン在住のTobis Schneider氏で、MITライセンスでライブラリを配布している。GordonはSWF3アクションモデルをサポートしていて、ActionScript 2のVMも今後のリリースに含む予定という（対応タグ一覧）。 GordonはFirefox、Chrome、Safari、それにiPhone上のMobile Safariなどで動作している。＠IT編集部で試したところ、サンプルとして付属する3つのswfファイルはChrome上で問題なく表示でき、アニメーションすることも確認できた（デモはここ）。本家のFlash 10よりやや遅いという程度で十分実用的な速度。iPhone 3G上
あの処理がこのWebブラウザでも動いたら……デベロッパにとって、Webアプリケーションのクロスブラウザ対応化は頭を悩ませる作業のひとつ。最近ではさまざまなAjaxフレームワークが登場しクロスブラウザでの実装も楽になってきたが、このたびひときわ違ったアプローチを試みるAjaxフレームワークがリリースされた。レイアウトをXMLベースで記述し、XULやSVGをもクロスブラウザで動作させるライブラリ「Ample SDK」とは何か? Ample SDKはClientside OY社が開発/公開しているAjax GUI Frameworkライブラリ。Ample Runtimeと呼ばれる独自のランタイムを使用し、DOM CoreやDOM XPath、XInclude 1.0、SVG 1.2 Tiny、XUL(XML User Interface Language)といった機能をクロスブラウザで実現する(
Ernest Delgado Ernest Delgado氏がCanvasやそれ以外のレンダリングを使った場合のパフォーマンスの違いについて興味深いデモンストレーションを公開している。CanvasはHTML5で正式に導入が計画されているダイレクトグラフィック描画用要素。Canvas要素を使うことでWebブラウザ側でダイレクトリにグラフィックが描画できるようになり、従来の方法と比較してパフォーマンスが向上するほかより表現力豊かなWebアプリケーションの開発が可能になると期待されている。 Ernest Delgado氏が公開したDrawing polygons performanceはもともとCanvasの描画性能がほかの方法と比較して優れていることを示そうとしたものだが、その結果は同氏が期待していたものとは異なるものとなった。今後採用する技術の選定として興味深い結果だ。 試験で使われたのはG
Webサイトを開発する中で、グラフを希望するケースは多々ある。同じデータではあっても、数値を一覧してあるのとグラフ化されているのとではインパクトが全く変わってくるからだ。 棒グラフの例 だがそのためにライブラリや、サービスを立ち上げたりするだろうか。日本語表示などで問題が発生することも多々ある。そうした不安から解放される方法はこれだ。 今回紹介するオープンソース・ソフトウェアはPlotKit、JavaScriptベースのグラフ生成ライブラリだ。 JavaScriptであれば、クライアントベースで完結する。これなら手軽に実装できることは間違いない。PlotKitではCanvasやSVGを使ってグラフ生成を可能にしている。対応ブラウザはCanvasがSafari 2以上、Opera9以上、Firefox 1.5以上、IE6（エミュレーションモード）で、SVGはOpera9以上、Firefox1
これは面白い。SVGはベクターグラフィックス言語として有力なのだが、プラグインが必要とあっていまいち流行らない。特に問題なのはブラウザでもっとシェアがあるIEで標準サポートされていないことだろう。 そこで、プラグインなしでもSVGが表示できるこちらのライブラリを紹介しよう。 今回紹介するオープンソース・ソフトウェアはSIE、プラグインなしでSVGを表示するJavaScriptライブラリだ。 全てのSVGに対応する訳ではないようだが、それでも表示できるものがあるのが素晴らしい。SIEを使えば、サイト上で存分にSVGの魅力を表現できそうだ。 標準のままでは表示不可 使い方は簡単で、SIEを読み込み、「<object data="Svg.svg" type="image/svg+xml" width="180" height="200"></object>」といった具合にimage/svg+xm
VMLについて調べていたらSVGVML3Dというライブラリを発見しました。 SVG-VML-3Dは、IE用にVML、その他ブラウザ用にSVGで3Dを表現できるように書かれたライブラリです。 かなり良く出来ているJavaScriptライブラリで、三次元画像を作り出すだけではなく、どのオブジェクトがクリックされたかまでEventで拾えるようになっています。 まだ、あまりライブラリの中身を詳しく読んでいませんが、とりあえずサンプルコードをいじってグルグルまわるようにしてみました。 IE、Firefox、Operaで試してみました。 VMLとSVGを勉強しないとなぁ。。。
先日のエントリーで少し触れたが、アップルがSafariに導入してから、Webkitは当然ながら、Firefox、Operaにも標準採用されて一気に業界標準になりつつあるcanvas。iPhone上のSafariでも使えるし、Googleが先日発表したandroid上のブラウザーでも使えるとなれば、私としては色々とやってみたくなるのは当然。 問題は、同じく「ブラウザーにベクター・グラフィックスを追加する」という役目を果たすはずだったSVGの存在がこれで怪しくなってきたこと。そもそもが、FlashキラーとしてAdobeが全面的に押していたSVGの戦略的な価値が、AdobeによるMacromediaの買収でなくなってしまったところに合わせた様に来たcanvasの対等。一気に形成が逆転だ。 SVG派の人たちに言わせると、「SVGは既に業界標準だし、記述型でないcanvasはJavascriptとの
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
