初心者から始める診断系アプリの作り方(5/5)

【動作環境】

Swift1.2 Xcode6.3 

【対象レベル】

超初心者

【学習内容】

全デバイスを考慮した画面表示設定

アニメーションの実装

SNS投稿(Twitter)

【再生時間】

16:24


動画の音声の書き起こし

ではこのアプリの最後の仕上げをしていきたいと思います。

まずこのアプリが、基本的にiPhon5sの画面対応で作ってきましたけど、

iPhoneでしたら、すべての画面に対応できるように作り変えていきたいと思います。


それではMain.storyboardを開いてくださいね。

このアプリを作り始める時に、一番最初にAutoLayoutという機能を

OFFにしたと思います。

AutoLayoutというものが導入される前は、

Autosizing という機能を使っていたんですけれども、

非常にシンプルですので、今回はその Autosizing の機能を使って、

画面構成の方を作っていきたいと思います。


それでは最初のタイトル画面の方から作っていきます。

まず全てのパーツを選択していきましょう。

そして、インスペクタエリアの右上のここを見てください。

Autosizingと書いてあります。


これはどういう初期設定になっているかといいますと、

画面上と画面左側の距離が一定になるようにしているんですね。

なので、画面サイズが変わっても右側のスペース、下側のスペースは可変になります。

上と左は変わらないという設定になります。


これを左側と上側の固定値設定を外してしまいましょう。

そして、すべての壁側の距離が可変するようにします。

こうすることで、丁度いい位置にこの各パーツを持ってきてくれるようになるんです。


この四角の真ん中、これは画面のサイズが変わった時に、

各オブジェクトの引き延ばしを行うかどうかということなんです。

今回は引き延ばしは行わない設定にしていきましょう。

なので、このチェックは両方とも外してしまいます。


上下ともに引き延ばしは行わない設定にします。

同様に2番目の画面に対しても同じことをやっていきます。

これで選択して壁側の距離をフリーにして引き延ばしは行わない。


3番目の画面に関してもそうです。

これで選択して、引き延ばしは行わない。

壁側の距離はフリ-にする。



これもそうですね。


これで各iOSのシミュレータでどう見えるかチェックしていきたいんですけれども、

これだけの画面を一度にチェックするのは大変ですので、

previewという機能を使って、各機種別の画面のチェックを行っていきたいと思います。


previewの方、ちょっと見ていきましょう。

画面はなるべく広くとってやります。

ここを使います。

ここの[Automatic]-[preview]を使います。


で、この画面ではiPhone4inchの画面が表示されてます。

ここにいくつか機種を追加していきたいと思います。

画面サイズを追加していきたいと思います。

この画面はiPhone5もしくは5sの画面です。

+ して3.5inchこれは4sの画面です。

こんな感じで表示していきます。

問題ないですね。


そして、4.7inch。

これは6の画面です。

問題なしですね。


はい、次。

6Plus

の画面問題なしです。


この、ここチェックして、一度に様々な画面のチェックを行うこともできます。

左側でクリックした画面のチェックができるわけです。

問題なしです。


最後の画面も。

最後の画面の6と6Plusの表示がちょっとおかしいですかね。

なんででしょう。


この文字が、片方寄りになっているんですね。

これを端っこまで伸ばして、この文字を中央寄りにすれば問題なくなるかと思います。

「例えるなら」を中央寄りにすればいいんですね。

で、ここで中央寄りにすると、正しく表示されました。


はい。ここまでOKですね。

それでは各機種別の画面対応の方はできましたので、

次に行きたいと思います。


次、アニメーションのエフェクトをやっていきたいと思います。


最後の「あなたは○%面白い」と表示されるところ。

その%の数字を上から降ってくるように設定しましょう。

ではそのためにはどうすればいいかと申しますと、

この「ResultViewController」のところに、アニメーションのロジックを

書いていきたいと思います。


このアニメーションは、画面遷移した直後にしますので、

この画面に遷移した直後に実行されるメソッド。

override func viewDidAppearの中で実装していきたいと思います。

super.viewDidAppear(true)ですね。

そしてここに、アニメーションの処理を追加していきます。

どのように書くかと言いますと、UIViewの持っているアニメーションの機能を使って

実装していきます。


その前に、scoreLabelの画面の上部の上の方に置いておきましょう。

scoreLabel.center = CGPointMake(scoreLabel.center.x, scoreLabel.center.y - 200)

これで画面が表示されたときに、このscoreLabelが画面の上部に

隠れて表示されることになりますね。

これをアニメーションしていきます。


UIView.animateWithDuration。

物理挙動を示すようなメソッドを選択していきます。

UIView.animateWithDuration(1.0, delay: 0, usingSpringWithDamping: 0.5, initialSpringVelocity: 0.5, options: UIViewAnimationOptions.CurveLinear, animations: { () -> Void in

            self.scoreLabel.center = CGPointMake(self.scoreLabel.center.x, self.scoreLabel.center.y + 200)

delayは遅延なんですけど、これは"0"にします。

パラメータは微調整していきたいと思います。

ブロックの中ではselfをつけなきゃいけないです。

これで、表示するべき位置に表示されることになります。


このアニメーションが完了したときは何もやらなくていいので、

completionはnilにしておきましょう。

これでOKですね。


では実行してみて、アニメーションが反映されるか確認してみましょう。

「すた~と」して名前を「tekuru」君にして、

適当な選択肢を選択しまして「診断する」。

で、上から落ちてくるエフェクトが出ました。

ちょっと一瞬なんだか変だった気がします。


もう一回やってみましょう。


そうですね。最初はちょっと10%というのが表示された後に、

上から降ってくるという状態になりました。

では、初期状態では隠しておきましょう。

viewDidLoadの中で、このscoreLabelはいったん隠しておきましょう。

self.scoreLabel.hidden = true

としておきましょう。

そして、viewDidAppearでこれを再表示させるというロジックにしていきましょう。

移動してからの方がいいかもしれないです。

大して変わらないと思いますけど。

self.scoreLabel.hidden = false

これで表示されます。

これで再び実行していきます。


「すた~と」して、(名前を)「tekuru」君にして、「次へ」。

適当な選択肢を選択して、「診断する」。

はい、これで正しく表示されました。


上からビヨヨ~ンと降ってくる様子が、アニメーションで表現されたことになります。

とりあえず、アニメーションはこれくらいにしまして、次行きたいと思います。


今回のアプリを作る講義の最後に、SNSの投稿を実装していきたいと思います。

まずSNSへの投稿のためのボタンを画面上に配置していきましょう。

ストーリーボードで、ここです。

ボタンをコピーして、「タイトル」を「シェア」にしましょう。

要は、twitterに投稿できるようにしていきたいと思います。

このボタンを押したら、twitterに投稿されるというロジックを組んでいきます。


まずSNSの機能を使うためには、ソーシャルフレームワークっていうのを

いれないといけないんですね。

このOwaraiShindanの「Linked Frameworks and Libraries」というところで

「SocialFramework」を検索して、いれていきましょう。

これをaddする、と。


で、ResultViewControllerの中で、これをimportしましょう。

import Social

ですね。これでOKです。

エラーも消えました。大丈夫です。


この中に先ほどのボタンを押したらtwitterに投稿するという命令を書いていきましょう。

@IBAction func twitter

というメソッドを書いていきましょう。

sender: AnyObjectで大丈夫です。

はい、ここに書いていきます。


で、twitterサービスがまず運用できるかチェックしましょう。

if SLComposeViewController.isAvailableForServiceType(SLServiceTypeTwitter)

ですね。

はい。これでOKです。


twitterが利用可能であったら、twitterに投稿してくださいという処理を書いていきます。

var controller = SLComposeViewController(forServiceType: SLServiceTypeTwitter)

ですね。

let link:String = "http://google.co.jp"

URLをいれるんですが、今日は練習ですので、GoogleのURLでもいれときましょうか。

そして、Linkをつけるときはこれを、NSURLに変換しないといけないんですね。

let url = NSURL(string: link)

ですね。

controller.addURL(url)

で、URLを追加することができます。


次に表示するべき文章です。

これは初期状態で表示されてる文章ですけども、

これにあとから変更して投稿することもできます。


let text:String = "お笑い診断!"

こんな感じで、初期状態の文章を作ることができます。

もちろん先ほどのaD/を使えば、scoreの値を載せて投稿することなんかもできますね。

で、controllerのInitialTextでこのtextを設定してやると。

controller.setInitialText(text)


で、最後にpresentViewControllerです。

これで今のcontrollerをアニメーションしながら画面上に表示してやると。

presentViewController(controller, animated: true, completion: nil)

completionは何も入れなくていいですね。

これで大丈夫です。

こんな感じでtwitterへの投稿ができるようになります。

で、ストーリーボードの方でこの今のtwitterに投稿するためのメソッドと、

「シェア」ボタンを[Touch up Inside]とかで紐付てやれば、

この「シェア」ボタンをタップしたら、

twitterへの投稿画面が表示されるようになります。


しかしながら、申し訳ないんですけれども、

今回シミュレータで動作の実施と動作の検証をしていますが、

twitterへの投稿機能はどうやらiPhoneやiPadなどの実機でないとできないようなんです。

なので、これは今の画面では示せませんので、

各自、実機の方で確認するようにしてください。


今回、何回かにわたって診断アプリの作り方を講義してきました。

このように、アプリ開発というのはちょっと難しいと思いますけど、

順を追って一つ一つ学習していけば、決して難しいことはないですし、

一度作り方を覚えてしまえば、それを応用して様々なものが作れるようになりますので、

是非皆さんも一歩一歩確実に、アプリ開発の作り方を覚えていただけたらと思います。


皆さんと一緒に作ってきたこのアプリなんですけど、

是非カスタマイズして、皆さんのアプリを作ってみて、

それをAppStoreで公開していただいたら、

すごく面白いかなと思います。


それでは以上で、おしまいになります。

1 2 3 4 5

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

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

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

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

コメントをお書きください

コメント: 2
  • #1

    Woodrow Kriner (火曜日, 31 1月 2017 22:54)


    Hey there excellent website! Does running a blog like this require a lot of work? I've no understanding of coding but I was hoping to start my own blog in the near future. Anyways, if you have any recommendations or techniques for new blog owners please share. I understand this is off topic nevertheless I just needed to ask. Kudos!

  • #2

    Tekuru Admin (火曜日, 31 1月 2017 23:27)

    To Woodrow Kriner
    Thank you for your Comment for us!

    We are using the Web site creation tool called Jimdo. We recommend that anyone can use it easily without knowledge of HTML and coding.

    If you lived in Tokyo in Japan, we can teach you the website creation together...

    If you do not want to manage your own service but just want to write a blog, we recommend Blogger, a tool that you can use with your Gmail account.
    You can easily create such a blog (there is no content at all yet our other media) without writing the code.
    https://salesforce-begin.blogspot.jp/
    http://spreadsheetapp.blogspot.jp/

    If you would like to know more, feel free and easy message please