miro アプリ

弊社はモバワークを導入していて、チームメンバーも普段はフルリモートワークをしています。

チームではオンラインホワイトボードとしてmiroを導入していて、例えばこんな事に使ってます。

特に最後はmiro SDKを使ったmiroアプリを開発して実現しています。

そんなmiroアプリを開発できるようにするまでの手順をご紹介します。

1 準備

下のリンクの手順に従って、dev teamとYour appsを作る

パッケージがあるので使いましょう

$ yarn create miro-app my-miro-app

 $ cd my-miro-app
 $ yarn start

ここではひとまずngrokで公開

$ brew install ngrok

ngrokのアカウント登録をして、Your Authtoken からtokenをコピペ

$ ngrok authtoken <取得したtoken>
$ ngrok http https://localhost:3001 # yarn startしたときに動いてるポート

Forwardingに出てるアドレスをコピペ(必ずhttpsの方)

1 準備 でmiroに登録したappに、3 公開でコピペしたアドレスをappに登録

dev teamのボードを開いて、tool barを見たときにappが追加されていて動けばok

自分たちのチームでは、タスクカードを選択するだけでそれらの見積もり時間を集計するアプリとして開発して使ってます。

miro SDKはオブジェクトの読み取り、配置、変更、オブジェクトが更新されたらxxxをする、みたいなことが出来るのでかなり自由度が高いです。

また、miro appは単なる静的ページなので開発し終わったらgithub pagesなどで公開するのも可能です。