【Skeleton by TechFighter 導入手順（Step-by-Stepガイド）】
Step 1：Bubbleエディターにログインする

Bubbleの管理画面（エディター）にログインします。

Step 2：事前設定（重要）

左メニューの
「Settings」→「General」→「Advanced options」に進み、
「Expose the option to add an ID attribute to HTML elements」にチェックを入れます。

Step 3：プラグインのインストール

左メニューの「Plugins」をクリックします。
「Add plugins」をクリックし、検索欄に「Skeleton by TechFighter」と入力します。
該当するプラグインを選び、「Install」をクリックしてインストールします。

Step 4：エレメントをページに追加する

左メニューから「Design」を選び、スケルトン表示を使いたいページを開きます。
エレメント追加パネル下部の「Visual elements」または「Plugins」内にある
「Skeleton by TechFighter」のエレメントをページに配置します。

Step 5：エレメントのプロパティ設定

配置したエレメントをクリックし、プロパティパネルで以下を設定します。

テキスト型スケルトンのID接頭辞（prefix_id_type_text）

長方形型スケルトンのID接頭辞（prefix_id_type_rectangle）

円形型スケルトンのID接頭辞（prefix_id_type_circle）

角丸長方形型スケルトンのID接頭辞（prefix_id_type_rounded）

基本色（base_color）

ハイライト色（highlight_color）

アニメーション速度（animation_speed）

初期表示を有効にするか（default_value）

Step 6：対象エレメントにID属性を設定する

スケルトン表示を適用したいエレメント（例：テキスト、画像）をクリックし、
プロパティパネルの一番下にある「ID attribute」に、Step 5で設定した接頭辞を含めた一意のIDを入力します。

（例）
接頭辞が「txt_」なら、「txt_title」や「txt_description」などのIDを設定します。

Step 7：ワークフローを設定する

左メニューの「Workflow」をクリックし、
スケルトン表示を制御したいイベントを作成します（ページロード時、ボタンクリック時など）。
以下のアクションから用途に応じて選択します。

enable（スケルトンを表示する）

disable（スケルトンを非表示にする）

toggle（スケルトン表示を切り替える）

Step 8：動作確認

右上の「Preview」をクリックして、プレビュー画面でスケルトン表示の動作を確認します。



English:

Skeleton by TechFighter Plugin – Step-by-Step Setup Guide

Step 1: Log in to your Bubble Editor

Log in to your Bubble editor dashboard.

Step 2: Pre-installation Setup (Important)

From the left sidebar, click Settings → General → Advanced options.

Make sure to check (enable) the option:

"Expose the option to add an ID attribute to HTML elements"

Click "Save" at the bottom of the page.

Step 3: Install the Plugin

Click "Plugins" on the left sidebar.

Click the "Add plugins" button, then type "Skeleton by TechFighter" into the search box.

Select the plugin from the search results and click "Install".

Step 4: Add Plugin Element to Your Page

Navigate to the page where you'd like to use the Skeleton UI (click "Design" from the sidebar).

From the left sidebar under the "Visual elements" or "Plugins" section,
drag and drop the "Skeleton by TechFighter" element onto your page.

Step 5: Configure Element Properties

Click the placed element to open its properties panel.

Configure the following settings according to your needs:

Prefix ID for text skeletons (prefix_id_type_text)

Prefix ID for rectangular skeletons (prefix_id_type_rectangle)

Prefix ID for circular skeletons (prefix_id_type_circle)

Prefix ID for rounded rectangles (prefix_id_type_rounded)

Base color (base_color)

Highlight color (highlight_color)

Animation speed in seconds (animation_speed)

Set initial visibility (default_value)

Step 6: Assign ID Attributes to Target Elements

Click on each element you want to show the skeleton UI for (e.g., text or images).

At the bottom of each element’s properties panel, input a unique ID starting with the prefix defined in step 5.

For example:

If the prefix is txt_, set IDs like txt_title or txt_description.

Step 7: Configure Workflows to Control Skeleton Display

Click "Workflow" from the left sidebar.

Add or select an event (e.g., "When page is loaded", "When button is clicked", etc.).

Within the event, add plugin actions as needed:

enable: Shows the skeleton UI

disable: Hides the skeleton UI

toggle: Toggles the visibility of the skeleton UI

Step 8: Preview and Test

Click "Preview" in the top right corner of the Bubble editor to verify the skeleton UI functionality.