クイックスタート
JSファイルを読み込む
設置したいページにて、下記のタグをbodyタグの最後に追加する。
<script
src="https://ce.mf.marsflag.com/latest/js/mf-search.js"
async
></script>ポイント
カスタムエレメントは、埋め込まれたウェブサイトが完全に読み込まれた後に読み込まれます。これにより、ウェブサイトの読み込み遅延を防ぎます。
注意
v2をご利用の場合は、管理画面のサービス一覧の「カスタムエレメントVer切り替え」からver2へ切り替えて下さい。
コード例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>カスタムエレメントデモ</title>
</head>
<body>
<div>
<nav>ナビゲーションなど</nav>
<!-- ウェブサイトのコンテンツ -->
<h1>検索ページ</h1>
<!--...-->
<!-- カスタムエレメントのコンポーネント -->
<mf-search-box
lang="en"
ajax-url="{取得した検索API URL}"
input-placeholder="検索してみる"
></mf-search-box>
<mf-featured-contents></mf-featured-contents>
<mf-search-results></mf-search-results>
<!--...-->
<footer>フッターなど</footer>
</div>
<!-- カスタムエレメントのJSファイルスクリプトロード -->
<script
src="https://ce.mf.marsflag.com/latest/js/mf-search.js"
async
></script>
</body>
</html>INFO
スクリプトタグをbodyに設置すると、ウェブサイト全体でカスタムエレメントが利用可能になります。
検索API URLの取得
検索API URLとは、MARS Platform 管理画面にて発行したURLです。
※下記コードのajax-url部分に該当するものです。中括弧（{}）は不要です。
<mf-search-box
ajax-url="https://finder.api.mf.marsflag.com/api/v1/finder_service/documents/{サービス識別名}/search"
></mf-search-box>注意
サービス識別名とは各サービスを識別する固有の文字列のことを指します。
サービスを作成後、自動的に検索API URLに付与されます。
INFO
詳しい取得方法はこちらからご確認ください。
(サービス作成後、検索API URLをクリックしたら確認できます。)
ページへの設置
下記カスタムエレメントを設置したい部分に貼り付け、ajax-urlを自身で取得した 検索API URL に変更します。
<mf-search-box
lang="ja"
ajax-url="{取得した検索API URL}"
></mf-search-box>
<mf-search-results></mf-search-results>設置後は下記のようにカスタムエレメントが描画され、検索が可能になります。
属性
カスタムエレメントは属性にて様々な設定を変更することができます。
下記コードのようにlangを ja から en に変更すると、表示言語が変更されます。
<mf-search-box
lang="en"
ajax-url="{取得した検索API URL}"
></mf-search-box>また、input-placeholderという属性を使用すると、検索窓のplaceholderを変更することができます。
<mf-search-box
lang="en"
ajax-url="{取得した検索API URL}"
input-placeholder="検索してみる"
></mf-search-box>このほかにも各カスタムエレメントには様々な属性があり、カスタマイズが可能になっております。 詳しくは各カスタムエレメントの属性ドキュメントをご確認ください。
その他
mf-search-box、mf-search-results意外にもカスタムエレメントを設置することで機能を追加することも可能です。
下記コードのようにmf-featured-contentsを利用すると、MARS Platform 管理画面で設定したおすすめコンテンツが表示されます。
おすすめコンテンツの設定方法はこちらをご確認ください。
<mf-search-box
lang="en"
ajax-url="{取得した検索API URL}"
input-placeholder="検索してみる"
></mf-search-box>
<mf-featured-contents></mf-featured-contents>
<mf-search-results></mf-search-results>上のコードを設置すると下記のように表示されます。
INFO
その他使用可能なカスタムエレメントはサイドバーのコンポーネント欄からご確認ください。
またこちらから属性やその他カスタムエレメントをデモとして動かすことが可能です。
次のステップへ
次のステップでは、コンポーネント（検索窓、検索結果、ドリルダウン、おすすめコンテンツ、関連キーワード、ページネーションなど）の属性を確認することをお勧めします。
その後、これらの属性を手動でコードに追加するか、ガイド付きセットアップを使用して属性を簡単に追加または変更することができます。また、スタイリングツールを使用して、リアルタイムで変更を確認しながらカスタムエレメントを簡単にスタイル付けおよびカスタマイズすることもできます。