Ionic×Angularで作る ストーリーズ風UI

Transcript

1. IonicとAngularで作る ストーリーズ風UI 株式会社キネカ 榊原宏祐
2. 自己紹介
 ・榊原宏祐 ・株式会社キネカ所属 ・エンタメマッチングアプリ「pato」の開発 ・patoの開発からコーポレート、採用を担当 ・Twitter：@scrpgil
3. 日本初エンタメマッチングアプリとして 2016年にリリース。最短30分で、近く にいるエンタメキャストを呼ぶことがで きるサービス。 経営者層を中心に、口コミで広まって おり、サービス開始以来、多くのユー ザーに利用される。
4. ストーリーズとは？
5. ストーリーズの説明 https://bit.ly/3nCECmx • Instagramの写真投稿機能 • 一定時間で写真が自動的に切り替わ る • 今では様々なサービスで同様の UIが 使われている Instagram
6. ストーリーズ実装の3つのポイント • ポップイン表示 • スライドのアニメーション • プログレスバー
7. ポップイン • ストーリーを開く時のアニメーション • クリックした場所から拡大されるように開くの が特徴
8. スライドのアニメーション • ストーリー切り替えるときのアニメーション • 立体的に切り替わるのが特徴
9. プログレスバー • ストーリーの経過時間を表示する • アニメーションの終了と共に、次のストーリー へ切り替わる • 写真や動画によって時間が可変で変わる
10. Ionicについて Ionicは、モバイルアプリ向けのUIフレーム ワーク集 Webコンポーネントで作成されており、 Angularと組み合わせれば、Webネイティブ の技術で高品質なモバイル向けアプリを簡 単に作成できる
11. ポップインの実装1 • Ionic Modalはデフォルトだと下からスライ ドするモーダル • アニメーションはカスタマイズ可能
12. ポップインの実装1 • Ionic Modalはデフォルトだと下からスライ ドするモーダル • アニメーションはカスタマイズ可能 • 公式がアニメーションのサンプルを提供し ていくれている。https://bit.ly/3HRjKjE
13. ポップインの実装1 • Ionic Modalはデフォルトだと下からスライ ドするモーダル • アニメーションはカスタマイズ可能 • 公式がアニメーションのサンプルを提供し ていくれている。https://bit.ly/3HRjKjE
14. ポップインの実装2 • クリックイベントを取得する • event内のclientX、clientYがクリックした位 置の縦軸、横軸 • この情報を使ってアニメーションのコードを書 き換え
15. ポップインの実装2 • クリックイベントを取得する • event内のclientX、clientYがクリックした位 置の縦軸、横軸 • この情報を使ってアニメーションのコードを書 き換え
16. ポップインの実装3 • 完成 • 閉じるときはIonicアニメーションで逆描画 (revers)させる • opacityは1のままのほうがそれっぽい
17. スライドアニメーションの 実装1 • Ionic Slideを使って実装 • デフォルトは横スライドだが、カスタマイズ可能 • 公式でcubeアニメーションのカスタムアニメー ションのコードを提供 https://bit.ly/3FCoMyi
18. スライドアニメーションの 実装2 • Cubeアニメーションをそのまま使うと違和感が ある • フルサイズで描画すると角が画面から見切れる のが原因 • ドラッグ中はサイズを調整する https://bit.ly/30PtQR9
19. スライドアニメーションの 実装3 • ドラッグ中のイベントハンドリング はIonicSlideが提供してくれてい る • ドラッグ中の場合、少し縮小 • 開始時と終了時で、アニメーショ ンの速度も調整
20. スライドアニメーションの 実装4 • 完成
21. プログレスバーの 実装1 • ストーリーをどれくらい表示するか示すもの • requestAnimationを使うなど、いろいろな方 法がありますが、今回は CSSアニメーションを 利用している • zuck.jsというライブラリを参考 https://github.com/ramon82/zuck.js/
22. プログレスバーの 実装2 • (animationend)で終了時のイベントをハンド リングする • アニメーション終了時に次のストーリーへ移 動 • 動画は、(loadedmetadata)でmetadata読み 込みをハンドリングし、動画の再生時間を取 得
23. プログレスバーの 実装3 • 完成
24. ストーリー風UIの完成 • 完成したサイト https://ionic-angular-stories-ui.netlify.app/ • ソースコード https://github.com/scrpgil/ionic-angular-s troies-ui
25. 会社紹介 • 株式会社キネカ
 
 • 2017年1月設立したスタートアップ
 
 • 平均年齢：23~24歳
 ◦ リファラル中心に人が増えています 
 

26. 採用案内 • Angularを使える or 使いたいエンジニアを募集中
 ◦ 未経験
 ◦ ベテラン
 
 • patoの開発から、新規事業まで
 ◦ 入社1ヶ月目：サーバー＆クライアント関わる開発に参加
 ◦ 入社半年：新機能の開発に携わった
 ◦ フリーランス：Angularのバージョンアップ
 
 • Angular好きはもちろん、自分でプロダクト開発したい方ならぜひ。
 
 • Meety、Qiita JobまたはTwitterで声をかけてください！
 Meety Qiita Job Twitter
27. おわり