[WIP] WWDC2021のCoding & Designチャレンジをしながらの学びメモ

ZennのScrapで書き進めることにしてみました
https://zenn.dev/touyou/scraps/43907e53099154

## この記事の注意点

- 学んだことをアウトプットするというより備忘録的要素強めのメモになります
- スクリーンショットや動画など、WWDCには開発者としてのNDAがつきものですが、この記事はあくまで全員が見れる情報に関してのみの記述になります
- また今回のWWDCのCoding & Designチャレンジには公式に[#WWDC21Challenges](https://twitter.com/search?q=%23WWDC21Challenges&src=typeahead_click&f=live)というハッシュタグが用意されています。そのため、このハッシュタグにて公開されているキャプチャと同等レベルであればNDAには抵触しないとみなします。
- WWDC2021にはたくさんのチャレンジが用意されていますが、今回は独断と偏見でそのうちの一部にだけ挑戦しています。その他のチャレンジが気になる方はぜひWWDC公式サイトなどから見てみてください。
- かなりボリューミーになることが予想されるためWIPをつけている間は複数回に分けて更新していきます。

## 挑戦したチャレンジ

全チャレンジは[こちら](https://developer.apple.com/wwdc21/challenges/)
サイトはアルファベット順になっていますが、今回はDeveloperアプリの順番でやっていきます。

- [Build an app that recognizes custom audio through ShazamKit](https://developer.apple.com/news/?id=ysmtgo6k)
- [Create your first 3D model with Object Capture](https://developer.apple.com/news/?id=36zqi3km)
- [Animated artistry in SwiftUI](https://developer.apple.com/news/?id=f0g7lam0)
- [Throwback with SwiftUI](https://developer.apple.com/news/?id=5qbbn6ut)
- [Framework Freestyle](https://developer.apple.com/news/?id=zpb2xcfr)
- [Memgraph capture the flag](https://developer.apple.com/news/?id=keebiiyl)
- [Focus on Focus in SwiftUI](https://developer.apple.com/news/?id=yudyoi9z)
- [Prototype with SwiftUI](https://developer.apple.com/news/?id=zgtznbbc)

## [Build an app that recognizes custom audio through ShazamKit](https://developer.apple.com/news/?id=ysmtgo6k)

- [ShazamKit](https://developer.apple.com/documentation/shazamkit) ... Shazamのカタログやカスタムカタログで音楽聞き取りができる
- Signatureというものを音から抽出してそのマッチングを行う
- SHSession, SHSignatureGenerator
- Delegateでマッチしたかどうかの結果を受け取る
- SHMediaLibraryを使ってShazamライブラリに追加できる
- AppleMusicとの連携をしたければMusicKitを使う
- [サンプルコード](https://developer.apple.com/documentation/shazamkit/building_a_custom_catalog_and_matching_audio)
- SHSignatureGeneratorにバッファーを渡すと音声がsignatureになる
- Part1からPart3まであるのに違いがない...これはなんだ...そしてiPadだけ対応のサンプルだった...
- ビデオの特定の音声をsignature化しておくことで音声に合わせてクイズを出題するアプリが作れる
- SwiftUI的なフォルダ構成はApp/Data/Extensions/Resources/Views
- シミュレータでも実行可能
- 任意の状態から音でアプリの状態を変えることができる、Shazamってそういう技術だけど応用例があるとすごい

### 実際に使えそうなシチュエーション
自分でやるのはデータを用意するのが必要だし時間かかるなと思ったのでアイデア出しだけ

- サンプルのような教材動画の副教材アプリ
- 脱出ゲームのギミック（部屋を進んでいくと流れている音声が変わる→制限時間の同期や音楽を使った謎など）
- インタラクティブ広告（アプリを触っている最中、特定の場所にいくとそこの音で広告がポップアップする→自然とそのお店に入ってみようかなという動機付けに使えるのでは？）

## [Create your first 3D model with Object Capture](https://developer.apple.com/news/?id=36zqi3km)

- [サンプルアプリ](https://developer.apple.com/documentation/realitykit/taking_pictures_for_3d_object_capture)
- こっちは全部ベタ書きだな
- 3Dモデルを作るにはmacOSも必要らしい
- iOS: PhotogrammetrySession(Image Depth Gravityほか)→Connect output stream
- RealityKitで扱う
- Model File(URL), ModelEntity, BoundingBox(RealityKit)
- 椅子にGameSir T4Proを置いて撮ってみた、HEIC, TXT, TIFファイルで構成されるみたい、iPhoneのドキュメントから確認できる
- 3Dモデル化はMonteleyが必要らしいので用意できたらやります

## [Animated artistry in SwiftUI](https://developer.apple.com/news/?id=f0g7lam0)

- ignoresSafeArea(edges:)
- .background(.regularMaterial), .thinMaterial
- .foregroundStyle(.secondary)
- .safeAreaInset(edge: .bottom)
- GeometryReader, drawingGroup()
- withAnimation
- Canvas { context, size in }
- Canvasのかきごこち、だいぶp5とかに近そう
- context.fillとかある
- CanvasをTimelineViewで囲ってあげるとアニメーションもできそう
- .accessibilityLabelもつけてあげる大事さ

やってみたものはこちら
![ezgif-3-88833e2b1433.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/10943/d311b78c-d17b-afd7-693b-5d2d1a116aa1.gif)
慣れは必要だけど感覚としてはProcessing的な書き方をSwiftでもできるようになったという感じ

## [Throwback with SwiftUI](https://developer.apple.com/news/?id=5qbbn6ut)

指示通り乱数くじ引きをしたところ1989年のUIを再現することに（生まれてない...笑）
ref: https://www.youtube.com/watch?v=IfxTRyrEUvo
1989年はMachintosh Portableの発売年、ノートパソコンの走りのようなものだったのかな

（特に参照セッションがないので時間ができた時に作って追記します）

## [Framework Freestyle](https://developer.apple.com/news/?id=zpb2xcfr)

サンプルから100行以内のコードと新しいフレームワークを組み合わせて何かを作ってあげるチャレンジ

（こちらも参照セッションがないので時間ができた時に作って追記します）

## [Memgraph capture the flag](https://developer.apple.com/news/?id=keebiiyl)

慣れない分野のせいでめっちゃ雑メモです。検索かかってしまったら申し訳ないです...

- symbolication
- atosツール
- デバッグしたときに原因を特定しやすくする
- dSYM
- translate runtime addresses to file addresses
- Linkerの挙動理解な
- Headerと __TEXTと __DATA
- otool -lとgrepを使う
- ASLR slide, S=L-A
- vmmapツール
- -tVオプション
- atosの-oと-lオプション
- あんまりわかってないけど途中のまとめ
    - App binaries and frameworks are Mach-O files
    - Kernel adds ASLR slide to determine load address
    - ASLR slide equation
- DWARFはいろんな情報を含められる
- symbols -onlyFuncStartsData
- nmコマンド
- Stripビルドセッティング