@machi-pla/japan_concierge_2024

v0.1.1

Published

2 months ago

Japan Concierge 2024edition Favorite spots function for external pages.

Downloads

0High
0Medium
0Low

sugahara

ooshima

hashiguchi.machi-pla

Japan Concierge Client

Japan Concierge client makes it easy for your users to add there Favorite Spots to our travel planning service.

Features

Central counter for favorite spots.
Favorite spot button for synced spots.
Japan Trip Planner iframe loader

Install

Via npm

$ npm install @machi-pla/japan_concierge --save

Via yarn

$ yarn add @machi-pla/japan_concierge

Via bower:

$ bower install --save @machi-pla/japan_concierge

Usage

Example for css support class to hide the favorite spot button.

.hidden {
  display: none;
}

Favorite Spot Counter

<span data-jc-controller="favorite-spot-count">...</span>
<!--- The JC client will replace ... with the users spot count. --->

Favorite Spot Button

<!--
  Set your spot id as: `data-jc-favorite-spot-id`
  or set our JC spot id as: `data-jc-favorite-spot-jc-id`

  You need to provide a css class name to hide the add or remove butten.
  Set the plass name as: `data-jc-favorite-spot-hide-class`
-->
<div data-jc-controller="favorite-spot"
     data-jc-favorite-spot-id="1"
     data-jc-favorite-spot-hide-class="hidden">
  <!--
    HTML button to add a spot to the users favorite spots. This button
    is hidden when the user already added the spot to the favorite spots.
  -->
  <button data-jc-target="favorite-spot.addButton"
          data-jc-action="favorite-spot#add">
    Add spot to favorite spots.
  </button>

  <!--
    HTML button to remove a spot from the users favorite spots. This button
    is hidden when the user dose not have this spot in his favorite spots.
  -->
  <button data-jc-target="favorite-spot.deleteButton"
          data-jc-action="favorite-spot#delete">
    Remove spot from favorite spots.
  </button>
</div>

Copy Course Button

<!--
  HTML button to copy a model course into my plan and make it active.
  This button becomes disabled just after an user pushes it
  in order to prevent to copy more than once.

  Set the name of this plan as: `data-jc-plan-name`.

  Set the id of this plan's start spot as: `data-jc-plan-start-spot-id`.
  Be aware that this function doesn't support JC spot id.

  Set the array of transportation modes used for the way
  between the previous spot and the next spot as: `data-jc-plan-modes`.
  You can choose one from 'car', 'train', 'walk', and 'auto',
  while 'auto' allows system to choose the best mode automatically
  from the remaining three.
  Be aware that this attribute is optional: If you don't give
  `data-jc-plan-modes`, every modes between all spots become 'auto'.

  Set the array of spots ids as: `data-jc-plan-spot-ids`.
  Be aware that this function doesn't support JC spot id.

  Set the path of my plan page as: `data-jc-plan-path`.
  After the course is copied to my plan, you'll be redirected to there.
-->

  <button data-jc-controller="plan"
          data-jc-plan-name="Some Nice Course"
          data-jc-plan-start-spot-id="19"
          data-jc-plan-modes="['car','train','walk','auto']"
          data-jc-plan-spot-ids="[10,21,4,13]"
          data-jc-plan-path="/plan"
          data-jc-action="plan#create">
    Add model course to my plan
  </button>

<!--
  In this case, course is like this:
    19 --car-> 10 --train-> 21 --walk-> 4 --auto-> 13
-->

  <button data-jc-controller="plan"
          data-jc-plan-name="Some Nice Course"
          data-jc-plan-start-spot-id="19"
          data-jc-plan-spot-ids="[10,21,4,13]"
          data-jc-plan-path="/plan"
          data-jc-action="plan#create">
    Add model course to my plan
  </button>

<!--
  In this case, course is like this:
    19 --auto-> 10 --auto-> 21 --auto-> 4 --auto-> 13
-->

コース生成ボタン（スタート地点を起点とする最短ルートの並び替え機能付き）

<!--
  複数のスポットを用いてコース情報を生成する為のbuttonの定義。
  このボタンは、スタート地点を起点として、最短ルートで並び替えを行った内容でプランが作成される。
  この例では、"Some Nice Course"という名称で、最短ルートの並び替え結果が
　　19 -自動選択-> 21 -自動選択-> 13 -自動選択-> 4 -自動選択-> 10
　というように計5つのスポットを有するプランを作成し、マイプランページに自動的に遷移する

  ・「data-jc-controller="optimized-plan"」は記載必須、変更不可。
  ・マイプランに取り込まれた際に付与される名称を"data-jc-optimized-plan-name"に指定する。
  ・スタート地点となるスポットIDを"data-jc-optimized-plan-start-spot-id"に指定する。必須項目。
  ・スタート地点となるスポット以降で訪れるスポットを"data-jc-optimized-plan-spot-ids"で指定する。
　　スポットIDの数値からなる配列として指定する。
  ・マイプランページを表示するためのURLパスを"data-jc-optimized-plan-path"で指定する。
-->

  <button data-jc-controller="optimized-plan"
          data-jc-optimized-plan-name="Some Nice Course"
          data-jc-optimized-plan-start-spot-id="19"
          data-jc-optimized-plan-spot-ids="[10,21,4,13]"
          data-jc-optimized-plan-path="/plan"
          data-jc-action="optimized-plan#create">
    最適な順番に並び替えてマイプランで編集する
  </button>

<!--
  このケースの場合, 以下の様になる:
    19 --自動選択-> 21 --自動選択-> 13 --自動選択-> 4 --自動選択-> 10
-->

コース生成ボタン（複数日のコースを１つのプランで生成する機能）

<!--
  複数のスポットを用いてコース情報を生成する為のbuttonの定義。
　この例では、"Multi Days Nice Course"という名称のプラン情報で、
　　1日目：10 -> 車 -> 21 -> 電車 -> 4 -> 自動選択 -> 13
　　2日目：11 -> 車 -> 22 -> 電車 -> 5 -> 自動選択 -> 14
　　3日目：12 -> 車 -> 23 -> 自動選択 -> 6 -> 自動選択 -> 15
　　4日目：13 -> 自動選択 -> 24 -> 電車 -> 7 -> 自動選択 -> 16
　　5日目：14 -> 車 -> 25 -> 自動選択 -> 8 -> 自動選択 -> 17
　というように計5日分のコースと各日に紐づくスポットを、それぞれのスポット間を指定された移動手段で巡るコースを定義している。
  コピーが完了した後、マイプランページに自動的に遷移する。

 ・「data-jc-controller="multi-days-plan"」は記載必須、変更不可。
 ・「data-jc-action="multi-days-plan#create"」は記載必須、変更不可。
 ・マイプランページを表示するためのURLパスを"data-jc-multi-days-plan-path"で指定する。
 ・マイプランに取り込まれた際に付与されるプラン名称を"data-jc-multi-days-plan-name"に指定する。
 以下、日付毎に指定方法は共通。日付の概念は、「data-jc-multi-days-planX」（X=1〜5の範囲。開始は必ず1から付与。途中、Xの値の連続性が途切れた場合は、途切れる直前までの内容のみ認識する。）となる。
 ・訪れるスポット情報は、スポット情報のIDをカンマ区切りで"data-jc-multi-days-planX-spot-ids"で指定する。
 ・直前のスポットから次のスポットに移動する際に使用する移動手段をカンマ区切りで"data-jc-multi-days-planX-modes"で指定する。
　 指定可能な移動手段は以下の通り。
     'car'：車
     'train'：公共交通
     'walk'：徒歩
     'auto'：自動選択　※JCサービスによって最適な移動手段が自動的に選択される。
  　なお本属性は必須ではなく、"data-jc-multi-days-planX-modes"属性自体を省略することで該当する日のコースにおける移動手段をJCサービスによる自動選択とすることができる。（つまりすべて'auto'を指定した場合と同じ結果となる。）
　 また、指定可能な数は「"data-jc-multi-days-planX-spot-ids"の情報 - 1」のみ許容する。
-->

  <button data-jc-controller="multi-days-plan"
          data-jc-action="multi-days-plan#create"
          data-jc-multi-days-plan-path="/plan"
          data-jc-multi-days-plan-name="Multi Days Nice Course"
          data-jc-multi-days-plan1-spot-ids="10,21,4,13"
          data-jc-multi-days-plan1-modes="car,train,auto"
          data-jc-multi-days-plan2-spot-ids="11,22,5,14"
          data-jc-multi-days-plan2-modes="car,train,auto"
          data-jc-multi-days-plan3-spot-ids="12,23,6,15"
          data-jc-multi-days-plan3-modes="car,auto,auto"
          data-jc-multi-days-plan4-spot-ids="13,24,7,16"
          data-jc-multi-days-plan4-modes="auto,train,auto"
          data-jc-multi-days-plan5-spot-ids="14,25,8,17"
          data-jc-multi-days-plan5-modes="car,auto,auto">
    マイプランで編集する
  </button>

オリジナルスポット生成ボタン

<!--
  オリジナルスポットをJCサービスに登録するdivの定義。
  ・「data-jc-controller="original-spot"」は記載必須、変更不可。
  ・「data-jc-controller="original-stay"」は滞在時間を分で指定。記載必須。
  ・「data-jc-controller="original-lat"」は緯度を指定。記載必須。
  ・「data-jc-controller="original-lng"」は経度を指定。記載必須。
  ・「data-jc-original-spot-name」は登録するスポット名を指定する。
-->

<div data-jc-controller="original-spot"
     data-jc-original-spot-name="Original Spot Name"
     data-jc-original-spot-stay="30"
     data-jc-original-spot-lat="36.55555"
     data-jc-original-spot-lng="135.77777">

  <!--
    オリジナルスポットを生成するためのボタン定義。
    "data-jc-xxxx"部分はここに記載されている内容そのままに記述すること。
  -->

  <button data-jc-target="original-spot.createButton"
          data-jc-action="original-spot#add">
    Create original spot.
  </button>
</div>

Japan Trip Planner iframe

<iframe style="width: 100%; border: 0px none;"
        data-jc-controller="iframe">
        data-jc-locale="zh-TW">
</iframe>

<!--
  If your page is multilingual please make sure to also add the ISO 639-1 language codes in the
  URL. (example: zh-TW or zh-tw)

  The Javascript will take control over the resizing of the iframes hight to show all the content
  without a scroll bar.
-->

Start the Japan Concierge Client

import JC form '@machi-pla/japan_concierge';

JC.start({ key: 'PUBLIC_API_KEY', url: 'JC_API_URL' });

Please ask us for the PUBLIC API KEY and JC API URL.

Browser Support

Japan Concierge supports all evergreen, self-updating desktop and mobile browsers out of the box.

If your application needs to support older browsers like Internet Explorer 11, include the @stimulus/polyfills package before loading Japan Concierge.

Applied Polyfills:

core-js
- Array.find()
- Array.findIndex()
- Array.from()
- Map
- Object.assign()
- Promise
- Set
element-closest
- Element.closest()
mutation-observer-inner-html-shim
- MutationObserver support for Internet Explorer 11

The full version japan-concierge.full.js includes all named polifills. Please see the CDN section for details.

CDN

Base version with all evergreen, self-updating desktop and mobile browsers support.

<script src="https://unpkg.com/@machi-pla/[email protected]/dist/japan-concierge.base.js"
        crossorigin="anonymous">
</script>

Full version with polyfills for old browser support

<script src="https://unpkg.com/@machi-pla/[email protected]/dist/japan-concierge.full.js"
        crossorigin="anonymous">
</script>

About us

Japan Concierge is maintained and funded by 株式会社まちづくりプラットフォーム