デザイン - ドローの記事一覧
HTML5 Canvas Drawing App - マウス/タッチ操作に対応したドローアプリ
スマートフォンで文字を入力するのは面倒ですが、画面にタッチ操作できるので指で絵を描いたりするのは簡単です。写真のレタッチであったり、自分が書いた絵をそのままアップロードしたりと絵には様々な使い道があります。今回紹介するのはHTML5 Canvas Drawing App、Webブラウザを使ったドローアプリです。## H...
Rough.js - ラフに図形を描く
コンピュータが描く情報は正確です。しかし、正確すぎるためにちょっとしたずれが気になったりします。直線がほんのわずかに曲がっていたり、二つの線がずれていると直したくなってしまうでしょう。しかしそれによって失われる時間は大きいです。そこで使ってみたいのがRough.jsです。手で書いたようなラフな線を引くライブラリです。#...
drawio-desktop - Electron製。draw.io公式のドローツール
ElectronでWebサイトをラッピングする系統のソフトウェアはとても多いです。限定されたセキュリティ範囲で使えるのは便利ですが、結局のところ単なるガワアプリでしかないという印象があります。そんな中、drawio-desktopは違います。draw.ioがそのままデスクトップアプリケーションになったようなソフトウェア...
kingraph - 家系図/組織図ジェネレータ
組織図であったり、家系図といった図を描こうと思ったらどんなツールを使っているでしょうか。ドローツールも使えますが、編集したりするのが面倒だったりします。Excel職人の方はやはりExcelを駆使して作り上げてしまうかも知れません。今回はWebベースで使える家系図を作れるkingraphを紹介します。## kingrap...
macSVG - macOS用のSVGエディタ
SVGがいくらテキストベースだといっても、手入力で作成しようと考える人はまずいないでしょう。専用のドローソフトウェアがなかったらとても作ることはできません。かといってその手のソフトウェアは効果なのが常です。そこで使ってみたいのがmacSVGです。GUIで簡単にSVGコンテンツが作成できます。## macSVGの使い方新...
Hotdraw.js - JavaのHotdrawをJavaScriptにポーティング
Javaはサーバサイドだけでなく、デスクトップ開発でも利用できます。速度面などに難があって利用は伸びませんが、かつては多くのデスクトップソフトウェアがJavaで作られていました。そんなJavaには多くの先進的試みがありました。JHotDrawというJavaによる2Dドロー技術もその一つで、今回紹介するHotdraw.j...
JointJS - 多彩な図を描けるJavaScriptライブラリ
Web上での表現力を向上させるためのライブラリが多数存在します。多くはグラフを描くものであったり、より複雑なチャートを描くものです。さらにWebGLを使ったり、Canvasに複雑な描画を行うものもあります。今回紹介するJointJSはCanvas上に図形を描くのですが、JavaScriptと連携したインタラクティブな図...
g9 - インタラクティブなWebグラフィックスを実現
HTML5によってWeb上での表現力が高くなり、これまでFlashなどを使わないとできなかったようなアニメーション表現がWeb標準だけで実現できるようになっています。とは言え、ただアニメーションするだけでは面白くありません。面白いのはよりインタラクティブな、マウスやキーボードを使って自分で操作できるものでしょう。今回は...
markerPen - Web上で使えるマーカーペン
Webサイトのデザインで修正点を指摘したいと思った時にどうしていますか。テキストで書いても伝わりづらいです。そのため、印刷してペンで書き込んで渡しているでしょうか。または画像編集ソフトウェアや、PowerPointに貼り付けてドローしてくる人もいます。そんな方々に使えそうなのがmarkerPenです。Web上で使えるマ...
ImageMaps - Naver製。地図画像の編集ツール
地図は地図のまま利用するのではなく、多くの場合その上にアイコンを載せたり線を描いたりします。そうすることで目的の場所を目立たせたり、駅などから目的地へ移動しやすくなるでしょう。今回紹介するのはImageMaps、地図の上にアイコンなどを載せられるjQueryプラグインです。## ImageMapsの使い方編集画面です。...
atrament.js - スムーズな線の描けるドローソフトウェア
今なお個人的に好きなソフトウェアがSkitchです。Evernoteに買収されてしまいましたが、一番シンプルで使いやすかったバージョン1系を未だに使っています。何よりいいのがマウスで線を描いたとしても滑らかな曲線に置き換えてくれる機能です。そんなSkitchを彷彿とさせるソフトウェアがatrament.jsです。Jav...
Drawingboard.js - 自分のサイトに埋め込めるドローライブラリ
Canvasの利用例として、ドローイングはよくあります。その多くはドロー機能メインのWebサイトで、コラボレーションしたり、画像として保存できるものになるでしょう。しかし皆がみんな、ドローイングサイトを作りたい訳ではありません。そこで使ってみたいのがDrawingboard.jsです。自分のサイトに組み込んで使えるドロ...
shaky box and lines CoffeeScript - shakyを使ってアスキーアートから手書き風ドローへ
きっちり正確なドローイングを描くライブラリを使うと、ついつい内容まで正確性を求めるようになってしまいます。プロトタイプやブレインストーミングレベルであればもっと粗雑に、ラフに書く方が都合が良かったりします。そんな訳で使ってみたいのがshaky box and lines CoffeeScriptです。アスキーアートレベ...
Curve App - 手軽に使えるSVGでドローアプリ
ベジュ曲線などを使ったドローイングをやろうと思うとIllustratorやInkscapeのような特別なソフトウェアを使わないといけない気がしてしまいます。それこそ覚えるのに何日もかかるでしょう。そこで使ってみたいのがCurve Appです。機能は決して多くありませんが、シンプルなUIですぐに使いこなせるドローアプリで...
Etherdraw - コラボレーション・ドローイング・ソフトウェア
Webの面白さはコラボレーションにあります。同じようなアプリケーションでもコラボレーション機能を追加することで全く違う魅力が出るということがたくさんあります。Etherpadと呼ばれるコラボレーションテキストエディタもその一つです。今回はそのEtherpad開発チームが作ったEtherdraw
Mirror Draw – Canvasを使って左右反転させてドロー
人はモノを書いている時、それを視認することで正しく書けるというのを聞いたことがあります。例えば鏡を使って左右反転するようにしつつ、それを見ながら文字や絵を描くのはとても難しいようです。そういった目的があるのかは分かりませんが面白いWebアプリケーションがMirror Drawです。Canvasでマウスを使って描いた絵を...
draw.io – VisioライクのドローWebアプリケーションがコード公開！
プロジェクトマネージャやリーダーがよく使うソフトウェアにVisioがあります。ネットワーク図、システム概要図などをまとめる際にはVisio Professional以上のステンシルが必要で、ちょっとした図を描くために購入するのを控えてしまう人も多いのではないでしょうか。そんな方にお勧めしたいのがdraw.ioです。Vi...
vsd2svg - VisioのファイルをSVGに変換！
これは便利かも！こった図を描こうと思ったらよく使われるのがMicrosoft Visioです。しかし作成側としては良くとも、閲覧する側がソフトウェアが必要なのは面倒です。専用ビューワもありますが、そもそもインストールしたくない人は多いはずです。そこで使ってみたいソフトウェアがvsd2svgです。Visioのファイル、V...
2014/03/18
2014/03/18使えるWebサービス・オープンソース（23）「Visio代替」
今回はVisio代替がテーマです。エンジニアの中では有益とされつつもその高価格が知られるVisio。一番低価格なモデルにはエンジニアが使いたいと思えるステンシルがなく、価格の高いProfessionalを選ばざるを得ません。そこで今回は高価なソフトウェアを買わずに済む代替ソフトウェア、サービスを紹介します。もちろんVi...
SVG Floorplan Editor - HTML5で実現するフロアマップエディタ
SVGといえばWeb上でベクターベースの描画を可能にしますが、その使い方はまだまだ模索中と言ったところでしょう。画像の代替として使おうと思ってもサポートされているブラウザやその対応負荷が大きくなかなか取り組めないと思います。そこで一案として面白そうなのがWeb上で実際にドロー自体させてしまうというものです。そんなソフト...