設定パラメータリファレンス¶
設定パラメータとは¶
ポップファインド設定タグの中にパラメータと呼ぶ値を記述することで、
フロントエンドの設定を変更することが出来ます。
パラメータは次の方法で指定します。
// ポップファインド設定タグ
var popfindConf = popfindConf || {};
popfindConf["data-[モード]"] = {
// (略)
parameter1: "[パラメータ値 1]" ,
parameter2: "[パラメータ値 2]",
// (略)
parameterN: "[パラメータ値 N]"
};
パラメータの指定は、popfindConf[識別子] = { ... }; の中に配置してください。パラメータ指定とパラメータ指定の間にはカンマを置いてください。下記に例を示します。
// ポップファインド設定タグ
var popfindConf = popfindConf || {};
popfindConf["data-[モード]"] = {
uid: "[UID]",
mode: "[モード]",
inputId: "q",
layoutOrder: ['title', 'thumbnail', 'price']
};
複数のタグを追加する場合、識別子は重複しない値を指定します。
1 個目のタグの例
popfindConf["data-[モード]-1"] = {
uid: "[UID]",
mode: "[モード]",
2 個目のタグの例
popfindConf["data-[モード]-2"] = {
uid: "[UID]",
mode: "[モード]",
設定パラメータ一覧¶
Info
以下のパラメータのデフォルト値は企業向けサイトを表す mode に cp, sitesearch, sitesearch3 が指定された状態のものです。
このパラメータを使用していない状態ではデフォルト値は異なる可能性があります。
| パラメータ名 | データ型 | デフォルト値 | 説明 |
|---|---|---|---|
| uid | 文字列 | なし | サービスの識別コード。必須項目 |
| displayId | 文字列 | 表示エリアとなる要素のID。ポップファインドは、この表示エリアの子要素にあるコンポーネントに変更を加える | |
| inputId | 文字列 | q | 検索窓となる要素のID。複数箇所に検索窓がある場合はカンマ区切りで指定 |
| layoutOrder | 配列 | 標準レイアウト | searchResultsコンポーネントにおいて、表示するレイアウトのリスト 利用可能なレイアウトは後述 |
| mode | 文字列 | なし | 設定パラメータや URL パラメータの設定を変更する。 ご契約時に発行されたモードを設定します。 |
| componentAttribute | 文字列 | data-sitesearch | コンポーネントを起動する要素に指定する属性名 |
| styleSheetAutoLoading | 真偽値 | true | スタイルシートを自動的に読み込む。読み込む CSS は mode パラメータに依存する |
| useGrouping | 真偽値 | false | グループ検索機能を利用するかどうかの設定。trueを指定した場合、グループのキーでまとめられた結果が表示される |
| pagenationType | 数値 (1もしくは2) |
1 | ページ番号変更コンポーネントが生成するページ番号付きのページリンクの表示方法の指定 1を指定すると、現在のページを中心に左右にそれぞれ最大pagenationCountのページリンクを表示される 2を指定すると、現在のページを含めた全ページリンクがpagenationCountになるようにページリンクが表示される |
| pagenationCount | 数値 | 4 | 現在表示しているページ番号の、両側何ページ分のページリンクをページャで表示するかの指定 |
| resultCountList | 配列 | [10, 20, 30] | countSelectorコンポーネントにおいて、選択可能な表示件数のリスト |
| screenId | 文字列 | default | ポップファインドが動作している画面を統計時に識別するための識別子 |
| userQueryParamNames | オブジェクト | なし | URLパラメータ名をカスタマイズする場合の設定 設定可能な内容は後述 |
| additionalSearchKeyword | 文字列 | なし | 検索結果を指定された検索キーワードで強制的に絞り込む |
| additionalAttribute | 文字列または配列 指定可能な形式はこちら |
なし | 検索結果を指定された属性で強制的に絞り込む |
| additionalNotAttribute | 文字列または配列 | なし | 検索結果を指定された属性のANDNOTで強制的に絞り込む。 複数指定可 使用例はこちら |
| imageLazyLoading | 真偽値 | false | 画像の遅延読み込みを行うかの指定 ブラウザのloading属性を使用するため、動作はブラウザに依存する |
| keepSubmitState | 真偽値 | false | キーワード変更などの再検索時に、現在の検索条件を保持するかの指定 trueを指定すると検索キーワード・ページ番号以外の条件が引き継がれる inputIdで指定された要素の兄弟要素として検索条件を追加することにより実現する |
| keepInputWord | 真偽値 | false | 絞り込み変更などの再検索時に、検索窓のキーワードを引き継ぐかどうか。 |
| checkedItemLimit | 数値 | 5 | 最近チェックした商品を保存・表示する個数 上限値は20です |
| checkedItemLifeTime | 数値 | 604800 | 最近チェックした商品を保存する期間(秒数) 最後にクリックされてからこの設定秒数を超えた商品はチェックした商品のリストから削除される |
| checkedItemLayoutOrder | 配列 | [ "image", "title" ] | 最近チェックした商品を保存・表示する内容を指定します。 指定できる値はlayoutOrderで指定可能なレイアウト一覧を参照してください。 |
| numericNDataMagnification | 文字列 (x1,x10,x100,x1000から選択) |
x1 | データ登録時に小数値のデータを10倍/100倍などして整数値に正規化して登録した場合、適用した倍率を指定 本パラメータの 倍率を揃えることで、表示時に倍率が考慮されて表示されます。 この設定は、汎用数値絞り込みコンポーネント内のフォーム、および汎用数値Nをレイアウトとして表示する際に有効です |
| allowEmptyKeywordSearch | 真偽値 | true | 検索ワードが空文字のときに検索を実行するかどうか (falseのときメッセージリソースのsearchstatusfull.noKeyword, searchstatus.noKeywordが表示されます。) |
| asyncUpdate | 真偽値 | false | 非同期モードを使うかどうか。非同期モードでは状態変更時に画面の再読み込みが発生しません。おすすめリンク設定タグとキーワードランキング設定タグにも同じ設定を行います。 |
| asyncUpdateScrollUp | 真偽値 | false | 非同期モードで状態変更時、画面をページトップまでスクロールアップするかどうか。 |
| layoutGroupClassName | 文字列 | '_layoutgroup' | layoutOrderで配列を指定した際に生成されるdivタグのクラス名を変更できます。検索結果コンポーネントによる表示にのみ影響します。 |
| snippetSize | 数値 | 200(標準サイズ) | snippetレイアウトの長さを指定。入れた数値が文字列長となる ※ハイライトの関係から実際のサイズは指定値より前後します |
| quickPreview | 真偽値 | false | クイックプレビュー機能を有効にします。クイックプレビュー機能はHTMLファイルやPDFファイルを検索結果画面に滞在したまま簡易表示する機能です |
| mobileMaxWidth | 数値 | 800 | モバイルと判定する最大の画面横幅(px) これより小さいものはモバイルと判定され、クイックプレビュー機能を無効とする。0以下の数値を指定した場合、本パラメータによる判定そのものが無効化される |
| extraResultsCount | 数値 | 0 | 検索結果の追加表示件数。1以上の値を設定した場合、追加で見るボタンが検索結果の下部に表示されます。 |
設定パラメータの補足¶
layoutOrder で指定可能なレイアウト一覧¶
layoutOrderパラメータは検索結果コンポーネントで表示される情報を制御することができます。
layoutOrderパラメータには、以下のレイアウトを組み合わせて配列で渡すことにより使用することができます。
設定例と生成される DOM は以下の通りです。(商品ランキングコンポーネントの場合の指定方法は異なります。)
- 設定例
// ポップファインド設定タグ
var popfindConf = popfindConf || {};
popfindConf["data-[モード]"] = {
uid: "[UID]",
mode: "[モード]",
inputId: "q",
layoutOrder: ["title", "thumbnail", "price"]
};
- 生成されるDOM
<div class="_item">
<div class="_wrap">
<div class="_title">...</div>
<div class="_thumbnail">...</div>
<div class="_price">...</div>
</div>
</div>
また、配列の要素として配列を渡すとDOM構造がグループ化されます。
設定例と生成されるDOMは以下の通りです。
- 設定例
// ポップファインド設定タグ
var popfindConf = popfindConf || {};
popfindConf["data-[モード]"] = {
uid: "[UID]",
mode: "[モード]",
inputId: "q",
layoutOrder: [["seq", "title"], ["thumbnail", "price"]]
};
- 生成されるDOM
<div class="_item">
<div class="_wrap">
<div class="_layoutgroup1">
<div class="_seq">...</div>
<div class="_title">...</div>
</div>
<div class="_layoutgroup2">
<div class="_thumbnail">...</div>
<div class="_price">...</div>
</div>
</div>
</div>
各グループのクラス名(_layoutgroupN)の接頭辞は、layoutGroupClassNameで変更可能です。
指定可能なレイアウトの一覧は以下です。
注意
用途やヒアリングシートの内容によって、実際に利用可能なフィールドは異なります。
登録されていないフィールドの利用は正常な結果にならない可能性があります。
利用できるレイアウトについてはお問い合わせください。
| レイアウト名 | 説明 |
|---|---|
| seq | 先頭から何番目の検索結果かを示す通し番号を表示します |
| id | コンテンツIDを表示します。通常URLが表示されます |
| title | コンテンツのタイトルをリンク付きで表示します |
| summary | コンテンツの概要を表示します |
| link | URLをリンク付きで表示します |
| snippet | キーワードがマッチした周辺の文字列をハイライト付きで表示します。 キーワードが存在しない場合はコンテンツの先頭を表示します |
| thumbnail | コンテンツの画像をリンク付きで表示します |
| filetype | 取得したコンテンツの種別を表示します |
| filesize | 取得したコンテンツのサイズを表示します |
| domain | 取得したコンテンツのドメインを表示します |
| path | 取得したコンテンツのパスを表示します |
| last_modified | 取得したコンテンツの最終更新日を表示します |
| text | 表示用文字列を表示します |
| icons | アイコンを表示します。複数登録されている場合は複数表示されます。 |
| keywords | キーワードを表示します。複数登録されている場合は複数表示されます。 |
| keywords_exact | キーワードを表示します。複数登録されている場合は複数表示されます。 |
| keywords_forward | キーワードを表示します。複数登録されている場合は複数表示されます。 |
| keywords_alphanumeric | キーワードを表示します。複数登録されている場合は複数表示されます。 |
| attributes | 属性を表示します。複数登録されている場合は複数表示されます。 |
| additional_textN | 汎用文字列Nを表示します。(Nは1から10) |
| additional_linkN | 汎用リンクNを表示します。(Nは1から3) クリックやタップをすると汎用リンク1へ遷移します |
| additional_iconsN | 汎用アイコンNを表示します。(Nは1から3) 複数登録されている場合は複数表示されます。 |
| group_title | グループ名を表示します。クリックやタップをするとグループページURLへ遷移します |
| group_link | グループページURLを表示します。クリックやタップをするとグループページURLへ遷移します |
| group_image | グループ画像を表示します。クリックやタップをするとグループページURLへ遷移します |
| 空のレイアウト | レイアウト名を「__(アンダーバー2つ)」から始まる名称にした場合(例: __foo, __hoge 等) 指定したレイアウト名をクラス名に持つ空のdiv要素を生成します |
sitesearch モード で layoutOrder を変更する¶
sitesearch モードでは layoutOrder を変更すると css の適用が外れ大きく表示が崩れます。
この問題を最小限に抑えるには、mode: "sitesearch" の代わりに mode: "sitesearch3" を指定してください。
mode: "sitesearch3" は、表示に関する処理を部分的に改善した動作モードです。
userQueryParamNames パラメータで指定可能なパラメータ一覧¶
userQueryParamNames パラメータでは、以下に示すとおりに、キーにパラメータキー、値に変更したいURLパラメータ名を指定したオブジェクトを渡すことにより使用することができます。
指定されなかったURLパラメータは標準のURLのパラメータ名となります。
指定例は以下の通りです。
指定可能なキーの一覧についてはURLパラメータリファレンスを参照ください
// ポップファインド設定タグ
var popfindConf = popfindConf || {};
popfindConf["data-[モード]"] = {
uid: "[UID]",
mode: "[モード]",
inputId: "q2",
userQueryParamNames: {
searchKeyword: 'q2',
resultPage: 'page'
}
};