会社で基盤に貼られたシールや刻印されたシリアルナンバーを読むのに老眼のわたしは虫眼鏡を使って確認しています。この文字が少し潰れてたりと非常に読みにくいのです。基盤のシールから読みだした品番をエクセルに記入していくだけの作業なのですが、ここにiOSのアプリが使えないかなと考えて開発環境を整える所から始めてみました。
「developer.apple.com」でアプリ作成に何が必要か調べる
ネットで調べると「developer.apple.comで色々と揃うよ」という事らしいので、言われたとおりに見に行きました。Macbook Pro 14を使って開発をするので、王道で進めようと思います。
何はなくともXcode
統合開発環境であるXcodeがあればなんでもできるらしいので、それをインストールします。App Storeからインストール後に各種設定を開始します。私が所有している端末(macOS, iOS, watchOS)のアプリを作成するので、そのあたり選択してダウンロード開始。Appを選択して次へ。
その後、アプリの名前や組織名などを入力するダイアログが出てくるので、それ以外はデフォルトで次へ。フォルダ指定して作成ボタンを押すとHello World的なプロダクトの環境が作成できました。
プログラミング言語のSwiftといふもの
iOSのアプリを開発する上で必要なのがプログラムです。その言語は組み込みからWebまで色々とありますが、iOSというかAppleのプラットフォーム上で開発する場合は「Swift」が良さそうです。上記のサイトを流し見してお勉強しておきます。初めて使う言語なので、必要そうな機能は個別に検索して探す必要があります。
https://docs.swift.org/swift-book/documentation/the-swift-programming-language/guidedtour
このツアーなるものを流し見します。なんか便利そうな言語に見えますね。サンプルコードも新旧入り乱れて混乱しますが、たくさんあるのでお勉強がてら参照していきます。
基本的な開発環境が整い、やっと開発を始めることができると思ったのですが、ここで問題発生です。それは環境構築中から思っていた事になります。
「サンプルコードが何言ってるかわからない」
エンジニアとしては重症です。英語も「なんとなく言っている事はわかるし、なんとなく気持ちは伝えられる」という状態では日常生活は問題なくてもビジネスでは危険ですよね。まさにSwiftでの会話がそんな状態です(汗。
APIなどは新しい環境で分からなくても名前から想像してヘッダー等で理解できますが、言語的になんの処理がやりたいのかわからないので、コピペでなんとなく実装はできても、ゼロスクラッチでコーディングできる状態ではないのです。「SwiftってC++の派生だったよね…これってC++なんですかね？」と思いながらネットの旅に出かけました。
The Swift Programming Language(5.9.2)
Swiftの事をネットで検索すると色々な情報が見つかります。Swiftの生い立ちやAPIの使い方やサンプルコード、言語的な説明などなど。私が少し目を離した隙(?)に15年位の歳月が経過していたようで、ネットには新旧入り乱れた情報が乱立していました。で、やっぱり本家の最新を参照しようとたどり着いたのがここです。数日かけてカテゴリー毎に上から読み進め、やっとこさSwift君との会話が成立するようになって来ました。
どうやら「Swift」と「SwiftUI」なるものがあり、「Swift」はプログラミング言語で基本C++の派生となっている事が読み取れます。「SwiftUI」はSwiftをベースとしたフレームワーク的なもので、ルールも独自のものが多く、古いC++使いのMittyからするとサンプルアプリが何言ってるかわからないのはこのあたりが原因だったようです。
UI/UXデザイン(SwiftUIといふもの)
UI/UXのためにSwiftUIなるものが用意されているらしいです。UIのセンスが皆無なMittyとしてはテンプレと言う名のフレームワークがあるのは助かります。iOSのアプリを作るために最低限必要な情報を勉強しようと思います。ネットでUI系を探すと大きく「ViewController」と「SwiftUI」でフレームワークが異なるっぽいので、最新の「SwiftUI」をベースに取り込もうと思います。なんかもうC言語とか完全に過去の遺物となっていますね(汗。
チュートリアル発見したのでやってみた
SwiftUIのチュートリアルを見つけたのでやってみました。コピペしないで実装したらWatchAPPの手前までで、約6時間位かかりましたが、大変勉強になりました。UIだけでなくアプリの基本的な作り方を説明しているので、API資料を見ながらサンプルソース追うのが億劫な人はこれだけやっとくとアプリは作れるようになりそうです。というか「へーへー」的な感じで色々と楽しいのでおすすめです。
UI系の遷移をNavigationを使って実装
SwiftUIの良い所のとしてUIの遷移が簡単に実装できるという事があると思います。以下の例では＠Bindingでmainというかアプリの入口で定義して、引き渡されたmodelDataを使ってリスト表示をさせています。ネーミングセンスがどうなのっていうのは置いといて(汗)、modelData.formatsが今回のアプリで利用するテーブルの配列です。NavigationStackとNavigationLinkで囲んだものについてUIの属性を与えて遷移をさせる事が可能です。Listで配列から各テーブルを取り出して自作のTableViewでテーブルを表示させています。その時に自動で戻る(< Table List)が表示されて、そこ押すと戻るという…なんかWebアプリのようにUIが実装が可能です。各行はNavigationLink のlabel:で定義されているものが表示されています。swipeActionsで左右にButtonを配置しています。modelDataをコピー・削除すれば描画にも反映されます。
import SwiftUI
struct TopPage: View {
@Binding var modelData: ModelData
var body: some View {
NavigationStack {
List($modelData.formats) { $format in
NavigationLink {
TableView(format: $format)
.environment(modelData)
} label: {
OneRow(format: format)
.swipeActions(edge: .leading){
Button {
modelData.delete(format: format)
} label: {
Label("Delete", systemImage: "trash")
}
}
.swipeActions(edge: .trailing){
Button {
modelData.copy(format: format)
} label: {
Label("Copy", systemImage: "doc.on.doc")
}
}
}
}
.navigationTitle("Table List")
.navigationBarTitleDisplayMode(.inline)
}
}
}
#Preview {
let modelData = ModelData()
return TopPage(modelData: .constant(modelData))
}
で、Xcodeのとっても良い機能である#Preview。これがあるだけでUI系の実装は格段に早くなりますね。イメージ通りのUIになっているか簡単に確認できます。ModelDataを作成してそのデータを渡すだけで画面右側にプレビューが表示されます。ちなみにファイルI/Oやフォトアルバムなど使ったファイル達はシュミレータとPreviewで保存場所が異なります。シュミレータは場所がわかりやすいので良いのですが、Previewは探すのが面倒なので何かデータを作りたい時は右のアプリで操作(文字編集など)しています。
雑感
とりあえず今回は環境構築＆お勉強編で終わります。新しい環境で物を作る(プログラミング)するのは大変だけど面白いですね。環境構築と調査で2週間、サンプルコードを見ながらお勉強に2週間で平日8時間使ってトータル160時間は使っています。連続で時間は取れていないので一週間経過後にやってた事を思い出しながら作業し、開始してからだと数ヶ月経過しています。OSとxcodeともにVersionが更新されました。大きな変化はないですけど。
iOS関連の情報はAPIの変更や更新なども頻繁でネットで正しい情報を探すのが難しい時がありますね。なので本家の情報をベースにサンプルコードを実行してシュミレータで動作確認しながらプログラミング言語やフレームワークの調査をしていました。次回は実装編(？)でカメラ使ってテキストスキャンして文字列を取得してCSVで吐き出す感じで作っていこうと思います。実際の仕事に使えるのはいつの日になる事やら(汗。
コメント