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

TipKitTips

Avatar for Ryomm Ryomm
February 22, 2026
Programming
180
0

 TipKitTips

2026.02.22 Hakodate.swift #1

Avatar for Ryomm

Ryomm

February 22, 2026

More Decks by Ryomm

See All by Ryomm
なあ兄弟、 余白の意味を考えてから UI実装してくれ！
Avatar for Ryomm ktcryomm
11
11k
iOSでQRコード生成奮闘記
Avatar for Ryomm ktcryomm
2
320
iOS18でQRコードが表示されなくなった🤷
Avatar for Ryomm ktcryomm
0
150
リョムキャットのパーフェクトSwiftネーミング教室
Avatar for Ryomm ktcryomm
0
2.3k
Slackを使いこなせ！Slack効率3000倍
Avatar for Ryomm ktcryomm
0
1.3k
クソアプリ作って煙突詰めた♪
Avatar for Ryomm ktcryomm
0
100

Other Decks in Programming

See All in Programming
PHP で mp3 プレイヤーを実装しよう
Avatar for memory m3m0r7
PRO
0
230
Nuxt Server Components
Avatar for wattanx wattanx
0
260
PHPのバージョンアップ時にも役立ったAST（2026年版）
Avatar for Atsushi Matsuo matsuo_atsushi
0
300
AI時代のPhpStorm最新事情 #phpcon_odawara
Avatar for yusuke yusuke
0
150
L’IA au service des devs : Anatomie d'un assistant de Code Review
Avatar for Thomas Boileau toham
0
220
Linux Kernelの1文字のミスで 権限昇格ができた話
Avatar for rona rqda
0
2.3k
一度始めたらやめられない開発効率向上術 / Findy あなたのdotfilesを教えて！
Avatar for Takashi Kokubun k0kubun
4
2.9k
テレメトリーシグナルが導くパフォーマンス最適化 / Performance Optimization Driven by Telemetry Signals
Avatar for shiro seike seike460
PRO
2
220
Make GenAI Production-Ready with Kubernetes Patterns
Avatar for Bilgin Ibryam bibryam
0
100
Feature Toggle は捨てやすく使おう
Avatar for gennei gennei
0
520
煩雑なSkills管理をSoC（関心の分離）により解決する――関心を分離し、プロンプトを部品として育てるためのOSSを作った話 / Solving Complex Skills Management Through SoC (Separation of Concerns)
Avatar for nrs nrslib
4
810
年間50登壇、単著出版、雑誌寄稿、Podcast出演、YouTube、CM、カンファレンス主催……全部やってみたので面白さ等を比較してみよう / I’ve tried them all, so let’s compare how interesting they are.
Avatar for nrs nrslib
4
760

Featured

See All Featured
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
55k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
180
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
190
KATA
Avatar for Megan Lloyd mclloyd
PRO
35
15k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.6k
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
170
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
330
Designing Experiences People Love
Avatar for Jonathan Moore moore
143
24k
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
290
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k

Transcript

  1. None
  2. None
  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None

  10. TipKit! TipKitの話します。

  11. TipKitはこういうヒントを表示するためのフレームワークです。

  12. ドキュメントを見るとiOS17以上！

  13. そういえば先週、トヨタさんがこんなツイートしてましたね

  14. そういえば先週、トヨタさんがこんなツイートしてましたね

  15. はい、みなさん使えますね！ガンガンTipKit使っていきましょう！

  16. 基本のTipの使い方はこんな感じです。

  17. Tipを定義して、

  18. popoverTipでボタンにTipを生やしています。

  19. Tipの出し方はinlineとpopoverの2種類あり、ここではpopoverを使ってます。

  20. ここでTip！背景色を変えたい。

  21. これを

  22. …こうしたい。

  23. 一部の簡単なスタイル変更は、専用のAPIが用意されています。 背景色を変更するには、tipBackgroundが使えます。

  24. ドキュメントを見るとpopoverのTipには現在適用されないということになってますが…

  25. 使えます。

  26. ここでTip！もっとスタイルを変えたい。

  27. これを

  28. …こうしたい。

  29. もっとカスタマイズしたい場合はTipViewStyleを使います。 TipViewStyleを適用した構造体にスタイルを定義し、スタイルを適用したいTipの階層にtipViewStyleで設定すればカスタマイズできます。 こんな感じでZStackでColorを敷いて、吹き出しをプライマリーカラーになるようにして〜… …おっと。しっぽの部分に色がついてない！

  30. None

  31. TipViewStyleは尻尾の部分をいじることができません。 そんなときは先ほどのtipBackgroundを使うと背景をつけることだけはできます！

  32. None

  33. さて、TipKitの大きな特徴として、Tipの状態をTipKit側で制御してくれます。 書き方は大きく2種類あり、TipKitのマクロの@Parameterから判定する方法と、Eventを定義して、そのイベントから判定する方法です。 TipKitが状態を持ってくれるなんて便利だなぁ…アプリに新規で実装する場合はそう思うかもしれません。

  34. 問題となるのは、既存のヒントをTipKitに移行する場合です。 例えば、 アプリが制御していたものをTipKit内部のものに差し替えることになるので表示条件の状態がリセットされたり TipKit内ではAPIやUserDefaultを呼び出せなかったり Viewと状態がめちゃ密結合で既存のアーキテクチャと合わなくてキモかったり @ParameterはTipKitのマクロなので、外部の値をそのまま挿入できなかったり… つまりTipKitから状態を剥がさないと使いにくい状況になります。

  35. ここでTip！TipKitから状態を引き剥がしたい

  36. None

  37. まず、普通にTipKit内で状態を管理するパラメータを定義します。

  38. そして、Rulesでパラメータがtrueの時に表示するように設定します

  39. @ParameterはTipKitのマクロなので、ここにそのまま値を挿入することはできません。なので、値を挿入できるようにラップしていきます。

  40. None

  41. 挿入したい値をwrappingValueとして定義しています。ここは本来ViewModelなどもっと上層からTipKitに渡したい値になりますが、便宜上@Stateとして定義しています。

  42. onChangeでwrappingValueの変更を監視し、MemoTipのパラメータに挿入します。

  43. onChangeだけだと初期化時にwrappingValueの値がMemoTipのパラメータに反映されないので、onAppearでも挿入します。

  44. こうすることで、TipKitから状態を引き剥がし、外部から値を挿入することができるようになります。 TipKitくんがよかれと思って状態管理を引き取ったことで事態が複雑化していて、世の無情さを感じることができますね。

  45. こうすることで、TipKitから状態を引き剥がし、外部から値を挿入することができるようになります。 TipKitくんがよかれと思って状態管理を引き取ったことで事態が複雑化していて、世の無情さを感じることができますね。

  46. TipKitの哀愁を感じたところで、TipKitTips is over！ 自分ならもっとTipKitをイキイキさせてやれると思った方、TipKitチャンスです。 今回はLTなので大幅に端折ってますが、インタラクションを入れたり、結構色々な使い方ができます。 ぜひTipKitを使って快適なアプリ体験を提供しましょう！ありがとうございました〜