IDE レイアウト紹介

UiFlow2 Web IDE はグラフィカルプログラミングツールで、界面は全体的にメニューバー、UIエディタ、機能拡張モジュール、Blocklyリスト、ワークスペース、実行＆デバッグの6つのセクションに分かれています。ユーザーはUiFlow2上で製品開発、プロジェクト管理などさまざまなパーソナライズ体験を行うことができます。本稿ではUiFlow2 Web IDEのレイアウトを紹介し、ユーザーがUiFlow2をより良く理解して使用できるように支援します。

1. メニューバー
2. UIエディタ
3. 機能拡張モジュール
4. Blocklyリスト
5. ワークスペース
6. 実行とデバッグ

メニューバー

メニューバーはUiFlow2 Web IDE界面の上部に位置し、主に以下のモジュールを含みます：

1. ログイン：保存されたプロジェクトファイルはクラウドエンジニアリング同期を実現できます。

2. プロジェクト管理：クラウド同期されたエンジニアリングファイルに対して参照または修正操作を行います。

3. プロジェクトを保存：エンジニアリングファイルをローカルとクラウドに手動で保存します。

4. プロジェクト命名：現在のエンジニアリングファイルの名前を変更します。

5. コードプレビュー：ここをクリックすると、グラフィカルプログラミングモードとコード編集モードを切り替えることができ、デバッグが容易です。

6. Project Zone：公式コミュニティの精選プロジェクトライブラリで、他のユーザーが共有したプロジェクトをダウンロードして実行することができますし、面白いプロジェクトをコミュニティに共有することもできます。

7. ファイル操作：エンジニアリングファイルのインポート、エクスポート、バージョン管理機能など。

8. ヘルプ：公式ドキュメント、製品ドキュメントを検索したり、技術コミュニティにアクセスしたりする必要がある場合は、ヘルプリストから入ることができます。

9. 設定：必要に応じて界面のテーマ、言語などのシステムを設定できます。

UIエディタ

デバイスにディスプレイが付属している場合、UIエディタを使用してデバイス用のパーソナライズUIを設計できます。

1. レイアウトツール：テキスト、画像などを整列または中央揃えします。
2. 画面表示エリア：UIをドラッグして、画面のUIを1:1で詳細にレイアウトできます。
3. インターフェーススタイル：UIのフォント、丸角、シャドウなどの視覚パラメータを調整します。

機能拡張モジュール

機能拡張エリアはデバイスにより多様な機能開発を提供し、ユーザーのさまざまな開発ニーズを満たします。主に以下のモジュールを含みます：

• SoC：チップの種類
• Software：通信プロトコルとファイル管理モジュール。モジュールを選択した後、対応するBlocklyを使用してプログラミングできます。
• Hardware：対応するモジュールを選択した後、デバイスに組み込まれたハードウェア機能、例えばIMUジャイロスコープ、RGBインジケーター、スピーカーなどを直接使用できます。
• Module：これらの機能を使用するには、スタック可能な拡張モジュール、例えば2Relay、4Encoder、GPSなどを接続する必要があり、リレー制御、モータ駆動、通信能力などのハードウェア機能を強化するために使用されます。
• Unit：外部センサー拡張ユニットドライバーライブラリ、例えばUnit EnV、Unt CO2などで、ハードウェア機能を拡張し、温度、CO2濃度などのデータを収集するために使用されます。
• Custom：カスタムハードウェアドライバAPIのインポートインターフェース。
• Project Files：プロジェクトに依存する画像、音声、フォントリソースのマネージャで、小容量の画像や音声を保存できます。

Blocklyリスト

BlocklyリストはUiFlow2の核心機能エリアであり、グラフィカルプログラミングの主なエリアでもあります。このエリアには、デバイスの基本設定、UIプログラミング、論理関数、およびModule拡張とUnitセンサー制御などの機能が集中しており、Blocklyブロックをドラッグして貼り付けることでプログラミングを行います。

• System：システムの基本機能を設定します。例えば、プログラムの待機、WLANネットワークへの接続、バッテリーの制御など。
• UI：UI機能を使用すると、プログラムコードによってフォント、画面の色、グラフィックなどを自由に変更できます。
• Math：三角関数や論理判断の数学ツールボックス。
• Hardware：デバイスに組み込まれたハードウェア、例えばButton、IMU、Touchなどを制御し、論理プログラミングを行うことができます。
• Advanced：マウス機能、AI機能などの高度な機能拡張エリア。

ワークスペース

ワークスペースはドラッグ式のブロックで業務ロジックの構築を実現する場所で、編集可能なMicroPythonソースコードをリアルタイムで生成できます。

実行＆デバッグ

1. WebTerminal：ブラウザ内シリアルデバッグツール。デバイスをUSB接続してプログラムを実行すると、プログラムの動作状態やエラーメッセージを確認できます。デバッグツール内でデバイス内のファイルに簡易操作を行うこともできます。

2. WebBurner：無線ファームウェア書き込みツール。

3. Device File Manager：デバイスストレージファイルマネージャ。デバイスに画像や音声などのファイルをインポートする必要がある場合、ストレージファイルマネージャを介してインポートできます。

4. Select Device：M5Stack機種切り替え。機種切り替えをクリックすると、アカウントに紐付けられたデバイスの状態を確認できます。デバイスが起動しWLANに接続済みの場合、無線モードでプログラミングできるため、便利です。

5. Run：プログラムを実行します。

6. Download：Downloadをクリックすると、編集済みのプログラムをデバイスに直接ダウンロードし、起動時に自動実行するように設定できます。