Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

scrpgil
November 27, 2021
130

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

scrpgil

November 27, 2021
Tweet

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. おわり