並べ替えと一括操作でバリアブルを大規模に管理できるようになりました！

※この記事は2024年9月4日にWebflowが公開した下記アップデート情報・ニュースを日本語訳したものです（一部加筆・修正あり）

Manage variables at scale with reordering and bulk actions

‍

Webflowのアップデートで、デザイナーと開発者は手動による並べ替えと一括操作を使用して、サイトのバリアブルをより適切に管理できるようになりました。

構造化されたタイプとサイズランプ、簡単なセマンティックカラーのグループ化、不要になったデザイントークンのクリーンアップなど、バリアブルを好みに合わせて整理できます。

キーボードのパワーユーザー向けに、更新されたバリアブルパネルには、より高速なキーボードナビゲーションとコントロールも含まれています。

‍

バリアブルを並べ替える

ドラッグアンドドロップでバリアブルを並べ替えるには、デザイナーでバリアブルパネルを開き、次の操作を行います。

• バリアブル名 (またはグループ名) の上にマウスを移動します。名前の左側にドラッグ ハンドル アイコンが表示されます。
• ドラッグ ハンドルをクリックし、青いドロップ インジケーター ラインが目的の位置に表示されるまでバリアブルまたはグループをドラッグします。
• ドラッグハンドルを放して、新しい位置を固定します。

キーボードでバリアブルをドラッグアンドドロップするには

• 矢印キーを使用して、バリアブル (またはグループ) の名前の左側にあるドラッグハンドルに移動します。
• バリアブルを「取得」するには、ENTER キーまたは SPACEキーを押します。

• 上/下矢印キーを使用してバリアブルを「ドラッグ」します。青いドロップ インジケーター ラインがキーストロークに従います。
• もう一度 ENTERキーまたは SPACEキーを押すとバリアブルが「削除」され、キャンセルするには ESC キーを押します。

ライブラリを介して共有される場合も、バリアブルの順序は維持されます。

‍

バリアブルの一括アクション

バリアブルパネルを使用して、デザイナーでバリアブルを一括編集することもできます。

1. バリアブルパネルのヘッ​​ダーにある「選択」ボタンを押して選択モードに入ります。または、バリアブル名の上にマウスを置いて、表示されるチェックボックスを押すこともできます。
2. チェックボックスを使用して、必要なバリアブルを選択します。リストヘッダーのチェックボックスを選択すると、リスト内のすべてのバリアブルが選択され、各グループ名の横にあるチェックボックスを選択すると、グループ内のすべてのバリアブルが選択されます。
3. 選択が完了したら、バリアブルパネルのボタンを使用してこれらのバリアブルをグループ化または削除できます。または、ドラッグハンドルを使用してこれらのバリアブルを一括で移動することもできます。

一括操作はキーボードを使用して完了することもできます。

バリアブルパネルを閉じずに選択モードを終了するには、ESCキーを押します。

‍

より高速なキーボードナビゲーション

このアップデートでは、バリアブルパネルへのキーボード アクセスも高速化されました。

リストをすばやく移動するには、次の操作を行います。

• バリアブルグループ間を移動するには、TABキーを使用します。
• グループ内の行間を移動するには、上下矢印キーを使用します。
• 行内を移動するには、左矢印キーと右矢印キーを使用します (選択モードでは一部のコントロールが無効になることに注意してください)

Webflow University でバリアブルを使用した構築について詳しく解説されています。

‍

‍