このトピックでは、デスクトップ開発ツールの使用方法 (ダウンロードとインストール、ログイン、ワークスペース管理、コンポーネント管理など) について説明し、デスクトップ開発ツールを使用してコンポーネントを迅速に開発し、公開できるようにします。
デスクトップ開発ツールのダウンロードとインストール
DataV コンソールにログインします。
[コンポーネント開発] セクションで、[コンポーネントパッケージ] をクリックします。
[開発ツールのダウンロード] をクリックします。
[ダウンロードするバージョンの選択] ダイアログボックスで、バージョンを選択し、[ダウンロード] をクリックします。
システムには、[MAC]、[WIN]、[ターミナル] の 3 つのバージョンのツールが用意されています。
[MAC]: macOS オペレーティングシステム用です。
[WIN]: Windows オペレーティングシステム用です。
[ターミナル]: この方法は Linux オペレーティングシステムに適用されます。[ダウンロード] をクリックすると、開発者ガイドの「コンポーネント開発のクイックスタート」セクションにリダイレクトされます。詳細については、「開発ツールキットのインストール」をご参照ください。
(MAC および WIN バージョン) ダウンロードが完了したら、アプリケーションをダブルクリックしてインストールします。
デスクトップ開発ツールへのログイン
インストールが完了したら、ツールをダブルクリックして開き、ログイン情報を入力してログインするか、オフライン開発でログインしないかを選択します。
重要公開機能はオフライン開発では使用できません。注意して使用してください。
パラメーター
説明
ユーザー名
DataV へのログインに使用する Alibaba Cloud アカウント。
トークン
開発者の識別子です。DataV コンソールの [マイウィジェット] タブで、[マイウィジェット] をクリックし、[開発者 ID] をコピーして入力ボックスに貼り付けます。
ログインに成功したら、[ユーザーの切り替え] をクリックしてログインページに戻ります。
ワークスペースの作成
開発者ツールページで、右下隅にある [+ ワークスペースの作成] をクリックします。
ローカルフォルダーをパッケージ管理フォルダーとして選択します。
[フォルダーの選択] をクリックしてワークスペースを作成します。
説明ワークスペースは、多くのコンポーネントを含む単なるフォルダーです。オンラインコンポーネントパッケージと同じ名前でも、異なる名前でもかまいません。
コンポーネントを含むフォルダーが既に存在する場合、そのフォルダーを開くことができます。ツールはフォルダー内の DataV コンポーネントを自動的に識別します。
ワークスペースの概要
ワークスペースが作成されると、ページの右側に表示されます。ワークスペース名をクリックしてワークスペースページに移動します。ワークスペースページには、次の 4 つのセクションが含まれています。
番号 | コンポーネント | 説明 |
1 | サイドバー | コンポーネントバーの非表示、ヘルプドキュメントの表示、ログアウトなどの機能が含まれます。 |
2 | コンポーネントバー | ウィジェットリストを表示し、ウィジェットを管理します。
|
3 | キャンバス |
|
4 | コンポーネント設定バー | 次の 4 つのパネルが利用可能です: [設定]、[データ]、[インタラクション]、[公開]。
|
ワークスペースの削除
ワークスペースリストで、ポインターをワークスペースの上に移動し、右上の [X] をクリックしてワークスペースを削除します。
コンポーネントの作成
ワークスペースページの右側にある [+ コンポーネントの作成] をクリックするか、[Ctrl + N] ショートカットキーを使用してコンポーネントを作成します。
ウィジェットが作成されると、[ウィジェットの作成] ページに基本的なテキストウィジェットが表示されます。
[基本テキスト] コンポーネントをクリックし、次の表の説明に従ってコンポーネントを設定します。
パラメーター
説明
コンポーネント名
コンポーネントの名前を入力します。
コンポーネントタイプ
ドロップダウンリストからウィジェットタイプを選択します。
公開 ID
ドロップダウンリストから利用可能なウィジェットパッケージを選択します。利用可能なウィジェットパッケージがない場合は、[カスタム] をクリックして DataV コンソールに移動し、ウィジェットパッケージを作成します。詳細については、「ウィジェットパッケージの管理」をご参照ください。
コンポーネント ID
コンポーネント ID を入力します (例: [basic-text])。
[作成] をクリックしてウィジェットを作成します。
ウィジェットが作成されると、中央のキャンバスでウィジェットを表示し、右側の設定ペインでウィジェットを設定できます。
コンポーネントが作成されると、ローカルのコンポーネントパッケージフォルダーに index.js と package.json ファイルが生成されます。「コンポーネント開発パッケージファイルの概要」を参照して、これら 2 つのファイルを編集することで、コンポーネントの設定項目をカスタマイズできます。
ウィジェットのプレビュー
ウィジェットを作成した後、ページの左側にあるウィジェットリストでウィジェットをクリックすると、中央のキャンバスエリアでウィジェットのスタイルを表示できます。
コンポーネントのコピー/削除/名前の変更/詳細の表示
コンポーネントを右クリックし、[コピーを作成]、[削除]、[名前の変更]、または [プロパティの表示] を選択して、コンポーネントのコピー、削除、名前の変更、または詳細の表示を行います。
また、コンポーネントを選択し、コンポーネントバーの下部にある [コンポーネントのコピー] または [コンポーネントの削除] アイコンをクリックして、コンポーネントをコピーまたは削除することもできます。
ワークスペースのリフレッシュ
[ワークスペースのリフレッシュ] アイコン (
) をクリックして、ワークスペースをリフレッシュします。コンポーネントの設定項目を変更した後、この機能を使用して最新のコンポーネント設定項目を表示できます。