add quick-start for m5stick in japanese

2026-05-20 10:23:01 -07:00 · 2019-01-08 16:06:40 +09:00
parent d397ef5117
commit 8b82e154d2
5 changed files with 102 additions and 3 deletions
@@ -22,7 +22,7 @@ BTCベースはDHT12を内蔵しており、周囲の温度、湿度を検出す

 - USB Type-C ケーブル
 - M3 x 16 ネジ
- ツール
+- 六角棒スパナ

 <img src="assets/img/product_pics/module/module_btc_04.png" width="30%" height="30%"><img src="assets/img/product_pics/module/module_btc_03.png" width="30%" height="30%">

@@ -1,7 +1,5 @@
 # 今すぐ始めるM5Stack

-
-
 ## 好きなプログラミング言語を以下から選んでください。

 <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">
@@ -0,0 +1,13 @@
+# M5Stick クイックスタート
+
+**好きなプログラミング言語を以下から選んでください。**
+
+<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](en/quick_start/m5stick/m5stick_quick_start_with_arduino) | [Windows](en/quick_start/m5stick/m5stack_core_get_started_Arduino_Windows) | [UiFlow(Blockly/MicroPython)](en/quick_start/m5stick/m5stick_quick_start_with_uiflow) -->
@@ -0,0 +1,17 @@
+# M5Stick クイックスタート (Arduino)
+
+## 1. `U8g2` ライブラリのインストール
+
+まずArduino IDEを開き、`Sketch`->`Include Library`->`Manage Libraries...`の順に選択します。検索窓で`U8g2`を検索し、インストールします。
+
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_m5stick/install_u8g2.png">
+
+## 2. Arduino-ESP32の設定
+
+利用しているパソコンのOSに対応したドキュメントを参照してください。
+同じMCUが組み込まれているので、M5StickとM5Coreのクイックスタート手順は似ています。
+[M5Coreクイックスタート手順](ja/quick_start/m5core/m5stack_core_quick_start)
+
+<img src="assets/img/macos-logo.png"> | <img src="assets/img/windows-logo.png">
+---|---
+[MacOS](ja/quick_start/m5core/m5stack_core_get_started_Arduino_MacOS) | [Windows](ja/quick_start/m5core/m5stack_core_get_started_Arduino_Windows)
@@ -0,0 +1,71 @@
+# M5Stick クイックスタート(UIFlow)
+
+<img src="assets/img/getting_started_pics/m5stick/stick_01.png"><img src="assets/img/getting_started_pics/m5stick/stick_06.png">
+
+1. **[ファームウェア更新](#ファームウェア更新)**
+
+2. **[電源オン](#電源オン)**
+
+3. **[環境設定](#環境設定)**
+
+    - **[ステップ1. WIFI設定](#step1-wifi設定)**
+
+    - **[ステップ2. API Key設定](#step2-api-key設定)**
+
+4. **[例題](#例題)**
+
+## ファームウェア更新
+
+>M5Stickのファームウェアを最新にすることでより良い体験が得られます。
+
+*もしファームウェアを更新する場合は[こちら](ja/related_documents/how_to_burn_firmware)を参照してください。*
+
+<img src="assets/img/getting_started_pics/m5stick/stick_03.png">
+
+## 電源オン
+
+>M5Stickの左下にあるボタンは電源ボタンです。一回押すと電源オン、実行中に一回押すとリセット、素早く二回押すと電源オフです。
+
+>電源ボタンに加えて、プログラムで利用可能な`A`ボタンを提供します。
+
+<img src="assets/img/getting_started_pics/m5stick/stick_02.png" width="300" height="300">
+
+## 環境設定
+
+### Step1. WIFI設定
+
+初回起動する際、デフォルトで設定ページが表示されます。OLEDスクリーンに**AP名(SSID)**と**WiFi設定アドレス(192.168.4.1)**が表示されます。
+
+PCまたはスマホを利用して、表示されているAPへ接続します。接続が成功したら、ブラウザからWiFi設定アドレスにアクセスします。そして普段使用しているネットワークのSSIDとパスワードを入力後、`Save`をクリックし、接続が成功するのを待ちます。
+
+<img src="assets/img/getting_started_pics/m5stick/stick_04.png">
+
+## Step2. API Key設定
+
+WiFi設定が完了したら、M5Stickは自動的に再起動後、プログラミングモードに遷移します。画面に“Done”と表示されたら、M5StickがWiFiへ接続したことを示します。次にWeb IDE [flow.m5stack.com](http://flow.m5stack.com/)へアクセスし、プログラミングをしてみましょう。
+
+[Web IDE](http://flow.m5stack.com/)のページ右上の`Settings`ボタンをクリックし、M5Stickのスクリーンに表示される**API Key**を登録し、保存ます。これでプログラミングの準備が整いました。
+
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_m5stick/uiflow_setting.png">
+
+<img src="assets/img/getting_started_pics/m5stick/stick_05.png">
+
+## 補足
+
+>もし`Download`をクリックした場合、最後にDownloadされたプログラムを実行します。この場合にもしプログラミングモードに遷移したい場合は、リセット後、`UiFlow`ロゴが消えるまでに`A` ボタンを1回クリックします。
+
+<img src="assets/img/getting_started_pics/m5stack_core/get_started_with_m5stick/uiflow_download.png">
+
+>もし新しいWiFi設定をしたい場合、 リセット後、`UiFlow`ロゴが消えるまでに`A`ボタンを1秒以上押し続けてから離します。
+
+## 例題
+
+>こちらから例題をダウンロードします。 [example](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Core/M5Stick/UIFlow)。そして`UiFlow`でこのサンプルコードを開き、実行します。 実行結果: 白い四角形がスクロールします。
+
+<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%>
+
+## ノート
+
+>スティック画面の解像度は**64x128**です。従って[Web IDE](http://flow.m5stack.com/)で図形をドラッグしてM5Stickの画面に表示する場合は、(0,0)から(63,127)の範囲内にドラッグしてください。（現在、ラベルと長方形の表示をサポートしています）
+
+<img src="assets/img/product_pics/core/minicore/m5stick/example/example_core_m5stick_01.png" width=50% height=50%>