演習 - Blazor Hybrid でプラットフォーム機能にアクセスする

5 分

この演習では、Todo リストを保存してファイルシステムに読み込む機能を追加します。

読み込みと保存ボタンを追加する

まず、<h3> の下と Todo.razor ファイルの Todo 項目の一覧の上に読み込みと保存ボタンの 2 つの新しい <button> 要素を追加します。

@page "/todo"
@using BlazorHybridApp.Data

<h3>Todo (@todos.Count(todo => !todo.IsDone))</h3>

<button @onclick="Save">Save</button>
<button @onclick="Load">Load</button>

<ul class="list-unstyled">
    @foreach (var todo in todos)
    {
        <li>
            <input type="checkbox" @bind="todo.IsDone" />
            <input @bind="todo.Title" />
        </li>
    }
</ul>

@code ブロックに Save と Load 機能の 2 つのメソッドを追加します。
```
private async Task Save()
{
}

private void Load()
{
}
```

データを保存してディスクに読み込む

.NET には、ファイルを読み込んでディスクに保存する機能を含む System.IO 名前空間が含まれています。この機能は .NET MAUI によって自動的にネイティブ API にマップされます。ユーザーは、ファイルの保存場所を指定するだけです。各プラットフォームには、ユーザーデータを保存するための特別な場所があります。 .NET MAUI のファイルシステムヘルパーによって、キャッシュとアプリデータのディレクトリを含め、複数のプラットフォームディレクトリを取得するためのアクセスが提供されます。また、アプリに直接バンドルされているファイルを読み込むこともできます。次に、.NET に組み込まれている System.Text.Json を使用して Save メソッドを実装しましょう。

Todo.razor ファイルの先頭に Microsoft.Maui.Storage、System.Text.Json、System.IO の using ディレクティブを追加します。
```
@page "/todo"
@using BlazorHybridApp.Data
@using Microsoft.Maui.Storage
@using System.IO
@using System.Text.Json
```
データを string にシリアル化し、ファイルのパスを作成し、内容をファイルに書き込むことで Save を実装します。
```
private async Task Save()
{
    var contents = JsonSerializer.Serialize(todos);
    var path = Path.Combine(FileSystem.AppDataDirectory, "todo.json");
    File.WriteAllText(path, contents);
    await App.Current.MainPage.DisplayAlert("List Saved", $"List has been saved to {path}", "OK");
}
```
プラットフォームのポップアップにもアクセスできることに注意してください。ここでは、ファイルの保存時にアラートを表示します。

ディスクからデータを読み込み、データを逆シリアル化し、項目を Todo リストに読み込むことで Load を実装します。

private void Load()
{
    var path = Path.Combine(FileSystem.AppDataDirectory, "todo.json");
    if (!File.Exists(path))
        return;
    var contents = File.ReadAllText(path);
    var savedItems = JsonSerializer.Deserialize<List<TodoItem>>(contents);
    todos.Clear();
    todos.AddRange(savedItems);
}

ファイルを保存します。まだアプリが稼働していない場合は、再起動します。
項目を追加し、項目を編集し、Todo 項目を完了にしてコンポーネントをテストします。 Save ボタンを選択して項目をディスクに保存します。次に、次にアプリを閉じて再起動するか、変更を加えて Load を選択して保存されたデータを読み込みます。

演習 - Blazor Hybrid でプラットフォーム機能にアクセスする

読み込みと保存ボタンを追加する

データを保存してディスクに読み込む

フィードバック