ドローの記事一覧プレミアムユーザー限定記事MOONGIFTプレミアムは、月額500円の有料サービスです。Web上でフローチャートを描くJavaScriptライブラリWeb上でフローチャートを描いたり、図を描く際にはどんなツールを使っているでしょうか。各ノードを連結させたり、連結後に動かしてもちゃんと線が繋がったままになっているツールを選ぶのがいいでしょう。今回紹介するDiagramFlowJSはそんな図を作るのに使えるソフトウェアです。ラフな線が書けるドローツールきっちりした、正確な図を書くと、ほんの少しの乱れが気になって修正に時間がかかってしまったりします。それは些細な問題で、本質的な問題ではないにも関わらずです。プロトタイプなどではラフさを残した方がはやく作れます。今回紹介するExcalidrawは手書き風の図を書けるソフトウェアです。プロトタイプをさくさく作るためのWebアプリケーションWebサイトやアプリなど、プロトタイプをさくっと作ってUIを検討するというのはよくある進め方です。そんな時にはデザイナーしか使えないソフトウェアよりも、誰でも編集できるものを使った方が素早く進められるでしょう。今回紹介するUXBOXはオープンソースのプロトタイピングソフトウェアです。レゴ風ブリックを使ってドローイングレゴはみんなが好きなおもちゃでしょう。一つ一つは小さなブリックですが、それを組み合わせることで何でも自分が好きなものを作り上げられます。最近ではIoTとも組み合わせて使われています。そんなレゴ風のブロックを使ってドローするライブラリがLegraJSです。LegraJSの使い方スマイルマークのアニメーション。Visioに頼らず綺麗なネットワーク構成図を手に入れる開発者であれなネットワーク構成図を書く機会があるかと思います。そんな時、ドローツールを使うとメンテナンスが面倒だったり、変更時の差分確認もできず、徐々に運用が煩雑になっていきます。そこで使ってみたいのがdrawthe.netです。テキストから詳細なネットワーク構成を生成してくれるドローツールです。マウスでドラッグ/リサイズ/回転を実現Webアプリケーションとしてドローアプリを作りたい、または一部の機能としてDOMを移動したりサイズ変更するような機能を設けたいと思うことがあります。DOMをインタラクティブに操作するのは困難です。そこで使ってみたいのがMoveableです。マウスでDOMを簡単に操作できるようになります。文字で定義して図に変換Webが不得意としているものの一つが図(ダイアグラム)でしょう。Canvasを駆使すればできなくもないですが、画像編集ソフトウェアを使って画像として埋め込んでしまう人の方が多そうです。今回紹介するPinkerはJavaScriptのコードからダイアグラムを生成するソフトウェアです。SVGやCanvasにドローIllustratorなどで描いたキャラクターも、そのままでは単なる絵と変わりません。SVGであれば、JavaScriptを使ってインタラクティブな操作が実現します。すれば、画像とは違った楽しみ方が生まれるでしょう。今回紹介するZdogはJavaScriptでイラストを描き、3Dのように回転もできるライブラリです。Web上でドローWeb上で絵を描こうと思うとCanvasタグを使って行います。そこに描かれた情報は画像としてダウンロード可能です。ベクターデータとして(SVGとして)欲しい場合もあるでしょう。そこで使ってみたいのがdrawgonです。Web上で使えるドローイングアプリケーションです。APIサーバプログラマーは図を書くのが嫌いです(たぶん)。少なくともドローソフトウェアを使って書くのは嫌がるでしょう。メンテナンスしづらいですし、コードと図の乖離が発生しがちです。テキストで書いて、自動的に図にしてくれるものであれば、元のテキストを自動生成する方法が選べたり、バージョン管理で差分が取れるようになります。なんと!ターミナル上で動作するドローアプリ開発に関わる多くのことがCUIでできます。開発するだけであればGUIは不要かも知れません。Webブラウザだけあれば十分という人は多いのではないでしょうか。GUIでないとできなさそうな、ドローアプリケーションですらCUIでできます。Tartの使い方メイン画面です。Web上で3DモデリングIoTや3Dプリンタと言った文脈の中でハードウェアが存在意義を増しています。したオリジナルの部品を3Dプリンタで作ったり、IoTプロジェクトのハードカバーを作ったりします。CADになるでしょう。今回はWebブラウザ上で3DモデリングができるJS.Sketcherを紹介します。コラボレーションできるオンラインホワイトボード遠隔地とミーティングをする際に便利なのがチャットです。テキストや動画を介してコミュニケーションがスムーズに行えます。イラストなどを相手と共有したい時にはホワイトボードを使うのが便利です。そこで使ってみたいのがWhitebophirです。リモート同士で共有できるオンラインホワイトボードになります。ドットを使ったドローアプリIllustratorのようなツールを使ってドローを描いてみたいと思ったことはないでしょうか。あのレベルのソフトウェアを使いこなすのは難しいですが、簡単なドローであっても使いどころは多いはずです。そこで使ってみたいのがDotgridです。ドットの上でドローするのが特徴のソフトウェアです。Visioは人気のあるソフトウェアです。プロジェクトマネージャなどがアーキテクチャを図化したり、データベースのモデリングをしたりするのに使われます。その使い方に対して価格が非常に高いと感じてしまう方もいるでしょう。情報の関連性を表現する際にフローチャートが便利です。常に1対1の関係ではなく、分かれたり、交差したりすることもあるでしょう。情報の関連性がビジュアル化されることで、理解度が格段に増します。そこで使ってみたいのがjsPlumbです。情報を接続して表現できるソフトウェアです。jsPlumbの使い方フローチャートの例。HTMLエレメントを線で結ぶWeb上で図を描く際にはCanvasを使うのが一般的です。Canvasは通常のDOMとはまったく異なるコーディングが求められるので、書くのは好きではないという方もいるでしょう。そこで簡単な図、ノードを結びつけるようなものを描くならばjointerJSを使ってみましょう。jointerJSの使い方例です。Web上で組み込んで使えるドローWebサービスの中にイラスト機能を追加したいと思ったことはないでしょうか。掲示板でも使えますし、作業内容を写真と合わせて記録するのにも向いています。テキストで書くのとはまた違った情報が入れられるでしょう。そこで使ってみたいのがDrawerJsです。Webサイトの中に組み込めるドローソフトウェアです。マウス/タッチ操作に対応したドローアプリスマートフォンで文字を入力するのは面倒ですが、画面にタッチ操作できるので指で絵を描いたりするのは簡単です。写真のレタッチであったり、自分が書いた絵をそのままアップロードしたりと絵には様々な使い道があります。App、Webブラウザを使ったドローアプリです。ラフに図形を描くコンピュータが描く情報は正確です。正確すぎるためにちょっとしたずれが気になったりします。直線がほんのわずかに曲がっていたり、二つの線がずれていると直したくなってしまうでしょう。それによって失われる時間は大きいです。そこで使ってみたいのがRough.jsです。手で書いたようなラフな線を引くライブラリです。${article.post_date_view}${article.post_title}${article.except_content}プレミアムでしか読めない記事が730あります。blockworks。