WebflowウェブサイトにSoundcloudトラックを統合する

重要： このガイドでは、Webflow の埋め込み機能を利用してカスタマイズされたコードを追加します。埋め込み機能は、有料のサイト プランおよび Core、Growth、Agency、Freelancer Workspace プランで利用できます。 

動的埋め込みを使用すると、CMS コレクション フィールドを利用して埋め込みコードを動的に更新できます。このガイドでは、動的埋め込みを活用してサイト上の各曲のレビューに SoundCloud トラックを表示する音楽 Web サイトを設計します。 

ぜひ当社の ライブ音楽サイト または デザイナーでサイトをプレビューする. 

このチュートリアルでは、次の内容を取り上げます。 

1. 曲のレビューのための Webflow コレクションを作成するためのガイダンス
2. SoundCloudトラックをWebflow CMSに組み込む 
3. 動的埋め込みの構築

曲のレビューのためのWebflowコレクションを作成する

最初に、曲のレビューとそれぞれの SoundCloud トラック ID (つまり、SoundCloud トラックの固有の識別子) を保存するための CMS コレクションを作成します。 

必須フィールドを含むコレクションを設定するには: 

1. アクセス CMSパネル
2. 「新しいコレクションを作成する"アイコン
3. 割り当てる タイトル コレクションに追加（例：「曲のレビュー」） 
4. 打つ 新しいフィールドを追加 
5. 選択する プレーンテキスト 
6. フィールドに「Soundcloud トラック ID」というラベルを付けます
7. プレス フィールドを保存
8. (オプション) 追加のコレクション フィールド (アーティスト、アルバム アート、レビュー、評価など) を追加します。
9. クリック コレクションを作成今後の参照用にこのタブを開いたままにしておいてください。 

SoundCloudトラックをWebflow CMSに組み込む 

SoundCloud トラックを Webflow CMS に挿入するには、SoundCloud からトラック ID を取得する必要があります。これらの ID は、SoundCloud トラックの個別のマーカーとして機能し、コレクション内の各曲のレビューでトラックが正確に表示されるようにします。SoundCloud 埋め込みコードからトラック ID を抽出します。 

SoundCloud埋め込みコードの生成 

SoundCloud 埋め込みコードを作成するには: 

1. SoundCloudのトラックをご覧ください 
2. クリック 共有 アイコン
3. 選択する 埋め込み
4. (オプション) SoundCloud プレーヤーの外観、サイズなどをカスタマイズします。
5. コードをコピーします コード セクションを開き、このタブを参照用に保持してください。 

重要： Webflowサイトのタブを閉じた場合は、 CMSパネル 前の手順から曲のレビューコレクションを選択します。

SoundCloud のトラック ID を使用して曲のレビューを作成する 

SoundCloud トラック ID の値を取得するには: 

1. 「/tracks/」の後の文字列をコピーします。 コード セクション
2. Webflowの曲レビューコレクションに戻る
3. 曲のレビューのための新しいコレクションアイテムを開始する
4. (オプション) 追加のコレクション フィールド (アーティスト、アルバム アート、レビュー、評価など) を入力します。 
5. SoundCloudからコピーしたキャラクターシリーズを貼り付けます サウンドクラウドトラックID 分野 
6. クリック 作成する

トップ提案: SoundCloudコードをコードエディタに挿入することができます。 崇高なテキスト または ビジュアルスタジオコード トラックIDの識別が容易になります。 

Webflow に含める各曲レビューに対して、埋め込みコードを生成し、SoundCloud トラック ID を使用して曲レビューを作成するプロセスを繰り返します (つまり、将来さらに曲レビューを追加するには、新しいコレクション項目を作成し、SoundCloud 埋め込みコードから SoundCloud トラック ID を取得して、適切なコレクション フィールドに挿入する必要があります)。 

動的埋め込みの構築

動的埋め込みは動的コンテンツでのみ機能し、コレクション ページまたは静的ページのコレクション リスト内への適用を示します。曲のレビュー コレクションを参照している場合は、埋め込みを曲のレビュー コレクションにリンクされたコレクション ページに挿入するか、コレクション リストを曲のレビュー コレクションに添付する必要があります。 

重要： SoundCloud 埋め込みコードのあるタブを閉じた場合は、SoundCloud に移動して、前の手順で作成した埋め込みコードをコピーします。

動的な埋め込みを生成するには、Soundcloud 埋め込みコードを Webflow サイトに挿入し、埋め込み内の Soundcloud トラック ID を対応するコレクション フィールドに置き換えます。 

1. 案内する パネルを追加 > 高度な
2. 含める 埋め込み SoundCloudトラックを表示したいエリアに要素を追加します
3. WebflowコードエディタにSoundcloud埋め込みコードを貼り付けます 
4. 文字と文字シリーズの投稿「/tracks/」をハイライトします 
5. クリック フィールドを追加
6. を選択 サウンドクラウドトラックID 分野 
7. プレス 保存して閉じる 

このプロセスにより、埋め込みで各曲のレビューに対応する曲が表示されることが保証されます。

準備ができたら、Web サイトを公開して、新しく統合した SoundCloud トラックを表示しましょう。 

トップ提案: コレクション ページとコレクション リスト内での条件付き表示の使用を拡張して、サウンドトラック トラック ID がない曲のレビュー項目の埋め込まれた SoundCloud プレーヤーを非表示にします。

重要： Soundcloud プレーヤーはデザイナー キャンバスには表示されません。デザイナーの埋め込みプレーヤーのプレビューにはアクセスできず、プレースホルダーが代わりに表示されます。公開後またはサイトのエクスポート後、プレーヤーは指定された位置に表示されます (つまり、表示されます)。カスタム ドメインにサイトを展開する前に埋め込みプレーヤーをプレビューしたい場合は、サイトを webflow.io ステージング サブドメインに公開できます。