クイックスタート

JSファイルを読み込む

設置したいページにて、下記のタグをbodyタグの最後に追加する。

html

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

ポイント

カスタムエレメントは、埋め込まれたウェブサイトが完全に読み込まれた後に読み込まれます。これにより、ウェブサイトの読み込み遅延を防ぎます。

注意

v2をご利用の場合は、管理画面のサービス一覧の「カスタムエレメントVer切り替え」からver2へ切り替えて下さい。

コード例

html

<!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部分に該当するものです。中括弧（{}）は不要です。

html

<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 に変更します。

html

<mf-search-box
  lang="ja"
  ajax-url="{取得した検索API URL}"
></mf-search-box>
<mf-search-results></mf-search-results>

設置後は下記のようにカスタムエレメントが描画され、検索が可能になります。

属性

カスタムエレメントは属性にて様々な設定を変更することができます。
下記コードのようにlangを ja から en に変更すると、表示言語が変更されます。

html

<mf-search-box
  lang="en"
  ajax-url="{取得した検索API URL}"
></mf-search-box>

また、input-placeholderという属性を使用すると、検索窓のplaceholderを変更することができます。

html

<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 管理画面で設定したおすすめコンテンツが表示されます。
おすすめコンテンツの設定方法はこちらをご確認ください。

html

<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>

上のコードを設置すると下記のように表示されます。

Showing 1 - 10 of 219 results for "mars"

株式会社マーズフラッグ
会社情報 OUR SERVICES 日本で1番選ばれているサイト内検索 MARS FINDERは、Webサイトの能力を最大限に活用するためのサイト内検索サービスです。
製品・サービス - MARS FLAG
製品詳細製品検索プラットフォーム Web制作の知識がなくても簡単スタート、運用は使い慣れたExcelで製品詳細導入事例 API連携クラウドサービス MARS FLAGのテクノロジーを活用し、Webサイト構築を迅速・簡単に製品詳細検索窓おすすめ表示ユーザビリティ向上とCVR向上に特化した高機能サジェストサービス。
導入事例 - MARS FLAG
CASE STUDIES 導入事例 INTERVIEW 導入インタビュー MARS FINDER 導入インタビューサイト内検索 MARS FINDER を導入いただいている企業様のお声をご紹介します。
サポート・よくあるご質問 - MARS FLAG
SUPPORT サポート・よくあるご質問日本で1番選ばれているサイト内検索よくあるご質問製品検索プラットフォームよくあるご質問サービス全般に関するよくあるご質問 MARS FLAGにはどんなサービスがありますか？ MARS FLAGでは、以下のサービスを全てクラウドサービスとして提供しています。
ニュース・お知らせ - MARS FLAG
…24パラリンピック競技大会出場決定 2024.07.31 MARS FINDER 新バージョンをリリース 2024.07.17 MARS FINDER 無料トライアルを開始 2024.06.01…「クラウド技術概論」に登壇しました 2024.05.17 MARS FINDERの検索DB作成に新方式を採用 2024.03…T Womenの講師に就任しました 2024.03.05 MARS FINDER 無料トライアルキャンペーンを開始 2024…
会社情報 - MARS FLAG
現在では、日本発、国内トップシェアのサーチプラットフォーマーとして、サイト内検索 MARS FINDER、製品検索プラットフォーム MARS SCREEN、検索窓おすすめ表示 MARS EXPLORERをはじめとするWebサービスを多くの企業に提供しています。
MARS FLAGが解決する課題 - MARS FLAG
SOLUTIONS MARS FLAGが解決する課題現在の課題であてはまるものは? 下記の課題の中からお選びください。
お問い合わせ - MARS FLAG
CONTACT お問い合わせ必要事項をご入力・ご選択のうえ、送信ボタンを押してください。必須の項目は、必ずご記入ください。お名前必須会社名必須 E-mail 必須該当するお問い合わせを選択してください必須当社提供サービスについてのお問い合わせその他のお問い合わせお問い合わせ内容必須ご登録いただきました情報は、株式会社マーズフラッグで今後のサービス開発の参考とさせていただく他、電子メールによるサービス情報、セミナー開催情報などの各種情報提供にも使用させていただく場合があります。尚、ご登録いただきました情報は株式会社マーズフラッグで保管し、登録者ご本人の承諾を得ない限り、ご登録いただいた個人情報を第三者に提供することはありません。当社のプライバシーポリシーについてご確認ください。個人情報の取り扱いに同意する TOP お問い合わせ担当者がオフラインですメッセージを残していただければ幸いです
パートナー一覧 - MARS FLAG
PARTNERS パートナー一覧全て表示北海道・東北関東中部近畿中国・四国九州・沖縄全て表示北海道・東北関東中部近畿中国・四国九州・沖縄全て表示あかさたなはまやらわ株式会社アークコミュニケーションズ東京株式会社アーズ東京株式会社アイデアランプ東京 agataJapan株式会社京都株式会社アクセサイト東京株式会社アジャスト東京株式会社アストラザスタジオ東京株式会社アパレルウェブ東京株式会社アリスマジック東京 E-グラフィックスコミュニケーションズ株式会社神奈川株式会社ecbeing 東京 ECマーケティング株式会社東京株式会社イーツー東京イオンアイビス株式会社千葉伊藤忠テクノソリューションズ株式会社東京株式会社イノセント・アイズ東京株式会社イメージサイエンス東京株式会社イメージング・ワークス東京株式会社インクレア東京 IN FOCUS株式会社東京 UTATA合同会社東京株式会社ウフル東京 AGS株式会社埼玉株式会社エイチナイン東京株式会社NTTアド大阪株式会社エム・エー・ディー東京株式会社エム・シー・アンド・ピー大阪 MP-Strategy合同会社大阪株式会社大崎コンピュータエンヂニアリング東京株式会社オールフォーエスピー東京株式会社オロ東京株式会社ガジェログ東京彼方株式会社東京株式会社クチトテ東京株式会社クリエイティブホープ東京株式会社クルーソー東京 crewmap株式会社東京株式会社クレーンウッド神奈川株式会社ケー・アンド・エル東京株式会社神戸デジタル・ラボ兵庫コニカミノルタジャパン株式会社東京株式会社コネクティ東京株式会社サイズ東京株式会社シップス東京株式会社シフト東京株式会社セラク東京ソニーネットワークコミュニケーションズ株式会社東京株式会社タービン・インタラクティブ愛知ダイヤモンドオフィスサービス株式会社東京株式会社太洋堂京都株式会社タクト東京タクトシステムズ株式会社東京株式会社ダッド愛知株式会社中電シーティーアイ愛知株式会社DNPコミュニケーションデ
パラトライアスリート秦由加子選手 - MARS FLAG
パラトライアスリート秦由加子選手 PROFILE 秦由加子選手プロフィール秦由加子選手競技 : パラトライアスロン (PTS2) 所属 : キヤノンマーケティングジャパン・マーズフラッグ・ブリヂストン出身地 : 千葉県生年月日 : 1981年4月10日 13歳で骨肉腫を発症し、右大腿部より切断。幼少のころに経験した水泳を2007年に再開し、2008年より障がい者の水泳大会に出場。2010年から2012年まで「日本障がい者水泳連盟」の国際大会強化指定選手として国内外の大会に出場。2013年トライアスロン競技に転向。同年6月幕張トライアスロン大会へ積極的に参加し、好成績を残す。2014年7月JTU(日本トライアスロン連合)のパラトライアスロン強化指定選手A指定を受ける。秦由加子武井信也スペシャル対談競技との出会い～世界へ競泳からパラトライアスロンへ転向した2013年より数々の優勝・好成績を収め、通常のトライアスロン競技大会においても健闘するなど、その能力は日々驚異的に伸び続けています。そんな秦選手ですが、義足での生活を余儀なくされて以来、スポーツとは全く無縁の生活を送っていたといいます。幼少時に経験し、唯一好きな運動であった水泳をまたやってみようと思い、地元チーム「千葉ミラクルズSC」に自ら応募したのは2007年、社会人になった後のことです。練習に打ち込み大会出場を重ね、ついに2010年には競泳の強化指定選手に選出されるまでになりました。さらにその後、多くのパラリンピアンも所属する障がい者陸上競技チーム「ヘルスエンジェルス」の練習にも参加するようになります。13歳で足を失くした秦選手は、それから約18年もの間走ったことがなく、初めは早歩きから、そして恐る恐る走り出すと、地面を蹴った反発が義足を通じて身体に伝わり、全身が宙に浮いた瞬間の感動は今でも忘れられないそうです。未知の世界への好奇心からトライアスロン競技へと惹かれた秦選手は、現在「稲毛インター」に所属し、2013年より競技大会へ参加。2014年にはJTU(日本トライアスロン連合)パラトライアスロン強化指定選手 A指定を受け、2015年より海外大会へも積極的に出場し、パラトライアスリートとしての経験を積んでいます。パラトラ