はじめに
本ドキュメントはMARS FINDER
3.0(MF3.0)カスタムエレメントのリファレンスマニュアルとなります。
カスタムエレメントとは、MF3.0をお客様のWebサイトに組み込む際に入れていただくタグのことです。
属性などを指定いただくことで様々な動作や表示条件の変更をすることが出来ます。
仕様
基本ルール
カスタムエレメントをご利用いただく上での基本ルールとなります。
- JSファイルを読み込む
設置ページにて、下記のタグを bodyタグ の最後に追加する。
<script src="https://ce.mf.marsflag.com/latest/js/mf-search.js" charset="UTF-8"></script>
- CSSファイルを読み込む
設置ページにて、下記のタグを headタグ に追加する。
<link href="https://ce.mf3stg.marsflag.com/latest/css/mf-search.css" rel="stylesheet" />
- カスタムエレメントの設置
.mf_finder_container の配下にカスタムエレメントを設置する。
- 検索URLの設定
設置するカスタムエレメントの ajax-url属性 に、検索APIのリクエストURLを指定する。
検索URL
カスタムエレメントに設定するURL。詳細は下記を参照してください。
言語対応
カスタムエレメントの上位エレメント(bodyでもよい)またはカスタムエレメント自体に
lang属性で言語コードを設定することで言語を切り替えることができます。
表示文言の切り替えは、前述のCSSで行っているため、ページ内に別途 CSS を追加し、CSSを上書きすることで、表示文言をカスタマイズすることもできます。
現在は以下の言語をサポートしています。
| 言語 | 言語コード |
|---|---|
| 英語 | en または en-US または 未設定の場合 |
| 日本語 | ja または ja-JP |
| 中国語 (簡体字) | zh または zh-CN |
| 中国語 (繁体字) | zh-tw |
| 韓国語 | kr |
| スペイン語 | es |
| ポルトガル語 | pt または pt-BR |
| アラビア語 | ar |
| タイ語 | th |
| イタリア語 | it |
| インドネシア語 | id |
| オランダ語 | nl |
| ギリシャ語 | el |
| ドイツ語 | de |
| トルコ語 | tr |
| フランス語 | fr |
| ベトナム語 | vi |
| ポーランド語 | pl |
| ラトビア語 | lv |
| リトアニア語 | lt |
| ロシア語 | ru |
| ペルシャ語 | fa |
動作要件
機能・カスタムエレメント
MARS FINDERで実装可能な機能と、それに対応するカスタムエレメントのご紹介。
全てのカスタムエレメントで共通の機能
検索窓
カスタムエレメント：<mf-search-box></mf-search-box>
検索結果
カスタムエレメント：<mf-search-results></mf-search-results>
検索の補助機能
おすすめコンテンツ
カスタムエレメント：<mf-featured-contents></mf-featured-contents>
ドリルダウン
カスタムエレメント：<mf-drilldown></mf-drilldown>
レンダリング箇所(幅 1024px 以上のときだけ表示される)
関連キーワード
カスタムエレメント：<mf-related-keywords></mf-related-keywords>
トグル用ラッパー
カスタムエレメント：<mf-toggle-wrap></mf-toggle-wrap>
レンダリング箇所(幅 1024px 未満のときだけ表示される)
トグル付きドリルダウン
カスタムエレメント：<mf-drilldown-toggle></mf-drilldown-toggle>
レンダリング箇所(幅 1024px 未満のときだけ表示される)
トグル付き関連キーワード
カスタムエレメント：<mf-related-keywords-toggle></mf-related-keywords-toggle>
レンダリング箇所(幅 1024px 未満のときだけ表示される)
検索結果用カスタムエレメント内の一部を独立して利用する
カスタムエレメント：<mf-search-results-header></mf-search-results-header>
検索結果ページャー
カスタムエレメント：<mf-search-results-pager></mf-search-results-pager>
導入方法
検索窓の設置
設置手順
- ファイルの読み込み
基本ルールの JS、CSS ファイル を読み込む
- 検索窓用カスタムエレメントを設置
<mf-search-box></mf-search-box>を.mf_finder_container
の配下に設置する。
サイト内で共通のヘッダ部分に検索窓を設置する場合など、.mf_finder_container配下への設置が困難な場合は共通ヘッダに.mf_finder_headerを追加して、その配下に設置してもよい。
設置例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex" />
<meta name="robots" content="nofollow" />
<title>mf-x page</title>
<!-- ↓CSS -->
<link href="https://ce.mf3stg.marsflag.com/latest/css/mf-search.css" rel="stylesheet" />
</head>
<body>
<!-- ↓ カスタムエレメントはこのツリー内に入れる -->
<div class="mf_finder_container">
<!-- ↓検索窓用カスタムエレメント -->
<mf-search-box
submit-text=""
ajax-url="https://finder.api.mf3stg.marsflag.com/api/v1/finder_service/documents/f1fddd3e/search"
serp-url="minimum.html#/"
doctype-hidden
options-hidden
></mf-search-box>
</div>
<!-- ↓JS -->
<script src="https://ce.mf.marsflag.com/latest/js/mf-search.js" charset="UTF-8"></script>
</body>
</html>検索結果ページの作り方
設置手順
- ファイルの読み込み
基本ルールのJS、CSS ファイルを読み込む
- 検索窓用カスタムエレメントを設置
<mf-search-box></mf-search-box>を.mf_finder_container
の配下に設置する。
- 検索結果用カスタムエレメントを設置
<mf-search-results></mf-search-results>を.mf_finder_container
の配下に設置する。
設置例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex" />
<meta name="robots" content="nofollow" />
<title>mf-x minimum</title>
<!-- ↓CSS -->
<link href="https://ce.mf3stg.marsflag.com/latest/css/mf-search.css" rel="stylesheet" />
</head>
<body>
<!-- ↓ カスタムエレメントはこのツリー内に入れる -->
<div class="mf_finder_container">
<!-- ↓検索窓用カスタムエレメント -->
<mf-search-box submit-text="" ajax-url="https://finder.api.mf3stg.marsflag.com/api/v1/finder_service/documents/f1fddd3e/search" doctype-hidden></mf-search-box>
<!-- ↓オーガニック検索結果用エレメント -->
<mf-search-results></mf-search-results>
</div>
<!-- ↓JS -->
<script src="https://ce.mf.marsflag.com/latest/js/mf-search.js" charset="UTF-8"></script>
</body>
</html>おすすめコンテンツの設置
設置手順
- ファイルの読み込み
基本ルールの JS、CSS ファイルを読み込む
- 検索窓用カスタムエレメントを設置
<mf-search-box></mf-search-box>を.mf_finder_container
の配下に設置する。
- おすすめコンテンツ用カスタムエレメントを設置
<mf-featured-contents></mf-featured-contents>を.mf_finder_container
の配下に設置する。
設置例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex" />
<meta name="robots" content="nofollow" />
<title>mf-x minimum</title>
<!-- ↓CSS -->
<link href="https://ce.mf3stg.marsflag.com/latest/css/mf-search.css" rel="stylesheet" />
</head>
<body>
<!-- ↓ カスタムエレメントはこのツリー内に入れる -->
<div class="mf_finder_container">
<!-- ↓検索窓用カスタムエレメント -->
<mf-search-box submit-text="" ajax-url="https://finder.api.mf3stg.marsflag.com/api/v1/finder_service/documents/f1fddd3e/search" doctype-hidden></mf-search-box>
<!-- ↓おすすめコンテンツ用エレメント -->
<mf-featured-contents></mf-featured-contents>
</div>
<!-- ↓JS -->
<script src="https://ce.mf.marsflag.com/latest/js/mf-search.js" charset="UTF-8"></script>
</body>
</html>応用版
ハッシュを使わずに、クエリストリングでパラメタを受け渡す検索結果ページ
Google Custom Search用の検索結果ページをこれで置き換えれば、検索窓をそのまま流用可能。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex" />
<meta name="robots" content="nofollow" />
<title>mf-x minimum_nohash</title>
<!-- ↓CSS -->
<link href="https://ce.mf3stg.marsflag.com/latest/css/mf-search.css" rel="stylesheet" />
</head>
<body>
<!-- ↓ カスタムエレメントはこのツリー内に入れる -->
<div class="mf_finder_container">
<!-- ↓検索窓用カスタムエレメント -->
<mf-search-box submit-text="" ajax-url="https://finder.api.mf3stg.marsflag.com/api/v1/finder_service/documents/f1fddd3e/search" doctype-hidden></mf-search-box>
<!-- ↓オーガニック用エレメント -->
<mf-search-results></mf-search-results>
</div>
<!-- ↓ハッシュを使わずにクエリストリングでパラメタを管理する場合に記述 -->
<script type="text/javascript">
!(function () {
var G = (GALFSRAM = window.GALFSRAM || {});
G.mfx = G.mfx || {};
G.mfx.router_mode = 'history';
})();
</script>
<!-- ↓JS -->
<script src="https://ce.mf.marsflag.com/latest/js/mf-search.js" charset="UTF-8"></script>
</body>
</html>よくある質問
その他
カスタムエレメント リファレンスマニュアル
リファレンスマニュアル内検索
