try! Swift プロトタイピングの魔法 #tryswiftconf Day2-2

Adam Bell

Adam Bellはカナダ人のiOSエンジニアでJailbreakコミュニティでiOSの活動を始め、現在はリバースエンジニアリングとオープンソース活動をしています。普段はアニメーション、音楽、プロトタイプをしているか、ソフトウェアのビットを操作する以外は、レゴで遊ぶかポケモンを育てています。以前はARTPOP、MessageBoxやIgnitionのプロジェクトに従事していました。現在はFacebookでiOSエンジニアとして働いており、アニメーションエンジン「Pop」などのプロジェクトのメンテナンスに関わっています

twitter.com

最後にアプリケーションの動きが非現実的、もしくは物理法則に従ってないと感じたことはいつですか？近年のアプリケーションは"フラットでシンプル"になっています。魔法のように感じられるアプリは非常に稀になっています。すぐれたジェスチャやアニメーションを備えたアプリケーションを作るために、プロトタイピングの方法を深く学ぶ必要があります。そして、失われた昔の魔法のようなアプリケーションを再現しましょう。

f:id:niwatako:20160303103218j:plain もしかして私が作ったものを知ってるでしょうか、

f:id:niwatako:20160303103346j:plain AppStoreではレディガガのアルバムアプリを担当したり f:id:niwatako:20160303103400j:plain

iOSに対する熱意は、音楽、インタラクティビティにあります

iOS何年もやってきました。

歴史を見てみます f:id:niwatako:20160303103601j:plain この動画覚えてますか？ f:id:niwatako:20160303103612j:plain

iPad出た時のコマーシャルです。まずiPadそのものにワクワクしました。もう一つはアニメーションやインタラクションが、信じられないようでした。ページを３Dであけることが出来ます。 f:id:niwatako:20160303111219j:plain アニメーションやインタラクションがアプリを心地よくします。本当にリアルだが魔法のような感覚です。 f:id:niwatako:20160303111235j:plain

お気に入りの言葉です。発達した技術は魔法と区別が出来ない。iOSは魔法の源ですね。 f:id:niwatako:20160303111242j:plain

f:id:niwatako:20160303111257j:plain システムを通して同じ動きをするように設計されています。新しいインタラクション、アニメーションがすくなく、ジェスチャーが少なくなって良い感覚が無くなっている。必ずしも良い物ばかりではない。魔法がアプリからなくなってる。 f:id:niwatako:20160303111318j:plain パスブックは素晴らしく、削除したら切り刻まれたりしましたね？何が起きているのかわかりやすい。iOSパスはパス（行ってしまって戻らない）しました。

しかしiOS7では今は何処に行ったのかわからない。この操作は、テレビを消すのと同じ用に感じられてはいけませんよね？

f:id:niwatako:20160303111458j:plain Twitterはペインがこのようになっていて自分が何処にいて何が起きているのかわかりやすいです。 f:id:niwatako:20160303111510j:plain 2ヶ月前のiPad Pro、フラットにしてiPhoen版を引き伸ばされただけ f:id:niwatako:20160303111521j:plain 素晴らしいアプリをProで探すならGragebandをどうぞ、スバラいいです。タッチして何が起きているかわかりやすい。本当にとても楽しい。クリエイティビティが呼び起こされます。 f:id:niwatako:20160303111527j:plain 殆どのアプリがこうならなければなりません。

スキュアモーフィズムの話ではないです。インタラクションとこれは違います。 f:id:niwatako:20160303111535j:plain スキュアモーフィズムは実世界の物に似せることです。しかしインタラクションはFashionです。 f:id:niwatako:20160303111542j:plain スキュアモーフィズムには相互作用がないのです。 f:id:niwatako:20160303111547j:plain インタラクションはアプリ自体を楽しくするものです。 f:id:niwatako:20160303111558j:plain アニメーションは重要な要素です。操作の前後、後とのギャップを埋めてくれます。（ナビゲーションのPushPopの説明） f:id:niwatako:20160303111606j:plain フラットなデザインの中でアニメーションが後回し？されている。 f:id:niwatako:20160303111614j:plain

通常3つ理由があります。必要ない、遅い、作るのが遅い。 f:id:niwatako:20160303111633j:plain

違う観点から言うと、意欲がない、能力がない、惰性。 f:id:niwatako:20160303111642j:plain アニメーションが要らないところはあるでしょうか？ f:id:niwatako:20160303111649j:plain アニメーションはストーリーを展開します。何かを進展させるプログレッション。 f:id:niwatako:20160303111701j:plain キャンディーを一つたべたら美味しいけど全部食べたら大変。バランスが大事。全く入れないと、理解することができなくなってしまう。 f:id:niwatako:20160303111707j:plain f:id:niwatako:20160303111715j:plain ここで何をするか考える必要があります。

【とんでもないアニメーションをするホームスクリーンの動画上映】 f:id:niwatako:20160303111723j:plain

アニメーションには目的が必要です。何が起きるのかを見せる必要がある。そこには意図があるべき。 f:id:niwatako:20160303111730j:plain f:id:niwatako:20160303111737j:plain まとめましょう f:id:niwatako:20160303111743j:plain 意図を持ってアニメーション何が起きるのかを見せるアニメーションのためだけにアニメーションしない

遅いから作らない？ f:id:niwatako:20160303111751j:plain 遅い？フレームが落ちる？長い？ f:id:niwatako:20160303111759j:plain CoreAnimation はフレームを落とさないデザインです。CARenderServerで優先度高く処理されるので最優先でスピードが維持される。最適化をしていないコードで使わない限りスローダウンは起きない。技術的に遅いのではなくてアニメーション自体が長いということが考えられる

オンラインゲームが送れるとかはいい、アプリが送れるのもまあいい、でもズームインに5秒かかったら苛々する。 f:id:niwatako:20160303111810j:plain アニメーションのために長い時間待たされると苛々する。（じーっくり大きくなって画面を覆うトランジションの例） f:id:niwatako:20160303111818j:plain でも、そんなAppと戦わないといけないユーザーはどうするでしょう？そんなアプリ、まず削除します。 f:id:niwatako:20160303111829j:plain そしてアップストアでレーティングでひどいレビューをつける。がっかり。誰も望んでいない。 f:id:niwatako:20160303111845j:plain f:id:niwatako:20160303111857j:plain

まとめ

ページをめくるなら5秒を0.5秒にしましょう。 f:id:niwatako:20160303111922j:plain 良いアニメーションは教育をするが悪いアニメーションはいらいらさせる。ピカチューみたいに皆を楽しませましょう。 f:id:niwatako:20160303111930j:plain アニメーションを作るのは難しい。 f:id:niwatako:20160303111942j:plain でも、良いアニメーションを作るのは、やるだけの結果を出してくれる。

ここに参加されるような皆さんなら、成功させようという課題を自分に与え、NOと言わないで下さい。チームでやっているなら、積極的なポジションがあなたの役割です。無理なんて言ってはいけません。 f:id:niwatako:20160303111955j:plain

イテレーションではプロトタイピングが役割を果たします。折り紙などいろんなツールが有る。 f:id:niwatako:20160303112013j:plain f:id:niwatako:20160303112019j:plain f:id:niwatako:20160303112027j:plain Swiftカンファレンスなので通常はXcodeを使いますね

Swiftの前ではXcodeはプロトタイピングに向きません。 f:id:niwatako:20160303112033j:plain

しかしPlaygroundができました。素晴らしい組み合わせです。 f:id:niwatako:20160303112050j:plain

アプリをリアルタイムコンパイルして実行できるのでイテレーションにぴったりです。 f:id:niwatako:20160303112104j:plain スクリーンでのダイナミックなアップデートも確認で行きます

ジェスチャーもBetaではアクセスできます。iPhoneシミュレーターがコードの横にあるかのようになる。インタラクティブでとっても早い。ジェスチャーが全部揃っている。 f:id:niwatako:20160303112113j:plain

設定がいろいろあります。ファンクションを設定してビューを追加、そしてこのアクションをする。プロトタイプにはよくないですね。もっと良いやり方、4行でやりたいですね

f:id:niwatako:20160303112121j:plain ナイスでシンプルです。何故こう出来たのでしょう。 f:id:niwatako:20160303112148j:plain f:id:niwatako:20160303112207j:plain シンタックスがアフモファイアーに似ています。複雑だが使いやすい。

見えますか？触ると固まるので見るだけで。クリックするとイベントが走ります。

どうやって動くのか、ブロックを設定して、こちらがアサインされます。 f:id:niwatako:20160303105433j:plain ジェスチャーは見ましたね

アニメーションは f:id:niwatako:20160303105446j:plain

f:id:niwatako:20160303105505j:plain f:id:niwatako:20160303105512j:plain レイヤーは難しい。 f:id:niwatako:20160303105530j:plain f:id:niwatako:20160303105538j:plain

アニメーションを中止するのがレイヤーで難しくなる。2つのレイヤーが非同期になる。すべてのアニメーションを動かすとモデルレイヤーに戻る。車がハイウェイで走っていてブレーキを踏むと？出発地に戻らずその場で止まる。それがレイヤーの構造でもあるべき。そのために必要な作業をします。全体でやるとコードが増える

そこでPopをつかって、その場でフリーズさせる。 f:id:niwatako:20160303112534j:plain

それがアニメーションのインタラクションであるべき

PopでいいところはアニメーションがApp上で動いてラグも起きない

f:id:niwatako:20160303105749j:plain

Springはダイナミックであるべき。Popアニメーションを設定して指と同じスピードで実行されるべき

f:id:niwatako:20160303112658j:plain f:id:niwatako:20160303112702j:plain f:id:niwatako:20160303112705j:plain f:id:niwatako:20160303112709j:plain f:id:niwatako:20160303112712j:plain f:id:niwatako:20160303112715j:plain f:id:niwatako:20160303112718j:plain f:id:niwatako:20160303112722j:plain f:id:niwatako:20160303112725j:plain f:id:niwatako:20160303112729j:plain f:id:niwatako:20160303112733j:plain f:id:niwatako:20160303112736j:plain f:id:niwatako:20160303112739j:plain f:id:niwatako:20160303112743j:plain f:id:niwatako:20160303112747j:plain

作ってみましょう f:id:niwatako:20160303105931j:plain

20週年 f:id:niwatako:20160303105947j:plain

f:id:niwatako:20160303110015j:plain f:id:niwatako:20160303110031j:plain

これを良くします f:id:niwatako:20160303110047j:plain

CoreGraphicで書いています f:id:niwatako:20160303110104j:plain

そんな複雑ではないが時間がかかる。

モンスターボールからポケモンが出る様子をアプリに入れましょう f:id:niwatako:20160303110143j:plain

f:id:niwatako:20160303110156j:plain 物理演算を確認しながらプロトタイプが出来るのは良い例ですね

f:id:niwatako:20160303110237j:plain f:id:niwatako:20160303110253j:plain f:id:niwatako:20160303110301j:plain モンスターボールが動かせます f:id:niwatako:20160303110314j:plain

ここで投げます f:id:niwatako:20160303110336j:plain

f:id:niwatako:20160303110403j:plain f:id:niwatako:20160303110407j:plain f:id:niwatako:20160303110411j:plain f:id:niwatako:20160303110414j:plain

ホッケーのように動くモンスターボールが f:id:niwatako:20160303110436j:plain

Springアニメーションを使っている。エンドポイントにSpringしているそこで機能を使って下に落ちてそこで止まるようにする f:id:niwatako:20160303110538j:plain f:id:niwatako:20160303110541j:plain f:id:niwatako:20160303110545j:plain

とめましょう f:id:niwatako:20160303110555j:plain

遠くにいくと小さくなるようにスケールアニメーションします。 f:id:niwatako:20160303110627j:plain

やり過ぎなので半分、75％で f:id:niwatako:20160303110652j:plain

80？ f:id:niwatako:20160303110708j:plain

最後、モンスターボールはクルッと回ってストップする、ゆっくりになって止まる。 f:id:niwatako:20160303110801j:plain f:id:niwatako:20160303110808j:plain

これを爆発させたい。 f:id:niwatako:20160303110829j:plain f:id:niwatako:20160303110858j:plain

こうして完成したものをアプリに入れる。 f:id:niwatako:20160303111005j:plain f:id:niwatako:20160303111009j:plain f:id:niwatako:20160303111033j:plain

まとめ

Swiftで簡単にプロトタイピングが出来るようになりました f:id:niwatako:20160303111133j:plain

自分の限界を上げるようなプログラミングをすると良いです f:id:niwatako:20160303111140j:plain アプリの構築はオーケストラの指揮のようなものです。 f:id:niwatako:20160303111147j:plain f:id:niwatako:20160303111154j:plain

@b3ll 氏のセッション楽しかった。アニメーションを工夫すれば魔法になる。アニメーションの開発はとても大切。 Playgroundのデモ良かったな。 Thank you so much for your awesome presentation! #tryswiftconf
— kandasu (@kandasu) 2016年3月3日