このトピックでは、DataVを使用してウィジェットを開発する方法について説明します。
環境を準備する
Node.jsの公式サイトにアクセスし、Node.jsをダウンロードしてインストールします。 8.0.0から10.12.0の範囲のバージョンのNode.jsをインストールすることを推奨します。
説明複数のNode.jsバージョンを管理するには、Node Version Manager (NVM) を使用することを推奨します。 NVMを使用する場合は、既存のバージョンをアンインストールすることなく、別のバージョンのNode.jsをインストールできます。 NVMをインストールするには、GitHub - creationix/nvm: Node Version Manager-複数のアクティブなnode.jsバージョンを管理するシンプルなbashスクリプトをご参照ください。
NVMをインストールしたら、macOSターミナルまたはWindowsコマンドプロンプトで
node -vコマンドとnpm -vコマンドを実行して、Node.jsとnpmのバージョンを表示します。
DataVのインストール
macOS TerminalまたはWindowsコマンドプロンプトで次のコマンドを実行して、DataVをインストールします。
npm install datav-cli -gDataVがインストールされたら、
datav -- versionコマンドを実行して、DataVのバージョンを表示します。
言語の設定
DataVのデフォルトの言語は英語です。 言語を変更するには、macOSターミナルまたはWindowsコマンドプロンプトでdatav localeコマンドを実行します。
コマンドを実行すると、次の結果が返されます。
? What is your language? (Use arrow keys)
> English
Chinese
Japanese↑ および ↓ 矢印キーを押して言語を選択し、Enterキーを押します。
Alibaba Cloudアカウントのリージョンに基づいて言語を変更する場合は、DataV開発者コンソールにログインし、datav locale-clear | datav lcコマンドを実行して言語設定をクリアします。 その後、再び言語を設定できます。
DataV開発者コンソールにログインする
macOS TerminalまたはWindowsコマンドプロンプトでdatav loginコマンドを実行し、DataV開発者コンソールにログインします。 コマンドを実行した後、次の表に示すパラメーターを指定します。
パラメーター | 説明 |
| DataVコンソールの右上隅に表示されるユーザー名を入力します。 RAMユーザーの場合は、RAMユーザーが属するAlibaba Cloudアカウントのユーザー名を入力します。 |
| DataVコンソールの [ウィジェット] タブから取得した開発者トークンを入力します。 |
| YまたはNを押します。 |
| エイリアスを入力します。 |
設定が成功したことを示すメッセージが表示された場合は、DataV開発者コンソールにログインしています。
ウィジェットを作成またはプレビューするだけの場合は、DataV開発者コンソールにログインする必要はありません。 ウィジェットを公開するには、DataV開発者コンソールにログインする必要があります。
ウィジェットパッケージの生成
macOS TerminalまたはWindowsコマンドプロンプトでdatav initコマンドを実行して、ウィジェットパッケージを生成します。 このコマンドを実行した後、次の表に示す情報を入力します。
ウィジェット情報 | 説明 |
| ウィジェットの名前。 文字、数字、ハイフン（-）を含めることができます。 |
| プロジェクトのウィジェットリストに表示するウィジェットの名前。 |
| ウィジェットの説明。 |
| ウィジェットに使用するテンプレート。 有効な値: ↑ および ↓ 矢印キーを押してテンプレートを選択し、Enterキーを押します。 |
コマンド出力に「ウィジェットが作成されました。」というメッセージが表示されると、ウィジェットパッケージが生成されます。 
ウィジェットのプレビュー
macOSターミナルまたはWindowsコマンドプロンプトで次のコマンドを実行して、ウィジェットをプレビューできます:
cd <Widget name>
datav runサービスが開始したことを示すメッセージが表示されると、Google 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コマンドを実行します。
Widget name-Version numberという形式で名前が付けられたtar.gzパッケージが親ディレクトリに生成されます。 パッケージをo datav.aliyun.comにアップロードして、ウィジェットを公開します。方法 3
ウィジェットプレビューページで、[公開] をクリックします。