ITエンジニア/デザイナ向けにオープンソースを毎日紹介

デザイン - ドローの記事一覧

プレミアムユーザー限定記事

MOONGIFTプレミアムは、月額500円の有料サービスです。詳細はこちらから

もっと見る

List

  • 2017/07/10

kingraph - 家系図/組織図ジェネレータ

組織図であったり、家系図といった図を描こうと思ったらどんなツールを使っているでしょうか。ドローツールも使えますが、編集したりするのが面倒だったりします。Excel職人の方はやはりExcelを駆使して作り上げてしまうかも知れません。今回はWebベースで使える家系図を作れるkingraphを紹介します。## kingrap...

List

  • 2017/03/25

macSVG - macOS用のSVGエディタ

SVGがいくらテキストベースだといっても、手入力で作成しようと考える人はまずいないでしょう。専用のドローソフトウェアがなかったらとても作ることはできません。かといってその手のソフトウェアは効果なのが常です。そこで使ってみたいのがmacSVGです。GUIで簡単にSVGコンテンツが作成できます。## macSVGの使い方新...

List

  • 2016/11/26

Hotdraw.js - JavaのHotdrawをJavaScriptにポーティング

Javaはサーバサイドだけでなく、デスクトップ開発でも利用できます。速度面などに難があって利用は伸びませんが、かつては多くのデスクトップソフトウェアがJavaで作られていました。そんなJavaには多くの先進的試みがありました。JHotDrawというJavaによる2Dドロー技術もその一つで、今回紹介するHotdraw.j...

List

  • 2016/11/15

JointJS - 多彩な図を描けるJavaScriptライブラリ

Web上での表現力を向上させるためのライブラリが多数存在します。多くはグラフを描くものであったり、より複雑なチャートを描くものです。さらにWebGLを使ったり、Canvasに複雑な描画を行うものもあります。今回紹介するJointJSはCanvas上に図形を描くのですが、JavaScriptと連携したインタラクティブな図...

List

  • 2016/10/08

g9 - インタラクティブなWebグラフィックスを実現

HTML5によってWeb上での表現力が高くなり、これまでFlashなどを使わないとできなかったようなアニメーション表現がWeb標準だけで実現できるようになっています。とは言え、ただアニメーションするだけでは面白くありません。面白いのはよりインタラクティブな、マウスやキーボードを使って自分で操作できるものでしょう。今回は...

List

  • 2016/09/23

markerPen - Web上で使えるマーカーペン

Webサイトのデザインで修正点を指摘したいと思った時にどうしていますか。テキストで書いても伝わりづらいです。そのため、印刷してペンで書き込んで渡しているでしょうか。または画像編集ソフトウェアや、PowerPointに貼り付けてドローしてくる人もいます。そんな方々に使えそうなのがmarkerPenです。Web上で使えるマ...

List

  • 2016/08/24

ImageMaps - Naver製。地図画像の編集ツール

地図は地図のまま利用するのではなく、多くの場合その上にアイコンを載せたり線を描いたりします。そうすることで目的の場所を目立たせたり、駅などから目的地へ移動しやすくなるでしょう。今回紹介するのはImageMaps、地図の上にアイコンなどを載せられるjQueryプラグインです。## ImageMapsの使い方編集画面です。...

List

  • 2016/06/13

atrament.js - スムーズな線の描けるドローソフトウェア

今なお個人的に好きなソフトウェアがSkitchです。Evernoteに買収されてしまいましたが、一番シンプルで使いやすかったバージョン1系を未だに使っています。何よりいいのがマウスで線を描いたとしても滑らかな曲線に置き換えてくれる機能です。そんなSkitchを彷彿とさせるソフトウェアがatrament.jsです。Jav...

List

  • 2016/03/13

Drawingboard.js - 自分のサイトに埋め込めるドローライブラリ

Canvasの利用例として、ドローイングはよくあります。その多くはドロー機能メインのWebサイトで、コラボレーションしたり、画像として保存できるものになるでしょう。しかし皆がみんな、ドローイングサイトを作りたい訳ではありません。そこで使ってみたいのがDrawingboard.jsです。自分のサイトに組み込んで使えるドロ...

List

  • 2015/11/16

shaky box and lines CoffeeScript - shakyを使ってアスキーアートから手書き風ドローへ

きっちり正確なドローイングを描くライブラリを使うと、ついつい内容まで正確性を求めるようになってしまいます。プロトタイプやブレインストーミングレベルであればもっと粗雑に、ラフに書く方が都合が良かったりします。そんな訳で使ってみたいのがshaky box and lines CoffeeScriptです。アスキーアートレベ...

List

  • 2015/09/10

Curve App - 手軽に使えるSVGでドローアプリ

ベジュ曲線などを使ったドローイングをやろうと思うとIllustratorやInkscapeのような特別なソフトウェアを使わないといけない気がしてしまいます。それこそ覚えるのに何日もかかるでしょう。そこで使ってみたいのがCurve Appです。機能は決して多くありませんが、シンプルなUIですぐに使いこなせるドローアプリで...

List

  • 2015/06/01

Etherdraw - コラボレーション・ドローイング・ソフトウェア

Webの面白さはコラボレーションにあります。同じようなアプリケーションでもコラボレーション機能を追加することで全く違う魅力が出るということがたくさんあります。Etherpadと呼ばれるコラボレーションテキストエディタもその一つです。今回はそのEtherpad開発チームが作ったEtherdraw

List

  • 2014/12/06

Mirror Draw – Canvasを使って左右反転させてドロー

人はモノを書いている時、それを視認することで正しく書けるというのを聞いたことがあります。例えば鏡を使って左右反転するようにしつつ、それを見ながら文字や絵を描くのはとても難しいようです。そういった目的があるのかは分かりませんが面白いWebアプリケーションがMirror Drawです。Canvasでマウスを使って描いた絵を...

List

  • 2014/10/25

draw.io – VisioライクのドローWebアプリケーションがコード公開!

プロジェクトマネージャやリーダーがよく使うソフトウェアにVisioがあります。ネットワーク図、システム概要図などをまとめる際にはVisio Professional以上のステンシルが必要で、ちょっとした図を描くために購入するのを控えてしまう人も多いのではないでしょうか。そんな方にお勧めしたいのがdraw.ioです。Vi...

List

  • 2014/03/25

vsd2svg - VisioのファイルをSVGに変換!

これは便利かも!こった図を描こうと思ったらよく使われるのがMicrosoft Visioです。しかし作成側としては良くとも、閲覧する側がソフトウェアが必要なのは面倒です。専用ビューワもありますが、そもそもインストールしたくない人は多いはずです。そこで使ってみたいソフトウェアがvsd2svgです。Visioのファイル、V...

List

  • Premium_s 2014/03/18

使えるWebサービス・オープンソース(23)「Visio代替」

今回はVisio代替がテーマです。エンジニアの中では有益とされつつもその高価格が知られるVisio。一番低価格なモデルにはエンジニアが使いたいと思えるステンシルがなく、価格の高いProfessionalを選ばざるを得ません。そこで今回は高価なソフトウェアを買わずに済む代替ソフトウェア、サービスを紹介します。もちろんVi...

List

  • 2014/02/26

SVG Floorplan Editor - HTML5で実現するフロアマップエディタ

SVGといえばWeb上でベクターベースの描画を可能にしますが、その使い方はまだまだ模索中と言ったところでしょう。画像の代替として使おうと思ってもサポートされているブラウザやその対応負荷が大きくなかなか取り組めないと思います。そこで一案として面白そうなのがWeb上で実際にドロー自体させてしまうというものです。そんなソフト...

List

  • 2014/01/31

Mondrian - Webでここまで。node製ドローアプリ

デモがあるのでぜひ触ってみてください!Webアプリケーションはどんどん進化しており、これまでローカルでしかできなかったことがWeb上でやすやすと実現されていきます。そんな中にあっては大抵のことは驚かない訳ですが、それでも時におお、と思わされるソフトウェアに出会います。今回紹介するMondrianもその一つです。Webア...

List

  • 2014/01/30

Asciiflow – アスキーアートを作れるドローソフトウェア

とりあえず触ってみるよろし!アスキーアートはいつの時代も人気です。2ちゃんねるのAAはもちろん、海外でも様々なテキストコンテンツでアスキーアートが使われています。日本とはまた違う趣があります。そんなアスキーアートをビジュアル的に作れてしまうソフトウェアがAsciiflowです。さて何ができるのか実際に見てみましょう。!...

List

  • 2014/01/22

GraphSketcher - グラフを加工してさらに面白く

ああ、こういう加工は良いかも!Omniと言えばドロー系ソフトウェアを数多く出している有名な企業ですが、そこから新しい面白いソフトウェアがオープンソース化されました。それがGraphSketcherです。その名の通りグラフ+スケッチというソフトウェアなのですが、今ひとつ雰囲気が分かりづらいかと思います。しかしこれが非常に...