こんにちは
フォトシンスでソフトウェア開発のマネージャーをやっている @ishturky です。
今日のエントリーは、以前書いた 「gitbookで設計書を作成したら最高だった話」の続きです。
こんなコメントいただいております。
はい。これはとても悩ましいですね。僕自身もとても悩んでまさに試行錯誤していました。
今回は、「draw.io」というツールを使ったらとても連携しやすかったのでご紹介します。
draw.io
どんなツール？
ざっくり以下です
- VisioやCacooなどに代表されるお絵かきツールです
- ブラウザ上で動きます（Desktop版もあり）
- Drag and Drop で図を配置して線でつなぎます。フローチャートやワイヤフレームなどなど色んな用途に。
- いろんなステンシル（テンプレ）が用意されています（スマホ画面やAWSのアイコンなど）。もちろん自作を追加も可
- 保存は Web上（Google docs、OneDrive、Dropboxなど） ※ 使ってませんが、Desktop版ならローカル保存も可能な模様
- 画像形式でエクスポート可能
良くも悪くも期待値通りという感じです。
操作感
やや直感性に欠ける感じがしますが、慣れれば問題ないレベルです。（自分はVisio経験者）
ちょっともっさりです
価格
無料です。そうです。無料です。大事なことなので（ry
どこが良かったのか
ここまではあるあるツールなのですが、僕が一番気に入ったのはこれです。
画像形式で直接GitHub に コミットできる
画像ファイルのエクスポート先としてGitHubを選ぶと、OAuth で認証します。認証できたらアカウントが権限をもっているリポジトリ⇢ブランチ⇢保存パスの順に指定できます。
GitHubにコミットできると、なぜいいのか
前回のgitbookのエントリで書いたように、僕らは gitbookで書いた設計書をGitHubで管理しています。
Before
今までの運用だと
- ドローイングツールで画像を作成 or 編集
- 保存
- ローカルにファイルをエクスポート
- ローカルでgit commit
- git push
という手順でした。これが編集のたびに発生します。結構だるい。だるいとどうなるかというと、コミット漏れが発生します。編集したくなくなります。メンテされてない設計書の出来上がりです。
After
- draw.ioで画像を作成 or 編集
- 保存
- github にコミット
これは完全にストレスフリーです。イイ！
gitbook の設計書からの参照の仕方
- コミットされた図が反映される
- 設計書から編集画面に直接いける
と気持ちいいので、僕は↓のように書いて画像を参照してます
# ほげらの画面設計 [](https://www.draw.io/#drawio編集画面のURLを貼り付ける)
最後に
webツールがGitHubとネイティブで連携するとこんなに気持ちいいものなのかと。直接の性能も重要ですが、親和性って大事ですね。
皆さんの設計書が継続的に生き続けられるきっかけになれば幸いです。
募集
フォトシンスでは一緒にものづくりができるエンジニアを募集してます！！！
