【参加レポート】Media-JAWS 【第10回】渋谷に集合！

# はじめに
[Media-JAWS 【第10回】渋谷に集合！](https://media-jaws.doorkeeper.jp/events/147145)に参加してきました。
配信系のサービスは全然使ったことがなかったですが、松井さんが作った配信基盤の裏側に興味があったので潜入してきました。

今回は気になった点をまとめていきたいと思います。
トレノケートの山下さんも記事を書いてくださっておりますので、こちらも併せて読んでいただければ、より一層理解が深まると思います。
- [「Media-JAWS 【第10回】渋谷に集合！」に参加しました](https://www.yamamanx.com/media-jaws-10/)

ただ、本当に配信系の話が分からなかったため、事前に以下2つの動画をチェックしておきました。
- [Media-JAWS 【第9回】InterBEEだしリブートしちゃうよ！](https://www.youtube.com/watch?v=IrUQU36A50o)
- [「どうでしょうエアキャラバン」におけるライブコマースシステムの開発](https://www.youtube.com/watch?v=TmZBPT3cJjI)

技術的な部分は全然分からなかったですが、なんとなく出てくる用語とか雰囲気は掴めました！

# 2年以上に及ぶオンライン配信基盤構築・改善をコミュニティリソースだけでどうやって実現したか？その結果何を得たか？
- [資料](https://speakerdeck.com/matsuihidetoshi/1)

松井さんより

JAWS DAYS 2021 と JAWS DAYS 2022, JAWS PANKRATION 2021 は配信基盤は全てコミュニティメンバーで外部委託していないとのこと。
実際に外部委託にお願いしたらいくら取られるんだろうか...

### DAYS 2021の時の話

配信サイトを"0→1"で構築するメリットとして以下を挙げていて、どれも納得の内容でした。
- 第三者の制限を受けない
- オリジナリティのある体験を提供できる
- ついでにサービスの実験・検証にもなる
- コミュニティの底力を知らしめたい
- なんかヤバいことやりたい

配信サーバを立てる場合、EC2へnginx-rtmp-moduleを入れる必要があったりするそうです。
余談になりますが、僕はRTMPすら知りません。

なのでちょっと調べてみました。
> RTMPは、TCP（Transmission Control Protocol）技術をベースにしたインターネット上のメディアコンテンツのストリーミングに用いられるネットワークプロトコルまたはシステムである。

参考：[RTMPの完全ガイド：RTMPとは何か、いつ使うべきか？](https://wave.video/ja/blog/rtmp-guide/)

だそうです。

話は戻り、「EC2へnginx-rtmp-moduleを入れて配信サーバを作る」
これはメンテナンスやら初期の学習コストやらで大変だとのことでした。
そこで、AWSは気軽に配信をできるサービスとして[Amazon Interactive Video Service(IVS)](https://aws.amazon.com/jp/ivs/)というサービスを用意しており、それを使ったそうです。

要はお手軽に配信サービスを始められると解釈しました。
とりあえず、今度以下のワークショップをやってみたいと思います。
- [Live Streaming with Amazon Interactive Video Service（Amazon IVSのワークショップ）](https://catalog.us-east-1.prod.workshops.aws/workshops/022adf04-0ff9-49af-848f-993e42575540/en-US)

クライアント側には公式SDKとVideo.jsを使っているとのことでした。
（死ぬほど分からないので、記憶の片隅に置いておきます）

配信用ページや管理用ページにはAmplifyを使用。
機能が豊富ですが完璧に機能を使いこなす必要はなく、必要になったタイミングで拡張していくような感覚。
言語にはNuxt.js。

詰まったところとしては、npmの依存関係が解決できない点
一旦はDOM操作で貼り付けるというパワープレイ
後にCopyWebpackPluginなるものを使ってDOM操作の廃止
（DOMと言われても黒い三連星しか出てこないです。ごめんなさい。）

続いて、セッション中に動画の中にタイトルと説明文をどのように挿入したかについて、
[Amazon IVSのTimed Metadata](https://docs.aws.amazon.com/ja_jp/ivs/latest/userguide/metadata.html)と呼ばれる動画内にメタデータを埋め込むことができる機能を使用。
Timed Metadataで視聴者数やアンケート情報も埋め込む。

### PANKRATION 2021の時の話
JAWS DAYS 2022ではセッション動画のタイトルや説明文、アンケート情報に管理画面を作成して操作していたが、PANKRATIONでは管理画面を自作せずにSpreadsheetで管理

以下の記事を参考にすれば、同様の構成が作れるとのこと
- [Amazon Interactive Video Service (IVS) と AWS Amplify を使って自分だけのオリジナル配信サイトを作る !](https://aws.amazon.com/jp/builders-flash/202202/ivs-display-viewer-command/)
- [オリジナル配信サイトに視聴者数を取得して表示する機能をコマンド一発で構築する](https://aws.amazon.com/jp/builders-flash/202202/ivs-display-viewer-command/)

### JAWS DAYS 2022の話
マルチトラック配信を実現するために視聴ページを刷新したり、AWS CDKでIaCテンプレート化することによって今後も使いまわせるようにしたそうです。

配信ソフトウェアであるOBSの機能を駆使して、視聴者数の埋め込みをしたそうです。
（StreamYardは使ったことがあったのですが、OBSは全然分からなかったので、ちょっとだけ調べました。）
参考：[OBSとは？オンライン配信のためのOBS Studioの使い方](https://video-matching.com/know-how/obs/)

### まとめ
今回の発表のポイントとして以下が挙げられていました。
- 一人でやらない
- 地道にIaC化を進める
- 手を上げ続ける

また、得られたこととして以下を挙げていました。
- 知識
- キャリア
- コミュニティでの人間関係
- 自分の中でのコミュニティの再定義

僕自身、JAWS-UGのイベントで多くの方々と知り合いになることができ、そこから多くのことを学ばせて頂いたのでとても共感しました。
また、今回の松井さんの発表もJAWS DAYS 2022でボランティアスタッフとして参加し、StreamYardの管理画面を触らせて頂いた経験があったおかげで、ちょっと理解が深まりました。
発表の最後に「手を上げ続ける」とありますし、エンジニア/非エンジニア関係なく、何かしらの形でコミュニティーに参加して得られるものは大きいのかなと感じました。

# 即戦力エンジニアを排出しているプログラミングスクールRUNTEQの学習メソッド
会場提供 RUNTEQさん

「スクール卒って使えなくないですか？」から始まった発表w
そこから「なぜ使えないのか」というのを深掘りしていき、原因として
- そもそもの自走力不足
- エンジニアカルチャーへの理解不足

を挙げていました。
そこでRUNTEQさんではその課題を解決するために

**仮説を立てる → 試行錯誤する → 正解を引く**

というプロセスを経験するようなカリキュラムを組んで未経験からエンジニアを育てるサービスを展開しているそうです。

また、エンジニアカルチャーへの理解については自分達でコミュニティを運営してもらうことによって以下のようなエンジニアとして必要な要素を理解してもらうとのことでした。
- アウトプット
- スピード感
- 質問タイミング
- テキストコミュニケーション

# NEWSWEBで活用しているクラウド事例紹介
### NHK NewsLabのご紹介（斉藤さん）
[NHK NEWS WEB](https://www3.nhk.or.jp/news/)や防災アプリに携わられているとのこと

NHKさんは[Note](https://note.com/mhk_syuzai)もやっているとのことなので読んでみたいと思います。
以下の記事とか、re:Inventの写真が貼ってあり、AWSに関わる方であれば興味を引く内容だと思います。
NHKさんのエンジニアリングに関する方針とかを知ることができます。
- [「オールドメディア」のエンジニアのみんな、いろいろあるけど想いをカタチにしていこうよ宣言](https://note.com/nhk_syuzai/n/nb565f983cca6)

## MediaLiveを使ったお天気カメラのライブ配信サービスを作っています（浅井さん）
[日本各地の天気をライブ中継で見ることができるサイト](https://www3.nhk.or.jp/news/news_bousai_app/app_camera/)を作ったお話

NHKさんが持っている、ロボットカメラをどう有効活用しようかというところが始まり。
[AWS Elemental MediaLive](https://aws.amazon.com/jp/medialive/)を使って構築。
管理画面はAmplifyで管理画面を作成。
開発は内部のメンバーで内製化し、仕組みを整えるところから始め、現在は運用も内部で最適化しているとのことです。

## Textractで新型コロナデータ PDFをOCR する仕組みを２日で作った話（内野さん）
以下のようなサイトを運営していたそうです。
[都道府県ごとの病床使用率など「レベル判断のための指標」](https://www3.nhk.or.jp/news/special/coronavirus/level/)
当時、元となるデータである新型コロナのレベル判断の指標は内閣官房がPDFで提供していましたが、オミクロン株による感染爆発によって手打ちじゃ対応できない状況に...
そこでAmazon TextractとGoogle CloudのVision APIを組み合わせてPDFをOCS（PDFに書かれている文字を自動認識して、CSVとかに落とし込んだってことですかね？）することによって自動化しました。（すごい...）

ただし、それで得られる制度は99%程度でより正確さが求められるNHKさんはPDFの作成元に働きかける活動をして、見事CSVで作成してもらうことに成功。


NHKさんのお話は全体を通して現場の苦労が感じられる内容となっており、配信系の技術を理解とても新鮮で興味を引く内容でした！
イベント後の懇親会でもNHKさんがre:Invent 2022に参加したお話など、さらに深い内容を聞くことができてとても有意義でした！！

# おわりに
知らないことだらけでしたが、とても面白かったです。
まずはAmazon IVSを触ってみるところから始めたいと思います。