見出し画像

ChatGPTに教えてもらえばAIアプリだって作れる様になるはず‼︎ 6.Simple Notepad #機械学習による人間学習

Klay

はじめに

このブログでは、ChatGPTで作成した「AIアプリを作れる様になるまでの100個のアプリ案」を実際に作り、学んだことや失敗したこと、感じたことを記していきます。

各記事のページ下部にはChatGPTによるStep by Stepガイドを貼付し、学習内容をトレース出来る様にしています。

プログラミング初心者の方や新しくスキルを身に付けようとしている方の参考になれば幸いです。

(※本ブログはマガジン「ChatGPTに教えてもらえば」にまとめてあります。)


今回のアプリ "6.Simple Notepad"

概要 ： ローカル（UserDefaultsなど）に保存されたメモを保存するためのテキストフィールドまたはTextEditor

シンプルなノートアプリです。純正のメモアプリの様にテキストを保存することが出来ます。アプリをクローズしても入力したテキストが消えません。

狙い ： データの永続化とSwiftUIのテキスト処理を練習する

これまでテキストフィールドに記述した内容は別の変数に格納されており、アプリをクローズするとテキストは失われていました。今回はアプリをクローズしてもテキストを残すために「テキストを保存する方法」と「保存したテキストを再度表示する方法」を学びます。

学習したこと

  • テキストの保存方法

    • UserDefaults: 少量から中程度のテキストに最適

    • ローカルファイル: 大きなテキストや複数ファイルに対応可

    • Pythonバックエンド: 将来拡張（複数デバイス同期など）に向いている

  • TextEditor( )：複数行テキスト入力用

    • これまで使ってきたTextfieldは１行用。ノートなどにはこちらが良い

  • テキストのLoadとSaveの仕方 (※Userdefaults使用時)

func loadNote() {
    if let savedNote = UserDefaults.standard.string(forKey: "notepadContent") {
        noteText = savedNote
    }
}

Load(データ読み出し)：UserDefaults.standard.string(forKey: "notepadContent")と記載されている場合、データ型がstringで、キーがnotepadContentであるデータを呼び出す。

func saveNote() {
    UserDefaults.standard.set(noteText, forKey: "notepadContent")
}

Save(データ保存)：UserDefaults.standard.set(noteText, forKey: "notepadContent")の様にsetを使用。このコードだと変数noteTextをキーnotepadContentで保存。

感想

とあるイベントに行ってきた所、風邪をもらってしまい、発熱はないのに鼻の奥やのどの痛み、倦怠感、頭痛などの症状が続き、快復に思ったより時間がかかりました。最近、コロナウィルスの話題を聞かなくなり、少し油断していたかもしれません。人混みに行く際はもっと注意しないといけないなと反省しました。皆様もお気を付けください。

今回はSimple Notepadということで、名前の通りシンプルなアプリでした。テキストを保存するだけの一見シンプルな機能でしたが、.onChangeでテキストを保存、.onAppearでテキストを読み込む処理をしていて、普段よく眼にするアプリも案外こういう簡単な処理の積み重ねで出来ているのではないかと思いました。

あと印象に残ったのはテキストの保存先にUserDefaults、ローカルファイル、Pythonバックエンドなどの選択肢があり、それぞれ用途に応じて選択する方法が異なるということで、将来的にはPyhonバックエンドを使用して複数デバイス間同期にチャレンジしてみたいです。

思いがけず風邪を引き、ペースが崩れてしまいましたが、気負わず楽しんで続けていきたいと思いますので、スキ！やフォローの方、よろしくお願い致します！

ChatGPTの回答

以下は、「Simple Notepad」（リストの6番目のプロジェクト）をSwiftUIで作成するためのステップバイステップガイドです。このアプリでは、ユーザーがテキストを入力し、アプリを再起動してもローカルにテキストが保持されます。将来的には、複数のノートに拡張したり、Pythonバックエンドに接続したりすることもできます。

1. 新しいSwiftUIプロジェクトを作成

  1. Xcodeを起動

    • アプリケーションフォルダからXcodeを起動します。

  2. 新しいプロジェクトを作成

    • Xcodeのウェルカム画面（またはメニュー）で「Create a new Xcode project…」を選択します。

  3. プロジェクトテンプレートを選択

    • 左側の「iOS」を選択し、Appを選んで「Next」をクリックします。

  4. プロジェクト詳細の設定

    • Product Name: SimpleNotepad

    • Team: Apple Developerアカウント（ローカルテストの場合は“None”）

    • Organization Identifier: 例: com.yourname

    • Interface: SwiftUI

    • Language: Swift

    • 「Next」をクリックし、保存先を選択して「Create」を押します。

2. ノートの保存方法を決定する

1つのノートを扱うだけなら、UserDefaultsでテキストを保存するのが手軽です。

  • UserDefaults: 少量から中程度のテキストに最適

  • ローカルファイル: 大きなテキストや複数ファイルに対応可

  • Pythonバックエンド: 将来拡張（複数デバイス同期など）に向いている

本ガイドでは、アプリの再起動時もテキストが保持されるように、UserDefaultsを使用します。

3. SwiftUIのインターフェイスを構築

**ContentView.swift**を開き、以下の手順に沿ってテンプレートコードを置き換えます。

3.1 Stateを定義

@State private var noteText: String = ""

  • noteText は、入力されたノートの内容を保持する変数です。

3.2 UIを構築

複数行テキスト入力用にTextEditorを使用し、NavigationViewで画面を包みます。

var body: some View {
    NavigationView {
        VStack {
            TextEditor(text: $noteText)
                .padding()
                // テキストが変更されるたびに自動で保存
                .onChange(of: noteText) { _ in
                    saveNote()
                }
        }
        .navigationTitle("Simple Notepad")
        .onAppear(perform: loadNote) // 画面表示時に既存のノートをロード
    }
}

3.3 LoadとSaveのメソッド

UserDefaultsを使ってノート内容を保存・取得します。

func loadNote() {
    if let savedNote = UserDefaults.standard.string(forKey: "notepadContent") {
        noteText = savedNote
    }
}

func saveNote() {
    UserDefaults.standard.set(noteText, forKey: "notepadContent")
}

4. 完成形：ContentView.swift

以下は、自動保存の仕組みを含む完成版です。

import SwiftUI

struct ContentView: View {
    @State private var noteText: String = ""

    var body: some View {
        NavigationView {
            VStack {
                TextEditor(text: $noteText)
                    .padding()
                    .onChange(of: noteText) { _ in
                        saveNote()
                    }
            }
            .navigationTitle("Simple Notepad")
            .onAppear(perform: loadNote)
        }
    }

    func loadNote() {
        if let savedNote = UserDefaults.standard.string(forKey: "notepadContent") {
            noteText = savedNote
        }
    }

    func saveNote() {
        UserDefaults.standard.set(noteText, forKey: "notepadContent")
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

5. アプリを実行

  1. シミュレーターを選択（例: iPhone 14）

  2. Runボタン（再生アイコン）をクリック、または Cmd + R を押してビルド&実行

  3. テスト: TextEditor内でテキストを入力

    • アプリを停止し、再度起動しても入力したテキストが残っていることを確認できます（UserDefaultsのおかげ）。

6. 追加で検討できる拡張機能

  1. 手動保存ボタン

    • 自動保存が不要な場合は、.onChangeを外し、ユーザーがボタンを押したときに saveNote() を呼び出す形に変更可能。

  2. 複数のノート

    • noteText 一つではなく、Note型の配列をUserDefaults（JSONシリアライズ）やローカルDB（Core Data、Realmなど）で管理。

  3. リッチテキストやMarkdown

    • 高度な書式を入れたい場合は、専用のテキストエディタやライブラリを使用。

  4. Pythonバックエンド連携

    • REST APIでテキストをサーバーに送って同期し、複数デバイス間で共有可能。

  5. UIカスタマイズ

    • ツールバーに「Save」「New Note」「Delete Note」ボタンを設置。

    • TextEditorのフォントや背景色などを変更。

まとめ

以上で、SwiftUIを使ったSimple Notepadアプリ（プロジェクトリストの6番目）を完成させる手順を解説しました。
単一のノートをUserDefaultsに保存するシンプルな仕組みですが、複数ノート対応やPythonバックエンド連携など、大きく拡張する余地があります。

開発を楽しんでください！ 追加のガイダンスが必要であれば、いつでもお知らせください。


いいなと思ったら応援しよう！