iOS勉強会資料

学内で開催したiOS勉強会の資料

Transcript

1. iOS勉強会 2021/12/6
2. 目次 ・自己紹介 ・Swiftについて ・アプリを作ってみよう ・今後の勉強方法について ・補足資料 2
3. Swiftについて
4. Swiftとは • iOS、Mac、Apple TV、Apple Watch向けのアプリを開発するためのプログ ラミング言語 • オープンソース Swift - Apple（日本），https://www.apple.com/jp/swift/（最終アクセス：2021/11/20） 4
5. iOSアプリ開発における主なフレームワーク • UIKit コンテンツをスクリーンに表示し、そのコンテンツを操作して、　　システムと のインタラクションを管理 • SwiftUI 宣言型シンタックスを使用 ドラッグ＆ドロップで行える直感的なデザインツールも含む iOS13~対応 5
6. 今回作るアプリについて(完成イメージ) じゃんけんアプリ ボタン押下でじゃんけん開始 　　　　　　↓ グー・チョキ・パーをランダムで排出 6
7. じゃんけんアプリ画面遷移 初期画面 じゃんけん画面 「じゃんけんをする」 　 ボタンを押下 7
8. じゃんけんアプリ画面構成 Button (じゃんけん開始ボタン) Text (手の種類を文字で表示) Image (じゃんけん画像) 8
9. アプリを作ってみよう
10. プロジェクト生成 最近のプロジェクト 新規プロジェクト生成 10
11. プロジェクト生成 プラットフォームの選択 クリック 11
12. プロジェクト生成 12 アプリ名 識別子の設定 インターフェイス選択 インターフェイスに伴 う言語選択
13. Xcode画面構成 13 キャンバス エディタ ナビゲータ シミュレーター選択
14. シミュレーター選択 14 好きなデバイスを選びます
15. キャンバス 15 選んだデバイスが表示されます
17. フォルダ構成 MyJankenApp • メインで呼ばれるところ！ • processingの void draw() みたいなところ！ ここの “>” を 押すと
 中が見れる！
 ContentView • (実質)メインで呼ばれるところ！ • MyJankenAppでContentViewが呼ばれてるよ！ JankenImageView • ジャンケン画像が表示されるところ (グーorチョキorパー画像) JankenResultLabel • ジャンケン開始前の「これからジャンケンをします」テキスト • ジャンケン結果のテキスト表示 (グーorチョキorパー) 17 PlayJankenButton • ジャンケンをするためのボタンを作るところ！ • このボタンが押されたら，ランダムでグー or チョキ or パーを返 すように！ (実際はランダムで 1 or 2 or 3)
18. アセット準備 グー・チョキ・パーの画像をXcodeにアップロード 18 画像を以下からダウンロード ↓↓↓ https://drive.google.com/drive/folders/1iXjlbuLI9IAJRLh95tLKZ48Py4qIDp2b?usp=sharing
19. アセット準備 グー・チョキ・パーの画像をXcodeにアップロード 19 Assetsを選択 じゃんけんの画像をド ラッグ&ドロップ
20. アセット準備 アプリの背景色を設定 20 右クリックして「New Color Set」を選択
21. アセット準備 アプリの背景色を設定 21 クリックしてインスペクタを開く Any Appearanceを選択 Input Methodで「8-bit(0-255)」を選択 Red: 90 Greed: 242 Blue: 198で設定 Nameを「background」に設定
22. コーディング アプリに背景色を反映 22 先ほど設定した背景色を反映できるようにColorを拡張 StaticをつけることでColorインスタンスを作成することなく、 backgroundプロパティにアクセス可能
23. コーディング アプリに背景色を反映 23 ZStackを使い、背景色を設定したViewを上に重ねる SafeAreaにも背景色を反映するために.ignoresSafeArea()をつける
24. コーディング アプリに背景色を反映 24
25. コーディング Button (じゃんけん開始ボタン) Text (手の種類を文字で表示) Image (じゃんけん画像) 25
26. コーディング じゃんけん画像を表示するViewの作成 26 じゃんけんの手を決める考え方 1. ランダムで手を決める 2. 初期状態、グー、チョキ、パーそれぞれに0~3の数字を割り当てる a. 初期状態は0 b. グーは1 c. チョキは2 d. パーは3 3. 1~3の数字をランダムに出し続けてじゃんけん画像を表示
27. コーディング じゃんけん画像を表示するViewの作成 27 @Bindingでプロパティを宣言することでView間でデータのやりと りが可能 answerNumberで、どのじゃんけん画像を表示するか制御
28. コーディング じゃんけん画像を表示するViewの作成 28 Image("imageName")で画像を表示 縦横比を保ったまま表示するため に.aspectRatio(contentMode: .fit)を記述 画像をリサイズするため に.resizable()を記述 これだけだと縦横比が 保たれない🥺
29. コーディング じゃんけん画像を表示するViewの作成 29 @Bindingで宣言したプロパティの初期値をJankenImageView(answerNumber: .constant(0))で設定 　→初期状態では画像を設定していないのでPreviewでは何も表示されない Previewの表示
30. コーディング じゃんけん画像を表示するViewの作成 30 .constant()の引数と背景を設定するとPreviewにじゃんけん画像が表示される .constant(1)でグーの画像、.constant(2)でチョキの画像、.constant(3)でパーの画像 Previewの表示
31. コーディング じゃんけん画像を表示するViewの作成 31 Previewの表示 .constant(3)の時 .constant(2)の時 .constant(1)の時
32. コーディング Button (じゃんけん開始ボタン) Text (手の種類を文字で表示) Image (じゃんけん画像) 32
33. コーディング 手の種類を文字で表示するViewの作成 33 ファイル作成 File→New→Fileの順に選択(「command⌘」 +「 N」)
34. コーディング 手の種類を文字で表示するViewの作成 34 ファイル作成 選択
35. コーディング 手の種類を文字で表示するViewの作成 35 ファイル作成 「JankenResultLabel」と入力 クリック
36. コーディング 手の種類を文字で表示するViewの作成 36 @Bindingでプロパティを宣言することでView間でデータのやりと りが可能 answerNumberで、どの手の種類を文字で表示するか制御
37. コーディング 手の種類を文字で表示するViewの作成 37 Text("hoge")で文字を表示 .font(.system(size: 20))でサイズ20の標準 フォントを指定 .padding(.bottom)でTextの下辺に余白を追加 初期状態では「これからじゃんけんをしま すと表示」
38. コーディング 手の種類を文字で表示するViewの作成 38 Previewの表示 @Bindingで宣言したプロパティの初期値をJankenResultLabel(answerNumber: .constant(0))で設定
39. コーディング 手の種類を文字で表示するViewの作成 39 Previewの表示 .constant(3)の時 .constant(2)の時 .constant(0)の時 .constant(1)の時
40. コーディング Button (じゃんけん開始ボタン) Text (手の種類を文字で表示) Image (じゃんけん画像) 40
41. コーディング 手の種類を文字で表示するViewの作成 41 ファイル作成 File→New→Fileの順に選択(「command⌘」 +「 N」)
42. コーディング 手の種類を文字で表示するViewの作成 42 ファイル作成 選択
43. コーディング 手の種類を文字で表示するViewの作成 43 ファイル作成 「PlayJankenButton」と入力 クリック
44. コーディング じゃんけんをするためのボタンを表示するViewの作成 44 @Bindingでプロパティを宣言することでView間でデータのやりと りが可能 answerNumberで、どの手の種類を文字で表示するか制御
45. コーディング じゃんけんをするためのボタンを表示するViewの作成 45
46. コーディング じゃんけんをするためのボタンを表示するViewの作成 46 クリック ドラッグ&ドロップ
47. コーディング じゃんけんをするためのボタンを表示するViewの作成 47 表示文字: “じゃんけんをする” 大きさ: 画面横幅いっぱい、高さ80 フォント: サイズ30の標準フォント 背景色: 青色 文字の色: 白色
48. コーディング じゃんけんをするためのボタンを表示するViewの作成 48 ボタンを押すとどんな処理をするか？ 1. 乱数を格納するプロパティを初期化 2. グー、チョキ、パーそれぞれに1~3の数字を割り当て、ランダムに排出 a. グーは1 b. チョキは2 c. パーは3 3. 前回の手と同じ場合は1、2を繰り返す 4. 前回の手と異なる場合は結果を格納
49. コーディング じゃんけんをするためのボタンを表示するViewの作成 49 Int.random(in: 1...3)で1~3の乱数を生成 repeat-whileで後判定のループ処理 　→前回と同じ乱数だった場合は条件式が成立し、repeatに戻る
50. コーディング じゃんけんをするためのボタンを表示するViewの作成 50 Previewの表示 @Bindingで宣言したプロパティの初期値をPlayJankenButton(answerNumber: .constant(0))で設定
51. コーディング じゃんけんをするためのボタンを表示するViewの作成 51 Previewの表示 じゃんけんの手の違いでボタンの見 た目は変化しない constant()の引数がどんな値でも Previewに変化はない
52. コーディング ContentViewにそれぞれのViewを載せる 52
53. コーディング ContentViewにそれぞれのViewを載せる 53
54. コーディング ContentViewにそれぞれのViewを載せる 54 @Stateでプロパティを宣言することで、プロパティが監視され、 変更時にViewが更新される structはプロパティを更新することができない @Stateをつけて宣言することで、プロパティの更新が可能
55. コーディング ContentViewにそれぞれのViewを載せる 55 ↑ Image、Text、Buttonの表示部分
56. コーディング ContentViewにそれぞれのViewを載せる 56 Vstackを使うことで垂直方向に表示可能 　→Image、Text、Buttonは垂直方向に表示
57. コーディング ContentViewにそれぞれのViewを載せる 57 じゃんけん画像の上下左右に余白を設けて表示(Spacer()で余白を表示) 左右に余白を表示する場合は水平方向であるため、HStackを使う JankenImageView(answerNumber: $answerNumber)でImageを表示 　→引数を渡す際に$をつけると別のViewに渡すことができる
58. コーディング ContentViewにそれぞれのViewを載せる 58 JankenResultLabel(answerNumber: $answerNumber)、PlayJankenButton(answerNumber: $answerNumber)で LabelとButtonを表示 　→引数を渡す際に$をつけると別のViewに渡すことができる
59. コーディング ContentViewにそれぞれのViewを載せる 59 Previewの表示 Buttonを押すと、 じゃんけん画像がImageに、 じゃんけんの手がTextに表示さ れる
60. シミュレータの起動 60 クリック
61. シミュレータの起動 61 クリックして実行 起動したい シミュレータを選択
62. 62 じゃんけんアプリ完成！！🎉🎉 お疲れ様でした！！
63. 今後の勉強方法について
64. 参考になるWebサイト ・Apple Swift Documentation（公式ドキュメント） ・Qiita（技術記事） ・Zenn（技術記事） ・Stack Overflow（技術版Yahoo!知恵袋） 64 日本語でヒットしない場合は英語で調べてみることもアリ
65. ライブラリとは？ 開発を効率化するため、作成した機能を外部でも使用可能にしたプログラム ライブラリの追加にはcocoa podsを使用 主なライブラリはawesome-iosで探そう！ アニメーション系 lottie-iosなど ネットワーク通信系 Alamofireなど 機能追加系 ARkitなど 65
66. 参考文献 Swift - Apple（日本），https://www.apple.com/jp/swift/ UIKitによるApp開発の概要 ，https://developer.apple.com/jp/documentation/uikit/about_app_development_with _uikit/ SwiftUIの概要，https://developer.apple.com/jp/xcode/swiftui/ たった2日でマスターするiPhoneアプリ開発集中講座 Xcode 11 Swift 5対応，藤治仁， 小林加奈子，小林由憲 66
67. 参考文献 Swift Documentation- Apple，https://developer.apple.com/documentation/swift Qiita，https://qiita.com/ Stack Overflow，https://ja.stackoverflow.com/ Zenn，https://zenn.dev/ 67