サンプルサイトの表示を変える

備考

想定作業時間：5分

概要

KurocoEdgeは既存のシステムに修正を加えることなく、あらゆるサイトに様々な機能を後づけできるサービスです。
ビギナーズガイドとして以下の3ステップを準備しました。

1. サンプルサイトの表示を変える
2. 自身のサイトの表示を変える
3. KurocoEdgeを導入する

本チュートリアルでは、ディバータが準備をした以下のサンプルサイトのテキストを、あなたのKurocoEdgeアカウントから編集してみます。

https://astro-shopify-diverta.vercel.app/

フリートライアル申込

まずは、KurocoEdgeのフリートライアル に申し込みます。
サイトキーはお好きな文字列を入力ください。

登録したメールアドレスに、「KurocoEdgeの管理画面設定が完了いたしました！」のメールが届きます。
メールに記載されたURLをクリックするとKurocoのログイン画面が表示されるので、登録したメールアドレスとメールに記載の仮パスワードでログインし、自身のパスワードを設定します。

ログインすると、Kuroco管理画面が表示されます。

動作の確認

KurocoEdgeの管理画面が確認できたら、簡単なルールを設定して、早速動作の確認します。
ここでは例として、サイトに表示されているテキストを任意のテキストに置換します。
[KurocoEdge sample]の表示を[My First sample]に置換してみましょう。

デプロイの設定

[Kurocoエッジ]->[デプロイ一覧]をクリックします。

デフォルトのデプロイ Version 1が表示されます。

ステータスが運用中のデプロイは編集できません。
[クローン]をクリックして、ドラフトのデプロイを作成します。

クローンされたドラフト状態のデプロイが開くので、バックエンドホストにastro-shopify-diverta.vercel.appを設定します。

次に、ルール一覧横の [追加]をクリックします。

レスポンスタブの[アクション追加]をクリックします。

アクションが開くので設定のドロップダウンメニューを開き、[項目追加]をクリックします。

以下のように設定し、[更新する]をクリックします。

項目	値
処理	テキストの置換
置換前	KurocoEdge sample
置換後	My First sample

設定ができたら[プレビュー]をクリックして、追加したルールが想定通りに適用されていることを確認します。

プレビューモードでMy First sampleの表示が確認できました。

最後に[運用中にする]をクリックして設定は完了です。
編集がロックされ、デプロイが運用中になります。

まとめ

以上で、KurocoEdgeの動作確認ができました。
このように既存サイト(https://astro-shopify-diverta.vercel.app/)側で編集を加えることなく、 KurocoEdgeからサイトの表示を調整することができます。

次は自身のサイトの表示を調整してみましょう。

• 自身のサイトの表示を変える