Help us understand the problem. What is going on with this article?

誰でも簡単にビデオ通話できる「オンライン帰省.com」作ってみた【Webサービス】

はじめに

このサービスは、コロナ大きな影響を及ぼしている現在の世の中で、
個人開発者の自分が少しでもStayhomeのきっかけになればと思い開発したサービスの工程です。

今までなかなか忙しくて帰省出来なかった人も
オンラインで帰省できるきっかけになれば嬉しいです。

ソースコードを後半で公開しています。興味ある方は使ってみてください。

開発者のTwitterアカウントはコチラ

サービスイメージ

サービスイメージ
パソコンタブレットスマートフォンをお持ちの方であれば、
誰でも簡単ビデオチャットができるサービス
オンライン帰省.com」を開発してみました。

実際につくったサイトはこちら
http://online-kisei.com/

サービスをつくった経緯

オンライン帰省」というワードが一時的に話題にあがりました。
自粛が必要な中、帰省ラッシュを危惧し「帰省はオンラインで行ってください」という要請でした。
コロナが街中に蔓延する中、帰省先にお年寄りのご両親や、特に小さなお子様がいらっしゃるご家庭にとっては他人事ではないと思います。

そんな中で、自分のためでもあり、他の誰かの少しでも役に立てばと思い、どの端末でも、簡単な操作で、すぐにビデオチャットができるサービス「オンライン帰省.com」を思いつき、開発しました

利用技術

ホスティングはAWS
Linux(Amazon Linux)
Apache
Html(scss/js)
SkyWay(WebRTC基盤)

※今回、僕の方でバックエンド実装していません
ビデオ通話に関しては、完全にSkyWay任せで、jsを多少いじった程度です。
SkyWayが非常に優秀だったため、開発工数はかなり削減できました。

制作スケジュール

工程 工数
ワイヤー作成 1時間
デザイン 5時間
開発 10時間

作業時間はだいたい丸2日くらいでできました。はやい。

ワイヤー

ワイヤー
(ワイヤー、めちゃくちゃダサいですが)
はじめからコンセプトは「誰でも簡単に扱える」という点だったので、
シンプルな遷移や、数値番号の入力という点は意識していました。
英字だと、伝えるときに発音が難しかったり、お年寄りには馴染みがなかったり。
数字であれば口頭でも言いやすいですし、電話でメモることも容易だなと。

あとは余計なメニューなどのUIなども用意しないこと。
どこを押したらいいかわからないという事象にはしないように気をつけました。

ただ、苦戦したのがカメラ・マイクの許諾まわりです。
このあたりはブラウザによって、端末によっても変わるのでどのようにアナウンスするのが良いか最後まで悩みました。
ただ、最終的にはそこは「帰省する側のみなさん」に甘えようと考えました。
UIでは解決しきれない部分も出てくるので、普段Webやアプリに慣れ親しんでいるみなさんが、親御さんなどへレクチャーするいいコミュニケーションのきっかけになるのではという思いがありました。

実際、僕も64歳の親に電話をかけて、オンライン帰省.comを利用したのですが、操作に関する「こうだ、ああだ」という会話は、僕と親の中では普段しない初々しい会話内容でした。

デザイン

デザイン
デザインはページ数の割に結構時間がかかりました
作っては直してを繰り返しました。
最初は温かみのあるなどをボタンにつけようと考えていました。
ただ、家族や実家、「帰省」というワードに対して思い描く人それぞれで、UIとしては色をつけないほうがいいのではという考えに至りました。

また、TOPに利用させていただいている大変素敵写真を活かすことにも繋がりました。
※直前にも関わらず写真のご利用についてご快諾いただいたカメラマン寺川昌宏さんには感謝してもしきれません。

開発

開発の大部分はSkyWayのWeb版に用意されているデフォルトのイベントハンドラーで事足りてしまいました。
僕が改修したのは、UIに繋ぎこむ部分だけで、バックエンド側はほとんど触っていません。
サンプルはこちら

ソースコード

https://github.com/nsk-dev-public/online-kisei
※寺川さんの写真は含めておりません
ソースコードは上記Github全て公開しています。
SkyWayを利用する際などに、ご参考にしていただければ。
SkyWayサービスサイト

最後に

これをきっかけに(このサービスでなくてもいいので)
是非みなさんもオンライン帰省検討してみてください。

少しでもみなさんのお役に立てたのであれば本望です。

長々とした内容をここまでご拝読いただき、ありがとうございました!

他にもアイディアやサービス作りを頻繁に発信していく予定ですので
改めてになりますが、よろしければTwitterフォローの方もよろしくお願いします。
Twitterアカウントはコチラ

また、全然30日連続できてないですが30日チャレンジ記事というのもやっています。
【30日チャレンジ】新規サービスアイディアを毎日投稿します

それではまたお会いしましょう。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした