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

by scrpgil

Slide 1

Slide 1 text

IonicとAngularで作るストーリーズ風UI 株式会社キネカ榊原宏祐

Slide 2

Slide 2 text

自己紹介  ・榊原宏祐・株式会社キネカ所属・エンタメマッチングアプリ「pato」の開発・patoの開発からコーポレート、採用を担当・Twitter：@scrpgil

Slide 3

Slide 3 text

日本初エンタメマッチングアプリとして 2016年にリリース。最短30分で、近くにいるエンタメキャストを呼ぶことができるサービス。経営者層を中心に、口コミで広まっており、サービス開始以来、多くのユーザーに利用される。

Slide 4

Slide 4 text

ストーリーズとは？

Slide 5

Slide 5 text

ストーリーズの説明 https://bit.ly/3nCECmx ● Instagramの写真投稿機能 ● 一定時間で写真が自動的に切り替わる ● 今では様々なサービスで同様の UIが使われている Instagram

Slide 6

Slide 6 text

ストーリーズ実装の3つのポイント ● ポップイン表示 ● スライドのアニメーション ● プログレスバー

Slide 7

Slide 7 text

ポップイン ● ストーリーを開く時のアニメーション ● クリックした場所から拡大されるように開くのが特徴

Slide 8

Slide 8 text

スライドのアニメーション ● ストーリー切り替えるときのアニメーション ● 立体的に切り替わるのが特徴

Slide 9

Slide 9 text

プログレスバー ● ストーリーの経過時間を表示する ● アニメーションの終了と共に、次のストーリーへ切り替わる ● 写真や動画によって時間が可変で変わる

Slide 10

Slide 10 text

Ionicについて Ionicは、モバイルアプリ向けのUIフレームワーク集 Webコンポーネントで作成されており、 Angularと組み合わせれば、Webネイティブの技術で高品質なモバイル向けアプリを簡単に作成できる

Slide 11

Slide 11 text

ポップインの実装1 ● Ionic Modalはデフォルトだと下からスライドするモーダル ● アニメーションはカスタマイズ可能

Slide 12

Slide 12 text

ポップインの実装1 ● Ionic Modalはデフォルトだと下からスライドするモーダル ● アニメーションはカスタマイズ可能 ● 公式がアニメーションのサンプルを提供していくれている。https://bit.ly/3HRjKjE

Slide 13

Slide 13 text

Slide 14

Slide 14 text

ポップインの実装2 ● クリックイベントを取得する ● event内のclientX、clientYがクリックした位置の縦軸、横軸 ● この情報を使ってアニメーションのコードを書き換え

Slide 15

Slide 15 text

Slide 16

Slide 16 text

ポップインの実装3 ● 完成 ● 閉じるときはIonicアニメーションで逆描画 (revers)させる ● opacityは1のままのほうがそれっぽい

Slide 17

Slide 17 text

スライドアニメーションの実装1 ● Ionic Slideを使って実装 ● デフォルトは横スライドだが、カスタマイズ可能 ● 公式でcubeアニメーションのカスタムアニメーションのコードを提供 https://bit.ly/3FCoMyi

Slide 18

Slide 18 text

スライドアニメーションの実装2 ● Cubeアニメーションをそのまま使うと違和感がある ● フルサイズで描画すると角が画面から見切れるのが原因 ● ドラッグ中はサイズを調整する https://bit.ly/30PtQR9

Slide 19

Slide 19 text

スライドアニメーションの実装3 ● ドラッグ中のイベントハンドリングはIonicSlideが提供してくれている ● ドラッグ中の場合、少し縮小 ● 開始時と終了時で、アニメーションの速度も調整

Slide 20

Slide 20 text

スライドアニメーションの実装4 ● 完成

Slide 21

Slide 21 text

プログレスバーの実装1 ● ストーリーをどれくらい表示するか示すもの ● requestAnimationを使うなど、いろいろな方法がありますが、今回は CSSアニメーションを利用している ● zuck.jsというライブラリを参考 https://github.com/ramon82/zuck.js/

Slide 22

Slide 22 text

プログレスバーの実装2 ● (animationend)で終了時のイベントをハンドリングする ● アニメーション終了時に次のストーリーへ移動 ● 動画は、(loadedmetadata)でmetadata読み込みをハンドリングし、動画の再生時間を取得

Slide 23

Slide 23 text

プログレスバーの実装3 ● 完成

Slide 24

Slide 24 text

ストーリー風UIの完成 ● 完成したサイト https://ionic-angular-stories-ui.netlify.app/ ● ソースコード https://github.com/scrpgil/ionic-angular-s troies-ui

Slide 25

Slide 25 text

会社紹介 ● 株式会社キネカ    ● 2017年1月設立したスタートアップ    ● 平均年齢：23~24歳  ○ リファラル中心に人が増えています    

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

おわり