実装例

検索窓の例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mf-x page</title>

    <!-- ↓CSS -->
    <link href="//c.marsflag.com/mf/mfx/1.0-latest/css/mfx-sbox.css" rel="stylesheet" type="text/css" media="all" charset="UTF-8">

    <style type="text/css">
      html, body {
        padding: 0;
        margin: 0;
      }
    </style>
  </head>
  <body>

    <!-- ↓ カスタムエレメントはこのツリー内に入れる -->
    <div class="mf_finder_container">

        <!-- ↓検索窓用カスタムエレメント -->
        <mf-search-box
           submit-text=""
           ajax-url="//mfx-sample.marsflag.com/x_search.x"
           serp-url="minimum.html#/"
           doctype-hidden
           options-hidden
        ></mf-search-box>

    </div>

    <!-- ↓MF検索窓用js -->
    <script src="//c.marsflag.com/mf/mfx/1.0-latest/js/mfx-sbox.js" charset="UTF-8"></script>

  </body>
</html>

検索窓の動作サンプル

検索結果ページの例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mf-x minimum</title>

    <!-- ↓CSS -->
    <link href="//c.marsflag.com/mf/mfx/1.0-latest/css/mfx-serp.css" rel="stylesheet" type="text/css" media="all" charset="UTF-8">

    <style type="text/css">
      html, body {
        padding: 0;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <!-- ↓ カスタムエレメントはこのツリー内に入れる -->
    <div class="mf_finder_container">

        <!-- ↓検索窓用カスタムエレメント -->
        <mf-search-box
           submit-text=""
           ajax-url="//mfx-sample.marsflag.com/x_search.x"
           doctype-csv="html,pdf"
        ></mf-search-box>

        <!-- ↓ずばけん用カスタムエレメント -->
        <mf-zubaken></mf-zubaken>

        <!-- ↓オーガニック用エレメント -->
        <mf-search-results></mf-search-results>

    </div>

    <!-- ↓MF検索結果画面用js -->
    <script src="//c.marsflag.com/mf/mfx/1.0-latest/js/mfx-serp.js" charset="UTF-8"></script>

  </body>
</html>

検索結果ページの動作サンプル

作り方

基本ルール

目的に応じて下記の必要なjsをscriptタグでロードする
.mf_finder_container の配下にMarsFinder用カスタムエレメントを設置する。
適切なcssを設定する。

検索窓の設置の仕方

<script src="//c.marsflag.com/mf/mfx/1.0-latest/js/mfx-sbox.js" charset="UTF-8"></script> をbodyの最後に入れる。

検索窓用カスタムエレメント `<mf-search-box></mf-search-box>`

.mf_finder_container の配下に設置する。サイト内で共通のヘッダ部分に検索窓を設置する場合など、.mf_finder_container配下への設置が困難な場合は共通ヘッダに.mf_finder_headerを追加して、その配下に設置してもよい。

検索窓用カスタムエレメント APIドキュメント

検索結果ページの作り方

<script src="//c.marsflag.com/mf/mfx/1.0-latest/js/mfx-serp.js" charset="UTF-8"></script> をbodyの最後に入れる。

検索窓用カスタムエレメント `<mf-search-box></mf-search-box>`

.mf_finder_container の配下に設置する。

検索窓用カスタムエレメント APIドキュメント

検索結果用カスタムエレメント `<mf-search-results></mf-search-results>`

.mf_finder_container の配下に設置する。

検索結果用カスタムエレメント APIドキュメント

ずばケン用カスタムエレメント `<mf-zubaken></mf-zubaken>`

.mf_finder_container の配下に設置する。

ずばケン用カスタムエレメント APIドキュメント

デフォルトCSS

検索窓用

//c.marsflag.com/mf/mfx/1.0-latest/css/mfx-sbox.css

検索窓、検索結果兼用

//c.marsflag.com/mf/mfx/1.0-latest/css/mfx-serp.css

レスポンシブ用

上記cssより後でロードすること。

//c.marsflag.com/mf/mfx/1.0-latest/css/mfx-serp-resp.css

言語対応

カスタムエレメントの上位エレメント(bodyでもよい)またはカスタムエレメント自体に lang属性で言語コードを設定することで切り替えることができる。

表示文言などの切り替えは前述のデフォルト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`

動作要件

動作環境案内

応用版

従来の検索結果画面へ遷移する検索窓

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mf-x page_classic</title>

    <!-- ↓CSS -->
    <link href="//c.marsflag.com/mf/mfx/1.0-latest/css/mfx-sbox.css" rel="stylesheet" type="text/css" media="all" charset="UTF-8">

    <style type="text/css">
      html, body {
        padding: 0;
        margin: 0;
      }
    </style>
  </head>
  <body>

    <!-- ↓ カスタムエレメントはこのツリー内に入れる -->
    <div class="mf_finder_container">

        <!-- ↓検索窓用カスタムエレメント -->
        <mf-search-box
           submit-text=""
           ajax-url="//mfx-sample.marsflag.com/x_search.x"
           doctype-hidden
           options-hidden
           use-std-serp
        ></mf-search-box>
    </div>

    <!-- ↓MF検索窓用js -->
    <script type="text/javascript" src="//c.marsflag.com/mf/mfx/1.0-latest/js/mfx-sbox.js" charset="UTF-8"></script>

  </body>
</html>

従来の検索結果画面へ遷移する検索窓の動作サンプル

ハッシュを使わずに、クエリストリングでパラメタを受け渡す検索結果ページ

Google Custom Search用の検索結果ページをこれで置き換えれば、検索窓をそのまま流用可能。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mf-x minimum_nohash</title>

    <!-- ↓CSS -->
    <link href="//c.marsflag.com/mf/mfx/1.0-latest/css/mfx-serp.css" rel="stylesheet" type="text/css" media="all" charset="UTF-8">

    <style type="text/css">
      html, body {
        padding: 0;
        margin: 0;
      }
    </style>
  </head>
  <body>

    <!-- ↓ カスタムエレメントはこのツリー内に入れる -->
    <div class="mf_finder_container">

      <!-- ↓検索窓用カスタムエレメント -->
      <mf-search-box
         submit-text=""
         ajax-url="//mfx-sample.marsflag.com/x_search.x"
         doctype-csv="html,pdf"
         ></mf-search-box>

      <!-- ↓ずばけん用カスタムエレメント -->
      <mf-zubaken></mf-zubaken>

      <!-- ↓オーガニック用エレメント -->
      <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>

    <!-- ↓MF検索結果画面用js -->
    <script src="//c.marsflag.com/mf/mfx/1.0-latest/js/mfx-serp.js" charset="UTF-8"></script>

  </body>
</html>