日本旅行宿泊＋JRプラン横断検索検索パーツ

1.概要

「日本旅行　宿泊＋JRプラン横断検索　検索パーツ」（以下、「本パーツ」と言います）は、日本旅行　宿泊＋JRプラン横断検索（以下、「アプリケーション」と言います）のデータを利用して、ページ内に検索手段を提供するとともに動的に検索結果を表示し、検索した結果を引き継いだ状態でアプリケーションを起動させる為のツールです。本パーツは様々な検索要件を提供する機能をそれぞれ独立したHTMLエレメントとして提供しており、必要なパーツをページ内に自由に配置し、またスタイルシートを用いて表現を自由に変更することが可能です（但し、変更すると機能を阻害する部分があります）。

本パーツは、アプリケーションを提供しているWebサーバーとJSON-P方式による通信を行うことにより動作します。そのため、以下のケースでは動作しません。

・JSON-P方式の通信が出来ないブラウザ（Mac Safariの一部【バージョン1(1.3.1以前)、及びバージョン2(2.0.1以前)]】）
・JavaScriptが利用できないか、無効にしているブラウザ

本パーツは、ページ内に配置されたHTMLエレメントに直接HTMLを書込みます。従って、ページのスタイル設定が影響を与え、予期しない表示となる場合があります。その場合、本パーツが利用するHTMLエレメントには全て'NTA_JR2_'から始まるidが付与されていますので、適宜調整を行う必要があります。

2.サンプル

データ更新時刻の表示

該当施設数の表示

カレンダー

泊数

地図

エリアプルダウン

方面：

都道府県：

エリア：

地区：

宿泊条件

1室利用人数：

利用室数：

お宿タイプ：

食事条件：

部屋タイプ：

こだわり条件を追加する

キーワード

起動ボタン

ブランドから探す

ブランドについて

出発地

施設一覧

空き一覧

3.設定

3-a. スクリプトタグの配置

パーツ設定用スクリプト

本パーツの動作を制御する為の設定を以下の書式で定義します。
サンプルは、本ページのheadセクションに記述されています。
【註】本スクリプトは、必ず下記「パーツ実行用スクリプト」のタグより前に配置してください。
```
var NTA_JR2_config = {
    enablePopupCloser:      true
    ,useShimForPopup:       true
    ,keywordSearchAction:   false
    ,mapSearchAction:       "area"
    ,startDayOffset:        0
    ,departMonth:           "201204"
    ,startCondition:        {
    				departure: "56"
                                ,directionCode:	""
                                ,prefCode:	""
                                ,areaCode:	""
                                ,kodawari2:	"hotel_15"
                                ,brand:		""
                                ,brand2:	"NTA"
                                ,RECEIPT_FLG:		""
                                ,RECEIPT_PLACE_CD:	""
                                ,Pax:	""
				,hotelCode:"3559-302"
                            }
    ,target:                "_blank"
    ,countString:           function(count) {
                                if (count > 0) {
                                    return "<font color='red'>" + commify(count) + "件</font>の施設があります。";
                                } else {
                                    return "該当する施設がありません。";
                                }
                            }
    ,SITE_ID:	            "66100002"
    ,jrCustomized:	    true
    ,rootMapURL:	    "http://yado9.nta.co.jp/nta_yado/map/00/areaJ.gif"
    ,JP_WARIBIKI_CODE:	    "C1000001"
    ,toSearchList:          1 // 起動直後の検索一覧頭出し
};
```
enablePopupCloser: カレンダーパーツを利用する場合、ページ内でカレンダー以外の部分をクリックした場合にポップアップを閉じる様に、bodyにイベントが設定されます。他のイベントの干渉により問題が発生する場合は、この選択肢を'false'に設定してください。

useShimForPopup: カレンダーパーツを利用する場合、カレンダーのポップアップが開いた状態で、下にselectタグが存在していると、IE5.5/IE6では当該selectタグがポップアップの上に表示されます。この問題を回避する為には、一般的にポップアップとselectタグの間にiframeを配置する手法が用いられます。この選択肢を'true'に設定すると、このiframeを利用した対応が有効となります。

keywordSearchAction: キーワードの「検索」ボタンの動作を規定します。'true'の場合は、「検索」が実行され、ページ上の各種該当件数が更新されます。'false'の場合は、キーワード条件のみ（但し、複数日選択のパラメータは引き継がれます）を設定して、横断検索のアプリケーションを起動します。

mapSearchAction: この項目を設定すると、地図の特定レベルを選択した時点で検索アプリケーションを起動します。設定可能な値は「direction」（方面）、「pref」（都道府県）または「area」（エリア）で、地図上で設定されたレベルをクリックすると、その時点で検索アプリを起動します。
※註1※ 大文字/小文字は区別されますので、ご注意ください。
※註2※ 原則として、「pref」は利用しないでください（「北海道」及び「沖縄」については、データ構造上「都道府県」レベルが存在しないロジックとなっている為、「pref」設定では検索アプリケーションが起動されません）。
※註3※ 地図では地区の選択ができませんので、地区レベルでの起動は出来ません。

startDayOffset: 本パーツが起動した時に選択する既定の日付を、当日からの日数で指定します。0が指定された場合は当日が既定となり、nが指定されると[当日＋n日]後が既定となります。指定が無い場合には、pageModeにより選択された起動対象アプリケーションの設定（現状：plaza:当日、その他：当日+3日）が適用されます。

departMonth: 本パーツが起動した時に選択する既定の日付を、"yyyymm"形式で指定します。この値で指定される日付が、offsetで指定される日付よりも過去になった場合は、offsetで指定される日付が優先されます。

startCondition: 本パーツが起動した時に選択する検索条件を設定します。
departure: 出発地（設定のない場合は、"31"：首都圏となります。）
directionCode：　方面コード
prefCode：　県コード
areaCode：　エリアコード
kodawari2：　こだわり条件コード（ここで設定したこだわり条件は常に有効となります。複数指定する場合は、','で連結してください。）
brand：　ブランドコード（NTA:赤い風船, WEB:webコレクション, JR:JRコレクション)
　　　　　　（ここで設定したブランドはガジェットの初期表示時に有効になります。　複数指定する場合は、','で連結してください。）
brand2：　ブランドコード（ここで設定したブランドは横断検索のアプリケーションを起動する時に常に有効となります。　複数指定する場合は、','で連結してください。）
RECEIPT_FLG：　店頭受け取りフラグ
RECEIPT_PLACE_CD：　店頭受け取り箇所コード
Pax：　1室利用人数（1を指定した場合1名1室となります。設定のない場合は2：2名1室となります。）
※註4※ 地図上の表示はエリアが最小単位ですので、地区を指定しても地図上はエリアの選択までしか表示されません（プルダウンには反映されます）。
※註5※ mapSearchActionの指定と競合しない様、ご注意ください。

target: アプリケーションを起動する場合のウィンドウ名を設定します。【_blank:新規ウィンドウ、_self:同ウィンドウ】

countString: 該当施設数の表示文字列をカスタマイズする場合に設定します（既定の表示で宜しければ不要です）。

SITE_ID: 宿なびのアフィリエイトコード（設定しない場合はnull若しくは空文字）

jrCustomized: trueに設定すると、JR用に沖縄を非表示とする地図を使用します。

rootMapURL: 指定された画像ファイルを全国画像に使用します。指定のない場合は通常どおりです。

JP_WARIBIKI_CODE: 【省略可】指定された国内のキャンペーン割引コードを割引クッキーに書き込みます。（設定しない場合はnull若しくは空文字）
パーツ実行用スクリプト

ページ内に、以下のscriptタグを配置してください。配置場所は任意ですが、前記「パーツ設定用スクリプト」より後ろに設置される必要があります。
```
<script type="text/javascript" src="//search.nta.co.jp/loa/stream/nta_jr/parts_jr.js" charset="Shift_JIS"></script>
```

3-b. スタイル

本パーツでは、検索条件の変更によって絞込を行った場合、該当する施設が存在しない検索項目は選択出来なくする機能が実装されております。選択出来ない項目は、各種プルダウンのoptionタグ（こだわり条件の場合はlabelタグ）に'na'というクラスが設定されます。当該オプションタグを識別する為に、ページに以下のCSS定義を追加してください（設定内容は任意に変更可能です。）。
```
option.na {
    color:                  #999;
    background-color:       #DDD;
}
label.na {
    color:                  #999;
}
```

4.パーツの配置

4-a. データ更新時刻の表示

HTMLタグ

ページ内に、「NTA_JR2_DispVersion」というidを付与した任意のElementを配置してください。当該ElementのinnerHTMLに、以下の文字列が設定されます。

※空室状況はm月d日 hh：mi現在の空室状況です。満室の際はご了承ください。

4-b. 該当施設数の表示

HTMLタグ

ページ内に、「NTA_JR2_DataCount」というidを付与した任意のElementを配置してください。

既定では、上記ElementのinnerHTMLに以下の文字列が設定されます。

該当する施設がある場合：「x,xxx件の施設が該当します。」
該当する施設が無い場合：「該当する施設がありません。」

上記文字列をカスタマイズしたい場合には、NTA_JR2_config.countStringに文字列生成関数を定義し、適宜表示文字列を生成してください。

4-c. カレンダーパーツ

HTMLタグ

ページ内に、以下の２つのselectタグを配置してください（動作させる為には、「年月」と「日」プルダウンの両方が必須です）。
```
<select id="NTA_JR2_CalendarYm"></select>
<select id="NTA_JR2_CalendarD"></select>
```
更に、カレンダーを表示させる場合は、「NTA_JR2_popup_calendar_button」というIDを付与したaタグをページ内に配置してください（オプショナル）。
```
<a id="NTA_JR2_popup_calendar_button" href="#">...</a>
```
スタイル

本パーツのカレンダー部分用標準スタイル設定は、こちらをご参照ください。環境に合わせて適宜編集してご利用ください。

4-d. 地図パーツ

HTMLタグ

ページ内に、「NTA_JR2_Map」というidを付与したdivタグを配置してください。

【註】地図のサイズは固定（w:300px／h:211px）です。変更すると正しく動作しません。

また、「NTA_JR2_ZoneTopicPath」というidを付与した任意のElementを配置すると、地図の設定状況に合わせたパンくずが表示されます。
スタイル

本パーツの標準スタイル設定は、こちらをご参照ください。環境に合わせて適宜編集してご利用ください。

4-e. エリアプルダウンパーツ

HTMLタグ

ページ内に、以下の４つのselectタグを配置してください（動作させる為には、「方面」、「都道府県」、「エリア」及び「地区」プルダウンの全てが必須です）。
```
<select id="NTA_JR2_DirectionCombo"></select>
<select id="NTA_JR2_PrefCombo"></select>
<select id="NTA_JR2_AreaCombo"></select>
<select id="NTA_JR2_DistrictCombo"></select>
```

4-f. 宿泊条件パーツ

HTMLタグ

ページ内に、以下の５つのselectタグを配置することが可能です。何れも配置は任意です。id及びoptionタグのvalue属性については、下記の通り設定してください。

【1室利用人数】

<select id="NTA_JR2_Pax">
    <option value="">指定なし</option>
</select>

【利用室数】

<select id="NTA_JR2_NumberOfRooms">
    <option value="">指定なし</option>
</select>

【お宿タイプ】

<select id="NTA_JR2_StayingType">
    <option value="">指定なし</option>
</select>

【食事条件】

<select id="NTA_JR2_MealCond">
    <option value="">指定なし</option>
</select>

【部屋タイプ】

<select id="NTA_JR2_RoomType">
    <option value="">指定なし</option>
</select>

4-g. キーワードパーツ

HTMLタグ

ページ内に、「NTA_JR2_KeywordText」というidを付与したテキストボックス、及び「NTA_JR2_search」というidを付与したボタンまたはリンクを配置してください（動作させる為には、両者が必須です）。

「NTA_JR2_search」には、パーツ実行用スクリプトによりonClickイベントが設定されます。onClickイベントが設定可能であれば、タグの種類は問いません。クリックした時の動作は、NTA_JR2_config.keywordSearchActionの値によって変わります（「検索を実行する」、あるいは「アプリケーションを起動する」）。
```
<input id="NTA_JR2_KeywordText" type="text" />
<input id="NTA_JR2_search" type="button" value="検索" />
	
```

4-h. 起動ボタンパーツ

HTMLタグ

ページ内に、「NTA_JR2_go」というidを付与したボタンまたはリンクを配置してください。

「NTA_JR2_go」には、パーツ実行用スクリプトによりonClickイベントが設定されます。onClickイベントが設定可能であれば、タグの種類は問いません。
```
<input id="NTA_JR2_go" type="button" value="起動" />
	
```

4-i. こだわり条件パーツ

HTMLタグ

ページ内に、「NTA_JR2_KodawariBasic」というidを付与した任意のElementを配置してください。

各チェックボックスには、パーツ実行用スクリプトによりonClickイベントが設定されます。
```
<div id="NTA_JR2_KodawariBasic"></div>
```

4-j. 1名様申込OKのプランで探す

※「1室利用人数」と「利用室数」で同等の機能を提供する[2013/4]

HTMLタグ

ページ内に、「NTA_JR2_OneApplication」というidを付与した任意のチェックボックスを配置してください。

件数を表示するには、「NTA_JR2_OneApplication_Count」というidを付与した任意のElementを配置してください。

<input type="checkbox" id="NTA_JR2_OneApplication" /><label for="NTA_JR2_OneApplication">1名様申込OKのプランで探す<span id="NTA_JR2_OneApplication_Count"></span></label>

4-k. ブランドから探す

HTMLタグ

ページ内に、「NTA_JR2_Brand」というidを付与した任意のElementを配置してください。

<div id="NTA_JR2_Brand"><p class="about_brand"><a href="" onclick="window.open('http://www.nta.co.jp/jrc/brand', 'BrandInfo', 'width=220px,height=440px');return false;">ブランドについて</a></p></div>

4-l. 出発地

HTMLタグ

ページ内に、「NTA_JR2_Departure」というidを付与した任意のselectタグを配置してください。

<select id="NTA_JR2_Departure"></select>