モバイルUIモックアップ Mobile UI mockup

Parky モバイルアプリの Web プロトタイプをこのページに埋め込んでいます。 右側のスマホフレーム内を直接タップ/スクロールして、実機に近い操作感で UI を確認できます。 元ファイルは mobileapp/prototype/web/index.html で、docs 配信時に docs/portal-admin/mock/ 配下に同一オリジンとしてステージングされます。

The Parky mobile app web prototype is embedded right on this page. Interact with the phone frame on the right exactly as you would on a real device. The source lives at mobileapp/prototype/web/index.html and is staged into docs/portal-admin/mock/ at deploy time so it serves from the same origin as the docs.

操作パネル Controls

デバイスサイズを切り替えたり、モックを再読み込みしたり、別タブで開いたりできます。

Switch device presets, reload the mock, or pop it out into a new tab.

デバイスDevice preset

アクションActions

↗ 新しいタブで開く ↗ Open in new tab
現在のサイズCurrent size
390 × 844
オリジンOrigin
同一オリジン (./mock/) Same origin (./mock/)
ヒントTip: モック側で地図を表示するには Mapbox トークンがインラインで含まれている必要があります。動作しない場合はリロードしてみてください。 The mock uses an inline Mapbox token to render maps. If the map fails to appear, try reloading.
モックが見つかりません Mock not found docs/portal-admin/mock/index.html が存在しないため読み込めません。 ローカルでプレビューしたい場合は次のコマンドで配置してください: docs/portal-admin/mock/index.html is missing, so it could not be loaded. To preview locally, run the following from the repo root: cp -r mobileapp/prototype/web docs/portal-admin/mock 本番デプロイ時は CI が自動でコピーするので、dev-admin.parky.co.jp/docs/ では常に利用可能です。 CI copies it automatically during deploy, so on dev-admin.parky.co.jp/docs/ it always works.

仕組み How it works

  1. 配信元: モック本体は mobileapp/prototype/web/index.html にある単一HTMLファイル (48KB)。Mapbox と Google Fonts のみ外部依存。
  2. Source of truth: The mock is a single 48 KB HTML file at mobileapp/prototype/web/index.html, with only Mapbox and Google Fonts as external dependencies.
  3. CI ステージング: deploy-admin-docs.yml が rsync の直前に mobileapp/prototype/web/ の中身を docs/portal-admin/mock/ に複製します。
  4. CI staging: deploy-admin-docs.yml copies mobileapp/prototype/web/ into docs/portal-admin/mock/ right before rsync.
  5. 埋め込み: このページは <iframe src="mock/index.html"> で参照するため、Docs と同一オリジンで配信されます。
  6. Embed: This page iframes mock/index.html, which means it is served from the same origin as the docs.
  7. 独立更新: モック側を変更すると、同じワークフローが発火して docs も自動的に最新モックで更新されます。
  8. Independent updates: Updating the mock triggers the same workflow, so the embedded version on the docs always stays current.
どう使う?How to use it: モバイル開発チームは「この画面はこう動くべき」を文章ではなく実際のインタラクションで共有できます。特にナビゲーション、モーダル、地図操作のような動的な部分は、このページを基準に会話すると食い違いが減ります。 Mobile devs can share "how this screen should behave" as actual interactions rather than prose. Dynamic areas like navigation, modals, and map gestures are much easier to align on when the conversation starts from this page.