161
110

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-07-02

はじめに
こちらの記事は #Qiita夏祭り2020_パソナテック への応募記事になります。
LGTM上位の記事に豪華なプレゼントがもらえるそうなので、ぜひこの記事を読んでLooks Goodだと思っていただけたらLGTMお願いします!

ニューモーフィズムとは

ニューモフィズム

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

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

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

ニューモーフィズムを作る

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

1. ベースカラーを決める

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

アイコン作成イメージ.001.jpeg

2. 2つの影のカラーを決める

ベースカラーの輝度を変更して「明るい影」と「暗い影」を決めます。
こちらのオンラインツールを使ってベースカラーの明るい影と暗い影のカラーコードを作成しました。

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

3. オブジェクトを置く

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

アイコン作成イメージ.002.jpeg

4. 右下に暗い影を落としたオブジェクトを作ります

枠線は消して、右下に先ほど決めた暗い影(#0E1624)を落とします
アイコン作成イメージ.003.jpeg

5. 左上に明るい影を落としたオブジェクトを作ります

同様に、枠線を消して左上に先ほど決めた明るい影(#0E1624)を落とします

アイコン作成イメージ.004.jpeg

6. 二つのオブジェクトを重ねます

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

アイコン作成イメージ.005.jpeg

7. 最後に仕上げをしてアイコン完成

ZZZと文字を上に置いただけですが、これでアイコン完成です。

アイコン作成イメージ.006.jpeg

Swiftでニューモーフィズムのアプリを作る

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

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

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

AIの寝言録音機能を実装する

swiftにはSiriと同じ音声認識機能を使えるSFSpeechRecognizerがあります。
こちらを使って音声認識を行います。
いびきや物音に音声認識を当てるとエラーになるため、これを利用して寝言だけを識別することにします。

録画画面

EMTNeumorphicViewを使ってボタンを配置していきます。
凹んだボタンが可愛いですね。
5.5インチスクショ.002.jpeg

再生画面

録音した音声に音声認識をかけて寝言らしき音だけを音声認識結果とともに表示します。
リストにしてもうるさくありません。
5.5インチスクショ.001.jpeg

ソースコード公開します

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

「AI寝言レコーダー」 AppStoreで配信中!

ついでにAppStoreにリリースもしました。250円です(無料なものなどない)。
バージョンアップも予定しています。
https://apps.apple.com/jp/app/id1521147935

161
110
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
161
110

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?