このページについて
Chrome拡張機能「Kaizen Platform Assistant」 のUIエディターについて説明します。
エクスペリエンス詳細画面から UIエディター を起動しなくても、WEBブラウザで現在開いているページに対して直接デザイン案の作成ができます。
準備
Google Chrome ウェブストア からChrome拡張機能「Kaizen Platform Assistant」をインストールします。
すでにインストール済みの方は、最新版にアップデートしてください。
デザイン案を作成する
ブラウザ右上のメニュー「その他のツール」から「デベロッパーツール」を起動します。
タブに「Kaizen Editor」が追加されているので、これを選択します。
デザイン案を作成したいページに遷移してから、まず「ページに接続する」ボタンを押します。
そして、「CSS」と「JavaScript」のタブを切り替えてコードを記述していきます。
「反映する」ボタンを押すと、現在記述されている「CSS」と「JavaScript」がページに反映されます。
画面上に変更内容が反映されますが、UIエディターと同様、元ページのHTML・CSSを直接書き換えているわけではありません。
また、「最初に戻す」ボタンを押して、 ページの状態を反映前に戻すこともできます。
デザイン案を保存する
「保存する」ボタンを押すと、現在記入されている「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エディターでの投稿の操作と同じです。
「反映」ボタンを押して反映内容を確認したら、「投稿する」ボタンから投稿します。
※ 「デベロッパーツール」を起動した状態で投稿しようとすると、投稿モーダルが閉じないことがあります。その場合でも投稿は完了しています。投稿済みのデザイン案は「あなたのデザイン案」で確認できます。
0 コメント