重富士

VStackがオブジェクトを縦に並べたように、横に並べるためのオブジェクトが HStack です。 前回のコードを以下の手順で書き換えます。 VStackの中に、HStackを追加、さらに以下のようにコードを書く 既存のImage( systemName:“globe” ) をHStackの中に入れる Spacer(), Image( systemName:”info.circle” )を追加する コード 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 import SwiftUI struct ContentView: View { var body: some View { VStack { HStack { Image( systemName:"globe" ) .imageScale(.large) .foregroundColor(.accentColor) .padding() Spacer() Image( systemName:"info.circle" ) .imageScale(.large) .foregroundColor( .blue ) .padding() } Spacer() Text( "こんにちわ" ) ....

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...

プロジェクト紹介 重富士プロジェクトは、2022年03月より開始した教育支援プロジェクトです。重富士は「渡辺電気の教育支援活動」の総称です。支援活動・営利活動の垣根なく多くの活動に重富士の名前が繋がっていくことを目標とし、密度の濃い産学連携や新世代の開発分野を盛り上げることを目指します。 プロジェクトに含まれる支援範囲はおおよそソフトウェアやディジタル文化の開発活動という方針はありますが、プロジェクト方針に沿った活動は積極的に取り組んでいきたいと考えています。私たちと連携してくださる研究室や学生さんらと議論しながら、必要な分野に時間と資金を投資し役立てていきます。 またプロジェクトの方針にご賛同いただける方や、何らかの形でご支援・ご協力いただける方がいらっしゃいましたら、ぜひお声がけください。ささやかながら一緒に良い場を作っていくことができたらと願っております。 活動 当サイトのプロジェクトの一覧をご覧ください. 主催 渡辺電気株式会社 公式HP ご後援企業・団体様（敬称略） 東京工科大学メディア学部 竹島・戀津研究室 研究室概要 関西学院千里国際中等部・高等部 情報科 西出新也先生 学校公式HP 授業"クリエイティブ・コーディング"の成果 2023