FireworkとDudaを連携する方法

Dudaはプロ向けのウェブサイトビルダーです。Duda App Storeを使ってFireworkと連携することができます。

Fireworkアプリをインストールする

ステップ1

Dudaウェブサイトダッシュボードにアクセスします。

ステップ2

左側のナビゲーションメニューから「APP STORE」をクリックし、「Firework」を検索します。

ステップ3

「+ Add App」をクリックします。

ステップ4

ご希望のプランの「Choose」ボタンをクリックしてプランを選択します。しばらく読み込みが行われた後、完了ページが表示されるので「Got it.」をクリックします。

ステップ5

Dudaのサイトダッシュボード内に新しいFireworkアカウントが作成されます。

ウェブサイトのデザインに要素を追加する

ステップ1

Dudaのデザインツールで、Firework動画を埋め込みたい箇所にセクションを追加し、「+ ボタン」をクリックします。「+ ボタン」にカーソルを合わせると「+ Add Section」と表示されます。

ステップ2

「Flex Section」フォルダーから「4 Column」セクションを追加し、「Save」をクリックします。

ステップ3

「Design Panel」を開いて「Grid」を編集します。「1x1」列レイアウトを選択して空白のコンテンツブロックを作成します。

ステップ4

セクションの中央にある「+ ボタン」を押して、コンテンツをセクションに追加します。

ステップ5

ウィジェット追加画面がポップアップ表示されます。「Firework」を検索して選択します。

ステップ6

小さな空白の矩形が読み込まれ、Fireworkの認証情報を入力するためのフローティングポップアップが表示されます。

コンテンツブロックにFireworkプレイリストを挿入します

ステップ1

「APP STORE」に戻り、フローティングポップアップを閉じたまま「Firework App」を開きます。

ステップ2

Duda内の「Firework Business Portal」に戻ります。

コンテンツブロックに追加したいチャンネルまたはプレイリストを選択し、「埋め込み」ボタンをクリックして埋め込み設定に進みます。

ボタンにアクセスするために、フローティングポップアップの移動が必要な場合があります。

ステップ3

標準の埋め込みページがDudaウェブサイト用の「Channel ID」と「Playlist ID」に置き換えられます。

コピーアイコンを使ってIDをクリップボードにコピーし、フローティングポップアップの該当フィールドに貼り付けます。

次にレイアウトを選択し、Duda内のFireworkアプリを閉じます。

コンテンツのサイズを変更する

ステップ1

しばらく読み込みが行われると、小さな空白の矩形が拡大され、動画プレイリストの一部が表示されます。

ステップ2

右側のパネルのデザインツールを使用して、ボックスを縦横の中央軸に揃えます。

「幅（Width）」オプションの右側にある「px」をクリックして「%」表示に変更します（コンテンツブロック全体に対するパーセンテージを表します）。

ステップ3

「100%」に設定して「Done」をクリックします。

ステップ4

ページをプレビューして「公開（publish）」すると、ウェブサイトに動画が追加されます。