Windows標準クラスを使ったマーメイド記法エディタの作成手順

1. プロジェクトのディレクトリ構成

まず、プロジェクトフォルダを以下のように構成します。

# プロジェクトフォルダの構成
📂MermaidEditorApp
┣ 📂Classes
┃ ┗ 📜MermaidEditor.ps1
┣ 📂GUI
┃ ┣ 📜MermaidEditor.xaml
┃ ┗ 📜ThemeStyle.xaml
┣ 📂Tests
┃ ┗ 📜MermaidEditorTests.ps1
┣ 📜App.ps1
┗ 📜App-Shortcut.ps1

2. GUIレイアウトとスタイルの定義

MermaidEditor.xaml と ThemeStyle.xaml ファイルを作成します。

MermaidEditor.xaml

<Window xmlns="<http://schemas.microsoft.com/winfx/2006/xaml/presentation>"
        xmlns:x="<http://schemas.microsoft.com/winfx/2006/xaml>"
        Title="Mermaid Editor" Height="450" Width="800">
    <Grid>
        <TextBox Name="MermaidInput" VerticalAlignment="Top" HorizontalAlignment="Stretch" Margin="10" Height="200" TextWrapping="Wrap"/>
        <Button Name="GenerateButton" Content="Generate Diagram" VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="10" Width="150"/>
        <Image Name="DiagramOutput" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Margin="10" Height="200"/>
    </Grid>
</Window>

ThemeStyle.xaml

<ResourceDictionary xmlns="<http://schemas.microsoft.com/winfx/2006/xaml/presentation>"
                    xmlns:x="<http://schemas.microsoft.com/winfx/2006/xaml>">
    <Style TargetType="Window">
        <Setter Property="Background" Value="White"/>
    </Style>
    <Style TargetType="Button">
        <Setter Property="Margin" Value="5"/>
        <Setter Property="Padding" Value="10"/>
        <Setter Property="Background" Value="LightGray"/>
    </Style>
</ResourceDictionary>

3. クラスと関数の定義

MermaidEditor.ps1 ファイルを作成し、必要なクラスと関数を定義します。

MermaidEditor.ps1

Class MermaidEditor {
    [void]Show-Window() {
        # XAMLの読み込み
        [xml]$xaml = Get-Content "$PSScriptRoot\\\\GUI\\\\MermaidEditor.xaml"
        $reader = (New-Object System.Xml.XmlNodeReader $xaml)
        $window = [Windows.Markup.XamlReader]::Load($reader)

        # コントロールのバインディング
        $MermaidInput = $window.FindName("MermaidInput")
        $GenerateButton = $window.FindName("GenerateButton")
        $DiagramOutput = $window.FindName("DiagramOutput")

        # イベントハンドラの設定
        $GenerateButton.Add_Click({
            param($sender, $e)
            [MermaidEditor]::Generate-Diagram($MermaidInput.Text, $DiagramOutput)
        })

        # ウィンドウの表示
        $window.ShowDialog() | Out-Null
    }

    [static] [void]Generate-Diagram([string]$mermaidText, [System.Windows.Controls.Image]$outputControl) {
        # マーメイド記法から画像生成（ここはダミー処理で、実際には適切な処理を追加する）
        $bitmap = New-Object System.Windows.Media.Imaging.BitmapImage
        $outputControl.Source = $bitmap
    }
}

4. メインスクリプトの作成

App.ps1 ファイルを作成し、アプリケーションのエントリーポイントを定義します。

App.ps1

# 必要なアセンブリの読み込み
Add-Type -AssemblyName PresentationCore, PresentationFramework, WindowsBase

# クラスファイルのインポート
. "$PSScriptRoot\\\\Classes\\\\MermaidEditor.ps1"

# アプリケーションの実行
[MermaidEditor]::new().Show-Window()

5. ショートカットの作成