ステッカー機能の紹介
これ撮れてるかな、撮れてそう。やっていきましょう。
TimeTreeTechTalk、前回引き続き、iOS開発の話を 聞いていきたいかなと思います。
今回、いつもは録画してくれる メンバーがいるんですが、
僕がやるということになり、 スコットがやることになりました。
手間取っておりました。
今回話してくれるのは、 iOSエンジニアのVAXです。
よろしくお願いします。
はい、VAXです。よろしくお願いします。
はい。
探検陣の1人。探検陣でいいんでしたっけ? してんのじゃないですよ。
はい、3人いる中の1人ということで 大丈夫です。
3人の中の1人ということで、 TimeTreeのiOSの実装について
とても詳しいメンバーになっております。
今回は、最近TimeTreeで、 ステッカーという機能がリリースされておりまして、
これは録音してる時点で既に出ているものなので、
皆さん既に使えるようになってると思うんですけれども、
マンスリーの画面に、これ何て言ったらいいんですかね。
ステッカーって社内では呼んでますけれども、 飾れるんですよね、カレンダーをね。
そうですね、ステッカーっていう言葉が ちょっと馴染みのない方は、
デコレーションみたいな雰囲気で考えていただけると 分かりやすいかなと思います。
デコルってやつですね。
デコルってやつですね。
デコルってやつですね。
使い方、じゃあちょっとバックスに聞いてもいいですか。
どういうふうに使うものなのかとか、どういう配布とか。
そうですね、このステッカーっていう機能なんですけども、
まず設定方法については、レイリーと呼んでいる、 1日の予定が見える画面ですね。
で、その上に顔のにこちゃんマークがあるので、 そこをタップしていただけると、
ステッカーの選択画面が出てきます。
マウスリーの画面から日付をタップして、 出てくる画面の右上のところにあるやつですね。
そうです、おっしゃる通りです。
今アニメーションしてる。
アニメーションしてますね。
にこちゃんをタップしてもらえるといいと。
そうですね、設定すると、1日の予定のところにも出ますし、
土のマウスリーカレンダーの方にも、 違うアニメーションが設定されるという感じですね。
まさに本当にカレンダーを飾るというか、という感じのもので。
なんかいっぱい種類ありますね、これ。
カレンダーを飾ろうってあって、 お祝いとかお花とかそういうのがありますよね。
最初はそこまで多くなかったんですけども、どんどん追加されていって、
今ではものすごく多くの種類が用意されることになりました。
日号とかめちゃくちゃ安そう、日号。
ユーザーの反応と今後の展望
そうですね、中にはひまたりで使えるようなやつもあるので、 何日から何日までといった感じで。
この矢印ってやつか。
そうですね、矢印のやつですね。
この間旅行に行くときに使いましたよ。
ありがとうございます。
ここからここまで。
そうなんですよね。なので複数日も指定できるので、
1日の設定ではあるんですけど、 いろんな使い方ができるのかなと思います。
まさにそれぞれの手帳とかカレンダーのあれで使う手書き感が出るっていうか。
そうですね、はい。
こういうふうにすると、マンスリーだったり、デイリーだったり。
ちょっとこれを聞きながらやってみるといいかなと。
なるほど、と。
これ実際にリリースはいつでしたっけ?
リリースに関しては去年の11月末ぐらいですね。
結構3ヶ月、今3月の終わりぐらいなんで、 3ヶ月、11月終わりだから4ヶ月ぐらい経ってる。
それぐらいになりますね。
クリスマスのときとかなんかありましたね。
そうなんですよ。クリスマスのステッカーも出しましたね。
実際4ヶ月ぐらいですけれども、 使っていただいているユーザフォンの声とかあったりしますか?
そうですね、すでにこういったステッカーが欲しいっていうご意見ですとかいただいてますし、
すごくいいメッセージばっかりですごくありがたいと思ってますね。
嬉しいですね。イメージしやすいですね。
こういうふうなのがあれば便利だなみたいな。 すごいイメージしやすい機能だと思って、とてもいいですね。
そうですね、はい。
これからいろいろ結果をこれから追加していくっていう。
そうですね、もっと用語にお答えできるように、 もっと追加したいなっていうふうには思ってますね。
ありがとうございます。
実装技術の詳細
この機能なんていうか、テックトークなんで、 技術的にどういうふうに実装しているか聞いてみたいんですけど、
まずそもそもこの機能そのものがどういう会社の流れで 作られてきたのか聞いてみたいな。
技術的じゃないよってことで。
技術的じゃなくて、まずそもそもの企画ができた。
すいません、はい。そうですね、もともとはやっぱりタイムツリーって 予定を共有しているっていうものなので、
誕生日ですとか、あと結婚記念日っていうところで、
相手に例えば誕生日の時にお祝いのスタンプみたいな形で、 お祝いできたらいいなっていうところから始まってるんですね。
カレンダー上にケーキのマークとかがあれば、 誰かが飾ってくれたってことで、すごくいいんじゃないかなっていうところから始まってはいますね。
最初は誕生日みたいな、よりプライベートというか、 自分にごとっぽいところから始まって、そこでこれると嬉しいんじゃないかっていう。
そうですね、でもまあ多分ご存知だと思うんですけど、 誕生日って、例えば2人でカレンダーとかを使ってるんだと、
誕生日って2回しかないんですよね。
そうなんだよな、誕生日って1年に1回しかないんだよな。
そうなんですよね。
不思議だな。
で、まあご家族とかで使われている方とかだと もっと多いと思うんですけども、でも言ってもそんなにないんですよ。
そうですね、もともとはなんていうんですかね、 紙の手帳に貼り付けられるシールみたいなものを考えていたっていうのもあって、
例えば紙の手帳であればその手帳の中にシールを貼ったり、 あとはわかりやすくペンで色をつけたりっていうことができると思うんですけども、
最初はそういうお祝い目的っていうところで考えていたっていうのはあるんですけども、
そうではなくて、単純に予定を目立たせるものっていう形でやっていってもいいんじゃないかっていうのが、
メンバーで相談して決めたことですね。
特に共有なんでね、すごくいいですね、お互いに飾るというか、目立たせるとか、それだけでも。
そうですね、例えばなんですけども、病院行く日とかは病院のマークとかがついてると、
この日病院行くんだなっていうことがそのお互いにも伝わったりもできますし、
飲み会の日とかだったらビールのマークがついてると、今日夜遅くなるんだみたいな感じで、
そういう感じで予定というものが目立つことで、そこでもコミュニケーションの次第になるのかなっていうところで、
今はどっちかっていうと、ステッカーのほうが多いかなっていう感じがしています。
なんかあれですよね、タイムツリーはもともと予定の共有で、予定のタイトル、テキストと、あとラベルでもともとコネクトの予定は、
分かりやすくしてると思うんですけど、さらに分かりやすく、字とか色だけじゃなくて、
絵とか、そういう目印とかが目立たせるようにすると、コミュニケーションから広がるという。
そうですね、おっしゃる通りです。
ぜひ聞いて下さい。ここからここまで、例えばオフィス駐車します、そういう感じでやったりとかしてて、
すごい便利なんで、ぜひ使ってみていただければなと思います。
じゃあ、ここからは、どうやって実装してるのかというか、いろんな技術的な難しさとかハマりどころみたいなところがあると思うので、
その辺に入っていきたいなと思うんですけど、
これアニメーションするやつありますよね。
僕のところの誕生日にめちゃくちゃアニメーションするようになってるんですけど。
これってどうやってやってるんですか?
そうですね、まずアニメーションするやつと、アニメーションしないやつも実はあるんですよ。
分けてるんですか。
画像に関してはその通り画像のままなんですけども、
アニメーションに関してはそうですね、こちらは月のカレンダーとかをスワイプとかで切り替えていただくとわかると思うんですけども、
ステッカーが設定されている月が画面上に見えたときにアニメーションを動かすって形にしています。
一気に他の月まで動かしちゃうとものすごいパフォーマンスが悪いってことで、そういうふうにしてるんですけども。
アニメーションのデータ自体もサーバーから取得してるって感じなんですけども、
毎回取得するのだとやっぱりこれもあんまりパフォーマンスが良くないので、
取得したら一旦はクライアントでキャッシュして保持するっていう形にしていますね。
なるほど。設定したその月が画面上に見えているかどうかっていう、
IOSの中で判定する関数みたいなフックみたいなのってあったりするんですか?
そうですね。月の場合はスクロールするっていう動作が走るので、
ここでスクロール、ここの月にスクロールしたっていう判定を取れるようにしていて、
予定とかもそうなんですけども、その月が見えたときに初めて動画するという形になっています。
それはもう自分たちが追加で、この月が何月かに表示されてるみたいなメソッドを用意してるっていう。
そういうイメージですね、はい。
なるほど。ほんと僕、ずっとサーバー側の人間なんで、
ユーザーに開発の意図が全然わかんないんで、同じ素人みたいな質問ばかり来てるんですけど。
デリゲートとスクロールビューの仕組み
そうですね。よくIOSでデリゲートって言ったりするんですけども、
デリゲートっていうのは要するに何か行為が行われたときに関数が呼ばれるっていうものになっていて、
この仕組み自体もスクロールビューのデリゲートっていうのがあって、
スクロールしたときにスクロールビューのデリゲートが呼ばれるので、
それをフックにして動作を実行するという形ですね。
そのスクロールビューのプラスって言ったじゃないですかね。
はいはい。
そこにデリゲートでこの関数を呼び出すっていうような定義がかけるっていう感じですかね。
はい、おっしゃる通りです。
おもしろ。
コード実際に見てみたいけど、何見てもただただ見てもちっぷんかんぷんな気がするからあれなんだけど。
これ聞いてらっしゃるIOSエンジニアの人がいたらあれのことか、多分わかんない。
そうですね、多分わかっていただけるかなと思います。
Lottieによるアニメーション実装
画像とかはさっきタップしてるっていう話があったんですけど、
それはその夜、テンポラリなそれにまるっと例えば画像とかだとキングみたいなの置いてるって感じなんですか。
そうですね、まずどの月のどの日にアニメーションが表示されるかっていうデータと、
あとはアニメーションとか画像そのものっていうのをキャッシュする必要があるんですが、
この画像っていうのは、いわゆるPNGとかGIFとかいろいろあるんですけど、
アニメーションにはPNGとかGIFとかを使っていなくて、
Lottieを使って今実装しています。
Lottieって全然耳なじみないんですけど、フォーマットみたいな感じですか。
そうですね、これはデータを元をたどると、これJSONで書かれてるんですけども、
いろんなベクターのデータとかがJSONで書かれてるんですね。
Lottieですね。
そうです、Lottieで、これはAirbnbが開発しているものになります。
なるほど、そういうふうに。
名前。
そうですね、自分もそうですね、実際にステッカーとか、
この会社に来て実装する前はLottieってものを全然知らなくて、
デザイナーさんからこういう形式で書き出したら使えますかっていうことで、初めて知った感じです。
なるほどですね。
でもちょっとググってみると結構いろいろありますね。
Androidとかでも使える、あとブラウザでも使えるのかなっていう。
そうですね、はい。
これ、デザイナーのメンバーがこれでっていう話だったと思うんですけど、
技術的にもこっちのほうがいいなって判断する理由とかあったりしたんですか。
そうですね、iOSでアニメーションの実装っていうふうになると、
これはもう昔からあるUIイメージビューの、
これはUIイメージビューにUIイメージの配列を突っ込むと、
パラパラ漫画みたいな形で再生できる仕組みがあるんですね。
すごいなんかUIなんとかかんとかってすごいひどい感じのイメージがあるけど、
そういうふうにパラパラ漫画になるんですね。
そうですね。ただこれのできることはかなり限られていまして、
画像の配列を突っ込むのと、あと何秒間隔で再生するのかっていうのを指定するぐらいしかできなかったりするんですよね。
じゃあなんていうか、FPSっていうんですかね。それしか指定できないみたいな感じなんですか。
その通りです。あとはコアアニメーションとかがあるんですけども、
コアアニメーションって基本となるフレームワークに入っているもので、
それに関しては結構便利な仕組みはあって、実はロッティのライブがそれを使って実装されてるんですけども。
ライブラリーみたいな感じになってるんですね。
そうですね。
ラッパーっていう感じなのかな。
はい。このコアアニメーションっていうのは、まずオブジェクトの状態があって、これ開始地点はこのオブジェクトの状態で、
終了地点、アニメーションの終了の状態ですね。
これの差分っていうのは普通は計算しないといけないんですけども、
コアアニメーションだと、開始の状態と終了の状態を指定するだけで、
あとは勝手にOSがやってくるっていう便利な仕組みになってるんですね。
いい感じにやってくれるじゃないですか。
いい感じにやってくるっていうのが。
あとはそうですね、アニメーションでも最初は速くなって、
これイージングとかっていったりするんですけども、
最初速くて後から遅くなるとか、一定の状態で変化していくとかあると思うんですけども、
そういったカスタマイズができるっていうのも1個ポイントでして。
この辺のアニメーションの制御が気持ちよく操作できるかどうか結構ポイントになったりしますよね。
そうですね、はい。
意外とそれこそ先進にアニメーションをさせると何か変わるようになるんですよね。
そうですね、はい。
大体はイージングとか使って、モーダルが出る動きとかもそうなんですけども、
最初はシュッて出て、だんだん遅くなるみたいな、そういった動きをしたいってことが多いかなとは思いますね。
その辺のアニメーションを中で使って実装されてるっていうのがロッキー。
そうですね、はい。
雑に思いつくので、アニジフとかとを比較したりとかってしたんですか、アニジフとアニジフとの違いというか。
そうですね、まずはそうですね、いろいろライブラリとかって言えるのもやっぱりいろいろ手間だと思いますし、
必要であれば使うって形にしたかったんですけど、
このアニメーションジフとか、アニメーションPNGって呼ばれているものをですね、
これ自体はもうデータなので、これはもうUIイメージビューにそのまま食わせて再生させるっていう形にはなるんですけども、
ただこれだと、じゃあAndroidで動かしてみた場合どうなるのかとか、
あとはまあ、最悪iOSのバージョンが変わった時に、なんかちょっと動きが変わるんじゃないかとか、
そういった懸念がありまして、
あとはもう、そうですね、再生停止したり、最初再生完了した時に何か処理を行いたいっていう場合に、
この制御が非常に難しいんですよね。
さっきの、ちょっとさっきしたばかりの言葉を使うと、デリゲートとかが難しいって感じですか。
はい、その通りです。
もうすぐさっき知った言葉をすぐ使いたくなっちゃう。
なるほどですね。
AniGIFとかではなくて、あえてLottieを選択したっていうのは、
そういうプラットフォームによって動きが違ったりとか、
あと、何ていうか、いつ再生させるとか、終わった後どうするとか、動かしにくい。
その辺りがLottieだと対象されてるところですかね。
そうですね。
アニメーションGIFの話もしたんですけども、
アニメーションGIF自体の、ちゃんと再生しようとしたら、他のライブラリーを入れないといけなかったりはするんですよね。
そういうことをいろいろ考えると、Lottieが最適なんじゃないかということで、
Lottieにしたという感じです。
カレンダーとの統合課題
クロスプラットフォームならではの難しさもあるし、
チームでやるっていう時に微妙に動きが違うとかってやったりすると、
デザイナーさんの要求を満たせないといってみると、いいフォーマットがあったなって感じですね。
そうですね。その辺りはLottieが頑張ってやってくれているってところがあるので、
さっきお話ししたコアアニメーションでいろいろ細かい動きをやったりってことも、
こちらでやらなくていいので、その点はすごく使いやすいですね。
なるほど。ありがとうございます。
そこに技術機器の選択みたいなところがあったと思うと、実装上大変だったことってありますか?
そうですね。まず一番最初に課題になったのは、カレンダーの上に貼り付けるっていうことが結構難しかったんですね。
物理だとペタッと貼るだけなのに。
そうなんです。さっき月が見えた時に初めて表示っていう話をしたんですけど、
iOSは基本的にはビューをリサイクルするという形になってまして、
例えば3月から4月、4月から5月っていう形にビューを切り替えていった時に、
そのまま切り替えていくとビューが無限に増えていっちゃうので、
ビューをリサイクルするってことをやってるんですね。
ビューをリサイクルすると何が起きるかっていうと、ビューが初期化されてしまうんですよ。
なるほど。
途中まで再生してたのがもう一回再生戻っちゃうみたいな。
そうですね。その通りです。
なるほど、難しいですね。
そうですね。なので、いろいろアニメーション制御とかを考えると、
リサイクルするより、リサイクルの管理方はまた別にアニメーションを管理した方がいいんじゃないかっていうところで、
カレンダービューの上にもう一回ぞ作って、
そうするとカレンダービューの中にあるわけじゃないので、
位置調整が必要なんですよね。
なるほどね。カレンダーのセルって言ってるのかわからないですけど、あれとずれちゃうかも。
セルって言い方で合ってます。
合ってますね。
例えば24日の位置にアニメーション表示したいっていう形になると、
24日のセルに貼り付けてるわけじゃないので、もう一回上のビューのところから、
24日の位置はここだなっていうところで配置をしているという感じですね。
これすごい大変そうだなと思うのが、タイムツリーって無料版とプレミアム版で分かれてたりするんで、
アニメーションのパフォーマンス
報告が表示されたり、プレミアムの時はされなかったり、位置が違ってくるっていうことってあったりするんですか?
そこがやっぱり難しかったところで、
端末によっても画面の高さって違いますし、
結構ダイナミックにカレンダーの高さが結構変わったりするので、
その高さが変わるタイミングでアニメーションの表示位置もリフレッシュっていうことをやってたりはします。
なるほど。
でも使っている感じはめちゃくちゃ違和感なく普通に張り付いているように見えるし、すごい制御が。
スマイクされてもなんかめちゃ綺麗に動いてるし。
そこは結構頑張ったポイントですね。
こだわりポイントが。
アニメーションとかも再生する時のパフォーマンスってすごいかかったりするんですか?
そうですね。一応ロッティの方でもいろいろパフォーマンスの調整をやってくれてるとは思うんですけども、
実際に実装する側で、例えば画面上に見えてないときはアニメーションを停止した方がいいですし、
あとは月にいくつでもアニメーションは一応設定はできるんですよね。
いっぱいできますよね。
ただそうすると10個とか20個とか設定される方もいるので、
その時にアニメーション全て再生してしまっていいのかっていうところも一個議論としてありまして。
UX的に賑やかすぎるみたいな問題もありそうですし。
そうですね。昔の端末とかを使っている人とかは多分もうそれだけですごく重くなっちゃうと思うので、
月に今は5つ超えた時に全てのアニメーションは一旦停止するという形に実装しています。
なるほどですね。パフォーマンス上の制約でたくさんつけると一旦アニメーションは再生しないみたいな。
そうですね。技術的にできないってわけではないんですけども、やっぱりパフォーマンスを考えるとそうした方がいいかなってことでそうしてますね。
デザインの整合性
結構細かい端末の性能というか実際。もうちょっと端末の性能とかが上がればいろいろできるようになるんですけども。
そうですね。
古いのもね。大変そうだな本当。
ちょっといろいろ考えだすとそうですね。
苦労がかみまみれる実装の中で。他にも大変なことってあったのか?めちゃ苦労してる人。
そうですね。先ほどクロスプラットフォームでロッティはもうどのプラットフォームで見ても同じ見え方をするっていう言い方をしたんですけども、
実際やってみて体感したところは、デザイナーさんにロッティのファイルを作っていただいて、
実際に動かしてみたっていうところで、なんかiOSとAndroidって見え方が違うみたいなことがたまわりありまして。
それでもあるんだ。
そうなんですよね。
あとはデザインツール上で見える見え方と、そもそも端末の方で見た場合の見た目が違うってこともありました。
本当そういうのは1個1個チェックしていくしかないって感じなんですかね。
そうですね。一応大丈夫ってことは前提で作ってるんですけども、そういうことがやっぱりあるので、
リリース前に1つ1つ大丈夫かどうかっていうのはチェックをしてリリースするようにはしています。
これはなかなか自動でチェックするとかいうわけにもいかないし、本当手作業でやるというか、人間で見てみないと。
これは難しそうだし大変そう。一気にステッカー100個増やしましょうとか言われると地獄が見えるわけですね。
そうですね。やっぱりちょっとずつやっていったほうがいいんじゃないかなっていうふうには思いますね。
ユーダンさんもさっきこういうの欲しいっていろんな声がある中でもこういう苦労してて、
何か端末によって動きが違うとかいうのを揃えるためにちょっとみんな頑張っておりますので、
ぜひ気長に待っていただければなって思うんですかね。
お願いします。
こういうアニメーションってやっぱりすごいあると面白いんですけど、
いざ作るってなるといっぱい苦労する手が見えて面白い、何ていうか面白いなというか興味深いなというふうに思っています。
やっぱりファクトどうですか?作ってみて感想というか。
そうですね。あまり今までタイムツリーって動きのあるものはあまり入れたことがなかったんですよ。
画面とかの繊維はいろいろ動くんですけども、そのイメージ自体が結構動くとかっていうのはあまりこれまでなくて、
画像を入れるにしても動きのない画像を入れることが多かったんですね。
確かに確かに。
そういう意味では結構新しい挑戦だったなっていうところで、
ロッティ自体は他のところでもいろいろ使ってはいたんですけども、再生の制御とかまではしたことがなかったので、
実装する側としてはすごいやりがいのある実装でした。
そうですね。事前にあまり見積もれないというか、やらないとトラブルが問題がわからないみたいな系のものだったね。
なるほど。面白かったですね。
本当クライアント側というか実際のUI側の話、全く経験として持っていないのでめちゃめちゃ面白くて、
実際やるのは飛べてないそうだなと思っていました。
そうですね。
そうですね。ステッカー機能ね。すごく面白い機能になっていると思うので。
5個井戸を作るとアニメーションが止まるとかそういうのもステップしてください。
はい。お願いします。
それだったらバグなので。
それだったらバグなので、はい。レポートお願いします。
はい。そうですね。ユーザーさんからもすごい好評いただいている機能ですし、
本当使ってすごい便利だなというふうにも思うし、楽しい機能なのでぜひ使っていただければなと思います。
はい。じゃあ今回はiOSのバックスにステッカー機能の裏話というか開発裏話を聞いてきました。
はい。バックスありがとうございました。
はい。どうもありがとうございました。
はい。では今回のタイムツリーテックトークは以上になります。お疲れ様でした。
お疲れ様です。
止めます。
