Youtube Comment Style EditorというYoutubeコメントカスタマイズするのに特化したCSSエディタを作りました <h2 id="ha7981fd118">開発の背景</h2>OBSにYoutubeコメントを表示することはよく行われますが、その見た目のCSSを編集するのはなかなか難易度が高いです 多くは<a href="http://css4obs.starfree.jp/" target="_blank" rel="noopener noreferrer">Chat v2.0 Style Generator 日本語版</a>を用いて表示内容や文字、背景色などを変更してOBSのブラウザ表示機能を使って表示していることかと思います そこから、大きなレイアウト変更や見た目の編集をするためには、Youtube Liveで実際にコメントを表示し、 HTMLなど確認しつつ試行錯誤しながらCSSを修正し、OBSで確認する、というような手順を繰り返します これは非常に手間がかかり、難易度も高いです 実際にWeb屋の僕がやっても非常に手間がかかる作業だと感じたぐらいです そこでCSSをリアルタイムにプレビューしながら編集できるエディタが必要ではないかと思い作りました <h2 id="h0bc5905fe7">ダウンロード</h2> <a href="https://drive.google.com/u/0/uc?export=download&amp;confirm=a4vC&amp;id=1f81Wq5vFJfQbUyFo2GYY8cMn-yX1nRCM" target="_blank" rel="noopener noreferrer">Windows版（64bit）</a> <a href="https://drive.google.com/uc?export=download&amp;id=13R-RojRJFaFvxDanU198W3b0pruiwnc2" target="_blank" rel="noopener noreferrer">MacOS版</a> <h2 id="hd8d793506b">インストール</h2>このアプリは野良アプリのため、ダウンロードとインストール時に警告が表示されることがあります <img src="https://images.microcms-assets.io/assets/3fc51a71cb214fe8aac5bfc4b303d93a/b3a0106889b1481999577f2d516ab28b/download-warn.PNG" alt=""> 変なコードは入っておりませんので、右の矢印アイコンをクリックして「継続」を選択してダウンロードを継続してください <img src="https://images.microcms-assets.io/assets/3fc51a71cb214fe8aac5bfc4b303d93a/16513bd7ea5d4e73a1d44b55d75deca5/download-continue.PNG" alt=""> <h3 id="hd6d83f06ef">Windowsの場合</h3>ダウンロードした「Youtube Comment Style Editor Setup.exe」を実行してください すると次のような警告が出ますので、「詳細情報」をクリックして表示された「実行」ボタンをクリックしてください <img src="https://images.microcms-assets.io/assets/3fc51a71cb214fe8aac5bfc4b303d93a/27f749a7195b4e1789ed123a9fc1d3f4/guard-dialog.PNG?w=534&amp;h=499" alt=""><img src="https://images.microcms-assets.io/assets/3fc51a71cb214fe8aac5bfc4b303d93a/b9a6e464888a4cbf9a8a77b855f07fca/guard-dialog2.PNG?w=534&amp;h=499" alt=""> あとは画面に従ってインストールを完了させてください <h3 id="hc6acc0c091">MacOSの場合</h3>ダウンロードした「Youtube Comment Style Editor Setup.pkg」をクリックすると次のような警告が出てインストールできません <img src="https://images.microcms-assets.io/assets/3fc51a71cb214fe8aac5bfc4b303d93a/d65490be9d3d43b9839b5285b36f38b8/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-04-06%2023.27.10.png" alt=""> インストールするためにはpkgを右クリックして「開く」をクリックしてください <img src="https://images.microcms-assets.io/assets/3fc51a71cb214fe8aac5bfc4b303d93a/930e9f89dbdd433981e051f146ed2c92/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-04-06%2023.28.31.png" alt=""> すると、警告が表示されますが、「開く」を選択してください <img src="https://images.microcms-assets.io/assets/3fc51a71cb214fe8aac5bfc4b303d93a/e43e37f0ec7440359caf0e7421ac89f7/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-04-06%2023.28.59.png" alt=""> あとは画面に従ってインストールを完了させてください <h2 id="h4d849f4362">使い方</h2>起動すると左側にCSSを書くエリア、右側にプレビューが表示されます <img src="https://images.microcms-assets.io/assets/3fc51a71cb214fe8aac5bfc4b303d93a/2b0ede48a2cc431a83bfc177138296a5/ycse-window.PNG" alt=""> <a href="http://css4obs.starfree.jp/" target="_blank" rel="noopener noreferrer">Chat v2.0 Style Generator 日本語版</a>などで作成したCSSを左に貼り付けてからCSSを調整すると手早くカスタマイズすることができます！ 右上の「実際の配信から」では今配信されているライブのコメントを使ってプレビューができます こちらのプレビューは実際のものをそのまま使うため、テンプレートよりも再現性が高いプレビューになります まずはテンプレートで調整した後に、実際の配信からを使って、ライブコメントをプレビューして最終確認するとよいでしょう そして出来上がったCSSをOBSのブラウザソースのCSSのところにコピペしたら完成です！ 使い方やYoutubeコメントのHTML,CSSの当て方などについては配信で説明していますので、こちらもご覧ください<iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FoRUGKxF7SKo&display_name=YouTube&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DoRUGKxF7SKo&image=http%3A%2F%2Fi.ytimg.com%2Fvi%2FoRUGKxF7SKo%2Fhqdefault.jpg&key=d640a20a3b02484e94b4b0a08440f627&type=text%2Fhtml&schema=youtube" width="560" height="315" scrolling="no" title="YouTube embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe> <h2 id="hd264b50d46">お願い</h2> インストールの警告を外すためには年間数万円の維持費がかかるため、今回は行っておりませんが 使って頂ける方や要望をたくさん頂けた際には設定したいと思いますので、応援・要望・不具合報告などお気軽に<a href="https://twitter.com/AstieDog" target="_blank" rel="noopener noreferrer">@AstieDog</a>までコメントくださいませ また開発のモチベーションになりますので、<a href="https://twitter.com/AstieDog" target="_blank" rel="noopener noreferrer">Twitterのフォロー</a>と<a href="https://www.youtube.com/channel/UCu-qdXQN5C7mn_Q_OApkvfg" target="_blank" rel="noopener noreferrer">チャンネル登録</a>してもらえると嬉しいです！ <h2 id="h1ba52a67bf">更新履歴</h2> 2021.04.07 1.0.1<ul><li>アプリ画面にDevToolsが表示されてしまっていたのを修正</li></ul> 2021.04.06 1.0.0 <ul><li>「実際の配信から」で読み込みするとエラーになるのを修正</li><li>CSSの構文エラーになるとそれ以降のスタイルがプレビューに反映されなくなるのを修正</li></ul>

OBSにYoutubeコメントを表示するときのCSS調整に便利なエディタ「Youtube Comment Style Editor」

M1 MacのOBSで仮想カメラを使ってビデオ会議しようと思ったときに、 DiscordやTeamsのカメラ一覧にOBS Virtual Cameraが出てこない現象に遭遇しました 対処法を発見して実施したところ無事に解消できたので、その方法をご紹介します <a href="https://github.com/johnboiles/obs-mac-virtualcam/wiki/Compatibility#apps-dont-allow-dal-plugins" target="_blank" rel="noopener noreferrer">https://github.com/johnboiles/obs-mac-virtualcam/wiki/Compatibility#apps-dont-allow-dal-plugins</a> ※ 暫定的な処置になりますので、自己責任でお願いいたします <h2 id="h046876a126">手順</h2>Command line tools for Xcodeが必要なので、インストールされていない場合は「ターミナル」を起動し、次のコマンドを実行してください <pre><code>xcode-select --install</code></pre> これでインストールが始まりますので、完了するまで待ちます 完了したら同様に次のコマンドを実行してください <h3 id="h9698235226">Discordの場合</h3><pre><code>sudo codesign --remove-signature /Applications/Discord.app/Contents/Frameworks/Discord\ Helper\ \(GPU\).app /Applications/Discord.app/Contents/Frameworks/Discord\ Helper\ \(Plugin\).app /Applications/Discord.app/Contents/Frameworks/Discord\ Helper\ \(Renderer\).app /Applications/Discord.app/Contents/Frameworks/Discord\ Helper.app</code></pre> Discordを再起動したら無事にカメラのところにOBS Virtual Cameraが表示されるようになります！ <h3 id="h4e54207f9c">Teamsの場合</h3><pre><code>sudo codesign --remove-signature /Applications/Microsoft\ Teams.app/Contents/Frameworks/Microsoft\ Teams\ Helper\ \(GPU\).app /Applications/Microsoft\ Teams.app/Contents/Frameworks/Microsoft\ Teams\ Helper\ \(Plugin\).app /Applications/Microsoft\ Teams.app/Contents/Frameworks/Microsoft\ Teams\ Helper\ \(Renderer\).app /Applications/Microsoft\ Teams.app/Contents/Frameworks/Microsoft\ Teams\ Helper.app</code></pre> Teamsを再起動したら無事にカメラのところにOBS Virtual Cameraが表示されるようになります！ まだまだM1 Macこうした落とし穴がチラホラあるので、ノウハウためていかないとですね！

M1 MacのDiscordやTeamsでOBS Virtual Cameraが選択できないときの対策

こんにちは、アスティです！ 先日、ツイッターアカウント（<a href="https://twitter.com/AstieDog" target="_blank" rel="noopener noreferrer">@AstieDog</a>）のフォロワーさんが500人を突破しました！！ ２月に肉球だけの状態からとりあえずスタートしたこのアカウントですが、おかげさまでたくさんの人に遊んでもらえています ツイッター楽しいね！！！ネガティブなつぶやきはしませんので、お気軽にお付き合い頂ければと思います！ さて、今回それを記念しまして・・・・ サイト制作しちゃおうキャンペーンを開催することになりました！ （なりましたっていっても決めるの僕１匹だけど・・・・） <h2 id="h36fd50d963">参加方法</h2><a href="https://twitter.com/AstieDog" target="_blank" rel="noopener noreferrer">@AstieDog</a>をフォローして該当ツイートをリツイート（引用RTも可） <a style="color:#000000" href="https://twitter.com/AstieDog/status/1363368364639285250" target="_blank" rel="noopener noreferrer">https://twitter.com/AstieDog/status/1363368364639285250</a><blockquote class="twitter-tweet">応援感謝キャンペーンをやります！ 抽選で当選された方のWebサイト制作を行います（想定サイト：<a href="https://t.co/0KQLaXs8fS">https://t.co/0KQLaXs8fS</a> ） 参加方法はこのアカウントのフォローしてRTするだけ サイト制作の詳しい内容は下記リンクをご覧ください<a href="https://t.co/zR92hS9H6L">https://t.co/zR92hS9H6L</a> ※次回は既フォロワー限定で行う予定です&mdash; アスティ@プログラミングドッグ (@AstieDog) <a href="https://twitter.com/AstieDog/status/1363368364639285250?ref_src=twsrc%5Etfw">February 21, 2021</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> <h2 id="h22db4f3f4f">対象</h2>個人の方 （法人・事務所 所属の方は有償にてご相談承ります） ※ 準備中でも2月時点で素材があれば大丈夫です <h2 id="hc02861101e">〆切</h2>2/28または終了のツイートをするまで <h2 id="hac6254d1c0">人数</h2>1名 ※ 少ないですが初回のためご容赦ください ※ 次回以降は既存フォロワーさんだけで行う予定です <h2 id="h13f71dd583">発表</h2>当選された方にはDMにてご連絡します <h2 id="h53a5cccc8e">制作物</h2>下記のページを対象とします <ul><li>トップ</li><li>プロフィール</li><li>ブログページまたは任意の2ページ</li></ul> ソースコード一式と改変するのに必要なドキュメントをお渡しします（Next.jsプロジェクトファイル一式&amp;ReadME） 希望の方にはマウスで動くLive2Dモデルを特別に保護した状態で設置することができます （<a href="/profile">プロフィール</a>にあるものと同じもので、実は結構レアなんです） <h2 id="h1b61ba0fe7">閲覧確認環境について</h2>Chrome/Firefox/Edge スマートフォンは最新のAndroid・iOS端末 <h2 id="hb855b09cce">制作素材について</h2>画像やロゴなど、キャラクターにかかる素材はご用意ください （汎用アイコンなどの素材はこちらでもご用意可能です） 必要な素材リストをこちらからお送りします <h2 id="h3991b44197">解析タグについて</h2>GoogleTagManagerのみ承ります <h2 id="hb4de76f996">サーバーについて</h2>ブログ希望の場合はサーバーのご指定は頂けません ブログがない場合はご用意頂いたサーバーに設置もできます <h2 id="h44ec83ca04">ドメインについて</h2>独自ドメインにしたい方はご自身で取得してください（取得サポートは行います） またサーバーをご指定頂いているときはご自身で設定をお願いいたします<h2 id="hb93972ed36"> 制限やルール</h2>頂いた素材と外部の素材を除くすべての制作物の著作権はASTIEに帰属します Live2Dモデル埋め込みの元となるソースコードはお渡ししておりません（完成したもののみ） お渡し後のコードの改変は自由に行って頂けますが、再配布は禁止です また、コピーライト表記を削除したり見にくくしたり、リンクを消したりしないでください 改変後はこちらでの修正対応できない場合がありますので、ご了承ください ドメインやサーバー費用などの維持費がかかることがあることを予めご了承ください 本キャンペーンでのページの追加などの追加要望は承れません また、納期のご指定や確約はできません <h2 id="h1502c4e25d">サイトの紹介について</h2>サイトやSNSでご紹介することがあります <h2 id="hcd411b4dc4">次回予告</h2> 次回以降は1000ごとにやれたらいいなと考えています（予定） また、既存フォロワーさん限定やチャンネル登録者限定で同キャンペーンを行う予定なので、抽選外れてもフォロ解などせずに仲良くしてね！ （サイトを自主制作している人の質問や相談などはいつでものります！） Youtubeチャンネルはこちら <a href="https://www.youtube.com/channel/UCu-qdXQN5C7mn_Q_OApkvfg" target="_blank" rel="noopener noreferrer">https://www.youtube.com/channel/UCu-qdXQN5C7mn_Q_OApkvfg</a> 小さなキャンペーンしかできないのですが、引き続き応援＆遊んでくれると嬉しいです！ <h2 id="hadc4035046">【小話】Web制作の相場のお話</h2>テンプレートを使った基本的なものであれば10万以下で受けてくれる個人の方はいます デザインがあればもっと安くすることもできます ブログなどになると倍くらいになることが多いでしょうか 法人で制作する場合は40万以上、内容によっては100万円以上かかることもよくあります LIGさんの記事に参考値がありますが、Webサイトって本気で作ると結構高くなっちゃうんですよね・・・・ <a href="https://liginc.co.jp/240197" target="_blank" rel="noopener noreferrer">https://liginc.co.jp/240197</a>　（Wordpressでコーポレートサイト作った想定？） 特に要件がふわふわしてるとめちゃくちゃ高く見積り出されるので、 しっかりどういうものを作りたいのか決めてから見積りもらうとよいです 以上小話でした

フォロワー500人キャンペーンを開催します！

<a href="/profile">プロフィールページ</a>にある僕の分身は既にご覧頂けたでしょうか これはLive2D Cubism SDK for Web（以下WebSDKと表記）を使ってLive2Dモデルを表示しています この記事ではそのWebSDKを使ってブラウザにモデルを表示するまでの方法をご紹介します 入門編ではありますが、初心者向けではありませんのでご注意ください・・・！ 完成サンプル： <a href="https://astie-dog.github.io/live2d-for-web-example/" target="_blank" rel="noopener noreferrer">https://astie-dog.github.io/live2d-for-web-example/</a> <h2 id="h22db4f3f4f">対象</h2><ul><li>Live2DモデルをWebサイトで動かしたい人</li><li>Node.jsがインストールされていてnpmが使える人</li><li>Gitを使ってクローンができる人</li></ul> <h2 id="he3145cc5bb">WebSDKの難しいところ</h2>WebSDKはTypeScriptでのみ配布されています そのためJavaScriptとして使いたい場合は事前にビルドする必要があるのはもちろんのこと TypeScriptで使う場合もそのままimportして使うのではなく一度ビルドして使いましょう！（これ大事） <h3 id="h911e6309cb">なぜビルドが必要か</h3>このSDKはwebpackなどを通してコンパイルすることを推奨とした構造になっています またTypeScriptはstrictモードで書かれていないためstrictな環境下では型不整合のエラーが複数出てしまいビルドできません そのため一度ビルドをして出力されたものを使っていきます 導入敷居がやや高くハマりどころも多く、少々難易度が高いSDKということもあり情報も少ないです 既に公式のサンプルコードをダウンロードしてコードを見た方もいるかと思いますが なかなか複雑なため諦めてしまうことも多いと思います 今回はそんな環境構築やら面倒なものはすべて済ませたコードを使ってとりあえず動かすところまでやっていきたいと思います <h2 id="h31d727ccda">準備</h2>下記リポジトリをCloneしてください <a href="https://github.com/astie-dog/live2d-for-web-example" target="_blank" rel="noopener noreferrer">https://github.com/astie-dog/live2d-for-web-example</a> SDKを入れるところはすべて済ませてあります 規約は下記URLにありますのでご一読ください <a href="https://www.live2d.com/download/cubism-sdk/download-web/" target="_blank" rel="noopener noreferrer">https://www.live2d.com/download/cubism-sdk/download-web/</a> ※ 執筆当時&nbsp;Cubism 4 SDK for Web R1 <h2 id="h4f3785d9c3">動かしてみる</h2>必要なパッケージをダウンロードします<pre><code>npm install</code></pre> 完了したら<pre><code>npm start</code></pre> で開発サーバーを起動します。 localhost:8080 にブラウザでアクセスすると完成サンプルと同じ状態になります <h2 id="h9c005b9d34">モデルを差し替える</h2>modelフォルダ以下にCubismEditor4で出力したmoc3を含むファイルを配置します （moc3, model3.json, physics.jsonとテクスチャが必要です） index.tsのモデルファイルを参照している部分を自分のモデルのものに置き換えます<pre><code>const MODEL_FILES = {
 moc3: './model/Hiyori/hiyori.moc3',
 model3: './model/Hiyori/hiyori.model3.json',
 physics3: './model/Hiyori/hiyori.physics3.json',
 textures: [
 './model/Hiyori/hiyori.2048/texture_00.png',
 './model/Hiyori/hiyori.2048/texture_01.png'
 ]
}</code></pre><a href="https://github.com/astie-dog/live2d-for-web-example/blob/main/src/index.ts#L7-L15" target="_blank" rel="noopener noreferrer">https://github.com/astie-dog/live2d-for-web-example/blob/main/src/index.ts#L7-L15</a> この状態で改めてnpm startをするとモデルが差し替わっていると思います <h2 id="hb0ace16927">モデルの位置がズレていたり小さいとき</h2>index.tsに以下のように設定が書いてある箇所があります<pre><code>{
 autoBlink: true,
 x: 0,
 y: 1,
 scale: 1
}</code></pre><a href="https://github.com/astie-dog/live2d-for-web-example/blob/main/src/index.ts#L31-L35" target="_blank" rel="noopener noreferrer">https://github.com/astie-dog/live2d-for-web-example/blob/main/src/index.ts#L31-L35</a> autoBlink： 自動まばたき x： 横の位置 y： 縦の位置 scale： 全体の大きさ これらの設定を変更して最適な位置と大きさに調整してください <h2 id="h0abcc22467">完成版の出力</h2>一通り調整ができたら次のコマンドを実行します<pre><code>npm run build</code></pre> distフォルダが作成されて中に完成されたhtmlやjsなどが入っています このフォルダの中身を自身のWebサーバーなどにアップしたら公開できます <h2 id="h0994f880c3">公開するときの注意</h2>この実装で作られたものは少し知識のある人であればモデルのデータをダウンロードすることが可能です ダウンロードされたくない場合は基本的にインターネット上にモデルデータをアップしないようにしましょう！ ※ 抜き出せても勝手に使うのは駄目です ※ 抜き出せる人はやらない &amp; やり方を教えないようにしましょう！！ <h2 id="h66dbaec65f">次回</h2>今回は動かせるところまでを駆け足でやりましたので、次回はもう少し実装の中身を説明していきたいと思います ※ いろんなところでコードを参考にして積み上げてきたので、参考にした先がわからなくなってしまいました・・・

Live2D Cubism SDK for Webを使ってブラウザにモデルを表示しよう（1）

Webサイトを開設しました。まだ中身は少ないですが、少しずつコンテンツを増やしていきたいと思います。 <h2 id="h696e98ee0a">自己紹介</h2>シェットランドシープドッグ（シェルティ）♂のWebフロントエンドエンジニアです 得意言語はJavaScriptで主にWebアプリケーションの構築を得意としています ゲームも好きでFF14を中心に雑多にいろいろやっています FPSもやるにはやりますが、あまり得意ではありません ガジェットオタクということもあり配信機材やソフトウェアなどについてもある程度詳しいです コーディングは<a href="https://azure.microsoft.com/ja-jp/products/visual-studio-code/" target="_blank" rel="noopener noreferrer">VSCode</a> 画像編集は<a href="https://www.adobe.com/jp/products/photoshop.html" target="_blank" rel="noopener noreferrer">Photoshop</a>、バナーなどの作成は<a href="https://affinity.serif.com/ja-jp/designer/" target="_blank" rel="noopener noreferrer">Affinity Designer</a>を使っています 動画編集は絶賛勉強中で<a style="background-color:#ffffff" href="https://www.blackmagicdesign.com/jp/products/davinciresolve" target="_blank" rel="noopener noreferrer">Davinci Resolve</a>を用いています <img src="https://images.microcms-assets.io/protected/ap-northeast-1:541766c7-78ad-4b03-9e6d-d6551606bf7e/service/astie/media/20210210sample2.png" alt=""> Illustration &amp; Live2d Modeling ©jenny <a href="http://jennifer-18.net" target="_blank" rel="noopener noreferrer">http://jennifer-18.net</a> <a href="/profile">プロフィールページ</a>もぜひご覧ください！なんと動く僕が見られるんです！ また<a href="https://twitter.com/AstieDog" target="_blank" rel="noopener noreferrer">Twitter</a>で最新の情報やみなさまとの交流をしていますので、気軽にフォローして声かけてもらえると嬉しいです Twitterアカウント <a href="https://twitter.com/AstieDog" target="_blank" rel="noopener noreferrer">@AstieDog</a> <h2 id="h424394ac6f">このサイトについて</h2>このサイトは<a href="https://nextjs.org/" target="_blank" rel="noopener noreferrer">Next.js</a>を使って制作しました Next.jsは<a href="https://ja.reactjs.org/" target="_blank" rel="noopener noreferrer">React</a>をベースにしたフレームワークでWebアプリケーションの構築によく使われるようになってきました 仕事でNextを使うことが多く慣れているのでこれを選択しました ブログのAPI部分は<a href="https://microcms.io/" target="_blank" rel="noopener noreferrer">MicroCMS</a>というヘッドレスCMSサービスを使っています 海外では<a href="https://www.contentful.com/" target="_blank" rel="noopener noreferrer">Contentful</a>が人気なようですがMicroCMSは国内サービスとなっています プロフィールページの僕の分身は<a href="https://www.live2d.com/download/cubism-sdk/" target="_blank" rel="noopener noreferrer">Live2D SDK for Web</a>を使い、マウスに追従したりする動きを加えています 通信量をなるべく抑えて少しでも負荷を軽くするように努めました（それでも重いほうですが・・・） ブラウザチェックはChromeとiPhone Safariしか見ていないので、きちんと動かないものもあるかもしれないです・・・ 動いてなかったりしたらぜひTwitterで教えてください・・・ 詳細な実装についてのハマりどころやTIPなどは今後の配信や記事の中で紹介できればと思います <h2 id="h099ddba583">今後の予定</h2>自己紹介動画を作成していく予定です！ぜひ<a href="https://www.youtube.com/channel/UCu-qdXQN5C7mn_Q_OApkvfg" target="_blank" rel="noopener noreferrer">チャンネル登録</a>をお願いします！ その後はWeb制作に関することを中心に配信していく予定ですが、 知りたいことややってほしいことなどがありましたら<a href="https://twitter.com/AstieDog" target="_blank" rel="noopener noreferrer">@AstieDog</a>までご連絡ください まだ初配信もしていないのですが、コラボやウェビナーのお誘いは歓迎しております！ 応援もよろしくお願いしまっす！ <img src="https://images.microcms-assets.io/protected/ap-northeast-1:541766c7-78ad-4b03-9e6d-d6551606bf7e/service/astie/media/astie2.png" alt="">

サイト開設しました

<html><head></head><body>M1 MacのOBSで仮想カメラを使ってビデオ会議しようと思ったときに、 DiscordやTeamsのカメラ一覧にOBS Virtual Cameraが出てこない現象に遭遇しました 対処法を発見して実施したところ無事に解消できたので、その方法をご紹介します <a href="https://github.com/johnboiles/obs-mac-virtualcam/wiki/Compatibility#apps-dont-allow-dal-plugins" target="_blank" rel="noopener noreferrer">https://github.com/johnboiles/obs-mac-virtualcam/wiki/Compatibility#apps-dont-allow-dal-plugins</a> ※ 暫定的な処置になりますので、自己責任でお願いいたします <h2 id="h046876a126">手順</h2>Command line tools for Xcodeが必要なので、インストールされていない場合は「ターミナル」を起動し、次のコマンドを実行してください <pre class="hljs"><code>xcode-select --install</code></pre> これでインストールが始まりますので、完了するまで待ちます 完了したら同様に次のコマンドを実行してください <h3 id="h9698235226">Discordの場合</h3><pre class="hljs"><code>sudo codesign --remove-signature /Applications/Discord.app/Contents/Frameworks/Discord\ Helper\ \(GPU\).app /Applications/Discord.app/Contents/Frameworks/Discord\ Helper\ \(Plugin\).app /Applications/Discord.app/Contents/Frameworks/Discord\ Helper\ \(Renderer\).app /Applications/Discord.app/Contents/Frameworks/Discord\ Helper.app</code></pre> Discordを再起動したら無事にカメラのところにOBS Virtual Cameraが表示されるようになります！ <h3 id="h4e54207f9c">Teamsの場合</h3><pre class="hljs"><code>sudo codesign --remove-signature /Applications/Microsoft\ Teams.app/Contents/Frameworks/Microsoft\ Teams\ Helper\ \(GPU\).app /Applications/Microsoft\ Teams.app/Contents/Frameworks/Microsoft\ Teams\ Helper\ \(Plugin\).app /Applications/Microsoft\ Teams.app/Contents/Frameworks/Microsoft\ Teams\ Helper\ \(Renderer\).app /Applications/Microsoft\ Teams.app/Contents/Frameworks/Microsoft\ Teams\ Helper.app</code></pre> Teamsを再起動したら無事にカメラのところにOBS Virtual Cameraが表示されるようになります！ まだまだM1 Macこうした落とし穴がチラホラあるので、ノウハウためていかないとですね！</body></html>

M1 MacのDiscordやTeamsでOBS Virtual Cameraが選択できないときの対策

手順

Discordの場合

Teamsの場合

ASTIE（アスティ）