Setting -> Add-ons -> Add-ons STORE から ESPHome Builder アドオンをインストールします。Show in sidebar を有効にし、左ナビゲーションバーに追加します。
 
 
 ESPHome アドオンページを開き、右下の NEW DEVICE をクリックして新しいデバイスを作成します。
 New device プロンプトが表示されたら、CONTINUE ボタンをクリックします。
 デバイス名を入力します(例: Atom-Lite)。
 次にデバイスタイプ選択画面が表示されます。まず Use recommended settings のチェックを外し、ESP32 を選択して進みます。
 詳細ページで M5Stack-ATOM を探し、選択して NEXT をクリックします。
 「デバイスの設定が完了しました」と表示されます。key をコピーし、INSTALL をクリックします。
 Manual download を選択し、プログラムのコンパイルとインストールが完了するのを待ちます。
 上記の手順が完了したら、ESPHome Builder のメイン画面に戻ると、新しい Atom-Lite デバイスが表示されます。EDIT ボタンをクリックして YAML ファイル編集ページに進みます。
 以下のコードを YAML ファイルにコピーし、画像で示されている ssid と password をあなたの Wi-Fi の認証情報に変更してください。
esphome:
  name: atom-lite
  friendly_name: Atom-Lite
esp32:
  board: m5stack-atom
  framework:
    type: arduino
logger:
api:
  encryption:
    key: "*****************"
ota:
  - platform: esphome
    password: "***************"
wifi:
  ssid: "***********"
  password: "************"
  ap:
    ssid: "Atom-Lite Fallback Hotspot"
    password: "jFsIc2XGuKRe"
captive_portal:
binary_sensor:
  - platform: gpio
    pin:
      number: GPIO39
      mode: INPUT
      inverted: true
    name: "Atom Button"
    id: atom_button
    filters:
      - delayed_on: 50ms
      - delayed_off: 50ms
    on_multi_click:
      - timing:
          - ON for at most 0.8s
          - OFF for at most 0.5s
          - ON for at most 0.8s
          - OFF for at least 0.2s
        then:
          - logger.log: "Double Clicked"
          - light.turn_on:
              id: atom_light
              red: 100%
              blue: 50%
              green: 20%
              brightness: 50%
      - timing:
          - ON for at least 0.8s
        then:
          - logger.log: "Single Long Clicked"
          - light.turn_on:
              id: atom_light
              green: 100%
              blue: 50%
              red: 30%
              brightness: 100%
light:
  - platform: neopixelbus
    type: GRB
    pin: GPIO27
    num_leds: 1
    variant: sk6812
    name: "Atom RGB Light"
    id: atom_light
    restore_mode: RESTORE_DEFAULT_OFF
    effects:
      - random:
          name: "Random"
          transition_length: 1s
          update_interval: 1s
 まず SAVE ボタンをクリックして YAML ファイルを保存し、次に INSTALL ボタンをクリックしてファームウェアのコンパイルと書き込みを開始します。
 再度 Manual download をクリックしてファームウェアのコンパイルを開始し、完了するまで待ちます。
 コンパイルが完了したら、DOWNLOAD ボタンをクリックすると書き込み方法選択画面が表示されます。ここでは Factory format を選択してローカルに保存します。
 ローカルへのダウンロードが完了するまで待ちます。
 メイン画面に戻り、INSTALL を選択して書き込み方法選択画面に入ります。今回は Plug into this computer を選択し、USB でデバイスを PC に接続して書き込みを行います。
 Open ESPHome Web を選択して書き込み画面に入ります。
 まず CONNECT ボタンをクリックし、PC に接続されているシリアルポートデバイスを選択して接続します(ここにシリアルポートが表示されない場合は、ハードウェア接続を確認してください)。
 INSTALL をクリックしてローカルのファームウェアファイル選択画面に入ります。
 先ほどローカルに保存したファームウェアファイルを選択し、INSTALL をクリックして書き込みが完了するまで待ちます。
 書き込み完了!
 ファームウェアの書き込みが完了後、デバイスは起動すると自動的に Wi-Fi 接続を試みます。Settingに移動し、Discoveredセクションで新しいデバイスを確認してください。ADDをクリックしてデバイスを追加します。
 
 
 
 Setting をクリックして設定画面に入り、Devices & services を選択します。
 検索バーで ESP を検索して ESPHome を見つけ、Atom-Lite を選択します。
 
 Atom-Lite 設定ページでは、Atom RGB Light と Atom Button の 2 つの エンティティ が表示されます。オートメーションはこれらのエンティティを設定することで実現されます。+ボタンをクリックして Automations を追加し、指示に従って設定します。
 
 
 
 
 
 
 
 
 
 
 このように、Atom ButtonとAtom RGB Lightのエンティティを使用してAutomationsを作成しました。このオートメーションの効果は、ボタンをクリックするとライトの状態が切り替わることです。
Overview メニューをクリックしてコンポーネント制御画面に入り、右上の edit ボタンをクリックして編集モードに入ります。
 By card インターフェースで Light を検索し、Atom RGB Light エンティティコンポーネントを選択します。
 コンポーネント設定は以下の通りです:
 
 
 