グリグリ動くUIをVueとSVGでサクッと書く - No Regrets in Bathing
これは Vue.js #3 Advent Calendar 2017 – Qiita 4日目の記事です。 こんにちは。SVGで色々なコンポーネントを作っているものです。最近の作品は下記のような感じです。 Webでグリグリ動くUIを作りたい！！という一心でやっています。 これらはほとんどSVGとVueの組み合わせのみで作っています。依存が少ないというのは大事で、ライブラリ間の相性でハマったり、いろんなドキュメント間を往復することがなくなります。 Webでグリグリ動くUIを作るのは基本的にめんどくさいです。jQuery pluginを駆使して作るのも闇が多いですし、divやcanvasをゴリゴリするのも結構手間がかかります。 ですが、最近はSVGで高度なUI実装されることが増えてきた気がします。特に自分が衝撃を受けたのは、CacooがFlashからSVGにスイッチしたことです。 nulab-i
オンラインでドロー＆SVG保存·Closure Draw MOONGIFT
Closure DrawはJavaScript製のオープンソース・ソフトウェア。最近は何でもWebブラウザ上で動作するようになっている。メール、RSSリーダー、カレンダー、画像編集と何でもござれだ。そんな中、弱めだったのがドロー系アプリケーションだ。 プロジェクトサイトで試せる 元々ローカルアプリケーションでもあまり数の多くないドロー系だけに、Web上で使い勝手の良いものを作るのは難しい。だが幾つか候補が出てきている。一つは先日紹介したSVG-edit、もう一つは日本製のClosure Drawだ。 Closure Drawは直線、円、四角といったオブジェクトの他、文字や画像を埋め込むこともできるWebブラウザ上で動作するドローアプリケーションだ。できあがった図はSVGで出力できるので、保存すれば別なツールで読み込むこともできる。 配置の変更やオブジェクトの移動ができる 描いたオブジェクト
見るべし、試すべし！オンラインのSVGエディター·SVG-edit MOONGIFT
SVG-editはWebベース/JavaScript製のオープンソース・ソフトウェア。時々こういうソフトウェアに出くわすからオープンソースの紹介は止められない。オンラインで動作するWebアプリケーションは多数存在し、画像編集すらオンラインで行えるようになっている。 オンラインでSVGを作成、編集！ そういったソフトウェアは大抵Flashを使って動作する。だがSVG-editは違う、JavaScriptのみで動作するのだ。jQueryを用いたソフトウェアになっており、Webブラウザ上でSVGファイルを編集、作成できるようになっている。 まるで画像編集ソフトウェアのようなインタフェースをもち、右側に並んだツールアイコンを使ってドローができる。文字を書いたり、円や四角を描くこともできる。直線や自由線を描き、色を変更することだって可能だ。オブジェクトは描画後にドラッグして移動したり回転させることも
クロスブラウザでXUL/SVGを実現するフレームワーク·Ample SDK MOONGIFT
Ample SDKはJavaScript製のオープンソース・ソフトウェア。JavaScriptはAjaxが登場して以来、一気に進化を遂げた。Prototype.jsやjQueryを使えばインタラクティブなアクションが可能なWebサイトが簡単に構築できる。そうしたライブラリはプラグインによって細かく分割された機能をもっているのが特徴だ。 XULによる画面定義 だが自分の目的にあったプラグインがあれば良いが、ないと自分で作ったり探す羽目になる。Ample SDKであればその使い方を覚えてしまえば一つのライブラリで済むのが利点と言えそうだ。リッチなインタフェースや操作を可能にする各種機能が盛り込まれている。 機能は数多いが、例えばリサイズしたりドラッグアンドドロップを実現するオブジェクトを簡単に作ることが出来る。さらにマウスオーバーで枠の色が変わるデモやJavaScriptのアクションをブラウザ
SVGを使ったものすごいグラフライブラリ·dygraphs JavaScript Visualization Library MOONGIFT
dygraphs JavaScript Visualization LibraryはJavaScript製のオープンソース・ソフトウェア。グラフライブラリは多数あれど、大抵は円グラフや棒グラフなどのシンプルなグラフを描く機能しかない。高度なグラフを描こうとすると利用できるライブラリは途端に少なくなる。 高機能なグラフライブラリ また高度なグラフはクライアントサイドだけでなく、サーバサイドの仕組みが必要になることも多い。そんな中dygraphs JavaScript Visualization Libraryはとても簡単に使えるグラフライブラリになっている。JavaScriptでSVGを描いてグラフ化するのだ。 主なグラフはX-Y軸を持った折れ線グラフになるようだ。とはいえ測定範囲を含んだグラフを描いたり、グラフの一部をマウスを使って拡大する、マウスオーバーすると値が表示されるなど高度な機能
SVG + VMLのJavaScriptグラフィックスライブラリ·Raphaël MOONGIFT
SVGは技術的に注目を集めていても実際に利用されている場面はそう見かけない。ブラウザ上でドローを描くだけであれば、画像で十分という話であるし、アニメーションを必要とするならFlashがあるからだ。かつIE6をはじめとするレガシーなブラウザで動作しないという最大の問題がある。 だがFlashに比べれば扱いやすく、テキストベースなのでシステムとの親和性も高い。また画像とは違いインタラクティブな動作ができる。そんなSVGの利用を推進するのがRaphaëlだ。 今回紹介するオープンソース・ソフトウェアはRaphaël、JavaScriptのグラフィックスライブラリだ。 RaphaëlはSVG、VML、JavaScriptを使ったグラフィックスライブラリだ。グラフやSVG、様々なオブジェクトを描き出すことができる。もちろんJavaScriptによって刻々と変化するアニメーションやマウスの動きによって
文字をJavaScriptで画像のようにレンダリングする·typeface.js MOONGIFT
Webサイトを見ていると、文字を画像に置き換えたサイトを見ることがある。思い描いている見せ方をそのまま表示させたいときなど、デザインを重視するサイトでよく見られる工夫だ。しかし問題はそのメンテナンス性の悪さだろう。 奇麗に文字が表示されるようになる それに適切に説明文を入れておかないと文字読み上げブラウザなどでは何も情報が得られなくなってしまう。そうした煩雑さから解放されるライブラリがこれだ。 今回紹介するオープンソース・ソフトウェアはtypeface.js、文字をSVG画像に変換するJavaScriptライブラリだ。 typeface.jsは指定した文字をそのままcanvasタグを使ったSVG画像に変換する。CSSを使って文字装飾を行うことができ、太字/イタリック/色変更を変更できる。他にもfont-stretch（横幅）、文字間隔、行の高さなどを指定することが可能だ。 選択すると文字全
MOONGIFT: JavaScriptで描く2Dの世界「JSViz」:オープンソースを毎日紹介
これは面白い。 SVGは流行りそうな技術ではあるが、なかなかキラーコンテンツが出てこない。利用する場面がうまく思いつかないのと対応ブラウザが限定的（IE6で対応していないのが大きい）なのが問題だ。 だがIE7のシェアが増えれば状況も変わってくるだろう。そうした時代を見越して注目しておきたいのがこのライブラリだ。 今回紹介するオープンソース・ソフトウェアはJSViz、JavaScriptで描く動的なSVGの世界だ。 JSVizではネットワーク図やナビゲーション等を動的に描くことができるライブラリだ。注目なのは、その要素をXMLで定義することで描ける点だ。そして、XMLデータに基づいて、丸い形のポイントが線で結ばれていく。 一気に表示して終わるパターンや、徐々に増えていくもの、動きながら表示されるものなど数多くのパターンがサンプルとして登録されている。マウスでドラッグできるものもあり、こうした
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5などを使ったアニメを作成できる「Adobe Edge」のプレビュー版が無償公開