ブラウザから使う図式作成ツールの開発にはHTML+JavaScriptか？

Question

Microsoft Visioのような、UMLなどの図式を作成することができるサービスを、Webブラウザから使えるような形で作ろうと考えています。

この時、クライアントサイドは、HTML, CSS, JavaScriptで作るのがいいのでしょうか？サーバサイドはDjangoフレームワークを用いてPythonで書く予定です。

他の選択肢を知らないので、優劣じゃなくて単に「こんな選択肢もあるよ」という回答も歓迎します。

Answer 1

Webブラウザから使えるような形で作ろうと考えています。

フロントエンドで動作する為の選択肢がそもそもJavaScriptしか選択肢がありません。
（Flash、Javaアプレット等もありましたが死滅しました、数年後先にはWebAssemblyが流行るかもしれません）

ただし、既存言語から実行する直前にJavaScriptに変換するという手法を取る事もあります。
（所謂トランスパイル）
C/C++、Scala、Nim、LISPといった言語がJavaScriptにコンパイル出来ます、新しい言語はJSを意識しているものが多いようですね。

他にもJavaScriptに変換する専用の言語も存在します。
CoffeeScript, TypeScript, PureScript, LiveScript ...

---

クライアントサイドは、HTML, CSS, JavaScriptで作るのがいいのでしょうか？

素のHTMLやCSSを触るのも同様に辛いので、
静的ジェネレータを使う方法もあります。

HTML: Pug, Slim ...
CSS: SASS, Stylus ...

---

Microsoft Visioのような、UMLなどの図式を作成することができるサービスを、Webブラウザから使えるような形で作ろうと考えています。

コアの部分にも触れておきましょう。

マウスを使った作業が多くなるかと思います。
ブラウザ上でマウス操作を行った場合、ブラウザは逐一「マウスカーソルの座標が変わったよ！」とか「クリックされたよ！」といった情報をJavaScriptで受け取れる箇所に投げます。

イベントリスナーと呼ばれています。
第二引数のlistenerにJavaScriptの関数を設置しておくと、対象の操作が行われた時に登録しておいた関数をブラウザが実行してくれます。
スマートに書くのは難しいのであれこれ頑張ってください。

また、図形データはSGVが良いでしょう。
Canvasは駄目です。あれは２Dのレイヤーが1枚しかないようなものなので、設置したオブジェクトを二度と動かす事が出来ません。
SVG自体はテキストデータなので、Pythonサーバにアップロード、保存、ダウンロードの流れもわりと簡単に作れるでしょう。
JavaScript内でSVGをPNG画像に加工してDLさせるようなネタもあります。

Answer 2

Webブラウザって、HTML+JavaScript以外存在しないでしょ…

Comments

[退会済みユーザー]

私は初心者ですが、ある機能が存在しないということを言うには、ブラウザのすべての機能を知っていることが前提です。

[kei344]

To: tamagotomatoさん
ブラウザが実行可能な言語は実質 JavaScript だけですよ。

[yambejp]

まぁいまさらフラッシュという選択肢はないでしょうしね

[kiichi54321]

今起きていることは、Webは、HTML+JavaScript＋CSSしか存在しないから、高度なものを作るのは大変で、ミドルウェア的に、フレームワークなり、言語が存在して、ちょっとはまともな開発をしようとしている。で、製図ツールを作りたいときは、HTMLのCanvasという機能を使う。これは、お絵描きができるもの。Canvasまわりの便利なフレームワークは私は知りません。Canvasを使うのは、ゲーム作っているひとたちになるので、そこら辺を探すといいと思う。製図ツールのようなものの場合、多数のオブジェクトの種類をつくることになるので、型がない素のJSではつらいので、型付の、Typescriptを使うといいと思う。

[退会済みユーザー]

詳しい説明をありがとうございます。助かります。

Answer 3

ブラウザ上で動くプログラム言語は JavaScript 以外無いと考えてもよいです。

JAVA Applet や Shockwave や Flash や JScript は現在ほとんど使われていません。

Comments

[退会済みユーザー]

「方法は存在するけど使われていない」のですね？

[maisumakun]

JavaScript以外の手段は「まだ存在している」程度の話で、どれもこれも「対応環境が限られる」もしくは「終了時期が見えてきている」ものなので、新規で開発する場合の選択肢とはほぼなりえません。

[退会済みユーザー]

わかりました。