<h2 id="hdae08e544b">必要なもの</h2><ul><li>A.I.Voice（<a href="https://aivoice.jp/" target="_blank" rel="noopener noreferrer">https://aivoice.jp/</a>）のA.I. Voice Editor[1.2.2.0]</li><li>Voiceroid Talk Plus （<a href="https://wangdora.rdy.jp/?plugin/VTP" target="_blank" rel="noopener noreferrer">https://wangdora.rdy.jp/?plugin/VTP</a>）[8.2.0.4]</li><li>PotateVoiceHub（<a href="https://github.com/gizagizamax/PotatoVoiceHub" target="_blank" rel="noopener noreferrer">https://github.com/gizagizamax/PotatoVoiceHub</a>）[v2022.01.19]</li><li>棒読みちゃん（<a href="https://chi.usamimi.info/Program/Application/BouyomiChan/" target="_blank" rel="noopener noreferrer">https://chi.usamimi.info/Program/Application/BouyomiChan/</a>）[0.1.11.0 Beta21]</li></ul> <h2 id="h31d727ccda">準備</h2>Voiceroid Talk Plusの中にあるPlugin_VoiceroidTalkPlus.dllを棒読みちゃんのフォルダに入れます 棒読みちゃんを起動し「VoiceroidTalk Plus」を有効化します <img src="https://images.microcms-assets.io/assets/3fc51a71cb214fe8aac5bfc4b303d93a/263a57a40bdc41ea91d2b0adcd6848df/active.PNG.png" alt=""> 続いてVoiceroidTalkPlusプラグインの設定を開きます <img src="https://images.microcms-assets.io/assets/3fc51a71cb214fe8aac5bfc4b303d93a/6ae66ae78865444696f153820534be08/setting.PNG.png" alt=""> プリセット名にご利用のA.I.VOICEのプリセット名を入力し、VOICEROID2エンジンを利用するにチェックを入れておきます このとき「A.IVOICE”半角スペース”紲星”半角スペース”あかり」と半角スペースを入れ忘れないように注意してください <img src="https://images.microcms-assets.io/assets/3fc51a71cb214fe8aac5bfc4b303d93a/0513126ed72740748e2c9db4bb91697f/setting2.PNG.png" alt=""> 続いてPotateVoiceHubにあるVoiceroidTalkPlusReceiverHub.exeを実行します <img src="https://images.microcms-assets.io/assets/3fc51a71cb214fe8aac5bfc4b303d93a/91c9ce4bb12e4681b9b81403f8ff7832/vtpr.PNG.png" alt=""> Voiceroid Talk Plus にあるVoiceroidTalkPlusReceiver.exeを実行します 実行するとVoiceroid Talk Plus Receiver Hubに次のように表示されます <img src="https://images.microcms-assets.io/assets/3fc51a71cb214fe8aac5bfc4b303d93a/48cd8e9263244771904634a3c615c2b7/vtpr-found.PNG.png" alt=""> 「VoiceroidTalkPlusReceiverが見つかりました」 PotateVoiceHubのPotatoVoiceHub.exe を実行します AIVoiceEditor.exeのパスを確認し、「A.I.VOICE開始」のボタンをクリックします （既にA.I.VOICEを起動している場合は終了させてからクリックしてください） <img src="https://images.microcms-assets.io/assets/3fc51a71cb214fe8aac5bfc4b303d93a/2f68ea9e79ad4242916d589567ae1861/potatevoicehub.PNG.png" alt=""> A.I.Voice Editorが起動します <img src="https://images.microcms-assets.io/assets/3fc51a71cb214fe8aac5bfc4b303d93a/361e5987284e421ca53fc10164ada0c6/editor.PNG.png" alt=""> 棒読みちゃんの方で接続確認をしていきます 読み上げ文字を入力し、再生ボタンを押します <img src="https://images.microcms-assets.io/assets/3fc51a71cb214fe8aac5bfc4b303d93a/b81ad42697dc4e3991ceb6260bdce6c6/play.PNG.png" alt=""> A.I.Voice Editorにこのように表示され読み上げがされればOKです <img src="https://images.microcms-assets.io/assets/3fc51a71cb214fe8aac5bfc4b303d93a/778d8e553b9e46e18a9cd4dcd2ab3772/play2.PNG.png" alt=""> うまく行かないときは棒読みちゃんのプラグインを一度オフにしてから再度オンにして、VoiceroidTalkPlusReceiver.exeを再実行したりするとうまくいくことがあります 以上でコメントの読み上げをとってもかわいく読み上げくれるようになりました！

棒読みちゃんを経由してA.I. Voiceの紲星あかりちゃんに読み上げてもらおう！！！

こんにちわんわん、バーチャルエンジニア犬アスティです 本日2/1に「わんコメ」というアプリを正式にリリースしました！ ここではわんコメの紹介とともに、開発の経緯や思いなどを綴っていきたいと思います いいからはよ使わせろという方は公式サイトからDLできますのでどうぞ！ わんコメ - OneComme公式サイト <a href="https://onecomme.com" target="_blank" rel="noopener noreferrer">https://onecomme.com</a> <h2 id="h43b1d955aa">わんコメとは</h2>わんコメは配信にあると便利なコメント関連の機能を集約したアプリケーションです 複数の配信サイトのコメントを取得し、音声での読み上げをしたり、OBSなどの配信ソフトに取得したコメントを、いろんなテンプレートを用いて表示したりできます これ１つ入れておけば配信に必要なコメント関連の機能が手に入る！というものです <h2 id="hf13ed19399">わんコメができること</h2>対応している複数の配信サイトの公開コメントを取得・音声読み上げ・OBS等の配信ソフトへのコメント表示ができます 例えばYouTubeとツイキャス同時配信したとき、どちらのコメントも同じ画面でまとめて見たりOBSに表示したりできます コラボのときにはコラボ相手の配信コメントを見ることもできます もちろんOBSには自身の配信コメントのみ表示させる、という制御も可能です テンプレートが複数用意されているので、DLしてすぐに配信で使うことができます （テンプレートのジェネレーターも現在開発中！） <h3 style="text-align:center" id="h3d066851b8">テンプレートの一部を紹介</h3> Basic<img src="https://images.microcms-assets.io/assets/3fc51a71cb214fe8aac5bfc4b303d93a/f9fca5c0e44840008798793b0911f413/default.webp?w=192&amp;h=192" alt="">LINE風<img src="https://images.microcms-assets.io/assets/3fc51a71cb214fe8aac5bfc4b303d93a/d7846091702742ecad92a68211740a70/line.webp?w=192&amp;h=192" alt="">ペルソナ風<img src="https://images.microcms-assets.io/assets/3fc51a71cb214fe8aac5bfc4b303d93a/d020ab5c5d094a22a97416c87f021132/persona.webp?w=192&amp;h=192" alt=""> また、配信後のコメント解析に活用できるようにログ出力機能も備えています ひとつひとつの細かいカスタマイズはできませんが、シンプルで簡単に使える、というところがポイントになっています <h2 id="h479a5e530d">わんコメは無料アプリ</h2>わんコメは無料（フリー）アプリです ダウンロードはもちろん、利用についても費用はかかりません また、法人・事務所所属の配信者の方でもご利用いただけます 無料アプリではありますが、開発支援として<a href="https://cutt.ly/7I2PRDl" target="_blank" rel="noopener noreferrer">欲しいものリスト</a>を公開しています もし使ってみていいなと思ったらご支援頂けると嬉しいです 翼が授けられて開発が加速するかもしれません <h2 id="h4eabc948c4">わんコメの意味</h2><img src="https://images.microcms-assets.io/assets/3fc51a71cb214fe8aac5bfc4b303d93a/03167176e0fe4da99725f798efc9afbf/logo.png?w=256&amp;h=256" alt=""> Everyone/Anyone/Only one/All-in-One・・・いろんなOneを「わん」に込めました もちろん犬の鳴き声にもかかってます。 そしてコメはコメントです。はい。 元々はLive Comment Viewerとそのままの名前にしていましたが、 より馴染みやすく呼びやすい名称にしたいと思い、今回名前を変更しました <h2 id="h00b4b6b956">開発の経緯</h2>YouTubeに加えてツイキャスでも配信しようと思ったときに、カスタマイズしたコメント表示をツイキャス用で新たに用意するか、とりあえず見た目を諦めるかという選択をすることになったのがきっかけです 既存のアプリを組み合わせたらできるのは知っていましたが、そのカスタマイズは前提知識があってもなかなか理解するのは大変です そこで、より簡単に複数サイトのコメント表示などできないかと考えた結果がこのアプリです 元々は自分専用で始まり、その後お友達までが使えるアプリとして昨年11月頃から公開し始めました <h2 id="h42cd44871b">オープンソースでない理由</h2>わんコメは現時点ではオープンソースではありません まだまだ基礎設計部分でやるべきことがあること、開発やUI設計の方針などの認識合わせが難しいなどいくつか理由があります アプリ初期段階においては「対話や議論」が重要と考えており、 Discordサーバーに参加頂いて議論など交えながら開発していくというのを理想としています そのためある程度落ち着くまではオープンにせず、セミオープンな環境で進めていければと思っています 利用者として見えていた方が安心というのはあるかと思いますので、希望される方には個別にGithubリポジトリへ招待しています <a href="https://discord.gg/F8eh2ZzS2s" target="_blank" rel="noopener noreferrer">Discordサーバー</a>に参加してその旨をお伝え下さい もちろん開発や翻訳、テストや広報など、お手伝い頂ける方は大歓迎でございます！！ <h2 id="h099ddba583">今後の予定</h2>大まかな作業状況やリリースされる予定は<a href="https://lc-viewer.notion.site/49be37b1c553451e8a9d14bc6a07e71d?v=80fb31debb544aeaaac690f001631114" target="_blank" rel="noopener noreferrer">Notion</a>で公開しています ギフト関連の状況を把握しやすくしたりテンプレートの種類を増やしたりカスタマイズしやすくしたり対応サイトを増やしたり 要望や最新の開発状況などは<a href="https://discord.gg/F8eh2ZzS2s" target="_blank" rel="noopener noreferrer">Discord</a>でやり取りをしていますので、何かありましたらご参加ください そんな訳で今日から正式版1.0.0としてリリースされた「わんコメ」をどうぞよろしくお願いします！ わんコメ - OneComme公式サイト <a href="https://onecomme.com/" target="_blank" rel="noopener noreferrer">https://onecomme.com</a>

配信者のためのコメントアプリ「わんコメ」を作りました

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）