2025年5月21日

SwiftUI: TextのMarkdown記法を利用した部分リンク実装方法(iOS 14+)


Content
こんにちは、はるです。

最近、SwiftUI環境で部分リンクを使ったUIを実装する場面がありました。
その際に色々調査してみたところ、iOS 14以上の場合で使用できるおすすめな実装方法があったので紹介します!

部分リンクとはそもそも何か?

部分リンクとは、テキスト全体をリンクにするのではなく、文章の中の特定の単語や語句だけをクリックorタップ可能なリンクとして扱う手法です。
従来のWebの世界では当たり前に使われてきた機能ですが、モバイルアプリ開発においても同様の表現が求められることがあります。

例えば、「利用規約に同意の上、登録してください」という文章があった場合、「利用規約」の部分だけをタップ可能にして詳細を表示したり、「アカウントをお持ちの方はログインしてください」という文章の「ログイン」だけをタップ可能にしてログイン画面に遷移させたりする用途で使われます。

このようなUI表現は、ユーザーに対して自然な文脈の中で次のアクションを促すことができるため、UIデザインの観点からも効果的です。
特に以下のようなケースで有用です:

  • 利用規約やプライバシーポリシーへの誘導
  • 補足情報やヘルプページへのアクセス
  • ログインや登録などの別画面への遷移
  • 特定の機能や設定へのショートカット

本テクニックは非常に様々なアプリ開発で使用出来る、汎用性高い実装方法だと確信してますので是非積極的に活用してみてください!

実装方法

Text("既にアカウントがありますか?\nその場合は[ログイン](navigateToLogin)しましょう!")
.environment(\.openURL, OpenURLAction { specifiedParam in
switch specifiedParam.description {
case "navigateToLogin":
// ログイン画面へ遷移
break
default:
Void()
}
return .handled
})

上記のような実装をすることで実現が可能です。
サンプルアプリで実装した場合は下記のようなものになります

これはMarkdown記法に近い手法を利用したものです。
リンク化したい箇所を'[]’で囲い、その右に'()’を用いてパラメータを指定します。
今回だと、リンク化したい箇所が”ログイン”でそれに紐づくパラメータが”navigateToLogin”です。
そして、その後OpenURLActionの処理内で、case文を用いて各パラメータ毎に処理を分岐させます。

特に優れている点

私個人的に最も優れていると思う点は、「リンク部分毎に異なるパラメータを与えられる」ことです。
リンクタップ時の処理は関数化することで分離も出来ますから肥大化することもありません。
MVVMを採用しているプロジェクトであれば、ViewModelの処理を呼ぶことで責任の分離も正しく行えます。

従来であれば、別個でTextを配置し加工する必要がありました。
しかし、このおかげで実装が見やすくなる上にメンテナンス性も遥かに向上します。

公式ドキュメント

https://developer.apple.com/documentation/swiftui/openurlaction

こちらです。
元々はURLアクション用に用意されているものですのでこれがベストな使い方ではないかもしれません。
しかし、参考までにこういった応用例もあると捉えていただけますと幸いです。

まとめ

本記事では、SwiftUI Textコンポーネントを使って文章中の特定部分だけをリンク化する「部分リンク」の実装方法について解説しました。
iOS 14以降で利用可能なこの手法は、Markdown記法とOpenURLActionの組み合わせによって実現します。

この実装方法の最大の魅力は、シンプルさと柔軟性の両立です。
わずか数行のコードで、文章内の任意の部分をリンク化にできるだけでなく、それぞれのリンクに異なるパラメータを付与して多様なアクションを実行できます。
SwiftUIならではの宣言的かつ直感的なアプローチで、これまで複雑だった部分リンクの実装が驚くほど簡単になりました。
ぜひ皆さんのアプリ開発にも取り入れてみてください。デザイン面でも機能面でも、ユーザー体験の向上につながるはずです。

2025年5月21日 SwiftUI: TextのMarkdown記法を利用した部分リンク実装方法(iOS 14+)

Category モバイル

ご意見・ご相談・料金のお見積もりなど、
お気軽にお問い合わせください。

お問い合わせはこちら