コンテンツにスキップ

プレビュー:実際に動いているアプリ

要点「プレビュー」タブでは、作成中のアプリが実際に動いています。アドレスバーでどのページでも開け、画面サイズのボタンでタブレット(820 px)やスマートフォン(390 px)の幅で表示でき、↻ で再読み込み、⟲ で再起動、矢印で別のタブに開けます。20分使わないとスリープし、戻ってくるまで保存コピーを表示します。

プレビュー タブに表示されているのは、専用の安全なクラウドコンピューターで実際に動いているアプリです。画像ではないので、クリックしたり、新規登録したり、クラスを予約したり、注文したりでき、入力した内容はアプリのデータベースに保存されます。MonstarX が加えた変更は、数秒でここに反映されます。

プレビューのツールバーには何がありますか?

Section titled “プレビューのツールバーには何がありますか?”

左から順に:

ボタン・表示できること
状態アプリが動いているときは 稼働中、起動中は 起動中、スリープ中は 停止中、失敗したときは エラー と表示されます。
アドレスバー今いるページと、アプリのすべてのページの一覧。
デスクトップ / タブレット / スマートフォンアプリを全幅、820 px、390 px の幅で表示します。
編集ページを指して、変えたい内容を伝えます。詳しくは 編集モード をご覧ください。
切り抜きページの一部の画像をメッセージに入れます。詳しくは 切り抜き をご覧ください。
コメントほかの人がプレビューに残したコメントと、自分のコメント。詳しくは 共有とコメント をご覧ください。
↻ プレビューを再読み込み今のページをもう一度読み込みます。
⟲ 開発サーバーを再起動アプリのプレビューを再起動します。プレビューが止まっているときや、内容が古いときに使います。
プレビューのリンクをコピープレビューのアドレスをコピーします。リンクを知っている人は誰でもプレビューを開けます。
↗ プレビューを新しいタブで開くプレビューをブラウザの別のタブで開きます。

ノートパソコンでチャットを広く開いているときなど、プレビューのパネルが狭い場合は、アドレスバーより後ろのボタンが行の最後の ••• メニュー(プレビューのオプション)にまとめられます。

アドレスバーをクリックします。アプリのすべてのページの一覧が、それぞれの元になっているファイルと一緒に表示されます。

  • ページをクリックするか、入力して一覧を絞り込み、Enter キーを押します。ページの最初の部分を入力して Enter キーを押すだけでも開けます(/pr で /pricing が開きます)。
  • ↑ と ↓ キーで一覧を移動し、Esc キーで閉じます。
  • /classes/$id のように変わる部分があるページでは、その部分が選択された状態でパターンが入力欄に入るので、実際の値を入力できます。
  • アドレス全体を貼り付けると、ドメインより後ろの部分(/pricing)だけが残ります。

一覧は、MonstarX が新しいページを作るたびに増えていきます。アプリの中のリンクをクリックして移動することもできます。

スマートフォンやタブレットでの見え方を確認するには?

Section titled “スマートフォンやタブレットでの見え方を確認するには?”

ツールバーのタブレットまたはスマートフォンのボタンをクリックします。プレビューが 820 px(タブレット)または 390 px(スマートフォン)の幅になり、メニューがボタンにまとまったり、列が縦に並んだりと、レイアウトがどう変わるかを確認できます。

実際の端末で確かめるなら、スマートフォンでプレビューを開きましょう。詳しくは スマートフォンで作る をご覧ください。

再読み込みと再起動、どちらを使う?

Section titled “再読み込みと再起動、どちらを使う?”
  • ↻ 再読み込み は、ブラウザの更新ボタンと同じで、ページをもう一度読み込みます。表示が古いと感じたら、まずこちらを試してください。
  • ⟲ 開発サーバーを再起動 は、アプリを表示しているプログラムを再起動します。再読み込みで直らないとき、プレビューが止まっているように見えるとき、MonstarX に頼まれたときに使います。ほとんどの場合、アドレスは変わりません。

プレビューは自分で調子を整えることもします。変更の後にページが壊れたら、表示できるようになるまでそっと再読み込みし、起動に失敗したプレビューは自動で再試行します。

プレビューがスリープしているのはなぜですか?

Section titled “プレビューがスリープしているのはなぜですか?”

リソースを節約するため、プレビューは 20分使わないとスリープします。そのときは空のパネルの代わりに、最後に表示されていたページの保存コピーが、保存コピー · 25分前 · プレビューはスリープ中です。マウスを動かすかクリックすると起動します というバナー付きで表示されます。

ワークスペースの上でマウスを動かす、スクロールする、入力する、クリックする、または 今すぐ起動 を押すと、ライブプレビューが自動で再び起動します。保存コピーのリンクやボタンをクリックすると、ライブプレビューがそのページを開きます(「「About」を開くため、ライブプレビューを起動中…」)。

保存コピーは MonstarX のサーバーには置かれず、あなたのブラウザにだけ保存されます。アプリの中でサインインしていた内容が写っている可能性があるからです。保存コピーがないときは、パネルに プレビューはスリープ中です と 今すぐ起動 ボタンが表示されます。

プレビューの中でアプリにサインインできますか?

Section titled “プレビューの中でアプリにサインインできますか?”

できます。ユーザーと同じように新規登録やサインインをしてください。別のタブで開いたプレビュー(↗)はサインインが別になるので、そこでもう一度サインインします。アプリにアカウント機能がある場合、MonstarX がすぐに使えるテスト用のユーザーをチャットに用意します(デモアカウントを用意しました)。

プレビューは誰が開けますか?

Section titled “プレビューは誰が開けますか?”

MonstarX の中では、プロジェクトのオーナーと、プロジェクトを共有した人です。誰でもアプリを使ったりコメントを残したりできますが、編集、切り抜き、開発サーバーを再起動 が表示されるのは、オーナーと 編集可 の人だけです。

プレビューには専用のアドレスもあり、プレビューのリンクをコピー でコピーできます。そのリンクを知っている人は誰でもプレビューを開けるので、共有には注意してください。このアドレスは一時的なもので、プレビューを再起動すると変わることがあり、誰も使っていないとプレビューはスリープします。アプリを広く公開するには、公開してください。

プレビューで入力したデータは本物ですか?

アプリの本物のデータベースに保存されます。公開中のアプリが使うのと同じデータベースです。テストの注文、予約、新規登録は、管理タブとバックエンドに表示されます。

「プレビューサーバーでエラーが発生しました」と表示されます。どうすればいいですか?

再起動 をクリックしてください。何度も失敗するときは、「ログ」タブで原因を確認するか、チャットモードで質問してください。

アプリの代わりにカードが表示されるのはなぜですか?

MonstarX の作成中やアプリの起動中は、作りかけのページが見えないように状況カードがプレビューを覆います。詳しくは 作成の様子を見る をご覧ください。

MonstarX を閉じても、プレビューは動き続けますか?

20分使わないとスリープし、戻ってくると起動します。公開中のアプリはプレビューとは別で、常に動いています。

プレビューのリンクをお客さまに共有してもいいですか?

共有はできます(リンクを知っている人は誰でも開けます)。ただし、プレビューは作成のためのもので、アドレスが変わったり、スリープしたりします。広く共有するものはアプリを公開してください。作成の様子を見てコメントしてもらいたいときは、プロジェクトを共有しましょう。