Reactガイドを読んでいくその124
これは
Reactのガイドを読んでいく記事です。
ガイドのリンク
React で Web Components を使用する
WebComponentsで公開されているAPIを使うためにrefを使う。
サードパーティ製のコンポーネントを使う場合はWebComponentsのラッパーとしてReactのコンポーネントを作成するとよい。
WebComponentを使う場合Reactのレンダーツリーをうまく経由できていないことがあるのでReact内で適切なハンドラを作ってあげる必要がある。
class HelloMessage extends React.Component {
render() {
return <div>Hello <x-search>{this.props.name}</x-search>!</div>;
}
}
ありがちなミスとしてWeb Componentsがclassnameの代わりにclassを使っているケースがある。
function BrickFlipbox() {
return (
<brick-flipbox class="wana">
<div>front</div>
<div>back</div>
</brick-flipbox>
);
}
今日はここまで
Reactガイドを読んでいくその123
これは
Reactのガイドを読んでいく記事です。
ガイドのリンク
Web Components
Web ComponentsとReactは異なる課題を解決するために構築されたものである。
Web Componentsはコンポーネントをパッケージ化して高い再利用性を与える。
ReactはDOMとデータを同期させるための宣言型のライブラリを提供している。
このふたつはお互いに補完しあうようにできていて、Web ComponentsでReactを使うときも
ReactでWeb Componentsを使うときも両方を行うこともできる。
ReactユーザはWeb Componentsを使用することは少ないが、Web Componentsを用いたサードパーティ製のUIコンポーネントを使用したい場合は活用できる可能性がある。
明日からは使い方を見ていく。
今日はここまで。
Reactガイドを読んでいくその122
これは
Reactのガイドを読んでいく記事です。
ガイドのリンク
ファイル input タグ
HTMLでは<input type="file">を利用してユーザに1つ以上のファイルをデバイスストレージから選択してサーバにアップロードしたり、FileAPIを通じてJavaScriptで操作する。
Reactにおける<input type="file">は値がユーザだけが設定できるもので、プログラムで操作できない。
そのため常に非制御コンポーネントになる。
今日はここまで。
Reactガイドを読んでいくその121
これは
Reactのガイドを読んでいく記事です。
ガイドのリンク
デフォルト値
Reactのレンダーライフサイクルを見るとフォームにあるvalue属性はDOMno値を上書きする。
非制御コンポーネントでは、Reacに初期値設定をするが、後続の更新処理には関与させないようなパターンがよくある。
defaultValue属性をvalueの代わりに指定することで、このケースで扱うことができる。
例
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input
defaultValue="Bob"
type="text"
ref={this.input} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
今日はここまで。
Reactガイドを読んでいくその119
これは
Reactのガイドを読んでいく記事です。
ガイドのリンク
レガシーなコンテクスト API の検出
レガシーは使うなってことらしい。
この章全体で語られていたことだけれど、これから新たにReactを使っていく人は古い仕様に合わせてもいいことないよ。進んで合わせる人はそういないと思うけど。
他のシステムが旧Reactな環境で動いていて依存関係、近いシステムだった場合はレガシーな部分も認識歩かないかで解決にたどりつく時間が違うので意味はあると思うので今回は見ていった。
次回からは違う章を行う。
今日はここまで。
WindowsでWebRTC Native Client Momoを使ってみる
これはWebRTC Native Client MomoをWindowsで動かした手順をまとめた記事です。
※手順については開発が進んだ段階で変更となるかもしれませんので現時点でのものとご理解ください。
目次
GitHubへのリンク
※Defaultのブランチを使わない点に注意(feature/cmakeを使う) github.com
02/06 update
単純にWindowsで動かしてみたい場合は以下リンクのReleaseから「momo-2020.2.1_windows-10.1809.zip」を取得して実行するのが良いです。
github.com
参考
セットアップの参考 https://github.com/shiguredo/momo/blob/feature/cmake/doc/SETUP_WINDOWS.md
実行の参考 https://github.com/shiguredo/momo/blob/feature/cmake/doc/USE_TEST.md
この記事はどこまで？
環境構築をして、Webカメラに映像が映るのを確認するまでです。
実行環境
今回はWebカメラ搭載のノートパソコンで実施しました。
Windowsのバージョンはこんな感じ。
手持ちハードの都合上ゲーミングですが、そこまでハイスペックでなくても大丈夫かと思います。
映像配信なのでintel系CPUであることと、NVIDIAのグラフィックボードを搭載しているのが望ましそうです。
事前の事前準備
CMakeのインストール cmake.org
VisualStudio2019のインストール MSBuildはインストールしておくほうが良い。C++に関連する要素はインストール時に選択する。
7zipのインストール インストールしてパスを通しておく必要があります。
Make for Windowsのインストール 僕はほかの環境と同等のコマンドを使いたいのでインストールしました。
gnuwin32.sourceforge.netGitBashのインストール Windowsでgitを使うときに一緒に入れることができるあれです。
cmdやpowershellだとエスケープシーケンスを考えないといけないのでこっちを使ってます。
gitforwindows.org
事前準備
- gitコマンドを使ってクローンする
コマンド：git clone -b feature/cmake clone用のリンク
ビルドする
～\momo\buildの中にあるbuild.batを実行してビルドします。
ここでこける場合は、CMakeのパスが通ってないとか事前準備に失敗してしまっている場合が多いです。
動かすまで
接続先はSora Laboを使う
気軽に試せる環境であるところのSora Laboを使います。
sora-labo.shiguredo.jp
Sora Laboの使い方
GitHub アカウントでサインアップまたはサインインするでログイン- ドキュメントに必ず目を通すように書いてあるので読む
特にこのあたりは注意が必要
- Sora Labo は商用目的で利用可能ですか？ - 商用目的での利用できません - Sora Labo をサービスに利用可能ですか？ - Sora Labo は検証目的以外では利用できません - Sora Labo は法人や個人事業主で利用できますか？ - 法人や個人事業主での利用は申請が必須です - Sora Labo はアカデミックで利用可能ですか？ - アカデミックでの利用は申請が必須です - Sora Labo は長時間接続しても問題ありませんか？ - 長時間接続の利用は申請をお願いします
- Sora Laboのシグナリングキーをコピーして、
実行コマンドのSignaling Keyに張り付ける Channel IdはGithubID＠のあと適当につけてOKっぽい。
例えばtorikiziがgithubIDならtorikizi@rtc-testみたいな感じ。
詳細は「GitHub - shiguredo/sora-labo-doc: Sora Labo ドキュメント」
実行はこんなコマンドを使う
※使っているterminalでmomoを格納したフォルダに移動する
./momo --resolution VGA --no-audio --port 0 --use-sdl --show-me sora --auto --video-codec H264 --video-bitrate 1000 wss://sora-labo.shiguredo.jp/signaling "Channel IDをここに設定" --multistream --role upstream --metadata '{"signaling_key": "シグナリングキーをここに設定"}'
実際に入力したターミナルの画面はこんな感じ。
Windowsの仕様に注意したい。 cmdやPowerShellを使っている場合シグナリングキーを指定している場所をエスケープしてあげないとうまく動かないことがあります。 参考 https://qiita.com/tokoroten-lab/items/291b463e45f422abd425
動いた
WindowsのWebカメラで撮影したものをMacで接続したSoraLaboで確認。
おわりに
パッと見Windowsはほかの環境と違い環境構築にハードルがあるかもしれませんが、基本的にはビルドに必要なものさえ用意できていればバッチ一つでビルド完了まで行くので楽でした。
Windowsのパス指定最大値問題があるので、ショートカットでパラメータを含めた起動にするよりはmakeを使って他のコマンドと同等に実行するのが今のところは良さそうに思いました。
また、Windowsのpowershellとコマンドプロンプトの仕様でjson部分の指定をする時にはエスケープの指定をしてあげる必要があったりと詰まるポイントは多そうです。
今後何か変更があれば手順は更新していきたいなと思います。
