プロジェクトページの案内
Briks で作るサイト、アプリ、ダッシュボードにはそれぞれ専用のプロジェクトページがあります。ここで Briks に話しかけ、サイトが変わる様子を見て、プロジェクトのほかの機能にもアクセスできます。このツアーでは各部分を一通り紹介しますので、必要になる前に役割を知ることができます。
- 1今いる場所: Projects、続いてプロジェクト名。画面が広いときはアドレスも表示されます。その下に、プロジェクトのタブが文字で並びます。Studio、Analytics、Media、Database(プロジェクトにデータベースができると表示。それまでは Owner と Admin に表示)、Storage、Chatbot、Settings です。
- 2会話です。変更の依頼や質問を、ふだんの言葉で伝えられます。
- 3公開のたびに更新される、サイトのプレビューです。
- 4プレビューのツール:表示する幅、再読み込み、全画面表示、新しいタブで開く。
- 5準備ができたら、Publishでサイトを本番環境に移します。
プロジェクトを開く
サイドバーの Projects をクリックし、開きたいプロジェクトを選びます。最新のプロジェクトはサイドバーの Projects の下にも一覧され、それぞれ状態を示す点が付いているので、そこから直接開けます。プロジェクトは常に Studio タブで開き、会話とプレビューが並んで表示されます。
ノートパソコンやデスクトップでは、両者が横に並びます。スマートフォンのような狭い画面では、会話が先に表示され、その下にプレビューが表示されます。
トップバー
上部のバーは現在地を示します。Studio タブでは Projects とプロジェクト名が表示されます。ほかのタブでは、タブ名に続いて、その中で開いているセクションやビューが表示されます。たとえば Projects / Crumb & Co bakery / Settings / Domain のようになります。最後より前の各部分は、そこに戻るリンクです。画面が広いと、プロジェクトの公開アドレスが名前の横に表示され、クリックすると新しいタブでサイトが開きます。
その線の下に言葉のタブが並び、開いているものに下線が付きます。スマートフォンでは並びが横にスクロールし、上の線にはプロジェクト名だけが表示されます。
| タブ | 含まれるもの | 続きを読む |
|---|---|---|
| Studio | 会話とプレビューです。変更の依頼や質問はここで行います。 | 変更を加える |
| Visual Editor | ページの横にパネルが並ぶ、自分専用のエディター: 何かをクリックすると文章、画像、見た目を変更でき、クレジットを使わずに公開できます。有料プランに含まれます。 | ビジュアルエディタ |
| Analytics | 訪問者数、ページ、流入元を、Data ビューと Settings ビューで確認できます。 | Analytics |
| Marketing | サイトの SNS アカウント向けの投稿です。Briks で投稿機能が使えるようになると、タブが表示されます。 | マーケティングとSNS投稿 |
| Media | 最後に公開した状態でサイトに表示されているすべての画像と動画が、それぞれ Replace 付きで並びます。 | メディアライブラリ |
| Database | サイトが保存しているデータをコレクションごとに表示します。プロジェクトにデータベースができると表示されます。それまでは、作成できるようにOwnerとAdminにだけ表示されます。 | データベース |
| ストレージ | プロジェクトがページ用と皆さん用に保管するファイルで、Files、Usage、Settings の各ビューにあります。 | ストレージ |
| Chatbot | 公開したサイトのためのチャットです。サイト自身のページから答え、答えられないことは担当者に引き継ぎます。 | チャットボット |
| Settings | そのほかすべてです。プロジェクトの名前とマーク、ドメイン、フォーム、チャット、メール、バージョン、バックアップ、開発者向けツールが含まれます。 | 以下をご覧ください |
サイトを初めて公開すると、バーの右端にグレーのPreviewタグとPublishボタンが表示されます。ビルドはまずプレビュー用のアドレスに反映されます。このアドレスは検索エンジンに載らず、フォームから送信されたメッセージはメールではなくスタジオに保管されます。Publishを押すと公開前チェックが実行され、修正の必要がなければサイトが本番環境に移ります。その後、ボタンの表示はIn productionに変わり、クリックするとBack to previewを選べます。
会話
左側は、あなたとBriksの会話が続いていく画面です。あなたのメッセージは右側の濃い色の吹き出しに、Briksの返信は左側に表示されます。各返信の下には小さな行があり、そのリクエストで請求されたクレジットとおおよその所要時間が出ます。会話の上にあるステータスピルには、サイトの状況(Draft、Building、Live、Needs attention)が表示され、何かが課金されたあとは、プロジェクトの累計クレジットも表示されます。
土曜日の営業時間をフッターに追加して:9時から13時のように、ふだんの言葉で変更を依頼します。Briksが作成して公開します。変更を加えるをご覧ください。- Ask a question: たとえば
When did the site last change?のように質問できます。Briksは何も作らず、スレッドの中で答えます。質問するをご覧ください。 - 最初のビルドの前にBriksからの質問に答えるか、これらの手順がオンの場合は、文章、見た目、ヒーローを承認します。ビルド中の承認をご覧ください。
入力するまで、下の欄には “Change the hero, add a page, adjust the colours…” と表示されています。Enterで送信し、Shift+Enterで改行します。欄の横には Attach pictures、Add from your media、Speak your request の3つのボタンがあります。その下のスイッチ Check the site after this change をオンにすると、公開済みのサイトを4つの画面サイズで確認し、表示が崩れている箇所を修復します。数分余計にかかります。この選択は、お使いのブラウザでそのサイトごとに記憶されます。
ロールがViewerの場合、入力ボックスの代わりに「You can view this project. Changes are made by Editors, Admins and Owners of this workspace.」というメモが表示されます。会話全体とプレビューは引き続き見られます。
構築中のとき
会話にパネルが表示され、タイマー、作業の各ステップ、そしてBriksがいま何をしているかを示す1行が出ます。変更の場合のステップはApplying your changes、Verifying build、Publishingで、チェックをオンにしていればChecking the published siteも加わります。タイマーの横にはStopボタンがあります。入力ボックスは開いたままで、ボタンはQueueに変わるので、この作業が終わる間に次の依頼を並べておけます。
プレビュー
右側には、公開済みの実際のサイトがフレームの中に表示されます。画像ではないので、スクロールしたり、ボタンをクリックしたり、サイト自身のメニューでページを移動したりできます。上のタグにはLive previewと最後に公開した時刻が表示され、公開するたびに少し待つとフレームが自動で再読み込みされるため、いつも訪問者と同じ画面を確認できます。
| 管理 | できること |
|---|---|
| デスクトップ | サイトをフレームの全幅で表示します。 |
| Tablet | 縦に持ったタブレットのように、枠付きで幅834ピクセルで表示します。 |
| Phone | 一般的なスマートフォンと同じ、幅390ピクセルで表示します。 |
| ページの一覧 | サイトが複数ページになると表示されます。ページを選ぶと、フレーム内で開きます。 |
| 元に戻す・やり直しの矢印 | ひとつ前のバージョンに戻したり、もう一度進めたりできます。バージョンをご覧ください。 |
| Versions(時計のアイコン。v7 のように現在の番号が表示されます) | 保存されたすべてのバージョンを一覧にし、Make live と Test against live を使えます。 |
| Reload preview | 公開を待たずに、ページを再読み込みします。 |
| Full screen | プレビューをウィンドウ全体に表示します。Escキーで閉じます。 |
| Open in new tab | サイトを専用のアドレスで開きます。 |
初めて公開する前は、まだ表示できるサイトがありません。そのため、プレビューにはBriksが計画して書き進めるとおりに、ページが部分ごとに並びます。ほかのページが計画されると、小さなタブ(Homeと各ページの名前)で、それぞれのページを見られるようになります。この表示については、ビルドの様子を見るで説明しています。
Settings タブ
Settings には、独立したタブがないものがすべて集まっています。General が最初に開き、すべてのセクションが左側にグループごとに並びます。スマートフォンのような狭い画面では、一覧は Settings: と開いているセクション名が書かれた1つのコントロールにまとまります。タップすると別のセクションを選べます。
| セクション | グループ | 用途 | 続きを読む |
|---|---|---|---|
| General | 上部 | 名前、ロゴ、ファビコン、Built with Briksバッジ、Made with Briks、コピー、移動、削除についてです。 | プロジェクト設定 |
| ドメイン | 上部 | サイトのアドレスと、お持ちのドメイン。 | ドメインを接続する |
| Preferences | 上部 | すべての制作が守るルール、画像の入手元、各変更の内容、サイトが読み込みを許可されているウェブサイトについてです。 | プロジェクト設定 |
| Forms | フォームとメール | 訪問者がサイトのフォームから送信した内容です。 | フォーム |
| Chats | フォームとメール | 過去90日間にサイトのチャットで訪問者が交わしたすべての会話を、新しい順に表示します。Export CSV もあります。 | チャットボット |
| Emails | フォームとメール | サイトから訪問者に送るメール。 | サイトメール |
| Sign-in と Payments | Accounts and payments | サイトの訪問者がどのようにサインインするか、そしてサイトが決済に使う決済サービスを、それぞれご自身のキーで設定します。 | サインインと支払い |
| Versions | バージョンとバックアップ | 公開されたすべてのバージョンです。それぞれ復元できます。 | 公開済みバージョン |
| Backups | バージョンとバックアップ | コードのすべてのバージョンを、復元できる状態で保存しています。有料プランならダウンロードもできます。 | Backups |
| File Explorer | Developer | サイト用に書かれたコードです。読んで編集でき、有料プランではダウンロードもできます。 | サイトのコード |
| GitHub | Developer | サイト自身のコードをGitHubリポジトリに保管し、双方向で同期します。 | GitHub連携 |
| Secrets | Developer | サイト自身のコードが読み取るキーとパスワードです。一度保存した値は、二度と表示できません。 | Secrets |
| Webhooks | Developer | サイトで何かが起きたときに、ほかのサービスに知らせます。 | Webhook |
| Deploy hooks | Developer | 呼び出されるとプロジェクトを再び公開する、秘密のアドレスです。 | デプロイフック |
| 定期タスク | Developer | プロジェクトがあなたのタイムゾーンのスケジュールで行う呼び出しです。 | 定期タスク |
| Logs | Developer | すべてのビルド、変更、公開と、それぞれが通った手順です。 | Logs |
これらのセクションが Settings に移る前に保存されたリンク、たとえば古いメールにあるリンクも、そのまま使えます。同じセクションがここで開きます。
最初の一歩を順を追って
新しいプロジェクトで過ごす10分
ステータスを確認する
場所: Studio
会話の上にあるピルを見てください。Liveは、直近の公開が完了したことを表します。Needs attentionは、直近のジョブが失敗したことを表し、理由は会話に表示されます。
スマホで見る
場所: Preview toolbar
Phoneをクリックして、ページ全体をスクロールし、メニューを開いてみてください。直したくなる点の多くは、まずここで見つかります。
ページを順にクリックして確認
場所: Preview
フレーム内のサイト独自のメニューを使って、訪問者と同じように各ページを見て回れます。
バージョンを開く
場所: Versions
バージョン番号の横にある時計アイコンをクリックします。すべての制作と変更が一覧になり、訪問者に表示されているものには Live と表示されます。
きちんと名前を付ける
場所: Settings, General
Settings タブを開くと、General が表示されます。プロジェクト名を確認し、ロゴとファビコンがあれば追加して、Name and marks の下にある Save を押してください。
最初の変更を頼んでみましょう
場所: Studio
Studio に戻り、具体的な変更を1つ書いてEnterを押します。手順を見守り、再読み込みされたらプレビューを確認します。
準備ができたら公開する
場所: Top bar
Publish を押してください。最初にローンチチェックが実行され、その結果が会話に届きます。
ロールごとに見えるもの
| ロール | プロジェクトページで |
|---|---|
| OwnerとAdmin | プロジェクトの削除、別のワークスペースへの移動、アドレスの変更を含む、すべての操作です。 |
| Editor | 変更、質問、公開、バージョン、A/Bテスト、Visual Editor、コード編集。削除、移動、アドレスの変更は含みません。 |
| Viewer | 会話、プレビュー、バージョン一覧、アナリティクスを閲覧のみできます。プロンプト欄もChatsログもなく、Visual Editorは見てコメントするためだけに使えます。 |
ロールはひとつのプロジェクトではなく、ワークスペースに属します。一覧表はメンバーとロールをご覧ください。
Publishボタンがないのはなぜですか?
サイトを初めて公開すると表示されます。それまでは、本番環境に移すものがありません。
Databaseタブが表示されないのはなぜですか?
プロジェクトにデータベースができると表示されます。それまでは Owner と Admin にだけ表示され、そこから作成できます。作り方はデータベースで説明しています。
Visual Editorタブが表示されないのはなぜですか?
ビジュアルエディターは有料プランに含まれるため、Freeのワークスペースにはこのタブが表示されません。プランの変更は、Ownerが Billing から行えます。ビジュアルエディターをご覧ください。
プレビューが古いようです。
Reload preview をクリックします。公開後、フレームは新しいバージョンがすべての場所に行き渡るよう、数秒待ってから再読み込みします。
ビルドを止められるのは誰ですか?
Editor、Admin、Owner。まだ始まっていないものを止める場合、クレジットはかかりません。