Swiftで今「ニューモーフィズム」のアプリを作るなら

**はじめに**
こちらの記事は [#Qiita夏祭り2020_パソナテック](https://qiita.com/official-events/5d181aadf5db26b73d33) への応募記事になります。
LGTM上位の記事に豪華なプレゼントがもらえるそうなので、ぜひこの記事を読んでLooks Goodだと思っていただけたらLGTMお願いします！

# ニューモーフィズムとは

![ニューモフィズム](https://webdesign-trends.net/wp/wp-content/uploads/2020/05/Freebie-Neumorphic-UX-UI-Elements-1024x768.png)

**ニューモーフィズム(Neumorphism)**とは背景から要素が押し出されていたり、凹んでいるように見えるスタイルのデザインのことを言います。
2020 年初頭から流行り始めているそうです。

**カッコいいですね🥺**
一目惚れした僕はニューモーフィズムで何かアプリを作ることにしました。 DDD(デザイン駆動開発)です(そんな言葉はありません)。

題材は**AI寝言録音アプリ**です。
睡眠中の音声に音声認識をかけることで**寝言だけを録音しちゃおうというアプリ**です。
自分は寝言がとても面白いらしく、自分でもぜひ聞いてみたくなり、世に出回っている寝言録音アプリを使ってみました。しかし寝返りの音といびきの音ばかりが録音されていて寝言を探すのが大変だったので、音声認識を噛ませることで寝言だけを録音できるのではないかと思いました。

# ニューモーフィズムを作る
ニューモーフィズムのデザインの方法を学ぶために、まずはKeynote(Mac純正のパワポ)を使ってアプリアイコンを作ってみたいと思います。

## 1. ベースカラーを決める
ベースカラーは**#C4D2E9**にします。
背景色をベースカラーで染めます。

![アイコン作成イメージ.001.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234396/7912ecb5-984e-fe6d-d3bf-b22511604afe.jpeg)

## 2. ２つの影のカラーを決める
ベースカラーの輝度を変更して「明るい影」と「暗い影」を決めます。
[こちら](https://www.peko-step.com/tool/colightness.html)のオンラインツールを使ってベースカラーの明るい影と暗い影のカラーコードを作成しました。

明るい影: **#ECF0F7**
暗い影: **#0E1624**

## 3. オブジェクトを置く
押し出したい(もしくは凹ませたい)オブジェクトを置きます。
今回は寝言っぽく吹き出しにしてみました。

![アイコン作成イメージ.002.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234396/d2b78495-0378-fd68-9aa4-fd72a98f28d1.jpeg)


## 4. 右下に暗い影を落としたオブジェクトを作ります
枠線は消して、**右下に先ほど決めた暗い影(#0E1624)を落とします**。
![アイコン作成イメージ.003.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234396/87b6e62c-52f3-c78f-63bb-21594b78bb53.jpeg)

## 5. 左上に明るい影を落としたオブジェクトを作ります
同様に、枠線を消して**左上に先ほど決めた明るい影(#0E1624)を落とします**。

![アイコン作成イメージ.004.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234396/67bb1efa-00bd-3093-7eeb-c149fd5e2029.jpeg)

## 6. 二つのオブジェクトを重ねます
５、６で作った二つのオブジェクトをぴったりと重ねます。
すると、**オオ・・・浮かび上がった・・・**

![アイコン作成イメージ.005.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234396/a621c9f3-8cfd-67c5-6cdf-1711c236af79.jpeg)

## 7. 最後に仕上げをしてアイコン完成
ZZZと文字を上に置いただけですが、これでアイコン完成です。

![アイコン作成イメージ.006.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234396/7d3bb9a5-6556-b7e4-7375-c61a53ed108f.jpeg)

# Swiftでニューモーフィズムのアプリを作る
さてアイコンもできたので、みなさんお待ちかね、**Swiftでニューモーフィズムを実装**していきましょう！！

早速僕は**「Swift ニューモーフィズム github」**で検索しました。
そして見つけました！！偉大な先人のライブラリ！！
https://github.com/hirokimu/EMTNeumorphicView

ニューモーフィズムなUIViewを提供してくれる最高のライブラリです。
え？フルスクラッチで実装しないのかって？**しません。**

# AIの寝言録音機能を実装する
swiftにはSiriと同じ音声認識機能を使える[SFSpeechRecognizer](https://developer.apple.com/documentation/speech/sfspeechrecognizer)があります。
こちらを使って音声認識を行います。
**いびきや物音に音声認識を当てるとエラーになるため、これを利用して寝言だけを識別することにします。**

# 録画画面
EMTNeumorphicViewを使ってボタンを配置していきます。
凹んだボタンが可愛いですね。
<img width="414" alt="5.5インチスクショ.002.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234396/317b80b0-aac2-29d7-27ee-8d5d55affa5c.jpeg">


# 再生画面
録音した音声に音声認識をかけて寝言らしき音だけを音声認識結果とともに表示します。
リストにしてもうるさくありません。
<img width="414" alt="5.5インチスクショ.001.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234396/4a0b91af-9d6e-5cfa-38d6-fd5c9fc047c7.jpeg">


# ソースコード公開します
技術的に面白いことはやっていないので今回はソースコードを公開するだけに留めます・・・
コードレビューしてくれる人歓迎！🙇‍♂️
https://github.com/KitaharaMugiro/NegotoRecorder

# 「AI寝言レコーダー」 AppStoreで配信中！
ついでにAppStoreにリリースもしました。250円です(無料なものなどない)。
バージョンアップも予定しています。
https://apps.apple.com/jp/app/id1521147935