ExpoアプリでiOSウィジェットを実装する方法

Users • React Native • Development • 2025-12-10 • 7分で読めます

ゲスト投稿：Arthur Spalanzani — インディーアプリ開発者であり、モバイル開発に情熱を持つ工学系学生

Glowは、ExpoとSwiftウィジェットを使って、ウィジェットを第一の体験にしたアファメーションアプリを構築しています。本記事では、ウィジェットがReact Nativeとデータを共有し、iOSのロック画面やホーム画面でどのように動作するかを解説します。

背景 — なぜウィジェット中心にしたのか

昨冬、私はフランスからノルウェーに移住しました。12月の一日あたり20時間にも及ぶ暗さは想像以上で、あらゆるウェルネス系アプリを試しましたが、どれも使うのに努力が必要でした：ジャーナリング、ムードの記録、瞑想セッションなど。もっとシンプルなものが必要でした。

そこで私はGlowを作りました。Glowはウィジェットがアプリそのものです。単なる補助機能でもプレビューでもなく、実際のプロダクトはロック画面やホーム画面に存在します。

私は2019年からExpoでアプリを作ってきました。一度覚えれば手放せないワークフローです。しかしこのプロジェクトでは新しい領域に踏み込みました：ネイティブのSwiftウィジェットです。

ウィジェットをコア体験にする理由

• 多くのウェルネスアプリは、アプリを開くことをユーザーに覚えておいてもらう必要があるため失敗しがちです。Glowはこれを逆転させます。
• ロック画面で時間を確認したときにアファメーションが目に入る。
• ホーム画面をスワイプすると再び表示される。
• 摩擦ゼロの常在的な存在感。ロック画面のウィジェットは、何気ないスマホ確認の瞬間に働きかけ、ホーム画面のウィジェットは日中の意図的な接点を提供します。
• アプリを開く必要はなく、必要なときに言葉が届きます。

技術的課題：ウィジェットをネイティブに感じさせること

ウィジェットはネイティブのSwiftコードが必要です（React NativeやJavaScriptで動作させることはできません）。しかし私はExpoのワークフローの利点を維持したいと考えていました：高速な反復、EAS Build、そして手作業のXcodeプロジェクト管理を避けること。

そこで登場するのが @bacons/apple-targets です。これは実験的なExpo Config Pluginで、ウィジェットのようなネイティブのAppleターゲットを生成しつつ、/ios ディレクトリの外側で管理しやすく保つことができます。

この記事では、GlowがどのようにしてExpoとSwiftウィジェットを組み合わせ、ウィジェットとReact Native間でデータを共有してネイティブな体験を実現したかを順を追って説明していきます。