paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。

20200204140738

ITエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。

プログラミング動画学習 paizaラーニング

PC・スマホのブラウザを会議室にする万能ボードエディタ「WebBoard」を使ってみた!

f:id:paiza:20200122120629j:plain
どうも、まさとらん(@0310lan)です!

今回は、PCやスマホなどのデバイス問わずブラウザを複数人で連携可能な会議室にするWebサービスをご紹介します。

高機能な仮想ホワイトボードに通話やビデオチャットなど、さまざまな便利機能を盛り込んだサービスです。誰でも手軽に使えるうえ、自分だけのプライベートなアイデアノートのような使い方も可能です。

WebBoard

f:id:paiza:20200122120726j:plain
 

■「WebBoard」の使い方

「WebBoard」は、以下のURLからユーザー登録不要ですぐに利用できます。

https://www.webboard.io

ただし、書き出しやコラボ連携ができないなどいくつか制限があるので、まずは無料のユーザー登録を済ませておくといいでしょう。


サイトのトップページにアクセスして【Sign up】をクリックしてください。

f:id:paiza:20200122122921j:plain


GoogleやFacebookアカウントを使って簡単にログインできますが、メールアドレスを使ったユーザー登録もできるようになっています。

f:id:paiza:20200122122931j:plain

必要事項を入力したら登録したアドレス宛に認証メールが来るので、本文内にあるリンクをクリックすると登録が完了します。


最終的に以下のような【ダッシュボード】が表示されたら準備は完了です!

f:id:paiza:20200122123433j:plain


試しに【Create new board】と書かれたボタンをクリックしてみましょう!

f:id:paiza:20200122123443j:plain


ブラウザ上に仮想ホワイトボードが表示されました。

f:id:paiza:20200122123455j:plain

このボードは上下左右に移動可能で、ズームイン・アウトすることで無制限に拡大していくこともできます。PCのブラウザだけでなく、スマホのブラウザからでも同様に操作できるのが特徴でしょう。

あとは一般的な会議室にあるホワイトボードと同じように、文字を書いたり画像を貼ったりしながら、複数人でコラボ連携ができるようになるわけです。

■仮想ホワイトボードの基本機能

まずは自分だけが使う仮想ホワイトボードの基本的な使い方から見ていきましょう。プライベートなメモからアイデアのアウトプットまで、幅広い用途に使えるので便利です。

ボードを表示したら画面左側にあるツールボックスに注目してください。

f:id:paiza:20200122123745j:plain

このボックスにはさまざまな機能がまとめられています。


たとえば、手描きが可能なペンツールを使えば、ボード内で自由に文字や絵などを描けます。

f:id:paiza:20200122123911j:plain


便利な点として、描いたあとにすぐオブジェクト化されるので、落書きを自在に移動・拡大・縮小したり引っ張って形状を変えたりなどの編集ができます。

f:id:paiza:20200122123925j:plain

マウスなどで手描きをすると難しかったりしますが、あとから自由に調整できるので重宝します。


シェイプ画像もいくつか用意されています!

f:id:paiza:20200122124037j:plain

枠線の太さや塗りつぶしの色を設定可能で、同じように調整・編集もできるようになっています。


手描き以外にもテキスト入力に対応しており、パワーポイントでスライド資料を作成する感覚で操作可能です。

f:id:paiza:20200122124047j:plain

上図のように付箋紙のようなスタイルでテキストを挿入することもできます。


さらに、画像・動画・PDFファイルのアップロードにも対応しており、Dropboxと連携してファイル操作をおこなうこともできます。

f:id:paiza:20200122124109j:plain


たとえば、Webサイトのワイヤーフレーム画像をボードに貼り付けて、手描きでメモを残しておくようなケースも簡単に実現できます。

f:id:paiza:20200122124121j:plain

このような基本的な機能を活用するだけで、資料の作成やアイデアのアウトプットが効率よくできるはずです。

■ボードの書き出しについて

「WebBoard」の仮想ホワイトボードは、クラウド上に保存可能ですがファイルとして書き出すこともできるのでご紹介しておきます。

画面上部のメニューから【Export】をクリックすると、書き出し用のウィンドウが表示されます。

f:id:paiza:20200122124201j:plain

JPG / PNG / PDFのファイルへ即座に変換してダウンロードが可能になります。


【Embed in iFrame】を選択すると埋め込みタグを生成できるようになっており、ボード自体をWebサイトやブログなどに挿入できるわけです。

最初に埋め込むサイトのドメイン(URL)を設定するとタグが生成される仕組みです。

f:id:paiza:20200122124221j:plain

あとはiFrameタグを対象サイトのHTML内に貼り付けるだけです。


実際に埋め込んでみると以下のようになります。

f:id:paiza:20200122124232j:plain

埋め込んでいても同じように編集や操作が可能です。

注意点として誰でも編集できる状態になっているので、Webサイト側で対象者を選定できる仕組みを用意するか、誰が編集しても問題ないボードだけを挿入するようにしましょう。

■複数人でリアルタイムコラボ連携をしよう

これまで仮想ホワイトボードの機能について見てきましたが、「WebBoard」には複数人とリアルタイムなコラボ連携ができる機能が提供されています。

これにより、高機能な仮想ホワイトボードを使いながらオンラインで会議や打ち合わせなどができるようになるわけです。


使い方は簡単でメニューから【Share】をクリックします。

f:id:paiza:20200122124259j:plain


2種類のモードを選択できるようになっています。

f:id:paiza:20200122124313j:plain

モードの違いについては以下の通りです。

  • 【Collaborationモード】ボードを同時に編集できる
  • 【Teacherモード】ボードの編集は自分だけ


あとは、表示されているシェア用のリンクを友人・知人に教えてあげるだけです。

f:id:paiza:20200122124330j:plain

最後に【Share board】ボタンをクリックすれば準備完了です!


仮想ホワイトボード上にビデオカメラやチャット画面が表示されます。

f:id:paiza:20200122124823j:plain

チャットやカメラの画面は表示・非表示を切り替えることも可能です。また、カメラ映像をオフにして音声だけの通話もできるので便利です。


チャット画面はシンプルな構成になっており、画面下のボックスにテキストを入力して送信するだけです。

f:id:paiza:20200122124837j:plain


ファイル共有機能もあり、さまざまなファイルを一括で相手に送信できます。

f:id:paiza:20200122124858j:plain

会議資料や画像ファイルなど、まとめて複数人に送付したいときに便利でしょう。

このようなコラボ連携機能を活用しながら、仮想ホワイトボードを同時に編集したりチャットや通話を自由に楽しむことができるわけです。また、ブラウザの拡張機能を導入することでPCの画面共有や録画をおこなうことも可能になります。

ちなみにシェア用のリンクを送付された相手側は、そのリンクをブラウザで開くだけですぐに同じボードを利用することができます。面倒な登録などは不要なので便利でしょう。

■動画&ゲームでプログラミングが学べるpaizaラーニング


動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。

Python入門編」「C#入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。

また、paizaではゲームで遊びながらプログラミングを学べるコンテンツもご用意しています。『コードクロニクル』は、ファンタジーRPG風の世界観で冒険しながらプログラミング問題を解いてストーリーを進めていくゲームです。ぜひプレイしてみてください!


 

■まとめ

今回は、仮想ホワイトボードを利用してブラウザを会議室にできるサービスをご紹介しました。

WebBoardはまだリリースされたばかりのサービスなので、今後もさらなる機能追加やユーザービリティの向上などが予定されています。ブラウザさえあれば誰でも手軽に仮想ボードを活用できて、複数人とコミュニケーションまで可能になるのは重宝するでしょう。

ぜひ、みなさんも友人・知人と一緒にコラボ連携を楽しんでみてください!


<参考リンク>




paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら
paizaラーニング

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら
paizaのスキルチェック

paizaのおすすめコンテンツ

Webセキュリティ入門 ハッカー入門 Webセキュリティ講座がスタート!CVは内田真礼さん! Python✕AI 機械学習入門講座 CVに上坂すみれさんを起用!人気の機械学習講座を公開中!
paiza転職 paiza新卒 EN:TRY paizaラーニング Copyright Paiza, Inc, All rights reserved.