カスタムコンポーネントを追加する#

#目的

Reactフレームワークを使用すると、独自のコンポーネントをゼロから作成できます。これらのコンポーネントは、2つの用途に使用できます：動的パラメータとチャートです。

#カスタムコンポーネントを動的パラメータとして使用する

#コンポーネントを生成する

カスタムコンポーネントの作成方法と、それを動的パラメータとして使用する方法を見てみましょう。

このチェックボックスグループコンポーネントの作成方法を、ステップバイステップでご説明します。

コンポーネントを生成するには、以下のコマンドを実行して、事前構築されたスクリプトを使用できます。

yarn generate

コンポーネントジェネレーターを選択し、DynamicParameterCheckboxと名前を付け、下記のように最後の質問に「No」と回答してください:

このスクリプトは、src/components にフォルダを生成し、3つのファイルを含みます。

• DynamicParameterCheckbox.jsx
• DynamicParameterCheckbox.less
• index.js

#コンポーネントを宣言する

コンポーネント自体に取り組む前に、それを宣言して使用する方法を見てみましょう。

新しいコンポーネントを宣言するには、以下の手順に従ってください：

• src/components/index.js に移動します

• ファイルの先頭にこの行を追加してコンポーネントをインポートします :

  import DynamicParameterCheckbox from "./DynamicParameterCheckbox";

• それを宣言するには、コンポーネントオブジェクトにその名前を追加します

    components: {
        ...
        DynamicParameterCheckbox
  },

このコンポーネントを構成ファイルで呼び出すには、エイリアスを指定します。コンポーネントのエイリアスを取得するには、その名前をcamelCaseからkebab-caseに変換します（DynamicParameterCheckboxはdynamic-parameter-checkboxになります）、その後「dynamic-parameter」と/または「chart」を削除します。

ここで、コンポーネントのエイリアスは checkbox です。次に、config/menus/sidebar.json に移動し、dynamic-weekday の component プロパティを "checkbox"（すなわち、エイリアス）に変更してください。

アプリケーションページに移動し、動的曜日コンポーネントが変更されたことに注意してください。

コンポーネントは表示されますが、まだ機能していません。その動作は次のセクションで定義されます。

#コンポーネントを編集する

このガイドで使用するフレームワークはReactです。

また、関数型コンポーネントを使用しているため、React Hooks の最新機能の一つを使用します。詳細は、このページをご覧ください。

DynamicParameterCheckbox.jsx の編集を始めましょう。

このコンポーネントは動的パラメータとして宣言されているため、Platformsのデータフローのロジックによって、既にいくつかのプロパティが自動的に渡されています。このコンポーネントが最初にレンダリングされる際に、これらのプロパティをログに記録するには、useEffectフックを使用します。

まず、ファイルの最初の行を変更して、useEffect と useState（これは後で必要になります）をインポートします。

import React, { useEffect, useState } from 'react'

次に、props を関数コンポーネントの引数に追加します。

const DynamicParameterCheckbox = (props) => {

最後に、この関数のreturn文の直前にuseEffectフックを追加します。

機能コンポーネントは以下のように定義する必要があります:

const DynamicParameterCheckbox = (props) => {
  useEffect(() => {
    console.log(props);
  }, []);

  return <div>DynamicParameterCheckbox</div>;
};

ブラウザのコンソールパネルを開いてください。propsが表示されるはずです。

ご覧の通り、これらのプロパティのほとんどは、動的パラメータを定義する際にsidebar.jsonで渡されます。 唯一の例外はitemsで、これはdictionary（このケースではweek_day）で指定されたフィールドを照会する内部リクエストの結果です。

チェックボックスを作成しましょう。

これを実現するには、小さなパッケージをインストールする必要があります: react-checkbox-group。これを実行するには、以下のコマンドを実行してください:

yarn add react-checkbox-group

このパッケージを使用すると、チェックボックスグループコンポーネントを利用できます。ファイルの先頭に次の行を追加してインポートできます:

import CheckboxGroup from 'react-checkbox-group'

コンポーネントの状態にブール型の変数 expanded を追加し、小さな矢印アイコンで CheckboxGroup を表示または非表示にすることができます。

const DynamicParameterCheckbox = (props) => {
  const [expanded, setExpanded] = useState(true)
  ...

関数の戻り値の文をこのように変更します:

return (
  <div>
    <div className='dyn-title checkbox-header'>
      {props.title}
      <i onClick={() => setExpanded(!expanded)} className={`fa fa-chevron-${expanded ? 'down' : 'right'} expand-icon`} /></div>
    {expanded && <CheckboxGroup name='options'>
      {(Checkbox) => (
        <React.Fragment>
          {props.items.map(option =>
            <div key={option.value}>
              <label className='dyn-checkbox-container' htmlFor={option.value}>
                <Checkbox className='dyn-checkbox' id={option.value} value={option.value} />
                <span className='dyn-checkbox-label'>{option.label}</span>
              </label>
            </div>)}
        </React.Fragment>
      )}
    </CheckboxGroup>}
  </div>
)

タイトルセクションは props.title を使用しています。これは、dynamic-weekday の定義で title プロパティを config/menus/sidebar.json に渡す必要があることを意味します。以下に示すようになります（HTML要素は冗長であるため削除されています）。

{
  "id": "dyn-weekday",
  "items": [
    {
      "type": "dynamic-parameter",
      "dynamic-parameter": {
        "type": "filter",
        "id": "dynamic-weekday",
        "dictionary": "week_day_label",
        "component": "checkbox",
        "title": "Days"
      },
      "style": {
        "paddingBottom": "10px"
      }
    }
  ]
}

最後に、以下のコードスニペットを使用してDynamicParameterCheckbox.lessを変更し、コンポーネントのスタイルを設定してください。

// DynamicParameterCheckbox stylesheet

@import "../../styles/_variables.less";

.checkbox-header {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.dyn-checkbox-container {
  display: flex;
  align-items: flex-end;
  margin: 3px;
}

.dyn-checkbox {
  -webkit-appearance: none;
  background-color: #fafafa;
  border: 1px solid #cacece;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  padding: 7px;
  border-radius: 3px;
  display: inline-block;
  position: relative;
}

.dyn-checkbox:hover {
  cursor: pointer;
  box-shadow: 0 1px 2px @primary-color, inset 0px 1px 3px @primary-color;
  border: 1px solid @primary-color;
}

.dyn-checkbox:active,
.dyn-checkbox:checked:active {
  box-shadow: 0 1px 2px @primary-color, inset 0px 1px 3px @primary-color;
}

.dyn-checkbox:checked {
  background-color: @primary-color;
  border: 1px solid @primary-color;
  box-shadow: 0 1px 2px @primary-color, inset 0px -15px 10px -12px
      @primary-color, inset 15px 10px -12px @primary-color;
  color: white;
}

.dyn-checkbox:checked:after {
  content: "\2714";
  font-size: 12px;
  position: absolute;
  top: -1px;
  left: 2px;
  color: white;
}

.dyn-checkbox-label {
  cursor: pointer;
  font-family: "Source Sans Pro";
  font-size: 14px;
  letter-spacing: 0;
  color: #97a7b7;
  line-height: 17px;
  margin-left: 5px;
}

.fa.expand-icon {
  color: #97a7b7;
  font-size: 12px;
  cursor: pointer;
  margin-left: 5px;
}

.fa.expand-icon:hover {
  color: #3e4550;
  cursor: pointer;
}

動的パラメータは見た目は良いですが、まだ正しく動作していません。

問題が発生しました。チェックボックスを選択できません！

その理由は、CheckboxGroupを動的パラメータコンポーネントにバインドする必要があるからです。そのためには、コンポーネントの状態に配列を追加する必要があります。この配列は選択されたオプションを追跡するためのものですので、selectedOptionsと名前を付けてください。

const DynamicParameterCheckbox = (props) => {
  const [expanded, setExpanded] = useState(true)
  const [selectedOptions, setSelectedOptions] = useState([])
  ...

関数 onChange を追加して、先ほど定義した配列を更新します。

const onChange = options => {
  setSelectedOptions(options);
};

最後に、2つのプロパティ（onChange と value、selectedOptions を含む配列）を CheckboxGroup に追加する必要があります。返り値のステートメントを変更して、それらをバインドします。

return (
  ...
  <CheckboxGroup name='options' value={selectedOptions || []} onChange={onChange}>
  ...

最後のステップは、この動的パラメータをRedux グローバルストアにバインドすることです。これにより、チャートリクエストに影響を与えることができます。よりモダンで簡潔なアプローチのために、React Reduxフックを使用します。これらの行をファイルの先頭のインポートに追加します：

import { useSelector, useDispatch } from 'react-redux'
import { set } from 'forepaas/store/querystring/action'

次に、DynamicParameterCheckbox関数コンポーネント内で、フックを使用してReduxの状態とディスパッチ関数にアクセスします。これらの行を、コンポーネント関数内に配置します：

const options = useSelector((state) => state.querystring[props.id])
const dispatch = useDispatch()

• useSelector: このフックを使用して、Reduxストアの状態からデータを抽出できます。ここでは、Redux状態のquerystring部分からprops.idに関連付けられた値を取得しています。このoptions変数は、この特定のIDに関するRedux状態が変更されるたびに自動的に更新されます。

• useDispatch: このフックは、Reduxストアからディスパッチ関数への参照を返します。このディスパッチ関数を使用して、ストアを更新するためのアクションを送信します。

DynamicParameterCheckbox 関数コンポーネント内で、ヘルパー関数 updateModel を作成し、アクションをグローバルストアにディスパッチします。

const updateModel = (model) => {
  if (props.id) {
    let value = (model || []).map((item) => item && item.value ? item.value : item)
    dispatch(set(props.id, value.length ? value : null))
  }
}

この関数は、useDispatchから取得したディスパッチ関数を使用して、セットアクションを送信し、Reduxストア内のクエリ文字列を更新します。

次に、onChange関数を更新し、新しいオプションを使用してupdateModelを単純に呼び出すようにします。

const onChange = (options) => {
    updateModel(options)
  }

コンポーネントの内部状態（selectedOptions）が、Reduxストアの状態（特にページのリフレッシュやこのパラメータに対するRedux状態の外部変更後の場合）と同期されていることを確保するには、useEffectフックを次のように更新してください：

useEffect (() => {
    setSelectedOptions(options)
  }, [options])

このuseEffectフックは、オプション値（これはuseSelectorを通じてReduxストアから直接取得したものです）が変更されるたびに実行されます。このフックは、コンポーネントのローカルなselectedOptions状態をグローバルなRedux状態と同期させ、動的なパラメータに対する一貫したビューを提供します。

ダイナミックパラメータがグローバルストアに接続されました。ダイナミックパラメータに接続されているチャートが、dynamic-weekdayに影響を受けるため、このダイナミックパラメータに接続されていることを確認できます。

最初のカスタム動的パラメータを作成しました。 最終コードはこちらでご確認いただけます。

#検索バーを追加する

2番目の動的パラメータを追加して、駅でフィルタリングできるようにします。

新しいコンポーネントを生成します：

yarn generate

コンポーネント ジェネレーターを選択します。名前を DynamicParameterAutocompleteBox とし、最後の質問には「いいえ」と回答してください。

新しく生成された .jsx ファイルの内容を次のように変更します:

import React, { useState, useEffect } from 'react'
import Select, { createFilter }  from 'react-select'
import { useSelector, useDispatch } from 'react-redux'
import { set } from 'forepaas/store/querystring/action'

const searchIcon = () => ({
  alignItems: 'center',
  display: 'flex',
  ':before': {
    fontFamily: 'FontAwesome',
    content: '"\f002"',
    marginRight: 8
  }
})

const customStyles = {
  control: (base, state) => ({
    ...base,
    height: '57px',
    borderWidth: '0px',
    boxShadow: '5px 5px -2px rgba(0, 0, 0, 0.1)'
  }),
  option: (base, state) => ({
    ...base,
    color: state.theme.colors.neutral50,
    fontSize: '13px',
    height: '48px',
    display: 'flex',
    alignItems: 'center',
    fontWeight: 500,
    letterSpacing: 0
  }),
  menu: (base, state) => ({
    ...base,
    zIndex: 2000
  }),
  multiValue: (base, state) => ({
    ...base,
    borderRadius: '21px',
    backgroundColor: state.theme.colors.primary75,
    color: state.theme.colors.neutral0,
    height: '34px',
    alignItems: 'center'
  }),
  multiValueLabel: (base, state) => ({
    ...base,
    color: state.theme.colors.neutral0,
    display: 'flex',
    alignItems: 'center',
    marginLeft: '10px',
    fontWeight: 600,
    letterSpacing: 0
  }),
  placeholder: (base, state) => ({
    ...base,
    color: state.theme.colors.neutral20,
    fontSize: '14px',
    ...searchIcon()
  }),
  multiValueRemove: (base, state) => {
    return ({
      ...base,
      color: state.theme.colors.neutral0,
      borderRadius: '10px',
      padding: '0px',
      margin: '10px',
      border: `1px solid ${state.theme.colors.neutral0}`,
      ':hover': {
        backgroundColor: state.theme.colors.neutral0,
        color: state.theme.colors.primary75,
        cursor: 'pointer'
      }
    })
  }

}

const DynamicParameterAutocompleteBox = ({ items, ...props }) => {
  const [selectedOptions, setSelectedOptions] = useState([])
  const selectedValues = useSelector((state) => state.querystring[props.id])
  const dispatch = useDispatch()
  items.sort((a,b) => (a.label > b.label) ? 1 : ((b.label > a.label) ? -1 : 0))

  const customTheme = theme => ({
    ...theme,
    colors: {
      ...theme.colors,
      primary: props.primaryColor || '#00CCF9',
      primary25: props.primary25Color || 'rgba(16,182,233,0.06)',
      primary50: props.primary50Color || 'rgba(16,182,233,0.20)',
      primary75: props.primary75Color || 'rgba(16,182,233,0.8)',
      neutral20: props.placeholderColor || '#97A7B7',
      neutral50: props.menuColor || '#485465'
    }
  })

  useEffect (() => {
    const mappedOptions = items.filter(item => (selectedValues || []).includes(item.value))
    setSelectedOptions(mappedOptions)
  }, [selectedValues, items])

  const updateModel = (model) => {
    if (props.id) {
      let values = (model || []).map((item) => item && item.value ? item.value : item)
      dispatch(set(props.id, values.length ? values : null))
    }
  }

  const onChange = (options) => {
    if (options && !Array.isArray(options)) {
      options = [options]
    }
    updateModel(options)
  }

  return (
    <Select 
      value={selectedOptions || []} 
      styles={customStyles} theme={customTheme} 
      options={items} 
      isMulti={props.isMulti}
      placeholder={props.placeholder}
      onChange={onChange} 
      autoFocus={true}
      isClearable={true}
      isSearchable={true}
      pageSize={10}
      closeMenuOnSelect={true}
      filterOption={createFilter({ignoreCase: true, ignoreAccents: true, trim: true, matchFrom: 'start'})}
    />
  )
}

export default DynamicParameterAutocompleteBox

宣言するにsrc/components/index.jsをインポートし、ファイルで定義されたcomponentsオブジェクトに追加することで行います。

config/dashboards/rides-analytics.json に移動し、id が search-bar のパネルを探して、次のように動的パラメータに置き換えます:

{
  "type": "dynamic-parameter",
  "id": "search-bar",
  "dynamic-parameter": {
    "type": "filter",
    "id": "dynamic-stations",
    "component": "autocomplete-box",
    "placeholder": "Search for a station",
    "isMulti": true,
    "dictionary": "station_name"
  },
  "sizeX": 100,
  "sizeY": 19,
  "col": 0,
  "row": 0,
  "items": []
}

最後に、config/menus/sidebar.json から dyn-stations オブジェクト全体を削除してください。これは新しい検索バーと重複しているためです。

#カスタムコンポーネントをチャートとして使用する

このセクションでは、カスタムコンポーネントの作成方法と、それをチャートとして使用する方法を学びます。

例として、react-leaflet ライブラリを使用して、インタラクティブな地図コンポーネントを作成します。最終的な結果は次のようになります。

まずは、いつものようにスクリプトを使ってコンポーネントを作成しましょう。

yarn generate

コンポーネント ジェネレーターを選択し、ChartMap と名前を付けます。最後の質問には「No」と回答してください。

宣言してください src/components/index.js に。

これで、分析ダッシュボードで使用できます。rides-analytics.jsonに移動し、新しいチャートとそのタイトルをcustom-mapパネルに追加してください。

{
  "type": "panel",
  "id": "custom-map",
  "sizeX": 75,
  "sizeY": 99,
  "row": 20,
  "col": 0,
  "items": [
    {
      "type": "html",
      "content": "Map view",
      "customclass": "chart-title",
      "sizeX": 100,
      "sizeY": 5
    },
    {
      "type": "chart",
      "chart": {
        "id": "chart-map",
        "component": "map",
        "dynamic-parameters": [
          "dynamic-date",
          "dynamic-holidays",
          "dynamic-stations",
          "dynamic-weekday"
        ],
        "request": {
          "data": {
            "fields": {
              "rides": ["avg"]
            }
          },
          "scale": {
            "fields": ["station_id", "station_name", "lat", "lng"]
          },
          "filter": {},
          "order": {}
        }
      },
      "sizeX": 100,
      "sizeY": 88,
      "row": 6,
      "col": 0
    }
  ]
}

ダイナミックパラメータと同様に、チャートもマウントされる際に自動的にいくつかのプロパティを受け取ります。どのようなものか見てみましょう。

通常通り、useEffect と useState をインポートするには、ChartMap.jsx ファイルの最初の行を変更してください。

import React, { useState, useEffect } from 'react'

次に、props を関数コンポーネントの引数に追加します。

const ChartMap = (props) => {

最後に、この関数のreturn文の直前にuseEffectフックを追加してください。

最終的な関数コンポーネントは次のようになります:

const ChartMap = (props) => {
  useEffect(() => {
    console.log(props);
  }, []);
  return <div>ChartMap</div>;
}

ブラウザのコンソールパネルを開きます。このコンポーネントに渡されたプロパティを確認できます。

ほとんどのプロパティは、config/dashboards/rides-analytics.jsonにあるチャート定義から取得されます。 例外はdataで、これはチャートに関連するリクエストの結果を表すJSONです。このJSONはできるだけ汎用的なものにするため、操作するのは少し面倒かもしれません。

この例 -- そしてほとんどの場合 -- JSONオブジェクトが複雑すぎるため、このヘルパー関数を使用してフラット化し、扱いやすくしています。

const flattenChartResults = results => {
  let flattenedChartResults = [];
  results.forEach(result => {
    let fieldEntries = [];
    Object.entries(result.data).forEach(([fieldName, computeModes]) => {
      Object.entries(computeModes).forEach(([computeModeName, rows]) => {
        computeModeName === "select"
          ? fieldEntries.push([computeModeName, rows[0].value])
          : fieldEntries.push([
              `${fieldName}_${computeModeName}`,
              rows[0].value
            ]);
      });
    });
    let flattenedObject = {
      ...result.scales,
      ...Object.fromEntries(fieldEntries)
    };
    flattenedChartResults.push(flattenedObject);
  });
  return flattenedChartResults;
}

上記のコードスニペットをコピーして imports と ChartMap の間に貼り付け、次に useEffect フックの内容を更新して、新しいフラット化された結果を可視化します:

useEffect(() => {
  const results = flattenChartResults(props.chart.data.results);
  console.log(results);
}, [props.chart.data.results]);

この結果を地図上に表示するには、このデータをコンポーネントの状態に保存する必要があります。ChartMapコンポーネント内に配列を宣言するには、次のようにします：

const ChartMap = (props) => {
  const [stations, setStations] = useState([])
  ...

useEffectを更新して、結果をログに記録するのではなく、この配列を変更します：

useEffect(() => {
  const results = flattenChartResults(props.chart.data.results);
  setStations(results);
}, [props.chart.data.results]);

データの準備ができたので、次に地図の作成方法を見てみましょう。

react-leaflet コンポーネントをインポートするには、ファイルの先頭に以下の行を追加してください:

import { Map as LeafletMap, CircleMarker, Popup, TileLayer } from 'react-leaflet'

ChartMap.less に移動し、以下のコードスニペットを使用してスタイルシートを変更してください：

// ChartMap stylesheet
@import "~leaflet/dist/leaflet.css";
@import "~react-leaflet-markercluster/dist/styles.min.css";

.leaflet-container {
  height: 100%;
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  opacity: 0.85;
  background-color: #3e4550;
  box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.13);
  color: #fff;
}

.leaflet-popup-content-wrapper {
  text-align: center;
  border-radius: 1px;
}

.popup-title {
  letter-spacing: 0;
  font-size: 13px;
}

.popup-value {
  font-size: 13px;
  font-weight: 600;
}

ChartMap.jsxに戻り、stateのすぐ下にデフォルトのマップパラメータ（center、zoom、minZoom）を定義してください。

const center = [41.89, -87.6297982]
const zoom = 14
const minZoom = 7

関数の戻り値の文を変更して、シカゴに中心を置いた空の地図を表示するようにします:

return (
  <LeafletMap center={center} zoom={zoom} minZoom={minZoom}>
    <TileLayer
      attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'
      url="https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png"
    />
  </LeafletMap>
)

LeafletMap の下に、TileLayer のすぐ下に、駅を表す円マーカーを追加します。

{
  stations.map(station => (
    <CircleMarker
      key={station.station_id}
      center={[station.lat, station.lng]}
    />
  ))
}

以下に、円の色を変更し、そのサイズを乗車数に比例させるコードスニペットがあります。

<CircleMarker
  key={station.station_id}
  center={[station.lat, station.lng]}
  radius={Math.max(
    10 + (station.rides_avg / 1000) * Math.log(zoom),
    ((2 * station.rides_avg) / 1000) * Math.log(zoom)
  )}
  color={"#0089C0"}
  weight={1}
  fillColor={"rgba(0,204,249,0.5)"}
/>

次に、円をクリックしたときに駅名とその駅に関連する乗車数を表示するポップアップを追加します。

CircleMarker の中に、以下のように追加します:

<CircleMarker
  key={station.station_id}
  center={[station.lat, station.lng]}
  radius={Math.max(
    10 + (station.rides_avg / 1000) * Math.log(zoom),
    ((2 * station.rides_avg) / 1000) * Math.log(zoom)
  )}
  color={"#0089C0"}
  weight={1}
  fillColor={"rgba(0,204,249,0.5)"}
>
  <Popup closeButton={false} position={[station.lat, station.lng]}>
    <div className="popup-title">{station.station_name}</div>
    <div className="popup-value">{station.rides_avg}</div>
  </Popup>
</CircleMarker>

平均乗車回数をconfig/formatter.jsonで指定された書式に従ってridesに適用するには、FpMeasureを使用します。

FpMeasure のインポート:

import { FpMeasure } from 'forepaas/formatter'

ポップアップの値を変更します：

<div className="popup-value">
  {new FpMeasure("rides").setValue(station.rides_avg).toString()}
</div>

マップを少し操作してみると、動的パラメータを変更するとリロードが繰り返されることに気づくでしょう。この動作を無効にするには、noReload プロパティを config/dashboards/rides-analytics.json のチャート設定オプションに追加します。

"chart": {
  "id": "chart-map",
  "component": "map",
  "noReload": true,
  "dynamic-parameters": [
    ...
  ],
  "request": {
    ...
  }
},

サークルをクラスターごとに再編成して重なりを避けることができます。これは、react-leaflet-markercluster ライブラリのおかげで非常に簡単です。

MarkerClusterGroup コンポーネントをインポートします:

import MarkerClusterGroup from 'react-leaflet-markercluster'

そして、円マーカーをMarkerClusterGroupで囲むようにします。

<MarkerClusterGroup showCoverageOnHover={false}>
  {stations.map(station => (
    <CircleMarker
      ...
    </CircleMarker>
  ))}
</MarkerClusterGroup>

最初のカスタムコンポーネントを作成しました。 最終コードはこちらでご確認いただけます。

#ローカルアプリをData Platformに公開する

今、アプリケーションをローカルで完成させたので、プラットフォームに接続する時期です。 アプリケーションをzipファイルとしてアップロードするか、Gitリポジトリに接続するかのどちらかの方法で行うことができます。

#アプリをzipファイルとしてインポートする

まず、アプリをzipファイルとしてエクスポートする必要があります。zipファイルには、以下のフォルダを含めてはいけません: node_modules, forepaas, webpack, .git。

当社の事前構築スクリプトを使用して、アプリをzipファイルに圧縮することもできます。プロジェクトにアップロードする準備ができたzipファイルを生成するには、このコマンドを実行してください。

yarn zip

アプリケーションフォルダと同じ名前のzipファイルが生成されます。

次に、この .zip ファイルを使用して新しいアプリケーションを作成するか、または既存のアプリケーションを編集して、この zip ファイルをアップロードしてアプリケーションの新しいバージョンを作成することができます。新しいアプリケーションを作成するには、これらの手順に従ってください。

#アプリをgitリポジトリに接続する

Git リポジトリをプラットフォームにリンクするには、このガイドに従ってください。

アプリケーションをアップロードした後、ビルドしてからデプロイします。

あなたの素敵なアプリケーションは、Data Platformにデプロイされました！

#さらに進む

トレーニングや技術的なサポートが必要な場合は、営業担当者にお問い合わせください。または、Professional Services ページをご覧になり、見積もりをリクエストして、専門家によるプロジェクト分析を受けてください。

データプラットフォームを構築するチームに直接質問したり、フィードバックを送ったり、交流したりするには、専用のDiscordチャネルをご利用ください。

サポートが必要な場合は、ヘルプセンターでリクエストを作成してください。

当社のユーザーコミュニティにご参加ください。