たった数行のコードで作成できる iOS 14 の新たなフレームワークの機能

- App Store アプリの概要カードをフロート表示する
- UIBarButtonItem にフローティングメニューを表示
- UIButton にフローティングメニューを表示
- インラインの日付ピッカーを表示
- コンパクト日付ピッカーを表示する
- カラーピッカーを表示する
- ゲームセンター用のフローティングウィンドウを表示 (Game Center)

## App Store アプリの概要カードをフロート表示する

アプリ内で他のApp Storeアプリをおすすめしたい場合、5行のコードで簡単にアプリの概要カードを表示することができます。

<img width="390" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/2d774523-f33f-0e4a-7c00-62c02a8eae5b.jpeg">

```swift
if let scene = view.window?.windowScene {
    let config = SKOverlay.AppConfiguration(appIdentifier: "1494658162", position: .bottom) //App Store アプリのApple ID
    let overlay = SKOverlay(configuration: config)
    overlay.present(in: scene)
}
```

## UIBarButtonItem にフローティングメニューを表示

`UIAlertController` を表示する代わりに、フローティングメニューを表示できます

<img width="390" alt="navBar.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/d0ba74ec-5417-a722-fb08-7f02f60a3c81.png">

```swift
let addCat = UIAction(title: "猫を追加", image: UIImage(systemName: "plus")) { (action) in
    print("猫を追加")
}
let shareButton = UIAction(title: "リストを共有", image: UIImage(systemName: "paperplane")) { (action) in
    print("リストを共有")
}
let menu = UIMenu(title: "", children: [addCat, shareButton])
let menuBarItem = UIBarButtonItem(image: UIImage(systemName: "square.and.arrow.up"), menu: menu)
navigationItem.rightBarButtonItem = menuBarItem
```

## UIButton にフローティングメニューを表示

<img width="390" alt="navBar.png" src="https://mszmagic.s3-ap-northeast-1.amazonaws.com/qiita_article_UIButtonImage-20200714.png">

```swift
@IBOutlet weak var button: UIButton!

func addMenuToButton(){
    let addCat = UIAction(title: "猫を追加", image: UIImage(systemName: "plus")) { (action) in
        print("猫を追加")
    }
    let shareButton = UIAction(title: "リストを共有", image: UIImage(systemName: "paperplane")) { (action) in
        print("リストを共有")
    }
    let menu = UIMenu(title: "", image: nil, identifier: nil, options: .displayInline, children: [addCat, shareButton])
    button.menu = menu
    button.showsMenuAsPrimaryAction = true
}
```

## インラインの日付ピッカーを表示

こちらが古い日付ピッカーです
<img width="350" alt="oldDatePicker" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/60e47627-7b3f-96c3-befd-b9089c502bb5.png">

こちらが新しい日付ピッカーです

<img width="350" alt="newDatePicker.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/1fc5772f-ab91-db92-cbd7-a0ee896795b9.png">

コード内で日付ピッカーのスタイルを変更することもできます

```swift
@IBOutlet weak var datePicker: UIDatePicker!
datePicker.preferredDatePickerStyle = .inline
```

## コンパクト日付ピッカーを表示する

コンパクト日付ピッカーは、デフォルトで日付と時刻のラベルのみを表示します。ユーザーはクリックすると日付/時刻の選択を編集できます。

<img width="350" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/b3676924-78b8-36e5-55f5-01c4b4a64d18.gif">

```swift
@IBOutlet weak var datePicker: UIDatePicker!
datePicker.preferredDatePickerStyle = .compact
```

## カラーピッカーを表示する

<img width="350" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/443be4ce-db66-ba51-52d9-9e7528e4c0d0.png">

```swift
func showColorPicker(){
    let colorPicker = UIColorPickerViewController()
    colorPicker.delegate = self
    self.present(colorPicker, animated: true, completion: nil)
}
```

ここではユーザーが選んだ色が分かります。

```swift
extension ViewController: UIColorPickerViewControllerDelegate {
    
    func colorPickerViewControllerDidSelectColor(_ viewController: UIColorPickerViewController) {
        print("Selected color: \(viewController.selectedColor)")
    }
    
    func colorPickerViewControllerDidFinish(_ viewController: UIColorPickerViewController) {
        print("Color picker has been closed")
    }
    
}
```

## ゲームセンター用のフローティングウィンドウを表示

あなたのアプリやゲームがすでにゲームセンター (Game Center) 機能を使用している場合は、プレイヤーがクリックして自分の達成状況を閲覧できるフローティングウィンドウを追加することができます。

<img width="350" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/4e3c4688-83e6-3bc1-acfc-025bcfc9d1ea.jpeg">


```swift
if let window = view.window {
    GKAccessPoint.shared.isActive = true
    GKAccessPoint.shared.location = .bottomTrailing
    GKAccessPoint.shared.parentWindow = window
}
```

<img width="350" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/06a96862-c1ba-97be-205c-540aeaacbba9.png">

フローティングGame Centerウィンドウを表示するためには、プレイヤーを認証する必要があります：

```swift
GKLocalPlayer.local.authenticateHandler = { vc, error in
    if let authVC = vc {
        self.present(authVC, animated: true, completion: nil)
    }
}
```

また、`App Store Connect` 内でGame Center機能を有効化し、フローティングGame Centerウィンドウを表示する前に少なくとも1つのゲーム達成項目を追加する必要があります。

### より多くの面白い iOS 機能を見つけ次第、この記事の更新を続けていきます。 アップデートについては、 (Qiita & Twitter) でフォローをお願いします。

---

:relaxed: [Twitter @MszPro](https://twitter.com/MszPro)

:sunny: [私の公開されているQiita記事のリストをカテゴリー別にご覧いただけます。](http://mszpro.com/ioskiji/)
<img width="150" src="https://cdn.mszmagic.com/static-web-content/AppClipImage_small.png">