フォローする

Chrome拡張版 UIエディターの利用方法

このページについて

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

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

 

準備

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

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

 

デザイン案を作成する

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

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

kaizen_editor01.png

 

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

kaizen_editor02.png

 

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

kaizen_editor03.png

 

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

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

kaizen_editor04.png

 

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

kaizen_editor05.png

 

デザイン案を保存する

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

kaizen_editor06.png

 

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

kaizen_editor07.png

 

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

kaizen_editor07_2.png

 

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

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

kaizen_editor08.png

 

デザイン案を投稿する

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

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

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

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

kaizen_editor09.png

 

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

kaizen_editor10.png

 

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

kaizen_editor11.png

 

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

kaizen_editor13.png

 

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

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

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

kaizen_editor14.png

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

 

この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています
他にご質問がございましたら、リクエストを送信してください

0 コメント

ログインしてコメントを残してください。