エディターで開けないページを編集する「Chrome拡張版 UIエディター」の利用方法 – Kaizen Platform(サイト改善) ヘルプセンター

概要

Chrome拡張機能「Kaizen Platform Assistant」をインストールしていると利用できる、「Chrome拡張版 UIエディター」について説明します。

エクスペリエンス詳細画面から UIエディターを起動しなくても、WEBブラウザで現在開いているページに対して直接デザイン案の作成ができます。

目次
準備
 デザイン案作成手順
 GHライブラリを利用したい場合

準備

1. 拡張機能をインストールもしくはアップデートする

chrome webストアからChrome拡張機能「Kaizen Platform Assistant」をインストールします。すでにインストール済みの方は、最新版にアップデートしてください。

2. 対象ページにアクセスし、オリジナル案を表示する

対象ページにアクセスします。この時、オリジナル案が表示されるようにしてください。オリジナル案を表示させる方法は主に下記の2通りです。

対象ページが直接アクセス可能なページの場合

URLに ?_kz_void=1 のパラメータを付与してください。(パラメータの先頭の ? は、元のURLに応じて & に変更してください。)

対象ページが直接アクセスできないページの場合

直接アクセスできるトップページなどのURLに、?_kzs_bucket=excluded:1 のパラメータを付与してから(パラメータの先頭の ? は、元のURLに応じて & に変更してください。)、対象ページまで遷移してください。

どちらの方法でもオリジナル案が表示できない場合、他の方法をご案内できる可能性がありますので、サポートまでお問い合わせください。

デザイン案作成手順

1. Chromeのデベロッパーツールを起動する

ブラウザ右上のメニュー「その他のツール」から「デベロッパーツール」を起動します。

2. Kaizen Editorを起動する

Chromeデベロッパーツールのタブに「Kaizen Editor」が追加されているので、これを選択します。

3. ページに接続する

デザイン案を作成したいページのオリジナルデザインが表示されているのを確認してから、「ページに接続する」ボタンを押します。

4. コードを記述する

「CSS」と「JavaScript」のタブを切り替えつつ、コードを記述していきます。

5. コードをページに反映する/最初の状態に戻す

「反映する」ボタンを押すと、現在記述されている「CSS」と「JavaScript」がページに反映されます。

画面上に変更内容が反映されますが、UIエディターと同様、元ページのHTML・CSSを直接書き換えているわけではありません。

※「反映する」がクリックできない場合、Kaizen Platform Assistantの「Load JavaScript」をOFFにし、ページを再読み込みしてみてください

また、「最初に戻す」ボタンを押して、ページの状態を反映前に戻すこともできます。

6. デザイン案を保存する

「保存する」ボタンを押すと、現在記入されている「CSS」と「JavaScript」が保存されます。

保存した「CSS」と「JavaScript」は「Storage」タブを開いて確認することができます。

「Storage」では、一番左のメニューを開いて、保存したコードの呼び出しや複製を行うこともできます。

また、コードの自動反映の機能もあります。

一番右の「auto load」にチェックを入れることで、ページの再読み込み時にコードを自動的に反映します。「Kaizen Editor」を起動した状態で、作成したURLと同じページを読み込んだ場合にのみ実行されます。

7. デザイン案を投稿する

デザイン案を投稿する方法について説明します。

「Kaizen Editor」で作成したデザイン案を投稿するには、事前にデザイン案を保存しておく必要があります。

保存したら、ブラウザの別タブを開いて、投稿したいエクスペリエンスの詳細画面を表示し、「デザイン案を作成する」ボタンを押してUIエディターを起動します。
---
※エクスペリエンスの「UIエディター及びプレビュー用URL」を、エディターが開けるページのURLにあらかじめ変更しておいてください。これにより、プレビューでは関係のないページにデザイン案コードを反映することになるため、崩れが発生することがあります。対象ページのデザインに崩れが発生していなければ、問題ありません。
投稿後に、「UIエディター及びプレビュー用URL」を元のURLに戻し、プレビューをご確認ください。
※誤ってエクスペリエンスの対象URLを変更してしまわないようご注意ください

UIエディターの画面上で、「デベロッパーツール」を起動し、「Kaizen Editor」を開きます。

「Storage」から先ほど保存した「CSS」と「JavaScript」のメニューを開き「編集する」を選択します。

選択したIDが黄色になっていることを確認してから、「エディタにコピー」ボタンを押します。

選択したIDの「CSS」と「JavaScript」の内容が、UIエディターの方にコピーされていることを確認します。

「Kaizen Editor」（「デベロッパーツール」）を閉じます。

後は通常のUIエディターでの投稿の操作と同じです。

「反映」ボタンを押して反映内容を確認したら、「投稿する」ボタンから投稿します。

※ 「デベロッパーツール」を起動した状態で投稿しようとすると、投稿モーダルが閉じないことがあります。その場合でも投稿は完了しています。投稿済みのデザイン案は「あなたのデザイン案」で確認できます。

GHライブラリを利用したい場合

Chrome拡張版UIエディターでデザイン案を作成する場合、かつ、エクスペリエンスが実行されない状況下でデザイン作成する場合、GHライブラリをそのまま利用することができません。

その場合はお手数ですが、拡張機能 Growth-Hack-Library について Chrome拡張版 UIエディターで利用したい時に記載の方法にてデザイン案の作成をお願いいたします。

概要

準備