Linkup 開発ブログ

創造的なチームのためのリモートコラボレーションツール Linkup の開発ブログです。

ホワイトボードの紹介

こんにちは @hidenba です。

対面の会議では議論をホワイトボードにまとめる事で議論が空中戦になることを避けたり、図を書くことでイメージの共有を図ったりすることが出来ます。リモート会議をしていてホワイトボードがあればなーって思いをしたことないでしょうか?

あるんです!Linkup にはホワイトボードがついているんです!

今日はそんなホワイトボードの使い方を紹介します。

エリア紹介

大きく3つのエリアに分かれています

描画エリア

f:id:nbahide:20181121100146p:plain
ホワイトボード

① ホワイトボードに文字や図をフリーハンドで書くことが出来ます。 フリーハンドでの描画になるのでタブレットを利用して描画することをおすすめします。

サムネイル

f:id:nbahide:20181121100149p:plain
サムネイル

② ホワイトボード全体を表示しているので、描画エリアに表示されていない部分に何かが書いてあった時に大まかな位置がわかります。

メニューバー

f:id:nbahide:20181121100154p:plain
メニューバー
③ ホワイトボードを操作するためのメニューで以下のような機能があります

  • 消しゴム
  • ペン選択
  • 画像アップロード
  • 移動モード
  • ホワイトボードキャプチャ
  • 全削除

メニューバーの機能紹介

ホワイトボードに描く・消す・画像を貼り付ける・記録を残す等の操作が出来ます。

消しゴム

f:id:nbahide:20181121100159p:plain
消しゴム

消しゴムを選択して描画した線の上をドラッグすることで消去することが出来ます。描画した線の一部を消すのではなく一筆で描画した線全体を消去します

ペン選択

f:id:nbahide:20181121100204p:plain
ペン選択

描画するペンを選択できます。ペンは黒・青・赤の三色で2種類の太さから選択できます。

画像アップロード

f:id:nbahide:20181121100208p:plain
画像アップロード

選択した画像をアップロードしてホワイトボードに貼り付けることが出来ます。

移動モード

f:id:nbahide:20181121101156p:plain
移動モード

ホワイトボードの描画領域を移動/拡大/縮小したり、画像や付箋の移動が出来ます。ホワイトボードをドラッグすることで描画エリアが移動できます。スライダーを動かすことでホワイトボードの描画エリアを拡大縮小して任意の倍率で利用することが出来ます。移動や拡大縮小は自分のホワイトボードでのみ有効で他の参加者のホワイトボードの描画エリアや表示倍率が変更されることはありません。

f:id:nbahide:20181121100257p:plain
画像選択

画像や付箋を選択することで移動や削除を行えます。画像や付箋の移動は他の参加者のホワイトボードにも反映されます。

ホワイトボードのキャプチャ

f:id:nbahide:20181121100213p:plain
ホワイトボードキャプチャー

描画エリアに表示されている内容を画像として保存できます。キャプチャできるのは描画エリア全体ではなく表示されている内容が保存されます。

f:id:nbahide:20181121100242p:plainf:id:nbahide:20181121100251p:plain
キャプチャー画像

倍率や表示内容によって保存される内容が変更されます。

全削除

f:id:nbahide:20181121100307p:plain
全削除

全体を削除します。描画エリアに書かれている内容が全て削除されるので注意してください。

ホワイトボードへの描画はフリーハンドでの描画となるためタブレットとペンデバイスを使って利用するとスムーズにホワイトボードに書き込むことが出来ます。 参加者全員分のタブレットを用意するのが難しい場合は、ホワイトボードに議論をまとめる人がタブレットから書き込むようにして参加者はPCでホワイトボードを見ながら議論する方法をとっても良いかもしれません。

リモート会議でもホワイトボードを使うことによってより創造的で無駄のないコミュニケーションがとれるようになるので是非Linkupのホワイトボードを活用してみてください!

Linkup Update ホワイトボードツールバー、Webhook 設定導線の変更

こんにちは。 @kunitoo です。

今日は最近行ったLinkupの変更について紹介いたします。 大きな変更は以下の2点です。

  1. ホワイトボードツールバーの変更
  2. Webhook 設定導線の変更

f:id:kunitoo:20181112095800p:plain

①ホワイトボードツールバーの変更

ペン選択時に太さと色をワンタッチで変更できるようにしました。 以前は18種類の色、6段階の太さからそれぞれ選択する方式でしたが、 新しいホワイトボードでは色を黒、赤、青の三色と2段階の太さのみ変更しました。 ペンの選択肢が減ることにより、ペンの色や太さに悩むことなくすばやく選択できるようにし、 より議論に集中できるようにしました。

また、②の×ボタンを押すことで、ペン選択のバーを非表示にできます。スマホ、タブレット端末など表示領域が狭いときにお使いください。

Webhook 設定導線の変更

Webhook の設定は③のルーム内の Settings にありましたが、ビデオチャット中の個別の設定とルーム全体の設定が混乱を招いていたため、 ルーム一覧からのみ設定できるように変更しました。

f:id:kunitoo:20181112120127p:plain

ルーム一覧の④の歯車アイコンから各ルームのWebhook設定が行えます。 歯車アイコンをクリックし、Webhook の種類(Idobata or Slack) Webhook URLを設定してSaveすると設定完了です。 この設定をすることで、普段見ているチャットにルームに入ると通知が表示されるようになります。

f:id:kunitoo:20181112122801p:plain

今回は最近のアップデートについて紹介しました。 より使いやすくなったLinkupをお楽しみください。

画面共有の紹介

こんにちは hidenba です。

今日はLinkupの画面共有について紹介したいともいます。

Linkupでは参加者の顔を見ながら画面共有を行い指示語(ココとかソコ)を使ってコミュニケーションを行えるのが特徴的です。 早速画面共有のやり方を見てみましょう。

  1. ルーム画面下部の①のボタンをクリックすると画面共有が行なえます。
    f:id:nbahide:20181108090004p:plain
    画面共有ボタン
  2. Chromeを利用していている場合はLinkup画面共有用のChrome拡張をインストールする必要があるので②のボタンをクリックします
  3. Chrome拡張の画面が別タブで表示されるので③をクリックして拡張機能をインストールします
  4. Linkupのルームに戻りブラウザのリロードを行ってください
    f:id:nbahide:20181108085956p:plainf:id:nbahide:20181108085943p:plain
    Chrome拡張インストール
  5. 再度①の画面共有ボタンをクリックする
  6. 共有したいスクリーンまたは画面を選択します(OSやブラウザによって画面の選択方法が変わります)
    f:id:nbahide:20181108085907p:plainf:id:nbahide:20181108085914p:plain
    共有ウィンドウ選択
  7. 画面共有されて参加者全員で同じ画面を見ることが出来るようになりました
    f:id:nbahide:20181108085937p:plain
    画面共有中

ココさす

Linkupの画面共有の特徴的な機能として「ココさす」があります。これは画面共有中に指示語を使ってコミュニケーションをとれるようにするための機能です。 画面共有のされている場所をクリックすることで参加者の画面にふわっとマークが出るようになっています。

ココさすがあることで

  • 画面の「ココ」をクリックして!
  • 画面の「ココ」の部分を変えて

等の対面に近い感覚で会話をすることが可能になります。

画面共有を行い指示語を使ってコミュニケーションを取ることで、より質の高いビデオ会議が行なえますので是非活用してください!

RubyWorld Conference2018のスポンサーブースに出展しています

こんにちは@hidenbaです。

今年は宍道湖に沈む夕日を見に行くぞ!って思いながらコレを書いているのですが今日の日の入りは何時だっけかな…

今日から2日間、島根県松江市で開催されているRubyWorld Conference2018(以下RWC)にて弊社永和システムマネジメントのスポンサーブースにてLinkupをお試しいただけます!

ブースにはiPadとApplePencilの他にペンタブレット(所謂板タブ)を置いてあるのでホワイトボードの使用感をそれぞれのデバイスで体感できます。

f:id:nbahide:20181101111056j:plain

ブースにお越しいただきアンケートに答えると抽選で最大1500円分のAmazonギフト券が当たるキャンペーンを行っております!!

f:id:nbahide:20181031184446p:plain
Amazonギフト券が抽選で当たるキャンペーン

また、Linkupステッカーの配布も行っているのでお気軽にお立ち寄りください。

f:id:nbahide:20181101101223j:plain

ビデオチャットの紹介

こんにちは@hidenbaです。

チームの朝会にはLinkupを使ってリモートで参加するのですがふりかえりで出たトライを失念しがちなのでLinkupのホワイトボードに付箋で貼って毎朝目を通すようにしていると忘れずに挑戦できるかも!という気分になっておすすめです。

今日はLinkupの心臓部でもあるビデオチャット部分について紹介したいと思います。

ルーム画面

ルームに入室すると一人の場合はホワイトボードだけが表示されているのですが、他の人が入室すると入室した人のカメラからの映像が大きく表示されます。

ルーム画面の説明
ルーム画面

  • ①:チーム名とルーム名が表示されています。
  • ②:このルームのURLをコピーするためのボタンです。コピーしたURLを共有することでルームに招待を行えます。
  • ③:ルームのメインエリアです。相手側のカメラ映像や画面共有映像やホワイトボードが表示されます。
  • ④:ルームに入室している人のカメラ映像や画面共有されている映像のサムネイルが表示されます。
  • ⑤:自分のカメラ映像が表示されます。
  • ⑥:カメラの表示・非表示の切り替えを行えます。非表示にすると相手にカメラ映像は送信されません。
  • ⑦:マイクのON/OFFの切り替えを行えます。OFFにすると相手に音声は送信されません。
  • ⑧:画面共有を開始できます。
  • ⑨:ルームから退室します。
  • ⑩:ルームの設定画面が表示されます。
  • ⑪:お問い合わせフォームが表示されます。

ルームの設定画面

ルームの設定画面ではカメラ等のデバイス設定を行えます。

接続時に音声が出なかったりカメラの映像が出ない場合などはこの画面で設定を変更すると映像や音声が正常になることが多いです。

ルーム設定

  • ①:接続されているカメラの一覧からカメラを選択して切り替えます。
  • ②:接続されているマイクの一覧からマイクを選択して切り替えます。
  • ③:接続されているスピーカーの一覧から音声が出力されるスピーカーを切り替えます。一部のブラウザのみ表示される項目です。
  • ④:表示名を入力すると相手のルーム画面でのサムネイルと自分のサムネイル映像に表示されます。表示名は全てのルームで共通のものとなります。

f:id:nbahide:20181024121129p:plain
表示名

※ Integrationの設定については別途ブログを書く予定ですが外部のチャットツールに対して入室時の通知を行うことが出来ます。

Linkupビデオチャットなので一人で利用するのは難しいのですがお友達や同僚など周りの方を誘って是非利用してみてください。そしてビデオチャットとホワイトボードで上質なコミュニケーションを体験してください!

WebRTC Meetup Tokyo #19 にて開発事例を発表してきました

こんにちは。 @kunitoo です。 2018/10/09(火) に開催されたWebRTC Meetup Tokyo #19にて開発事例としてLinkupの話を@hidenbaと私で発表してきました。 内容は概要・コンセプト、Linkup の構成とSkyWayのDataChannelを使った機能について発表しました。 当日発表したスライドはこちらです。

また、当日の様子が動画で公開されていますので、よければ見て下さい。 Linkup の発表は 1:21:13 からになっています。


WebRTC Meetup Tokyo #19 #webrtcjp

WebRTC は Linkup において、もっとも重要な技術となっているため、今後もWebRTC Meetupに参加、発表等協力していきたいと思っております。 主催のみなさま、発表の場をいただきありがとうございました。

ホワイトボードモードをリリースしました

こんにちは@hidenbaです。

タブレットスマートフォンでより多くのブラウザからLinkupのホワイトボードを利用してもらえるようになりました!!

f:id:nbahide:20181015103245p:plain

これによりiOSではSafariしか利用できなかったホワイトボードがChrome/FireFox/MicrosoftEdgeでも利用できるようになりました!

Linkupではタブレットスマートフォンをホワイトボード用の端末と位置づけていてます。 PCでビデオ通話を行い手元のタブレットスマートフォンからホワイトボードを使って議論を行うとより密度の高いコミュニケーションがとれるので 是非タブレットスマートフォンからホワイトボードを利用してみてください。