おばあちゃんと家族のためのテレビ電話を自作した話

はじめに

さくらのナレッジ編集部の法林です。

ある日、さくナレ編集部に読者からのお便りが届きました。そこには、「高齢者の家族が子どもや孫たちとビデオで会話する仕組みを、さくらインターネットのサーバを使って作りました。せっかくなので作ったものを発信したく、ご紹介いただけませんでしょうか」というようなことが書いてありました。

ITエンジニアであればブログや勉強会などで発信するところだと思いますが、読者の方とやりとりする中で、どうやら仕事もIT関係ではない方が、個人の趣味…というよりも家族からの要望に応える形でシステムを開発したらしいことがわかってきました。そこで、これは編集部で取材して記事にしてみましょうということで、どのような経緯でどんなものを作ったのか、そこで当社のサーバはどんな役割を果たしたのかなどを、システムを作られた方にお聞きしました。

開発に至る背景

お話をうかがったのは、福岡県にお住まいのせきさん(@widestone1970)です。せきさんは、奥様、お子さん、それから奥様のお母様(90歳ぐらい)と一緒に暮らしています。また、奥様の姉妹(2人)とそれぞれのご家族が関東にお住まいです。この記事では、せきさんのご自宅をhome、関東にお住まいの皆さんの家をfamilyと表記します。

familyの皆さんはhomeから遠く離れた土地に住んでいるので、なかなか顔を合わせる機会がありません。お母様は、family一家との電話や、LINEで送られてくるお孫さんの写真を見るのを楽しみにしていました。そのような姿を見ていた奥様から、リアルタイムで顔を合わせて会話できる手段として、テレビ電話を用意することはできないかという相談が来ました。せきさんはITの仕事をしているわけではなく、システムに関する専門的な知識も持ち合わせていませんが、以前からIT関係のことに興味はあったそうです。さらに追い風として昨年あたりからChatGPTなどのAIツールが普及してきたので、これの助けを借りれば何か作れるかもしれないと思い、開発を試みることにしました。

システムの検討

開発を試みることにしたと書きましたが、最初から自作しようとしたわけではなく、まずは既存のテレビ電話システムを導入することを考えていろいろ調べてみました。検討したのはLINEやAmazon Echoです。しかし、LINEは画面が小さいことや操作が複雑なこと(特に高齢者にとって)、Amazon Echoも画面が小さい上に広告が入るので見づらいといった難点があり、今回の要件には合わないと感じました。特に今回の場合、お母様のような高齢者でも簡単に操作できるように、ユーザインタフェース(UI)は極力シンプルに、できれば電話に出るような感覚で使えるようにしたいところです。しかし、そのようなUIを最初から備えたツールは探しても見つかりませんでした。

そこで次善の策として、UIをカスタマイズできるようなテレビ電話ツールを探すことにしました。こういったツール探しもChatGPTに相談したところ、紹介されたのがOpenViduというOSSのビデオカンファレンスツールでした。せきさんはこれをベースにシステムを試作しました。

OpenViduを使ったシステム構成

OpenViduを使ったシステム構成は上図のようになります。

• サーバを1台用意し、OpenViduをインストール
• homeとfamilyにPCやスマホを用意してOpenViduにログインし、同じセッションに参加して通話

OpenViduを動かすサーバはさくらのVPSにしました。ネット上に知見が多いことや、メニューやドキュメントがすべて日本語でわかりやすいのが選定理由だそうです。VPSのプランは8Gプラン(CPU 6コア/メモリ8GB/SSD 400GB)、OSはUbuntuを使用しました。

OpenViduのインストールと設定

OpenViduにはスタンドアロンのアプリやプラットフォーム版がありますが、ここで使用したのはOpenVidu Meetというスタンドアロンのアプリです。OpenViduのウェブサイトにはさまざまな環境に応じたセットアップ手順が載っていますが、ここでは単体のサーバにおけるインストール手順の概略を示します。詳細はリンク先のドキュメントをご覧ください。

まずはサーバにログインします。さくらのVPSであればコントロールパネルのコンソールからログインできます。あるいはSSHで接続します。

ログインしたら、OpenViduが使用するポートを通すようにファイアウォールを設定します。使用するポートは以下です。Ubuntuであればfirewalldを用いて設定します。(具体的なコマンドはインストール手順のドキュメントを見てください)

プロトコル	ポート	用途
TCP	80	HTTP
TCP	443	SSL
UDP	443	STUN/TURN
TCP	1935	RTMP
TCP	7881	WebRTC
UDP	7885	WHIP
TCP	9000	MinIO
UDP	50000-60000	WebRTC

ファイアウォールの設定をしたら、OpenViduのインストールプログラムを実行します。

sh <(curl -fsSL http://get.openvidu.io/community/singlenode/latest/install.sh)

インストールプログラムの中で、以下の設定を行います。

• ドメイン: 自分で用意したドメインを使う場合はそれを設定します。自分で用意しない場合はsslip.ioドメインの配下のホスト名が自動的に生成されて割り当てられます。
• SSL証明書: 例えばLet's Encryptを選択するとインストールプログラムの中で設定してくれます。
• モジュール: OpenViduにさまざまな機能を追加できます。(今回は追加していません)

あとはデフォルト設定のままENTERキーを押していくとインストールプログラムが実行されます。プログラムの中ではDockerコンテナが多数読み込まれて起動します。プログラムが終了すると以下のようなメッセージが表示されます。

OpenVidu Meet will be available at:
    URL: https://(インストールプログラムで入力したホスト名)
    Credentials:
        - User: admin
        - Password: (インストールプログラムが生成したパスワード)

この時点ですでにOpenVidu Meetが起動しています。上記のURLにアクセスするとログイン画面が表示されるので、User欄にadmin、Password欄に生成されたパスワードを入れると管理画面にログインできます。そして、管理画面でセッションを作成するとURLが生成されます。これをfamilyの皆さんに伝え、一緒に接続するとビデオ通話ができるようになります。

ハードウェアやネットワークなど

ビデオ通話を行うにはPCやスマホが必要です。familyの方はPCでもスマホでもよく、ネットワークもモバイル回線でも問題ありませんが、homeの方は高齢者が使うので、小型PC(MINISFORUM MT4UB1)とタッチパネルモニター(Dell P2424HT)を用意し、画面を触って操作できるようにしています。また、詳細は後述しますがセッションを維持する必要があるため、インターネット回線は固定回線を使用しています。

UIのカスタマイズ

ここまでのセットアップでビデオ通話はできるようになりますが、このままではOpenViduへのログインなどの操作が必要で、高齢者が使うには難しいです。そこで、OpenViduの利点であるUIをカスタマイズできる点を活かして、高齢者でも操作しやすいようなUIを開発しました。

せきさんはこのために開発環境としてVSCodeを用意し、ChatGPTに尋ねながらUIを開発していきました。OpenViduのフロントエンドはJavaScriptで書かれているので、ChatGPTが出力するJavaScriptのコードをOpenViduに設定し、試行錯誤しながらUIを作っていったそうです。また、開発の途中からはClaude Codeも使うようになりました。Claude CodeはVSCodeの中で使えるのがとても便利で、開発が大いに捗ったそうです。

このような作業を経て開発したUIと操作手順は、およそ以下のようなものになりました。

• homeとfamilyがそれぞれOpenViduにログイン(ログイン後はログイン状態を常に維持)
• familyの画面には「参加」ボタン、homeの画面には待ち受け画像(家族の写真)を表示
• familyが「参加」ボタンを押すとセッションに参加
• familyがセッションに参加すると、homeが呼び出し画面に遷移。呼び出し画面には「電話に出る」ボタンだけが表示される
• homeが「電話に出る」ボタンを押すとビデオ通話開始
• 通話中の画面もカスタマイズし、中央に相手のカメラ映像、左下に自分のカメラ映像、右下に「電話を切る」ボタンを表示
• homeかfamilyいずれかが「電話を切る」ボタンを押すと通話終了
• 通話が終わると、homeはセッションを維持したまま待受画面に戻り、familyはセッションから離脱して「参加」ボタンの画面に戻る

UIにおけるポイントは、homeの画面における操作を「電話に出る」「電話を切る」ボタンを押すだけにしたことでしょう。これをタッチパネルで押すだけにすれば高齢者でも操作できるだろうと考え、このように実装したそうです。また、OpenViduにはセッションを監視する仕組みがあるので、これを利用して、familyがセッションに参加したら画面を切り替える処理を実装しました。

なお、上の図ではhomeとfamilyの2拠点で通話していますが、その後の開発で、family 2拠点＋homeの3拠点通話にも対応しました。3拠点で通話するときは画面を4分割し、3拠点のカメラ映像が表示されるようになっています。

開発の苦労とシステムの使用感

システムの説明はこれぐらいにして、この後はせきさんに、開発の過程や、開発において苦労した点などをうかがってみました。

せきさんは一昨年ぐらいから、AIを使った作業の効率化に取り組んできました。仕事関係や家事に関するものなどを少しずつ作っていたそうです。それが今回のシステム開発につながりました。ちなみに今回の開発期間は、奥様から依頼をもらってから1か月ぐらいとのことです。

開発において苦労した点としては、これまでレンタルサーバやVPSのような外部のサーバを利用したことがなく、今回初めて利用したので、これを自分できちんと扱えるかどうかが大きな不安でした。特にセキュリティ面の設定が心配で、そこもAIに助けてもらいながら設定していったそうです。また、サーバにログインして作業するのも初めてで、最初はブラウザからさくらのVPSのコンソール機能を使ってログインしていましたが、やや反応が遅くて使いにくいということで、それまで言葉でしか聞いたことがなかったSSHによるリモートログインにも初挑戦しました。

このように、いろいろと不慣れな点が多くて開発は大変でしたが、先述したVSCodeやClaude Codeの利用など、学びになったことも多かったそうです。

また、せきさんの奥様からはシステムの使用感についてのコメントがありました。いわく、お母様や姉妹を交えて会話ができる特別なコミュニケーションツールになっていて、特に映像や音声のタイムラグを感じないことが円滑なコミュニケーションにつながっているそうです。OpenViduはブラウザ間でリアルタイム通信を行う技術であるWebRTCを使っているので、これが低遅延な映像配信、ならびにタイムラグの解消に役立っているのではないかと考えられます。

取材を終えて

さくらインターネットのコーポレートサイトには「『やりたいこと』を『できる』に変える」という企業理念が掲げられています。今回の取材を通して感じたのは、これはまさにせきさんの「やりたいこと」を、当社のサーバを使うことで「できる」に変えた例に他ならないことです。当社のサービスをご利用いただいているユーザは企業だけではなく個人の方もたくさんいらっしゃいます。このような個人の方々の日々の暮らしをアップグレードする、そういったことにも当社のサーバが貢献できたことをとてもうれしく思いました。

それからもうひとつ感じたのは、もはやITを専門としていない方でもAIにサポートしてもらうことで、従来なら自力ではできなかったようなシステム開発ができるようになったことです。ITインフラを提供する事業者としてはご利用いただける機会が増える可能性があるのでありがたいですが、それと同時に、AIによる提案の情報源となる自社からの情報は、正確なものを発信するように努めていく必要があると感じました。

ちなみに今回の例ではChatGPTやClaude Codeを使って開発が進められましたが、さくらインターネットも「さくらのAI Engine」というAIサービスを提供しています。OSSで提供されているモデルや日本語に特化したモデルなどを用意し、他のサービスや事業者に利用データを流出せずに使うことができます。これからAIに手助けしてもらって何かを作りたいという方がいらっしゃいましたら、ぜひご検討ください。

当社のコーポレートサイトに掲載されているメッセージには「インターネットには人と社会を幸せにする力があると信じて、未来のあるべき姿を思い描きながら、あらゆるアプローチを提供します」という一文もあります。今回のような実績を積み重ね、これからも多くの人々の幸せに貢献していきたいと思います。