<nav class=toc><ol class="toc-level toc-level-1"><li class="toc-item toc-item-h2"><a href=#特徴 class="toc-link toc-link-h2">特徴</a><li class="toc-item toc-item-h2"><a href=#コードサンプル class="toc-link toc-link-h2">コードサンプル</a><li class="toc-item toc-item-h2"><a href=#向いているとき class="toc-link toc-link-h2">向いているとき</a><li class="toc-item toc-item-h2"><a href=#なぜ作ったか class="toc-link toc-link-h2">なぜ作ったか</a><li class="toc-item toc-item-h2"><a href=#複数usereducerしたときのdispatchの問題 class="toc-link toc-link-h2">複数useReducerしたときのdispatchの問題</a><li class="toc-item toc-item-h2"><a href=#最後に class="toc-link toc-link-h2">最後に</a></ol></nav>こんにちは、せーぶるです普段から技術的な発信はあまりしていないのですが、 久々にライブラリを作ってみたのでここで紹介したいと思います[fluent-reducer]（<a href=https://github.com/sable-virt/fluent-reducer%EF%BC%89 rel="nofollow noopener"target=_blank>https://github.com/sable-virt/fluent-reducer）</a><h2 id=特徴>特徴</h2><ul><li>TypeScriptフレンドリー<li>フレームワーク非依存<li>React/vue/Angularでも使える（Reactのときは拡張クラスを使うと便利）<li>Redux/ReduxThunkライクに非同期アクションが書ける（というかインスパイアしてる）<li>複数のReducerを作ったときのdispatchに渡せるactionがTypeScriptでチェックされる（後述）</ul><h2 id=コードサンプル>コードサンプル</h2>以下はReactで利用する場合の例です<pre class=language-typescript><code class=language-typescript>import { ReactFluentReduer } from 'fluent-reducer/react'
export interface IRootState {
 name: string
}
const RootState: IRootState = {
 name: 'unknown'
}
const rootReducer = new ReactFluentReducer&lt;'root', IRootState>(RootState)

// SyncAction
const changeName = rootReducer.sync&lt;string>('CHANGE_NAME', (state, name) => {
 state.name = name
})

// AsyncAction
const asyncChangeState = reducer.async&lt;string, string, Error>('ASYNC_CHANGE_NAME', (name, dispatch, getState) => {
 return new Promise(resolve => {
 setTimeout(() => {
 resolve(name)
 }, 3000)
 })
}, {
 // before promise action
 started(state, params) {
 console.log('started', params)
 state.state = 'started'
 },
 // promise rejected action
 failed(state, { error }) {
 console.error(error)
 },
 // promise resolved action
 done(state, { result }) {
 state.name = result
 console.log('done')
 }
})

// React Component
export const MyExampleComponent: React.FC = () => {
 const [state, dispatch] = rootReducer.useFluentReducer()
 const _handleOnClick = useCallback(() => {
 dispatch(changeName(Date.now().toString()))
 }, [dispatch])
 return (
 &lt;div onClick={_handleOnClick}>{state.name}&lt;/div>
 )
}
</code></pre>React/Vue/Angularと併用する際のサンプルはこちらにあります<a href=https://github.com/sable-virt/fluent-reducer-examples rel="nofollow noopener"target=_blank>https://github.com/sable-virt/fluent-reducer-examples</a>React/Vue/Angularで使う例を書きましたが、 ベターな書き方をしている訳ではありませんので、実装時には各々の流儀にしたがって使ってくださいReactだけ拡張されたクラスがあるのは実際にこれを使って作る際にあったらいいなというのを追加しただけなので、VueやAngularも拡張可能ですもちろんReact/Vue/Angularがなくても使うことができます<h2 id=向いているとき>向いているとき</h2><ul><li>useReducerだけでは少々心もとないとき<li>TypeSafeに状態管理したいけど面倒、やり方がわからないとき<li>Reduxまで使うのは少々大げさだなと感じるとき</ul><h2 id=なぜ作ったか>なぜ作ったか</h2><ul><li>Reduxベースでアプリケーション構築することが多くなった<li>Reduxで複数Reducer作ってやるほど大きくないものも出てきた<li>なるべく構成を近づけたいがuseReducerでTypeSafeに組むのは少々面倒<li>useReducerだけだと人によって書き方がバラバラになりそう<li>趣味（構成をこねくりまわすのが好きなだけ）</ul><h2 id=複数usereducerしたときのdispatchの問題>複数useReducerしたときのdispatchの問題</h2>そんな構造にしなければいいのかもしれないですが、そのようにしないといけない場合もありますゆえ・・・<pre class=language-typescript><code class=language-typescript>
const [state, dispatch] = useReducer(reducer1, st)
const [state2, dispatch2] = useReducer(reducer2, st)

// 本当はdispatch2にしないといけない
dispatch(changeName('sable'))
</code></pre>このときdispatch, dispatch2に渡すActionを間違えると意図したようにstateが書き変わりません（reducer1のstateを書き変えるアクションをreducer2に実行してしまう、など）<img alt=Dispatchに渡すアクションを間違えたとき loading=lazy src=/assets/blog/fluent-reducer/dispatch-error.png>fluent-reducerではあえてReducerとActionを密にすることで自身のReducerから作成されたアクションでないものをdispatchしようとするとTypeScriptのチェック段階でエラーを出しますこれはReducer定義時に&#60‘root’ とIDをつけることで各アクションにも同様のID定義が振られ、結果Actionの定義とマッチせずエラーとなりますこれによって意図しないReducerに誤ってdispatchすることを防ぎます Reducerの統廃合や分割したいときに有効ではないかと思います<h2 id=最後に>最後に</h2>正直勢いでざざっと作ったので微妙なところがあるかもしれません 状態管理についてはいまだに頭を悩ませるところもあるのでなかなか大変ですね公開後は少し更新は様子を見ながらちょっとずつやろうかなとは思ってます 本体はもちろんのこと、サンプルアプリに対してのPRお待ちしてます

TypeScriptフレンドリーに状態管理するライブラリを作ってみたよ

TypeSafeなReducerを作るライブラリ「Fluent Reducer」

<nav class=toc><ol class="toc-level toc-level-1"><li class="toc-item toc-item-h2"><a href=#商品の外観 class="toc-link toc-link-h2">商品の外観</a><li class="toc-item toc-item-h2"><a href=#開いた状態 class="toc-link toc-link-h2">開いた状態</a><li class="toc-item toc-item-h2"><a href=#実際に中身を入れてみました class="toc-link toc-link-h2">実際に中身を入れてみました</a><li class="toc-item toc-item-h2"><a href=#まとめ class="toc-link toc-link-h2">まとめ</a></ol></nav>最近注目しているD2CレザーブランドのSYRINXが新しいドキュメントケースをモニター販売するというので、正座待機してさっそく手に入れることができましたこのあとクラウドファウンディングを募って本格的に生産に入るようなので、 気になる方は今のうちにチェックしておかないと購入難しくなりますよ！ （同ブランドの小さな薄い財布はもう１年以上待つことになるとのこと: こちらも支援済）ということで、さっそく詳細を確認して普段持ち歩いているものを入れてみました！【追記】2020.03.31 クラウドファウンディング開始されてました <a href=https://greenfunding.jp/syrinx/projects/3621 rel="nofollow noopener"target=_blank>https://greenfunding.jp/syrinx/projects/3621</a><h2 id=商品の外観>商品の外観</h2>こちらがTSUTSUMU A3ドキュメントケース FoschiaのT.Moroです <img alt="TSUTSUMU A3ドキュメントケース Foschia T.Moro"loading=lazy src=/assets/blog/syrinx-foschia/00100trPORTRAIT_00100_BURST20200325130819955_COVER.jpg>開封して少し試しているうちに多少ブルームが取れてしまっていますが、革製品特有のブルームがついた状態で届きます私はブルームを特に取らずに自然に取れるのを待つ派なのでそのまま使っています<h2 id=開いた状態>開いた状態</h2><img alt=開いた状態 loading=lazy src=/assets/blog/syrinx-foschia/00100trPORTRAIT_00100_BURST20200325130914114_COVER.jpg>このドキュメントケースは１枚の革で作られているため縫い目などはありません さすがTSUTSUMU（包む）ですね広げた際の内側はA3の用紙がきれいに入るサイズで大きい資料を折り目をつけずに持ち運ぶことができます 片面がA4サイズのため13インチのノートパソコンもバッチリ入ります（後ほど）<img alt=側面 loading=lazy src=/assets/blog/syrinx-foschia/00100lrPORTRAIT_00100_BURST20200325131002986_COVER.jpg>この丸みのあるラインと歪みなく整形されているのはすごいですね！ 留め具と控えめなロゴ以外は装飾もなくミニマルなデザインです<img alt=留め具 loading=lazy src=/assets/blog/syrinx-foschia/00100lrPORTRAIT_00100_BURST20200325131015308_COVER.jpg>留め具のところもシワもなくきっちり留まっています<h2 id=実際に中身を入れてみました>実際に中身を入れてみました</h2>さっそく持ち歩いているものを入れてみました ポーチにはケーブルやType Cのハブなどが入っています<img alt=収納物 loading=lazy src=/assets/blog/syrinx-foschia/00000IMG_00000_BURST20200325131247418_COVER.jpg> Surface Pro7(左), Anker PowerPort Atom PD 2(右上), +LUMBER POWERBANK 2600 (右中), hands trust ポーチ(右下)Surfaceは左のポケットにすっぽり入ります 全体が覆われるわけではないので開け閉めの際に滑り落ちないようにちょっと注意が必要です次の写真は実際に入れ込んだときのものです<img alt=収めたところ loading=lazy src=/assets/blog/syrinx-foschia/00100trPORTRAIT_00100_BURST20200325131351627_COVER.jpg>充電アダプタの厚みでやや右ポケットは膨らみます。概ねこれぐらいの厚みが限界で、これ以上だと閉じる際にちょっと難儀します今回の厚みであれば何の問題もなく綴ることができました<img alt=厚み loading=lazy src=/assets/blog/syrinx-foschia/00000IMG_00000_BURST20200325131450253_COVER.jpg>横から見てもあまり膨らんでいるように見えない 角が丸くなっているおかけで多少膨らんでいても外からはあまり目立たないようです 小さいものはもっと入れることができそうです<h2 id=まとめ>まとめ</h2>ケース自体の重さは約390gで、このサイズの革製品では軽い方かと思います何よりミニマルで最高にかっこいいですね。 革製品・木工製品が大好きなのでこういうのに目がないんですよね・・・ということで SYRINX TSUTSUMU A3ドキュメントケース Foschia のご紹介でした！まもなくクラウドファウンディングが開始されるそうなので、オフィシャルサイト下部にあるNews &#38 Updatesからメルマガ購読しておくとよいと思います 同ブランドの小さな財布も届く予定なのでこちらも楽しみですそれではまた

クラウドファウンディングでSYRINXのドキュメントケースをいち早く手に入れたのでレビューします

SYRINXのTSUTSUMU A3ドキュメントケース Foschiaがミニマル好きにはぴったり

<nav class=toc><ol class="toc-level toc-level-1"><li class="toc-item toc-item-h2"><a href=#主な仕事内容 class="toc-link toc-link-h2">主な仕事内容</a><ol class="toc-level toc-level-2"><li class="toc-item toc-item-h3"><a href=#技術顧問 class="toc-link toc-link-h3">技術顧問</a><li class="toc-item toc-item-h3"><a href=#プロダクトアドバイザー class="toc-link toc-link-h3">プロダクトアドバイザー</a></ol><li class="toc-item toc-item-h2"><a href=#頻度 class="toc-link toc-link-h2">頻度</a><li class="toc-item toc-item-h2"><a href=#明確に行わないこと class="toc-link toc-link-h2">明確に行わないこと</a><li class="toc-item toc-item-h2"><a href=#契約する内容と時期について class="toc-link toc-link-h2">契約する内容と時期について</a><li class="toc-item toc-item-h2"><a href=#最後に class="toc-link toc-link-h2">最後に</a></ol></nav>こんにちは、せーぶるです 先日TechFeed社が運営するTechFeedProでJavaScriptエキスパートとして認定していただきましたかれこれ10年以上JavaScriptに親しんできた私ですが、ここ数年はCTOやプロダクトマネージャーとしての経験を活かし、技術顧問やプロダクトアドバイザーとしてもいくつかの会社のお手伝いをしています技術顧問やプロダクトアドバイザーって何してるの？という質問をしばしばお受けするので、今日はそのお仕事内容を紹介したいと思いますここでご紹介する内容はあくまで私個人が提示する条件（契約）に基づくもので、他の技術顧問やプロダクトアドバイザーの方の内容とは必ずしも一致しませんので、ご契約の際はきちんと内容を詰めた上で相談するようにしてください<h2 id=主な仕事内容>主な仕事内容</h2><h3 id=技術顧問>技術顧問</h3>要点をまとめると次のようなことをしています<ul><li>プロダクトのコードが抱えている問題の整理と解決<li>ソースコードのチェック<li>コードレビュー<li>ペアプロ<li>より良い開発体験を作るための施策提案と実施<li>フロントエンドエンジニアの人材育成やスキルアップ<li>CTO・技術責任者の壁打ち相手、アドバイス<li>評価・目標などに関するレビューやアドバイス<li>（採用強化）</ul>私はフロントエンドが得意なので、主にユーザーが使う画面に対する技術的な支援を軸としていますまた、CTOやチームリーダーの経験から評価や1on1、採用面接など、技術組織に関するアドバイスやそれを行う方との壁打ち相手をしていますその中でスキルアップが必要な場合には社内向けの勉強会を実施したりもします 過去にはTypeScriptやReact、Angular、Vueなどの勉強会やハンズオンなどを行っています実装を直接お手伝いすることはほとんどなく、あくまで社内の方に動いて頂くのが前提で、開発組織や開発自体が円滑に進むためのアドバイスを行います過去には実装を手伝っていた時期もありますが、今は時間の関係で難しく、開発環境を整えるためのボイラープレートやビルド環境、サンプルの作成に留めています<h3 id=プロダクトアドバイザー>プロダクトアドバイザー</h3>こちらも要点をまとめると次のようなことを行っています<ul><li>プロダクトマネージャー・プロジェクトマネージャーの壁打ち相手、アドバイス<li>プロダクトマネージャー・プロジェクトマネージャーの育成<li>プロダクトレビュー（デザイン面も含め）<li>仕様レビュー（技術的な課題になりそうな点も同時にチェック）<li>プロダクト開発におけるフレームや知識の共有<li>スケジュールの立て方や進捗管理についてのアドバイス<li>開発組織 （自社サービス） の立ち上げに関するアドバイス</ul>技術顧問とは明確に内容が異なります技術的な部分のアドバイスはあくまで仕様のレビュー上において、技術的リスクや課題があると思われる部分について事前に注意ないしはケアが必要という趣旨のものに限られています一方で、プロダクト全体のUXに関することや進行管理など、技術以外の面を広くサポートしています 仕様レビューやPdMの方との壁打ち、もしくは見習いPdMの方のサポートや教育支援などが人気で、単発ではプロダクトレビュー（使用感や課題、改善ポイントと改善案の提示など）の要望も多く頂いています<h2 id=頻度>頻度</h2>もっとも多いのはプロダクトアドバイザーとして隔週で2h程度の対面+Slack等でのオンラインサポートです 事前にオンラインで仕様や課題などを共有して頂き、すぐに返せるものはチャットで返答し、複雑なものについては後日対面で話すスタイルです間隔があいているように見えますが、プロダクトの仕様検討のペースや状況変化に合わせると、概ね２週間に１度くらいがちょうど壁打ちの頻度としてはお互いにあっていると感じています （もちろん本業への影響も少ないです）<h2 id=明確に行わないこと>明確に行わないこと</h2>採用に関わることを直接行うことはしていません（例：採用イベントや面接への参加） これは本業との競業度を下げるためで、エンジニアやデザイナーの紹介も行いません 同様に自社メディアへの寄稿も原則お断りしております<h2 id=契約する内容と時期について>契約する内容と時期について</h2>本業に影響がない範囲でしか受けられないため、週１日以上を割く必要がある場合はお受けしていませんまた、公開募集はしておらず不定期に空いた時間分でサポートできる範囲を受けていますそのため、事前に空いたら連絡が欲しい旨のご要望を頂いている方から優先的に空いた時間をお伝えして調整して契約するということを行っています（最短３ヶ月、概ね半年から１年くらいで空き時間が変動）もちろん単発のプロダクトレビュー等については相談頂いたタイミングで随時調整させてもらっています<h2 id=最後に>最後に</h2>ピンポイントでアドバイスをすることで稼働が抑えられます その分費用も抑えられるので、ときどき手伝ってもらいたい、確認だけでもしてもらいたいというときに上手く使うと良いと思いますもっと詳しく知りたい方がいましたら<a href=https://forms.gle/fZK8b2UmceugvQkaA rel="nofollow noopener"target=_blank>お問い合わせ</a>または<a href=https://twitter.com/sable_virt rel="nofollow noopener"target=_blank>Twitter</a>でご連絡くださいませ

技術顧問やプロダクトアドバイザーのお仕事内容を紹介

技術顧問やプロダクトアドバイザーとして何をしているのか

<nav class=toc><ol class="toc-level toc-level-1"><li class="toc-item toc-item-h2"><a href=#120アップデート内容 class="toc-link toc-link-h2">1.20アップデート内容</a><ol class="toc-level toc-level-2"><li class="toc-item toc-item-h3"><a href=#scene-transitionに「motion」を追加 class="toc-link toc-link-h3">SCENE TRANSITIONに「MOTION」を追加</a><li class="toc-item toc-item-h3"><a href=#key-color-に「-blue-1-3-」「-green-1-3-」を追加 class="toc-link toc-link-h3">KEY COLOR に「 BLUE 1-3 」「 GREEN 1-3 」を追加</a><li class="toc-item toc-item-h3"><a href=#keyのsource-chにgreen1-3-blue1-3が追加 class="toc-link toc-link-h3">KEYのSOURCE CHにGREEN1-3, BLUE1-3が追加</a><li class="toc-item toc-item-h3"><a href=#key-に「スケーリング・パラメーター」を追加 class="toc-link toc-link-h3">KEY に「スケーリング・パラメーター」を追加</a><li class="toc-item toc-item-h3"><a href=#input-1-3-および-scene-a-e-に「-key-sw-パラメーター」を追加 class="toc-link toc-link-h3">INPUT 1-3 および SCENE A-E に「 KEY SW パラメーター」を追加</a><li class="toc-item toc-item-h3"><a href=#scene-type-に「-pbyp-picture-by-picture」を追加 class="toc-link toc-link-h3">SCENE TYPE に「 PbyP (Picture by Picture)」を追加</a></ol><li class="toc-item toc-item-h2"><a href=#もう少し欲しいところ class="toc-link toc-link-h2">もう少し欲しいところ</a><ol class="toc-level toc-level-2"><li class="toc-item toc-item-h3"><a href=#プレビューにすべての入力画面一括表示できない class="toc-link toc-link-h3">プレビューにすべての入力画面一括表示できない</a><li class="toc-item toc-item-h3"><a href=#キーに指定した画面をクロップ（切り抜き）できない class="toc-link toc-link-h3">キーに指定した画面をクロップ（切り抜き）できない</a><li class="toc-item toc-item-h3"><a href=#リモートアプリであるvr-1hd-rcsがpcのみ class="toc-link toc-link-h3">リモートアプリであるVR-1HD RCSがPCのみ</a><li class="toc-item toc-item-h3"><a href=#まとめ class="toc-link toc-link-h3">まとめ</a></ol></ol></nav>VR-1HDのシステムプログラムのバージョン1.20が公開されましたVR-1HDは「ライブ配信に最適なAVストリーミング・ミキサー」と銘打つようにライブ配信に特化した機能が詰まったコンパクトなミキサーです前回のアップデートが2019/05だったので、約8ヶ月ぶり2回目のアップデートとなります<h2 id=120アップデート内容>1.20アップデート内容</h2>公式にアナウンスされたアップデートは次のとおりです<blockquote>機能追加 ・SCENE TRANSITION に「 MOTION 」を追加しました。 ・KEY COLOR に「 BLUE 1-3 」「 GREEN 1-3 」を追加しました。 クロマ・キー合成が可能になりました。 ・KEY に「スケーリング・パラメーター」を追加しました。 ・INPUT 1-3 および SCENE A-E に「 KEY SW パラメーター」を追加しました。 INPUT, SCENE の切替えに合わせて KEY の ON/OFF が可能になりました。 ・SCENE TYPE に「 PbyP (Picture by Picture)」を追加しました。 不具合修正 ・軽微な不具合を修正しました。</blockquote><a href=https://proav.roland.com/jp/products/vr-1hd/downloads/ rel="nofollow noopener"target=_blank>https://proav.roland.com/jp/products/vr-1hd/downloads/</a><h3 id=scene-transitionに「motion」を追加>SCENE TRANSITIONに「MOTION」を追加</h3>シーンの切り替えはこれまでBlack Fade/Mix Fadeの２つだけでしたが、今回１つ追加となりました画面が移動しながら出てくるエフェクトで、初期値だと次のような動きになります<figure>
<div class="iframe-movie">
<iframe width="560" height="315" src="https://www.youtube.com/embed/m73qrwijosc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<figcaption>MOTION トランジションの動き</figcaption>
</figure>レイアウトによって動きが変わっていきます。トランジションの時間は1.0sです<h3 id=key-color-に「-blue-1-3-」「-green-1-3-」を追加>KEY COLOR に「 BLUE 1-3 」「 GREEN 1-3 」を追加</h3>これまでキー表示（画面に画面を重ねて表示させる）は黒・白いずれかで背景を抜いていました主に画面上にタイトルやロゴ、キャプションなどを重ねる用途の機能でした残念ながらグリーンバック・ブルーバックを抜くことができず、一般的なクロマキーを使うライブ配信では致命的でした（OBSやXSplitなどでソフトウェアで処理して抜くほかなかった）今回のアップデートで青・緑も背景を抜けるようになったので、クロマキーとしてグリーンバックで背景を抜いて合成することが可能になりました<h3 id=keyのsource-chにgreen1-3-blue1-3が追加>KEYのSOURCE CHにGREEN1-3, BLUE1-3が追加</h3>それをつぶやいたところ公式アカウントよりメッセージ頂きました<blockquote class="twitter-tweet">
ご意見ありがとうございます！クロマ・キーのパラメータは上位モデルに比べてちょっと限定的な値なので一度本番前に抜け具合をお試しください。&mdash; Roland A&amp;V | Japan (@RolandSG_jp) <a href="https://twitter.com/RolandSG_jp/status/1217013528764116993?ref_src=twsrc%5Etfw">January 14, 2020</a></blockquote>ということなので、急遽クロマキーの抜け具合も比較してみました左がVR-1HDで緑を抜いたもの、右がXSplitで緑を抜いたものです左：VR-1HD 右：XSplit 確かにVR-1HDは髪の毛周りの抜けが若干あまいです。XSplitは境界部分にぼかし（アンチエイリアス）が入れられるのでその差はかなり大きいです（なくてもXSplitのほうがきれいに抜けます）入力の違いからか明るさがだいぶ変わるので、このあたりは少し調整が必要ですねそれでもVR-1HD上でクロマキー処理をしてくれる分PCの負荷は減るのでディテール気にしなければありですねもしくは後述のスケーリングを小さくするとこのあたりは気になりにくくなりますちなみに上位機種（今回はVR-4HD）では設定パラメータが多いのでもうちょっときれいに抜けます左：VR-4HD 右: XSplitそれでもXSplitのアンチエイリアスはかなり優秀ですねこれはかなりきれいな緑背景の場合なので、実写のグリーンバックで行った場合はまた結果が異なるかもしれません<h3 id=key-に「スケーリング・パラメーター」を追加>KEY に「スケーリング・パラメーター」を追加</h3>青・緑で抜けるようになったキーのスケーリング（拡大率）も変更できるようになりましたこれと、次項目のシーンに追加された「 KEY SW パラメーター 」を使うことで、画面を切り替えつつ、背景を抜いた画面をPIP (Picture in Picture)的に使うことができるようになりますMENU > KEY にZOOMが追加 キー画面の大きさが変えられますちなみにこれ、VR-4HDだとまだできないようです<h3 id=input-1-3-および-scene-a-e-に「-key-sw-パラメーター」を追加>INPUT 1-3 および SCENE A-E に「 KEY SW パラメーター」を追加</h3>入力やシーンの切り替え時にキーのオンオフができるようになりました前述したようにクロマキーで抜いた画面をPiP的に入れ込むものをシーン切り替えでオンオフできます<ul><li>UNCHANGEDはシーンを切り替えてもキーの変更はしない<li>OFF(BEFORE TR)はトランジション前にオフにする<li>OFF(AFTER TR)はトランジション後にオフにする<li>ON(BEFORE TR)はトランジション前にオンにする<li>ON(AFTER TR)はトランジション後にオンにする</ul>という設定になりますシーンの切り替え時にキーも一緒にオフしたりしないといけなかったものがしなくてよくなりましたワンオペでも回しやすいようになっていますねこちらもVR-4HDにはありません<h3 id=scene-type-に「-pbyp-picture-by-picture」を追加>SCENE TYPE に「 PbyP (Picture by Picture)」を追加</h3>新しいシーンタイプが追加されました今までも設定次第ではこのレイアウトはできた気がしますが、 プリセットに追加されたということなのでしょう２画面まで可能ゲーム配信で2人対戦とかするときのレイアウトやVR-1HDのビデオ・フォロー・オーディオ・モードを使っての複数カメラの対談配信にも使えそうです。3画面いけるともっと良かった！<h2 id=もう少し欲しいところ>もう少し欲しいところ</h2>VR-1HDはシンプルかつコンパクトでよいミキサーですが、個人的にもう１歩欲しい部分があります<h3 id=プレビューにすべての入力画面一括表示できない>プレビューにすべての入力画面一括表示できない</h3>プレビュー出力はMainに出力されているものと同じ映像しか表示できないため、画面に表示していない入力がどのような表示になっているかを確認することができませんそのためプレゼンテーションでスライドが表示されたのを確認してから画面を切り替え、というのができないので、様子を見てのスイッチングがしにくいです分割されたプレビュー（VR-4HDのような）ができるといいですね<h3 id=キーに指定した画面をクロップ（切り抜き）できない>キーに指定した画面をクロップ（切り抜き）できない</h3>PiPで表示する際はクロップできるのですが、クロマキーなどで抜いた映像はクロップすることができません今回スケーリングできるようになったので、クロップが欲しくなってしまいました<h3 id=リモートアプリであるvr-1hd-rcsがpcのみ>リモートアプリであるVR-1HD RCSがPCのみ</h3>これはVR-1HDに限ったことではないですが、操作性を考えたときにタブレットなどのタッチディスプレイで操作できるほうが直感的かつスピーディに操作ができますオーディオミキサーではiPadで操作できるものが出てきていますので、いつか！何卒！という気持ちですノブをくるくるしすぎて壊れそうで怖い・・・（壊れたことはないけど）ちなみにSurfacePro7の解像度の高さだと150％ズームでも結構小さいので操作が難しいです・・・せめて200%ズームがあると嬉しいですね<h3 id=まとめ>まとめ</h3>不満をいくつか書きましたが、とてもよくできたミキサーだと思いますBGMやSEを鳴らすためのポン出し機能も、リバーブをかけるボタンもあるし、VT-4ライクなボイスチェンジャーもついてますビデオ・フォロー・オーディオ・モード ではマイクAに一定の音が入れば画面Aを、マイクBに一定の音が入れば画面Bを、両方入っていれば画面Cを、といった具合に音で自動スイッチングしてくれます（VR-4HDにもありますが）最初にセッティング終えてしまえばあとは見守りつつ微調整するだけでいい感じに配信できるので、ワンオペや少人数でのライブ配信は楽でいいですね公式サイトVR-1HD <a href=https://proav.roland.com/jp/products/vr-1hd/ rel="nofollow noopener"target=_blank>https://proav.roland.com/jp/products/vr-1hd/</a>VR-4HD <a href=https://proav.roland.com/jp/products/vr-4hd/ rel="nofollow noopener"target=_blank>https://proav.roland.com/jp/products/vr-4hd/</a>ちなみにこの２台の大きさを比較するとこんな感じです入力出力の数が違うので一概に比較できませんがVR1-HDは非常にコンパクトです高さも抑えられていますなによりこだわったであろうこのデザインはとても好みですそれではよい配信ライフを！

VR-1HDのシステムプログラム（1.20）バージョンアップ内容まとめ

<nav class=toc><ol class="toc-level toc-level-1"><li class="toc-item toc-item-h2"><a href=#基本無料とは class="toc-link toc-link-h2">基本無料とは</a><li class="toc-item toc-item-h2"><a href=#主に相談可能なこと class="toc-link toc-link-h2">主に相談可能なこと</a><li class="toc-item toc-item-h2"><a href=#条件 class="toc-link toc-link-h2">条件</a><li class="toc-item toc-item-h2"><a href=#コーヒーサービス class="toc-link toc-link-h2">コーヒーサービス</a><li class="toc-item toc-item-h2"><a href=#ポリシー class="toc-link toc-link-h2">ポリシー</a><li class="toc-item toc-item-h2"><a href=#欲しいものリスト class="toc-link toc-link-h2">欲しいものリスト</a><li class="toc-item toc-item-h2"><a href=#最後に class="toc-link toc-link-h2">最後に</a></ol></nav>昨年末しっかりした仕事環境を作ろうということで部屋を追加で借りて作業オフィスを作りましたそこでせっかくなのでいろんな人に来て欲しいと思い、今回基本無料での相談会（ただの雑談でもOK！）を実施することにしました<h2 id=基本無料とは>基本無料とは</h2>相談会の結果に対して満足頂けた場合に、相応と思われる金額を相談者側よりご提示頂くものです （もしくは欲しいものリストからの支援）特にご提示頂かない限りはこちらから要求等をすることは一切ありませんのでご安心ください※ ご提示金額の請求書の発行が可能です ※ 統計情報として匿名化した上で集計データなどを公開することがあります（その後が気になる方に向けて）<h2 id=主に相談可能なこと>主に相談可能なこと</h2><ul><li>Webフロントエンド全般に関する相談<li>自社のプロダクト全般に関する相談<li>プロダクトマネジメントに関する相談<li>プロジェクトマネジメントに関する相談<li>開発中のサービスのレビューやアドバイス<li>Webフロントエンドエンジニアのキャリア相談<li>Webフロントエンドに興味がある方の相談<li>勉強会やセミナーなどのライブ配信に関する相談や設営<li>開発組織や採用に関する相談<li>勉強会やセミナー等での登壇<li>インタビュー<li>ペアプロして欲しい</ul>※ リクルーティング、案件紹介、人材紹介を目的の来訪はご遠慮ください（仲介を通して転職や仕事の受注をすることは今後もありません）<h2 id=条件>条件</h2><ul><li>直接お会いしたことある方<li>訪問頂ける方<li>初めて来られる方<li>会話の録音への許諾 （外部に公開することはありません）<li>匿名化された統計情報としての利用を許諾</ul>※ 1回1時間程度でお願いいたします ※ 同席は1名様までとさせて頂きます（面識なくても可） ※ 事前に簡単なヒアリングシートの記載にご協力ください ※ 2回以上ご希望の場合は別途ご相談ください##お申し込み方法と日時 ご希望の方は任意のSNSなどでご連絡ください。日時はその後に調整とさせて頂きます特に締め切りなどの日付は設けておりませんので、お気軽にご連絡ください##場所 東京メトロ東西線 浦安駅より徒歩4分20時過ぎの天候が良い日はディズニーランドの花火が見えます※ 詳細な場所は追ってご連絡いたします<img alt=引越中の様子 loading=lazy src=/assets/blog/free-consultation-01/IMG_5121.jpg> 引越中の様子<img alt="Blue Yeti Pro"loading=lazy src=/assets/blog/free-consultation-01/original-1-scaled.jpg> Blue Yeti Pro<img alt="Roland VR-1HD &#38 Zoom U-22"loading=lazy src=/assets/blog/free-consultation-01/original-scaled.jpg> Roland VR-1HD &#38 Zoom U-22<img alt="Sony FDR-AX45 &#38 Sennheiser MKE600"loading=lazy src=/assets/blog/free-consultation-01/original-2-scaled.jpg> Sony FDR-AX45 &#38 Sennheiser MKE600<h2 id=コーヒーサービス>コーヒーサービス</h2>希望される方にはハンドドリップで淹れたコーヒーをお出ししています ヒアリングシートに希望のチェックを入れてお送りください （豆はその時仕入れたものになります）<h2 id=ポリシー>ポリシー</h2>相談内容、訪問者の情報は原則非公開とし、それらの情報は適切に管理いたします 訪問者の希望がある場合に限り、許可頂いた範囲内においてSNSへの共有やコメントをすることがあります録音データは相談応対の振り返りと双方の安全・公平性担保のために使用いたします 外部に公開されることはありません 録音その他情報は訪問日より6ヶ月をもって削除いたします<h2 id=欲しいものリスト>欲しいものリスト</h2>欲しい物リストを掲載しています。基本的に作業オフィスで使用するものだけにしています<a href="https://www.amazon.jp/hz/wishlist/ls/3RJ397C4KQFZI?ref_=wl_share"rel="nofollow noopener"target=_blank>https://www.amazon.jp/hz/wishlist/ls/3RJ397C4KQFZI?ref_=wl_share</a><h2 id=最後に>最後に</h2>とりあえずなんでもやってみようと勢いでスタートさせてるところはありますが、 作るだけでなく積極的に行動していく2020年にしていきたいと思いますどうぞよろしくお願いいたします！

基本無料でなんでも相談会を実施します

基本無料の相談会を実施します

<nav class=toc><ol class="toc-level toc-level-1"><li class="toc-item toc-item-h2"><a href=#virtual-shotの画面キャプチャ class="toc-link toc-link-h2">Virtual Shotの画面キャプチャ</a><li class="toc-item toc-item-h2"><a href=#使い方 class="toc-link toc-link-h2">使い方</a><li class="toc-item toc-item-h2"><a href=#今後について class="toc-link toc-link-h2">今後について</a></ol></nav>こんにちは、せーぶるですアバターとバナーを組み合わせた画像を作るのがちょっと手間だったので、 FaceRigのVirtual Cameraの映像と任意の画像を合成した画像を作れるジェネレーターを作りました<h2 id=virtual-shotの画面キャプチャ>Virtual Shotの画面キャプチャ</h2><img alt=画面キャプチャ loading=lazy src=/assets/blog/virtual-shot/virtual-shot-capture.png>Virtual Shot （ <a href=https://sable-virt.github.io/virtual-shot/ rel="nofollow noopener"target=_blank>https://sable-virt.github.io/virtual-shot/</a> ）<h2 id=使い方>使い方</h2>FaceRigとFaceRig Virtual Camera（おそらく今はFaceRigを入れれば一緒に入る？）をあらかじめインストールしておきますFaceRigを起動して、背景を緑に、ブロードキャストに切り替えをオンの状態にしておきます（下図）<img alt=背景を緑でブロードキャストオン loading=lazy src=/assets/blog/virtual-shot/facerig.png><a href=https://sable-virt.github.io/virtual-shot/ rel="nofollow noopener"target=_blank>https://sable-virt.github.io/virtual-shot/</a> にアクセスします カメラの取得を求められるので必ず許可してくださいファイルを選択ボタンを押して背景にしたい画像を選択します。 画像が読み込まれたら、その横にあるセレクトボックスからFaceRig Virtual Cameraを選択し、カメラ取り込みをクリックします少しするとアバターが表示されるので、ドラッグ＆ドロップで位置を、四隅をドラッグして大きさを調整します画面左下の一時停止をクリックするとFaceRigの映像が停止します。決めポーズをしたら一時停止し、確認した上で保存ボタンをクリックしますアバターと背景画像が合わさった1枚の画像がダウンロードされます！以上！（下図）ジェネレーターから出力されたイメージの例最終出力結果 ※ 画像がサーバーにアップロードされたり、映像が外部に送信されるようなことはありません<img alt=最終結果 loading=lazy src=/assets/blog/virtual-shot/capture-1578192955483.png>今回はReactで簡易に組んでます。コードはgithubで確認できますので、実装が不安な方はご確認ください sable-virt/virtual-shotなお雑に組んでいるところもあるのでコードの参考にはしないでね！<h2 id=今後について>今後について</h2>今のところバージョンアップの予定はありませんが、反響があれば少しずつ実装するかもしれません・・・例 – グリーンバックの抜き具合の設定 – 複数映像の配置 – 見た目の調整 – 取り込む映像の解像度変更利用についてはご自由にお使い頂けます。要望や不具合はIssueに記載してもらえると助かります！ それでは良いバーチャルライフを！

ブラウザ上でFACERIGのアバターと静止画を合成した画像を作るジェネレーター 「VIRTUAL SHOT」

<nav class=toc><ol class="toc-level toc-level-1"><li class="toc-item toc-item-h2"><a href=#立ち絵 class="toc-link toc-link-h2">立ち絵</a><li class="toc-item toc-item-h2"><a href=#ミニバージョン class="toc-link toc-link-h2">ミニバージョン</a></ol></nav>こんにちは、せーぶるです以前はfrontainerという名前で活動をしていましたが、2020年の節目のときに思い切って名称を変更するとともに、アイコン等もすべてオリジナルにしました<h2 id=立ち絵>立ち絵</h2><img alt=立ち絵 loading=lazy src=/assets/blog/introduction/standing.png><h2 id=ミニバージョン>ミニバージョン</h2><img alt=ミニバージョン loading=lazy src=/assets/blog/introduction/mini.png>フリーランスになってからは対外的な活動は縮小していましたが本年は対外活動を増やすとともにアウトプットも増やしていくことにしましたそこで読み方がわかりにくいなどの理由から名称もわかりやすいものに変更しブログを作ることにしましたしばしばお仕事の相談を受けることもありましたので<a href=/pages/job>Job Board</a>にまとめております記載している以外にも何かあればご相談ください

jsdog.dev

タグ: 技術

TypeSafeなReducerを作るライブラリ「Fluent Reducer」

ブラウザ上でFACERIGのアバターと静止画を合成した画像を作るジェネレーター「VIRTUAL SHOT」

2020年の節目のときにH/Nを変えてブログを始めました

タグ

最新記事

タグ: 技術

TypeSafeなReducerを作るライブラリ「Fluent Reducer」

ブラウザ上でFACERIGのアバターと静止画を合成した画像を作るジェネレーター 「VIRTUAL SHOT」

2020年の節目のときにH/Nを変えてブログを始めました

タグ

最新記事

ブラウザ上でFACERIGのアバターと静止画を合成した画像を作るジェネレーター「VIRTUAL SHOT」