やしむすがもがいてるブログ

変化の早いエンジニア業界に置いてかれまいともがいてる人のブログです。モバイルのweb,front,native周りを書いていきます

Snap Cameraで使えるバーチャル背景の最短作成方法

ハッピーリモートライフ？

望む望まないに関わらず、リモートワーク大流行中の昨今ですが、皆様いかがお過ごしでしょうか。

リモート会議用にバーチャル背景が各所から配られるムーブがありますが、多くのテレカンソフトでは人物切り抜きの機能が無いためバーチャル背景を使用できません。

そんな時、手段の第一候補に上がるのはSnap Cameraですが、 Snap Cameraでバーチャル背景を設定する場合、バーチャル背景毎にエフェクトを作成しないと使用することができません。

Snap Cameraではこのエフェクトの事をレンズと言いますが、 今回はレンズを作るための Lens Studio というソフトを使って、バーチャル背景のレンズを作成し、Snap Cameraで使用できるようにするまでを紹介したいと思います。

この記事でわかることを手短に

Lens Studio を使って Snap Camera で使えるバーチャル背景を作る方法

Snap Camera を使えばzoomのバーチャル背景のように、カメラから切り抜かれた自分を背景画像に合成するエフェクト設定することが出来ます。 そのエフェクトを Snap Camera ではレンズと言いますが、レンズを作るためのソフトが Lens Studio です。 この記事は、 Lens Studio の詳しい説明や使い方は解説せず、最短で自分の好きなバーチャル背景のレンズを作成して使用する方法を紹介します。

各所で配布されてるバーチャル背景用の画像を使う際は注意が必要

レンズを Snap Camera で使うにはpublishする必要があり、privateな状態での使用ができません。 検索に引っかからないようにする事は出来ますが、URLやQRを知っていれば誰でも使用することが出来ます。 そのため、各所でバーチャル背景用の画像が提供されていますが、再頒布規定が無い場合使用をやめておくのが無難かもしれません。

必要なソフトをダウンロード

背景用の画像を準備する

今回はこの画像を背景に設定したいと思います。

f:id:yashims85:20200502062857p:plain

レンズを作る

レンズを作るためにはLens Studioでレンズを作成する必要があります。 Lens Studio自体はUnityを始めとした3Dソフトを扱ったことがある方なら、比較的すぐに馴染めると思います。 が、今回は細かいことは抜きにして、バーチャル背景のレンズを作成することに特化して説明をしたいと思います。

テンプレートからレンズを作成する

Lens Studioを起動すると以下のような画面が表示されます。 まずはプロジェクトの作成を行いますが、+ NEW PROJECT から始めてしまうと虚無になってしまうので、 Templates からプロジェクトを作成しましょう。 Templates の中から Segmentation を探してプロジェクトを作成してください。

f:id:yashims85:20200502050417p:plain

テンプレートを編集する

Projectを作成すると、編集画面が表示されると思います。Preview画面にすでにいいのプレビューが表示されていますね。

背景画像取り込み

画像中の赤枠で囲まれている通り操作して、背景画像の取り込みと設定を行います。

  1. 画面左のObjects Pane から SegmentationController [EDIT_ME] を選択します。
    • 右側の Script Pane に今選択した SegmentationController [EDIT_ME] のプロパティが表示されます。
  2. その中から Image Texture を選択して編集しましょう。
  3. ポップアップしたウィンドウから + Add New > Import Files を選択して、用意した背景画像を取り込みます。

f:id:yashims85:20200502050450p:plain

背景画像調整

Preview Paneの背景が変わったでしょうか？このままですと少し騒々しいので、Script Paneのパラメタを少しいじっていきましょう。

  • Tiled Settings
    • ScrollingをOFF
    • Tile Densityを2.0程度に調整

f:id:yashims85:20200502053639p:plain

どうでしょうか。これだけで使える背景画像になったと思います。

Publishする

Projectの情報を設定する

左上の Project Info から情報を設定しましょう

  • 必須
    • Lens Name: ユニークな値
  • 必要に応じて
    • アイコン: Remove Icon がボタンになってて、ここをクリックすると変更できます

f:id:yashims85:20200502060533p:plain

Publishする

左上の Publish Lens からPublishしましょう

f:id:yashims85:20200502060912p:plain

Publish時の情報設定は特に何もやらなくても一旦は大丈夫です。そのまま Submit を押して、審査に出しましょう。

レビュー待ち

Submitが行われると、My Lens ページが表示され、先程Submitしたレンズの審査状況が確認出来ます。 1分もしないうちにステータスが In Review -> Live になってreviewを通過すると思います。

f:id:yashims85:20200502061251p:plain

検索で引っかからないようにする

これは自由ですが、検索に引っかからないようにする場合、Liveになったあと … から Do Not promote を ONにすることで検索されなくなります。

f:id:yashims85:20200502061513p:plain

レンズを使う

  • Share ボタンをクリックすると、URLが表示されるのでコピーしておきます。
  • Snap Cameraを起動し、Search Lenses に先程のURLを入力すると出てきます。
  • Do Not promote にしている場合、毎回検索しないといけないので、お気に入りに入れておくと良いでしょう

テレカンソフトでSnapCameraの映像を使う

Google Meet, Zoom, Discode, 等それぞれのソフトに依存してしまうので、それぞれ設定方法は違いますが、カメラデバイスの選択肢に Snap Camera が追加されているはずですので、それを選択してください。

文字が含まれるバーチャル背景を作った場合、テレカンソフトの画面上で映像が鏡像になって見える場合があると思いますが、これはインカメラで撮影した映像を自分のモニターで見る場合、鏡像が都合が良いからです。 相手側にはちゃんとした映像が送られているので問題ありません。

その他

  • 映像をリアルタイムで編集するので、当然ですがわりと処理は重いです。

いかがでしたでしょうか。バーチャル背景を作ることに特化して説明しましたが、 簡単なバーチャル背景の作り方が理解できたかと思います。

家にいると暇という方は、ぜひ創作活動として試してみてはいかがでしょうか？

Githubの2段階認証でログイン出来ない事態にならないための注意点

github

皆さんGithubで2段階認証を行っていますか？使っていないという方は、自分のコードを守るために、今すぐ設定するべきです。

また、仕事でGithubを使っている人なら、不正ログイン等があった場合、瑕疵責任を問われる可能性もありますので、必須の設定といえます。

しかし、2段階認証は強力な反面、アカウントをロックしてログイン出来なくなってしまうと、githubは一切救出してくれないので、そうならないための設定をご紹介します。

2段階認証(two-factor authentication)を設定しよう

2段階認証とは

パスワード入力の他に、認証情報を入力することで、セキュリティを高める認証方法です。 githubではアプリ認証と、SMS認証をサポートしているようです。 今回はアプリ認証で2段階認証を設定します。

Authenticatorアプリをインストール

認証を行うためのアプリは何でもよいのですが、こだわりが無ければGoogle謹製をつかうのが良さそうです。

2段階認証の設定を有効にする

Personal settings > Security > Set up two-factor authenticationを選択

f:id:yashims85:20151105003305p:plain

アプリを使って2段階認証を行う

f:id:yashims85:20151105003309p:plain

アプリを起動して、認証設定を行う

  1. 認証アプリ内のQRコードリーダーを利用して、左のQRを読み込みます。
  2. 右のような画面が表示されるので、表示されている数字をタイマーの期限以内に入力フォームに入力します

f:id:yashims85:20151105003312p:plain

recovery codeをダウンロード

携帯を紛失したり初期化した場合に必要になります。プライベートなクラウド上においておくと良いでしょう。 2段階認証を有効にして、携帯とリカバリコードをなくし、FallbackSMSも登録していない場合、githubは救済してくれないので、紛失しないよう超ご注意ください。

f:id:yashims85:20151105003314p:plain

Fallback SMS numberを登録しておく

Fallback SMS number を登録しておくと、携帯を紛失しても、SMSでリカバリすることができます。

f:id:yashims85:20151105003318p:plain

国番号とSMSが受け取れる電話番号を入力してSMSが来るのを待ちます。

000000 is your GitHub authentication code.

というSMSが来たら、フォームに番号を入力すれば完了です。

設定されていますね。

f:id:yashims85:20151105010948p:plain

設定はこれで完了です

f:id:yashims85:20151105012238p:plain

実際にログインしてみる

試す場合は、別ブラウザか、シークレットウィンドウでやってみましょう。 何かミスってログインできないとかなったら切ないですからね。。

携帯をなくした/機種変更した等で、ログイン出来なくなってしまった場合

もう一度アプリをインストールして、再度認証設定をしましょう。 その際githubへログインするには、リカバリコードを使用するか、SMSで認証キーを受け取ってログインします。

f:id:yashims85:20151105012301p:plain

  • Send the code to your backup phone numberはSMSを使ってログインします
    • ここをクリックするとSMSが即時送られ、画面が遷移します。
    • 送られてきたSMS内のコードを入力することでログインできます。
    • backup SMS numberを登録していないと表示されません
  • Enter a two-factor recovery codeはリカバリコードを使ってログインします。
    • リカバリコードの中からどれか1つを入力しましょう

FallbackSMSを登録せず、携帯とリカバリコードを同時に無くすと。。。

死亡。githubに問い合わせても、セキュリティ上の観点から絶対に救出してくれません*1。 逆を言えば、FallbackSMSが設定されているか、リカバリコードがあれば復旧できるので、この2つは必ずやっておきましょう。

*1:sshkeyでverifyできれば救出してくれるケースもあるようです。その場合は他の方の記事をご参照下さい。

perlの演算子の優先度

まずは、以下の2つのコマンドを何も考えずにコンソールに入力してみてください。

perl -E 'say 10,000 or 56'
perl -E 'say 10,000 || 56'

さてどのような値が返ってくると思いますか？何だろう？10000かな?

[yashims85@yashims85:~]% perl -E 'say 10,000 or 56'
100

ファッ!?

これは、10,000が1つの数値ではなく、sayの2つの引数としてsay(10, 0)のように解釈されたためです。 ( sayに複数の引数を渡すと、文字列として結合する。また000はint(0)で解釈される)

では、もう一つの方。。まぁ同じ結果だろう。

[yashims85@yashims85:~]% perl -E 'say 10,000 || 56'
1056

ファッ!!!?!?!?

これは、perlではorと||の結合優先度が異なるためです。そのためsay(10, (000 || 56))と解釈されました。

というわけで、まとめると今回の引掛けポイントは以下の2点です。

  • 10,000は2つの数値だよ！
  • orと||は優先度が全然違うよ!

こんなん普通に騙されるわーーー

orの扱いが特殊なんですね。というわけで、orでつなげるときは単項同士でつなげるか、()で優先度を明示したほうが良さそうですね。

YAPC::Asia 2015 ありがとう YAPCに行ってきた

DeepLearning の前に知っておくことがある！ 再帰型のニューラルネットワークや自己組織化マップについて語ろう

前提知識なしだとだいぶキツイかもなぁと思いながらも、興味本位で参加。 DeepLearningをやる前に、前提としてニューラルNWの仕組みを理解して置くと更に深く突っ込んでいけるよ。という話でした。

東京+アメリカ-日本=NY

というメモが残ってるので、ニューラルNW的にこういう入力を与えるとこういう出力をかえせるようになる。。。らしい。。

質疑応答

  • なるほどわからん

それは僕たちのドメイン・DNS運用

カヤックさんで大量にもっているドメイン・DNSの運用の歴史の話でした。

http://yapcasia.org/2015/talk/show/e8eebd70-f906-11e4-8f91-8ab37d574c3a

  • AWS route53を使ってDNS管理
  • roadworkderを使って設定をDSLで書けるように

HTTP/2時代のウェブサイト設計

HTTP/2の特徴と、今までとどのような点を意識して変えていかないといけないのかの話でした。

http://yapcasia.org/2015/talk/show/dead6890-09b7-11e5-998a-67dc7d574c3a

詳しくは資料を見れば良いとして、色々ショッキングな話も多かった。。 * ヘッダ極小になるので、アセットの結合(CSSSpriteとか)がかえって邪魔になる。 * リソースのCacheBusterが不要になる。 * ドメインシャーディングは害悪になりうる。(優先度制御が効かなくなる) * CDN経由の場合コンテンツもCDN経由で流す必要が出てくる

嬉しい話 * Letsencriptというサービスが今秋あたりから出るらしい * 証明書を無料で発行してくれるサービス * HTTP/2はTLS前提なので、このサービスが出てくる事で一気にHTTP/2の流れが来るのではないか

Conway's Law of Distributed Work

円滑にリモートワークを進めるには？そのコミュニケーション手段とは？といった話でした。

http://yapcasia.org/2015/talk/show/a06d9970-0d7b-11e5-aaf9-67dc7d574c3a

諸事情で途中からの公聴だったので、正確でない部分もあるとおもいますが、後半は円滑なリモートコミュニケーションを図るためにどんなツールがあるかという話でした。

その中でもSCREEN SHAREINGでSlackでScreenShareingをするScreenhero(for Slack)が気になりました。

Yet Another Perl Cooking

http://yapcasia.org/2015/talk/show/bb82c8fc-12a3-11e5-962e-d9f87d574c3a

IoTな話。低温調理黄nomikuの紹介をしたかった話でした。が、商品が到着しなかったので自分で作った話でした。 面白かったです。

カンファレンスネットワークの作り方

http://yapcasia.org/2015/talk/show/81342dae-1351-11e5-ab94-d9f87d574c3a

CONBUすごい。 * ソフトウェア屋がプライベートでもコーディングしたいように、NW屋はプライベートでもNW組みたい * でも組んだところで使う人がいない * そうだCONBUに入ろう * CONBUネットワークのCloud化 * カンファレンスNWは構築スピードが要求される。 * 搬入中に機器が壊れることが稀によくある * NWのCore部分をCloud化しよう * 世界中どこにいてもカンファレンスNWを構築できるぞ！ 機器は大体CONBUの自腹。ピンキリだが業務用無線APは安かったりする。

個人的には1日目の打ち上げて飲み過ぎて2日目が全然回れなくて悔いが残る回でした。