デザイン - ドローの記事一覧
X6 - Web上にSVG出力するドローライブラリ
Web上で図を描きたいと思うことはよくあります。しかし使い勝手の良いものがないので、ドローツールやプレゼンツールで作ってしまいます。しかし画像なので後で編集するのが面倒だったりします。そこで使ってみたいのがX6です。アニメーションまでサポートしたドローライブラリです。## X6の使い方こんな感じのドローが簡単にできます...
Pencil.js - インタラクティブな2Dオブジェクトライブラリ
Web上で2Dのオブジェクトを描くとなると、途端に敷居が上がります。CanvasやSVGを使うことで2Dオブジェクトは描けますが、星の形を描くのすら苦戦するでしょう。さらにそれをJavaScriptと連携させるとなると大変です。そこで使いたいのが専用のライブラリです。今回はPencil.jsというCanvas向けに出力...
Graphviz Visual Editor - GraphvizをWeb上で表示、さらに編集も！
昔から開発者がビジュアル化のために使ってきたライブラリがGraphvizではないでしょうか。DOT言語と呼ばれる記法に沿って書くことで、画像やSVGとしてドローされたデータを出力できます。そんなGraphvizのビジュアル化をWeb上で行い、さらに編集まで行えるのがGraphviz Visual Editorです。##...
TikZJax - TikZを使ってWebAssemblyでドロー
論文など数式を用いる場合には専用のエディタや機能を使うことが多いです。たとえばLaTeXでは数式の描画用の記法が用意されています。しかし線や円など、汎用的な描画をしたい場合にはTikZなどを用います。今回紹介するTikZJaxはWeb上でTikZ記法が使えるようになるライブラリです。## TikZJaxの使い方記述例で...
Diagram Maker - AWS製。ノードベースのドローツール
テキストで説明するよりも、グラフや図を使った方が分かりやすいという場面は多いです。しかし、ちょっとした図であっても編集が面倒だったり、ソフトウェアをインストールするのが面倒で控えてしまいがちです。その結果、テキストで説明して認識違いが起こったりします。今回紹介するDiagram MakerはAWSが作成したソフトウェア...
Go-Diagrams - Goを使ってネットワーク図を描く
システム用の図を書く場面はよくあります。特にプロジェクトでのネットワーク図であったり、アーキテクチャをまとめたりするのによく書くことでしょう。ドロー用のソフトウェアを使ってビジュアルで描くこともできますが、メンテナンスが面倒だったり、専用のソフトウェアをインストールしないといけません。そこで使ってみたいのがGo-Dia...
Online GitHub Contributor Graph Generator - GitHubのアクティビティグラフで自由に絵を描く
GitHubでは日々の活動（Gitログ）によってアクティビティグラフが描かれます。それによって毎日開発を続けようと思いますし、モチベーションにしている人も多いでしょう。あのグラフはサーバ側で制御しているものではないので、Online GitHub Contributor Graph Generatorのような仕組みを使...
Pikchr - Markdownの中にSVGで図を埋め込む
開発用のドキュメントでMarkdownがよく使われるようになっていますが、足りない機能が多いのも確かです。HTMLも埋め込んで使えますが、それではMarkdownを使っている意味がないと思ってしまうでしょう。Markdownの中にドローイングを埋め込みたい時にはPikchrを使ってみるのを検討しましょう。## Pikc...
ditaa - アスキーアートを図（SVG）に変換
システムの処理フローなどはチャートで書いた方が分かりやすい場面が多いですが、ドローイングツールを使って書くのは意外と面倒です。一度書くのはいいとしても、後で変更する手間は大きかったりします。そこで使いたいのがditaaです。アスキーアートから画像の図を生成してくれます。## ditaaの使い方例です。アスキーアート版は...
Excalidraw Claymate - Excalidrawを使ったアニメーション作成ソフトウェア
教科書や書籍の端っこでパラパラ漫画を書いた経験は多くの人があるはずです。その際には前の絵とちょっとだけずらして書いていくのがポイントになります。ちょっとずつずらして書くのを繰り返すことで、一気にページをめくると動いて見えるようになります。そんなパラパラ漫画風のアニメーションGIFを作れるのがExcalidraw Cla...
Diagrams - システム構成図をコードで書く
開発者であっても図を描く機会は多いです。仕様書のようなドキュメントであったり、システム構成図の中に書いたりといった具合です。ドローソフトウェアを使ったり、スライド作成ソフトウェアを使ったりしまうが、操作やメンテナンスが面倒でストレスです。そこで使ってみたいのがDiagramsです。開発者らしく、コードで図を描けます。#...
Core2D - マルチプラットフォームで動作するダイアログエディタ
開発用途で図を描くソフトウェアで、いいものにはなかなか巡り会えません。商用ソフトウェアであればすでにいいソフトウェアもありますが、ちょっとしか使わない時に高価なソフトウェアを購入するのはつい躊躇してしまいます。そこでオープンソース・ソフトウェアに注目しましょう。今回はCore2D、.NET製でマルチプラットフォームで動...
DiagramFlowJS - Web上でフローチャートを描くJavaScriptライブラリ
Web上でフローチャートを描いたり、図を描く際にはどんなツールを使っているでしょうか。各ノードを連結させたり、連結後に動かしてもちゃんと線が繋がったままになっているツールを選ぶのがいいでしょう。今回紹介するDiagramFlowJSはそんな図を作るのに使えるソフトウェアです。## DiagramFlowJSの使い方多く...
Excalidraw - プロトタイプに。ラフな線が書けるドローツール
きっちりした、正確な図を書くと、ほんの少しの乱れが気になって修正に時間がかかってしまったりします。それは些細な問題で、本質的な問題ではないにも関わらずです。特にプロトタイプなどではラフさを残した方がはやく作れます。今回紹介するExcalidrawは手書き風の図を書けるソフトウェアです。乱れている分、細かな点は気にせず作...
UXBOX - プロトタイプをさくさく作るためのWebアプリケーション
Webサイトやアプリなど、プロトタイプをさくっと作ってUIを検討するというのはよくある進め方です。そんな時にはデザイナーしか使えないソフトウェアよりも、誰でも編集できるものを使った方が素早く進められるでしょう。今回紹介するUXBOXはオープンソースのプロトタイピングソフトウェアです。## UXBOXの使い方まずプロジェ...
LegraJS - レゴ風ブリックを使ってドローイング
レゴはみんなが好きなおもちゃでしょう。一つ一つは小さなブリックですが、それを組み合わせることで何でも自分が好きなものを作り上げられます。最近ではIoTとも組み合わせて使われています。そんなレゴ風のブロックを使ってドローするライブラリがLegraJSです。## LegraJSの使い方スマイルマークのアニメーション。!
drawthe.net - Visioに頼らず綺麗なネットワーク構成図を手に入れる
開発者であれなネットワーク構成図を書く機会があるかと思います。そんな時、ドローツールを使うとメンテナンスが面倒だったり、変更時の差分確認もできず、徐々に運用が煩雑になっていきます。そこで使ってみたいのがdrawthe.netです。テキストから詳細なネットワーク構成を生成してくれるドローツールです。## drawthe....
Moveable - マウスでドラッグ/リサイズ/回転を実現
Webアプリケーションとしてドローアプリを作りたい、または一部の機能としてDOMを移動したりサイズ変更するような機能を設けたいと思うことがあります。しかし、DOMをインタラクティブに操作するのは困難です。そこで使ってみたいのがMoveableです。マウスでDOMを簡単に操作できるようになります。## Moveableの...
Pinker - 文字で定義して図に変換
Webが不得意としているものの一つが図（ダイアグラム）でしょう。Canvasを駆使すればできなくもないですが、画像編集ソフトウェアを使って画像として埋め込んでしまう人の方が多そうです。今回紹介するPinkerはJavaScriptのコードからダイアグラムを生成するソフトウェアです。## Pinkerの使い方レイアウトと...