アルバム機能の紹介
【音声なし】
TimeTreeTechTalkやっていきまーす。
お願いします。
はい、これ今僕一人でミーティングルームで拍手してました。
はい。
はい。今回はですね、はい、今回もですか。
今回も私、TimeTreeのCTOのスコットがやっていこうと思うんですけど、
今回ゲストでシオン、iOSエンジニアのシオンに来ていただきます。
はい、iOSエンジニアのシオンです。よろしくお願いします。
よろしくお願いします。
はい、シオンは社内でもね、TimeTreeのiOSラジオをやってたり、
もう喋り慣れてると思うので、
はい。
いやいや。
はい、やっていこうかなと。
今回あれですね、TechTalkと言いつつ、なんか最近はちょっとね、
マネジメントだったりとか、なんかガジェット紹介するみたいな、
買ってよかったみたいな緩い会が続いたので、
今回はiOSのエンジニアもいるということでですね、
最近開発した機能の、まあ、よもやま話というか、
開発の裏話みたいなのを聞いてみようかなと思っておりますというところですね。
はい、ということでシオン、何の話してくれるんですか。
えーと、そうですね、つい最近リリースしたばかりのアルバム機能について、
まあiOSのちょっとした技術的な話ができればなと思ってます。
はい、これちなみに収録してるの2月の14日のバレンタインで、
今日100%ですね、全体にリリースしました。
あーそうですね、はい。
だから、ちょっとこれがいつ出るかわからないんですけども、
あのまま皆さんには多分手元に届いてる機能になるかなと思います。
アルバム機能ですね。
技術選択の考察
はい、簡単に機能を紹介しますと、
えーと、カレンダーの、普段画面がタイムツリーあると思うんですけれども、
下のほうのタブにアルバムというものが現れていて、
ここでですね、撮った写真の思い出などを振り返れるという機能ですね。
ざっくり説明させてもらっていいですか、これで。
もうちょっと詳しく機能のアピールがあればシオンに言って。
KIMOは予定を共有し合うグループの中で、写真も一緒に共有できて、
それを思い出として後から振り返れるようなものになってますと。
これちょっと投稿今試してたりしてるんですけど、
ちょうど先週旅行に行ったやつをいっぱい入れてます、今。
これ新しいタイムツリーだとビューになる感じですかね。
そうですね。今までにないまた新しい画面を作ったって感じですね。
じゃあこれについて実装について聞いていきますか。
どんな感じで実装したのかとか。
口で伝えられる。ラジオだから。
右上の方からいきなり伝わらなくなっちゃうけど。
お手元でアプリ触れる人は触ってみながら聞いていただけるといいかもしれないんですけど。
見た目はよくあるグリッド上に写真がバーッと並ぶ。
iPhoneのデフォルトのアルバム写真アプリみたいな、よくあるUIだと思うんですけど。
これをまずどう実装するかで、今だと大きく分けて2つ選択肢があって、
スイフトUIを使うのか、UIキットでいくのかっていう。
スイフトUIって聞きますよね。最近スイフトUIがいいとかっていうのは。
素人目線で言うとスイフトUIの方が新しくていいんだって。
そうですね。今からやるんだったら絶対スイフトUIでしょみたいな感じにイメージとしてはあると思うんですけど。
スイフトUIは実際にタイムツリーでも使っていて、新しい画面は基本的にスイフトUIで書いてたりするんですけど。
メリットとしては、よく言うのが、宣言的に記述できるっていう。
HTMLみたいなものですよね。部品を順番に置いていくとその通りに画面ができるよっていう。
コード量が少なくて、実装が早いっていうところがメリットですね。
なんですけど、一方で結構ユーズが効かなくて、標準的なUIはパッと作れるんですけど、
ちょっと凝ったことをやろうとすると急に大変になって、そもそも全然できないじゃんっていうこともあります。
聞いたとき、聞いてえ?って思っちゃったんですけど、
スイフトUIってAppleが開発してると思うんですけど、
Appleが推奨するUI以外は作りにくいみたいな認識があった?
そうですね。年々作りやすくはなってきてるんですけど、
ちょっと前だとテーブルビューのセパレーターの色を変えることすらできないみたいな、そういう感じだったりしたんで。
今の全然多分高等じゃ伝わんないな。テーブルっていわゆるExcelみたいなイメージすればいいですかね?
一行ずつ表示されたTwitterのタイムラインみたいなやつとか。
それの線?
線をまず出す出さないとか、そういうところを変えるのすらめちゃくちゃ大変だったりっていうこともありました。
いろいろ使いやすくはなってきてるんですけど、
要はその出来合いの部品で組み合わせて作れるならいいんだけど、
ちょっとカスタマイズして見た目をいろいろ変えたくなると、
その手段が用意されてなかったりするんですよね。
じゃあなんかちょっとすいません、素人の意見ですけど、
CSS縛りのHTMLみたいな感じなんですか?
ああ、なんかそういうイメージかもしれない。
CSS縛りでやる?
いじれるCSSがめっちゃ限られてるみたいな。
なるほど、プロパティ全然ないみたいな。
それなんかイメージできたら大変そう。
なるほど、じゃあスイフトUIそういうところがあるっていう。
そうですね。
一方でUIキットは古き良きフレームワークで、
IOSエンジニアを長くやってる人は10年以上の付き合いをしてると思うんですけど、
SEOには10年以上の付き合いですか?
そうですね、もう15年くらいになるかもしれないですね。
15年くらい。
昔ながらの手続き的なプログラムで書かなきゃいけないんで、
コード量が多くなりがちなんですけど、
意外と今でも毎年WWDCでアップデートされていて、
どんどん使いやすくなってるんですよ、未だに。
まだ開発されてる、スイフトUIがあるのにってことですね。
まだ機能追加をされたりしてて、
何より枯れた技術っていうところもあって、
安定感がありますよね。
もうあれですよね、15年やってるから手に馴染んじゃってる。
そうそう。
これUIキットだったらすぐやり方わかるのに、
スイフトUIでどうやるんだろうみたいなことはよくありますね。
あとはやりたいことはほぼ何でもできます、UIキットだったら。
なるほど。
こうやって聞くとUIキットでよくねってすごいなるけど。
なので、適材適所でやっていくのがいいかなとは思ってますね。
なるほどですね。
新しくて、要はコード量とかが少なくてわかりやすいけど、
ぶきっちょなスイフトUIと、ちょっと小難しいけど歴史もあるし、
実装の課題
やりたいこと、アプリで表現したいこと全部できるみたいなUIキットがあるという感じですね。
で、その選択肢はどっち?
とりあえずスイフトUIでトライしてみようってなって、
結果なんとかなったっていう。
なんとかなったって表現でいろいろ詰まってる気がする。
そもそも求められてるUIがそこまで複雑じゃなかったので、
いけるかなっていう感じで進めていったんですけど、
いくつかちょっと課題というか大変だった部分がありまして、
これ画像の一覧をちょっとスクロールしてもらうと、
左上に2025年2月とか出ると思うんですよ。
出てます。皆さんちょっとアプリお手元にあれば、
写真をアップロードして使ってみていただければと思うんですけど。
これは投稿した写真が撮影美女に並んでて、
その何年何月っていう括りでヘッダーが表示されるようになってるんですね。
これ要はスクロール中かどうかを判定して、
これを出す出さないを決めてるんですけど、
このスクロール中かどうかっていうのは、
UIキットだったらすぐやり方わかるんですよ。
デリゲートパターンっていうものを使って、
それ用のメソッドが用意されていて、
スクロールビューのスクロールビューディースクロールみたいなメソッドがあるから、
それをフックしてやればいけるっていうのはパッとわかるんですけど、
こういうことをSwiftUIでやろうとするとめっちゃトリッキーなんですよね。
ユーザーのオペレーションにフックしてなんかするみたいなのはまだめんどくさい?
全体的にという感じなんですかね。
そうですね。
特にスクロールイベントとかを撮ろうとすると、
自力ではたどり着けないんですよ、そのやり方に。
スタックオーバーフローとかを見に行くと、
ビューの中に見えないビューを埋め込んで、
そのビューの座標をトラッキングするみたいなことをしないといけない。
アプリに触ってると左上のところに座標があるってところですね。
この引きを表示する座標が。
スクロールビューが今どのくらいスクロールされてるんだっていう、
UIキットでいうところのスクロールビューのコンテンツオフセットかな。
オフセットっていうのがあって、
UIキットだとそういう名前のプロパティがあってすぐそこにアクセスできるんですけど、
SWIFT UIにはそういうのなくてですね。
自力で埋め込んだビューの座標を自力でトラッキングして、
今これくらいスクロールされてるみたいなのを監視するみたいなコードを書くんですね。
なるほど。それをずらしていくみたいなことをしないといけない。
そうですね。
それがずれたから今スクロールされたみたいなのを検知して、
制御するみたいなことをしてます。
そういうUIキットだと用意されているフックみたいなやつを自分で実装しないといけないみたいなのが、
座標で見て動いてるか動いてないかみたいなことをやらないといけないんだ。
そうなんです。
なるほど。そこら辺をなんとかなったってことですね。
そうですね。ここはなんとかなった部分ですね。
あとは不具合が起きたときに、まだ勘どころがわからないっていうか、慣れてないっていうのもあると思うんですけど、
UIキットだったら大体このバグはこの辺かなみたいな勘が働くところが、
これ一体何が起きてこうなってるんだみたいな、全然わからないみたいな。
UIキットとか、ShiftUIだとか。
そうですね。
一個あったのが、写真一覧のサムネイルをタップすると、
アルバム機能の不具合
この四角の端っこの方をタップすると、押したのと全然違う画像が拡大されて表示されるみたいな不具合が出て、
全然なんでこうなってんだって思うんですよね。
そうですよね。例えば横に3列あって、真ん中タップしたはずなのに右のやつが開いちゃったみたいな。
そういうことが起きまして、
これが偶然なんですけど、テストで極端に縦長の画像をアップロードしてた人がいるんですね。
全然違うところタップしてるのに、その縦長の画像が出るみたいな現象が起きて、
それで気づいた人がいて、これは正方形で切り取られてるんだけど、
画像がはみ出してて、そのはみ出した部分がタップ領域になってるっていう。
なるほど。
そういう不具合だっていう。
レンダリングの順によって、透明になってる部分が上に覆いかぶさっちゃって操作可能になっちゃった。
その通りですね。
それに気づいたんで、これはタップ領域をちゃんとクリッピングできてないんだっていうことに気づき、
具体的にコンテントシェイプっていうビューモディファイヤーをつけるっていう修正方法だったんですけど、
これ結構SwiftUIではあるあるで、ビューの表示領域とタップ領域が一致してないから、
表示領域にタップ領域合わせて切り取るみたいなことをするんですけど、
結構ボタン実装してる時とかそういうのが気づけて修正してたりしてたんですけど、
このグリッド上のリストでそれが起きてるっていうことに気づけなかったっていう。
なるほど、ボタンっぽくないですね。
はい。
メタデータの読み取り
これはもう15年の付き合いがあるやつとの違いですね。
そうですね。
なるほど。
大変ですね。
これ多分iOSのSwiftUIやってる人だとうんうんってなってるんだろうな。
なってると思います。
なってると思う。
はい。
ちょっとね、僕もiOSは問外観なんで、へーすげーしか思わないけど、
でも面白いですね、こういう話があるとね。
他のやつでも踏む可能性も全然ありますし。
うん。
なんかUIの実装面白いなと思ったんですけど、何か他にもあったりしますか?
あとは技術的に面白いというか大変だったところで言うと、
画像のメタデータを読む必要があって。
撮ったときにどのカメラとかどの日時とか。
そうですね。
この写真の一覧って撮影時刻の順番に並べるっていう要件があったんですよ。
なるほど。
なるほど。
撮影時刻ってだからイグジフの中に入ってるんで、それを読まないといけないんですね。
で、今までタイムツリーの中ではそういう機能なかったんで、やったことがなくって、
イグジフ読むのどうやるんだろうと思って調べたら、
一応iOSには画像のメタデータをリードライトするためのImageIOっていうフレームワークがありまして、
これがiOS4から使えるイニシアのフレームワークなんですけど。
今iOSいくつでしたっけ。
今18?
14世代前。
ImageIOってもう名前が古いもんな。
プリミティブだから。
そうなんですよ。
本当におっしゃる通りプリミティブで、
スイフトだと文字列、ストリングっていう型があって使うんですけど、
CFストリングみたいな型を使ってキャストしないといけないみたいなことが起こるんですけど。
なるほどね。
ちょうどさっきトレバーの文法チャンネルでこの話をしてて、
このImageIOすごいなんか古くてオブジェクティブシーっぽいですねっていうのをトレバーが言ってたんですけど、
オブジェクティブシーっていうよりこれもはやシーだからみたいな話を。
クラスの名前の付け方がもうそうだもん。
CFなんてめちゃくちゃ略してNSなんとかわかんないし。
CFはちなみにCore Foundationの略なんですけど、
これもiOSの中でも非常にローレベルなAPIですね。
JPEGとかエグギフのデータとかって最初とかに入ってるからね、画像の。
そうですね。
フレームワークが使えば比較的簡単だけどそいつに文字列渡すのがめっちゃめんどいみたいな。
書いてたのもめんどくさいのか。
ただこのフレームワークは未だにちゃんと使えて、
ちゃんとSwiftからも使えるようになってるんで、
それはそれですごいなと思います。
それはそれですごいですね。
フレームワークを作るんじゃなく、とりあえず、
でもそのほうがいいのかもしれないですね、既に機能がいっぱいあるし。
そうですね。
ちゃんとSwiftからも使えるようになってるけど、
いや、イニシエのフレームワークを使ってAzureを読んだと。
そうですね。
ちょっとドキュメントを読もうと思ってもオブジェクティブCのコードしか出てこないんで、
いろいろ大変なところがあるんですけど。
そう、アレルギー出る人もいるよね。
これを使って撮影時刻を、
それをアップロードするときにAPIのリクエストに含めて
サーバー側でその時刻を保存してるので、
レスポンスにもその撮影時刻が入ってきて
相当ができるという感じですね。
その順に並び替えればいいという。
データをサーバーサイトに保存しちゃって、
サーバーも多分それで並び替えたりとか楽になりますもんね。
はい。
画像、そのアップロードする画像自体には
今のところメタデータは一切ついてなくて。
一応除去して送ってるってことですね。
そうですね。
タイムチームのサーバーには日付とかメタの位置情報とか
カメラの情報とか残っておりませんので安心してくださいね。
これはあえて消してるというよりは
リサイズしてるんで、その過程で剥がれちゃうんですよね。
何もしないと。
今ちょうど開発中なんですけど
メタデータもちゃんと保存できるようにするっていうところを開発中でして
もしかしたらこれが流れてるときにはもうすでに出てるかもしれないですが
基本的に。
逆に取り出したメタデータを画像に書き込んでアップロードするっていうところも
位置情報の設定
このImage.ioフレームワークを使ってできるんで
それを実装してるって感じですね。
そのときに位置情報とかメタ情報って気になる人いるかなと思うんですけど
そこは問題になると思ってたんで
設定で位置情報を送る送らないを切り替えできるようにしてるんで
カレンダーごとにですね
家族カレンダーには位置情報を送るけど
会社用のカレンダーには位置情報を送らないよみたいな設定もできるようにしようとしてます。
なるほどですね。今カレンダー設定のところに位置情報ができるということで
もし気になる方は
どっちがデフォルトになるのか僕も全然知らないですけど
気になる方はそこでスタートもできると
一応オンがデフォルトなんですけど
最初にちゃんとオンになってますよっていうのを
案内が出てきて
オフにしたい方は設定からオフにしてくださいっていう風に出すようにしてます。
その辺のガイドラインというかあれもちゃんとしてると。
はい。
はい。面白。ということでですね
いろいろ聞いてきたけど
新しく出たアルバム機能を皆さんぜひ使っていただければ嬉しいなと思うとともに
スイフトUIならではのつらみであったり
画像処理するときの話とかをいろいろ聞きましたというところですね。
開発お疲れ様でした本当に。
はい。
スイフトUIの大変さがすごい理解できました。
自分の中でもCSS縛りっていうことが出てきたんですけど
大変なことでいきなり出てきたんですけど
そうですね。
自分にはすげえ悪いです。
こういう最新のUIのコードから
いにしえのフレームワークまでいろいろ触れて
開発自体は楽しかったですね。
iOS自体はしゃぶり尽くしてると言える。
はい。
なるほど。面白い。
タイムツリーではそういう開発ができますので
ぜひご協力ください。
という営業っぽい話もしつつ
今回はこんなところですかね。
シオンありがとうございます。
はい。ありがとうございました。
じゃあこんなところで。
ではではタイムツリーってことで終わりたいと思います。
ありがとうございました。
ありがとうございました。
