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

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

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

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

概要

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


前提

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

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


詳細
1.ステージング環境にて強制的に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を読み込ませることができます。



2.ステージング画面の確認と調整

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


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


3.本番への反映

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


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


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

1.にて指定していた 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読み込みを解除します。

※/latest/ は常に最新バージョンを読み込むパスです。
 今回のように /v2/ に固定したままだと、製品が更新されても、その内容が自動では反映されない場合が発生します。
 動作確認が終わったら、「5. ステージング環境の強制Ver2適用を解除」の手順で /latest/ に戻していただくのを忘れずにお願いします。


6.本番への反映

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


以上