シュールだと感じたり型破りなアプリを使ったのはいつですか？モダンなアプリはフラットでシンプルになり、魅力的なアプリはとても少なくなりました。try! Swiftの講演で、Swiftでのプロトタイピングやインタラクティブなジェスチャとアニメーションを作る方法を追究します。失われた魔法のような感覚を取り戻しましょう。

はじめに (0:00)

Adam Bellです。カナダ人のiOSエンジニアで、今はFacebookでiOSアプリを担当しています。iPhoneの初期からずっとiOSコミュニティで活動しています。長い間、Facebookアプリの「Chat Heads」をハックしてどこでも使えるMessageBox、パスワードの代わりにジェスチャでiPhoneのロックを解除するStrideをリリースしています。

初期 (2:27)

iPadが初めて発売されたとき、iPad自身とそのアニメーションやインタラクションにとても興味を持ちました。

覚えていますか。iBooksアプリではページをめくり上げるように切り替えていました。写真アプリではアルバムをピンチインしてのぞき込むことができました。まるで実際のアルバムのように写真を操作できました。

メールアプリでは、アニメーションやインタラクションを通じて大量のメールの中で個々の状況を把握できました。これらのインタラクションは特別なものでした。

初期 (4:07)

iOS 7では一貫性に重点が置かれました。iOSの部品は同じような動きになって多くのすばらしいものがなくなりました。インタラクションは機械的でアニメーションが少なくなりました。ジェスチャが少なくなってさらにアプリの魅力がなくなりました。

たとえばPassbookはパスを削除するときシュレッダーにかけたようにパスがなくなったことがはっきりわかりました。iOS 7ではただパスが消えるだけになりました。

iPadのTwitterアプリを覚えていますか。ストリームとペインがありました。タップしたりスワイプしたりして、何が起きているのかがすぐにわかるナビゲーションがありました。2か月前に登場したiPad ProではiPhoneアプリが横に広がっただけになりました。Androidのようです。

スキューモーフィズム (6:55)

スキューモーフィズムとインタラクションは大きく違います。アニメーションはもっと違います。

スキューモーフィズムは現実のものにより近い表現をすることです。しかしインタラクションはもの同士の相互作用です。したがってスキューモーフィズムはインタラクションではありません。それぞれまったく別のものです。たとえばスキューモーフィズムは写真を切り抜いてアプリをスクラップブックのように見せることです。インタラクションでユーザをどう導くか次第で楽しいアプリを作れます。

アニメーションさせる理由 (8:01)

アニメーションはインタラクションの重要な要素です。前後のインタラクションの差を埋めるものです。文書やメディアのフォームを開いたときは、ズームインしてどこを開いたかわかるようにするとよいでしょう。文書を閉じるときは元の位置に戻すとよいでしょう。

見やすいようにするだけでなく何が起こっているかがすぐにわかるよう、ナビゲーションを階層化します。アニメーションで関心を引いたり起きていることをわかりやすく示します。アニメーション自体が目的ではありません。

遅いアニメーション (12:10)

アニメーションが遅いと感じる原因は何でしょうか。コマ落ちしているのでしょうか。iPhoneが遅いのでしょうか。

Core Animation

Core Animationはコマ落ちしないよう設計されています。すべてのアニメーションは優先度が高い「CARenderServer」で実行されるので軽快に動きます。非常識なほど最適化されていないコードでない限り遅いことはありません。

iOSのCore Animationは技術的に遅いわけではなく、そう感じる理由が別にあります。アニメーションの時間が長すぎて待ちきれないのです。ユーザはアプリを削除しようとするでしょう。

難しいアニメーション作り (15:23)

アニメーション作りはたいてい難しいと思われています。しかしとてもやりがいがあります。よいアニメーションやダイナミックなインタラクションはアプリを際立たせます。すばらしいものを作るためには難しいことにチャレンジしましょう。みなさんは頭がよいエンジニアです。

すばらしいものを作るためにはチャレンジしましょう。みなさんは頭がよいエンジニアです。

難しいからといって何かで埋めあわせたり簡単な方法を考えてはいけません。繰り返して確かな解決策を理解してください。繰り返すほうがよいです。

プロトタイピングツール (16:53)

みなさんがご存知のツールです。

• Origami
• Quartz Composer
• Form
• Framer

Xcodeはプロトタイピングに不向きでした。毎回ビルドして実行する必要があるからです。しかしSwiftとXcode Playgroundsを使えばプロトタイピングがすばらしいものになります。Xcode Playgroundsはリアルタイムでコンパイルして実行し動的に更新されるので、繰り返し実行するのに向いています。

ツールはタップやパンジェスチャリコグナイザのようなタッチイベントをサポートしています。すばらしい機能ですが設定に時間がかかります。

let tapGestureRecognizer = UITapGestureRecognizer(self, selector:Selector("doTheThing:"))
aView.addGestureRecognizer(tapGestureRecognizer)
@objc private func doTheThing(tapGestureRecognizer: UITapGestureRecognizer) {
    switch(tapGestureRecognizer.state) {
      case: UITapGestureRecognizerStateEnded:
        print("ohai")
      default:
        break
    }
}

こうするほうがよいですね。

let tapGestureRecognizer = UITapGestureRecognizer(view: aView)
  .didEnd { (gestureRecognizer) in
    print("ohai")
  }

こちらはSwiftyGestureRecognitionといいます。オープンソースですので、ぜひご自身のPlaygroundsで試してみてください。

SwiftyGestureRecognitionにはAlamofireのようなシンタックスシュガーがあります。リクエストを設定してレスポンスを受け取ります。連続したブロックになっています。

Popを使ったアニメーションプロトタイピング (21:35)

PopはCore Animationを拡張するすばらしいライブラリです。Popの代わりにCore Animationを使うことができますが、PopはCore Animation上でうまく機能します。Core Animationを使うとCALayerの扱いが難しいです。CALayerは実際には2つの内部レイヤで動作します。

CALayerは同期しないことがあります。

Presentation Layerはアニメーション中の状態で、Model Layerはアニメーションしていないときの状態です。アニメーションさせるとPresentation Layerが動き、アニメーションを削除するとModel Layerに戻ります。

アニメーションが終わるとその終了位置で止めるべきですが、CALayerでは開始位置に戻ってしまいます。Popでは終了位置で止まります。

let layer = ...
guard let transform = (layer.presentationLayer() as? CALayer)?.transform else  {
  return
}
layer.removeAllAnimations()
layer.transform = transform

アニメーションを削除して終了位置で止めるコードです。不要なコードが多いですね。Popを使えばこのように書けます。

let layer = ...
layer.pop_removeAllAnimations()

レイヤを取得してすべてのアニメーションを削除するだけです。ここの違いはきっちり終了位置で止まることです。

Popのすばらしいところはすべてのアニメーションが正確に実行されることです。すべてメインスレッドで実行されるので遅延なく反応します。そしてばねのように減速するアニメーションにできます。

デモ (26:00)

ポケモン図鑑を作りましょう。

Arcanineといいます。このアプリをよくしていきましょう。Core Graphicsでモンスターボールを描きました。アプリで物理演算がどのように機能するかのプロトタイピングによい例です。物理演算というとUIDynamicsを思い浮かべるかもしれません。しかしUIDynamicsはbounds、weight、mass、skyboxなどをたくさん設定しなければなりません。

では、似たようにしてみましょう。このSwiftのコードでUIPanGestureRecognizerを設定します。モンスターボールにジェスチャリコグナイザを接続します。didBeginでアニメーションを削除します。モンスターボールをクリックすれば自然に動き回るようになります。

まとめ (37:14)

まとめると、プロトタイピングを簡単にするためにSwiftのシンタックスシュガーを使いました。再利用できるように作りました。楽しく流れるようなポップアニメーションを作り、Xcode Playgroundsを使ってポケモン図鑑アプリで繰り返しました。魅力あるアプリを作るためには常に努力し続けましょう。SwiftとXcode Playgroundsを使えばすばらしいiOSアプリを作りやすくなります。よく考えれば、アプリ作りは交響曲を作るようなもので、オーケストラを指揮するように感じるでしょう。ありがとうございました。

翻訳: JPMartha