Qiita Advent Calendar 2021 個人開発 2日目の記事です。

昨日は @yuno_miyako さんの「個人開発しくじり先生パンツシェアアプリ編」で、クスッと笑える記事でした。

さて、Qiita の個人開発アドカレも今年で4回目の参加。

アドカレの記事投稿を新技術学習のきっかけにするのは良さそうだと思い、実践する。

今回は、リモートワーク、ビデオ通話が珍しくない世の中になり、日頃のビデオ通話では音声・映像の品質に課題を感じていることから、WebRTC について（雑に）学ぶことにした。

WebRTC を学ぶ

アウトプット重視で、知識の習得（WebRTC の概要や仕組みなどの理解）は後回しにして、手軽に体験できる教材を探すところから。

まずは、webrtc.org の Codelab を眺めてみたけど、Scaffold 的と言うのだろうか、git clone して要領を得ない長めのコードを順に理解するのは辛かったので STOP。

Firebase + WebRTC Codelab | WebRTC

つづいて、MDN にあるチュートリアルを眺めてみたけど、こちらも要領を得ず。

Taking still photos with WebRTC | MDN

その後、Skywayなるものがあることを知り（正確には思い出し）、Skyway のチュートリアルを眺めたところ、簡単かつドキュメントが綺麗で読みやすかったので、読み進めた。

結論としては、CDN を使えば次のコード量程度でビデオ通話は簡単に実現できることが分かった。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.webrtc.ecl.ntt.com/skyway-4.4.3.js"></script>
  <title>SkyWayチュートリアル</title>
</head>
<body>
  <video id="my-video" width="400px" autoplay muted playsinline></video>
  <p id="my-id"></p>
  <input id="their-id"></input>
  <button id="make-call">発信</button>
  <video id="their-video" width="400px" autoplay muted playsinline></video>
<script>
  const peer = new Peer({
    key: [your API Key],
    debug: 3
  });

  peer.on('open', () => {
    document.getElementById('my-id').textContent = peer.id;
  });
  peer.on('call', mediaConnection => {
    mediaConnection.answer(localStream);
    setEventListener(mediaConnection);
  });

  document.getElementById('make-call').onclick = () => {
    const theirID = document.getElementById('their-id').value;
    const mediaConnection = peer.call(theirID, localStream);
    setEventListener(mediaConnection);
  };

  // イベントリスナを設置する関数
  const setEventListener = mediaConnection => {
    mediaConnection.on('stream', stream => {
      // video要素にカメラ映像をセットして再生
      const videoElm = document.getElementById('their-video')
      videoElm.srcObject = stream;
      videoElm.play();
    });
  }

  let localStream;

  // カメラ映像取得
  navigator.mediaDevices.getUserMedia({video: true, audio: true})
    .then( stream => {
    // 成功時にvideo要素にカメラ映像をセットし、再生
    const videoElm = document.getElementById('my-video');
    videoElm.srcObject = stream;
    videoElm.play();
    // 着信時に相手にカメラ映像を返せるように、グローバル変数に保存しておく
    localStream = stream;
  }).catch( error => {
    // 失敗時にはエラーログを出力
    console.error('mediaDevice.getUserMedia() error:', error);
    return;
  });

  </script>
</body>
</html>

WebRTC の入門が目的の記事ではないので詳細は省くが、カメラの映像が写り特定の相手と通話できることは確認できたので、あとは仕組みを理解して、やりたいことに合わせて調べていけば良さそうに思った。
（これで今後はビデオ通話系の個人開発も手駒で考えることができる。）

記事投稿までの時間の都合もあり淡白な形になってしまったが、新しい技術に触れるきっかけとして、アドカレ記事を書くのは良さそうだ、と思う。

以降は雑記。アドカレ記事として何を書いたらいいか悩んだ結果、過去の取り組みをメモしていたので残しておく。

これまでの個人開発アドカレの参加振り返り

2018年(1年目)

アドカレ：個人開発 Advent Calendar 2018
投稿記事：(1日目) 初めての個人開発の話（進め方と勉強の仕方）

初めて Web アプリを開発できたのでその苦労を書き記した。（今見ると恥ずかしい。）
当時は自サイトへ集客したい・アナリティクスを眺めるのも楽しいと思っていて自サイトで記事を書いた。
Qiita アドカレ初参加で 1 日目を書いていたとは...

2019年(2年目)

アドカレ：個人開発 Advent Calendar 2019
投稿記事：(1日目) 個人開発で何を作り、どう作るか。wgetコマンドとGlideを活用したゆるい個人開発記

考えているものを多少は開発して作れるようになったけど、個人開発って何だろう、何のための個人開発だろうと悩んで自分のケースを書き記した。（今見ると恥ずかしい。）
理由はもはや定かではないが、自サイトで書いていた。

2020年(3年目)

アドカレ：個人開発 Advent Calendar 2020
投稿記事：(3日目) ホームページ運営のすすめ

勢いで書き記した。（今見ると恥ずかしい。）

Qiita のアドカレでプレゼントカレンダーなるものがあることを知り、そちらで記事（「3年間の個人開発を通じて得た気付き」）を書いて力尽きていた。この記事では、いくつか Web アプリ／サイトを開発してみて、個人開発において重要な考え方は何だろうと悩んだ結果を書いていた。
この年は React などその他 3 つのアドカレに参加していた。

今年2021年の個人開発取り組み

今年は、基本的な WEB 3層の構成（Web + AP + DB）で Web アプリを作成できるようになり、Next.js や Svelte など新し目の技術を触ってみたりするなど。アプリとしては次のようなものを開発。

脳トレ Web アプリ「Calculation 10」

暇つぶしで遊べるゲームが欲しくて開発。
フロント側だけで完結する構成。デザインにはこだわった。
実装は以下のように要件を満たすパターンを予め配列に格納しておくという力技をしている...

let t=["0019","0025","0028","0037","0046","0052","0055","0064",...

Amazon Alexa アプリ「おうちかくれんぼ」

JavaScript/Node.js のスキルセットで開発可能だったのでチャレンジ。
開発は Alexa Skills Kit に沿って。
実装の難易度は高くないけど、音声アプリならではのデバッグに時間がかかる点がつらかった。

Web メモアプリ「速メモ」

自分用にさっとメモできるものが欲しくて開発。
オフライン起動可（Service Worker/PWA）で、データは Web Storage API (localStorage) でブラウザ保存。
実装 (JavaScript) は今見たら全部で 100 行ほどしかなかった。

// Web Storage API (localStorage) 部分の抜粋

const readStorage = localStorage;

save.addEventListener('click', () => {
  readStorage.setItem(readStorage.length+1, input.value);
  input.value = '';
});

clear.addEventListener('click', () => {
  readStorage.clear();
  clearItems();
});

その他

その他もあるが、個人開発っぽくないので割愛。

結論

12月も、来年も、個人開発やる

明日は @at-946 さんの記事です。お楽しみに！

アドカレを新技術学習のきっかけにする