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

TipKitTips

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Ryomm Ryomm
February 22, 2026
Programming
210
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
330
iOS18でQRコードが表示されなくなった🤷
Avatar for Ryomm ktcryomm
0
160
リョムキャットのパーフェクトSwiftネーミング教室
Avatar for Ryomm ktcryomm
0
2.4k
Slackを使いこなせ！Slack効率3000倍
Avatar for Ryomm ktcryomm
0
1.4k
クソアプリ作って煙突詰めた♪
Avatar for Ryomm ktcryomm
0
110

Other Decks in Programming

See All in Programming
作って学ぶ、 JSX (TSX) ランタイムの基本
Avatar for syumai syumai
7
1.5k
TSKaigi Night Talks 2026_TypeScriptでサプライチェーンの整合性を型に閉じ込める
Avatar for ギークプラス ソフトウェア事業部 geekplus_tech
0
160
並列実装の現場、2ヶ月間実務でAIを使い倒したAIもPCも私も限界が近い
Avatar for ming ming_ayami
0
100
OSもどきOS
Avatar for Sora Arakawa arkw
0
400
技術記事、AIに書かせるか、自分で書くか？ 〜それでも私が自分の手で書く理由〜 / #QiitaConference
Avatar for Junichi Ito jnchito
2
1.3k
3Dシーンの圧縮
Avatar for Fadis fadis
1
590
AI時代のUIはどこへ行く？その2！
Avatar for Yusuke Wada yusukebe
19
6.5k
Datadog × OpenTelemetry 入門と実践のあいだ
Avatar for Max Kento kn_to_maxpno
1
130
権限チェックの一貫性を型で守る TypeScript による多層防御
Avatar for aster-mnch (kitagawa) mnch
4
1.1k
SPMマルチモジュールで テストカバレッジを取得する技法
Avatar for yosshi yosshi4486
0
140
Java × distroless で 軽量なコンテナイメージを / Java on Distroless
Avatar for Daisuke Garaike contour_gara
0
470
AIとASP.NET Coreで雑Webアプリを作った話
Avatar for Mayuki Sawatari mayuki
0
170

Featured

See All Featured
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.2k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
76
5.2k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
220
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.4k
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
400
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
62
54k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
75
12k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
191
11k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k

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