Typora(Markdownエディタ)の紹介⑥ ～クラス図を作成する～

 

こんばんは。ひっくです。

今回も、MarkdownエディタのTyporaを取り扱います。

Typora関連記事

→第1回 はこちら Typora(Markdownエディタ)の紹介①

→第2回 はこちら Typora(Markdownエディタ)の紹介②　～画像の保存先を変更する～

→第3回 はこちら Typora(Markdownエディタ)の紹介③　～数式を編集する～

→第4回 はこちら Typora(Markdownエディタ)の紹介④　～シーケンス図を作成する～

→第5回 はこちら Typora(Markdownエディタ)の紹介⑤　～フロー図を作成する～

→第6回 はこちら TyporaVer1.x リリースに伴い有料化(でもベータ版はまだまだ無料利用可能)

 

今回は図式(クラス図)の記載方法を紹介します。

Typora バージョン

今回確認するTyporaバージョンは、「0.11.18(beta)」となります。

 

拡張機能の有効化

※ 第4回(シーケンス図の作成) と同内容となります。既に有効化されている方は読み飛ばしてください。

 

Markdownで図を作成できる設定となっているか確認します。

設定は、「ファイル」→「設定」→「Markdown」→「文法サポート」から変更できます。

 

以下赤枠の設定がチェックONになっていればOKです。

 

クラス図の記法 (mermaid.js)

Typoraでは「mermaid.js」を使用してクラス図を作成することができます。

以下にクラス図を作成する方法を紹介します。

 

1. バッククォート「`」× 3 を記載した後、続けて「mermaid」と記載します。

    

   【選択後】のカーソル表示部分に、「mermaid」の構文を使用して作図していきます。

   シーケンス図を作成する場合、「classDiagram」とまず記載し、

   続けてクラス図の要素を記載していきます。

   作図内容は、「空のダイアグラム」と表示されている箇所に表示されます。

   • 【入力時】

     

   • 【選択後】

     

    

2. 以下は作図した際の記載例です。

   入力欄には、以下のような記載をしています。

   classDiagram
   class 顧客 {
    	#BigDecimal 顧客ID
    	#String 氏名
    	#String 住所
    	#Integer 年齢
       +登録() bool
    	+削除()
    	+削除(顧客ID)
   }
   
   class 顧客A~顧客~ {
   	-BigDecimal 株主ID
    	-List~BankAccount~ 登録銀行口座
       +登録()
    	+削除()
    	+削除(株主ID)
   }
   
   class BankAccount{
       +String owner
       +BigDecimal balance
       +deposit(amount) bool
       +withdraw(amount) int
   }
   
   顧客 <|-- 顧客A
   

   構文の詳細は mermaid.js公式 クラス図 で確認可能ですが、以下で簡単に紹介します。

   作成順番が逆になっても表示は問題なくされますが、以下手順で作成すると

   分かりやすいのではないかと思います。

    

   ① クラスを定義する

   「class クラス名 { メンバ変数・メソッドを定義 }」

   {} 内に可視性(先頭の+表示等)や型、変数名・メソッド名・戻り値等の情報を定義します。

   ※メソッドの戻り値は「メソッド名() 半角SP 型」構文で表現可能ですが、

   メソッド名を日本語表記にするとTyporaでは表示されないようでした。

    

   ② クラス間の関連を定義する

   「classA クラス間関連性 classB」

   ①で定義したクラス間の関連を、関連性の表記に従い定義します。

   UMLの表記と多少違う(継承が△を使用していない等)ところもあるので、

   必要に応じて注記しておきましょう。

   %%(例)
   classDiagram
   classA <|-- classB : 継承
   classC *-- classD : コンポジション
   classE o-- classF : 集約
   classG <-- classH : 関連
   classI -- classJ : リンク(実線)
   classK <.. classL : 依存
   classM <|.. classN : 実現
   classO .. classP : リンク(破線)
   

   ※関連性の表記は以下の通り

   種別	説明
   < | --	継承
   *--	コンポジション
   o--	集約
   -->	関連
   --	リンク（実線）
   ..>	依存
   .. | >	実現
   ..	リンク（破線）

    

   ③ 多重度を設定する

   「classA ”1” クラス間関連性 "*" classB」

   クラスとクラス間関連性の間に、「””」で囲んだ多重度表記を記載します。

   %%(例)
   classDiagram
       Customer "1" --> "*" Ticket
       Student "1" --> "1..*" Course
       Galaxy --> "*" Star : Contains
   

   ※多重度の表記は以下の通り(必要に応じて任意の数値に変更する)

   種別	説明
   1	1
   0..1	0または1
   1..*	1以上
   *	複数

 

まとめ

Typoraで図式(クラス図)を作図する方法について、今回は紹介しました。

基本的なクラス図も簡単に作成することはできますので、必要に応じて作成してみてはいかがでしょうか。

設計段階の考察で必要なクラス図(簡易的なレベル)を作成する場合が、利用頻度としては一番多いかもしれません。

興味を持った方は是非一度作成してみてください。

 

今回はこのへんで。ではまた！

C# 10.0 レコード型

どうも、もりもりです。

C# 10.0の便利な機能にレコードクラス（C# 9.0ですでに追加はされている）とレコード構造体があるのでメモ。

目次
■ レコードクラス／レコード構造体
■ レコードクラスとレコード構造体の違い
■ with式
■ さいごに

レコードクラス／レコード構造体

不変なプロパティを持つようなクラスや構造体を簡潔に書けます。 そして参照型でも値型のようにふるまってくれます。

名前と年齢のプロパティを持ったレコード型の宣言は下記のように書くだけ。

// レコードクラス
public record class PersonClass(string Name, int Age);
// レコード構造体
public record struct PersonStruct(string Name, int Age);

レコードクラスはpublic record PersonClassとclassを省略して書いてもOK。

// レコードクラス
var person1 = new PersonClass(Name: "Taro", Age: 35);
Console.WriteLine($"person1: {person1}");

var person2 = new PersonClass(Name: "Hanako", Age: 35);
Console.WriteLine($"person2: {person2}");

Console.WriteLine($"person1 = person2 ? {person1 == person2}");

// レコード構造体
var person3 = new PersonStruct(Name: "Taro", Age: 35);
Console.WriteLine($"person3: {person3}");

var person4 = new PersonStruct(Name: "Hanako", Age: 35);
Console.WriteLine($"person4: {person4}");

Console.WriteLine($"person3 = person4 ? {person3 == person4}");

実行結果はこうなります。

> person1: PersonClass { Name = Taro, Age = 35 }
> person2: PersonClass { Name = Hanako, Age = 35 }
> person1 = person2 ? False
> person3: PersonStruct { Name = Taro, Age = 35 }
> person4: PersonStruct { Name = Hanako, Age = 35 }
> person3 = person4 ? False

また、ToString()でプロパティ名と値を表示してくれるのでこれも意外と便利なところ。 わざわざオーバーライドして書かなくて済むので。
このレコード型と同じようなクラスや構造体を自作しようと思うとEquals()やGetHashCode()をオーバーライドして書かないといけません。
さらにそのようなクラスを複数作ろうものなら。。。（って実際に作ることもあったのでマジで助かります！）

レコードクラスとレコード構造体の違い

違いは「クラスと構造体」の違いとほぼ同じだそうです。
構造体には継承はありませんので、EqualityContractプロパティは生成されないようです。
レコードクラスはimmutableですがレコード構造体はmutableなプロパティが生成されます。
immutableなレコード構造体を作りたい場合はreadonly record structとすればOK。

with式

with式を使うと元のインスタンスは書き換えずにクローンして一部のデータを書き換えることが可能です。

// レコードクラス
person2 = person1 with { Name = "Taro" };
Console.WriteLine($"person2: {person2}");

Console.WriteLine($"person1 = person2 ? {person1 == person2}");

// レコード構造体
person4 = person3 with { Name = "Taro" };
Console.WriteLine($"person4: {person4}");

Console.WriteLine($"person3 = person4 ? {person3 == person4}");

> person2: PersonClass { Name = Taro, Age = 35 }
> person1 = person2 ? True
> person4: PersonStruct { Name = Taro, Age = 35 }
> person3 = person4 ? True

データは書き換えずにクローンだけしたい場合はperson2 = person1 with { };とすればOK。

さいごに

今回は一部の機能しか紹介してませんが、他にも結構便利な機能は追加されてます。 .NET 6のLINQに追加されたMaxBy/MinByとかも地味に嬉しいですね。

業務上では新しい言語バージョンを使える環境はあまりないのですが、C#の更新は毎年楽しみにはしてます。 （次のC# 11.0の候補にはヘンなのも挙がってましたが。。。ｗ） いかに簡潔に書けるかってやはり大事だと思うんですよね。書く人も読む人もイイことしかない。 なので開発環境を選べるのであれば常に最新の安定版を使用したいものです。

以上、もりもりでした。

iPad Proを買い換えました！

美少女になる話（先週のブログ）ではなく、iPad Pro買い替えの話です。

11インチ iPad Pro(第1世代・256GB)を愛用しています。

3年近く使用してデータが増え、動画編集をしていると、気づけば残容量が50GBを切ることがあり、その度に編集済データをバックアップし、削除しています。

2022年のAppleの初売りで、iPad Pro(第3世代)がApple Gift Cardでの還元対象となっていたので、容量倍増の512GBモデルを購入しました。

旧iPadからのデータ移行

「クイックスタート」を使えば、旧デバイスから新デバイスへの移行は簡単です。

途中、「iCloudからダウンロード」か「iPadから転送」のいずれかのデータ転送方法を選択することになりますが、写真データなどクラウドにバックアップしていないデータもあるので、「iPadから転送」を選択しました。転送は1時間ほどで完了しました。

第1世代と第3世代の違い

11インチ iPad Proは第1世代から第3世代まで同じサイズのため、使用感が変わらず、「新しいデバイスを手に入れた！」というワクワク感はありません（笑）

動画編集アプリで、同じ3GBのプロジェクトデータを書き出したところ、第1世代では86秒かかっていたのが第3世代では59秒と、M1チップ搭載による性能向上を感じる結果となりました。

データ書き出し速度比較

また、スピーカー穴の位置・大きさ・数に違いがあり、聴こえ方はかなり変わりました。

第1世代の方が高音域が大きく、全体的に音が横に広がっているように聴こえます。

違和感がありますが、使っているうちに第3世代の音に慣れていくことでしょう。

上が第3世代、下が第1世代

またいつか、どこかで。

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になるとどのようになるか、ご覧いただいて終わりたいと思います。
ではではー。

声がぁぁぁぁぁぁぁ！！

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

 

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

最近よく聞く「ポータブル電源」。アウトドアや防災の用途でよく使われていますが、

これ１つあるとテレワークの幅が広がります。

電源（コンセント）が近くにないと作業出来ない。

という制限から解放されるので、

・家だと家族が居てなかなか集中できない。

・車を作業スペースにしたいけど電源がない。

・気分をかえて外で作業したい。

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

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

ポータブル電源で重要になってくるのは、重量と容量です。

この製品は、重量は2.3kg、容量は75000mAh/277.5Wh、最大300W出力となります。

重量は言わずもがな、持ち運びの大変さに直結するので、

テレワーク用途であれば、軽いものがいいでしょう。

各社いろいろなサイズのポータブル電源を出しているので、

用途に合わせて選びましょう。

容量75000mAh/277.5Whというと、

たとえば、ノートPCの消費電力はだいたい20～30Wです。

平均値で25W消費だとして、このポータブル電源があれば、11時間ほど
ノートPCの電源を供給できる計算となります。

ポータブル電源を使う上で注意が必要なのは、最大出力です。

このポータブル電源は消費電力が300Wを超える電器は使えません。

ホットプレート、ドライヤー、掃除機、電子レンジ、ポットなどは、

軽く300Wを越えるので、これらの電器を使う場合は、

もっと大容量、高出力のポータブル電源を選択する必要があります。

※その分、重量と金額がかなり上がりますが。。。ｗ

こんなコンパクトなものでも、スマホであれば、数十回はフル充電できる容量を

持っているので、何かの備えに。

また備えだけでなく、がっつりテレワークに活用する。という用途にも使えるので、

家で眠っているポータブル電源があれば、ぜひ使ってみて下さい。

ではまた～。

XAMLのお勉強メモ ②

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

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

動作環境

　・Windows10

　・Microsoft Visual Studio Community 2022 Preview 7.0

　・Xamarin.Forms

今回試してみたこと

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

1. 　ListView
2. 　CollectionView

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

 

　１．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 = "テキスト１", Comment = "コメント１", Image="Number01.png" },

            new demoModel() { Name = "テキスト２", Comment = "コメント２", Image="Number02.png" },

            new demoModel() { Name = "テキスト３", Comment = "コメント３", Image="Number03.png" },

            new demoModel() { Name = "テキスト４", Comment = "コメント４", Image="Number04.png" },

            new demoModel() { Name = "テキスト５", Comment = "コメント５", 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");

}

  

■実行結果

　２．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 = "テキスト１", Comment = "コメント１", Image="Number01.png" },

            new demoModel() { Name = "テキスト２", Comment = "コメント２", Image="Number02.png" },

            new demoModel() { Name = "テキスト３", Comment = "コメント３", Image="Number03.png" },

            new demoModel() { Name = "テキスト４", Comment = "コメント４", Image="Number04.png" },

            new demoModel() { Name = "テキスト５", Comment = "コメント５", Image="Number05.png" },

            new demoModel() { Name = "テキスト６", Comment = "コメント６", Image="Number06.png" },

            new demoModel() { Name = "テキスト７", Comment = "コメント７", Image="Number07.png" },

            new demoModel() { Name = "テキスト８", Comment = "コメント８", 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>

 

 

 

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