iPadのSwift Playgroundsだけでswift初心者の高校教師がアプリの開発に挑戦してみる ＜その4＞

開発したいアプリは「席替えアプリ」

実は、私がSwift Playgroundsだけで作りたいアプリはもう決めていました。

「席替えをする」アプリです。

理由はいくつかあります。

1. 初めてつくるには、難易度的にちょうど良さそう
2. 参考にできそうなプレイグラウンドがいくつかある
3. それなりに需要はありそう
4. 機能を追加していけそう(拡張性がある)

実現性

初めての記事にも書いた通り、私はC言語だけはすこし分かるものの、GUIを伴うアプリケーションの開発というものは全くしたことがありません。ですので、最初からあまりにも複雑そうな機能を含んだアプリを開発する自信は到底ありません。
私と同様に最終的には高校生の生徒たちにもSwift Playgroundsだけで学びながら作ってほしいという目的があるので、まずは先駆者の私がある程度の短期間で最低限動作するものに辿り着く必要があると考えました。

ある程度の短期間と書きましたが、具体的には一応1ヶ月程度を目標にしておくことにしました。

とはいえ、「Appギャラリー」にあるプレイグラウンド「プロフィール」のような情報を表示するだけのものでは面白くありません。

プロフィール情報を複数のタブビューに表示するアプリ

「席替え」という機能を実現するには、なんとなくですが、配列を用いて生徒や座席の情報を管理しないといけなさそうなので、「コードを学び、Appを作る」にあるプレイグラウンドで学んなこを活かして作るには難易度的にもちょうど良さそうで、これくらいならなんとか私でも実現できるのではないかと思ったのです。

参考にするプレイグラウンド

コードを学び、Appを作る

• コードを学ぼう1
• コードを学ぼう2

この2つのプレイグラウンドで、プログラミングに関する一般的な用語と概念、コードをデバッグする方法を身に付けることができます。

しかしながら、アプリのUIを作成するためのプログラミングは学ぶことはできません。

UIとは、ユーザーインターフェースのことで、ユーザーがアプリから情報を受け取ったり、アプリを操作する手段のことです。
要するに画面に表示される画像イメージ、テキスト、ボタンなどのことだと思っておけば良いと思います。

• Appの作成を始めよう

このプレイグラウンドで、SwiftUIの基本を少し学び、UIを少しだけ組み立てることができるようになります。

画面の右上のガイドボタンを押して、順にタスクに取り組むことで、実際にコーディングしながら学ぶことができます。コーディングの結果はプレビューボタンを押して確認することができます。

Appギャラリー

• プロフィール

前述の通り、プロフィール情報を表示するプレイグラウンドです。主に、タブ付きインターフェースの設定方法やアプリ内のデータの管理方法が学べます。

• イメージギャラリー

写真選択機能や写真編集機能を備えたイメージのグリッドの作成方法が学べます。

「席替えアプリ」のUI作成に参考にできそうなコードがたくさんありました。
特に、ScrollViewやLazyVGridを使用した必要に応じて縦にスクロールするグリッドの作成、GeometryReaderを使用した各グリッドのサイズ調整は座席表のUIにそのまま使えそうだと思いました。

備忘録的に引用しておきます。

GridView

           ScrollView {
               LazyVGrid(columns: gridColumns) {
                   ForEach(dataModel.items) { item in
                       GeometryReader { geo in
                           NavigationLink(destination: DetailView(item: item)) {
                               GridItemView(size: geo.size.width, item: item)
                           }
                       }
                       .cornerRadius(8.0)
                       .aspectRatio(1, contentMode: .fit)
                       .overlay(alignment: .topTrailing) {
                           if isEditing {
                               Button {
                                   withAnimation {
                                       dataModel.removeItem(item)
                                   }
                               } label: {
                                   Image(systemName: "xmark.square.fill")
                                               .font(Font.title)
                                               .symbolRenderingMode(.palette)
                                               .foregroundStyle(.white, .red)
                               }
                               .offset(x: 7, y: -7)
                           }
                       }
                   }
               }
               .padding()
           }

GridItemView

struct GridItemView: View {
   let size: CGFloat
   let item: Item

   var body: some View {
       ZStack(alignment: .topTrailing) {
           if let url = item.url {
               AsyncImage(url: url) { image in
                   image
                       .resizable()
                       .scaledToFill()
               } placeholder: {
                   ProgressView()
               }
               .frame(width: size, height: size)
           }
       }
   }
}

Appを拡張する

• グリッドを使った整理
• グリッドの編集

この2つのプレイグラウンドも前述のイメージギャラリーと同様にグリッドに関するプログラミングの知識を中心に学ぶことができます。
というか、「イメージギャラリー」よりも前にこの2つのプレイグラウンドで学ぶ方が効率が良いと思いました。難易度的にはこの2つより「イメージギャラリー」の方が上です。

「グリッドを使った整理」では、カラーの四角形のグリッドを使ってアプリのUIをレイアウトしてコンテンツを整理する方法と、状態変数を使ってそのグリッド内のカラーを追跡する方法について説明されています。色、図形、ボタン、状態変数に関する基礎知識などを学ぶことができます。

「グリッドの編集」では、NavigationViewを使ってアプリにナビゲーションを追加する方法と、アプリ内に保存するデータを編集できるようにすることを学ぶことができます。

また、SF SymbolsというAppleが提供しているシンボルフォントの存在について知ることができます。文字列に関連付けられたSF Symbolsを使って作成したイメージをアプリ内のボタンなどのデザイン使用することはアプリ開発の大きな助けとなると思いました。以下の記事も大変参考にさせて頂きました。

既存アプリの調査

席替えに関するAppがどのくらい、どのようなものあるのかもざっと調べてみました。

App Storeで検索したところ、無料で使用できるものは5、6個あり、個々には述べませんが、大体、以下のような感じでした。

設定項目

• 座席情報
  行数、列数、配置

• 生徒情報
  人数、番号、氏名（漢字、ふりがな）

機能

• ランダムに席替え
• ある生徒の席を固定する
• 男女の席を固定する
• 設定した生徒情報を記憶する
• 座席表を出力する

意外と種類があるなとは思いました。ですが、偉そうなことは言えませんが、正直使いにくいという印象を受けるものが多かったです。
設定項目が多くて席替えするまでに時間がかかったり、直感的に操作が分かりにくいためです。

自分が作るものは、機能は最低限にして直感的に使いやすくしたいと思いました。

今回はここまでにします。次回から本格的に開発する席替えアプリの機能設定とUI設計をしてみたいと思います。