SwiftUI

VStackで縦方向, HStackで横方向に並べてみました。次は上に重ねていくZStackを紹介します。以下のように前回のコードに追加していきます。 VStackをZStackで包む 次にColor()を追加。Colorは色オブジェクトで背景の色を塗ってくれる Colorに続いて前回のVStack{ … }を置く コード 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 import SwiftUI struct ContentView: View { var body: some View { ZStack { Color( .sRGB, red:0.2, green:0.3, blue:0.2, opacity:1.0 ) VStack { HStack { Image( systemName:"globe" ) .imageScale(.large) .foregroundColor(.accentColor) .padding() Spacer() Image( systemName:"info....

プログラムの動作を確認するにはいくつか方法があります。 ビルド(App化)して実行 プレビューで実行 プレビューで見た目変更の自動確認 それぞれ用途が異なりますが、ここではまず手軽なプレビューで実行する方法を紹介します。 1. Mac(Xcode)のプレビュー Xcodeでswiftpmのプロジェクトを利用している場合、SwiftUIのプレビューは基本的に自動で実行されます。 ただし大きな変更など、自動認識できなくなることがあります。 その場合、プレビュー右上に出てくるResumeを押すと、更新を再開できます。 2. iPadのプレビュー iPadのプレビューも同様に基本は自動で実行されます。 ただMac同様に必要な時は自動で更新を実行できます。 Appのプレビューというタイトルを押す メニューが出てくるので必要な項目をタップ プレビューが再構築される

では今回から、SwiftUIでのプログラムをはじめていきましょう。初回はもっとも基本的なオブジェクトの1つ、Textを使ってみます。 作成したswiftpmのAppプロジェクト(Mac, iPad)を開く サンプルコードを利用してもOK あるいはSFSwiftUI01-1.swiftpm を開く (サンプルコード) プロジェクトは、はじめからいくつかのファイルがつくられます。 この中の ContentView を開きます。ContentViewはAppを起動した時にはじめに表示される画面です。 この中身を書き換えて、変更がプレビューに反映されるか確認してみます。 ContentView をひらく Text(“Hello, world!”) の Hello, world! を こんにちわ に変更 プレビューで こんにちわ に変わっていることを確認 コード 1 2 3 4 5 6 7 8 9 10 11 12 13 import SwiftUI struct ContentView: View { var body: some View { VStack { Image(systemName: "globe") .imageScale(.large) .foregroundColor(.accentColor) Text( "こんにちわ" ) } } } 結果

iOSにはライトモードとダークモードがあります。 基本的にユーザがOSの設定で決めるものなのでプログラム側で何かすることはありません。ただ作成するAppのコンセプトによってはダークモードに固定したいといったリクエストもあると思います（※ 夜がテーマのAppならダークモードに固定したくなるとおもいます）。 今回はプレビューでの見え方を統一するためにコードでモードの切り替えを行います。 モードの切り替えはContentViewに対して設定します。 MyAppを開く ContentView() に .preferredColorScheme(.dark) を追加する ContentView() がダークモードになることをプレビューで確認 .darkを.lightとすればライトモードになります コード 1 2 3 4 5 6 7 8 9 10 11 import SwiftUI @main struct MyApp: App { var body: some Scene { WindowGroup { ContentView() .preferredColorScheme(.dark) } } } 結果

前回、SwiftUIのオブジェクトの編集をはじめることができました。ここからはオブジェクトにいろいろな性格を持たせて見た目を変えていきましょう。今回は padding です。オブジェクトに余白を持たせます。 ContentViewを開く Text( “こんにちわ” )に.padding()を追加して余白をつくる .padding() は幅や方向を指定することも可能 .padding( 50.0 ) : 上下左右に50.0ptの余白 .padding( .top, 80.0 ) : 上に80.0ptの余白 コード 1 2 3 4 5 6 7 8 9 10 11 12 13 14 import SwiftUI struct ContentView: View { var body: some View { VStack { Image(systemName: "globe") .imageScale(.large) .foregroundColor(.accentColor) Text( "こんにちわ" ) .padding() } } } 結果

2022年から、iPadをつかってiOS App開発ができるようになりました。 1. Swift Playgroundsをインストールする iPadでは、Swift Playgroundsを使ってAppを開発します。 App StoreからSwift Playgroundsをインストールしてください。 2. プロジェクトの作成 Swift Playgroundsをタップして起動します。 画面左下のAppを選択 3. プロジェクトを開く Appを作成するとマイプレイグラウンドに**マイApp*が追加されます。これがApp作成に必要なものを詰めたパッケージです。プロジェクトと呼びます。これを開いてみましょう。 マイAppをタップ 4. 準備完了 マイAppを開いて以下のような画面がでてくれば準備完了です。

MacをつかってiOS App開発をはじめてみます。 1. Xcodeをインストールする MacではXcodeを用いてAppをつくります。 App StoreからXcodeをインストールしてください。 2. プロジェクトの作成 Xcodeを立ち上げると以下のようなウインドウがでてきます。 Appを作成するために必要な材料を管理する仕組みをプロジェクトと呼びます。今回は新規のプロジェクトを作成します。 Create a new Xcode projectを押す メニューのFile > New > Projectでも可 3. Swift Playground Appプロジェクトの選択 プロジェクトにはいろいろな種類があり、様々なAppを作成することができます。 今回は2022年からApp開発に使えるようになったSwift Playground Appのプロジェクト(swiftpm)を選択します。 PlatformでiOSを選択 Swift Playgrounds Appを選択 4. プロジェクトの初期設定 プロジェクトの名前をつけてください。 App Name (名前) 自由な名前でOK Team (開発アカウント) NoneでOK 開発者アカウントがあればそれを選択 Organization Identifier (組織ID) com.sampleと入力 自分のドメインがあれば入力(sample.netの場合, net.sample.appnameのようにすることが多い) Nextを押すとプロジェクトの保存先を聞かれるので適当な場所に保存してください。 指定した場所にApp Nameのswiftpmファイルができていますので確認してください。 5. 準備完了 プロジェクト作成が終わるとXcodeのエディタが開きます。 画像のような状態が表示できたら準備完了です。 6. MacとSwift Playground App ここまでXcodeでの準備を説明しましたが、MacでもiPadと同じようにSwift Playgrounds Appを用いて開発をすることも可能になりました。 Swift Playgrounds Appを使いたい場合は、 iPadの準備手順を参考にしてください。

SwiftUIでiOS Appの開発に着手します. お手持ちのMacかiPadでお試しいただけます。 1章. プロジェクト作成と導入 1-0. 準備 1-0-1. Macでswiftpmを作成する 1-0-2. iPadでswiftpmを作成する 1-0-3. プレビューの使い方 1-0-4. 1章の目標・進め方・サンプルコード 1-1. コーディングをはじめる・レイアウトをはじめる 1-1-1. Textの文字を変える 1-1-2. ダークモードに切り替える 1-1-3. オブジェクトに余白をつくるpadding 1-1-4. 自動的に隙間を作るSpacer 1-1-5. 縦方向に並べるVStack 1-1-6. 横方向に並べるHStack 1-1-7. 重ねていくZStack 1-2. オブジェクトを装飾する 1-2-1. 背景を設定するbackground 1-2-2. paddingでオブジェクト内の余白を作る 1-2-3. paddingでオブジェクト間の余白を作る 1-2-4. オブジェクトのサイズを決めるframe 1-2-5. テキストスタイルを変えるfont 1-2-6. メインの色を変えるforegroundStyle 1-2-7. 角を丸くするclipShapeとRoundedRectangle 1-3. オブジェクトを組み合わせて画面をつくる 1-3-1. 文字を表示するText 1-3-2. 画像を表示するImageとアセット 1-3-3. 縦並びレイアウトVStackの応用 1-3-4. 分割線Divider 1-3-5. 横並びレイアウトHStack 1-3-6. Imageでアイコン利用 1-3-7. 隙間を充填するSpacer 1-3-8. スクロールを実現するScrollView 1-4. オブジェクトとアクション 1-4-1. Buttonを押す 1-4-2. Buttonの装飾とLabel...

■ 概要 Creative Application演習は、メディア論から社会実装へ連なる一連の議論と実践を行う演習です。 渡邉が設計し、東京工科大学メディア学部で実施しています。 ソフトウェア開発は、多岐にわたる専門分野のスキルを求められるようになりました。プログラミングなどの開発スキルを磨くことは想像しやすいですが、開発の外の 他の分野に興味をもち開発技術と結びつけられるか が重要な要素となっています。作りあげられるサービスが「利用者や社会にどのような影響を与えるのかというイメージ」を想像できるようになるからです。この想像力を持つことが良い設計を生みます。そして良い設計は良い成果を生み、ひいては有益なサービスの社会実装へとつながります。このように複数の分野を結びつけることの重要性が高まっていますが、この時避けて通れないのが分野をまたぐために発生する メディア です。 本演習は分野を結びつけるメディアの勘所を得ること、知識をストックするにとどめず社会実装にアプローチする姿勢を獲得することを目的としています。本演習ではその勘所を端的に「美と思考とメディア」と呼んでいます。美意識を通したメディアによる結びつけと社会実装を意識した試行錯誤に取り組みます。本演習はそのアプローチを取るごく初歩的なダイジェストですが、メディアと社会実装についての感性を得るきっかけになればと思います。 また何かお気づきの点などありましたら、お気軽にお声がけください。 お問い合わせ先: https://wdkk.co.jp/contact ■ 受講者向け情報・関連サービス案内 東京工科大学 学内情報 CreApp Google Classroom CreApp利用サービス Hyperion コミュニティ Hermitage BookStack ■ メディア諸論 2025 1Q A01: メディア学とCreative Application (PDF) A02: メディア史1 はじめに思考ありき (PDF) A03: メディア史2 思考とメディア あるいは主客と世界 (PDF) A04: メディア史3 メディアサイクル - 場, 表現, 創発そして場 (PDF) A05: メディア史4 表現の蓄積・創発の継続 (PDF) A06: 美術思想史1 観察の変遷 – 表現者の思考 (PDF) A07: 美術思想史2 美の諸説 - 表現者の追うもの (PDF) 2Q A08: 思想と哲学1 ゼロという概念 (PDF)...