まさおまっさお

おいまさおがんばれまさお

ビジネスモデル図解ツールっぽいものをSVGで実装してみる

最近twitterやnoteで話題になっている、ビジネスモデル図解。

note.mu

以前から面白いなーと思って見ていたら、先日チャーリーさんがこんなことを呟いていました。



とても良い。
個人が作るだけではなくて、それを共有して図解を中心としたコミュニケーションがとれるコミュニティを作れたら、それはきっと楽しそうな気がする。

と考えているうちに作ってみたくなってきた。
まずはフロント部分だけ。
矢印が必要だからSVGで。
実用性や綺麗さは置いておこう。

という訳で作ってみた

創作意欲が沸いたので、Vue.jsを使ってSVGで図解ツールを実装してみました。
(保存・共有はできず、制限も多いため実用性は皆無です)

https://masaoblue.github.io/business_zukai_svg/index.html

利用イメージ
f:id:MasaoBlue:20180724073445p:plain

動作環境

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に転記して画像化する

svg 要素を png 形式の画像に変換する

  • Vue.jsでSVG要素へバインド

グリグリ動くUIをVueとSVGでサクッと書く - No Regrets in Bathing

さいごに

twitterを追っていた所、無事に開発チームができたとのこと。しゅごい。



どんなサービスになるのか、今から楽しみです。