自分にしっくりくるノートテイキングアプリを探して

Obsidian note-taking

自分にしっくりくるノートテイキングアプリを探して

タイトルの通り、探しています。

欲しい機能

  • ネイティブアプリ もしくは Electron ベースのローカル動作するアプリ
    • Web ベースは論外
  • コンテンツはプレーンテキストとして保存される
    • 後々の 移行やバックアップなど考えるとプレーンテキストが1番無難です。
  • ファイル名は自動で決まる
    • サッと書き始めてサッと終わりたいので保存するタイミングで「どこに」「どんな名前で」とか聞かれたくない
  • タグ付けで管理・絞り込みができる
    • 構造化や整理が苦手なのでフォルダで管理できない人なんです
    • タグくらいの緩いもので管理して、さらにそこから検索できれば良いと思っています。
  • 日本語が普通に書けること
    • やはりマイナー言語なので海外製のアプリだと日本語入力に難ありのものが多い印象があります
  • 時系列でコンテンツ（ファイル）一覧がみられる
    • 僕の脳みそは時間をベースに記憶しているようなので時系列降順でみたい。「このメモの前日くらいにアレを書いたな」とか思いながら探す癖があるのです。
  • コンテンツがチラ見えした状態で一覧化されている
    • 前段で書いてますがファイル名に特別な意味を持っていません。なので Finder の表示のように純粋なファイラーみたいな形式でコンテンツ（ファイル）を見せられても何もわかりません。
    • 僕は1行目に # タイトル 日付 を書く癖が比較的ついているので先頭２〜３行くらいをプレビューしてくれれば上述の「時系列に並んでいる」と並行して検索しなくても目的のファイルを見つけることがある程度できます。

惜しいアプリを使ってました

FSNotes App – Modern notes manager for macOS and iOS というのを使ってました。

使い始めたときは僕が挙げた欲しい機能がすべて備わっていました。

ただ、バージョンが上がるにつれ日本語入力があやしくなり、タグの管理方法が変わったりして使いづらくなりました。

なので古いバージョンを使い続けていましたがさすがに限界があるので新天地を求めています。

今、試用中のアプリ

Obsidian を使い始めました。

欲しい機能はあるのか？

  • ネイティブアプリ もしくは Electron ベースのローカル動作するアプリ
    • Electron ベースなので許容範囲
  • コンテンツはプレーンテキストとして保存される
    • ○
  • ファイル名は自動で決まる
  • タグ付けで管理・絞り込みができる
    • 許容
    • 昔の FSNote のような Finder のタグ機能を使ってコンテンツ内にタグが出てこないものが1番うれしかったのですが、こんな機能を持っているのがレアなので Front Matter や #ほげほげ 記法でタグ付けできるのでよしとします。
  • 日本語が普通に書けること
    • Electron ベースなので不安でしたが特に大きな問題はないです。
    • ATOKの変換候補ウインドウと入力中の文字が若干重なっているのが気になるくらいです。
  • 時系列でコンテンツ（ファイル）一覧がみられる
    • ソート方法は複数種類あるのでクリア
  • コンテンツがチラ見えした状態で一覧化されている
    • 残念ながらこれだけはないです。
    • 基本的に左ペインに出てくる一覧はファイラーとして機能しているのでファイル名が出ているだけです
    • タグを #ほげほげ 記法に統一しつつコンテンツ先頭付近に書くようにすれば、タグでの絞り込み時に「該当文字の前後を表示」機能を使うことで擬似的に叶えることはできますが、ちょっと微妙。

不満なところ

  • Cocoa に準拠したエディタじゃないので僕の手癖の機能が使えない

逆に良いところ

  • 画像をエディタにドラッグ＆ドロップしたらよしなにファイルをコピーしてくれつつ画像記法に変わる
    • これまでのツールではそれができなかったので画像をノートに含めることを避けてきましたがこの機能があれば積極的にいれようかなと思えました。
  • ファイルの参照・埋め込み
    • 別ファイルに書いた内容を簡単に埋め込めます。
    • まとめ記事的なのを簡単につくれます
    • 記述量が多くなりそうなものを書くときもファイル分割できます

さいごに

  • 他におすすめのアプリケーションがあれば教えてください
  • Obsidian のおすすめのプラグインがあれば教えてください。

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:うちの猫ぐりこさん