JavaScriptフレームワーク

EmbedSocialのウィジェットは、フレームワークに依存しない埋め込みウィジェットです。data-ref 属性を持つ1つの <div> と、小さなローダースクリプトで構成されています。これは素のHTMLなので、同じコードをどのJavaScriptまたはTypeScriptのフレームワークのプロジェクトにもそのまま組み込めます。このガイドではReact、Vue、Angularを取り上げます。

Reactにウィジェットを埋め込む

ここでは、Reactアプリケーションにウィジェットを埋め込む手順を詳しく説明します。

1. まず、作成したウィジェットのコードをコピーします。

1. コードをコピーしたら、HTMLとJavaScriptを分けます。たとえば次のようになります。

1. 次にReactアプリケーションのcomponentsディレクトリに新しいコンポーネントを作成し、render関数の中にHTMLのコードを貼り付けます。

JavaScriptのコードは、componentDidMountのライフサイクルメソッドの中に貼り付けます。

1. ウィジェットを表示したいページを開き、作成したコンポーネントをimportします。この例ではApp.jsに追加します。

1. これで完了です。変更を保存すると、ページにウィジェットが表示されます。

ご不明な点がございましたら、画面右下のチャットアイコンからカスタマーサクセスチームにお問い合わせいただくか、support@embedsocial.com までメールをお送りください。喜んでサポートいたします 🙏

Vueに埋め込む

Vueのアプリケーションでカスタムの HTML / JavaScript コードを埋め込む方法は2つあります。

• Composition API
• Options API

まず、ウィジェットのコードをコピーします。

コードをコピーしたら、HTMLとJavaScriptを分けます。たとえば次のようになります。

<div class="embedsocial-hashtag" data-ref="a4f74f50d0016f41895f78a3141a52b07c6933aa"></div>
<script>
(function(d, s, id) { var js; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "https://embedsocial.com/cdn/ht.js"; d.getElementsByTagName("head")[0].appendChild(js); }(document, "script", "EmbedSocialHashtagScript"));
</script>

<div class="embedsocial-hashtag" data-ref="a4f74f50d0016f41895f78a3141a52b07c6933aa"></div>

(function(d, s, id) { var js; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "https://embedsocial.com/cdn/ht.js"; d.getElementsByTagName("head")[0].appendChild(js); }(document, "script", "EmbedSocialHashtagScript"));

Options APIを使用しているVueアプリケーションにEmbedSocialのウィジェットコードを埋め込む手順は次のとおりです。

まず、Vueアプリケーションのcomponentsディレクトリに新しいコンポーネントを作成します。

EmbedSocialのウィジェットのHTMLコードを <template> タグの中に貼り付けます。

EmbedSocialのウィジェットのJavaScriptコードは、createdのライフサイクルフックの中に貼り付けます。

EmbedSocialのウィジェットコンポーネントを作成したら、そのコンポーネントをimportしてWebサイトに表示します。

ウィジェットを表示したいファイルまたはページを開き、コンポーネントをimportします。この例ではApp.vueにimportしています。

このコードとOptions APIを使った結果は次のとおりです。

Composition APIを使用しているVueアプリケーションにウィジェットのコードを埋め込む手順は次のとおりです。

まず、Vueアプリケーションのcomponentsディレクトリに新しいコンポーネントを作成します。

次に、EmbedSocialのウィジェットのHTMLコードを <template> タグの中に貼り付けます。

続いてVueから onMounted 関数をimportし、EmbedSocialのウィジェットのJavaScriptコードを onMounted 関数の中に貼り付けます。

ここまででEmbedSocialのウィジェットコンポーネントが作成できました。次に、そのコンポーネントをimportしてWebサイトに表示します。

ウィジェットを表示したいファイルまたはページを開き、コンポーネントをimportします。この例ではApp.vueにimportしています。

これで、Webサイトにウィジェットが表示されます。

これで完了です。

ご不明な点がございましたら、画面右下のチャットアイコンからカスタマーサクセスチームにお問い合わせいただくか、support@embedsocial.com までメールをお送りください。喜んでサポートいたします 🙏

Angularに埋め込む

Angularのアプリケーションでカスタムの JavaScript コードを組み込む方法は2つあります。

1つはHTMLに直接コードを埋め込む方法、もう1つはコンポーネントを作成する方法で、こちらがより適した方法です。

こちらは分かりやすく、最も手軽な方法です。Angularの任意のファイルのHTMLを開き、EmbedSocialのコードをそのまま貼り付けます。

例は次のとおりです。

こちらの方法は2つの手順に分かれます。

• コンポーネントを作成する
• コンポーネントを使用する

1. ターミナルで ng generate component EmbedSocialWidget コマンドを実行し、EmbedSocialWidget という名前のAngularコンポーネントを作成します。
2. コンポーネントを作成したら EmbedSocialWidget.component.ts を開き、constructorのすぐ上に、@Input() を付けた文字列型のプロパティ refId を追加します。
3. 同じファイルの ngOnInit() 関数の中に、ウィジェットを構築するEmbedSocialのjavascriptを追加します。

コンポーネントのファイル EmbedSocialWidget.component.ts は、次の画像のようになります。

まず、EmbedSocialのアカウントにログインし、Widgets を開きます。埋め込みたいウィジェットを開き、EmbedSocialの data-ref 属性の値を取得します（前述のとおりです）。

data-ref属性は次のような形式です。

data-ref="1ca3d4d1a06e6fc2ae3b6b90f934326fd3a9edf4"

data-refを取得したら、作成した EmbedSocialWidget コンポーネントをAngularプロジェクトの任意の場所で使用できます。コンポーネントの refId のバインディングを、EmbedSocialからコピーした refId に置き換えてください。

コンポーネントの使用例は次のとおりです。

これで完了です。

TypeScriptのプロジェクトで埋め込みウィジェットを使う

ウィジェットは素のHTMLとローダースクリプトで構成されているため、埋め込みコード自体は変わりません。TypeScriptのフレームワークのプロジェクトでは、その周りに作るラッパーに型を付けるだけです。上のAngularの例はすでにTypeScriptで、refId は EmbedSocialWidget.component.ts の中で @Input() の文字列として宣言されています。ReactやVueでも同じように、ウィジェットのrefをご自身のコンポーネントの string 型のpropとして型付けし、ローダースクリプトはマウント時のライフサイクルフックに置いてください。

お役に立てば幸いです。ご不明な点やサポートが必要な場合は、support@embedsocial.com までお気軽にお問い合わせください。