Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

TipKitTips

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Ryomm Ryomm
February 22, 2026
Programming
240
0

 TipKitTips

2026.02.22 Hakodate.swift #1

Avatar for Ryomm

Ryomm

February 22, 2026

More Decks by Ryomm

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

Other Decks in Programming

See All in Programming
RAG の “R” を Swift で覗いてみる 〜「意味から探す」検索の仕組み〜
Avatar for Nao-RandD nao_randd
0
120
WebRTC映像をAirPlayに対応させる挑戦.pdf
Avatar for monolithic-adam monolithic_adam
0
340
Ghostty + Neovimで作る 透明でカッコ良い開発環境
Avatar for Kanade Nonomura j341nono
0
150
Atomic Design, Enforced: Scaling Mobile Design Systems (next.app devCon / droidCon Berlin 2026)
Avatar for Stelios Frantzeskakis steliosf
PRO
0
120
Augmenting AI with the Power of Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
520
Embedded Swiftで作る自作USBデバイス によるiOSデバイスの自動テスト / iOSDC Japan 2026 glassfiber
Avatar for glassfiber glassfiber
0
290
Vue Fes Japan 2026 タイムテーブル徹底解説
Avatar for 448jp | OKI Yoshiya 448jp
1
620
Security issues being discussed on Web Platforms
Avatar for petamoriken / 森建 petamoriken
0
1.4k
Augmenting AI with the Power of Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
440
Are APIs Still Relevant in the AI Era?
Avatar for Antoine Bluchet soyuka
0
420
そのリトライ、死んだコネクションを使い回していませんか ── GoのHTTPクライアントとHTTP/2を実プロダクト障害から学び直す
Avatar for Yusa Matsuda myus4a
0
390
GemmaをJevのように使ってみる / Use Gemma like Jev
Avatar for Naoki Kishida kishida
5
670

Featured

See All Featured
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.9k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
710
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
2.2k
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
1
240
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.6k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
2
530
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
360
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
62k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
7.1k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
68
58k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
409
67k

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を使って快適なアプリ体験を提供しましょう！ありがとうございました〜