Sketch の Color Variables からコードを生成するプラグインを作った

最初のバージョンの開発から3ヶ月近く経ちましたがタイトル通り Sketch の Color Variables からコードを生成する Sketch Plugin を開発したのでその紹介です。

griffin-stewie/ColorVariablesExporter: Export all Color Variables

何をするプラグインか

デザインツール Sketch のプラグインです。2020年10月にアップデートされた version 69 で追加された Color Variables という Sketch 上で定義されている色を開発者向けの書き出しをこのプラグインは行います。

対応フォーマット

僕自身が iOS app 開発者なので Apple Platform を中心に以下の形式に対応しています。

  • Color Set
  • 上記 Color Set を使った UIColor Extension
  • color.xml
  • JSON
  • CLR ファイル

:::message Color Variables は Sketch 上でグルーピングして管理できます。Color Variables がグルーピングされている場合、対応フォーマットのほとんどが階層構造に対応していないため、このプラグインではそれっぽい区切り方で文字列を連結したりしています。 :::

Color Set の書き出しは Storyboard から色を参照したい人もコードから参照したい人も利用できるのでお勧めです。コードから Color Set を使うには文字列で対象の色を参照するのが嫌だったので UIColor の Extension も書き出せるようにしました。Color Set の書き出しと合わせて使う必要があります。UIColor Extension は SwiftGen が生成してくれるコードが気に入らなかったので作りました。RGB の Hex 形式で Doc コメントを書いているので色の値もわかりやすいかなと思います。

extension UIColor {
    /// #361D32 - 100%
    static let appKey: UIColor = UIColor(named: "app_key")!

    /// #543C52 - 100%
    static let appKeyLight: UIColor = UIColor(named: "app_key_light")!

    /// #F55951 - 100%
    static let appAccent: UIColor = UIColor(named: "app_accent")!
}

color.xml は使ったことはないですが こちらの実装を参考に作ったので、Android アプリケーションの開発に使えると思います。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="app_key">#FF361D32</color>
    <color name="app_key_light">#FF543C52</color>
    <color name="app_accent">#FFF55951</color>
</resources>

JSON 形式の書き出しは、他の形式で書き出したい場合のデータとして利用されることを想定して用意しました。jq と組み合わせて CSV にするとかもできますね。階層構造はオリジナルデータのままにしています。 / を適宜処理してもらうと良いかと思います。

{
  "App/Key": "#361D32FF",
  "App/Key Light": "#543C52FF",
  "App/Accent": "#F55951FF"
}

CLR ファイルは、macOS の Color Picker で参照できる形式です。利用用途はあまりなさそうですが Keynote や他のデザインツールなどに持ち込みたいときに使えるかもしれません。

サンプル

元データとなる Sketch ファイルと全形式を書き出したサンプルを置いているので気になる方はみてみてください。

さいごに

個人的には Sketch データと iOS アプリケーション開発での色のやりとりや管理に悩んでいました。そこに登場した Color Variables は待望の機能です。リリース時にすでに API も整備されていたのですぐにプラグインが書ける状況だったのですぐに着手できた事にテンションが上がった記憶があります。

Sketch Plugin の開発は簡単ですので皆さんもぜひチャレンジしてみてください。

お薬手帳のデータ移行をやった時の話

いきさつ

e-お薬手帳というアプリを何年も前からお薬手帳として使っていました。UI やビジュアルデザインは気に入っていませんでしたが当時は他に選択肢もほとんど無い状況だったのでずっと使っていました。

最近のバージョンアップで NTT ドコモが提供する「おくすり手帳データ管理サービス」と連携する別のアプリに統廃合されるという事だったので移行先を探しました。

ほとんどのアプリが見た目が気に入らなかったり前述の「おくすり手帳データ管理サービス」に連携する前提でアカウントを作らないといけない仕様だったため移行できずにいました。そんななか EPARKお薬手帳アプリ がアカウント作成を強制されず見た目も悪くはない状況だったので移行しようと思いました。

移行にあたりやはりデータは引き継ぎたいと思いました。e-お薬手帳の方はエクスポート機能があります。EPARK の方はインポート機能はありませんでした。QR コードの読み取りはできるので QR コードが生成できたら一個ずつ読み取ればいいと考えました。

e-お薬手帳がエクスポートしてくれるデータはテキストファイルで中身は何やら CSV のようなそうでもないような内容でした。Twitter で QR コードの中身のデータフォーマット を教えてもらったばかりだったので照らし合わせてみると QR の中身そのまま。QR も普通のフォーマットということでこれはいけるなと。

移行方法

  1. QR コード生成のためのツールを brew install qrencode していれておく
  2. e-お薬手帳でエクスポートを実施
  3. Mac に繋いでデータをとりだして適当なディレクトリにいれる
  4. ターミナルでとりだしたテキストファイルを格納したディレクトリに入って for txt in $(ls .); do cat $txt | qrencode -o $txt.png; done を実行
  5. 生成された png ファイルを Preview などで開いてひたすら読み込む

以上です。

一括でインポートできる機能があれば良いんですけど読み込みだけは気合いで1つずつやりました...

感想

お薬手帳アプリって気に入るのが結構なかったです。僕がいかに挙げるようなお薬手帳アプリが欲しいです。

  • 見た目と操作感が Apple らしいもの。シンプルなもの。
  • （一括）インポート機能がある
  • エクスポート機能がある
  • QR コードを読み込める
  • 処方された順に表示される
  • Web サービスとの連携は特にいらない
  • iCloud で同期されるくらいでよい

自分で作って公開しようかなという気もしましたが人の命が関わるアプリになるので怖くなりました。

iPhone 12 Pro 購入記録

iPhone

例年の購入記録です。

記念撮影

f:id:griffin-stewie:20201023095358j:plainf:id:griffin-stewie:20201023095447j:plainf:id:griffin-stewie:20201023095505j:plainf:id:griffin-stewie:20201023095515j:plainf:id:griffin-stewie:20201023095529j:plainf:id:griffin-stewie:20201023095803j:plainf:id:griffin-stewie:20201023102124j:plainf:id:griffin-stewie:20201023102427j:plainf:id:griffin-stewie:20201023102650j:plainf:id:griffin-stewie:20201023103140j:plainf:id:griffin-stewie:20201023103359j:plainf:id:griffin-stewie:20201023103429j:plainf:id:griffin-stewie:20201023103712j:plainf:id:griffin-stewie:20201023103742j:plainf:id:griffin-stewie:20201023104357j:plain

反省点

今年は準備が足りなかった。来年はちゃんとする。

  1. Suica, LINE あたりの移行手段の事前確認と準備
  2. 旧機種で適宜 iCloud バックアップを有効化しておく
  3. 旧機種で不要なアプリやデータは事前に消しておく
  4. 旧機種のバックアップ

iPhone 12 Pro 予約記録

iPhone

先ほど予約が完了しました。2020年10月16日(金) の様子を記録として残しておきます。

これまでは以下に列挙したようにヨドバシカメラ梅田で予約を行っていました。

これは例年ソフトバンクの割賦購入をしていたというのもあってそうしていました。今年は一括で買おうと思い金額を調べると Apple から直接買う方が Softbank から一括で買うのと比べて3万円弱も安く買えるということで、Apple から買うことにしあした。

これまで iPhone 3G から毎年買っていて初の Apple Store での購入。

事前準備

事前に、以下をやっておいて準備万端。（と思っていたら....）

  • Apple Store で欲しい商品の細かいコンフィグも含めて設定してお気に入りに登録
  • 支払いに使うカードがちゃんと現在使えるものになっているか確認
  • 配送先住所の確認と変更

予約日当日の予約開始時間

Apple Store アプリで 21:00 の開始時刻から以下を繰り返し。

  1. Apple Store.app を起動
  2. 「もうすぐです」的な画面が出たら、アプリキル

Apple Store.app を使っているのはアプリの方が Web よりも混雑なくアクセスできるというこれまでの情報の蓄積からそうしています。あとは、ブラウザや iPad など並行してトライする人もいますが僕は器用じゃないので iPhone の Apple Store.app に集中しました。

通常通り起動したらお気に入りとして設定しておいた注文を開いて確定に進む。

発注のためのボタンが出ないなと画面中探し回っていたら、Apple Care の選択ができていなかった。ここで時間ロス。

Apple Care の選択をしたら購入に進むためのボタンが出てきたので進む

決済方法が

になっていたので Apple Pay の方が早いかなと思って Apple Pay にしたら、支払いに使用するクレジットカードが使いたい物でないことが発覚。戻ろうとすると「注文をキャンセルするか？」と赤文字で出る。躊躇したけど意を決してキャンセルして支払いメソッドを「通常」に変更。

ここでまたしても罠。クレジットカードのセキュリティ番号を入力しろと。 慌てて物理カードを出して入力。

無事に発売日初日 10/23(金) の配送予定ですみました。

あとは発売日当日に何時頃配送されるかだ。

来年の自分に向けたチェック項目

予約当日の午後くらいから Apple Store の各種設定画面にはいけなくなるので前日までに以下の作業を事前に済ませておくこと

  • Apple Store で欲しい商品の色や容量などの細かいコンフィグも含めて設定してお気に入りに登録
    • Apple Care の選択漏れのため購入ボタンが出ない問題があったので全項目ちゃんと設定しているか確認すること
  • 支払いに使うカードがちゃんと現在使えるものになっているか確認
    • 注文時にセキュリティ番号の入力が必要になるので現物をちゃんと用意すること
  • 配送先住所の確認と変更

また、可能なら Apple Pay でも決済できるように住所や配送先、支払い可能カードの確認をしておくともっとスムーズだろうと思う。この場合はおそらくセキュリティ番号の入力は不要になると思われる。

obs.camera で iPhone をウェブカムにする

mac camera iPhone

前回のエントリ では α6100 をウェブカムとして使った例を紹介しました。今回はそれ以前に試した iPhone をウェブカムにする方法を紹介します。前回のエントリと同様のセットアップで映像の入力ソースが変わるだけですので基本的な準備・設定はそちらを参照してください。

あえて書きますが iPhone を macOS のウェブカムとして使うのであればここで紹介する方法よりも

Webカメラをスマホで高画質にしてみませんか？｜Nobuki Inoue｜note

の方が安くて便利そうなのでそちらをおすすめします。

obs.camera

僕が当時試したのはこちらの iPhone アプリとそれと連携する OBS プラグインです。

obs.camera - Use your iPhone camera to stream with in OBS Studio

クロマキー合成をしたかったので OBS を使うことは決まっていたので当時の僕の知識では OBS との連携を謳っているこのアプリが便利そうに見えました。

有料アプリで1600円くらいするので結構高い方だと思います。

公式マニュアル USB での接続方法 に書かれている通りにやれば使えるようになります。

Wi-Fi 経由の接続方法もありますが、obs-mac-virtualcam プラグインを使うためにターミナルから起動した OBS では obs-ndi プラグインが認識されませんでした。ダウンロードしてきた OBS には認識されていたので何らかの設定かパスの問題かなと思いますが深入りしませんでした。

tips

iPhone を認識しない場合は iOS Camera ソースのプロパティで Refresh Devices や Reconnected to Device を実行するか、物理的にケーブルと Mac とを再接続してみてください。

まとめ

obs.camera は動作も安定していると言えませんしおすすめしません。

  • 有料アプリの値段
  • セットアップのやりやすさ
  • 安定感

これらを含めて Webカメラをスマホで高画質にしてみませんか？｜Nobuki Inoue｜note で紹介されている EpocCam がおすすめです。OBS に取り込む方法も簡単です。適切に 映像キャプチャデバイス ソースを追加するだけです。Wi-Fi でも有線でも簡単に接続できます。

α6100 を macOS で Webカム化（HDMI キャプチャなし、クロマキー合成あり）して Google Hangouts でビデオチャットする方法

mac camera

まえがき

【紹介している仕組みが ver 1.0.0 になったので一部更新】

前回のエントリでビデオチャットの品質向上として映像の質について言及しておいてその内容を書いていませんでした。今回はそれについて書きたいと思います。

ここで紹介する方法はアルファ版の OSS ソフトウェアを使います。使用にあたって機材が故障してもすべて自己責任でお願いします。

基本的にソフトウェアエンジニア向けの内容です。Git, Homebrew, ビルド etc というキーワードを聞いてピンとこない方はやめておいた方がいいと思います。このあたりがわからない方で「パソコン側の負荷を下げてつつ、ミラーレス一眼をウェブカムにしてクロマキー合成したい」という方は ATEM Mini の在庫が復活したころに札束で勝負することをおすすめします。*1（やったことがないけど多分できます）

目的

画質の向上です。

普段のミーティングなら表情などのビジュアル要素も重要なインプットとして使っているはずです。ビデオチャットになるとその情報の質がガクっと落ちてしまいます。そうなると効率が落ち、疲労感が出る（失った情報を別の要素で埋めようとして疲れる）のでどうにかしたいと思いました。

（実際には相手の画質が良くないと自分は結局疲れるんですが、まずは自分からと言うことで）

Before な環境

自宅には書斎があります。ただし、物干し部屋と兼用です。

窓を背にするようにL字型デスクを置いてあります。当然、洗濯物は窓側に干しています。つまりそのままビデオチャットをすると後ろにある干している洗濯物が丸見えになってまずいです。L字型の机の短い方に MacBook Pro を置くとカメラは壁向きになるので余計なものは映りません。ただそこに MacBook Pro を置くためには外部モニターとの接続をはずさないとケーブルの長さ的に足りません。普段はそちら側に iPad などを置いているのでそれをどかさないといけなくなりとても面倒な状況でした。

やりたいこと

  1. 後ろにある洗濯物など生活感が出るものは映さないようにしたい
  2. どうせなら zoom の virtual background みたいに何かを合成したい
  3. そして画質を上げる

やり方を考える

背景処理

そこそこ小綺麗なものが置いてあれば良いカメラとレンズで良い感じぼかしてやれますがそうもいかないので遮蔽物を置きます。WFH がいろんなところで本格的に実施され始めたころに @fladict さんが Twitter でつぶやかれていたグリーンバックの背景布 + スタンドを紹介されていたのでそれを買いました。

Hemmotop T字型 背景スタンド 150 x 200cm Zoomのバーチャル背景 クロマキー スクリーンと万能クリップ5個付き 撮影スタンド 背景サポート 82-192cm 高さ調整可能 背景布ブラケット 持ち運び便利 三脚 バックグラウンド 写真撮影用 父の日ギフト

Hemmotop T字型 背景スタンド 150 x 200cm Zoomのバーチャル背景 クロマキー スクリーンと万能クリップ5個付き 撮影スタンド 背景サポート 82-192cm 高さ調整可能 背景布ブラケット 持ち運び便利 三脚 バックグラウンド 写真撮影用 父の日ギフト

  • メディア: エレクトロニクス

グリーンバックだけだとクロマキー合成ができなかったときに違和感があると思ったのでシンプルに黒幕も同時に買いました。後々この黒を買っていて良かったのは、グリーンだけだと若干記事が透けます。冒頭で説明したとおりデスクに向かった時に背後は大きな窓があるため日差しが入り込むので透けやすいのですが、この黒と2枚重ねにすることで透けを防止できました。

Hemmotop 黒 布 無地 生地 背景布 無反射 1.5m x 2.0m 撮影 背景 スタンド ポール対応 背景シート ポリエステル アイロン掛け可 バックスクリーン ブラック 暗幕 写真 壁紙 折りたたみ可 黒い布 150 x 200 cm

Hemmotop 黒 布 無地 生地 背景布 無反射 1.5m x 2.0m 撮影 背景 スタンド ポール対応 背景シート ポリエステル アイロン掛け可 バックスクリーン ブラック 暗幕 写真 壁紙 折りたたみ可 黒い布 150 x 200 cm

  • メディア: エレクトロニクス

画質

昨年夏から飼い始めた猫の ぐりこさん を撮影するためにα6100を持っています。あとは、家にいっぱい転がっている iPhone。iPhone のカメラは下手なコンデジよりも性能が良いって言われることもあるので悪くないと選択だと思います。

今回は、α6100 でトライしてみました。

対策

@goando が使われている SIGMA fp は USB Video Class(UVC) に対応しているので USB 接続するだけで macOS がカメラをウェブカムとして認識してくれます。僕が持ってる α6100 (おそらくは他の SONY α 系も同様の模様)は USB で macOS と接続はできますがそれだけではウェブカムとしては認識してくれません。Elgato Cam Link 4K や ATEM Mini などの製品は、この製品に input としてカメラからの HDMI 出力を渡してあげると製品からの USB 接続は UVC として macOS が認識してくれるためそれだけで Web カムとして使えます。

ウェブカムとして認識してくれると何がうれしいかと言うと、ほとんどのカメラを使ったソフトウエアで汎用的にその映像が使えるところです。

などなど。実際のビデオチャットサービスに縛られないのは凄くありがたい仕組みですよね。

残念ながら現在 HDMI キャプチャデバイスと呼ばれるようなこの手の製品は軒並み品切れしています。僕も買おうかどうしようか迷っていた頃には在庫があったのですが決心をした頃には時既に遅しということで持っていません。ですので今回紹介する方法は HDMI キャプチャデバイスなしで行います。

今回の僕の目標にクロマキー合成が含まれているのでそれらを踏まえて以下のようなソフトウエアを使っていきます。

僕の環境はこちら

Camera Live

Camera Live

このソフトウエアは、Syphon と呼ばれる映像をソフトウエア間で渡すための仕組みを使って USB 接続した α6100 の映像を他のソフトウエアに渡してくれるものです。Syphon は VDJ 界隈ではポピュラーなものらしいです。Camera Live 自体は Syphon server として動作するので Camera Live が配信する映像を受け取る Client が必要になります。

OBS

OBS(Open Broadcaster Software) と呼ばれるソフトウエアを使います。このソフトウエアは twitch や YouTube などに配信するためのソフトウエアです。カメラ映像やテキスト、静止画などの様々な映像ソースや音声をミックスすることができます。

OBS は Syphon Client を映像入力として扱えます。つまり α6100 の映像を Camera Live を通じて OBS 上で表示ができるようになります。

また、OBS にはクロマキー合成を行う仕組みもはじめから入っています。

obs-mac-virtualcam プラグイン

obs-mac-virtualcam

このソフトウエアは OBS のプラグインです。OBS はデフォルトで各種ライブストリーミングサービスにそのままライブ配信できる機能があります。ローカルに動画ファイルとして残すこともできます。ただ、ビデオチャットサービスにはそのまま配信はできません。ビデオチャットサービスで使うためには Virtual Camera（仮想カメラ）として OBS で扱っている映像を出力する必要があります。obs-mac-virtualcam プラグインはそれを可能にしてくれるプラグインです。

Virtual Camera（仮想カメラ）というのは僕も最近知ったものですが、有名どころだと Snap Camera が Virtual Camera として振る舞っています。Snap Camera は FaceTime Camera などのカメラ映像を加工し、加工した結果を Virtual Camera として提供することでビデオチャットサービスにバーチャル背景や美肌効果が加わった映像を利用できるようにしています。

準備

Camera Live をダウンロード

Releases · v002/v002-Camera-Live

こちらのリリースページから新しいものをダウンロードします。現時点では 13(Alpha) が1番新しいのでこれをダウンロードします。13(Alpha) をクリックすると Assets のところに Camera.Live.zip があるのでこれをクリックしてダウンロードします。

ダウンロードして解凍したらアプリケーションフォルダに移動させましょう。

OBS & obs-mac-virtualcam のビルド のインストール

obs-mac-virtualcam プラグインが順調に開発を重ね公式版になりました。以前は自分で OBS も含めてビルドしないといけなかったためエンジニアじゃない人にはハードルが高かったですが簡単な手順でインストールできるようになりました。

  1. 最新の OBS をダウンロードしてインストールしてください
  2. 最新の obs-mac-virtualcam プラグイン の pkg ファイル（拡張子が pkg に鳴っているファイル）をダウンロードしてください
  3. obs-mac-virtualcam プラグインの pkg ファイルをダブルクリックしてプラグインをインストールしてください
  4. もし OBS を起動している状態であれば OBS を一度終了し、再度起動させてください
  5. Web カムとして認識させたいソフトウエアがあればそのソフトウエアも再起動させてください

個人的にはプラグインのインストールが終わったら macOS 自体を再起動させるのがいろいろと手っ取り早くトラブルも少なくなるのでおすすめです。

普通であれば OBS を公式サイトからダウンロードして云々というステップなんですが、obs-mac-virtualcam プラグインが開発途中のため自分でリポジトリをクローンして手順にそってビルドしないといけません。

こちらのビルドガイド を上から順に実行するだけです。普段から macOS 上で開発をしているような人であれば Xcode や Homebrew などもインストールされていることも多いと思うのただひたすらビルドガイド通りにターミナルでコマンドを叩いていきます。

実際にやってみる

1． まずは α6100 の設定を開いて「USB接続」を「PC リモート」に切り替えてください。

2． 次に α6100 のモードを動画撮影に切り替えます。

3． α6100 と MacBook Pro を USB ケーブルで接続します。

4． Camera Live を起動します。 この段階では Camera Live の真ん中上部の表示は No Camera になっていると思います。

カメラライブアプリを起動した直後の画像

5． α6100 の電源を入れます。 Camera Live に USB PTP Class Camera と表示され*2、真ん中上部の表示が Active になっていれば大丈夫です。

カメラライブアプリにカメラを接続してアクティブな状態のウインドウ

6． 次に OBS を起動させます。

7． 起動すると自動構成ウィザードが表示されますので "はい" をクリックしてください。

OBS の初回起動画面の画像

8． 「録画のために最適化し、配信はしない」を選択した状態で "次へ" をクリックします。 *3

9． 基本（キャンバス）解像度を 1280×720 に変更してください。（最近他の解像度もサポートされたようですが当時のサポート解像度の 1280×720 が無難です） FPS はデフォルト値でいいと思います。"次へ" をクリックしてください。

テストが走るのでしばらく待ちます。

テストが終わったら "設定を適用" をクリックします。

OBS の初期設定が終わったら早速カメラの映像を OBS 上に表示させましょう。

11． 下側にカラムが5個表示されていますが、左から2番目のソースカラムにあるプラスボタンをクリックしてください。

12． いくつかある項目の中からサイフォンクライアントを選択してください。名前を入力するためのシートが表示されますがここでは「サイフォンクライアント」としておいてください。

13． サイフォンクライアントのプロパティ設定ウインドウが表示されます。ソースをクリックして [Camera Live] USB PTP Class Camera を選択します。 この段階でプロパティウインドウにカメラからの映像が表示されていればOKです。もし映っていないようならばカメラとの接続か Camera Live の状態を確認しください。特に USB ケーブルはものによっては充電用のものがあります。必ずデータ転送ができるものにしてください。

14． サイフォンクライアントのプロパティ設定ウインドウではあともう一つ設定します。「透過を許可」のチェックを有効にしておいてください。このチェックボックスの設定を忘れているとクロマキー合成がうまくいきません。 チェックボックスも有効にしたらプロパティウインドウを OK を押して閉じてください。

15． 出力サイズに対してカメラの映像を映し出すレイヤーのサイズが合っていませんが一旦スルーして、クロマキー合成を早速行います。*4

16． ソースカラムに追加したサイフォンクライアントレイヤーを右クリックして「フィルタ」をクリックしてください。 フィルタ設定ウインドウが表示されます。

17． 左ペインの下にある＋ボタンをクリックしてください。

18． いくつか表示される選択肢の中から「クロマキー」を選択してください。フィルタの名前はデフォルトの「クロマキー」のままで結構です。もうこの段階で背景のグリーンが透過されていると思います。（事前にグリーンバックは用意しておいてくださいね） 細かい設定値がありますが、個人的にはデフォルト値のままでも十分だったのでそのままにして「閉じる」をクリックしてください。

19． 背景画像のレイヤーを追加します。

先ほどと同様にソースカラムの＋ボタンをクリックして「画像」を選択してください。レイヤーの名前はここでは「背景画像」としておきます。 こちらも先ほどと同様に画像レイヤーのプロパティ設定ウインドウが表示されます。 ここでは背景画像として使用する任意の画像を設定して OK をクリックしてください。

20． そうすると設定した画像*5が前面に映ってしまいます。カメラ映像を手前に持ってきたいのでソースカラムに並んでいるレイヤーをドラッグ＆ドロップして背景画像を並びの一番下に移動させます。

21． あとは、表示されているコンテンツの位置を微調整します。

ここまでできたらもう少し。

映像を Virtual Camera 化します。

22． OBS のツールメニューにある Start Virtual Camera をクリックします。 もし、メニューバーがクリックできなければ適当な他のアプリにフォーカスを切り替えてからもう一度試してみてください。

23． Virtual Camera 化できているかを試すために QuickTime Player を起動してみてください。

【追記】: 僕の環境では QuickTime Player では OBS Virtual Camera は認識されても実際のカメラ映像が出力されない問題がありました。原因はまだ分かっていませんが、Hangouts などでのビデオチャットは問題なく動作しています。【追記終わり】

QuickTime Player を起動したらショートカットキー ⌘+⌥+N を押しください。カメラからの映像が QuickTime Player 上に表示されると思います。録画ボタンの横になるシェブロンをクリックして入力ソースのなかに OBS Virtual Camera を選んでください。これで OBS 上のプレビューと同じ映像が QuickTime Player 上に表示されていれば成功です。 もし、入力ソースのなかに OBS Virtual Camera が表示されない場合は QuickTime Player を再起動してみてください。

24． Google Hangouts を使ってみます。 Hangouts を開いてビデオハングアウトをクリックします。実際の通話相手は別に必要ありません。招待するためのウインドウとかも適当に閉じてください。OBS の映像が出てこない場合は Hangouts のカメラ設定を変更しないといけません。右上のギアアイコンをクリックして「ビデオ」のところから OBS Virtual Camera を選択してください。OBS Virtual Camera がない場合はブラウザの再起動をしてください。

f:id:griffin-stewie:20200428214430j:plain

tips

  • OBS の映像を Virtual Camera として認識されない場合はビデオチャットサービスを再起動する（ブラウザベースのサービスならブラウザの再起動）
    • OBS の Start Virtual Camera 実行以降に起動したアプリケーションじゃないと Virtual Camera を認識してくれない模様
  • クロマキー合成をする時には背景画像は背景の幕に近めの色が良い
    • 赤っぽい背景画像にすると境界線が緑っぽく見えたり、グリーンバック自体についているしわや影のある部分が綺麗に合成されない

この方法のメリット・デメリット

メリット

  • ミラーレス一眼カメラを使っているので圧倒的に画質がいい
  • しっかりとクロマキー合成ができて、部屋の背景を気にしなくてもいい
  • 現在入手困難な HDMI キャプチャデバイスがなくてもできる
  • ソフトウエアが無料

デメリット

  • 知識が必要
    • エンジニアじゃない人にはちょっと難しい
  • 動作が不安定
    • 特に Virtual Camera を認識させるためには先に OBS の Virtual Camera を動かしておかないといけない
  • CPU 負荷が高くなる
    • ごくまれにヒドいときは日本語入力がままならないですｗ

まとめ

今回紹介した方法に行き着くまでにもっと手軽な方法がないかなどいろいろと試してみましたが、結果的にこの方法がバランスが良かった感じです。

個人的なニーズをフルに満たすためには ATEM Mini を買うしかないと思っています。

興味のある人はチャレンジしてみてください。他にも良い方法があれば教えてください。

参考リンク

*1:僕も本当はこれが欲しい

*2:カメラの機種によって変わるようです

*3:「配信のために...」の方を選んでしまうとウィザードの最後に配信先の情報を必ず入力しなければならなくなる

*4:後ろにクロマキー合成用のグリーンバックが見えてます

*5:うちの猫ぐりこさん

リモートワーク環境の改善

mac camera

コロナ禍においてリモートワークを新たにはじめた人は多いのではないでしょうか。COVID-19 感染拡大を防ぐために僕も今はリモートワークをしています。

リモートワークになると普段のやりとりはチャットツールが主軸になりますが、やはり人と声で会話するとなるとおのずとビデオチャット（Web会議）を使うことになります。ここで改めてビデオチャットで重要になる要素を整理してみます。

  • 映像
  • 音声
  • 通信速度

通信速度は映像や音声を継続的に送受信するため重要です。安定して高速な通信ができればビデオチャットの質（体験）が良くなることが期待できます。逆に貧弱な回線では音声がブチブチと途切れたりや映像が止まったりすることが発生する可能性があります。

音声は聞く方と話す方がありますが特に重要なのは話す方、マイクです。ビデオチャットをしていると音声が悪い人と良い人がいますが重要なはマイクだと思います。

最後に映像です。僕は仕事でもプライベートでも MacBook Pro を使用しています。ビデオチャットをする相手も多少モデル違いはありますが9割方は Mac です。Mac には FaceTime Camera が内蔵されています。最新の MacBook Pro 16インチでも現代においては若干ショボい 720p FaceTime HDカメラ が搭載されています。お手軽に使える利便性はありますが画質は言わずもがな悪いです。特に暗い場所ではザラつきがヒドいです。

ビデオチャットはこの3要素の質が悪いと疲労度が格段に上がるように思います。途切れ途切れの音声では脳内でなんと話したのかを補完しようとしたり、余計な質問をしたりします。プレゼンしているのを見ている最中に映像が止まってしまいプレゼン資料がめくられないまま会話がどんどん進んだりするとわかりやすさが半減してまた余計に疲れます。

これら3要素を可能な限り向上させることで、リモートワーク時のビデオチャットの質が上がりストレスを軽減できると思い自分なりに改善していきました。

通信速度の改善

通信速度の改善にはプロバイダーやバックボーンなどの要素、有線 LAN か無線 LAN などの接続形式、使用しているコンピュータ自身の処理速度など複雑です。プロバイダーなどは住環境に左右され改善しようにも簡単にはできない部分で難しいです。僕の環境は SOFTBANK 光を使っています。NURO 光よりは遅そうですが気になるような速度でもないです。一時期は当時の最新 iPhone でも 10Mbps 時もありましたが、IPv6 にするだけで大幅に改善されました。

今のマンションではルーターは家の中心にあるリビングルームにあります。僕の作業スペースである書斎はドアで仕切られているのと距離が遠いこともあり無線 LAN を使っていました。

通信速度は時間帯などによっても左右されますがやはり無線 LAN は遅いのでは？という思いがありました。ものは試しとリビングに MacBook Pro を持っていき有線で接続すると概ね 1.5倍から2倍ほど速度が上がりました。

今まで分かっていたものの、書斎で MacBook Pro を触ってる時間は多くもないし特に困っていなかったのでスルーしていましたが、リモートワークで平日の日中ずっと使うことやビデオチャットの品質向上を目指すため一念発起し有線 LAN 化を行いました。

リビングにあるルーターから書斎までは15ｍほどケーブルが必要でした。飼っている猫や見栄え、掃除などの生活の邪魔にならないことを考えて配線しようとするとモールで綺麗にケーブルを隠す必要がありました。角の処理を綺麗にしようと思うと曲がったモールが必要なのですが、ここで初めてデズミ、イリズミなどの言葉を知りました。

LAN ケーブル敷設にはなんだかんだで8〜9時間くらいかかってしまいました。

我が家は賃貸なのですが、賃貸でも綺麗に原状回復できるようなモールの貼り方を行いました。（実際に綺麗に戻るかどうかはまだ知らない...）

賃貸でモール敷設で紹介されていた PP クラフトフィルムという厚さ0.2mmほどの透明なフィルムをすべてのモールの下地に使いました。というのもモールにあらかじめついている両面テープは結構強力らしく、壁紙に直接貼ると剥がす時に壁紙もろとも剥がれる場合があるそうです。両面テープなしのモールが購入できなかったので、モールはフィルムに貼り付け、フィルムを壁や天井に張り付けます。フィルムは壁紙にはホッチキスで留めます。ホッチキスの針は細いのであまり目立たないです。僕の場合、天井はホッチキスで留めました。なのでますます目立ちにくいはずです。天井以外の壁はすべてこちらの両面テープで止めました。

ニトムズ はがせる両面テープ 壁紙用 15mm×1.5m T3971

ニトムズ はがせる両面テープ 壁紙用 15mm×1.5m T3971

  • メディア: Tools & Hardware

剥がした後に水拭きすると接着面も綺麗に剥がせるそうです。厚みがある分ボコボコした壁紙でもしっかり貼れました。

有線LAN化の恩恵は期待通りで、この記事の執筆時点で

倍まではいきませんが苦労した甲斐がありました。有線になることでこれまで無線LANでまれに発生していた突然の切断もなくなり快適です。

音声の改善

MacBook Pro 内蔵のマイクは音質もさほど良くないです。指向性の弱いマイクのため周りの音を良くも悪くも拾いすぎて騒々しかったりします。さらに現行 MacBook Pro の前のモデルはバタフライキーボードでタイピング音が結構します。その音もガッツリ拾ってしまうためミーティング中にメモを取っているとなかなか耳障りです。

内蔵マイクがイマイチなら Air Pods Pro があるじゃないかとなるのですが、こちらは装着感と音を聞くという点では好みなのですがマイクが貧弱です。カスカスの音になります。

とはいえそこまでしっかりお金をかける気もなく、調査に時間をかける気もなかったので無難に会社で広く使われていたこちらの商品を買いました。

ゼンハイザー PCヘッドセット ヘッドバンド型両耳式/ノイズキャンセルマイク PC 8 USB【国内正規品】

ゼンハイザー PCヘッドセット ヘッドバンド型両耳式/ノイズキャンセルマイク PC 8 USB【国内正規品】

  • 発売日: 2011/12/16
  • メディア: Video Game

マイクにノイズキャンセリングがついているので音質が格段によくなります。ヘッドセットにマイクがついているのでタイピング音も以前ほど耳障りにはなりにくくなっています。Ear Pods や Bose QC20 のようなイヤフォンについているマイクは顔から離れている場所にあるので小声で話すと全然音がクリアに入りませんが、このヘッドセットなら多少声が小さくても大丈夫です。

個人的に難点なのは付け心地があまり良くないところです。ミーティングが連続してしまうと長時間付けることになりますが、そうなると挟むように固定されているので耳が痛いです。その点は Air Pods Pro や Bose QC20 のようなインイヤーヘッドフォンが快適ですね。

Bose QuietComfort 20 Acoustic Noise Cancelling headphones - Apple devices ノイズキャンセリングイヤホン ブラック

Bose QuietComfort 20 Acoustic Noise Cancelling headphones - Apple devices ノイズキャンセリングイヤホン ブラック

  • 発売日: 2015/06/26
  • メディア: エレクトロニクス

ゲーミング系のヘッドセットだと高機能で長時間付けていても耳が痛くなりにくそうで良さそうです。

もしくは、RODE VideoMicro みたいなマイクか NT-USB Mini を置いて音は Air Pods Pro あたりでも良いかもしれないと思っているところです。

【国内正規品】RODE ロード VideoMicro 超小型コンデンサーマイク VIDEOMICRO

【国内正規品】RODE ロード VideoMicro 超小型コンデンサーマイク VIDEOMICRO

  • 発売日: 2015/10/27
  • メディア: エレクトロニクス

【国内正規品】RODE ロード NT-USB Mini USBマイク NTUSBMINI

【国内正規品】RODE ロード NT-USB Mini USBマイク NTUSBMINI

  • 発売日: 2020/04/17
  • メディア: エレクトロニクス

映像の改善

こちらはいろいろと調べながら試しているところです。長くなったのでこちらの別エントリで書きました。

↓

α6100 を macOS で Webカム化（HDMI キャプチャなし、クロマキー合成あり）して Google Hangouts でビデオチャットする方法 - griffin-stewieのブログ

おまけ

モニター環境もリニューアルしました。会社では LG の 27UL850-W を使っていて同じものを自宅用にも買おうとしていました。

LG モニター ディスプレイ 27UL850-W 27インチ/4K/DisplayHDR400/IPS非光沢/USB Type-C、DP、HDMI×2/スピーカー/FreeSync/高さ調節、ピボット

LG モニター ディスプレイ 27UL850-W 27インチ/4K/DisplayHDR400/IPS非光沢/USB Type-C、DP、HDMI×2/スピーカー/FreeSync/高さ調節、ピボット

  • 発売日: 2018/12/13
  • メディア: Personal Computers

同僚から DELL から同等クラスの新しく出ることを教えてもらいちょうど LG が在庫切れになっていのもあり以下の DELL U2720QM を買いました。

Dell 4Kモニター 27インチ U2720QM(3年間無輝点交換保証付/広視野角/HDR/IPS非光沢/フリッカーフリー/USB Type-C,DP,HDMI/高さ調整/回転)

Dell 4Kモニター 27インチ U2720QM(3年間無輝点交換保証付/広視野角/HDR/IPS非光沢/フリッカーフリー/USB Type-C,DP,HDMI/高さ調整/回転)

  • 発売日: 2020/04/04
  • メディア: Personal Computers

このディスプレイは LG のものよりも好みの画質で買って良かったです。

まとめ

結構な手間とお金がかかりましたがおかげで会社と同等か場合によってはそれ以上の快適さを手に入れることができました。リモートワークをしているみなさんも今回僕が実践した改善の中から1つで取り組んでみると QOL が爆上がりするかもしれません。ぜひお試しください。