TAMINIF’s blog

大阪在住のWebエンジニア。iOSアプリもやってます。勉強会にも参加してます。最近はマネージャー色強め

WebRTCを使ってニコ○コ生放送みたいなiOSアプリを作る

はじめに

タイトルは釣りです。多分もう古くて今動画配信といえばInstagramとかTikTokとかライブフリマとかだと思うんですけど
おっさんなので許してください。

概要

WebRTCという技術を知って、今なら無料のサービスだけでこういうの作れるよなとずっと考えていて
去年11月にあのサービスもWebRTC技術を使うことを発表したこともあって、先にやってみました。

続きを読む

パフォーマンスを下げないためのリモートワーク

これを書いているのは今日の日中である。なぜ日中にこんなもの書いている暇があるかというと、体調不良で欠勤しているからである。ちゃんと休めよという指摘を受ける前に、今回体調不良になって思ったことをまとめておく。

先週末に人の集まる場所に行ったからか、月曜日から風邪をひいてしまった。ピークは月曜日でこの日は半休とらないときついレベルで体調が悪く、薬を飲んでゆっくり寝ていた。火曜日からは仕事できるくらいまで回復はしたんだけど、月曜にはなかった喉をやられてしまった。
これの厄介なところは自分では働けるレベルまで回復してるつもりだけどとても辛そうに見えることと、ミーティングに参加できなくなることだ。水曜にあったミーティングでは参加したけど話すことができず、聴講者にしかなれなかった。電話がかかって来てもまともに話せなくて、この日も早退した。

問題は今日である。朝起きた時点では出社できると思っていた。実際に通勤のために駅まで歩いていた。最寄り駅まで歩いて15分である。しかし、歩いている途中で咳き込む自分を見て、考え直すことにした。

  • 咳き込むことで周りに不快な思いをさせるんじゃないか
  • (環境的な意味で)会社の空気が悪いので、喉だけ酷くなるのではないか
  • 今日風強いしこれ出社させる気ないんじゃないか

結局途中で引き返し、欠勤連絡をして寝ることにした。けど、今寝れていないのでこれを書いている。 ここで考えたのは、今日家なら仕事できたんではないかということである。うちはまだリモートワークの環境が整っていないので、リモートで仕事することはできない。

今回仕事を休むことになったのは、自分が出勤することでチームのパフォーマンスを下げると思ったからである。裏を返せば、チームのパフォーマンスを下げなければ仕事はできるわけで、その課題はリモートワークという選択肢で比較的簡単に解決できるのではと思ったことが今回このブログを書くきっかけである。
もちろん、体調が悪いのであれば素直に休めよという意見もごもっともである。ただ、単に体調が悪いと言っても1か0かで語れるものではないし、単に有給を消化するのも面白くない。常に元気100%で働けるもんでもないし、今回の件も自分で働けると判断したので、選択肢があれば働いていたと思う。パフォーマンスを下げないために、環境を整えることは大事だと思うし、その選択肢にリモートを加えることはありではないかと思った。前々から、リモートは賛成ではあったが、今回の件でさらに推進していきたいと考えている。

「それリモートワーク導入じゃないと解決できないの?」というご意見のために、他の解決策も考える。

咳き込むことで周りに不快な思いをさせるんじゃないか

これは自意識だけで実際に聞いたわけではないが、自分なら嫌だなと思う。うつることも考えるし、単純にうるさい。咳き込むか咳き込まないかで言えば絶対に咳き込まない方が良い。これの解決策は自分が風邪を治すしかないので、環境でどうにかなるものではないと思う。 なお、周りのパフォーマンスを下げるのは咳き込むだけではない。机を叩くことや貧乏ゆすりも同様である。ついでに書いておきたい。

(環境的な意味で)会社の空気が悪いので、喉だけ酷くなるのではないか

これはリモートワーク以外に、下記の選択肢があると考えている。

  1. 会社(の場所)を変える
  2. 空気をよくする機材を導入する
  3. 会社を変える

1については常に言い続けているが、すぐに変えられるものでもない。
2については導入済み
3については検討するレベルではある。ちなみに今日は空が青くなかった。

今日風強いしこれ出社させる気ないんじゃないか

今日に関しては出社できるもんではなかった。なので今日休んだこと自体は後悔していない。

リモート以外にも解決策はあったが、一番手軽なのはリモート許可ではないだろうかと思う。 ちなみに、リモートにすると真面目に働いているかわからない!と言った意見もあると思うが、出社したところで必ず真面目に働くわけでもないし、監視してれば真面目に働くってどんだけ傲慢やねんとも思うので、この意見は却下させていただく。

だいぶ雑に書いて、あんまりまとまってないけどとりあえず出す。
ブログを毎月書く目標も達成できて、体調不良ながら久々にバリューを出せた気でいよう。

追記

一番書かなければいけないことを書くのを忘れていた。自分はフルリモートにしたいわけではないです。リモートワークにはメリットもデメリットもあると思っていて、一番のデメリットは対面で働けないことですぐに解決できる問題が無駄に時間かかったりとか効率が落ちたりすることがあって、もちろんそれにも解決策はあるんだけど、やっぱりフェイスtoフェイスに勝るものはないと思っているので、一時的なリモート賛成派です。

エンジニア学ぶこと多すぎ問題

最近技術に関わらずいろんなジャンルの本を読んで勉強しているのですが、技術だけでも覚えることいっぱいあるなあと思うことがあるので言語化してブログにしようと思いました。あまりまとまってないけど雑に書きます。

学ぶことが多い

一口にエンジニアと言っても、インフラ・ネットワーク・アプリ・Web・IoTなどなど種類がありますよね。Webサービスを出したいってなったときに多少はインフラの知識が必要だとか、アプリ作るにしてもWebAPIも作らないといけないとかでなかなか一人で全部やることって難しいと思います。
一つのことだけで働き続けるのって可能ではあるけどできることなら多方面に強いエンジニアの方が小回りはきくと思っていて、自分もそっち方面で目指してます。
覚えること多いのって昔からではあると思うんですけど、やっぱり昔より増えてるんじゃないかと思うんですよね。言語とか分野とか。

全てを網羅するエンジニアは少ないと思う

で、全て網羅している人ってほぼいないレベルだと思います。やっぱり、どれだけ賢くてどれだけ優秀でもここちょっと弱いとか、ここまだキャッチアップできてないとか、今勉強中とかってのはあると思ってます。ない人はごめんなさい。私の認識不足です。

エンジニア同士で話すとき、自分の話が相手の知らないことである可能性

簡単なものからその技術に精通していないと知らないような技術まで、自分が知ってて相手が知らないことってほぼ絶対あると思います。例えばエスケープシーケンスは改行しか知らないとか、HTMLの特殊文字で書く必要があるとか。小さいことなんですけどその時どうするかというと、自分が知らないときはすんなり受け入れて覚えようとするんですけど、相手が知らない時にどう反応するかってのは、意識しておかないとまずいなと思うことがあります。

その時どうするか

自分はよく「あ、これ知らないんだ。ふーん」と思ってしまうんですけど、これってちょっとマウント取りが入ってると思うんです。悪くいうと下に見てしまう。これとてもよくないと思っていて、日々直そうと努力中です。
自分自身も知らない時期ってのはあったはずで、それを覚えた経緯とかはもう全く覚えてないですけど、そのときに知ったというのは多少なり嬉しい気持ちはあったと思います。
サービスって大きくしようとすればするほど一人ではできないし、チームで動くのに同じ人が10人いるよりも違う力を持った人が10人いる方が多分捗るし、そのときお互いが知ってること知らないことってのが出来上がるので、そこでドヤ顔して良いこと一つもないなと思うわけです。 勉強会が初参加者を歓迎するのも同じだと思っていて、もしかしたら初めてくるその人は自分の知らないことを知っているかもしれない、教えてくれるかもしれないです。そんな初心を忘れないようにしたいなって話です。

初心を忘れないようにしよう

今年もう一ヶ月終わっちゃいましたけど、初心を忘れないようにするってのも今年の目標の一つです。自分が知ってて相手が知らないことがわかったら「ええやん!」って思うようにしたい。
また、今日同僚に「taminifさんはまだ下回りというか、プロトコルというか、ネットワークの仕組みについて弱いと思う。というのが僕の評価。」って言われたんですけど、こういうこと言ってもらえるのもありがたいと思うし、実際その通りだと思うので、せっかく教えてもらったので低レイヤー層の勉強もしようと思います。 自分の思考を言語化する技術の向上も目標ですね。もっとブログとか書いて磨いていければ。

iOSアプリでSkyWay使うときはBitcodeを含まないようにしよう

はじめに

いつも忘れるのでブログに備忘録として残して置きたいと思います。 iOSアプリでSkyWayのライブラリを入れた場合、Bitcodeを含まないようにしましょう。

TL;DR

TARGETS -> Build Settings -> Enable Bitcode -> No

経緯

CocoapodsでSkyWayのライブラリを入れた後Buildすると、Apple Mach-O Linker (id) Error が出ます。
このエラー自体はあまり情報を含んでいないので好きではないのですが、ログを見ると You must rebuild it with bitcode enabled (Xcode setting ENABLE_BITCODE) と出ます。
SkyWayのライブラリを入れるとBitcodeは含まないようにする必要があるのですが、毎回忘れるのでブログに残して置きます。

まとめ

SkyWayのライブラリとBitcodeはセットで設定するようにしましょう。

SkyWayのSFUを使用したサンプルを作成しました。

はじめに

ソースコード

github.com

概要

WebRTCのSFUを一度使ってみたくて、iOSアプリのリハビリも兼ねてSwiftで書いてみました。
SkyWayのiOSのサンプルはObjective-cで書かれているのと、ダウンロードしただけでは動かないこともあって
すぐ動くものを意識して作ってみました。

SkyWayとは

webrtc.ecl.ntt.com

NTTコミュニケーションズさんが運営する、WebRTCに必要なサーバーを提供してくれるサービスです。
一定の通信量までは無料で使えるのでまず登録して使ってみるのが良いと思います。
WebRTCやる上でサーバーに手を出すとその先は沼らしいのでもしサーバーを自分で立てるなら覚悟を決める必要があります。

SFUとは

WebRTCはP2Pで端末同士を繋ぎますが、それだと接続する端末ごとにコネクション数がどんどん増えていき、端末のCPUの負担が倍々になります。
そのため、最初から多人数を接続するために中継サーバーのようなものを置き、各端末はその中継サーバーにP2Pで接続、中継サーバーは各端末に受診している映像を送信します。
そうすることで受診は端末数分のコネクションが必要ですが、送信は中継サーバー一本で対応できることになります。
その仕組みがSFUです。

実装方法

ライブラリのインストール

Cocoapodsを使用して、SkyWayライブラリをインストールします。

pod 'SkyWay'

peerの接続、ルームの入室

peerを接続し、自身のpeerIDを取得します。

// peer connection
let options: SKWPeerOption = SKWPeerOption.init()
options.key = apiKey
options.domain = domain
options.debug = .DEBUG_LEVEL_ALL_LOGS
peer = SKWPeer.init(options: options)

SFUモードでルームを作成し、ルームに入室します。

// join SFU room
let option = SKWRoomOption.init()
option.mode = .ROOM_MODE_SFU
option.stream = self.localStream
sfuRoom = peer?.joinRoom(withName: roomNamePrefix + roomName, options: option) as? SKWSFURoom

受信した映像を表示します。

sfuRoom?.on(.ROOM_EVENT_STREAM, callback: {obj in
    let mediaStream: SKWMediaStream = obj as! SKWMediaStream

    self.lock.lock()

    // add videos
    self.arrayMediaStreams.add(mediaStream)
    self.collectionView.reloadData()

    self.lock.unlock()
})

今回は、映像の表示のためにCollectionViewを使用しました。

つまづいた点

plistの設定

いつも忘れるのですが、自分の映像を取得するためにはカメラとマイクを使用する必要があります。
SkyWayを使う場合でも例に漏れず、カメラとマイクを使うためにplistに設定が必要です。

<key>NSCameraUsageDescription</key>
<string>Use Camera</string>
<key>NSMicrophoneUsageDescription</key>
<string>Use Microphone</string>

離脱した映像の処理

誰かが退室した場合、その映像の受信が止まるだけで映像の削除は自分で対応する必要があります。
そうしないと、動かない映像がどんどん溜まることになります。

まとめ

実装期間約2日、時間にして5〜6時間で作成することができました。
どちらかと言うとCollectionViewに時間を取られたこともあるので、ビデオチャット自体はすぐできると思います。 非常に簡単でWebRTCを深く知らなくても実装できますので、興味ある方はぜひ登録してやってみてください。

Osaka Mix Leap Study #1 - Android / iOSで登壇して来ました

概要

ヤフー株式会社さんの大阪グランフロントオフィスでOsaka Mix Leapが開催されました。今回のテーマは Android / iOS です。 そこで「Mac1台でアプリを作る時代再び」というタイトルで登壇してきました。

経緯

Osaka Mix Leap - Grand Opening!!で登壇のお話をいただき、イベントが公開されたタイミングですぐ申し込みさせていただきました。 正直話すネタは決まってなかったし、最近は仕事でiOSをやってなかったのでどうしようというところはありましたが 勢い任せに資料作って話して来ました。

続きを読む

WebRTC Meetup Osaka#2で発表してきました。

概要

WebRTC Meetup Osaka#2が開催されました。今回は大阪単独開催です。 そこで「iOS11は本当にWebRTCに対応したのか」というタイトルで発表してきました。

謝罪

発表の中で「React NativeはWebRTCに対応していない」と言いましたが、正式にはreact-native-webrtcを入れれば対応可能です。 失礼いたしました。

github.com

TL;DR

iOS11がWebRTCに対応したのではなく、Safari11がWebRTCに対応しました。 Safari以外のブラウザではビデオ通話はできませんが、 DataChannelを使ってデータ送信が可能です。

続きを読む