Mobile Factory Tech Blog

技術好きな方へ!モバイルファクトリーのエンジニアたちが楽しい技術話をお届けします!

miroをもっと使いたい!miroアプリ 3分クッキング

miro アプリ

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

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

  • ボード上でタスクチケットの管理
  • 残りタスクと進捗の可視化
  • タスクの見積もりと作業可能時間の集計と比較

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

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

1 準備

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

https://developers.miro.com/docs/getting-started

2 app作成

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

https://www.npmjs.com/package/create-miro-app

$ yarn create miro-app my-miro-app
 $ cd my-miro-app
 $ yarn start

3 公開

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

$ brew install ngrok

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

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

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

4 app URL登録

1 準備 でmiroに登録したappに、3 公開でコピペしたアドレスをappに登録 f:id:maeken2010:20211208165240p:plain

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

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

その後

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

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