最近twitterやnoteで話題になっている、ビジネスモデル図解。
note.mu
以前から面白いなーと思って見ていたら、先日チャーリーさんがこんなことを呟いていました。
ビジネスモデル図解をブラウザ上でかんたんに編集できるようにして、業種とかタグとかつけて誰でもアップロードできるようにしたい。ソート、検索もできる。日本だけじゃなく世界中からおもしろいビジネスモデルがどんどん集まってくる仕組み。それを愛でる。なんて俺得。開発興味ある人いないかな。
— チャーリー (@tetsurokondoh) 2018年7月19日
とても良い。
個人が作るだけではなくて、それを共有して図解を中心としたコミュニケーションがとれるコミュニティを作れたら、それはきっと楽しそうな気がする。
と考えているうちに作ってみたくなってきた。
まずはフロント部分だけ。
矢印が必要だからSVGで。
実用性や綺麗さは置いておこう。
という訳で作ってみた
創作意欲が沸いたので、Vue.jsを使ってSVGで図解ツールを実装してみました。
(保存・共有はできず、制限も多いため実用性は皆無です)
https://masaoblue.github.io/business_zukai_svg/index.html
利用イメージ
動作環境
Windows10、Google Chromeでのみ動作確認しています。
できること
- 3×3の枠内に「ヒト」「モノ」などのアイコンを配置する
- 配置したアイコンにラベルをつける
- 枠と枠を矢印で繋ぐ
- 全体を画像として出力する
できるのはこれだけ。
これ以上の実装予定はありません。
実装について
ソースコードは以下にあります。
(画像の使用については御本人に許可を頂きました。ありがとうございます。)
GitHub - MasaoBlue/business_zukai_svg
参考URL
- DOM要素に当たっているstyleをobject形式で取得する
javascript - Can jQuery get all CSS styles associated with an element? - Stack Overflow
- SVGをcanvasに転記して画像化する
- Vue.jsでSVG要素へバインド
グリグリ動くUIをVueとSVGでサクッと書く - No Regrets in Bathing
さいごに
twitterを追っていた所、無事に開発チームができたとのこと。しゅごい。
ヤバいメンバーが集まったのでヤバいクオリティを出したい所。 https://t.co/2qtpUF9XBh
— ナベ🍲 / ためしがき / Amazonで本の販売始まりました! (@nabettu) 2018年7月22日
どんなサービスになるのか、今から楽しみです。