AV Foundation × Core MotionでiPhoneを“楽器”にしよう

Slide 1

Slide 1 text

AV Foundation × Core Motion で iPhoneの楽器アプリを作ろう iPhoneを“楽器”にしよう非エンジニアでもできるっ！初心者枠 

Slide 2

Slide 2 text

■Name : 　木下雄策(30歳・福岡出身) @afroscript10 ■Career : 　九州大学大学院　宇宙の研究　2013年 ~　Leverages（Levtech→teratail）　2019年 ~　Mecari ■Work : 　日本発のグローバルテックカンパニーをつくる！　　→ Mercari Engineering Gateway ■Others : 　・Gs'ACADEMY2期生/WebGLスクール3期生　・Engineering Onboarding Meetup / Swift愛好会 / Kotlin愛好会の運営　・Like：スノボ、バスケ、宇宙、 Three.js 自己紹介

Slide 3

Slide 3 text

Background なぜつくったか？ ~僕とSwift~

Slide 4

Slide 4 text

Background ・ Swift 愛好会の運営：　　立ち上げからもう 3 年半くらいやってるな〜

Slide 5

Slide 5 text

Background ・ Swift 愛好会の運営：　　立ち上げからもう 3 年半くらいやってるな〜・ try! Swift 2019 ：　　 Organizer に加え、司会までやらせてもらったな〜

Slide 6

Slide 6 text

Background ・ Swift 愛好会の運営：　　立ち上げからもう 3 年半くらいやってるな〜・ try! Swift 2019 ：　　 Organizer に加え、司会までやらせてもらったな〜・でも僕、実は Swift ほぼ書けないんだけどな〜

Slide 7

Slide 7 text

「いや、それまずくないか？」

Slide 8

Slide 8 text

と、ようやく思い始めてきた

Slide 9

Slide 9 text

というか、Swift書けたら、もっとtry! Swiftも楽しいだろうな〜というのが正直なところ。

Slide 10

Slide 10 text

あと、エンジニアでない僕が談義することで、 Swift愛好会の談義は、どんなレベルの発表でもいいんですよ！っていうのを改めて発信していきたい気持ちもあるエンジニアじゃなくても発表していいんだよ！

Slide 11

Slide 11 text

Ideation さて、何つくろう？

Slide 12

Slide 12 text

Ideation ・でも何つくろうかな〜、作りたいものないんだよな〜

Slide 13

Slide 13 text

Ideation ・でも何つくろうかな〜、作りたいものないんだよな〜・ Three.js とか WebAudio で 3D や音を扱ったものをつくるのが好きだけどな〜　→楽器アプリとか？

Slide 14

Slide 14 text

Ideation ・でも何つくろうかな〜、作りたいものないんだよな〜・ Three.js とか WebAudio で 3D や音を扱ったものをつくるのが好きだけどな〜　→楽器アプリとか？・でもすでにいっぱいあるしな〜

Slide 15

Slide 15 text

そうだ！「楽器アプリ」じゃなくて、 iPhoneを「楽器」そのものにしよう！

Slide 16

Slide 16 text

ということで作ってみた。

Slide 17

Slide 17 text

Demo

Slide 18

Slide 18 text

(当然&普通だけど) ボタンを押すと音が出る左右に傾くとビューンって音が出る上下に降るとスクラッチ音

Slide 19

Slide 19 text

How to develop ※初心者目線での解説になります

Slide 20

Slide 20 text

How to develop 再入門する

Slide 21

Slide 21 text

How to develop: 再入門する・ GW を使って、まずは 1 冊読んだ・ 655 ページ。。。。心折れる。。。

Slide 22

Slide 22 text

How to develop: 再入門する・ GW を使って、まずは 1 冊読んだ・ 655 ページ。。。。心折れる。。。・ iPhone って機能めちゃくちゃ多い！！　なので、全部読む必要ないじゃん

Slide 23

Slide 23 text

How to develop: 再入門する・ GW を使って、まずは 1 冊読んだ・ 655 ページ。。。。心折れる。。。・ iPhone って機能めちゃくちゃ多い！！　なので、全部読む必要ないじゃん　→ Swift の文法だけちゃんと読んで、　　あとはこんな機能を使えるんだ〜　　くらいで流し読みすることにした

Slide 24

Slide 24 text

Slide 25

Slide 25 text

How to develop 音を鳴らす

Slide 26

Slide 26 text

How to develop: 音を鳴らす・ Xcode に音源を取り込む（ドラッグ & ドロップで OK ）・音を扱うフレームワーク「 AV Foundation 」を import ・ AVAudioPlayer のインスタンスを用意・音源ファイル再生の下準備・音源再生 ※参考記事： https://picolica.com/2017/02/25/swift3-play-sound/

Slide 27

Slide 27 text

How to develop: 音を鳴らす・ Xcode に音源を取り込む（ドラッグ & ドロップで OK ） ※参考記事： https://picolica.com/2017/02/25/swift3-play-sound/

Slide 28

Slide 28 text

How to develop: 音を鳴らす・音を扱うフレームワーク「 AV Foundation 」を import ※参考記事： https://picolica.com/2017/02/25/swift3-play-sound/

Slide 29

Slide 29 text

How to develop: 音を鳴らす・ AVAudioPlayer のインスタンスを用意 ※参考記事： https://picolica.com/2017/02/25/swift3-play-sound/

Slide 30

Slide 30 text

How to develop: 音を鳴らす・音源ファイル再生の下準備はこんな感じ ※参考記事： https://picolica.com/2017/02/25/swift3-play-sound/

Slide 31

Slide 31 text

How to develop: 音を鳴らす・音声ファイルのパスを生成 ※参考記事： https://picolica.com/2017/02/25/swift3-play-sound/

Slide 32

Slide 32 text

How to develop: 音を鳴らす・さっき用意した audioPlayer のインスタンスを生成 ※参考記事： https://picolica.com/2017/02/25/swift3-play-sound/

Slide 33

Slide 33 text

How to develop: 音を鳴らす・音源をいつでも再生できるように準備 ※参考記事： https://picolica.com/2017/02/25/swift3-play-sound/

Slide 34

Slide 34 text

How to develop: 音を鳴らす・音源を再生する ※参考記事： https://picolica.com/2017/02/25/swift3-play-sound/

Slide 35

Slide 35 text

How to develop: 音を鳴らす・再生開始位置を 0 秒にして、 ※参考記事： https://picolica.com/2017/02/25/swift3-play-sound/

Slide 36

Slide 36 text

How to develop: 音を鳴らす・再生 ※参考記事： https://picolica.com/2017/02/25/swift3-play-sound/

Slide 37

Slide 37 text

How to develop: 音を鳴らす・あとは、 Button 押したときなどで関数呼べば OK ※参考記事： https://picolica.com/2017/02/25/swift3-play-sound/

Slide 38

Slide 38 text

How to develop モーションセンサーを使う

Slide 39

Slide 39 text

How to develop: モーションセンサーを使う・フレームワーク「 Core Motion 」を import ・モーションマネージャーを作成・モーションセンサーをスタート

Slide 40

Slide 40 text

How to develop: モーションセンサーを使う・フレームワーク「 Core Motion 」を import ※書籍の通りに書いただけ

Slide 41

Slide 41 text

How to develop: モーションセンサーを使う・モーションマネージャーを作成 ※書籍の通りに書いただけ

Slide 42

Slide 42 text

How to develop: モーションセンサーを使う・モーションセンサーをスタート（ここよく分かんない笑。） ※書籍の通りに書いただけ

Slide 43

Slide 43 text

How to develop: モーションセンサーを使う・ motionAnimation 関数内で、　音源再生関数を実行する・回転角速度や加速度が一定数時を　越えたときに音源再生するようにする・そのラインは何度も調整 ※書籍の通りに書いただけ

Slide 44

Slide 44 text

How to develop: その他のTips ・ボタン素材とかどうすんねん　→　これ便利だった　 https://www.draw.io/ 　・楽器音は？　→　ここからお借りしました　 https://maoudamashii.jokersounds.com/core.cgi?page=1&ﬁeld= 効果音素材 <> 楽器・効果音は？　→　ここからお借りしました　 https://soundeﬀect-lab.info/sound/anime/

Slide 45

Slide 45 text

コードはこちら↓ http://afroscript.hatenablog.jp/entry/2019/06/26/201453

Slide 46

Slide 46 text

Next Step ・モーション増やしたい・モーションの on/oﬀ できるようにしたい・ボタンとモーションでそれぞれ好きに音を設定できるようにしたい・録音して、音重ねられるようにしたい・パフォーマンスの 1 つの分野になるとおもしろそうだなー　→ iPhone 持ってダンスとか？動きに合わせて音がなる的な。