2022年1月23日日曜日

OBSでVTuberデビューしてみる

こんにちは、やっまむーです。

Animazeでバーチャル美少女に受肉してみる
先日、バ美肉する記事を書いたところ、社長から「いずれVTuberになって動画を出したいから、その方法調べといてよ」と依頼されました。
社長も美少女になりたいのでしょうか?
なので、今回は実際にVTuberになって動画を作成する方法について調べました。

必要なもの

動画配信のために「OBS Studio」というソフトを使ってやってみます。

アバターの準備等は前回の記事を参照してください。
また、配信したい内容にあわせて、動画コンテンツ等も必要になります。

OBSに各種ソースを設定する

次に、OBSへ動画やAnimazeのアバターを追加していきます。

起動するとこのような画面になります。
各種コンテンツの追加は画面下のソースのところから行います。
追加できるソースは以下の通りです。

  1. 動画コンテンツ
    「ソース」からメディアソースを選択します。
    任意の動画ファイルなどを選びOKボタンを押すと、画面上にそのコンテンツが追加されます。

    大きさについては赤枠をドラッグして調整します。

  2. Animazeのアバター(準備編)
    あらかじめAnimaze側で背景を単色で塗りつぶしておきます。
    これは、OBSに追加した後で不要な背景を透過させるためです。

    そして、画面中央下のボタンでバーチャルカメラを有効にします。
    これで、OBSに取り込む準備ができました。
  3. Animazeのアバター(追加編)
    アバターは「映像キャプチャデバイス」を選択し、デバイスの一覧から「Abunaze Virtual Camera」を選択します。

    するとAnimazeで表示されている内容が表示されるようになります。
    ただし、このままでは背景も一緒に表示されてしまいます。
    この背景は不要なので、右クリックメニューの「フィルター」から削除します。

    エフェクトフィルターから「クロマキー」を追加し、「色キーの種類」で背景の色を選択します。
    すると、背景が透過されてアバターだけが表示されるようになります。

    あとは、位置とサイズを調整して画面を整えます。

録画をする

マイクの設定を行えば準備完了です。
あとは「録画開始」し、映像にあわせて喋れば誰でもVTuberデビューができます。

さて、以上が簡単な手順になります。
では最後に、素人がお試しでVTuberになるとどのようになるか、ご覧いただいて終わりたいと思います。
ではではー。

声がぁぁぁぁぁぁぁ!!

2022年1月16日日曜日

流行りのポータブル電源でどこでもテレワーク!!

 


こんにちは。よっしーです。

最近よく聞く「ポータブル電源」。アウトドアや防災の用途でよく使われていますが、
これ1つあるとテレワークの幅が広がります。

電源(コンセント)が近くにないと作業出来ない。
という制限から解放されるので、

・家だと家族が居てなかなか集中できない。
・車を作業スペースにしたいけど電源がない。
・気分をかえて外で作業したい。

などにあてはまる人には、この「ポータブル電源」おススメできます。


私が使っているものは、LEDライトが装備されていて、コンセント口が2つ、USBポートは4つあります。

ポータブル電源で重要になってくるのは、重量と容量です。
この製品は、重量は2.3kg、容量は75000mAh/277.5Wh、最大300W出力となります。


重量は言わずもがな、持ち運びの大変さに直結するので、
テレワーク用途であれば、軽いものがいいでしょう。
各社いろいろなサイズのポータブル電源を出しているので、
用途に合わせて選びましょう。

容量75000mAh/277.5Whというと、
たとえば、ノートPCの消費電力はだいたい20~30Wです。
平均値で25W消費だとして、このポータブル電源があれば、11時間ほど
ノートPCの電源を供給できる計算となります。

ポータブル電源を使う上で注意が必要なのは、最大出力です。
このポータブル電源は消費電力が300Wを超える電器は使えません。

ホットプレート、ドライヤー、掃除機、電子レンジ、ポットなどは、
軽く300Wを越えるので、これらの電器を使う場合は、
もっと大容量、高出力のポータブル電源を選択する必要があります。
※その分、重量と金額がかなり上がりますが。。。w


こんなコンパクトなものでも、スマホであれば、数十回はフル充電できる容量を
持っているので、何かの備えに。
また備えだけでなく、がっつりテレワークに活用する。という用途にも使えるので、
家で眠っているポータブル電源があれば、ぜひ使ってみて下さい。

ではまた~。

2022年1月8日土曜日

XAMLのお勉強メモ ②

 毎日寒いですね。。ざわです。

前回から引き続きXAMLのお勉強メモです。


動作環境

 ・Windows10

 ・Microsoft Visual Studio Community 2022 Preview 7.0

 ・Xamarin.Forms

今回試してみたこと

 今後使いそうだな、と思う コレクションを表示するビューコントロールを2つ試してみました。

  1.  ListView
  2.  CollectionView
 先に実行結果をお見せしますとこんなカンジ。
 

 1.ListView

1) コンテンツページ ListViewPage.xaml に、ListViewコントロールを配置。

<ListView x:Name="lstView">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ImageCell Text="{Binding Name}"
                        Detail="{Binding Comment}"
                        ImageSource="{Binding Image}">
            </ImageCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>
 

 次に、9~11行目のText、Detail、ImageSourceプロパティにデータバインディングする値を設定していきます。

2) クラス(ここでは demoModelという名前のクラス)にプロパティを定義。

public class demoModel
{
    public string Name { get; set; }
    public string Comment { get; set; }
    public string Image { get; set; }
}
 
3) コードビハインド側(ListViewPage.xaml.cs)に、demoModel型のListオブジェクトを生成 & ListViewに表示する値を設定して、そのListを ListViewのItemSourceにセット。
public partial class ListViewPage : ContentPage
{
    public ListViewPage()
    {
        InitializeComponent();

        List<demoModel> list = new List<demoModel>
        {
            new demoModel() { Name = "テキスト1", Comment = "コメント1", Image="Number01.png" },
            new demoModel() { Name = "テキスト2", Comment = "コメント2", Image="Number02.png" },
            new demoModel() { Name = "テキスト3", Comment = "コメント3", Image="Number03.png" },
            new demoModel() { Name = "テキスト4", Comment = "コメント4", Image="Number04.png" },
            new demoModel() { Name = "テキスト5", Comment = "コメント5", Image="Number05.png" }
        };

        lstView.ItemsSource = list;
    }
}
 

 4) あと、ListViewの項目をタップしたときのイベントを追加してみます。

ListViewPage.xaml に ItemTapped イベントを追加し、
 <ListView x:Name="lstView" ItemTapped="lstView_ItemTapped">
 
コードビハインド(ListViewPage.xaml.cs)のイベントに、アラートダイアログを表示する処理を追加。 
タップした項目のNameとCommentプロパティ値を表示するようにしています。 
private void lstView_ItemTapped(object sender, ItemTappedEventArgs e)
{
    var item = e.Item as demoModel;
    DisplayAlert(item.Name, item.Comment, "OK");
}
  
■実行結果

 2.CollectionView

CollectionViewは基本的な使い方はListViewとほぼ同じで、
以下のレイアウトのいずれかを使用することができます。
  • Vertical list:新しい項目が追加されると縦に伸びる一列のリスト
  • Horizontal list:新しい項目が追加されると水平方向に伸びる一列のリスト
  • Vertical grid:新しい項目が追加されると垂直方向に伸びる複数列のグリッド
  • Horizontal grid :新しい項目が追加されると水平方向に伸びる複数行のグリッド
1) コンテンツページ CollectionViewPage.xaml に、CollectionViewコントロールを配置。 
まずは「Vertical grid」 で試してみます。

<CollectionView x:Name="colView"
        ItemsLayout="VerticalGrid, 2">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="35" />
                    <RowDefinition Height="35" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="70" />
                    <ColumnDefinition Width="80" />
                </Grid.ColumnDefinitions>
                <Image Grid.RowSpan="2"
                Source="{Binding Image}"
                Aspect="AspectFill"
                HeightRequest="60"
                WidthRequest="60" />
                <Label Grid.Column="1"
                Text="{Binding Name}"
                FontAttributes="Bold"
                LineBreakMode="TailTruncation" />
                <Label Grid.Row="1"
                Grid.Column="1"
                Text="{Binding Comment}"
                LineBreakMode="TailTruncation"
                FontAttributes="Italic"
                VerticalOptions="End" />
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>
 
 2) ListViewのときと同様に、
 コードビハインド側(CollectionViewPage.xaml.cs)に、demoModel型のListオブジェクトを生成 & CollectionViewに表示する値を設定して、そのListを CollectionViewのItemSourceにセット。

public partial class CollectionViewPage : ContentPage
{
    public CollectionViewPage()
    {
        InitializeComponent();

        List<demoModel> list = new List<demoModel>
        {
            new demoModel() { Name = "テキスト1", Comment = "コメント1", Image="Number01.png" },
            new demoModel() { Name = "テキスト2", Comment = "コメント2", Image="Number02.png" },
            new demoModel() { Name = "テキスト3", Comment = "コメント3", Image="Number03.png" },
            new demoModel() { Name = "テキスト4", Comment = "コメント4", Image="Number04.png" },
            new demoModel() { Name = "テキスト5", Comment = "コメント5", Image="Number05.png" },
            new demoModel() { Name = "テキスト6", Comment = "コメント6", Image="Number06.png" },
            new demoModel() { Name = "テキスト7", Comment = "コメント7", Image="Number07.png" },
            new demoModel() { Name = "テキスト8", Comment = "コメント8", Image="Number08.png" },
        };

        colView.ItemsSource = list;
    }
}
 
■実行結果 

 「Horizontal grid」の場合
<CollectionView x:Name="colView"
        ItemsLayout="HorizontalGrid, 4">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="35" />
                    <RowDefinition Height="35" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="70" />
                    <ColumnDefinition Width="140" />
                </Grid.ColumnDefinitions>
                <Image Grid.RowSpan="2"
                Source="{Binding Image}"
                Aspect="AspectFill"
                HeightRequest="60"
                WidthRequest="60" />
                <Label Grid.Column="1"
                Text="{Binding Name}"
                FontAttributes="Bold"
                LineBreakMode="TailTruncation" />
                <Label Grid.Row="1"
                Grid.Column="1"
                Text="{Binding Comment}"
                LineBreakMode="TailTruncation"
                FontAttributes="Italic"
                VerticalOptions="End" />
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>
 
 

 

では今日はこれで。また次回(⌒ー⌒)ノ