[SwiftUI] プロジェクトの新規作成とHello Worldの変更


Xcode11からSwiftUIという新しいStoryboardに代るUI作成フレームワークが出てきました。最初のプロジェクト作成とSwiftUIのCanvasをざっくり見てみましょう。

Swift 5.1
Xcode 11.3.1

 

SwiftUI

 
最初は、SwiftUI Essentials の Creating and Combining Views の内容に沿った形でどんなものか見てみます。
 

 

Projectの作成

 
Xcode を起動:
「Finder」が画面下に通常はありますので、それを起動すると、「アプリケーション」フォルダのリストにXcode があります。ここに色々なアプリを入れて置くところです。
 
xcode_install8
 
それをダブルクリックで「Welcome to Xcode」が現れます。あるいは何も表示されない事もありますが、基本的には Mac の場合はメニューは画面の上にあります。

「Create a new Xcode project」をクリックしてプロジェクトを新規に作成します。

あるいはメニューから
「File」「New」「Project…」を選択
 
 

 
Template の選択ウィンドウが出てきます

「iOS」「Single View App」

を選び「Next」とします。他のテンプレートはいずれ使うかもしれませんが最初は 「Single View Application」で始めましょう
 

 
プロジェクトのタイトルなどの設定をします。

Product Name TestApp001 などのプロジェクト名
Team Xcodeで生成できます。
これが設定されていないとエラーになります。
Organization Name 任意の名前
Organization Identifier 下の Bundle Identifier が決まるため公開を前提にする場合は注意して選びますが、公開しない場合は適当で大丈夫です。
Language 開発言語は Swift か Objective-C を選びます。尚、Objective-Cは昔の言語で新規で使うことは無いでしょう。
User Interface SwiftUI か Storyboard を選択します

 

SwiftUI or Storyboard

2019年に新しくできたInterfaceです。以前はStoryboardを使っていましたが、10月上旬現在これを解説する本もなければネット情報も限られています。ただ今後はこれが本格的になるでしょう、簡単にコーディングとレイアウトができるようです。近々にアプリを仕上げる予定があるのであればネット情報を調べて今までのStoryboardでの方法で完成させる方が現実的かもしれません。

プロジェクトの保存先を聞いてきますので適当な場所を指定します
 
Team がNoneだとStatusがエラーとなります。
登録したApple ID名をTeamに入れます。プルダウンで候補が出てきます。(Apple IDの登録が必要です)
 

 

Hello World

 
MacのOSは macOS Catalina にします。(Mojaveでは一部できない機能があります)

プロジェクトを作成しただけですが既にHello Worldを表示させるコードが記述されています。

この画面にならない場合は左の「Project navigator」にある ContentView.swift をクリックします。

コードが書かれているEditorの隣がCanvasになります。

これはCatalinaにしないと使えません。またCanvasが無い場合はメニューから「Editor」「Canvas」を選択しても表示できます。

Canvasには 「Automatic preview updating paused」となっているので「Resume」をクリックして再開してみます。

すると Hello World が表示されました。
最初は大きすぎるので、下にある100%のサイズから+/-を使って縮小させて50%にしました。

 

Textの変更

 
このコードとプレビューが連動しているのを確認してみましょう。

Source Editor:

“Hello World” を “こんにちは” に変更してみます。

 
実際に変更がリアルタイムにPreviewに反映しているのが分かると思います。
 

 

Inspector:
今度は逆にPreviewの文字を選択します。
Utility Areaが現れるのでテキストを SwiftUI に変更してみます。

Previewがそれに応じてリアルタイムで変更されています。

またコードも同じく変更されました。

Preview:
「command」キーでPreviewの文字(Hello World)をクリックするとダイアログが表示されるので
「Show SwiftUI Inspector」をクリック

Textを編集するダイアログになりここから編集することができます。

 

ビルド&実行

 
Simulator:
今までのように出来上がったアプリを Simulator で確認してみましょう。
 
Xcode の左上にある三角印とその右側の iOS Simulator を見てください
Simulator を「iPhone xx」 に設定して三角印をクリックします
 

 
Simulator が立ち上がります。
「Window」から「Physical Size」を選ぶと多少サイズを小さくすることもできます。
また「Show Device Bezels」にチェックするとスマホの枠が一緒に表示されます。
 

SimulatorでもPreviewと同じようになりました。

 

実機:
SimulatorのターゲットをMacに接続したiPhoneに設定する今までのやり方もありますが、「Preview on Device」で実機テストができます。ボタンをクリックするだけです

 

UIKit と SwiftUI

 
今までのUIKitでSwiftUIに対応できそうなものをリストにしてみました。
必ずしも同じように置き換えはできないので、機能的に代変えになりうるという観点です。
 

UIKit SwiftUI
UILabel Text
UIImageView Image
UITextField TextField
UITextView TextとTextFieldをうまく使う
UISwitch Toggle
UISlider Slider
UIButton Button
UITableView List
UICollectionView Listをうまく使う
UINavigationController NavigationView
UITabBarController TabbedView
UIAlertController (style .alert) Alert
UIAlertController (style .actionSheet) ActionSheet
UIStackView (horizontal axis) HStack
UIStackView (vertical axis) VStack
UISegmentedControl SegmentedControl
UIStepper Stepper
UIPickerView Picker
UIDatePicker DatePicker
NSAttributedString Textでうまく代用
UIFont Font
UITapGestureRecognizer onTapGesture
UILongPressGestureRecognizer onLongPressGesture
UIScrollView ScrollView
UITableView
UINavigationController
UITabBarController

 
元情報はこちら、Swift Cheat Sheet

一人でアプリ開発の限界を感じたら

アプリ開発を始めたけどわからないところがあり、誰かに聞きたいけど周りにはそんな人はいない…あるいは、会社で働いていて日中そんなに時間をとれないなど、オンライン・スクールがいいと思います。


TECH ACADEMY
自宅にいながら1時間でプログラミング基礎を習得

こういうものではアプリ作れないと言う意見もありますが、それは結局本人のやる気があるかないかです。やる気があっても独学では突破しにくいところは教えてもらうのが一番早い。


侍エンジニア塾
侍エンジニア塾 無料体験レッスン



とても簡単なことなのに本やネットの画像だけでは分かりにくいことはあります。実際に質問してピンポイントで教えてもらうと、なんだそんなこと、と言うのがけっこうあります。


CodeCamp
~約20,000名の受講生と300社以上の導入実績~
現役エンジニアのオンライン家庭教師CodeCamp




直接(ネットで)誰か分かる人に聞いた方が早く解決して、上達も早いと思います。


Play Ground
本業と並行してやるには月額制なのがありがたいです。


無料で転職まで
これはiOSアプリ限定ではありませんが無料です
その代わり就職することを前提にしたスクールで「エンジニアになって職を得たい」のであれば手っ取り早いかもしれません


誤字脱字、意味不明などのご意見は 謙: e-mail まで
ブックマークしておくと便利です このエントリーをはてなブックマークに追加
Twitter:


シェアする

  • このエントリーをはてなブックマークに追加

フォローする