SwiftUI

2021-04-16 10:49

そろそろ真面目にこのSwiftUIについての勉強を真面目にやっていこうと思います。
Macosも、2021年4月13日現在で「Bigsur」となり、いよいよiOS、iPadOSとの壁を突破しようとしている。
その中で氷翠の作っているアプリケーションもバージョンアップをしていこうという考えです。

以前と同じように、必要な部分をピックアップしながら、このサイト上で勉強しながら作っていきたいと思います。

作るためのIDE（総合開発環境）はもちろん「Xcode」です。

まずは準備。この時点で最新のXcodeをインストールします。

と、まぁこんな感じで「Macos」で、「App」を選択します。

で、次は、そのままコンパイルしても、エラーになると思うので、アカウントを確認します。Xcodeは開発者としてAppleに登録していないとコンパイルができない仕様になっているので、きちんとアカウントを通しておかないといけません。

ということで、上の画像のようにプリファレンスのところから設定を変更することができるので、いじります。

タブの「Accounts」のところにApple IDを追加し、右側の画面の中に「AppleID」と「Desicription」のところにIDが入っていることを確認してください。

多分、開発者として登録されていなかったらこの下に「Team」は表示されないので登録しましょう。
登録の仕方はここでは省略します。他のサイトで詳しく説明されているサイトがいくつもあるので、すぐできるかと思います。

ついでに、もう一箇所氷翠はいじっています。

「Locations」というタブで、コンパイル先のフォルダを選択しています。デフォルトだと、システムフォルダの中の深いところまでいかないとその場所に辿り着けないので、自分で用意したフォルダを選択しています。

ちなみに、これが、今回のプロジェクトの情報となります。今回はとにかくSwiftUIになれるため、まずはウインドウの作り方から入る。そのため、「test_window」という名前をつけました。

そして、今回はデータベースを利用しないので、「Use Core Data」にはチェックは入れません。

そんな感じで準備ができたので、「Next」で進めていき、プロジェクトの構築をMacにやってもらいます。

また、詳細な情報は後からでも変更ができますが、今回は何もしないで進めていきます。

さて、デフォルトの画面では横に４分割されているかと思います。左側から、ファイルの一覧、実際にコードを編集する、プレビュー、プロパティなどの情報という感じで並んでいます。

早速ファイルが開かれている状態になっているかと思いますが、「ContentView.swift」というファイルが開かれているはず。プレビューのところのボタンをクリックすればそのコードの状態で簡易的にコンパイルされてプレビューが表示されます。

こんな感じです。これが実際にコンパイルしてアプリケーションを実行したときの状態になるということを覚えておきます。

今回の目的はあくまでもウィンドウの扱いについての勉強なので、現在のこの「ContentView.swift」以外のファイルは使うことはありません。

しかし、ここで一度結論から言うと、今回は諦めます。と言うのも、今のところその方法が見つかっていないからです。本来であれば、「UIkit」というモジュールをインポートして画面の大きさを測定し、ウインドウの大きさを調整していくという方法が以前は使えたのですが、現在の氷翠の環境では使えなかったので、使えるようになったら、再びこのページを更新していこうと考えています。

ここまででやっと準備ができました。
ここからはウインドウの設定方法を勉強していきたいと思います。

氷翠は実際には、スマホのアプリを作るわけではありません。あくまでもMac上で使うアプリケーションの開発がしたいのです。
ということは、Mac上ではウインドウの設定が必要不可欠となるわけです。
しかし、このままコンパイルして実行してみると

こんなウインドウで表示されてしまいます。

氷翠としては最初から、画面の大きさに合わせた最大化の状態で開きたいのです。そのほうが、作業に入りやすいので。

ということで、今回は画面サイズを取得して、最初から画面いっぱいにウインドウを広げたいと思います。

こんな感じで開かれていますが、ここには二つの「struct」が用意されています。
まず、上の方にある「ContentView」の部分はウインドウの中身を定義していく部分だと思ってください。どんなコンポーネントを置くのか、クリックした時のイベントの内容だとか。
そして今回用事があるのは下の方にある「ContentView_Previews」の部分となります。

上記で「ContentView_Previews」としたのは、以前に試したことのある方法だと、この部分だったと言うことは記憶しているのですが、現在の仕様では細かいやり方が見つからないため、このページはここまでとしておきます。