1. TimeTreeラヂオ
  2. 18 『Today』のiOS開発、OpenA..
2021-09-06 21:08

18 『Today』のiOS開発、OpenAPIとSwiftUIのお話

「TimeTreeラヂオ」はカレンダーシェアアプリTimeTreeを運営する私たちメンバーが、ふだんの仕事に関係することもそうでないことも、だいたい15分でひとつのテーマを話しきるインターネットラジオ番組です。

今回のテーマは「TimeTree TodayのiOS開発」について。この3人で話しました!

  • iOSエンジニア 佐藤(Sion @gonsee
  • iOSエンジニア 坂口(Trevor @pengtaros
  • ブランド コミュニケーション 渡部(Steve @ShinyaWatanabe_

■ こんなことを話しました

  • ふたつの革命! OpenAPIとSwiftUIとは?
  • 導入で苦労したこと
  • 今後のチャレンジ

■ 記事も公開中です

https://timetreeapp.com/intl/ja/newsroom/blog/2021-09-07/radio-18

■ こちらでも配信しています

  • Spotify:

ご意見・ご感想・話してほしいテーマなどぜひTwitterハッシュタグ #TimeTreeラヂオ でお待ちしてます!

00:01
TimeTreeラジオ
TimeTreeラジオは、カレンダーシェアアプリTimeTreeを運営する私たちメンバーが、
普段の仕事に関係することも、そうでないことも、大体15分くらいで話しているインターネットのラジオ番組です。
この夏、やり残したことは、ボーズにするのスティーブと、
この夏、やり残したことは、花火のトレーバーと、
この夏、やり残したことは、花火のシオンです。
かぶりがちなんだよな。シオンとかぶった。
花火でかぶりましたね。
違う種類かもしれないから。
確かに。
トレーバーの花火っていうのは?
手持ち花火ですね。
かぶってるわ。
そこもか。
手持ち花火ってコンビニとかに売ってるやつですよね?
そうです。
ドンキとかに売ってる?
はい。
あれの中でどれが一番好きですか?お二人は。
僕は派手なやつが好きですね。
両手に持ってワーって出てくるやつ。
なんかあのパチパチこう四方八方に放射状に飛ぶやつが。
はいはいはい。
あれが好きです。
何が売れましたっけ?
天候花火の落ちないでかいバンみたいなやつですね。
へー。
実はやったんですよ。手持ち花火。
この家族でやったんですけど、
余ってて、余った分をこの夏中にやんなきゃと思ってたんですよ。
そういう意味のやり残しか。
ちなみにすごい初めて聞いたんですけど、余ることってあるんですかね?
そうです。両親が結構大量に買ってて、後輩に買ってたんで。
大好きですよね。
あれかな?お孫さんのために。
そうなんですよ。
この夏中に消費しようと思って、8月31日にやんなきゃって思ったんですけど、
その日の夜ちょうど雨で。
今日もね、ちょっと雨だったね。
あと僕地元が福岡なんですけど、よくそのみんなででかい広場とかでやってたんですけど、花火を。
東京に来てから全然花火が、花火できるところがなくて。
撮ればすごい楽しそうに公演でやってそうですよね、撮れば。
似合いそう。
まだ間に合いますからね、やり残したことね。
そうですね。
僕もだからまだ坊主も。
そうですね。お待ちしております。
ちなみに坊主先輩として撮ればちょっとどうですか?
このちょっと寒くなってきた時期の坊主。
良くないですね。ミッド坊は必ず確保してください。
良くない?やっぱり。
寒い時の坊主は本当良くない。
今日のテーマが最近Time TreeでTodayという新しい新機能をリリースしまして
結構大きなアップデートだったんですが
そのTodayの主にiOSの開発についてお二人に聞きたいなと思ってます。
03:02
ちょっと簡単に概要を説明すると
Todayっていうのが今ですね、カレンダーのマンスリー画面の左下のボタンに設置されていて
その日にまつわるいろんな情報が集約されたページになっています。
メディアですね。僕らはメディアって呼んでるんですけど
占いとか今日の天気とか
占いはね、ちょっと社内で賛否両論あるんですけどね。
今日はそのPの方を代表するメンバーが一人いるんですけど
今日をちょっと良くするためにっていうテーマですよね。
そうですね。コンセプトとしては
タイムツリーのブランドプリンスが明日をちょっと良くするために
Todayは今日にまつわっているので
今日の皆さんの生活とか
ちょっとした行動のきっかけになるようなページにしたいなと思って作っています。
この開発になってくれたのが今日来ているお二人。
そうですね。もう一人、ファニーっていうiOSの開発メンバーがいるんですけど
ファニーにも手伝ってもらいながら3人で
ファニーはあれですね、主に広告とかの
広告チームに行って、広告回りでちょっととかログ回りで
いろいろ助けてもらいました。
何聞きたいかっていうと結構いろいろ僕気になっているときってあるんですけど
実はTodayに結構タイムツリーとしては新しい技術を取り入れているらしい。
はい、取り入れました。
どんな技術を取り入れて
なぜ今回Todayっていうプロジェクトで取り入れたのかとか
それを採用するにあたって工夫したポイントとか苦労とかあったのかなみたいなところ
お伺いしていきたいので
ちょっとまず取ればかな
Todayを始めるにあたって
大きくこれを取り入れていこうっていう新しい技術というか
ものが大きく2つ柱があって
1つがOpenAPIっていうもの
もう1つがSwiftUI
基本的にOpenAPI側は僕が担当して
SwiftUIの方の設計とか実装は
しおんが担当してくれました。
先に僕が担当したOpenAPIの方をさらっと
ざっくり言うとその技術者以外の方にも伝わる
すみませんね、僕がいる
いえいえ、全然
仕様書からコードを自動生成するっていう
その一連の流れを作るためのその仕様書の部分を
OpenAPIっていいます。
バックエンドチーム
Todayのバックエンドチームともいろいろ話して
まず最初に上がったのがバックエンドとクライアント側で
同時に開発を進めると
実際のテスト用のデータとかサーバーが出来上がるまで
僕らのクライアント側は
画面しか作れないよねって話になってるんですよね
画面で自分たちで用意した適当なデータとかを入れて
それちょっとタイムラグ
バックエンドの開発とクライアントの開発で
ラグが生じるとお互いのリソースもったいないよね
06:00
っていうことで
その仕様書からコードを自動生成できる
そのOpenAPIっていうものを作ると
その仮のデータを返してくれるサーバーっていうのが
簡単に立ち上げられる
まずはバックエンドチームとクライアントチームで
その仕様書部分の議論をして
この仕様書で行こうってなったら
その仕様書さえ作ってしまえば
その仮のサーバーとかができて
クライアント側はその仮のサーバーを参照しながら
画面も作っていけるっていう
そういう技術になってます
結構急いでたんですよね
そうですね結構急ぎました
OpenAPIを使うもう一つの
コードの自動生成っていう部分なんですけど
Android側ともそれを使っていて
コードのベースがAndroid、iOSで違うんですよね
タイムツリーはお互い別々の言語で開発してるんですけど
その仕様書を元に
それぞれAndroid用のツールと
iOS用のツールを使えば
どちらのコードも自動生成できる
開発がその仕様書の変更に合わせて
コードが早くできるっていうのと
仕様書から生成してるから
AndroidとiOS側でズレが生じないっていうのが
すごい良かったですね
早いっていうのとミスが少ないっていうのがすごい
1ヶ月くらい前にリリースしたトカリも
OpenAPIは使ってるってスタッフが言ってて
はい、そうですね
もともとトカリでやってて
そのチームが知見をそこで貯めてくれてて
バックエンド側のチーム
TodayだとGREGっていうエンジニアが担当してくれたんですけど
がトカリ側の知見を吸収してくれて
それをタイムツリーのTodayの開発チームに
持ってきてくれたっていう
なのでその仕様書周りとかは
そのGREGが中心になって進めてくれましたね
すごいホスピタリティーにあふれてる
バックエンド側のチームのおかげで
そもそもバックエンド側チームの発言から始まったんですよね
さっき言ってたタイムラグを何とかしたいよね
クライアント側がもっと開発しやすいようにしたいよね
っていう話を持ってきてくれて
そこから始まったっていう
結果的に開発スピードも上がったと思うし
ミスも少なくなったのですごい感謝してます
こっちから提案したわけじゃないので
こういうことができるっていうことすら知らずにいたんですけど
バックエンドチームに提案してもらって
そのMockサーバーっていうもので
バックエンドができる前から開発が進められる
さらにそこからコードを生成して
クライアント側のコードまで生成できるっていうところまで
分かってやってみたら
すごい効率化されて
めちゃくちゃ良かったっていう
割と2人からしたら革命的な変化なのね
そうですね革命でしたね
もともとオープンAPIっていうものは
この言い方が正しいかどうかわからないですけど
来てる
熱い技術であったんで
09:00
こういうことができるよみたいなものは
なんとなく小耳に挟んだことなんですけど
実際にそれが実践でやれて良かったですね
もう一つスウィットUI
主にシオンの方が取り組んで
もう一つの革命的な技術なんですけど
これはAppleが最近出した
アプリの作り方を革命的に変えるものを
Appleが出してきて
今後たぶん徐々にiOSアプリ開発は
スウィットUIを使ったものがどんどん増えてくると思うんですけど
ただ新しい技術って
新しいOSでしか使えなかったりするので
なかなかすぐには導入できないんですけど
今回トゥデイ開発のタイミングで
ちょうどiOS13以下をサポート終了して
今後iOS14以降で開発していける状態になったんですね
なので新しいものが導入しやすくなって
このタイミングでぜひスウィットUIを試してみようということで
今回導入したっていう
なるほどね
それはじゃあタイムツリー的に言うと
機運が熟しちゃったやつですね
そうです
そうなんだじゃあ色々タイミングが良かったんですね
スウィットUIはやっぱりまだ新しい技術なので
なかなかフルに使うっていうのは難しい状況で
その古いやり方で
UIキットっていう昔からあるアプリの作り方なんですけど
それとハイブリッドで使うみたいなやり方があるんですよ
なのでベースはUIキットのビューコントローラを使って
表示するカード一枚一枚の中身をスウィットUIで作る
みたいな感じに今はなっています
確かシオンはハイブリッドでやる方法を
Kiitaに記事として投稿してました
何ていうタイトルでしたっけ
モダンコレクションビューとスウィットUIのハイブリッドを実現する
っていうタイトルで
Kiitaの記事を書いているので
詳しくはそちらを
タイトルずっとしてんな
打ち合わせしてないのにいい感じに広告できましたね
さっきシオンがまだまだ世の中に少ないと発信してたんですけど
参考にしたサービスとかあるんですか
そうですね
導入するにあたっていろいろ事例を調べようと思って
見つけたのが
Cookpadさんの導入事例で
それも同じようにやっぱり
ベースはUIキットなんだけど
既存のアプリにスウィットUIをどうやって入れていくか
みたいなところが実例とともに書かれていたので
すごく参考にさせてもらいました
12:02
じゃあCookpadさんも
今までずっと作り続けてきたアプリの一部分に
スウィットUIって新しい技術を取り入れた
まさにうちと同じ状況ってことだったんですか
そうですね
いいケースしたCookpadさんありがとうございました
ありがとうございます
導入にあたって2人から見て
難しかったポイントとかってありましたか
自分はあれですね
スウィットUIの一番の利点だと個人的に考えているのが
プレビュー機能っていうやつで
今までの開発って
一度その画面を作ったらアプリをビルドして
シミュレーターで確かめてっていうのを
変更のたんびにやらなきゃいけなかったんですけど
スウィットUIにすると画面1枚1枚ごとに
見れるんですよね状況を
取りながらどういう状態で実際に
アプリにした時に見えるのかっていうのが
分かる機能っていうのがプレビュー機能っていうのがあるんですけど
最初普通に本体アプリでそれを取り入れようと思ったら
出てこない出てこない
プレビュー機能で
プレビュー表示しますっていうボタンを押しても
出てこないんですよ全然
そこを見えるようにする
見えるようになったとしても見えるまでがめちゃめちゃ時間が長い
っていうのがあって
その時間をどうやって短縮するのかっていうのが
すごい困ったポイントだし工夫したポイントでした
エンジニアならではの
僕ら非エンジニアからすると
キーノート叩けばすぐ文字打てるし
何も困らずにプレビューでできるんですけど
そこは結構大変
キーノートでアニメーションの確認とかはやっぱり
ページで再生ボタン押してやらなきゃいけないじゃないですか
再生ボタンを押しても
全然始まらないみたいなイメージでした
チヨンは何かありましたか
ツイストUIってすごく便利で素早く
画面の開発ができるっていうのが
無理なんですけど
やっぱり慣れないとなかなか
これやるのどうやるんだっけって
いちいちググりながらやるっていう
最初はやっぱり
学習の壁がやっぱりあって
ただちょっとずつ慣れていくに従って
早くできるようになって
モジュールがたくさんあるじゃないですか
なので最初にやってた天気とかはすごい
時間かかってたんだけど
コロナモジュールのところとかはもうサクッとできた
なるほど
じゃあもう占いとかは目をつぶっても開発できるぐらい
そうですねもう瞬殺
でもチヨンが瞬殺って言ってるんですけど
本当に書きやすいんだし
書く量も多分減ったと思うんですよね
僕は個人的に今までのオートレイアウトっていうやり方は
15:00
嫌いじゃなかったんですよ
結構エンジニアからは嫌われてるんですけど
そうですね結構憎しみの
エンサーの声が聞こえますよねオートレイアウト
オートレイアウトってすごい
オートレイアウトを論理的に記述しようと思ったら
一番正しいやり方だなと思って
思想的にはすごくいいものだと思うんですけど
やっぱりこうなんだろうな
開発手法としてすごい難点がいくつもあって
特にそれこそキーノートみたいに部品を並べて
ここからここは何ピクセルみたいな
レイアウトを定義していくんですけど
それを作る人はいいんですけど
誰かが作ったものを見たりするときに
何がどうなっているかわからない
そういう辛みがあったんですけど
じゃあ割とチームでみんなで開発しようというときに
意外と難点があったってことですね
Suite UIは全部コードで文字で書かれているので
コードレビューもしやすいし
そのコードと見た目プレビューを並べて
すぐに見れるっていうところも便利なところですね
例えば2人の間とか他のiOSのメンバー同士で
Suite UIのナレッジを共有するのってどうやってやったの?
なんか特別はやってないかな
毎日の朝会とかで共有したり
なんか特別な発見があったときとか
開発にこれ便利だったよみたいなものはよく共有するんですけど
普通に書くコードの部分に関しては
既存、todayじゃない部分を開発している人
つまり今までのUIキットというもので開発しているチームも
人たちも普通にtoday用のコードをレビューしてくれてたんですね
開発中は
なので開発中にSuite UIで作った部分を
お互いに見て多分分からないところが
レビューをしてて分からないところがあったら調べて
そういう感じに知見は共有されていったのかなっていう気はしてます
今後today以外のところでもSuite UIとか
新しい技術を取り入れる範囲がどんどん拡大していくと思うんですけど
野望とか展望ってありますか?
実はもうすでに本番じゃないな
タイムツリー本体がtoday以外の部分でも
Suite UIっていうのが使われ始めている
前言ってたプレビューが出ない問題を対処した時に
画面の開発部分だけコードを切り出して
そこだけで動くようにしようっていう
ざっくりとその方法でプレビューが結構早く動くようになったんですね
UI用のフレームワークを作ってそこをターゲットにして
18:00
そこだけをビルドするようにプレビュー時にビルドするようにしたっていう
最初その範囲そのUIだけを集めた部分っていうのの範囲が
todayに限定されてたんですけど
その後これもうタイムツリー側でも使っていこうよっていうことで
範囲を広げたんですよねそのUIを集める部分
タイムツリー側のSuite UIを使っているビューも
今そこにどんどん集約されてきて
最終的には個人的にはほぼSuite UIで構成されるようになると
早く今後も開発できるようになるかなっていうふうに思ってます
インパクト的にはまさにオブジェクティブCからSuiteへの置き換えみたいなところが
またこれがこの波が来たのかな
シオンの人生はもうAppleと共に歩んでいった人生ですからね
そうですねもうそういうなんか大革命みたいなのがちょいちょい起こるんですよね
歴戦の大阪を感じるぐらい
すごい
Swiftほどの天変地異はなかなかないですけど
まあまあまあ
シオンがいるとやっぱりこう頼もしいですねみんなも
だいたいシオンの勘は当たるので
秘密主義じゃないですかAppleって
いつ公開されるのかなとかっていう情報が結構あるんですけど
シオンが多分だいたいこの日に来るだろうっていうのは
毎度当たってるので
経験則って強いなっていうのをそういう時に感じてますね
今後じゃああれですね
結構大きめのアップデートがiOSあるとすると
15ですね
そうですね
じゃあシオンに最後その15がいつリリースされるのかを予想してもらって
この放送を終えますか
ハードル上げすぎた
調べとけばよかったな
そろそろでも9月中に発表があると思います
Appleが毎年新しいiOSの発表をするイベントをやるんですけど
そこからちょっと空いて新しいiOSが出るっていうのが
例年流れなんですけど
去年の経験からいくともうおそらく
明日出ますっていう発表が
あれはやばかったですね
ってことはもう次のイベントが中旬頃ですよね
そうですね
だからもうほんとすぐだと思います
新しいOSが出て
Day1からちゃんと動くようにそのOSが出て
ずっとしてきたので
iOS15も頑張ってDay1対応したいなと思ってます
明日ですって言われたらまた笑っちゃいますけど
21:08

コメント

スクロール