blockdiag の Web API サーバとライブプレビューをする WebUI を作りました
はじめに
-
blockdiag をリアルタイムでプレビューできたら素敵だな、ということで作ってみました。
- 公式でも http://interactive.blockdiag.com/ が用意されていますが、 ブラウザ側での SVG ダウンロード機能や CodeMirror を導入したかったため、自作することにしました。
そもそも blockdiag って?
特定の書式でテキストを記述すると、図として出力してくれるダイアグラムジェネレータです。
詳しくはこちら ( http://blockdiag.com/ja/ )
個人的には packetdiag や seqdiag あたりが気に入っています。
デモ
実装に使った言語やライブラリ
API サーバ側
- Python 3.6.5
- sanic ( https://github.com/channelcat/sanic )
- そこそこ快適にプレビューしたかったので、速度面は若干気にしました
- japronto の次に速いフレームワークだそうです。 ( 負荷試験のためのノウハウと Webフレームワークの負荷試験 (Python,Node,Go,PHP) )
- Flask-like に書けることもなかなかに良さげと思い、採用に至りました
WebUI 側
- そこそこ快適にプレビューしたかったので、速度面は若干気にしました
- japronto の次に速いフレームワークだそうです。 ( 負荷試験のためのノウハウと Webフレームワークの負荷試験 (Python,Node,Go,PHP) )
- Flask-like に書けることもなかなかに良さげと思い、採用に至りました
こちらはあまりこだわりはありません
- javascript (ES6)
- React.js
- webpack4 + webpack-dev-server
- reactstrap
- bootstrap4
- CodeMirror
- etc ...
ソースコード & デモサイト
以下で公開しています
所感
- 最近の Python Web フレームワークを調べる機会が無かったので良い機会になった
- 利用したいライブラリに合わせて、言語を選んで実装する、という流れはなかなか楽しい
- python アプリの docker コンテナ化は思ったよりお手軽だった
Author And Source
この問題について(blockdiag の Web API サーバとライブプレビューをする WebUI を作りました), 我々は、より多くの情報をここで見つけました https://qiita.com/kaishuu0123/items/0aaa25bbff8e994641f3著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .