FRONT-END.AI Blog

FRONT-END.AIやAI/機械学習に関する最新情報を発信しています

エディタ新バージョンをリリースしました!

FRONT-END.AI はAIが解析したhtml / cssを必要に応じて編集する「エディタ機能」を備えています。 8/12 にエディタの新バージョンをリリースしましたので、リリース内容を紹介します。

※下記はご利用企業様向けのニュースレターから抜粋・加筆したものです。


【Newsletter】はユーザーの皆さまにより快適にご活用いただけるよう、機能アップデートや使い方のコツなどをお届けします。

<本日のラインナップ>

  1. エディタ新バージョンを8/12リリース!
  2. 「グループ全解除」機能を追加
  3. 親要素の座標を移動すると、子要素も一緒に移動が可能に
  4. 新規エリア作成モードの継続
  5. その他UI改善

1. エディタ新バージョンを8/12リリース!

操作性・パフォーマンスの向上のため、エディタ(検出結果編集画面)のUIを変更致します。

新たに「インスペクタ」カラムを設け、左から大きく分けて「デザインカンプ」「HTMLツリー」「インスペクタ」の3カラム構成になり、より構造を理解しやすくなります。

新バージョンのエディタの画像
新バージョンのエディタ画面

新たに追加された「インスペクタ」では、従来ツリー内で編集していたhtml要素の属性やテキストなどをツリーに代わって編集できます。

2. 「グループ全解除」機能を追加

「グルーピング(divやulなどで囲むこと)はいちから自分で行いたい!」という要望にお応えし、検出した要素はそのままにグルーピングをリセットする機能を追加しました!

要素を全選択後にグループ全解除ボタンを押下することで、要素が全てフラットな状態となります。

(gifは旧エディタ版での収録です)

f:id:moongift:20210819212451g:plain

3. 親要素の座標を移動すると、子要素も一緒に移動が可能に

カンプエリアで親要素を移動すると子要素も一緒に移動できるようになりました!

例えばグループを複製後に要素を1つ1つ移動させるのではなく、

グループを移動することで子要素を含めて一括で移動できます。

f:id:moongift:20210819212556g:plain

4. 新規エリア作成モードが自動でOFFにならず継続

連続してエリア作成ができるようになりました!

【ショートカット】

エリア作成 ⇨ R

編集モードに切替 ⇨ V

f:id:moongift:20210819212621g:plain

5. その他、UI改善

  • 子要素作成直後、タグ選択のドロップダウンを表示
  • formタグ内のボタンはbuttonタグで出力
  • thやtdのグルーピング時は自動でtrで囲む
  • その他UI改善

今回のアップデート情報は以上となります🙌

\お気軽にお問い合わせください/

デモのリクエストはこちら