デザイン - ドローの記事一覧
Draw2D touch - Webブラウザ上でVisio風のドローイングを実現する
開発現場においてMicrosoft Visioは人気のあるソフトウェアです。特にプロジェクトマネージャなどがアーキテクチャを図化したり、データベースのモデリングをしたりするのに使われます。しかし、その使い方に対して価格が非常に高いと感じてしまう方もいるでしょう。そこで使ってみたいのがDraw2D touchです。HTM...
jsPlumb - Web上で情報の関連性を表現
情報の関連性を表現する際にフローチャートが便利です。常に1対1の関係ではなく、分かれたり、交差したりすることもあるでしょう。情報の関連性がビジュアル化されることで、理解度が格段に増します。そこで使ってみたいのがjsPlumbです。情報を接続して表現できるソフトウェアです。## jsPlumbの使い方フローチャートの例。...
jointerJS - HTMLエレメントを線で結ぶ
Web上で図を描く際にはCanvasを使うのが一般的です。しかし、Canvasは通常のDOMとはまったく異なるコーディングが求められるので、書くのは好きではないという方もいるでしょう。そこで簡単な図、ノードを結びつけるようなものを描くならばjointerJSを使ってみましょう。## jointerJSの使い方例です。5...
DrawerJs - Web上で組み込んで使えるドロー
Webサービスの中にイラスト機能を追加したいと思ったことはないでしょうか。掲示板でも使えますし、作業内容を写真と合わせて記録するのにも向いています。テキストで書くのとはまた違った情報が入れられるでしょう。そこで使ってみたいのがDrawerJsです。Webサイトの中に組み込めるドローソフトウェアです。## DrawerJ...
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でマウスを使って描いた絵を...