update m5stick quick start docs

2026-05-20 10:23:01 -07:00 · 2019-02-19 19:30:32 +08:00
parent 72146b41cf
commit f2f9d4e5bf
7 changed files with 185 additions and 15 deletions
@@ -106,7 +106,7 @@

 &nbsp;

-[![unit_weight.png](http://m5-docs.oss-cn-shenzhen.aliyuncs.com/assets/img/product_pics/homepage_picture/unit/unit_weight_01.png)](ja/unit/weight)
+[![unit_weight.png](http://m5-docs.oss-cn-shenzhen.aliyuncs.com/assets/img/product_pics/homepage_picture/unit/unit_weight_01.png)](ja/unit/weight)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[![unit_trace.png](http://m5-docs.oss-cn-shenzhen.aliyuncs.com/assets/img/product_pics/homepage_picture/unit/unit_trace_01.png)](ja/unit/trace)

 &nbsp;

@@ -44,7 +44,7 @@ Arduino IDEを開いて`スケッチ -> ライブラリをインクルード ->

 <img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/windows/quick_start_arduino_win_07.png">

-!> **Note:** *以下のように表示された場合は、アップデートです。*
+!> **Note:** *以下のように表示された場合は、アップデートします。*

 <img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/windows/update_m5stack_lib.png">

@@ -1,13 +1,7 @@
 # M5Stick クイックスタート {docsify-ignore-all}

-**好きなプログラミング言語を以下から選んでください。**
+**好きなプログラミングスタイルを以下から選んでください。**

-<img src="assets/img/getting_started_pics/arduino_logo.png"> | <img src="assets/img/getting_started_pics/blockly_and_micropython.png">
---|---
-[Arduino](ja/quick_start/m5stick/m5stick_quick_start_with_arduino) | [UiFlow(Blockly/MicroPython)](ja/quick_start/m5stick/m5stick_quick_start_with_uiflow)
-
-
-
-<!-- <img src="assets/img/macos-logo.png"> | <img src="assets/img/windows-logo.png"> | <img src="assets/img/getting_started_pics/blockly_and_micropython.png"> -->
-<!-- ---|---|--- -->
-<!-- [MacOS](ja/quick_start/m5stick/m5stick_quick_start_with_arduino) | [Windows](ja/quick_start/m5stick/m5stack_core_get_started_Arduino_Windows) | [UiFlow(Blockly/MicroPython)](ja/quick_start/m5stick/m5stick_quick_start_with_uiflow) -->
+<img src="assets/img/macos-logo.png"> | <img src="assets/img/windows-logo.png"> | <img src="assets/img/getting_started_pics/blockly_and_micropython.png">
+---|---|---
+[Arduino-MacOS](ja/quick_start/m5stick/m5stick_quick_start_with_arduino_MacOS) | [Arduino-Windows](ja/quick_start/m5stick/m5stick_quick_start_with_arduino_Windows) | [UiFlow](ja/quick_start/m5stick/m5stick_quick_start_with_uiflow)
@@ -0,0 +1,97 @@
+# M5Stick クイックスタート(macOS, Arudino) {docsify-ignore-all}
+
+?> *環境設定の前に、シリアルドライバがインストールされているか確認いてください。もしまだの場合は[シリアル接続の確立方法](ja/related_documents/establish_serial_connection)を参照してください。*
+
+## テキストチュートリアル
+
+1. [環境設定](#環境設定)
+
+    - Step1. [Arduino IDEインストール](#step1-arduino-ideインストール)
+
+    - Step2. [ESP32ボードサポート](#step2-esp32ボードサポート)
+
+    - Step3. [M5Stack ライブラリインストール](#step3-m5stack-libインストール)
+
+    - Step4. [U8g2 ライブラリインストール](#step4-u8g2-libインストール)
+
+2. [例題](#例題)
+
+## 環境設定
+
+### Step1. `Arduino IDE`インストール
+
+最初にArduino IDEをインストールします。ダウンロードアドレスは https://www.arduino.cc/en/Main/Software です。
+
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/macOS_download_arduino_ide.png">
+
+### Step2. ESP32ボードサポート
+
+Arduino IDEを起動し、メニューから、`Arduino`->`Peferences`->`Settings`と選択します。
+
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/quick_start_arduino_mac_01.png">
+
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/quick_start_arduino_mac_02.png">
+
+最新のESP32ボードマネージャにURLを追加してください。`Additional Boards Manager URLs: `
+
+*最新のボードマネージャURLはこちら："https://dl.espressif.com/dl/package_esp32_index.json"*
+
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/quick_start_arduino_mac_03.png">
+
+確認後、`Tools`->`Board:`->`Boards Manager...`を選び、新しいポップアップダイアログで、`ESP32`と入力して検索します。そして`Install`をクリックします。
+
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/quick_start_arduino_mac_04.png">
+
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/quick_start_arduino_mac_05.png">
+
+### Step3. M5Stack Libインストール
+
+Arduino IDEを起動し、メニューから`スケッチ`->`ライブラリをインクルード`->`ライブラリを管理...`を選択します。
+
+検索ボックスに`m5stack`と入力して検索し、M5Stackのライブラリをインストールします。
+
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/quick_start_arduino_mac_06.png">
+
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/quick_start_arduino_mac_07.png">
+
+### Step4. U8g2 Libインストール
+
+まずArduino IDEを開き、`Sketch`->`Include Library`->`Manage Libraries...`の順に選択します。検索窓で`U8g2`を検索し、インストールします。
+
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_m5stick/install_u8g2.png">
+
+## 例題
+
+USBケーブルをM5Stickに接続し、ボードとシリアルポートを選択します。そしてサンプルプログラムをコンパイルし、アップロードしてみましょう。
+
+### 1. ボードとシリアルポートを選択
+
+Arduino IDEを起動し、メニューから`ツール -> ボード -> M5Stack-Core-ESP32`とボードを選択します。
+
+次に、メニューから`ツール -> シリアルポート -> /dev/cu.SLAB_USBtoUART` とシリアルポートを選択します。
+
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/quick_start_arduino_mac_10.png">
+
+### 2. サンプルスケッチ
+
+サンプルスケッチを利用して、定番のHelloWorldを表示してみましょう。メニューから`ファイル -> スケッチ例 -> M5Stack -> Stick -> FactoryTest`と選択します。
+
+<img src="assets/img/getting_started_pics/m5stick/m5stick_arduino_windows_01.png">
+
+**コンパイルしてアップロード実行すると、M5Stickの画面に `Hello World! Exist` と表示されます。**
+
+## ノート
+
+もしシリアルポートが見つからない場合は、Macの`システム環境設定 -> セキュリティとプライバシー`を開いてブロックされているアプリを許可してください。それでもダメな場合は、再度シリアルドライバをインストールしてください。
+
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/macOS_security_and_privacy.png">
+
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/macOS_security_and_privacy_01.png">
+
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/macOS_security_and_privacy_02.png">
+
+?> **Tip** **もしmacOSのパーミッションについてもっと詳しい情報が知りたい方は、次のリンクを参照してください。** https://developer.apple.com/library/archive/technotes/tn2459/\_index.html
+
+## ビデオチュートリアル
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/U2es-l4z2Zg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
@@ -0,0 +1,79 @@
+# M5Stick クイックスタート(Windows, Arudino) {docsify-ignore-all}
+
+?> `USB driver`、`Git`、`Arduino IDE` をインストールしているか確認してください。 もしまだの場合は、 [シリアル接続の確立方法](ja/related_documents/establish_serial_connection) と [GitとArduino IDEのインストール方法](ja/related_documents/how_to_install_git_and_arduino)を参照してください。
+
+## コンテンツ
+
+1. [環境設定](#環境設定)
+
+    - [Step1. arduino-ESP32サポートのダウンロード](#step1-arduino-esp32サポートのダウンロード)
+
+    - [Step2. M5Stackライブラリのダウンロード](#step2-m5stackライブラリのダウンロード)
+
+    - [Step3. U8g2 ライブラリインストール](#step3-u8g2-libインストール)
+
+2. [例題](#例題)
+
+## 環境設定
+
+### Step1. arduino-ESP32サポートのダウンロード
+
+Arduino IDEを起動し、メニューから`File`->`Peferences`->`Settings`と選択します。
+
+以下のようにGitHubからリポジトリを取得します。（少し時間がかかります）
+
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/windows/quick_start_arduino_win_01.png">
+
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/windows/quick_start_arduino_win_02.png">
+
+最新のESP32ボード管理URLを追加してください`Additional Boards Manager URLs: `
+
+*最新のボードマネージャURLはこちら："https://dl.espressif.com/dl/package_esp32_index.json"*
+
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/windows/quick_start_arduino_win_03.png">
+
+`Tools`->`Board:`->`Boards Manager...`を選択し、新しいポップアップダイアログで、`ESP32`と入力して検索します。`Install`をクリックします。
+
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/windows/quick_start_arduino_win_04.png">
+
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/windows/quick_start_arduino_win_05.png">
+
+### Step2. M5Stackライブラリのダウンロード
+
+Arduino IDEを開いて`スケッチ -> ライブラリをインクルード -> ライブラリを管理...`と選択します。開いたウィンドウの検索ボックスに`m5stack`と検索し、出てきたライブラリをインストールします。
+
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/windows/quick_start_arduino_win_06.png">
+
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/windows/quick_start_arduino_win_07.png">
+
+!> **Note:** *以下のように表示された場合は、アップデートします。*
+
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/windows/update_m5stack_lib.png">
+
+### Step3. U8g2 Libインストール
+
+まずArduino IDEを開き、`Sketch`->`Include Library`->`Manage Libraries...`の順に選択します。検索窓で`U8g2`を検索し、インストールします。
+
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_m5stick/install_u8g2.png">
+
+## 例題
+
+このセクションではArduinoでプログラムができるかを確認します。最初に<mark>[MPU9250付きのM5Stick](https://img.alicdn.com/imgextra/i4/136588748/O1CN012EUdFpJIthEANlx_!!136588748.jpg)</mark>とPCをUSBケーブルで接続してください。そしてM5Stickが接続されているシリアルポートを選択し、サンプルプログラムを実行してみましょう。
+
+### 1. `FactoryTest.ino`サンプルスケッチ実行
+
+Arduino IDEのメニューから`ツール`を選択し、ボードとボーレート、シリアルポートを次のように選択します。M5Stack-Core-ESP32、921600、COMx（シリアルポートの番号はお使いの環境によって変わります。)
+
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/windows/select_board_baudrate_serial_port.png">
+
+メニューから`ファイル -> スケッチ例 -> M5Stack -> Stick -> FactoryTest`を選択します。
+
+<img src="assets/img/getting_started_pics/m5stick/m5stick_arduino_windows_01.png">
+
+コンパイル＆アップロード実行します。
+
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/windows/arduino_upload.png">
+
+**M5Stick画面に"Hello World! Exist"とメッセージが表示されます。**
+
+?> *もしM5Stack Libを更新したい場合はこちらの記事を参照してください。[Arduino IDEのM5Stackライブラリ更新方法](ja/related_documents/upgrade_m5stack_lib).*
@@ -36,7 +36,7 @@

 初回起動する際、デフォルトで設定ページが表示されます。OLEDスクリーンに**AP名(SSID)**と**WiFi設定アドレス(192.168.4.1)**が表示されます。

-PCまたはスマホを利用して、表示されているAPへ接続します。接続が成功したら、ブラウザからWiFi設定アドレスにアクセスします。そして普段使用しているネットワークのSSIDとパスワードを入力後、`Save`をクリックし、接続が成功するのを待ちます。
+PCまたはスマホを利用して、表示されているAPへ接続します。接続が成功したら、ブラウザからWiFi設定アドレスにアクセスします。そして普段使用しているネットワークのSSIDとパスワードを入力して保存の後、接続が成功するのを待ちます。

 <img src="assets/img/getting_started_pics/m5stick/stick_04.png">

@@ -10,7 +10,7 @@

    - [Step2. 安装Arduino-M5Stack库](#Step2-安装Arduino-M5Stack库)

-    - [Step4. 安装U8g2库](#Step4-安装U8g2库)
+    - [Step3. 安装U8g2库](#Step3-安装U8g2库)

 2. [示例](#示例)

@@ -50,7 +50,7 @@

 <img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/windows/update_m5stack_lib.png">

-### Step4. 安装U8g2库
+### Step3. 安装U8g2库

 如果您还没安装`U8g2`库的话，打开Arduino IDE，并点击`Sketch`->`Include Library`->`Manage Libraries...`，搜索`U8g2`进行安装。