家の中でケーキを試作できたら、次は店の棚に並べられます。台所でうまくできたことと、お店でお客さんが手に取れることは別の確認です。
今日は、読書メモをURLで開ける形にします。Lovableの公開ボタンを使うので、サーバーの操作は要りません。公開したい人は、自分でボタンを押して進めます。

手順
作った画面を、公開先でも使う
プレビューは試作、公開URLは店の棚です。公開先でも操作を確かめます。
- 見せる内容を確認する
- Publishを押す
- 公開URLを開く
- 追加して開き直す
公開前に、二つだけ見る
追加、編集、開き直した後の保存まで確かめた読書メモを使います。まだ保存がなければ、メモを残して、開き直す、動作を確かめていなければ自分で使って、困るところを直すから戻れます。
画面と公開される内容が、架空の本だけか確かめます。ログインの練習コピーを作った場合も、ここでは元のブラウザ保存版を使います。
次に、Lovableの料金と公開範囲を見ます。「Public」はインターネット上の誰でも開ける設定です。公開範囲を絞れるかは、今のプランと設定で確認します。この練習では独自のドメインを購入せず、提示される公開URLを使います。
元のブラウザ保存版の読書メモを、公開して試せる状態に整えてください。画面に「読んだ本と一言メモを残す読書メモです」と表示し、保存先がこのブラウザ内だけである説明も残してください。同じ説明があれば重複させないでください。利用者の入力内容を公開するアプリに埋め込まず、保存した本がないブラウザでは空の一覧と追加する案内から始めてください。見本の本は自動で追加しません。今ある入力、追加、編集、保存とプレビューに残っているメモは変えないでください。私がPublishの画面で見るURL、公開範囲、料金上の注意、公開を取り下げる場所を短く案内してください。公開ボタンは私が押します。まだ公開はしないでください。今日やること
- 上の依頼で整えたプレビューを確認し、エディター右上の「Publish」を押します。画面が狭いと、文字のないアイコンになっていることがあります。
- 表示されたURL、公開範囲、点検結果を見ます。問題がなく公開する内容も確認できたら、画面内の「Publish」を押します。
- 完了後に表示される公開URLをコピーし、別のウィンドウで開きます。本Aと本Bがなければ、「本A/また読みたい」「本B/続きが気になる」を追加します。同じウィンドウで再読み込みして残るか見ます。すでにある本は追加し直しません。
プレビューの共有リンクをコピーしただけでは、この公開は完了していません。編集画面のリンクではなく、公開完了後に出たURLを使います。詳しい操作はLovableの公式ガイドで確認できます。
初めて公開URLを開いたとき、一覧が空でも異常ではありません。プレビューと公開URLでは、ブラウザ内の保存場所が分かれることがあります。公開先で本を追加して確かめます。
今回の道具は、同じURLを開く同じブラウザで使います。別の端末とは共有されず、ブラウザの記録を消すとメモも失うことがあります。本物の大切な記録は、別の場所にも残します。
できたか確かめる
- 公開完了後のURLを、編集画面の外で開けた。
- 公開先で本Aと本Bを用意し、再読み込みしても残った。
- 題名を空にすると追加されず、入れ直す案内が出た。
うまくいかないとき
古い画面が出たら、「プレビューでは直っていますが、公開URLは前の画面です。公開する変更が残っているか確認し、Publish changesの操作を案内してください」と頼みます。見せたくない内容に気付いたら、Publish画面のメニューから「Unpublish」を選び、公開を取り下げます。
今日のまとめ
- 公開ボタンを使うと、作ったアプリをURLで開けます。
- 公開先でも、追加、入れ忘れ、保存を試します。
- ここまで動けば、ひとまず一つの道具が完成です。
この先は、必要なときだけ
20〜23の記事は、使い続けたい人向けの寄り道です。使った人の声から一つ直すへ進んでも、ここで自分の道具を使い始めても大丈夫です。