tag:crieit.net,2005:https://crieit.net/users/seiun_kunisaki/feed Crieitでユーザー国崎犀考による最近の投稿 2020-04-03T15:25:49+09:00 https://crieit.net/users/seiun_kunisaki/feed tag:crieit.net,2005:PublicArticle/15807 2020-04-03T15:25:49+09:00 2020-04-03T15:25:49+09:00 https://crieit.net/posts/AirCommute <p>ここ1か月で社会が激動の変化を迎えましたが、みなさまいかがお過ごしでしょうか。私はCrieitで1か月前に開催されたweb1weekという企画で、一緒にリモートワークをする人を探すための掲示板を作りました。<br /> <a href="https://crieit.net/boards/web1week-202003/1bd7b1c10179e9c61e480d4db4767cf4">https://crieit.net/boards/web1week-202003/1bd7b1c10179e9c61e480d4db4767cf4</a><br /> そこそこ需要があり、今回はその延長で『<strong>誰でも一緒にリモートワークができるビデオ会議システム</strong>』を作ったので紹介します。</p> <p><strong>オンラインコワーキングスペース AirCommute</strong><br /> <a target="_blank" rel="nofollow noopener" href="https://air-commute.com/">https://air-commute.com/</a></p> <p><a href="https://crieit.now.sh/upload_images/6f96fcf2344fb7ca31bd67fa7fdf6b235e86cf58ee9d7.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/6f96fcf2344fb7ca31bd67fa7fdf6b235e86cf58ee9d7.png?mw=700" alt="スクリーンショット" /></a></p> <h2 id="特徴"><a href="#%E7%89%B9%E5%BE%B4">特徴</a></h2> <p>カメラの映像をやりとりする部分はWebRTCを使ったP2P通信で、中央サーバーを経由することなく利用者間で直接接続します。オンライン状態のユーザーの中から数人を選んで相互に仕事中のカメラの映像を写すことができます。<br /> 実際のコワーキングスペースに例えると、目の前の数人を視界に入れるイメージです。他の利用者と合わないと思ったら部屋から退出するのではなくその窓を閉じることで対応できます。</p> <h2 id="技術"><a href="#%E6%8A%80%E8%A1%93">技術</a></h2> <p>引き続きFirestore+Vue.jsを使って効率的に開発することができました。Realtime Databaseでオンライン状態を登録しています。 <a target="_blank" rel="nofollow noopener" href="https://firebase.google.com/docs/firestore/solutions/presence?hl=ja">https://firebase.google.com/docs/firestore/solutions/presence?hl=ja</a></p> <p>WebRTCでP2P通信に必要な情報をFirestoreで交換する部分は <a target="_blank" rel="nofollow noopener" href="https://webrtc.org/getting-started/firebase-rtc-codelab">https://webrtc.org/getting-started/firebase-rtc-codelab</a> を参考にしましたが、コードが不完全でFirestore初心者の私はここでかなり時間を取られた。</p> <p>あとは1対1の通信を多対多に拡張、Vue.jsに移植、UXを整えるという順でモチベーションのために常に動作する状態を維持しながら開発しました。<br /> プロトタイプの段階の開発は手探り感が楽しいです。</p> <p><strong>デザイナーがいないので自力で作ったロゴ</strong><br /> <a href="https://crieit.now.sh/upload_images/8f15abdc6b9959fdbc96f67a92ed31395e86d57c2b466.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/8f15abdc6b9959fdbc96f67a92ed31395e86d57c2b466.png?mw=700" alt="ロゴ" /></a></p> <h2 id="リモートワークのメリット"><a href="#%E3%83%AA%E3%83%A2%E3%83%BC%E3%83%88%E3%83%AF%E3%83%BC%E3%82%AF%E3%81%AE%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88">リモートワークのメリット</a></h2> <p>孤独に作業するより仲間と一緒にやった方がサボらないし集中力が上がり、なにより心強くてメンタルによいと思います。<br /> 在宅でカメラ越しに一緒にリモートワークをする人がいればZoomなどの既存のビデオ会議ツールを使えばいいのですが、所属組織でビデオ会議グループがなかったり時間が合わないなどの関係で一緒にやる仲間がいない場合には、現実の場合と同じくコワーキングスペースを使うのが現実的でしょう。</p> <h2 id="オンラインコワーキングスペースとして"><a href="#%E3%82%AA%E3%83%B3%E3%83%A9%E3%82%A4%E3%83%B3%E3%82%B3%E3%83%AF%E3%83%BC%E3%82%AD%E3%83%B3%E3%82%B0%E3%82%B9%E3%83%9A%E3%83%BC%E3%82%B9%E3%81%A8%E3%81%97%E3%81%A6">オンラインコワーキングスペースとして</a></h2> <p>誰でもカメラ越しに一緒にリモートワークをできます。時間を決めずに立ち寄れて、いつ行っても誰かがいて、出入り自由というような気軽な雰囲気を目指しています。<br /> 個人開催のオンラインコワーキングスペースにありがちな招待制で厳しいルールを作らなくていいように、一つの部屋全員でカメラ映像を共有するのではなく、好きな数人を選んで相互に写すゆるいつながりからなる仕組みにしました。<br /> コワーキングスペースのもう一つの魅力である異業種交流的な機会を増やせるように各ユーザーがアピール広告を掲げられたら良いので、とりあえずのところテキストを載せられるようにしました。将来的に画像かリッチテキストを載せられればと思います。<br /> 気軽さという点から専用アプリをインストールすることなくブラウザから使えるように、またアカウント登録なしで利用できるようにしました。<br /> ワークに限らず勉強や作業など、幅広くご活用いただければと思います。</p> <h2 id="使い方"><a href="#%E4%BD%BF%E3%81%84%E6%96%B9">使い方</a></h2> <p>ウェブカメラが必要。ブラウザ（Chrome推奨）でサイトを開き、メールアドレスでアカウント登録をするかツイッター連携でもログインできます。<br /> また登録なしで名前だけでもログインできるので、ちょっと利用したい場合はこちらからご利用ください（アピール広告は載せられません）<br /> カメラを開いた後、オンラインのユーザーに対して『オファーをする』をクリックして、相手が『オファーを受け入れる』をクリックするとビデオ通話が始まります。<br /> サーバーを介しないP2P通信ですが、企業内などファイヤーウォールの条件によっては通信できないことがあります。ご了承ください。<br /> 窓が開いている間はチャットができるので、あいさつなどのコミュニケーションはここでどうぞ。また人の写った窓の大きさは自由に変えられます。<br /> 最初は人がいないかもしれませんが、誰かがログインするまでしばらく待ってみてください。</p> <h2 id="環境について"><a href="#%E7%92%B0%E5%A2%83%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6">環境について</a></h2> <p>パソコン版Chrome推奨。iPhone版Chromeではカメラが使えません。Android版Chromeは一応使えますが窓の大きさが変えられない問題があります。<br /> Firefoxでは通信の確立／終了のイベントが取れないのでチャット画面がうまく出ないのと、ビデオ通話終了時に窓が自動で閉じません。<br /> Edgeは手元の環境ではカメラ映像のストリームをPeerConnectionに乗せるところで失敗。<br /> iPhone版Safariは動画の再生が自動で始まらないので使用不可。</p> <h2 id="最後に"><a href="#%E6%9C%80%E5%BE%8C%E3%81%AB">最後に</a></h2> <p>経済活動を止めるな！</p> <p><a target="_blank" rel="nofollow noopener" href="https://air-commute.com/">https://air-commute.com/</a></p> 国崎犀考