​
プロジェクト構造

Morphのプロジェクト構造は、以下のようになっています。

このうち、pages ディレクトリ内に .mdx ファイルを作成することで、新規のページを追加できます。

​
ページファイルの基本的な文法

ページファイルは、以下のような形式で記述します。

index.mdx
export const title = 'Top page'; // ページのタイトル。メニュー上の表示に使われます。

# Salesforce分析ダッシュボード + AIチャット
これは、Salesforceのデータを接続したダッシュボードです。Pythonを用いてデータ可視化を作ったものと、Open AI APIを用いたカスタムチャットを備えています。

<Grid cols='2'>
  <DataTable loadData='sales-analysis' />
  <LLM postData='ai-chat' />
</Grid>

## 補足
ダッシュボードの利用中に気になる点があれば、データチームまでお気軽にお問い合わせください。

​
タイトル

export const title = 'Top page'; // ページのタイトル。メニュー上の表示に使われます。
...

export const title = 'title'; という形式で宣言された文字列は、ページのタイトルとして用いられます。メニュー上の表示に使われます。

​
マークダウン

export const title = 'Top page'; // ページのタイトル。メニュー上の表示に使われます。

# Salesforce分析ダッシュボード + AIチャット
これは、Salesforceのデータを接続したダッシュボードです。Pythonを用いてデータ可視化を作ったものと、Open AI APIを用いたカスタムチャットを備えています。
...

ページファイルは、マークダウン形式でコンテンツを記述することができます。データアプリの運用のために必要な情報を記述して、ユーザーにわかりやすく伝えることができます。

​
コンポーネント

...
<Grid cols='2'>
  <DataTable loadData='sales-analysis' />
  <LLM postData='ai-chat' />
</Grid>
...

<Grid> や <DataTable> は、Morphのフレームワークが提供するコンポーネントです。これらのコンポーネントを使うことで、データアプリに必要な機能を簡単に追加することができます。

​
MDX

Morphでデータアプリケーションを構築する際には、MDX (https://mdxjs.com/) を使用します。MDXの詳しい使い方については、MDX詳解を参照してください。

クイックスタート