グリグリ動く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
ソニーの電子書籍リーダー「Reader」を買った - きしだのHatena
※2012/7/12 21:58 追記 新しいSONY Readerについてはこちらを ソニーの電子書籍端末２代目SONY Reader PRS-T1を買った - きしだのはてな なんか、ヨドバシカメラで実物を見て以来、とても電子書籍リーダーほしくなって、PDF化して捨てれるものはどんくらいあるだろうかと家の本棚を見回すに、かなりの量が減って部屋が広くなりそうだとわかって、まだスキャナやら裁断機もないのに、SONYのReader買ってしまいました。5インチと6インチのものがありますが、買ったのは6インチのものです。 ソニー(SONY) 電子書籍 Reader TouchEdition 6インチ(ブラック) PRS-650-B 出版社/メーカー: Sonyメディア: Personal Computers クリック: 26回この商品を含むブログ (4件) を見る というか、このレビューが詳しす
iPhone Painters Japan: iDraw 1.1.2｜SVGインポート機能追加。Inkpadで作ったイラストもインストール可能に【iPadアプリ】
2011/04/18 iDraw 1.1.2｜SVGインポート機能追加。Inkpadで作ったイラストもインストール可能に【iPadアプリ】 Author: Necojita | Posted at: 4/18/2011 | Filed Under: iPad, アプリ iDrawはベクターグラフィックを作れるiPad向けアプリです。最近のアップデートでSVGファイルのインポートや独自のファイル形式でのエクスポートを利用してDropboxへのバックアップ可能になりました。 Dropbox連携でInkpadとつなごう SVGファイルはIllustratorでも読み込んで編集できる便利なファイル形式。iDrawはそれをiPadでインストールできる初めてのアプリとなりました。 Dropboxを利用してInkpadからもSVG形式で出力しておけば、いつでもiDrawで読み込んで編集できます。
SVGでグラフを生成する·SVGGraph MOONGIFT
SVGGraphはPHP製のオープンソース・ソフトウェア。HTML5が正式に決まり、メジャーなブラウザがHTML5対応を強めている。そんな中、ようやく日の目を見そうなのがSVGだ。技術的には昔からあるものの、対応ブラウザが限られることもあってあまり使われてこなかった。 棒グラフ、円グラフ SVGを使うと幸せなのが、クライアントサイドでレンダリングを行えるということだ。サーバサイドでは画像を生成する必要がなく、XMLベースでベクターデータを出力すれば良いだけだ。そしてSVGを使ったグラフライブラリがSVGGraphだ。 SVGGraphはPHPを使ってグラフを生成する。対応しているグラフは棒グラフ、円グラフ、折れ線グラフ、散布図となっている。棒、円グラフは3D表示にすることも可能だ。画像とは異なり、リンクを埋め込むことができたり、値のツールチップを入れることもできる。 折れ線グラフおよび散布
オンラインでドロー＆SVG保存·Closure Draw MOONGIFT
Closure DrawはJavaScript製のオープンソース・ソフトウェア。最近は何でもWebブラウザ上で動作するようになっている。メール、RSSリーダー、カレンダー、画像編集と何でもござれだ。そんな中、弱めだったのがドロー系アプリケーションだ。 プロジェクトサイトで試せる 元々ローカルアプリケーションでもあまり数の多くないドロー系だけに、Web上で使い勝手の良いものを作るのは難しい。だが幾つか候補が出てきている。一つは先日紹介したSVG-edit、もう一つは日本製のClosure Drawだ。 Closure Drawは直線、円、四角といったオブジェクトの他、文字や画像を埋め込むこともできるWebブラウザ上で動作するドローアプリケーションだ。できあがった図はSVGで出力できるので、保存すれば別なツールで読み込むこともできる。 配置の変更やオブジェクトの移動ができる 描いたオブジェクト
ついに！iPhoneでもFlashが表示できるライブラリ·Gordon MOONGIFT
GordonはJavaScript製のオープンソース・ソフトウェア。iPhoneの最大の欠点とされるのがFlashの表示が未対応という点だ。それによって利用できないサイトがいかに多いことか。今しばらくはAppleの対応は見込めないとあって、我慢の日々が続くだろう。 アニメーションにも対応している だがただ指をくわえて待っていても意味がない。技術者たるもの無理といわれているからこそ挑戦する価値があるのだ。そして一部において問題を乗り越え、見事iPhoneでもFlashを使えるようにしたのがGordonだ。決めてはFlashのSVG化だ。 単なるドローの表示はもちろん、アニメーションについても一部対応している。描画は元のFlashファイルとほぼ変わらず、とても良好な結果だ。もちろん動画や音楽を再生するようなプレーヤレベルはできないが、将来的にはFlashバナー程度ならいけそうだ。 iPhone
見るべし、試すべし！オンラインの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によって刻々と変化するアニメーションやマウスの動きによって
Flashを使ってSVGを表示する·SVG Web MOONGIFT
SVGは次世代のWebブラウザを考える上で重要な技術だ。だが、古いブラウザではサポートされていないこともあって、普及には至っていない。実現可能性という意味ではFlashの方が一歩、二歩先んじている。 FlashでSVGの挙動を再現する それならば、と考えた（恐らく）のがSVG Webだ。FlashがSVGをレンダリングできれば問題は一気に解消する。 今回紹介するオープンソース・ソフトウェアはSVG Web、FlashでSVGをレンダリングするソフトウェアだ。 SVG Webを使うとSVGで提供される文字の装飾や画像の表示、アニメーションなどがFlashで描けるようになる。ブラウザの種類によってネイティブなSVGかFlashによるものかを選択すれば良いだけだ。現状では本来のSVGに比べると若干ノイズがあるように感じられる。 動画の再生も可能 とは言え再現性は非常に高い。殆どのレンダリングが実
文字をJavaScriptで画像のようにレンダリングする·typeface.js MOONGIFT
Webサイトを見ていると、文字を画像に置き換えたサイトを見ることがある。思い描いている見せ方をそのまま表示させたいときなど、デザインを重視するサイトでよく見られる工夫だ。しかし問題はそのメンテナンス性の悪さだろう。 奇麗に文字が表示されるようになる それに適切に説明文を入れておかないと文字読み上げブラウザなどでは何も情報が得られなくなってしまう。そうした煩雑さから解放されるライブラリがこれだ。 今回紹介するオープンソース・ソフトウェアはtypeface.js、文字をSVG画像に変換するJavaScriptライブラリだ。 typeface.jsは指定した文字をそのままcanvasタグを使ったSVG画像に変換する。CSSを使って文字装飾を行うことができ、太字/イタリック/色変更を変更できる。他にもfont-stretch（横幅）、文字間隔、行の高さなどを指定することが可能だ。 選択すると文字全
MOONGIFT: » UMLも描けるデータモデリングツール「Conzilla」:オープンソースを毎日紹介
見える化、なんて言葉が流行ったが元々開発者の世界ではごく当たり前のキーワードだった。目に見えないデジタルな世界を可視化したり、アナログなビジネスの流れをモデリングしたりするのはごく当たり前だ。 サンプルのモデリング 企画を立てたり、思想を膨らませたりするのは個人やグループでディスカッションすることでできるが、その結果を落とし込み、共有するのは何らかのツールを使う必要がある。そんな時に役立つのがこうしたソフトウェアだ。 今回紹介するオープンソース・ソフトウェアはConzilla、コンセプトブラウザという名称のモデリングツールだ。 Conzillaが対応するのはUML（なぜかULMとなっているが）、ダイアログマッピング、RDF、RDFS、DCMITypesとなっている。それぞれオブジェクトが予め登録されており、クリックして配置、線をつないでモデリングしていく。 編集画面。オブジェクトが多数並ん
XUL Apps > Web Map - outsider reflex
Web Map Ver.0.3.2005020801 for Mozilla/Firefox+SVG An English version of this page is also available. これは何？ ダウンロード スクリーンショットと機能紹介 つかいかた 基本操作の一覧（別ページ） 開発の経緯とかよもやま話とか（別ページ） 技術的な情報（別ページ） 更新履歴 What's this? これは何？ 「不思議のダンジョン」シリーズや「ローグ」のように、Webブラウズの足どりをオートマッピングの要領で二次元的に記録・表示し、また、見るだけでなく、ページを移動したり開いたりできる、ビジュアルな履歴として利用可能にする拡張です。「戻る」「進む」や「履歴」サイドバーなどの履歴機能の代替、もしくは補助として利用することを想定しています。 「こんなん珍しないやん、他の類似のソフトウェアと何
MOONGIFT: » Flash用ベクター版3Dエンジン「Vectorvision」:オープンソースを毎日紹介
コンピュータは基本二次元で、三次元を表現するのは難易度が高い。それだけに見た人に与えるインパクトは格段に変わってくるだろう。例えばGoogleマップで見た衝撃と、Google Earthで見た衝撃の違いとでも言えるだろう。 ダイナミックに動く3Dライブラリ 今後、3Dをうまく使ったWebサイトは増えていくだろう。その時にはAjaxなどのJavaScriptベースの技術ではなくFlashを使ったものになるだろう。その際に役立つのがこうしたライブラリだ。 今回紹介するオープンソース・ソフトウェアはVectorvision、ベクターベースの3Dエンジンライブラリだ。 Vectorvisionはサンプルを見てもらえればどういったことができるか貰えるだろう。フォントが空間を漂ったり集結して何かの文字を表示したり、マウスの動きに合わせてインタラクティブに大きさや速度が変わっていく。 このような表現もで
MOONGIFT: JavaScriptで描く2Dの世界「JSViz」:オープンソースを毎日紹介
これは面白い。 SVGは流行りそうな技術ではあるが、なかなかキラーコンテンツが出てこない。利用する場面がうまく思いつかないのと対応ブラウザが限定的（IE6で対応していないのが大きい）なのが問題だ。 だがIE7のシェアが増えれば状況も変わってくるだろう。そうした時代を見越して注目しておきたいのがこのライブラリだ。 今回紹介するオープンソース・ソフトウェアはJSViz、JavaScriptで描く動的なSVGの世界だ。 JSVizではネットワーク図やナビゲーション等を動的に描くことができるライブラリだ。注目なのは、その要素をXMLで定義することで描ける点だ。そして、XMLデータに基づいて、丸い形のポイントが線で結ばれていく。 一気に表示して終わるパターンや、徐々に増えていくもの、動きながら表示されるものなど数多くのパターンがサンプルとして登録されている。マウスでドラッグできるものもあり、こうした
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_02.htm
SVG形式の画像を表示可能にする「Susie」プラグイン「SVG形式Susieプラグイン」NOT SUPPORTED
HTML5などを使ったアニメを作成できる「Adobe Edge」のプレビュー版が無償公開
複数のJPEG/PNG画像をドラッグ＆ドロップでSVG形式に一括変換「P2VJ」NOT SUPPORTED