RORK LABEN
ENGINE — Rork MaxはClaude CodeとClaude Opus 4.6を基盤に、ネイティブSwiftアプリを直接生成しますCORE ML — Rork MaxからCore MLの端末内推論・HealthKit・HomeKit・NFC・App Clipsといった機能に手が届きますSEED — Rorkは2026年4月にLeft Lane Capital主導で$15Mのシードを調達し、Peak XVやa16z Speedrunが参加しましたM&A — Rorkはアプリビルダー Paperline を買収し、エンジニアリング人材の獲得を目的に買収を継続する方針ですMARKET — Gartnerは2026年末までに新規アプリの75%がローコードまたはノーコードで作られると予測していますGROWTH — ノーコードAI市場は2024年の$4.9Bから2029年に$24.8Bへ、年38.2%の成長が見込まれていますENGINE — Rork MaxはClaude CodeとClaude Opus 4.6を基盤に、ネイティブSwiftアプリを直接生成しますCORE ML — Rork MaxからCore MLの端末内推論・HealthKit・HomeKit・NFC・App Clipsといった機能に手が届きますSEED — Rorkは2026年4月にLeft Lane Capital主導で$15Mのシードを調達し、Peak XVやa16z Speedrunが参加しましたM&A — Rorkはアプリビルダー Paperline を買収し、エンジニアリング人材の獲得を目的に買収を継続する方針ですMARKET — Gartnerは2026年末までに新規アプリの75%がローコードまたはノーコードで作られると予測していますGROWTH — ノーコードAI市場は2024年の$4.9Bから2029年に$24.8Bへ、年38.2%の成長が見込まれています
記事一覧/アプリ開発
アプリ開発/2026-07-01上級

ブロック画面を自分のアプリらしく作り替える — Rork Max で ShieldConfiguration とボタン処理を実装する

スクリーンタイム系アプリで表示される灰色の遮蔽画面を、自分のアプリのトーンに作り替えます。ShieldConfiguration 拡張でUIを差し替え、ShieldAction でボタンの挙動まで制御する実装を、Rork Max のネイティブ構成に組み込む形でまとめました。

Rork Max219Family Controls2ManagedSettings2Screen TimeiOS106

プレミアム記事

個人開発でフォーカスタイム系のアプリを Rork Max で組んでいたとき、時間になるとブロックはかかるのに、出てくるのが Apple 既定の灰色の画面のままで、自分の作ったアプリだと気づいてもらえない、という状態が続きました。ユーザーからすると、丁寧に作ったオンボーディングを抜けた先で、急に無機質なシステム画面に突き放される感覚になります。

この「遮蔽画面」は差し替えられます。ただ、メインアプリのコードからは触れません。ブロック中の画面は別プロセスの拡張が描いているためで、そこに手を入れるには専用の App Extension を2つ足す必要があります。ひとつは見た目を差し替える ShieldConfiguration 拡張、もうひとつはその画面のボタンが押されたときの挙動を決める ShieldAction 拡張です。

前提として、Family Controls のエンタイトルメント取得と ManagedSettingsStore で実際にシールドをかける土台は済んでいるものとします。ここではその先の、画面の作り替えに絞ってお話しします。

なぜメインアプリから遮蔽画面を描けないのか

store.shield.applications にトークンを渡すと、対象アプリを開いた瞬間にシステムが遮蔽画面を差し込みます。この画面を描いているのはあなたのアプリではなく、ManagedSettingsUI の枠組みで動く別プロセスです。React Native 側からはもちろん、Swift のメインターゲットからも直接は触れません。

差し替えの入口は ShieldConfigurationDataSource の一点だけです。システムが遮蔽画面を出す直前にこのクラスへ問い合わせ、返した ShieldConfiguration の内容で画面を組み立てます。つまり私たちが決められるのは「どんな部品を、どの色で並べるか」であって、任意の SwiftUI ビューを流し込めるわけではありません。ここを勘違いすると、凝ったレイアウトを描こうとして詰まります。

やりたいことできる / できない手段
背景色・ぼかしを変えるできるbackgroundColor / backgroundBlurStyle
アイコンを自分のものにするできる(拡張に同梱した画像のみ)iconUIImage
見出し・本文の文言と色できるtitle / subtitleLabel
ボタンを2つ置くできる(最大2つ・ラベルと色のみ)primaryButtonLabel / secondaryButtonLabel
任意の SwiftUI ビューを描くできない
遠隔の画像をその場で読み込む実質できない拡張に同梱するか App Group 経由

ステップ1: ShieldConfiguration 拡張を追加する

Xcode で新しいターゲットとして「Shield Configuration」拡張を追加します。Rork Max のように Expo ベースでビルドしている場合は、eas build のたびに手作業でターゲットを足し直すのは現実的ではないので、config-plugin 側で拡張ターゲットと Info.plist、エンタイトルメントを注入する形にしておきます。私は本体のネイティブモジュールと同じ config-plugin にまとめて、拡張の追加漏れが起きないようにしています。

拡張の Info.plist では、NSExtensionPointIdentifiercom.apple.ManagedSettingsUI.shield-configuration-service を、NSExtensionPrincipalClass に自作クラス名を指定します。ここが違っているとビルドは通るのにシステムから呼ばれず、既定画面のまま、という無言の失敗になります。

import ManagedSettings
import ManagedSettingsUI
import UIKit
 
class FocusShieldConfiguration: ShieldConfigurationDataSource {
  override func configuration(shielding application: Application) -> ShieldConfiguration {
    return ShieldConfiguration(
      backgroundBlurStyle: .systemThinMaterialDark,
      backgroundColor: UIColor(red: 0.08, green: 0.10, blue: 0.16, alpha: 1),
      icon: UIImage(named: "ShieldLeaf"),
      title: ShieldConfiguration.Label(
        text: "いまは集中の時間です",
        color: .white
      ),
      subtitle: ShieldConfiguration.Label(
        text: "この時間帯は自分で選んで閉じたアプリです。あと少しだけ、続けてみませんか。",
        color: UIColor(white: 0.75, alpha: 1)
      ),
      primaryButtonLabel: ShieldConfiguration.Label(
        text: "集中に戻る",
        color: .white
      ),
      primaryButtonBackgroundColor: UIColor(red: 0.20, green: 0.55, blue: 0.90, alpha: 1),
      secondaryButtonLabel: ShieldConfiguration.Label(
        text: "5分だけ開く",
        color: UIColor(white: 0.65, alpha: 1)
      )
    )
  }
 
  // カテゴリ単位でブロックした場合はこちらも返す
  override func configuration(shielding application: Application,
                              in category: ActivityCategory) -> ShieldConfiguration {
    return configuration(shielding: application)
  }
}

secondaryButtonLabelnil にすればボタンは1つになります。文言は具体的にしておくと効きます。「ブロック中」という事実の通知ではなく、「自分で選んだ約束だ」と思い出してもらう一言に変えるだけで、ユーザーの受け取り方がかなり変わります。私自身、文言を「アクセスがブロックされています」から上のような一文にしただけで、レビューでの評価の温度が明らかに上がりました。

ここまでお読みいただきありがとうございます。

この記事の続きを読む

この先には、実装コードやベンチマーク結果など、実務でお役に立てる内容をご用意しています。このサイトは広告を掲載しておらず、サーバーや開発にかかる費用はメンバーの皆様のご支援で成り立っています。もしお役に立てていましたら、ご支援いただけますと大変ありがたいです。

この記事で得られること
既定の灰色シールドを、背景・アイコン・見出し・2つのボタンまで自分のアプリのトーンに差し替える ShieldConfiguration 拡張の実装一式
ブロック画面のボタンが押されたときに閉じる/一定時間だけ通す/無視する、を出し分ける ShieldAction のコードと状態共有の設計
拡張がプロセス外・省メモリで動く制約を踏まえた、画像同梱・App Group 経由の状態受け渡し・審査で見られる点までの実務ノート
Stripe による安全な決済 · いつでもキャンセル可能

この記事を購入する

この先の内容をすべてお読みいただけます。一度のご購入で、いつでも何度でもアクセスできます。このサイトは広告を掲載しておらず、皆さまのご支援がサーバー費用などの運営を支えています。

または
メンバーシップなら全記事が読み放題 →
シェア

お読みいただきありがとうございます

Rork Lab は広告なしで運営しており、サーバー費用などの運営コストはメンバーシップのご支援で賄っています。実装コード・ベンチマーク・本番設計パターンなど、実務でお役立ていただける記事を毎日更新しています。もし読んでよかったと感じていただけましたら、ぜひご覧ください。

  • コピー&ペーストで使える実装コード付き
  • 毎日新しい上級ガイドを追加
  • ¥580/月 または ¥1,480 の永久アクセス
メンバーシップを見る →

関連記事

アプリ開発2026-07-03
Rork Max アプリで通信の切断と復帰に強くする — NWPathMonitor によるオフライン検知と再送設計
Rork Max のネイティブ Swift アプリで、電波が切れても壊れない通信設計を NWPathMonitor で組み立てます。オフラインの検知、Low Data Mode やモバイル回線の判定、復帰時の自動再送キューまで、動く Swift コードで示します。
アプリ開発2026-07-03
Rork Max アプリでダウンロードをアプリ終了後も続ける — バックグラウンド URLSession の設計と再起動復帰
Rork Max のネイティブ Swift アプリで、アプリがサスペンド・終了されてもダウンロードを OS 側で継続させるバックグラウンド URLSession の設計を解説します。再起動復帰・resumeData・isDiscretionary の実測挙動まで動くコードで示します。
アプリ開発2026-07-01
Rork Max のネイティブ Swift で SharePlay を組む — 二人の画面を同じ状態で動かす設計
GroupActivities を使い、FaceTime 越しに二人の画面を同じ状態で動かす SharePlay を Rork Max のネイティブ Swift で組む実装メモです。GroupActivity の宣言、GroupSession への参加、GroupSessionMessenger での状態同期、遅延と競合の扱い、そして React Native 側から橋渡しするときの境界設計まで、実際に詰まった点を添えてまとめます。
📚RECOMMENDED BOOKS
大規模言語モデル入門
山田育矢
LLM開発
生成AIプロンプトエンジニアリング入門
我妻幸長
プロンプト
Claude CodeによるAI駆動開発入門
平川知秀
AI駆動開発
※ アフィリエイトリンクを含みます
もっと見る →