M5Stack UiFlow for Beginners - Lesson 01 - Hello World

M5Stack

21 Feb 202012:07

Summary

TLDRこのビデオは、M5StackデバイスでUI Flowを使用してプログラミングの基本を学ぶためのチュートリアルです。「Hello World」プログラムから始まり、テキストとグラフィック要素を画面上に配置する方法を学びます。UIマネージャーを使ってラベルやシェイプを追加し、ブロックプログラミングでそれらの要素をコントロールする方法を解説しています。最終的には名刺のようなデザインを作成し、プログラムをデバイスにアップロードして実行する過程を紹介しています。視覚的な例を交えながら、プログラミングの基礎を分かりやすく学べる内容となっています。

Takeaways

👋 この講座では、M5 Stackデバイスの画面上にテキストと画像を表示する方法を学びます。
🌍 最初に「Hello World」プログラムから始めます。これはプログラミング言語を学ぶ際の定番の第一歩です。
📺 画面はたくさんの小さな点(ピクセル)から構成されており、X座標とY座標を使ってピクセルの位置を指定します。
🧩 UIFlowというブロックプログラミングインターフェースを使用して、プログラミングの基礎を学びます。
✏️ UIマネージャーを使ってスクリーン上の要素を配置し、プロパティを設定します。
📄 テキストボックスやグラフィック要素のプロパティ(名前、位置、色、フォントなど)を変更できます。
💻 プログラムをM5デバイスにアップロードして実行できます。またデスクトップに保存することもできます。
🎨 名刺を作成するチャレンジがあり、創造性を発揮してテキストと図形を組み合わせることができます。
🔖 レイヤーを使うと、要素の前面/背面の重なり順を制御できます。
🆘 分からない点があれば質問できるようサポートが用意されています。

Q & A

ビデオの主な目的は何ですか?
-このビデオの主な目的は、M5Stackデバイスの画面にテキストや画像を表示する方法を初心者に紹介することです。最初はHello Worldプログラムから始め、その後名刺の作成を通して、さまざまな要素を画面に配置する方法を学びます。
UIフローのインターフェースについて説明してください。
-UIフローインターフェースには、コーディング領域、コードブロック領域、UIマネージャー、ユニット領域、ナビゲーションバーなどがあります。コーディング領域でプログラムを作成し、コードブロック領域から必要なブロックを選択します。UIマネージャーでは画面上の要素を設定できます。
プログラミングにおいて、X座標とY座標はどのような役割を果たしますか?
-X座標とY座標は、画面上の位置を指定するために使用されます。X座標は水平方向の位置を、Y座標は垂直方向の位置を表します。これらの座標を指定することで、テキストや図形を画面上の正確な位置に配置できます。
UIマネージャーで要素のプロパティをカスタマイズする方法を教えてください。
-UIマネージャーで要素をドラッグアンドドロップすると、その要素をクリックして各プロパティ(名前、X/Y座標、色、フォントサイズ、回転角度など)を編集できます。必要に応じてこれらのプロパティを調整することで、要素の外観や位置を変更できます。
デバイスにプログラムをロードする方法は何ですか?
-デバイスにプログラムをロードする方法は2つあります。1つ目は「再生」ボタンを押して即座にデバイスに送信する方法です。2つ目は「設定」メニューから「ダウンロード」を選択し、デバイスのメモリにプログラムを保存する方法です。後者の方法では電源を切っても保存されたプログラムを実行できます。
プログラムをデスクトップに保存する方法を教えてください。
-設定メニューから「保存」ボタンを選択すると、プログラムをデスクトップに保存できます。ファイル名は自由に付けられますが、拡張子は .m5f のままにする必要があります。
このビデオでは、名刺の作成を例に挙げていますが、名刺にはどのような情報を含めるべきでしょうか。
-名刺には通常、氏名、電話番号、住所、趣味などの個人情報を含めます。このビデオでは、これらの情報をテキストボックスに入力し、円形の図形を使ってデザインを飾る例が紹介されています。
Blocklyモードとは何ですか?
-Blocklyモードとは、UIフローエディターのブロックプログラミングモードのことです。このモードでは、プログラミングの構文を視覚的にブロックで表現することができ、初心者がプログラミングの基本を学ぶのに適しています。また、Pythonモードへの切り替えも可能です。
レイヤーの機能について教えてください。
-レイヤーの機能を使うと、画面上の要素の前後関係を制御できます。より複雑な画像を作成する際に、特定の要素を手前や背面に配置したい場合に、このレイヤー設定が役立ちます。
フォーラムとドキュメントについて説明してください。
-UIフローインターフェースには、フォーラムとドキュメントへのリンクがあります。フォーラムでは、プログラミングに関する質問をしたり、助言を求めたりできます。ドキュメントには、M5Stackデバイスの使用方法や機能に関する詳細な情報が記載されています。

Outlines

00:00

🤖 プログラミングの基本的な「Hello World」

このレッスンシリーズの第1回目では、M5 Stackのスクリーンにテキストと画像を表示する方法を学びます。プログラミングの基本である「Hello World」プログラムから始め、画面上にテキストを表示する方法を説明しています。また、スクリーンがX座標とY座標で構成されるピクセルの集合体であることを説明し、UIフローのインターフェースについて概要を述べています。最後に、画面上にラベルを配置し、そのプロパティを変更する方法を示しています。

05:00

🖼️ 名刺の作成

このパラグラフでは、UIマネージャーを使用して名刺を作成する方法を説明しています。最初に自分の名前を表示するテキストラベルを追加し、次に電話番号、住所、趣味などを表示するためのさらなるラベルを追加します。さらに、グラフィカル要素として円を追加し、犬の足跡のようなデザインを作成する方法を示しています。プロパティを変更して円の半径や色を調整する方法も説明されています。

10:02

💻 プログラムのアップロードと保存

最後のパラグラフでは、作成したプログラムをM5 Goデバイスにアップロードする方法と、デスクトップに保存する方法を説明しています。プログラムをデバイスにアップロードするには、プレイボタンを押すか、設定メニューからダウンロードオプションを選択します。デスクトップに保存する場合は、設定メニューの保存ボタンを使用します。最後に、名刺の作品を改善するよう読者に促し、次のビデオに向けて励まし言葉を述べています。

Mindmap

Keywords

💡プログラミング言語

プログラミング言語とは、コンピューターに指示を与えるための人工的に作られた言語のことです。この動画では、プログラミング言語を使ってM5スタックの画面にテキストや画像を表示する方法を説明しています。冒頭で、「プログラミング言語を学ぶ際には、まず「Hello World」と画面に出力するのが一般的」と述べられています。

💡ピクセル

ピクセルとは、画面を構成する最小単位の点のことです。動画では、「画面はX方向とY方向の座標で構成された多数のピクセルで出来ている」と説明されています。ピクセルの位置を指定することで、画面上に任意の位置にテキストや画像を配置できます。

💡UIフロー

UIフローとは、この動画で使用されているビジュアルプログラミングツールの名称です。UIフローではブロックを組み合わせることで、プログラミングができます。動画の中で「UIフローの画面上にあるコードブロックエリアからブロックを選んでプログラムを作成する」と説明されています。

💡ラベル

ラベルとは、画面上にテキストを表示するための要素のことです。動画では「ラベルをドラッグして画面上に配置し、位置やフォントなどのプロパティを設定できる」と紹介されています。また、プログラミングでラベルのテキストを変更する方法も示されています。

💡座標

座標とは、画面上の位置を示すX座標とY座標の組み合わせのことです。動画の中で「テキストや図形の位置は座標で指定する」と説明されています。例えば「(100, 200)」のような値を設定することで、その位置にオブジェクトを配置できます。

💡フォント

フォントとは、文字の書体のことです。動画ではラベルのプロパティとして、「フォントを変更できる」ということが紹介されています。適切なフォントを選ぶことで、テキストの見栄えを良くすることができます。

💡レイヤー

レイヤーとは、画面上のオブジェクトの前後関係を管理する機能のことです。動画で「レイヤーを使うと、オブジェクトを前面や背面に配置できる」と説明されています。複雑な画面を作る際に、オブジェクトの重なり順を適切に設定することが重要です。

💡アップロード

アップロードとは、作成したプログラムをM5スタック本体に転送することです。動画の中で「再生ボタンを押すと即座にプログラムがM5スタックにアップロードされる」と説明されています。また、プログラムを本体のメモリに保存する「ダウンロード」機能も紹介されています。

💡名刺

動画の後半では、名刺のようなデザインを作成する例が示されています。名刺には、名前や住所、電話番号などの個人情報が記載されます。動画では、ラベルとして文字を、円などの図形要素を組み合わせて、シンプルな名刺のデザインを作成しています。

💡図形

図形とは、円や四角形、線分などの形状のことです。動画では、円の図形を使って「犬の足跡」を表現する例が示されています。図形のプロパティとして、大きさや色、枠線の太さなどを変更できることが紹介されています。テキストと組み合わせることで、さまざまなデザインが可能になります。

Highlights

Here we are in the first lesson of this series, and we're going to be displaying text and images on the screen of the M5 Stack.

We're going to be doing the hello world program, which is what everybody starts out when they're doing any kind of programming language.

Screens are made up of lots of tiny dots called pixels, and we need to know the X&Y coordinates to place things on the screen.

We'll be using the UI Flow block programming interface to get you to grips with learning programming.

We'll start by naming our first project 'Hello World'.

For the most part of this course, we'll be focusing on Blockly to get you up and running with the basics of programming.

We can add a label to the screen by dragging a text or graphical element into the UI manager space.

We can change the properties of the label, such as its name, position, color, font, rotation, and layering.

Elements we design in the UI manager will appear in the UI tab of the code blocks menu.

We can use code blocks from the UI tab to control the text box we added.

We'll be making a name card by using the UI manager to show different graphical elements and text elements on the screen.

We can add more text boxes to the name card by duplicating code blocks and changing their content.

We can add graphical elements like circles to the name card and change their properties like size, color, and border.

We can send our program to the M5 Go device instantly by pressing the play button or download it to the device's memory.

We can also save our program to the desktop by clicking the Save button in the settings menu.