Merge branch 'master' of https://github.com/m5stack/m5-docs

docs/en/base/lan_base.md

@@ -36,14 +36,14 @@ If you need to implement RS485 communication, then use the matching pin header a
 
 **W5500**
 
-| W5500       | ESP32 Chip      |
-| :----------:  |:------------: |
-| MOSI        | GPIO23         |
-| MISO          | GPIO19            |
-| CLK          | GPIO18            |
-| CS          | GPIO26            |
-| RST          | GPIO13            |
-| INTn          | GPIO34            |
+| W5500  | ESP32 Chip   |
+| :----: | :----------: |
+| MOSI   | GPIO23       |
+| MISO   | GPIO19       |
+| CLK    | GPIO18       |
+| CS     | GPIO26       |
+| RST    | GPIO13       |
+| INTn   | GPIO34       |
 
 **M-Bus**
 
@@ -58,7 +58,7 @@ If you need to implement RS485 communication, then use the matching pin header a
 
 ## Include
 
-- 1x LAN Module
+- 1x LAN Base
 - 1x TTL-to-RS485 adapter board
 - 1x pin header 20pin
 - 1x metal rails and magnet discs

docs/en/quick_start/m5stick/m5stick_quick_start_with_arduino_MacOS.md

@@ -120,7 +120,7 @@ Now, the serial port name is `tty.SLAB_USBtoUART`
 
 ## 5. Install U8g2 Library
 
-#### (1) Open Arduino IDE, then Select `Sketch`->`Include Library`->`Manage Libraries...`, search `M5Stack` and install it
+#### (1) Open Arduino IDE, then Select `Sketch`->`Include Library`->`Manage Libraries...`, search `U8g2` and install it
 
 <img src="assets/img/getting_started_pics/m5stack_core/get_started_with_m5stick/install_u8g2.png">
 

docs/en/quick_start/m5stickc/m5stickc_quick_start_with_arduino_Windows.md

@@ -12,7 +12,7 @@
 
 **[4. Example](#_4-Example)**
 
-**[5. Video Tutorial](#_5-Related-Video)**
+**[5. Video Tutorial](#_5-Video-Tutorial)**
 
 ## 1. Install Arduino IDE
 
@@ -100,7 +100,7 @@ Click `Upload`
 
 <img src="assets/img/getting_started_pics/m5stickc/m5stickc_quick_start_09.png">
 
-## 5. Related Video
+## 5. Video Tutorial
 
 - Video tutorial for developing M5StickC in Arduino
 

docs/ja/base/lan_base.md

@@ -1,58 +1,108 @@
 # LAN ベース {docsify-ignore-all}
 
+<img src="assets/img/product_pics/base/lan_01.png" width="300" height="300">
 
+***
+
+:memo:**[概要](#概要)**&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:octocat:**[サンプルコード](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Base/LAN/Arduino)**&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:electric_plug:**[回路図](#回路図)**&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;🛒**[購入リンク](https://www.aliexpress.com/item/M5Stack-New-Arrival-LAN-Module-with-W5500-Chip-LanProto-Ethernet-convert-Network-Module-Microcontroller-for-Arduino/32904089417.html)**:clapper:**[関連動画](#関連動画)**
 
 ## 概要
 
-**<mark>LAN</mark>**ベースはI2Cとユーザ定義の6ピンポートによってイーサネット通信が可能なベースです。
+**<mark>LAN</mark>**ベースは**W5500**イーサネットチップをベースにデザインされた有線ネットワーク用ベースです。もしあなたのプロジェクトが有線LANからのみアクセス可能な場合は、このLANベースがフィットするでしょう。
 
-M5Stackの無線通信が遅かったり、無線ネットワークに繋がらない時に、このLANベースを利用して、それらの厄介な問題を解決することができます。
+M5CoreはワイヤレスWIFIを統合していますが、ネットワークインターフェースがないため、M5Coreに有線ネットワークへアクセスさせる必要がある場合は、LANベースを使用するのが適切です。
+
+LANベースには、LANを壁や鉄骨に簡単に取り付けるための金属製のレールとマグネットディスクも付いています。
+
+LANベースのオレンジ色のHT3.96端子。このインターフェースはまだ電気的に接続されていません。各ピンはM-BUS上のどのピンにも接続できます。
+
+**下図はLANの内部を示しています**
+
+<img src="assets/img/product_pics/base/lan_03.png" width="350" height="350"><img src="assets/img/product_pics/base/lan_07.png" width="350" height="350">
+
+RS485通信を実装する必要がある場合は、対応するピンヘッダとTLL-to-RS485変換小型ボードを使用してLANベースに半田付けすると、RS485インタフェースを実現できます。そして上記のHT3.96端子を通じてRS485デバイスと通信できます。
+
+**TTL-to-RS485アダプタボードとLANベース**
+
+<img src="assets/img/product_pics/base/lan_04.png" width="100%" height="100%">
+
+**下図は、TTL-to-RS485アダプタボードをLANバックプレーンと組み合わせる方法を示しています。**
+
+*RS485変換用の小型ボードはLANバックプレーンにはんだ付けされています。小型ボードのシリアルポートピンは、LANバックプレーンのGPIO16とGPIO17に接続されます。*
+
+<img src="assets/img/product_pics/base/lan_05.png" width="50%" height="50%">
+
+## ピンマップ
+
+**W5500**
+
+| W5500  | ESP32 Chip   |
+| :----: | :----------: |
+| MOSI   | GPIO23       |
+| MISO   | GPIO19       |
+| CLK    | GPIO18       |
+| CS     | GPIO26       |
+| RST    | GPIO13       |
+| INTn   | GPIO34       |
+
+**M-Bus**
+
+<img src="assets/img/product_pics/core/M-BUS.png" width="500" height="385">
 
 ## 特徴
 
-- W5500 - 高性能イーサネットチップ
+- 入力電圧範囲： 9 ~ 24V
+- RS485通信をサポート
+- RS485通信用のHT3.96サポート
+- 壁固定可能
 
 ## パッケージ内容
 
-- 1x LAN ベース(ユーザ定義 6 PIN and 1 Groveポート)
-- 1x DINレール
-- 1x ステッカー
+- 1x LAN Base
+- 1x TTL-to-RS485変換アダプタボード
+- 1x ピンヘッダ 20pin
+- 1x メタルレール、マグネットディスク
+- 3x HT3.96端子
+  - 2x 3pin
+  - 1x 4pin
+- 10x コールドクリンプ端子
+- 3x アレンレンチ
+  - 1x 1.5mm
+  - 1x 2mm
+  - 1x 2.5mm
+- 2x 六角鍋ネジ M3x28
+- 4x h六角鍋ネジ KA2x4
+- 1x 皿頭ネジ M3x8
+
+<img src="assets/img/product_pics/base/lan_06.png" width="50%" height="50%">
 
 ## アプリケーション
 
-- ミニポータブルWEBサーバ
-  - TCP/UDP サーバ
-  - HTTP サーバ
-- ミニポータブルWEBクライアント
-  - TCP/UDP クライアント
-  - HTTP クライアント
-- SMTP/NTP サーバ
+- M5Core + RS485ベルトコンベヤーコントローラ
 
-## ドキュメント
+<img src="assets/img/product_pics/base/base_example/example_base_lan_01.png" width="70%" height="70%">
 
-- **ウェブサイト**
-  - [M5Stack](https://m5stack.com)
+- 有線ストリーミングビデオ配信
 
-- **サンプルコード**
-  - [Example](https://github.com/m5stack/M5Stack/tree/master/examples/Modules/W5500)
+<img src="assets/img/product_pics/base/base_example/example_base_lan_02.png" width="70%" height="70%">
+
+## 関連リンク
+
+- **[公式ビデオ](https://www.youtube.com/channel/UCozgFVglWYQXbvTmGyS739w)**
+
+- **[公式フォーラム](http://forum.m5stack.com/)**
 
 - **データシート**
   - [W5500](https://cdn.sparkfun.com/datasheets/Dev/Arduino/Shields/W5500_datasheet_v1.0.2_1.pdf)
 
-- **GitHub**
-  - [M5Stack](https://github.com/m5stack/M5Stack)
+## 回路図
 
-<!-- <figure>
-    <img src="assets/img/product_pics/bases/lan_01.jpg" alt="lan_01" width="300px" height="300px">
-</figure>
-<figure>
-    <img src="assets/img/product_pics/bases/lan_02.jpg" alt="lan_02" width="300px" height="300px">
-</figure>
-<figure>
-    <img src="assets/img/product_pics/bases/lan_03.jpg" alt="lan_03" width="300px" height="300px">
-</figure> -->
+<img src="assets/img/product_pics/base/lan_sch.JPG">
 
-## 関連情報
+## 関連動画
 
-- [LAN ベース購入(スイッチサイエンス)](https://www.switch-science.com/catalog/3994/)
-- [LAN ベース購入(AliExpress)](https://www.aliexpress.com/store/product/M5Stack-LAN-W5500-LanProto-Arduino/3226069_32904089417.html)
+**LAN ケース - PCから動画をLANモジュール経由でUDP配信**
+
+<video width="500" controls>
+    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201904/M5StackLovyanlauncher.mp4" type="video/mp4">
+</video>

docs/ja/core/fire.md

@@ -12,11 +12,11 @@
 
 **M5Stack FIRE**は、ESP32プログラミングに必要なものに加えて、**MPU9250**MEMSセンサー(3軸ジャイロ + 3軸加速度 + 3軸地磁気) 、TFT LCDなどを備えています。簡易版"Leap Motion"のような3Dリモートジェスチャーコントローラなどを短時間で作ることが出来るでしょう。
 
-[M5Go](zh_CN/base/m5go_bottom)ボトムベースはPOGOピン、M5GoベースはPORT B, PORT C, 2つのLEDバー(SK6812)で構成されています。
+[M5Go](ja/base/m5go_bottom)ボトムベースはPOGOピン、M5GoベースはPORT B, PORT C, 2つのLEDバー(SK6812)、マイク、600mAhのバッテリーで構成されています。
 
-[M5GO CHG](zh_CN/base/m5go_charger)ベースはM5CoreとはPOGOピンで接続されます。磁石も内蔵しているため、M5Fireにくっつけることが可能です。
+[M5GO CHG](ja/base/m5go_charger)ベースはM5CoreとはPOGOピンで接続されます。磁石も内蔵しているため、M5Fireにくっつけることが可能です。
 
-ベースの充電中は充電インジケータLEDが赤く点滅しますが、充電が完了すると点灯したままになります。
+**充電時:** ベースの充電中は充電インジケータLEDが赤く点滅しますが、充電が完了すると点灯したままになります。
 
 <img src="assets/img/product_pics/base/m5go_charger_10.png" width="50%" height="50%"><img src="assets/img/product_pics/base/m5go_charger_09.png" width="50%" height="50%">
 
@@ -196,3 +196,9 @@
 <video width="500" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/LukeVideo/m5stack%E7%AE%80%E4%BB%8B%EF%BC%88%E4%B8%AD%E6%96%87%EF%BC%89.mp4" type="video/mp4">
 </video>
+
+**m5stack ケース - Moddable SDKを使用したPIU-UIフレームワーク**
+
+<video width="500" controls>
+    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201904/run-time-display-rotation.mp4" type="video/mp4">
+</video>

docs/ja/core/m5stick.md

@@ -106,6 +106,12 @@
 
 - **M5Stick デモ - エアコンのリモコン制御**
 
-<video width="500" height="315" controls>
+<video width="500" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201901/M5Stick%20controll%20AC.mp4" type="video/mp4">
 </video>
+
+- **m5stick ケース - .OBJモデルビューワー**
+
+<video width="500" controls>
+    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201903/Obj%20Model%20Viewer.mp4" type="video/mp4">
+</video>

docs/ja/quick_start/m5stick/m5stick_quick_start_with_arduino_MacOS.md

@@ -1,90 +1,144 @@
-# M5Stick クイックスタート(macOS, Arudino) {docsify-ignore-all}
-
-?> *環境設定の前に、シリアルドライバがインストールされているか確認いてください。もしまだの場合は[シリアル接続の確立方法](ja/related_documents/establish_serial_connection)を参照してください。*
+# M5Stick クイックスタート - Arduino Mac {docsify-ignore-all}
 
 <img src="assets/img/getting_started_pics/m5stick/stick_01.png"><img src="assets/img/getting_started_pics/m5stick/stick_06.png"><img src="assets/img/macos-logo.png">
 
-## テキストチュートリアル
+## 目次
 
-1. [環境設定](#環境設定)
+[1. Arduino IDEのインストール](#_1-arduino-ideのインストール)  
+[2. USBシリアル変換ドライバのインストール](#_2-USBシリアル変換ドライバのインストール)  
+[3. ESP32ボードライブラリのインストール](#_3-esp32ボードライブラリのインストール)  
+[4. M5Stackライブラリのインストール](#_4-m5stackライブラリのインストール)  
+[5. U8g2ライブラリのインストール](#＿５-u8g2ライブラリのインストール)  
+[6. 例題](#_6-例題)  
 
-    - Step1. [Arduino IDEインストール](#step1-arduino-ideインストール)
+## 1. Arduino IDEのインストール
 
-    - Step2. [ESP32ボードサポート](#step2-esp32ボードサポート)
+ブラウザからArduinoの公式サイトにアクセスします。 https://www.arduino.cc/en/Main/Software
 
-    - Step3. [M5Stack ライブラリインストール](#step3-m5stack-libインストール)
-
-    - Step4. [U8g2 ライブラリインストール](#step4-u8g2-libインストール)
-
-2. [例題](#例題)
-
-## 環境設定
-
-### Step1. `Arduino IDE`インストール
-
-最初にArduino IDEをインストールします。ダウンロードアドレスは https://www.arduino.cc/en/Main/Software です。
+#### (1) `Mac OS X`向けの`Arduino IDE`を選択します。
 
 <img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/macOS_download_arduino_ide.png">
 
-### Step2. ESP32ボードサポート
+#### (2) `JUST DOWNLOAD`をクリックします。
 
-Arduino IDEを起動し、メニューから、`Arduino`->`Peferences`->`Settings`と選択します。
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/macOS_download_arduino_ide_02.png">
+
+#### (3) Arduino IDEをダウンロードしたら、ファイルをダブルクリックします。
+
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/macOS_download_arduino_ide_03.png">
+
+## 2. USBシリアル変換ドライバのインストール
+
+ブラウザからM5Stackの公式サイトにアクセスします。 https://m5stack.com/download
+
+#### (1) `Mac`をクリックし、ファイルをダウンロードしたら、解凍(unzip)します。
+
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/download_usb_driver_mac_01.png">
+
+#### (2) 解凍後、`SiLabsUSBDriverDisk.dmg`ディスクイメージをダブルクリックし、インストールします。
+
+<img src="assets/img/getting_started_pics/establish_serial_connection/macOS_CP2104_dmg.png">
+
+<img src="assets/img/getting_started_pics/establish_serial_connection/macOS_CP2104_pkg.png">
+
+<img src="assets/img/getting_started_pics/establish_serial_connection/2.png">
+
+<img src="assets/img/getting_started_pics/establish_serial_connection/3.png">
+
+<img src="assets/img/getting_started_pics/establish_serial_connection/4.png">
+
+<img src="assets/img/getting_started_pics/establish_serial_connection/5.png">
+
+<img src="assets/img/getting_started_pics/establish_serial_connection/6.png">
+
+<img src="assets/img/getting_started_pics/establish_serial_connection/7.png">
+
+<img src="assets/img/getting_started_pics/establish_serial_connection/8.png">
+
+<img src="assets/img/getting_started_pics/establish_serial_connection/9.png">
+
+#### (3) `/dev/tty.SLAB_USBtoUART`シリアルポートを確認します。
+
+確認出来たらドライバインストール成功です:
+
+`Terminal`を開き、 `M5Core`とPCをUSB Type-C ケーブルで接続します。そして次のコマンドを実行します。
+
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/check_serial_port_mac_01.png">
+
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/check_serial_port_mac_02.png">
+
+M5CoreをPCから外し、再度同じコマンドを実行すると、消えるものがあるので、それが対応するポートになります。
+
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/check_serial_port_mac_03.png">
+
+この例ではシリアルポートは`tty.SLAB_USBtoUART`です。
+
+## 3. EESP32ボードライブラリのインストール
+
+#### (1) Arduino IDEのメニューから`ファイル`->`Peferences...`->`設定`と選択します。
 
 <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: `
+#### (2) 下記のESP32ボードマネージャURLをコピーして`Additional Boards Manager URLs:`に貼り付けます。
 
-*最新のボードマネージャURLはこちら：https://dl.espressif.com/dl/package_esp32_index.json*
+*ESP32ボードマネージャ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`をクリックします。
+#### (3) 次にメニューから`ツール`->`ボード:`->`ボードマネージャ...`を選択します。
 
 <img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/quick_start_arduino_mac_04.png">
 
+#### (4) 検索ボックスで`ESP32`と検索し、出てきたライブラリを`Install`します。
+
 <img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/quick_start_arduino_mac_05.png">
 
-### Step3. M5Stack Libインストール
+## 4. M5Stackライブラリのインストール
 
-Arduino IDEを起動し、メニューから`スケッチ`->`ライブラリをインクルード`->`ライブラリを管理...`を選択します。
+#### (1) Arduino IDEのメニューで`スケッチ`->`ライブラリをインクルード`->`ライブラリを管理...`と選択します。
 
-検索ボックスに`m5stack`と入力して検索し、M5Stackのライブラリをインストールします。
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/windows/install_m5stack_lib_01.png">
 
-<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/quick_start_arduino_mac_06.png">
+#### (2) 検索ボックスで`M5Stack`と検索し、出てきたライブラリを`Install`します。
 
-<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/quick_start_arduino_mac_07.png">
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/windows/install_m5stack_lib_02.png">
 
-### Step4. U8g2 Libインストール
+## 5. U8g2ライブラリのインストール
 
-まずArduino IDEを開き、`Sketch`->`Include Library`->`Manage Libraries...`の順に選択します。検索窓で`U8g2`を検索し、インストールします。
+#### (1) Arduino IDEのメニューで`スケッチ`->`ライブラリをインクルード`->`ライブラリを管理...`と選択します。 検索ボックスで`U8g2`と検索し、出てきたライブラリを`Install`します。
 
 <img src="assets/img/getting_started_pics/m5stack_core/get_started_with_m5stick/install_u8g2.png">
 
-## 例題
+## 6. 例題
 
-USBケーブルをM5Stickに接続し、ボードとシリアルポートを選択します。そしてサンプルプログラムをコンパイルし、アップロードしてみましょう。
+USBケーブルで<mark>[M5Stick built in MPU9250](https://ae01.alicdn.com/kf/HTB1pICNXznuK1RkSmFPq6AuzFXa1.jpg)</mark>をPCに接続します。そして、M5Stickを接続したシリアルポートを選択します。
 
-### 1. ボードとシリアルポートを選択
+デモを選択し、実行します。
 
-Arduino IDEを起動し、メニューから`ツール -> ボード -> M5Stack-Core-ESP32`とボードを選択します。
+#### (1) ボードとシリアルポート選択
 
-次に、メニューから`ツール -> シリアルポート -> /dev/cu.SLAB_USBtoUART` とシリアルポートを選択します。
+Arduino IDEのメニューで`ツール` -> `ボード` -> `M5Stack-Core-ESP32` と選択します。  
+次に`Tools` -> `Ports ->`でM5Stickを接続したシリアルポートを選択します。  
 
 <img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/quick_start_arduino_mac_10.png">
 
-### 2. サンプルスケッチ
+#### (2) サンプルコード選択
 
-サンプルスケッチを利用して、定番のHelloWorldを表示してみましょう。メニューから`ファイル -> スケッチ例 -> M5Stack -> Stick -> FactoryTest`と選択します。
+Arduino IDEのメニューで `ファイル` -> `スケッチ例` -> `M5Stack` -> `Stick`と選択します。
 
-<img src="assets/img/getting_started_pics/m5stick/m5stick_arduino_windows_01.png">
+そして`Basics`->`FactoryTest`を開いてください。
 
-**コンパイルしてアップロード実行すると、M5Stickの画面に `Hello World! Exist` と表示されます。**
+<img src="assets/img/getting_started_pics/m5stick/m5stick_quick_start_arduino_mac_01.png">
+
+コンパイルしてM5StickにアップロードするとM5Stickの画面に"Hello World! Exist"と表示されます。
+
+**M5Stickの左側面にあるボタンが、電源ボタンです。クリックで電源オン、再度クリックするとリセット、ダブルクリックするとディープスリープ（電源オフ）です。**
 
 ## ノート
 
-もしシリアルポートが見つからない場合は、Macの`システム環境設定 -> セキュリティとプライバシー`を開いてブロックされているアプリを許可してください。それでもダメな場合は、再度シリアルドライバをインストールしてください。
+ほとんどのバージョンのmacOSではシリアルポートを検出するために、以下の手順を踏む必要があります。システム環境設定を開き、`セキュリティとプライバシー`の中でCP2104ドライバを`許可する`を選択してください。
 
 <img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/macOS_security_and_privacy.png">
 
@@ -92,4 +146,4 @@ Arduino IDEを起動し、メニューから`ツール -> ボード -> M5Stack-C
 
 <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
+?> **CP2104 USBドライバを許可する方法について詳しく知りたい場合は、こちらをご覧ください。** https://developer.apple.com/library/archive/technotes/tn2459/\_index.html

docs/ja/quick_start/m5stick/m5stick_quick_start_with_uiflow.md

@@ -1,6 +1,6 @@
-# M5Stick クイックスタート(UIFlow) {docsify-ignore-all}
+# M5Stick クイックスタート - UIFlow {docsify-ignore-all}
 
-<img src="assets/img/getting_started_pics/m5stick/stick_01.png"><img src="assets/img/getting_started_pics/m5stick/stick_06.png">
+<img src="assets/img/getting_started_pics/m5stick/stick_01.png"><img src="assets/img/getting_started_pics/m5stick/stick_06.png"><img src="assets/img/uiflow-logo.png">
 
 1. **[ファームウェア更新](#ファームウェア更新)**
 

docs/ja/quick_start/m5stickc/m5stickc_quick_start_with_arduino_MacOS.md

@@ -0,0 +1,107 @@
+# M5Stick Quick Start - Arduino Mac {docsify-ignore-all}
+
+<!-- :clapper: **[Video Tutorial](#Video-Tutorial)**&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:memo: **[Text Tutorial](#Text-Tutorial)** -->
+
+<!-- *** -->
+
+<!-- ?> Before setting the development environment, we suggest you confirm whether the USB driver has installed. If not, please visit this link [establish serial connection](/en/related_documents/establish_serial_connection). -->
+
+<img src="assets/img/getting_started_pics/m5stick/stick_01.png"><img src="assets/img/getting_started_pics/m5stick/stick_06.png"><img src="assets/img/macos-logo.png">
+
+## Text Tutorial
+
+1. [Setting Environment](#setting-environment)
+
+    - [Step1. Install Arduino IDE](#step1-install-arduino-ide)
+
+    - [Step2. ESP32 Board Support](#step2-esp32-board-support)
+
+    - [Step3. Install M5Stack Lib](#step3-install-m5stack-lib)
+
+    - [Step4. Install U8g2 library](#Step4-Install-U8g2-library)
+
+2. [Example](#example)
+
+## Setting Environment
+
+### Step1. Install `Arduino IDE`
+
+First, if Arudino IDE is not installed, install it. It's *download address* is 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 Board Support
+
+Open Arduino IDE, click `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">
+
+Copy the following last ESP32 Board Manager URL to this option `Additional Boards Manager URLs: `
+
+*NOW, last ESP32 board manager URL is 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">
+
+Confirm OK and click `Tools`->`Board:`->`Boards Manager...` for installing esp32
+
+Search `ESP32` in the new pop-up dialog, then click `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. Install M5Stack Lib
+
+Start up Arduino IDE, then Select `Sketch`->`Include Library`->`Manage Libraries...`
+
+Type `M5Stack` into the search box, search it and install.
+
+<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">
+
+### Step4. Install U8g2 Library
+
+Open Arduino IDE, click `Sketch`->`Include Library`->`Manage Libraries...`, search `U8g2` for installing.
+
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_m5stick/install_u8g2.png">
+
+## Example
+
+The USB cable connects to <mark>[M5Stick built in MPU9250](https://ae01.alicdn.com/kf/HTB1pICNXznuK1RkSmFPq6AuzFXa1.jpg)</mark>, then select your serial port which is connected the M5Stick.
+
+Select a demo example, compile and upload
+
+### 1. Select your board and the serial port
+
+Start up Arduino IDE, and click `Tools -> Boards -> M5Stack-Core-ESP32` to select your board
+
+Click `Tools -> Ports ->` to select the serial port which is connected with M5Stick
+
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_arduino_m5core/mac/quick_start_arduino_mac_10.png">
+
+### 2. Select an example
+
+Click `File-> Examples`. Here are some test programs in `M5Stack`->`Stick`
+
+Try to open a sketch called `FactoryTest` inside Basics.
+
+<img src="assets/img/getting_started_pics/m5stick/m5stick_quick_start_arduino_mac_01.png">
+
+Compile it and upload, the M5Stick screen will show "Hello World! Exist""
+
+**The button located at the bottom left of stick is the power button, click to turn it on, press again to reset when running. If you want to let stick enter deep sleep status, you need to press the power button twice quickly.**
+
+## Note
+
+Although most versions of MacOS have no problem with detecting the COM port, on some newer versions of High Sierra sometimes Slab\_USBtoUART does not appear. If this is the case, after you connect the M5 open `security and privacy` in the system preferences and set it to `permit`.
+
+<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">
+
+?> **If you want to read more the permission about the CP2104 USB driver, visit the following link please.** https://developer.apple.com/library/archive/technotes/tn2459/\_index.html

docs/ja/quick_start/m5stickc/m5stickc_quick_start_with_arduino_Windows.md

@@ -1,4 +1,4 @@
-# M5StickC クイックスタート {docsify-ignore-all}
+# M5StickC クイックスタート - Arduino Win {docsify-ignore-all}
 
 <img src="assets/img/getting_started_pics/m5stickc/m5stickc_06.png"><img src="assets/img/windows-logo.png">
 
@@ -12,6 +12,8 @@
 
 **[4. 例題](#_4-例題)**
 
+**[5. ビデオチュートリアル](#_5-ビデオチュートリアル)**
+
 ## 1. Arduino IDE インストール
 
 ブラウザを開いて、Arduino公式サイト https://www.arduino.cc/en/Main/Software にアクセスします。
@@ -96,3 +98,11 @@ Arduino IDEを開き、M5StickCが接続されているシリアルポートを
 `Upload`をクリックし、プログラムをM5StickCに書き込みます。
 
 <img src="assets/img/getting_started_pics/m5stickc/m5stickc_quick_start_09.png">
+
+## 5. ビデオチュートリアル
+
+- Arduinoを使用したM5StickC開発
+
+<video width="500" controls>
+    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/%E6%95%99%E7%A8%8B/StickC/StickC%20Arduino%20Tutorial.mp4" type="video/mp4">
+</video>

docs/ja/quick_start/m5stickc/m5stickc_quick_start_with_uiflow.md

@@ -1,136 +1,110 @@
-# M5StickC Quick Start - UIFlow {docsify-ignore-all}
+# M5StickC クイックスタート - UIFlow {docsify-ignore-all}
 
 <img src="assets/img/getting_started_pics/m5stickc/m5stickc_06.png"><img src="assets/img/uiflow-logo.png">
 
-**[1. Burn UIFlow Firmware](#_1-Burn-UIFlow-Firmware)**
+**[1. UIFlowファームウェア書き込み](#_1-UIFlowファームウェア書き込み)**
 
-**[2. Wi-Fi Setting](#_2-Wi-Fi-Setting)**
+**[2. Wi-Fiセッティング](#_2-Wi-Fiセッティング)**
 
-**[3. Program](#_3-Program)**
+**[3. プログラミング](#_3-プログラミング)**
 
-## 1. Burn UIFlow Firmware
+## 1. UIFlowファームウェア書き込み
 
-#### (1) Download M5Burner
+#### (1) M5Burnerをダウンロードする。
 
-Access [M5Stack Official Website](http://www.m5stack.com/download), and download M5Burner
+ブラウザで[M5Stack公式ウェブサイト](http://www.m5stack.com/download)にアクセスし、M5Burnerをダウンロードします。
 
 <img src="assets/img/getting_started_pics/how_to_burn_firmware/download_M5Burner.png" alt="Screenshot of coverpage" title="Cover page">
 
 <img src="assets/img/getting_started_pics/how_to_burn_firmware/download_M5Burner_02.png" alt="Screenshot of coverpage" title="Cover page">
 
-#### (2) Burn the firmware
+#### (2) ファームウェアを書き込む
 
-Connect M5StickC to the computer via the USB Type-C cable, unzip the M5Burner archive you just downloaded, and double-click the executable `M5Burner.exe`
+M5StickCとPCをUSB Type-Cケーブルで接続し、ダウンロードしたM5Burnerのファイルを解凍します。解凍後`M5Burner.exe`をダブルクリックします。
 
-Select the `COM`, `Baudrate` and the lastest `firmware`
+`COM`、`ボーレート`そして最新の`ファームウェア`を選択します。
 
-* <font color="red">Select COM: COM31</font> (Now, my serial port which is connected with PC is `COM31`)
+* <font color="red">COM選択: COM31</font> (この写真ではPCに繋がっているシリアルポートは`COM31`)
 
-* <font color="red">Select Baudrate: 115200</font>
+* <font color="red">ボーレート選択: 115200</font>
 
-* <font color="red">Download and select Firmware: UIFlow-vx.x.x-StickC</font>
+* <font color="red">ファームウェア選択: UIFlow-vx.x.x-StickC</font>
 
 <img src="assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_01.png">
 
-Click `Burn` for downloading UIFlow firmware
+`Burn`をクリックするとUIFlowファームウェアが書き込まれます。
 
-The following figure indicates that the firmware is successfully burned.
+以下の図のようになったら、書き込み成功です。
 
 <img src="assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_02.png">
 
-## 2. Wi-Fi Setting
+## 2. Wi-Fiセッティング
 
-#### (1) Select `SETUP`
+#### (1) `SETUP`を選択する。
 
-After successfully burning the UIFlow firmware, click the `Power Switch` button in the lower left corner of the M5StickC.
+UIFlowファームウェアの書き込みが成功したら、M5StickCの左側面にある`電源スイッチ`ボタンをクリックします。
 
-M5StickC will display the AP name as the shown below
+M5StickCは、以下の図のようにAPの名前を表示します。
 
 <img src="assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_03.png">
 
+#### (2) APに接続する。
 
-#### (2) Connect to AP
-
-Turn on Wi-Fi on your phone or computer, then connect to the M5StickC hotspot `AP` displayed on the screen ( For example, the M5-80f0 is now displayed ). After the connection is successful, open a browser and enter the URL `192.168.4.1`, then select Wi-Fi that can be connected to the network, enter the Wi-Fi password. ( Now, the networkable Wi-Fi is M5 )
+あなたのPCまたはスマートフォンのWi-Fiをオンにします。それからM5StickCの画面に表示されているホットスポット`AP` に接続します。(今回の例では：`M5-80f0`)。  
+接続が成功したら、ブラウザを開き、次のアドレス `192.168.4.1` にアクセスします。  
+そして接続するWi-FiのSSIDとパスワードを入力します。(今回の例では、Wi-FiのSSIDは`M5`)
 
 <img src="assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_04.png">
 
-#### (3) Connect to Wi-Fi
+#### (3) Wi-Fiに接続する。
 
-After M5StickC successfully connects to a networkable Wi-Fi (here M5), the screen will display `APIKEY`.
+M5StickCがWi-Fiへの接続が成功したら、M5StickCの画面に `APIKEY`が表示されます。
 
-*Description of APIKEY: APIKEY is the device unique identifier. As long as the current UIFlow is connected to which device's APIKEY, The programming code will be downloaded to that device.*
+*APIKEYとは: APIKEYはデバイス毎のユニークなIDです。現在UIFlowがどのデバイスに接続されているか、APIKEYで判断し、プログラムコードがAPIKEYで指定されたデバイスに送信されます。*
 
 <img src="assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_05.png">
 
-The status of the network icon on the screen:
+画面上のネットワークステータス:
 
-* Green means M5StickC successfully connected to UIFlow Server, that is online status
+* 緑： オンライン、M5StickCはUIFlowサーバに接続しています。
 
-* Red means be offline status
+* 赤： オフライン
 
-## 3. Program
+## 3. プログラミング
 
-#### (1) Connect to UIFlow
+#### (1) UIFlowに接続する。
 
-Now If you are programming with a computer, enter the URL `flow.m5stack.com` on your computer's browser
+PCでプログラミングをしている場合、ブラウザを開き`flow.m5stack.com`にアクセスします。
 
 <img src="assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_06.png">
 
-Every time before you upload the code to M5StickC through UIFlow, make sure that UIFlow is connected to the M5StickC you want to program.
+UIFlowからコードをM5StickCにアップロードする前に毎回UIFlowとM5StickCの接続が確認されます。
 
-So you need to click on the gear in the upper right corner of the UIFlow IDE page and enter APIKEY on your M5StickC screen in the pop-up dialog box. Click `Save`, then UIFlow will connect to M5StickC.
+UIFlow IDEの画面右上の歯車をクリックし、あなたのM5StickCの画面に表示されているAPIKEYを表示されたモーダルダイアログに入力してください。  
+そして`Save`をクリックすると、M5StickCとUIFlowが接続されます。
 
 <img src="assets/img/getting_started_pics/m5stack_core/get_started_with_uiflow/click_for_apikey.png">
 
 <img src="assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_07.png">
 
-Now you can start programming with UIFlow!
+UIFlowを使ってプログラムを始める準備ができました！
 
-#### (2) Programming example
+#### (2) 例題プログラム
 
-Drag and drop the `Lable` in the upper left corner of the UIFlow IDE to the UI interface of `M5StickC`, change their `text` and `font`
+UIFlow IDEの左上から`Lable`をドラッグして、`M5StickC`のUIインタフェースにドロップします。そしてプロパティから`text`と`font`を変更します。
 
 <img src="assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_10.png">
 
-From `Hardware` -> `LED`, drag a block named `LED ON` and another block named `LED OFF`
+`Hardware` -> `LED`からブロックをドラッグして`LED ON`と`LED OFF`という名前をつけます。
 
-From `Timer`, drag a block named `Wait 1s`
+`Timer`からブロックをドラッグして`Wait 1s`という名前をつけます。
 
 <img src="assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_13.png">
 
-Click the `Run` button in the upper right corner of the page to execute the effect
+UIFlow IDEの右上にある三角形の`Run`ボタンをクリックします。
 
 <img src="assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_16.png">
 
-<mark>**The Result:**</mark>
+<mark>**結果:**</mark>
 
 <img src="assets/img/getting_started_pics/m5stickc/qs_uiflow/qs_uiflow_14.png">
-
-
-<!--
-## Example
-
->Click and download [example](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Core/M5Stick/UIFlow). And open this example code in UIFlow, then run it. Program phenomenon: White squares will scroll back and forth on the screen.
-
-<img src="assets/img/product_pics/core/minicore/m5stick/example/example_core_m5stick_02.png" width=50% height=50%><img src="assets/img/product_pics/core/minicore/m5stick/example/example_core_m5stick_03.png" width=50% height=50%>
-
-### Note
-
->the resolution of stick screen is **64x128**, so if you want to drag a graph at [WebIDE](http://flow.m5stack.com/) to display on stick screen, it's better for you to drag it within a certain range shown as following figure.(Currently only supports the display of rectangular patterns, as well as labels.)
-
-<img src="assets/img/product_pics/core/minicore/m5stick/example/example_core_m5stick_01.png" width=50% height=50%>
-
-## Related Video
-
-**UIFlow introduce**
-
-<video width="500" height="315" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/%E6%95%99%E7%A8%8B/UIFlow%20Tutorials/A3%20-%20UIflow%20Tutorial%201.mp4" type="video/mp4">
-</video>
-
-**UIFlow quick start (Mac & Linux)**
-
-<video width="500" height="315" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/LukeVideo/Getting%20started%20with%20UI%20flow%20(Mac_Linux).mp4" type="video/mp4">
-</video> -->