Chrome拡張版 UIエディターの利用方法 – Kaizen Platform ヘルプセンター

Chrome拡張機能「Kaizen Platform Assistant」のUIエディターについて説明します。

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

Google Chrome ウェブストアからChrome拡張機能「Kaizen Platform Assistant」をインストールします。

すでにインストール済みの方は、最新版にアップデートしてください。

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

タブに「Kaizen Editor」が追加されているので、これを選択します。

デザイン案を作成したいページに遷移してから、まず「ページに接続する」ボタンを押します。

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

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

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

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

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

その場合はお手数ですが、こちらのページに記載の方法にてデザイン案の作成をお願いいたします。

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

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

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

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

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

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

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

保存したら、ブラウザの別タブを開いて、投稿したいエクスペリエンスの詳細画面を表示し、「デザイン案を作成する」ボタンを押してUIエディターを起動します。

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

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

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

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

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

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

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

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