はじめに
こちらの記事は #Qiita夏祭り2020_パソナテック への応募記事になります。
LGTM上位の記事に豪華なプレゼントがもらえるそうなので、ぜひこの記事を読んでLooks Goodだと思っていただけたらLGTMお願いします！
ニューモーフィズムとは
ニューモーフィズム(Neumorphism)とは背景から要素が押し出されていたり、凹んでいるように見えるスタイルのデザインのことを言います。
2020 年初頭から流行り始めているそうです。
カッコいいですね🥺
一目惚れした僕はニューモーフィズムで何かアプリを作ることにしました。 DDD(デザイン駆動開発)です(そんな言葉はありません)。
題材はAI寝言録音アプリです。
睡眠中の音声に音声認識をかけることで寝言だけを録音しちゃおうというアプリです。
自分は寝言がとても面白いらしく、自分でもぜひ聞いてみたくなり、世に出回っている寝言録音アプリを使ってみました。しかし寝返りの音といびきの音ばかりが録音されていて寝言を探すのが大変だったので、音声認識を噛ませることで寝言だけを録音できるのではないかと思いました。
ニューモーフィズムを作る
ニューモーフィズムのデザインの方法を学ぶために、まずはKeynote(Mac純正のパワポ)を使ってアプリアイコンを作ってみたいと思います。
1. ベースカラーを決める
ベースカラーは#C4D2E9にします。
背景色をベースカラーで染めます。
2. ２つの影のカラーを決める
ベースカラーの輝度を変更して「明るい影」と「暗い影」を決めます。
こちらのオンラインツールを使ってベースカラーの明るい影と暗い影のカラーコードを作成しました。
明るい影: #ECF0F7
暗い影: #0E1624
3. オブジェクトを置く
押し出したい(もしくは凹ませたい)オブジェクトを置きます。
今回は寝言っぽく吹き出しにしてみました。
4. 右下に暗い影を落としたオブジェクトを作ります
枠線は消して、右下に先ほど決めた暗い影(#0E1624)を落とします。
5. 左上に明るい影を落としたオブジェクトを作ります
同様に、枠線を消して左上に先ほど決めた明るい影(#0E1624)を落とします。
6. 二つのオブジェクトを重ねます
５、６で作った二つのオブジェクトをぴったりと重ねます。
すると、オオ・・・浮かび上がった・・・
7. 最後に仕上げをしてアイコン完成
ZZZと文字を上に置いただけですが、これでアイコン完成です。
Swiftでニューモーフィズムのアプリを作る
さてアイコンもできたので、みなさんお待ちかね、Swiftでニューモーフィズムを実装していきましょう！！
早速僕は「Swift ニューモーフィズム github」で検索しました。
そして見つけました！！偉大な先人のライブラリ！！
https://github.com/hirokimu/EMTNeumorphicView
ニューモーフィズムなUIViewを提供してくれる最高のライブラリです。
え？フルスクラッチで実装しないのかって？しません。
AIの寝言録音機能を実装する
swiftにはSiriと同じ音声認識機能を使えるSFSpeechRecognizerがあります。
こちらを使って音声認識を行います。
いびきや物音に音声認識を当てるとエラーになるため、これを利用して寝言だけを識別することにします。
録画画面
EMTNeumorphicViewを使ってボタンを配置していきます。
凹んだボタンが可愛いですね。
再生画面
録音した音声に音声認識をかけて寝言らしき音だけを音声認識結果とともに表示します。
リストにしてもうるさくありません。
ソースコード公開します
技術的に面白いことはやっていないので今回はソースコードを公開するだけに留めます・・・
コードレビューしてくれる人歓迎！🙇♂️
https://github.com/KitaharaMugiro/NegotoRecorder
「AI寝言レコーダー」 AppStoreで配信中！
ついでにAppStoreにリリースもしました。250円です(無料なものなどない)。
バージョンアップも予定しています。
https://apps.apple.com/jp/app/id1521147935