IDE レイアウト紹介

UiFlow1 Web IDE はインストール不要、視覚化、モジュール化プログラミングなどの特徴を備えたグラフィカルプログラミングツールです。界面は全体的に 6 つのエリアに分かれており、メニューバー、UI エディタ、リソース拡張モジュール、Blockly リスト、ワークスペース、実行とデバッグエリアです。ユーザーは UiFlow1 上で製品開発、プロジェクト管理などの多様なパーソナライズ体験を行うことができます。本文では UiFlow1 Web IDE のレイアウトを紹介し、ユーザーが UiFlow1 をより良く理解して使用できるように支援します。

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

メニューバー

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

1. 技術コミュニティへのアクセス、UiFlow バージョンの選択、UiFlow1 のアップグレードログ、および設定メニュー。
2. UiFlow1 の使用ガイド、初心者がすぐに始められるように適しています。
3. 公式ドキュメントと製品ドキュメントを検索し、M5Stack 公式ドキュメントセンターにリンクし、UiFlow1 開発ドキュメント、ハードウェア製品マニュアルなどを参照できます。
4. 製品使用サンプル、豊富なビルトインプロジェクトケースライブラリを備え、ワークスペースへのプロジェクトの一括インポートをサポートします。
5. EzData マネージャーページへのリンク。

6. 現在のプロジェクトを新しい名前と新しいパスでローカルファイル（.m5f 形式）として保存します。
7. 変更を保存し、ワークスペースのコードとデザインの変更を保存します。
8. ローカルに保存された.m5f プロジェクトファイルを開きます。
9. 新しい.m5f プロジェクトファイルを作成します。
10. プロジェクト管理、最新の 100 のプロジェクトファイルとその作成時間を表示し、ダウンロード / 削除操作も実行できます。

11. 前の操作を元に戻します（Block の削除、コードの修正、UI コンポーネントの移動など）。
12. 元に戻した操作をやり直します、復元可能な操作があるときにアクティブ化します。
13. デバイスファイル管理、接続されたデバイスのファイルシステムを管理します。
14. ショートカットキーリストを表示します。
15. M5Stack アカウントにログインします。
16. グラフィカル Blokly/Python コードの切り替え。
17. 現在のプロジェクトファイルの名前を変更します。

UI エディタ

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

コンポーネントをシミュレーションディスプレイにドラッグすると、フォントサイズ、コンポーネントサイズ、色、スタイルなどの基本属性を設定できます。

リソース拡張モジュール

リソース拡張モジュールは、センサー、コントローラーなどの拡張ユニットに接続をサポートし、M5 ホスト上のインターフェースを介してこれらのモジュールを制御し、情報を収集できます。このエリアはデバイスにより多様な機能開発を提供し、ユーザーの多様な開発ニーズを満たします。

さらに多くの拡張ユニットを追加するには + をクリックしてください：

追加された拡張ユニットは、このエリアに表示されます：

Blockly リスト

Blockly リストは UiFlow1 の核心機能エリアであり、グラフィカルプログラミングの主な領域でもあります。この領域には、基礎ハードウェア機能、UI プログラミング、論理関数、さらに Module 拡張や Unit センサー制御などの機能が集約されており、Blockly ブロックをドラッグ＆ドロップで組み合わせることでプログラミングを行います。

リソース拡張モジュールに機能ユニットを追加すると、対応する拡張 Block が Blockly リストにロードされます。

• Event：イベント関数
• UI：プログラムコードによりフォント、画面色、グラフィックなどを自由に変更可能
• Hardware：M5 ホストに内蔵されたスピーカー、RGB ライトなどの外部機器
• Unit：温度・湿度・気圧などのデータを収集するための外部センサー拡張ユニットドライバ（例：Unit ENV）
• Module：M5 の異なる機能ベースに関連する Block を含む
• Advanced：M5 コアの ESP32 から拡張された汎用 IO ポート、シリアルポート、I2C などの周辺機器インターフェース
• Remote：モバイル端末を通じて M5 デバイスを遠隔制御可能
• System：プログラム待機、WLAN ネットワーク接続、バッテリ制御などのシステム基本機能の設定
• Custom：カスタムハードウェアドライバ API のインポートインターフェース

ワークスペース

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

実行とデバッグ

1. Download：編集済みのプログラムをデバイスに直接ダウンロードし、起動時自動実行に設定します。
2. Run：プログラムを実行します。
3. **Terminal(Beta)**：ブラウザ内のシリアルデバッグツール。デバイスを USB 接続してプログラムを実行すると、プログラムの実行状態やエラーメッセージを確認でき、デバッグツールでデバイス内のファイル操作も可能です。
4. 設定：設定メニューに入ると、デバイスの API key の確認 / 入力、システム言語の設定、デバイスタイプの選択などができます。以下の図の通りです。