Writing Extensions | FastComments Docs

Extensions の開発

コンテキスト

FastComments は、Extensions と呼ぶスクリプトを介してコア機能を拡張する機能を提供します。

An Extension はコメントウィジェットに追加のマークアップを加えたり、イベントリスナーを設定したり、任意のコードを実行したりできます。

ここでは、本番で使用している Extensions の例と、Extensions の書き方に関するドキュメントを紹介します。

拡張機能のライフサイクル

各拡張機能のスクリプトは、コメントウィジェットが最初のコメントセットの取得とUIのレンダリングを開始する前にフェッチされ、実行されます。

初回読み込み時に、次のデータが extension オブジェクトに付与されます:

config - config オブジェクトへの参照。
translations - translations オブジェクトへの参照。
commentsById - IDごとの全コメントへの参照。
root - ルートDOMノードへの参照。

拡張機能は、コメントウィジェットが適切なタイミングで呼び出す関数を必要に応じてオーバーライドしてください。

拡張機能の定義

作成できる最小の拡張機能は次のとおりです：

シンプルな拡張

Copy

Run

(function () {
    const extension = FastCommentsUI.extensions.find((extension) => {
        return extension.id === 'my-extension';
    });
})();

この例のために、これを my-extension.js として保存し、https://example.com/my-extension.min.js で公開してください。

この拡張機能は何もしません。読み込み時にコアのコメントライブラリによって作成された拡張オブジェクトを取得するだけです。

この Extension オブジェクトはシングルトンで、他の拡張機能とは共有されません。

次に、拡張機能を読み込むには、コメントウィジェットにそのことを伝える必要があります。例えば：

Using a Custom Extension

Copy

Run

<script async src="https://cdn.fastcomments.com/js/embed-v2-async.min.js"></script>
<div id="fastcomments-widget"></div>
<script>
window.fcConfigs = [{
    "tenantId": "demo",
    "extensions": [
        {
            "id": "my-extension",
            "path": "https://example.com/my-extension.min.js"
        }
    ]
}];
</script>

機能的な例については、次のセクションを参照してください。

拡張機能の例

At FastComments, we write our own extensions, using the same API. You can view the unminified code for these extensions at the following endpoints:

ダークモード

The Dark Mode extension is conditionally loaded when a "dark" page is detected. This extension simply adds some CSS to the comment widget. This way we do not have to load the dark mode CSS when it is not needed.

https://fastcomments.com/js/comment-ui/extensions/comment-ui.dark.extension.js

モデレーション

When the current user is a moderator, we use the moderation extension.

This is a good example for adding click-based event listeners, making API requests, adding to the comment menu and comment areas.

https://fastcomments.com/js/comment-ui/extensions/comment-ui.moderation.extension.js

ライブチャット

The Live Chat extension (in combination with other configuration and styling) turns the comment widget into a live chat component.

https://fastcomments.com/js/comment-ui/extensions/live-chat.extension.js

拡張機能オブジェクト

拡張オブジェクトは次の定義で構成されています：

拡張オブジェクトの JSDoc

Copy

Run

/**
 * The FastCommentsUI extension object. 特定のコンポーネントを遅延読み込みするために使用されます。例えば、レビューシステムは全ての顧客が使用するわけではないため、必要な時にのみその拡張を読み込みます。
 *
 * @typedef {Object} FastCommentsUIExtension
 * @property {string} id
 * @property {Element} scriptNode
 * @property {Element} root - ウィジェットのルート DOM ノード。
 * @property {string} [css]
 * @property {Object} config - FastComments の設定オブジェクト。
 * @property {Object} commentsById - 全コメントを id ごとに保持するオブジェクトへの参照。常に最新に保たれます。
 * @property {Object} translations - 全翻訳への参照。
 * @property {Function} reRenderComment - コメントを再レンダリングするために呼び出せる関数への参照。
 * @property {Function} removeCommentAndReRender - メモリからコメントを削除し、適切な DOM 部分を再レンダリングするために呼び出せる関数への参照。
 * @property {Function} newBroadcastId - 新しいブロードキャスト ID を作成し、無視するローカルのブロードキャスト ID リストに追加するために呼び出せる関数への参照。
 * @property {FastCommentsUIExtensionSetupEventHandlers} [setupEventHandlers]
 * @property {FastCommentsUIExtensionPrepareCommentForSavingCallback} [prepareCommentForSaving]
 * @property {FastCommentsUIExtensionNewCommentCallback} [newComment]
 * @property {FastCommentsUIExtensionReplyAreaFilter} [replyAreaFilter] - コメント入力エリアの HTML をフィルタします。
 * @property {FastCommentsUIExtensionWidgetFilter} [widgetFilter] - レンダー時にウィジェット全体の HTML をフィルタします。
 * @property {FastCommentsUIExtensionCommentTopFilter} [commentFilter] - 各コメントをレンダリングする前にその HTML をフィルタします。
 * @property {FastCommentsUIExtensionReplyAreaFilter} [commentMenuFilter] - 各コメントメニューをレンダリングする前にその HTML をフィルタします。
 * @property {FastCommentsUIExtensionMenuFilter} [menuFilter] - レンダー時にウィジェット全体の HTML をフィルタします。
 * @property {FastCommentsUIExtensionReplyAreaTop} [replyAreaTop] - （レガシー）返信エリアの上部に追加する HTML を返します。
 * @property {FastCommentsUIExtensionWidgetTopCallback} [widgetTop] - （レガシー）ウィジェットの上部に追加する HTML を返します。
 * @property {FastCommentsUIExtensionCommentTopCallback} [commentTop] - （レガシー）コメント要素の上部に追加する HTML を返します。
 * @property {FastCommentsUIExtensionCommentBottomCallback} [commentBottom] - （レガシー）コメント要素の下部に追加する HTML を返します。
 * @property {FastCommentsUIExtensionMenuBottomCallback} [menuBottom] - （レガシー）各コメントのメニュー要素の下部に追加する HTML を返します。
 * @property {FastCommentsUIExtensionRenderCallback} [onRender]
 * @property {FastCommentsUIExtensionConnectionStatusCallback} [onLiveConnectionStatusUpdate]
 * @property {FastCommentsUIExtensionInitialRenderCallback} [onInitialRenderComplete]
 * @property {FastCommentsUIExtensionPresenceUpdateCallback} [onPresenceUpdate]
 */
   
/**
 * @callback FastCommentsUIExtensionSetupEventHandlers
 * @param {Element} element - ルート要素。
 * @param {Object.<string, Function>} clickListeners - クラス名ごとのクリック用イベントハンドラ。参照で変更可能です。
 * @returns void
 */
/**
 * @callback FastCommentsUIExtensionWidgetTopCallback
 * @param {Object} moduleData
 * @returns {string}
 */
/**
 * @callback FastCommentsUIExtensionWidgetFilter
 * @param {Object} moduleData
 * @param {Object} html
 * @returns {string}
 */
/**
 * @callback FastCommentsUIExtensionCommentTopCallback
 * @param {Object} comment
 * @returns {string}
 */
/**
 * @callback FastCommentsUIExtensionCommentTopFilter
 * @param {Object} comment
 * @param {string} html
 * @returns {string}
 */
/**
 * @callback FastCommentsUIExtensionCommentBottomCallback
 * @param {Object} comment
 * @returns {string}
 */
/**
 * @callback FastCommentsUIExtensionMenuBottomCallback
 * @param {Object} comment
 * @returns {string}
 */
/**
 * @callback FastCommentsUIExtensionMenuFilter
 * @param {Object} comment
 * @param {string} html
 * @returns {string}
 */
/**
 * @callback FastCommentsUIExtensionRenderCallback
 * @returns {string}
 */
/**
 * @callback FastCommentsUIExtensionConnectionStatusCallback
 * @param {boolean} isConnected
 * @returns {void}
 */
/**
 * @callback FastCommentsUIExtensionInitialRenderCallback
 * @returns {void}
 */
/**
 * @callback FastCommentsUIExtensionReplyAreaTop
 * @param {Object|null} currentUser
 * @param {boolean} isSaving
 * @param {boolean} isReplyOpen
 * @param {string|null} parentId
 * @returns {string}
 */
/**
 * @callback FastCommentsUIExtensionReplyAreaFilter
 * @param {Object|null} currentUser
 * @param {boolean} isSaving
 * @param {boolean} isReplyOpen
 * @param {string|null} parentId
 * @param {string|null} html
 * @returns {string}
 */
/**
 * @callback FastCommentsUIExtensionPrepareCommentForSavingCallback
 * @param {Object} comment
 * @param {string} parentId
 */
/**
 * @callback FastCommentsUIExtensionNewCommentCallback
 * @param {Object} comment
 */
/**
 * @callback FastCommentsUIExtensionPresenceUpdateCallback
 * @param {Object} update
 */

拡張機能のAPI

Interacting with the Extension is simple, as we simply define references to functions we want invoked.

To build off the example earlier, let's say we want to add HTML to the top of each comment:

シンプルな拡張機能 - 続き

Copy

Run

(function () {
    const extension = FastCommentsUI.extensions.find((extension) => {
        return extension.id === 'my-extension';
    });
    extension.commentFilter = function(comment, html) {
        return `<h3>The user's name is ${comment.commenterName}!</h3>` + html;
    }
})();

Whenever you return HTML like this, it will get merged into the UI via a dom-diffing algorithm.

コメントの再レンダリングを手動でトリガーする

We can wait for the initial page load and manually re-render a comment by invoking reRenderComment:

コメントの再レンダリング

Copy

Run

(function () {
    const extension = FastCommentsUI.extensions.find((extension) => {
        return extension.id === 'my-extension';
    });
    let renderCount = 0;
    extension.commentFilter = function(comment, html) {
        renderCount++;
        return `<h3>The render count is ${renderCount}!</h3>` + html;
    }
    extension.onInitialRenderComplete = function() {
        setInterval(function() {
            extension.reRenderComment(extension.commentsById[Object.keys(extension.commentsById)[0]], function renderDone() {
                console.log('Comment re-render done.');
            });
        }, 2000); // タイムアウトは必須ではありません。例として示しています。
    }
})();

言語 🇯🇵 日本語

背景

API

Extensions の開発

コンテキスト

拡張機能のライフサイクル

拡張機能の定義

拡張機能の例

ダークモード

モデレーション

ライブチャット

拡張機能オブジェクト

拡張機能のAPI

コメントの再レンダリングを手動でトリガーする