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

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

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

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

もっと見る

List

  • 2019/07/31

Moveable - マウスでドラッグ/リサイズ/回転を実現

Webアプリケーションとしてドローアプリを作りたい、または一部の機能としてDOMを移動したりサイズ変更するような機能を設けたいと思うことがあります。しかし、DOMをインタラクティブに操作するのは困難です。そこで使ってみたいのがMoveableです。マウスでDOMを簡単に操作できるようになります。## Moveableの...

List

  • 2019/07/24

Pinker - 文字で定義して図に変換

Webが不得意としているものの一つが図(ダイアグラム)でしょう。Canvasを駆使すればできなくもないですが、画像編集ソフトウェアを使って画像として埋め込んでしまう人の方が多そうです。今回紹介するPinkerはJavaScriptのコードからダイアグラムを生成するソフトウェアです。## Pinkerの使い方レイアウトと...

List

  • 2019/06/15

Zdog - SVGやCanvasにドロー

Illustratorなどで描いたキャラクターも、そのままでは単なる絵と変わりません。SVGであれば、JavaScriptを使ってインタラクティブな操作が実現します。そうすれば、画像とは違った楽しみ方が生まれるでしょう。今回紹介するZdogはJavaScriptでイラストを描き、3Dのように回転もできるライブラリです。...

List

  • 2019/06/09

drawgon - Web上でドロー

Web上で絵を描こうと思うとCanvasタグを使って行います。そして、そこに描かれた情報は画像としてダウンロード可能です。しかし、ベクターデータとして(SVGとして)欲しい場合もあるでしょう。そこで使ってみたいのがdrawgonです。Web上で使えるドローイングアプリケーションです。## drawgonの使い方最初にサ...

List

  • 2019/04/18

Kroki - テキストからドローに変換するWeb APIサーバ

プログラマーは図を書くのが嫌いです(たぶん)。少なくともドローソフトウェアを使って書くのは嫌がるでしょう。メンテナンスしづらいですし、コードと図の乖離が発生しがちです。せめてテキストで書いて、自動的に図にしてくれるものであれば、元のテキストを自動生成する方法が選べたり、バージョン管理で差分が取れるようになります。そんな...

List

  • 2019/03/07

Tart - なんと!ターミナル上で動作するドローアプリ

開発に関わる多くのことがCUIでできます。ただ開発するだけであればGUIは不要かも知れません。Webブラウザだけあれば十分という人は多いのではないでしょうか。GUIでないとできなさそうな、ドローアプリケーションですらCUIでできます。それがTartです。## Tartの使い方メイン画面です。!

List

  • 2019/03/02

JS.Sketcher - Web上で3Dモデリング

IoTや3Dプリンタと言った文脈の中でハードウェアが存在意義を増しています。ちょっとしたオリジナルの部品を3Dプリンタで作ったり、IoTプロジェクトのハードカバーを作ったりします。そんな時に必要なのが3D CADになるでしょう。今回はWebブラウザ上で3DモデリングができるJS.Sketcherを紹介します。## JS...

List

  • 2019/01/10

Whitebophir - コラボレーションできるオンラインホワイトボード

遠隔地とミーティングをする際に便利なのがチャットです。テキストや動画を介してコミュニケーションがスムーズに行えます。しかし、イラストなどを相手と共有したい時にはホワイトボードを使うのが便利です。そこで使ってみたいのがWhitebophirです。リモート同士で共有できるオンラインホワイトボードになります。## White...

List

  • 2018/11/05

Dotgrid - ドットを使ったドローアプリ

Illustratorのようなツールを使ってドローを描いてみたいと思ったことはないでしょうか。さすがにあのレベルのソフトウェアを使いこなすのは難しいですが、簡単なドローであっても使いどころは多いはずです。そこで使ってみたいのがDotgridです。ドットの上でドローするのが特徴のソフトウェアです。## Dotgridの使...

List

  • 2018/09/07

Draw2D touch - Webブラウザ上でVisio風のドローイングを実現する

開発現場においてMicrosoft Visioは人気のあるソフトウェアです。特にプロジェクトマネージャなどがアーキテクチャを図化したり、データベースのモデリングをしたりするのに使われます。しかし、その使い方に対して価格が非常に高いと感じてしまう方もいるでしょう。そこで使ってみたいのがDraw2D touchです。HTM...

List

  • 2018/09/07

jsPlumb - Web上で情報の関連性を表現

情報の関連性を表現する際にフローチャートが便利です。常に1対1の関係ではなく、分かれたり、交差したりすることもあるでしょう。情報の関連性がビジュアル化されることで、理解度が格段に増します。そこで使ってみたいのがjsPlumbです。情報を接続して表現できるソフトウェアです。## jsPlumbの使い方フローチャートの例。...

List

  • 2018/08/25

jointerJS - HTMLエレメントを線で結ぶ

Web上で図を描く際にはCanvasを使うのが一般的です。しかし、Canvasは通常のDOMとはまったく異なるコーディングが求められるので、書くのは好きではないという方もいるでしょう。そこで簡単な図、ノードを結びつけるようなものを描くならばjointerJSを使ってみましょう。## jointerJSの使い方例です。5...

List

  • 2018/07/24

DrawerJs - Web上で組み込んで使えるドロー

Webサービスの中にイラスト機能を追加したいと思ったことはないでしょうか。掲示板でも使えますし、作業内容を写真と合わせて記録するのにも向いています。テキストで書くのとはまた違った情報が入れられるでしょう。そこで使ってみたいのがDrawerJsです。Webサイトの中に組み込めるドローソフトウェアです。## DrawerJ...

List

  • 2018/07/17

HTML5 Canvas Drawing App - マウス/タッチ操作に対応したドローアプリ

スマートフォンで文字を入力するのは面倒ですが、画面にタッチ操作できるので指で絵を描いたりするのは簡単です。写真のレタッチであったり、自分が書いた絵をそのままアップロードしたりと絵には様々な使い道があります。今回紹介するのはHTML5 Canvas Drawing App、Webブラウザを使ったドローアプリです。## H...

List

  • 2018/03/27

Rough.js - ラフに図形を描く

コンピュータが描く情報は正確です。しかし、正確すぎるためにちょっとしたずれが気になったりします。直線がほんのわずかに曲がっていたり、二つの線がずれていると直したくなってしまうでしょう。しかしそれによって失われる時間は大きいです。そこで使ってみたいのがRough.jsです。手で書いたようなラフな線を引くライブラリです。#...

List

  • 2017/09/07

drawio-desktop - Electron製。draw.io公式のドローツール

ElectronでWebサイトをラッピングする系統のソフトウェアはとても多いです。限定されたセキュリティ範囲で使えるのは便利ですが、結局のところ単なるガワアプリでしかないという印象があります。そんな中、drawio-desktopは違います。draw.ioがそのままデスクトップアプリケーションになったようなソフトウェア...

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と連携したインタラクティブな図...