ぽんぽこ日記

プログラミング、読書、日々の生活

【製作実績】グループ通話アプリVoiceLink®を開発しました

この半年間、開発を担当したVoiceLink®というアプリがリリースされました。

VoiceLink®とは?

VoiceLink®は多人数の音声グループ通話が出来るスマートフォンアプリです。 facebookアカウントを持っている人なら誰でも無料で使えます。

https://www.vlvlv.jp/ja/

VoiceLink

VoiceLink

  • Synergy Drive Inc.
  • ソーシャルネットワーキング
  • 無料

特徴

通話に参加するメンバーは、「ルーム」と呼ばれる仮想空間にアバターとして参加します。発話したメンバーのアバターは、自分の声の抑揚に合わせて、ピクピクとアニメーションするので、会話にライブ感が感じられる作りとなっています。


VoiceLink サービス紹介 (公式)

ルーム内のアバターにスターを送って「いいね!」を伝えることが出来ます。

http://a3.mzstatic.com/jp/r30/Purple71/v4/55/74/28/5574282d-7248-38cf-7c4d-1785e865ef62/screen696x696.jpeg

ルームでは通話中に写真や動画をリアルタイムで一緒に見る事が出来ます。

http://a2.mzstatic.com/jp/r30/Purple19/v4/a5/4d/b4/a54db462-1e74-2533-c7c2-8b17f111d4b1/screen696x696.jpeg

やったこと

形式上、筆者の役割は、現行バージョンから1.0のバージョンアップ作業のお手伝いとなります。しかし、今回のバージョンアップに当たっては、筆者が内部の設計を一新したうえで、ほとんどのコードをSwiftで書き直しています。実質的にはサービスのアイデアをベースに一から開発したと言わせていただいて良いかと思ってます。(サーバサイドは既存のものを使用しています)

前バージョンでは、いくつかの課題が指摘されていたUI/UXについても、筆者がこのアプリのもともとの目的・狙いに立ち返ってゼロベースで見直しを提言し、採用いただきました。大まかな画面遷移や情報設計を筆者が行い、意匠に落とし込む部分をデザイナーの方にお願いするという形ですすめました。

以前紹介したプロトタイピング手法も、当初はこのアプリの開発のために編みだしたものです。

ponpoko1968.hatenablog.com

最終的には、これまで担当したアプリの中でも、もっとも広範な範囲で貢献した形となったと思います。

どうやったのか

設計と開発を担当するに当たり、筆者の中では「3つのS」をテーマにしました。

  • シンプル(simple)
  • スピード(speed)
  • シームレス(seamless)

シンプル

UI/UXの見直しに当たり、旧バージョンを操作してみて感じたこととして、1つの画面にUI部品が多すぎる印象がありました。

このアプリで、ユーザの方に一番大きく見て欲しいのは、ルームにアバターが集まってワイワイ楽しく話している部分なので、UI部品を用途別にパネルにまとめて、必要に応じて出し入れするなどして画面を広く取り、ユーザが会話に集中出来るよう、すっきりした使い心地を目指しました。

スピード

本来バックグラウンドで実行出来る処理が、UIスレッドで実行されているためにユーザ操作をブロックする(フリーズして見える)など、UX上好ましくない動作が散見されたため、まずブロックしている処理をワーカースレッドに出すようにしました。

シームレス

通話中などに非同期に発生したイベントがリアルタイムに(極力リロード操作などを必要とせず)反映するよう、リアクティブな処理を念頭に設計しました。

苦労したこと

筆者は今回のバージョンアップから、つまりプロジェクトとしては途中から開発に参画した訳ですが、過去には当時担当していたエンジニアが技術的難易度の高さから音を上げてしまったこともあった、など聞かされて、正直びびりました(笑)。筆者が参画する前の社内チャットのやりとりを振り返ってみると、これまでの開発には相当の苦労があったであろうことが生々しく偲ばれる下りもありました。

新バージョンの開発は4月頃から始まったのですが、筆者にとっても旧バージョンを超えるクォリティをもつものを作ることが出来るのか、確信をもって進めることが出来るようにするため、1ヶ月弱の技術検証期間を設けてもらうことにしました。その期間に後述するリアクティブ系の技術選定や、SIPプロトコルの理解、各種ライブラリのiOSとの統合などを行いました。こうした技術的リスクを潰すフェーズを設けることを提案し、ご理解いただけたことで、その後の開発をオンスケジュールで進められる事につながりました。

実際のところ、VoiceLink®は筆者がこれまで担当したアプリの中では複雑な部類に入ると思います。複雑さの主な要因としては、異なる3つのプロトコルを用いて、それらが連携して1つのサービスを作り上げているということがあります。1つは一般的なWeb API、もう一つがアバターの動きや入退室などのイベントをリアルタイムにクライアントへブロードキャストするTCPベースの独自の非同期プロトコル、そして音声通話のプロトコル(SIP)です。*1

とくに非同期イベントの処理はいわゆる「コールバック地獄」に陥りやすく、従前のアプローチでは同様の問題が生じてデスマーチ化することが予想されました。これを避けたかったため、今回はRxSwiftを採用しました。RxSwiftやその他リアクティブ系の技術を使うために、元来はObjective-Cでの開発の方が慣れていた筆者でしたが、思い切って今回、Swift言語での開発を決断しました。

また、画面遷移の制御にはReSwift/ReSwiftRouterを併用しました。 ReSwiftについては、id:ninjinkunさんの記事がとても参考になりました。ありがとうございます。氏も仰ってますが、アプリの状態が一カ所にまとまっているのはとても気持ちいいです。

ninjinkun.hatenablog.com

in.fablic.co.jp

実際こうしたリアクティブ系の技術をつかったことで、狙い通りの効果が得られたので、成功であったと思います。

その他動作試験に当たっては、複数のユーザでの会話を再現するため、iOSシミュレータの複数立ち上げ方法を調べたり、

ponpoko1968.hatenablog.com

別の部屋に実機を置いて、別のPCスピーカーからrebuild.fmをかけっぱなしにて連続運転試験をして会話の音質を確認したりと、いろいろ工夫をしました。

感想

VoiceLink®を提供するシナジードライブ社は、90年代インターネットの黎明期において、伝説的な起業家であった板倉雄一郎氏が設立したスタートアップです。同社の設立の経緯については、氏が著した下記の本に詳しいです。

社長復活

社長復活

筆者としては、久々にIT業界の著名人と一緒にお仕事ができて、とても光栄に思いましたし、またいろいろ刺激を受けることが出来て良かったです。

これから

おそらく今後もVoiceLink®には継続的にお手伝いさせていただく事になると思うのですが、技術的には音声通話の基本部分に使われているCore Audio技術の理解を深めることで、新しい機能の提案が出来るのではないかとアイデアを温めているところです。

このVoiceLink®をはじめとして、このところ音声のみを用いた新しいコミュニケーションサービスがつぎつぎと出てきているよう*2*3で、既存の、文字によるコミュニケーションを主体としたSNSでは、炎上などの問題も顕在化する中、文字でもなく映像でも無く、音声という伝達手段の可能性が見直されているように思います。

実際、チーム内でおこなってきた、週一回の開発ミーティングも、開発中のVoiceLink®を使って行ってきました(いわゆるドッグフーディングですね)。通話品質がよいため、快適に会話ができました。ビジネスユースにも耐えうる作りと自負しているので、ぜひお試し下さい。

参考文献など

今回、プロジェクトを通じて参照した技術書を挙げておきます。

Core Audio

iPhone Core Audioプログラミング

iPhone Core Audioプログラミング

Learning Core Audio: A Hands-On Guide to Audio Programming for Mac and iOS

Learning Core Audio: A Hands-On Guide to Audio Programming for Mac and iOS

  • 作者: Chris Adamson,Kevin Avila
  • 出版社/メーカー: Addison-Wesley Professional
  • 発売日: 2012/03/30
  • メディア: ペーパーバック
  • クリック: 12回
  • この商品を含むブログを見る

SIP

次世代SIP教科書 (インプレス標準教科書シリーズ)

次世代SIP教科書 (インプレス標準教科書シリーズ)

基礎からわかるTCP/IP SIPによるVoIPプログラミング―Linux対応

基礎からわかるTCP/IP SIPによるVoIPプログラミング―Linux対応

UI/UX

IA/UXプラクティス モバイル情報アーキテクチャとUXデザイン

IA/UXプラクティス モバイル情報アーキテクチャとUXデザイン

プロトタイピング実践ガイド スマホアプリの効率的なデザイン手法

プロトタイピング実践ガイド スマホアプリの効率的なデザイン手法

今日からはじめる情報設計 -センスメイキングするための7ステップ

今日からはじめる情報設計 -センスメイキングするための7ステップ

よくわかるAuto Layout  iOSレスポンシブデザインをマスター

よくわかるAuto Layout iOSレスポンシブデザインをマスター

【スポンサーリンク】