カスタムエレメントVer.1からVer.2への具体的な移行手順書

カスタムエレメントVer.1からVer.2への具体的な移行手順書

Q. カスタムエレメントVer1からVer2への具体的な移行手順を教えてください。

A.以下が具体的な手順となります。

概要

カスタムエレメントVer1からVer2への、安全で具体的な移行手順書を記載します。


前提

既にカスタムエレメントVer1を使ってサイト内検索を提供しているお客様が対象となります。

本番環境とは別に、ステージングなどで動作確認する環境が必要です。


詳細
１．ステージング環境にて強制的にVer2を適用

最初に、ステージング環境にて強制的にカスタムエレメントVer2 を読み込ませるようにします。

検索窓画面と検索結果画面のページ内、以下2箇所を修正します。


【1箇所目】次のlinkタグを削除

<link href="https://ce.mf.marsflag.com/latest/css/mf-search.css" rel="stylesheet" type="text/css" media="all" charset="UTF-8">


【2箇所目】次のscriptタグを変更

変更前

<script src="https://ce.mf.marsflag.com/latest/js/mf-search.js" charset="UTF-8"></script>

変更後

<script
src="https://ce.mf.marsflag.com/v2/js/mf-search.js"
async
type="module"
></script>

※ /v2/ というパスを指定することで、強制的に Ver2を読み込ませることができます。



２．ステージング画面の確認と調整

１．を適用した後、検索窓画面と検索結果画面を確認し、必要であればページを修正して調整します。


動作や画面レイアウトを調整する際には、以下のドキュメントを参照してください。


３．本番への反映

２．の作業後、そのままステージングの内容を本番へ反映します。


４．管理画面より、Ver1 から Ver2への切り替えを行います。


５．ステージング環境の強制Ver2適用を解除

１．にて指定していた scriptタグを、以下のように通常状態へ戻します。
現在

<script
src="https://ce.mf.marsflag.com/v2/js/mf-search.js"
async
type="module"
></script>

修正後

<script src="https://ce.mf.marsflag.com/latest/js/mf-search.js" charset="UTF-8"></script>

※ /v2/ を /latest/ というパスに戻すことで、強制的な Ver2読み込みを解除します。

​
６．本番への反映

５．の作業後、そのままステージングの内容を本番へ反映します。


以上





    • Related Articles

    • 2025.10.09　[MARS FINDER 3.0]　カスタムエレメントVer.2のご案内

      日頃、MARS FINDER3.0をご利用いただき、誠にありがとうございます。 カスタムエレメントVer.2についてご案内いたします。 ■ カスタムエレメントVer.2 のご案内 2024年11月5日にカスタムエレメントVer.2を正式リリースしております。 より使いやすく進化したカスタムエレメントVer.2を、是非ご利用ください。 以下の機能が新たに追加されました： AIによる回答表示機能 Webアクセシビリティのガイドライン（「WCAG 2.0」基準及び「JIS X ...

    • カスタムエレメントVer.1 サポート終了後の対応につきまして

      MARS FINDER(3.0)のカスタムエレメントVer.1は、2025年10月末日をもってサポート終了となります。 これに伴い、同日以降は、新規作成したアプリケーションにおいてカスタムエレメントVer.1でのサービス新規作成ができなくなりますのでご注意ください。 サービス提供終了時期（EOL）は未定となっております。 サポート終了に伴う弊社の対応は、以下の通りとなります。 【カスタムエレメントVer.1のサポート終了後も継続対応となるもの】 サービス障害への問い合わせおよび対応 ...

    • カスタムエレメントVer.1とVer.2の違いを教えてください

      Q. カスタムエレメントVer.1とVer.2の違いを教えてください。 A.カスタムエレメントVer.2には、以下の機能が新たに追加されております。 より使いやすく進化したカスタムエレメントVer.2を是非ご利用ください。 AIによる回答表示機能 リアルタイム検索結果表示 Webアクセシビリティのガイドライン（「WCAG 2.0」基準及び「JIS X 8341-3:2016」）に準拠 管理画面上でのガイド付きセットアップとスタイリングツールで初心者も簡単にカスタマイズ ...

    • カスタムエレメントVer.2のWebサイト導入に際してのガイドライン

      MARS FINDER3.0において、カスタムエレメントVer.2をお客様のWebサイトへ導入される際には、以下の項目をご留意ください。 <mf-search-box>や<mf-search-results>等のカスタムエレメントが展開された後のDOM要素への、イベント追加は避けてください。 既にカスタムエレメントVer.1を導入済みのお客様に関しましては、本ガイドラインに準拠頂いていれば、大きな問題を生じさせずにVer.2への切り替えが可能です。 ...

    • AIによる回答表示機能

      AIによる回答表示機能は、検索キーワードに対してAIが生成した回答を検索結果画面に表示する、サイト内検索のオプション機能です。 尚、対応している言語は、日本語のみとなります。（2025年9月2日現在） ご利用の際は、カスタムエレメント Ver.2 にアップデートしていただく必要があります。 AIによる回答 AIが検索キーワードを元に、検索データベースの内容から最適な回答を生成した文章です。 情報源 AIが実際に回答作成に利用したコンテンツページです。 参考コンテンツ ...