初心者から始める音声読み上げ機能つき占いアプリの作り方(1/1)

【動作環境】

Swift3.0 Xcode8.0 

【対象レベル】

超初心者

【学習内容】

確率を設定して、占いの結果画面を切り替え、

占い結果を音声で読み上げるアプリの
開発方法をかんたんに解説しています。 


動画の音声の書き起こし



はい、それでは、今回は読み上げ機能を使って、簡単な占いアプリを作っていきたいと思

います。

 

まずプロジェクトの方を立ち上げまして、SingleView Applicationを選択します。

Next をクリックしまして、ProductName の設定を行います。

今回の ProductName は占いですので、FortuneTelling にしましょう。

チームは NONE でいいです。OrganaizationName は個人名か会社名にしましょう。666

Organaization Identifier は、会社のアドレスなどを用いると良いかなと思います。

個人のアドレスでも良いですね。個人か会社か識別できるものであれば何でも構いません。

Language は Swift、Devices は iPhone を選択しましょう。

このチェックは全て外してくださいね。で NEXT を押します。

保存場所を聞かれますので、デスクトップなどを選択して Create を選択しましょう。

新しく Project が立ち上がりました。

 

では、まず StoryBoard の方の設定を行っていきたいと思います。

Main.StoryBoard を選択しまして、画面上にいくつかものを置いていきたいと思います。

まずラベルですね、ラベルをこうおいて、コピペしまして、、失礼、ラベルを 2 つですね、

ボタンを1つ置きます。

ラベルの大きさをそれぞれ調整していきます。こんな感じになりますね。

引っ張って行ってこのような感じ、でこのラベル、引っ張って行って広げていきます。

このボタンをこのように広げていきますね。でこのラベルですが、真ん中よりにします。

そして、初期状態として適当な絵文字をいれておきます。

 

動物と変換しますね。こんな感じに入れていきましょう。

文字の大きさを、ちょっと大きめにします。200 にしますね。

ラベル、これを中央寄りにします。このラベルですけど、初期状態で、占い結果と入れ

ておきましょう。

これが、このボタンを押すと占い結果が出るボタンですね。

このボタンは次のようにします。背景色を、サーモンピンクにしますね。文字の色を白に

しておきます。

テキストカラーを白にしました。そして、表示を占うにします。

文字の大きさをちょっと大きくしておきますね。これで OK です。

 

では各オブジェクトのオートレイアウトの設定をしますね。こうですね、水平方向中央において、ピンですね、ピンの設定 Width Height を一定にして、下からの距離を一定にします。

この上のラベルは、左右からの距離を一定、画面上からの距離を一定にして高さを一定にします。

 

4つの制約ですね。この占い結果と書いてあるボタン、これは左右の距離は 0、上のオブジェクトとの距離を-5 の距離にして高さを一定にします。

これでAuto Layoutの設定は完了です。

 

では ViewController.Swift のコードの方を書いていきましょう。

こんな感じでコードのほうを書いてみます。

 

ではまずコードの上の方から説明していきますね。

まず、AVFoundation のインポートを行います。これは、音声や音声を伴うプログラムの再生に必要なフレームワークですね。AVSpeechSynthesizerDelegete を入れておきます。

3つの@、IBOutlet がついた変数の宣言を行いますね。

AnimalLabel と resultLabel、これは UILabel の型です。占いボタンは UIButton の型ですね。

 

次に、ボタンが押された時の処理を書いていきます。

Func buttonTapped@先頭に IBAction と書いて Method を作ります。

その Method の()の中にまず、AVSpeechSynthesizer の初期化を行います。

 

SpeechSynthesizer=AVSpeechSynthesizer と書いて Delegete の設定を行います。

そして初期状態でテキストを空にしておきます。

乱数を作成しますね、rand という名の変数を作ります。

 

次にこの rand の値に応じて別々の処理を Switch を使って行います。

まず SpeakingText を Case が 0 の時はこのように設定します。

0 の時は、適当な大吉であることのメッセージをSpeaking Textに入れます。

 

これは実際に読み上げを行うメッセージですね。で AnimalLabel のテキストをこのパンダの絵文字に設定して、

resultLabel のテキストを大吉にします。他の結果も同様ですね。中吉、吉、凶、大凶についてそれぞれ別の記述を行います。

 

そして、読み上げの機能、let Utterance を書いていきます。

この SpeakingText をもとに初期化します。

これに関してはVoiceの設定を行いますね。Languageを設定して、Volumeの設定をして、

Speechsynthesizer speak で、これの読み上げを行うことができます。

 

読み上げを行っている間は、ボタンを隠してやりますので、isHidden を True にしてあげます。

 AnimalLabel の Transform ですね、ちょっとだけ上の位置にしてあげましょう。

そして、ボタンをおせたタイミングで上から降ってくるような Animation をおこなってやります。

 

UIView.animate でアニメーションをおこなうことができます。

Transform で変形ですね、一旦 Y 座標を上に 300 だけ移動させたあと、元の位置に戻してやるアニメーションを行います。

 

SpeechSynthesizer の delegete method がここに実装されていますね。これは、didFinish

ですので、読み上げが完了したタイミングで呼ばれます。

 

ここで占いボタンの isHidden を False にしてあげることで、占いボタン、読み上げが完了

したら、isHidden が False になって再び表示されるようになります。

 

それでは、次に接続のほうを行っていきますね。

Main.StoryBoard にいきます。そして、ここをクリックしますね。

AnimalLabel をこれと紐づけて、ResultLabel をここと紐づけます。

そして、占いボタンをこれと紐づけます。

次にアクションですね。

ボタンタップ WithSender、これを紐づけて、

TouchUpInside にします。これで OK ですね。

 

はい、それでは実行してみます。

シミュレートのほうでは音声の再生ができませんので、

実機の方と並行してお見せしたいと思います。

今シミュレータの方が動き始めています。実機のほうでも動かしてみましょう。

 

シミュレーターの方は動きましたね。あ、シミュレーターのほうでも音が出ていますね。

こちらの方で大丈夫だと思います。

このように占うボタンを押すとランダムに結果が表示されて、

動物の絵がアニメ―ションしているのが分かりますね。

あと結果のほうは読み上げが行われています。

 

このように、今回は読み上げ機能の活用をして占いアプリのほうを作ってみました。

読み上げ機能は、今後様々なシチュエーションでの利用の仕方が考えられますので、

是非皆さんも面白いアプリを作ってみてくださいね。

 

今回は以上になります。

 

1 

Tekuruプログラミングスクールでは、

動画だけでは伝わりきらない、アプリ開発の楽しさや、

気軽に質問できる雰囲気で、プログラミングを学ぶことができます。

もっと深く、プログラミングを理解したい方は、ぜひ無料体験にお越しください。

 

どこよりも楽しく学べるアプリ開発スクールを運営しています。

フォローしてしてくれると、とてもうれしいです☆

Facebook

https://www.facebook.com/techool

 

Twitter

https://twitter.com/TekuruSchool

 

YouTubeチャンネル

https://www.youtube.com/channel/UCpQfWE0TpewbXYnGyxxBkow

 

毎週土曜日の夜に動画のアップロードをしています。

よければ、チャンネル登録お願いします!

ソースコードや、操作の仕方、などなど、

なんでも気軽にコメントください。