拡張機能の作成

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

/**
 * FastCommentsUI の拡張オブジェクトです。特定のコンポーネントを遅延ロードするために使用されます。例えば、レビューシステムは
 * すべての顧客が使用するわけではないため、必要なときにだけこの拡張をロードします。
 *
 * @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 を作成し、無視するローカルリストに追加できる関数への参照。
 * @property {FastCommentsUIExtensionSetupEventHandlers} [setupEventHandlers]
 * @property {FastCommentsUIExtensionPrepareCommentForSavingCallback} [prepareCommentForSaving] - 投稿される直前のコメントが渡されます。false を返すと送信がキャンセルされます（例：添付された投票が未完了の場合）。
 * @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] - (LEGACY) 返信エリアの上部に追加する HTML を返します。
 * @property {FastCommentsUIExtensionWidgetTopCallback} [widgetTop] - (LEGACY) ウィジェットの上部に追加する HTML を返します。
 * @property {FastCommentsUIExtensionCommentTopCallback} [commentTop] - (LEGACY) コメント要素の上部に追加する HTML を返します。
 * @property {FastCommentsUIExtensionCommentBottomCallback} [commentBottom] - (LEGACY) コメント要素の下部に追加する HTML を返します。
 * @property {FastCommentsUIExtensionCommentBottomCallback} [commentContentBottom] - コメントテキストの後、コメントコンテンツ要素内に追加する HTML を返します（投票で使用）。
 * @property {Function} [replyAreaInputBottom] - テキスト入力の下に、コメント入力フレーム内に追加する HTML を返します（インライン投票エディタで使用）。親コメント ID、またはルート返信ボックスの場合は null が渡されます。
 * @property {Function} [onPollUpdate] - ページ上の投票の票数が変化したときにライブイベントとして呼び出されます。
 * @property {Function} isSiteAdmin - ビューアがテナントの管理者またはモデレーターかどうかを返します。最初の取得後に判明します。
 * @property {FastCommentsUIExtensionMenuBottomCallback} [menuBottom] - (LEGACY) 各コメントのメニュー要素の下部に追加する 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

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