リモート会議に便利なpetari.workの利用方法

# petariとは
会員登録不要で誰でも利用できるリモート会議ツールです。
![スクリーンショット 2020-09-14 22.35.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636715/46146ce6-cf59-1c80-516e-e2f4139fe946.png)

# URL
https://petari.work/

# 部屋の作成方法
部屋の作り方は2つあります。
1. TOPページで好きな部屋名を入力して、ENTERを押して入室
![スクリーンショット 2020-09-14 22.40.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636715/a44ad6ca-1c53-d0c5-2429-e7e558202ab3.png)
2. URLを直接入力する（例：https://petari.work/persimmon071_qiita ）
![スクリーンショット 2020-09-14 22.42.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636715/f43d1601-98ca-997e-93bf-ba0f843e65a0.png)

作成された部屋は会員登録不要で誰でも閲覧可能です。
記事公開時点で画面へのパスワード機能はないため、共有した人以外に見せたくない場合はURLに推測されづらいランダムな文字列をつける方がいいかと思います。

誰も作成していない（と思われる）部屋だと以下のようなクリーンな付箋ページが表示されます。
※他の人が利用していた形跡がある場合は別の部屋を作成しましょう。
![スクリーンショット 2020-09-14 22.44.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636715/f4a78749-8f3a-6fdb-fbda-eea14f50ff5c.png)

# 使い方
petariはURLさえ知って入れば誰でも閲覧可能なツールですので、ご利用には十分気をつけてください。
基本的には付箋を貼って参加者全員でブレストするツールですが、使い勝手が良いため私はホワイトボードの代わりとして利用する機会も多いです。

## 付箋を貼る
付箋の大きさはSmall、Medium、Largeの3種類、色は青、緑、赤、黄色、オレンジの5種類から選択できます。
使いたい付箋をクリックすると下の緑のフィールドに付箋が貼られます。
![スクリーンショット 2020-09-14 22.52.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636715/099565a6-0992-789e-3a3d-16f077fd6af2.png)

付箋に文字を書きます。この時点では他の人には書いている内容は見えません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636715/7b74d26a-df36-5f89-0fba-f7c222f7124b.png)

ドラッグアンドドロップで、グレーのフィールドに出すと
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636715/5d80dc51-0992-a191-d9b5-d07be1491a09.png)

他の同じURLにアクセスしている人にも付箋の内容が見えるようになります。
グレーのフィールドに出した後も文字は編集可能です。付箋を出した人以外でも編集が可能なので、出した人の名前を書いてもらうようにした方が後から見返すときに負担が少ないです。
![スクリーンショット 2020-09-14 22.58.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636715/6c7955e4-b009-78f8-d2fa-9a6eabc3593f.png)

消したい場合は付箋の右下に表示されているゴミ箱ボタンを押す、またはキーボードのdeleteボタンを押すと以下のようなポップアップが出ますので、OKをクリックすると付箋が消えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636715/100e857b-0808-b5d3-d30e-64f2e966ed68.png)

※緑のフィールド上で消したい場合は、消したい付箋の上にマウスを乗せるとゴミ箱アイコンが表示されますので、そちらをクリックすると消すことができます。
![スクリーンショット 2020-09-14 23.54.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636715/b72b437f-c180-38d5-2b5a-e80b12f35ce5.png)

## 付箋の種類を変更する
付箋の上で右クリックをすると付箋の色・大きさ・フォントサイズなどが変更できます。
![スクリーンショット 2020-09-14 23.27.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636715/b7bbc49a-3519-f7e3-654b-e6ddd74b4cc3.png)

## 付箋の移動
付箋をドラッグアンドドロップすることで移動できます。

## 背景の移動
ページスクロールの挙動で、グレーのフィールドを移動できます。

## 付箋の複数選択
shiftを押しながらドラッグするとグレーの四角が出てきて、付箋を複数選択することができます。選択された付箋をドラッグすると全ての付箋が移動します。選択状態でまとめて削除することも可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636715/1edc21c6-ad79-a6b2-b2c2-643f34538639.png)

## 付箋選択のモードにする
![スクリーンショット 2020-09-14 23.20.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636715/e1ff437c-56ae-b0dd-7ee3-75a1cf2bf378.png)
一番ニュートラルな状態に戻るときは右上の手のひらマークを押します。

## 自由な線を描く
![スクリーンショット 2020-09-14 23.19.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636715/3ac2985d-0b5e-1caf-2481-6e8dcc11e38c.png)
右上のペンのアイコンをクリックすると自由な線を描くモードになり、ドラッグすると線が描けます。
![スクリーンショット 2020-09-14 23.21.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636715/f192cad8-c59f-5da8-e622-dd9dc68c611a.png)

## 直線を描く
![スクリーンショット 2020-09-14 23.22.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636715/86c73fe6-e45c-176c-6064-6c663e168bbe.png)
右上の直線のアイコンをクリックすると直線が描けるようになります。
![スクリーンショット 2020-09-14 23.24.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636715/bacf39c0-fcac-1b00-6af6-a18bab133454.png)

## 線を消す
![スクリーンショット 2020-09-14 23.25.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636715/f3ccc7a1-9bfd-b07c-ca05-4eaede24d919.png)
描いた線を消したい場合は右上の消しゴムアイコンを選択し、消したい線の上でドラッグしながら動かします。

## タイマー 
![スクリーンショット 2020-09-14 23.10.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636715/b8256f15-68f2-13d1-63f4-fb60f673d5fd.png)
右上のタイマーアイコンをクリックするとタイマーの機能が利用できます。
![スクリーンショット 2020-09-14 23.11.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636715/212af733-e707-74b0-466a-b0b046994db0.png)
時間を決めて「Start a Timer」をクリックすると、カウントが始まります。このカウントはURL閲覧者全員に共有されます。
![スクリーンショット 2020-09-14 23.12.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636715/7221b819-c828-1533-17d7-c5a850e1bff3.png)
時間がくると以下のように画面が暗転します。
![スクリーンショット 2020-09-14 23.15.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636715/9e2aada3-6854-73a9-e9eb-4d37b4e532c9.png)

# バックアップを活用する
petariの素晴らしい点として、バックアップ・復元機能が挙げられます。
バックアップを利用することで、以下のようなシチュエーションに対応できます。

 - 一時的に利用して、バックアップをローカルに保存しておき、サイト上のデータは削除し誰かに見られないようにする。別日にバックアップした箇所から再度会議を始める。
 - 使いまわせるテンプレートを作成しておき、作成したページ上に読み込ませて使い回す

## バックアップ方法
部屋名をクリックして、左から2番目のアイコンをクリックします。ポップアップでOKをクリックすると、ファイルがダウンロードされ、それがバックアップファイルとなります。ファイル名は「export-{部屋名}.json」となります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636715/cbd5d15b-fca0-1516-e488-2e9c0c1bf36e.png)

## 復元方法
部屋名をクリックして、1番左のアイコンをクリックします。
※別の部屋でもバックアップを復元することが可能ですので、今回は例として「persimmon071_qiita2」の部屋で復元させています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636715/9bfda68d-825b-b2f7-74e1-e4c2ef81cef5.png)

すると以下のように画面が暗転するので、ファイルをドラッグアンドドロップすると、バックアップから内容を復元できます。
![スクリーンショット 2020-09-14 23.43.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636715/d3dd1fc5-6f6a-99e7-4016-25a68277ca38.png)

## ページ内情報の削除方法
部屋名をクリックして、1番右のアイコンをクリックします。ポップアップでOKをクリックすると部屋の内容が全て削除されます。バックアップがない場合、復元することはできないため注意して実行してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636715/8c1e41ac-59e1-4f99-0906-601055f42761.png)

# おまけ
以下のような画面が出てよく接続が切れますが、「Reload Now」をクリックすると問題なく再接続されます。
![スクリーンショット 2020-09-15 0.18.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636715/cd7191ab-a6a6-203c-ba9e-3d693e441905.png)

# 終わりに
昨今リモート会議が増えてきたかと思いますが、ホワイトボードの代わりになるものがなくて苦労している方も多い印象なので紹介の記事を書きました。他にもMiroとかもいいらしいのですが、まだ使ったことがないです。。。