はじめに - DataV - Alibaba Cloud ドキュメントセンター

このトピックでは、DataV を使用してウィジェットを開発する方法について説明します。

環境準備

Node.js の公式サイトにアクセスし、Node.js をダウンロードしてインストールします。Node.js のバージョンは 8.0.0 以降、10.12.0 未満を推奨します。
説明
Node Version Manager (NVM) を使用して、複数の Node.js バージョンを管理することをお勧めします。NVM を使用すると、既存のバージョンをアンインストールせずに、別のバージョンの Node.js をインストールできます。NVM をインストールするには、「GitHub - creationix/nvm: Node Version Manager - Simple bash script to manage multiple active node.js versions」をご参照ください。
NVM をインストールした後、macOS のターミナルまたは Windows のコマンドプロンプトで node -v および npm -v コマンドを実行して、Node.js と npm のバージョンを表示します。

DataV のインストール

macOS のターミナルまたは Windows のコマンドプロンプトで次のコマンドを実行して DataV をインストールします:
```
npm install datav-cli -g
```
DataV がインストールされた後、datav --version コマンドを実行して DataV のバージョンを表示します。

言語の設定

DataV のデフォルト言語は English です。macOS のターミナルまたは Windows のコマンドプロンプトで datav locale コマンドを実行して言語を変更できます。

コマンドを実行すると、次の結果が返されます:

?  あなたの言語は何ですか？ (矢印キーを使用)
> 英語
  中国語
  日本語

[↑] および [↓] 矢印キーを押して言語を選択し、[Enter] を押します。

Alibaba Cloud アカウントのリージョンに基づいて言語を変更する場合は、DataV 開発者コンソールにログインし、datav locale-clear | datav lc コマンドを実行して言語設定をクリアします。その後、再度言語を設定できます。

DataV 開発者コンソールへのログイン

macOS のターミナルまたは Windows のコマンドプロンプトで datav login コマンドを実行して、DataV 開発者コンソールにログインします。コマンドを実行した後、次の表で説明するパラメーターを指定します。

パラメーター	説明
`Username`	DataV コンソールの右上隅に表示されるユーザー名を入力します。RAM ユーザーの場合は、RAM ユーザーが属する Alibaba Cloud アカウントのユーザー名を入力します。
`Developer Token`	DataV コンソールの [ウィジェット] タブから取得した開発者トークンを入力します。
`Do you want to set an alias?`	Y または N を押します。
`Alias`	エイリアスを入力します。

[設定が成功しました] というメッセージが表示された場合、DataV 開発者コンソールにログインしています。

説明

ウィジェットの作成またはプレビューのみを行いたい場合は、DataV 開発者コンソールにログインする必要はありません。ウィジェットを公開するには、DataV 開発者コンソールにログインする必要があります。

ウィジェットパッケージの生成

macOS のターミナルまたは Windows のコマンドプロンプトで datav init コマンドを実行して、ウィジェットパッケージを生成します。このコマンドを実行した後、次の表に示す情報を入力します。

ウィジェット情報	説明
`? Widget Name`	ウィジェットの名前。文字、数字、ハイフン (-) を含めることができます。
`? Widget Display Name`	プロジェクトのウィジェットリストに表示したいウィジェットの名前。
`? Widget Description`	ウィジェットの説明。
`? Select Template from Template List` `Basic text` `Basic text (international edition)`	ウィジェットに使用するテンプレート。有効な値: `Basic text` および `Basic text (international edition)`。 [↑] および [↓] 矢印キーを押してテンプレートを選択し、[Enter] を押します。

コマンドラインに [Widget Created] と表示された場合、ウィジェットパッケージが生成されます。组件创建完毕

ウィジェットのプレビュー

macOS のターミナルまたは Windows のコマンドプロンプトで次のコマンドを実行して、ウィジェットをプレビューできます:

cd your component name
datav run

CLI に [Service Started] と表示された場合、プレビューコンポーネントのサービスが開始されます。Chrome ブラウザが自動的に開き、コンポーネントのプレビューページに移動します。服务启动

説明

Google Chrome が自動的に開かない場合は、インストールされていない可能性があります。Google Chrome をインストールし、手動で localhost:1111/ にアクセスしてウィジェットをプレビューすることをお勧めします。
ポート 1111 でサービスがアクティブ化されたことを示すメッセージが表示された場合、このポートは別のアプリケーションによって占有されている可能性があります。datav run -p 1112 コマンドを実行して、プレビューサービスポートを 1112 に変更できます。
localhost:1111/ にアクセスしてもウィジェットのプレビューが表示されない場合は、hosts ファイルで localhost が 127.0.0.1 にマッピングされているかどうかを確認してください。マッピングが存在する場合、127.0.0.1:1111/ にアクセスしてウィジェットをプレビューできます。

次の図は、ウィジェットが正常にプレビューされた後の効果を示しています。组件预览成功

プレビューページは、キャンバス、下部のツールバー、および右側のパネルで構成されています。

キャンバス
- キャンバスには、ウィジェットとウィジェットへのすべての変更がリアルタイムで表示されます。
- 右側のパネルでのウィジェット設定とデータ変更は、キャンバスに表示されます。
- 罫線をドラッグアンドドロップして、ウィジェットのサイズを変更できます。
下部ツールバー
ウィジェットの言語を変更できます。

右側パネル

右側パネルは、[設定]、[データ]、[インタラクション]、および [公開] の 4 つのタブで構成されています。

タブ	説明
パラメーター	このタブには、ウィジェットのスタイル設定が含まれています。変更を行うと、キャンバス上で即座に効果が現れます。たとえば、[フォントサイズ] スライダーを調整すると、ウィジェット内のテキストのフォントサイズがすぐに変更されます。右上隅の [保存] をクリックして、変更された構成を保存し、現在の構成をウィジェットのデフォルト構成として使用します。
データ配信	このタブは、ウィジェットの API データを提供します。このタブでウィジェットのデータを更新すると、キャンバス上のウィジェットがすぐに変更されます。右上隅の [保存] をクリックして、変更されたデータを保存し、現在のデータをウィジェットのデフォルトデータとして使用します。
インタラクション	インタラクションページには、コンポーネントのインタラクションの説明が記載されています。
公開	公開ページでは、コンポーネントタイプ、アイコン、バージョンなどのコンポーネントを構成できます。右上隅の [公開] をクリックしてコンポーネントを公開します。

ウィジェットの公開

次のいずれかの方法を使用してウィジェットを公開できます:

方法 1 (推奨)
ウィジェットのディレクトリに移動し、datav publish コマンドを実行します。ウィジェットはパッケージに圧縮され、Alibaba Cloud アカウントと同じリージョン内のサーバーに公開されます。
方法 2
ウィジェットのディレクトリに移動し、datav package コマンドを実行します。親ディレクトリに ウィジェット名-バージョン番号 のフォーマットで名付けられた tar.gz パッケージが生成されます。パッケージを datav.aliyun.com にアップロードしてウィジェットを公開します。
方法 3
[ウィジェットプレビュー] ページで、[公開] をクリックします。