| 2020/05/14

SwiftUIにトライ

お家に居ようということで、時間に余裕ができたので、ずっと気になっていたSwiftUIを触ってみるべく、昨年のWWDCの資料映像を観ていたら次々とやる気スイッチが入ってしまいました。

資料にあったサンプルをトレースしてみたりもしたのですが、どうせなら（大胆にも？）自分の思い描いたものを形にしてみたくなり、さしあたり、ちょっとしたアプリのアイデアがあったので自主練の課題として設定。

アイデアを実現するための方法をいくつか調べたのですが、プログラム初心者にとってはさすがに躓きどころは沢山ありますね、その度に検索と身近なエンジニア（息子くん）への質問の繰り返しでした。

アプリのコンセプトとしては簡単なもので、ファーストビューで家庭菜園で育てるような作物の一覧、そしてそこからの遷移先（詳細ビュー）では、選択した作物の種の蒔き時や定植の仕方、一緒に植えると相乗効果が期待できるコンパニオンプラント、連作障害などが調べられるというもの。

最近は趣味で畑を借りて野菜作りをしているので、完全に自己満足アプリです。

まずは、作物の各情報をどう管理してアプリへ渡すかというところで、Googleスプレッドシートで入力／管理をして、スクリプトで生成したjsonファイルを渡すことに。

調べてみると、このようなスクリプト（.gs）を使えばGoogleスプレッドシートからjsonファイルが生成できるようです。

function getData(sheetName) {
  var sheet = SpreadsheetApp.getActive().getSheetByName(sheetName);
  var rows = sheet.getDataRange().getValues();
  var keys = rows.splice(0, 1)[0];
  return rows.map(function(row) {
    var obj = {};
    row.map(function(item, index) {
      obj[String(keys[index])] = String(item);
    });
    return obj;
  });
}

function doGet() {
  var data = getData('Sheet1');
  return ContentService.createTextOutput(JSON.stringify(data, null, 2))
  .setMimeType(ContentService.MimeType.JSON);
}

▼ 参考にしたサイト

・Google SpreadSheet のデータを JSON 形式で取得する Web API をサクッと作る – Qiita

欲を言えば、スプレッドシートからの公開URLやAPIをアプリから参照できるようにしたら良いのかもですが、スプレッドシートからのエクスポートはともかく、アプリ側の実装がファーストステップとしては荷が重すぎそうなので、ちょっと横へ置いておきます。

jsonのデータができれば、次はSwiftUIで画面の実装。

と言っても、いきなりフルスクラッチではできるはずもなく、今回の目的に近いデータ構成になっているサンプルがないかと探して、こちらを参考にしてみました。

・SwiftUIで一覧表示画面を作成する

そして以下が実際に作成したデータ群

▼ 2画面分のビューデータ
ContentView.swift：ファーストビュー。
VegeDetail.swift：詳細ビュー

▼ 上記2つのビューを構成するためのデータ
VegeModel.swift：表示するデータのモデル
VegeDataSource.swift：JSONを読み込んでデータを提供
VegeRow.swift：一覧の各行を表示するためのビュー。
VegeList.swift：VegeDataSourceからデータを取得、各行のVegeRowを生成。

サンプルでは、値の更新通知を受けるのがBindableObjectとなっているのにエラーを吐かれて、調べてみるとdeprecatedになったからObservableObjectを使うんだよとか、その他にもいろいろな部分でエラーが出てエラー祭り (^^;;

サンプル通りにやれば簡単かと思っていたんですが、なかなかそうもいかないものですね。

でも心を落ち着けて、なんとか最初に書いた通り対処でき、最小限の画面は動くようになりました。

https://www.instagram.com/p/CAJfZ4BAmjs

これくらいの画面遷移のモックアップ（動くデザインサンプル）」なら、1日もかからずできるのに、.xcodeprojファイルを作っては壊しの繰り返しを3回ほどして2、3日がかりです…。

遷移後になんだかカクカクするなぁとか、やりたいことが途中までだとかはありますが、まだまだ他にもやりたいことが沢山で、こればかりに時間を割くわけにもいかず、ひとまずはここまで。

SwiftUIの感想としては、昨年のWWDCでデビューしたばかりで、まだまだそれのみでアプリの実装を完結できるものではありませんでしたが（画面を構成するための要素の不足やバックグランド処理の実装など）、協業しているエンジニアさんとの共通認識が少しは増えたと思いますし、エンジニアリングとデザイニングを結ぶことができそうなソフトウェアの片鱗をみることができたのは大きな収穫だったと感じています。

先日もAppleからアナウンスがあった通り、今年のWWDCは6月22日からオンラインでの開催となっていますが、進化を遂げているであろう次期バージョンのSwiftUIにも注目して臨みたいと思っています。

楽しみですね。

前の投稿次の投稿