PiZero版チュートリアルのリニューアル

[Aritaka-hub]

@satakagi @kou029w

PiZero版のチュートリアルサイトを WIMC+ の各地のメンターや学校関係者の方も見る（使用する）機会が増えてきた事もあり、より使い勝手を良くするための UI 変更をメインとしたリニューアルの作業をしたいと思います。

今の構想はサイドメニューを付けて各情報のアクセスを容易にする変更を考えていて、内容変更までは考えていませんが、リニューアル作業をしてみて色々とご意見いただけるとありがたいです。プレビュー版など出来たらまた相談させてください。

[dynamis]

今の構想はサイドメニューを付けて各情報のアクセスを容易にする変更を考えていて

サイドメニューというのはサイト全体の共通？ pi zero チュートリアルページ https://tutorial.chirimen.org/pizero/ 単体に閉じたもの？それとも pizero 専用のサイドメニューのあるページの右に既存の色んなページを埋め込むフレーム的なもの？

目次にあたるものが折りたたみで再度 (両端) に表示できるという形であれば docusaurus などを使うだけで自動的にチュートリアル全体の目次 (現在ページがそのどの部分か) と各ページ内での目次が共に左右に折りたたみで表示できるようになったりします(例は docusaurus 自身のもの https://docusaurus.io/docs/next/installation とか react, svelte その他フレームワークの docs サイト) が、そういうシステム的なものを使ったりしますか？

pi3+ の方は導入ページ https://tutorial.chirimen.org/raspi/ があって配下に内容毎に分かれるという構成を取ることで必要な情報にアクセスし安くということをしていました。また、パーツリスト(およびそこから続く examples) などのようなものはサイトトップの共通ヘッダに入れる事でケアしようという設計でした。

docusaurus 的なものでチュートリアル全体/ページ内のナビゲーションを改善するのは (ドメイン移転の作業先として止まってしまってますが) サイトのシステム変更とか構成変更で過去にも何度か議論してましたがそういう話とは別ですか？

[dynamis]

個人的にはいまのチュートリアルサイトで教えるときにやりにくいと思っているのは

• 自分が使ってるデバイスのための情報だけが欲しい
  • pi3+ (browser) と pizero (node) で実装が違うのにサイト内で混在しており初めてさんに分かりにくい
• 足りない情報がある
  • pi3+ と pizero (あるいは microbit) などの一部のデバイス向けだけに用意されている情報がある
• 頻繁にアクセスするページ/ツールへのリンク集的なものが (特にpizero) ない
  • hellorealworld、デバイスリスト、exmaples、serial console、i2cdetect コマンドの使い方、端末間連携 (IoT編)、常駐化 ... あたりはチュートリアルを流すのと関係なくさっと試すとき/継続的に使う時に必要だからそれらが存在することに気付くように/辿りやすくしたい
• デバイス毎の情報が分散している
  • partslist に書いている情報と pi3+ 専用の example に書いている情報が分散している
• その他細かな問題
  • リンク切れ、コードの不統一、レイアウトやスマホ対応不足、パーツの説明不足(写真が違う/i2cアドレスが違う、配線が違う/足りない)、ドライバの説明/機能不足

これは多分、Pizero 配下のページだけ直せば済むもの、ページ分割と共にサイトのヘッダやサイドバー(サイドメニュー)などの導入/更新でできるもの、複数デバイス共通ページの再整理まで必要なものと別れるというイメージですが、どの辺りを解消するためにどうやるのかというイメージが分かる形で説明なりラフスケッチなりプレビューなり見られると嬉しいです。

[kou029w]

本Issueではチュートリアル全体 (#75) の改修とは分けて、pi zero チュートリアルページの改修を想定します。
具体的には、/pizero/ 配下を部分的に mdBook https://github.com/rust-lang/mdBook で、あるいは Docusaurus で書き出す、部分的でインクリメンタルなリリースを考えています。

Pizero 配下のページでは以下が課題という認識です:

• 頻繁にアクセスするページ/ツールへのリンク集的なものが (特にpizero) ない

どうやるのかというイメージとしては @Aritaka-hub としてはこのように分割して、目次が共に左右に折りたたみで表示できるようにしていく、という想定です (分割した Markdown のコードがオンライン上に見当たらなかったのでお手数ですが後で共有してもらえれば > @Aritaka-hub):

• 1. 概要
  • 1.1. CHIRIMEN について
    • 1.1.1. CHIRIMEN コミュニティ
  • 1.2. Raspberry Pi について
  • 1.3. JavaScript の基礎
  • 1.4. 良く使う情報へのリンク
• 2. 機材準備と Wi-Fi への接続
  • 2.1. ステップ0（機材準備）
  • 2.2. ステップ1（ターミナル接続）
    • 2.2.1. Note. CLI操作について
    • 2.2.2. Note. pi4 の利用方法
  • 2.3. ステップ2（Wi-Fi設定）
• 3. Hello Real World（Lチカを実行する）
  • 3.1. 配線
  • 3.2. プログラムを書く
  • 3.3. 実行する
  • 3.4. コードを読む
• 4. GPIOを試す
  • 4.1. GPIOを理解する
  • 4.2. GPIOを出力
  • 4.3. GPIOを入力（onchange）
    • 4.3.1. onchange コードを読む
  • 4.4. GPIOを入力（ポーリング）
    • 4.4.1. ポーリングコードを読む
  • 4.5. GPIOセンサーを複数同時に使う
    • 4.5.1. Lチカのコードを書き換える
• 5. I2Cデバイスを試す
  • 5.1. I2Cを理解する
  • 5.2. SHT30編
    • 5.2.1. I2Cセンサー(SHT30)の認識を確認する
    • 5.2.2. SHT30 のコード取得と実行
    • 5.2.3. SHT30 のコードを読む
    • 5.2.4. SHT30 のコードの詳細解説
  • 5.3. ADT7410編
  • 5.4. GPIO と I2Cセンサーを組み合わせる
• 6. IoTを試す
  • 6.1. 遠隔LEDコントロール
  • 6.2. PiZero サンプルコードの実行
  • 6.3. PC サンプルコードの実行
  • 6.4. 自分専用チャンネルで制御
  • 6.5. PiZero 側のコードを読む
  • 6.6. PC 側のコードを読む
• 7. 常駐プログラム化する
• 8. 他のいろいろなデバイスを試してみる
  • 8.1. 応用センサーキットの使い方
    • 8.1.1. 単体で動作確認できるセンサー
    • 8.1.2. 人感センサー
    • 8.1.3. Neopixel LED
    • 8.1.4. アナログセンサー
    • 8.1.5. サーボモーター
    • 8.1.6. DCモーター（MX1508利用）
    • 8.1.7. DCモーター（PWM駆動）
    • 8.1.8. RaspberryPi のカメラの注意点
• 9. 付録(予備知識)
  • 9.1. CHIRIMEN ブラウザー版との差異
  • 9.2. CHIRIMEN環境の任意のディレクトリへのセットアップ
• 10. 共通資料集
  • 10.1. CHIRIMEN
  • 10.2. ハードウェア・デバイス
    • 10.2.1. LED
    • 10.2.2. ブレッドボード
    • 10.2.3. 抵抗値の読み方
    • 10.2.4. MOSFETによる大電力制御
  • 10.3. JavaScript
    • 10.3.1. JavaScriptコード・ライブラリの読み込み
    • 10.3.2. 非同期処理
  • 10.4. GPIO
    • 10.4.1. GPIOポートの初期化と出力処理
    • 10.4.2. GPIOPortの入力処理（onchange）
    • 10.4.3. GPIOPortの入力処理（ポーリング）
  • 10.5. I2C
    • 10.5.1. 各種ボードの I2C端子について
    • 10.5.2. I2Cの詳細情報とポイント
    • 10.5.3. WebI2C とデバイスドライバ
  • 10.6. IoT
    • 10.6.1. webSocketとpub/sub services
    • 10.6.2. relayService
    • 10.6.3. リアルタイム性
    • 10.6.4. relayServer.js
    • 10.6.5. プログラムの流れ
    • 10.6.6. セキュリティ
    • 10.6.7. Node.jsでの利用
    • 10.6.8. Webhooks
    • 10.6.9. IoTクラウドサービス

https://aritaka-hub.github.io/kataria.github.io/pizero/book/

追記: プレビュー https://mdbook.www-chirimen-org.pages.dev/pizero/

[gurezo]

@kou029w
横から失礼します。
電子書籍の構成をこちらにコメントさせて頂きます。
参考になれば、幸いです。

[Aritaka-hub]

@kou029w コメントありがとうございました。
マークダウンのコードですが GitHub にアップ出来ていませんでした。

https://github.com/Aritaka-hub/kataria.github.io/tree/main/docs/pizero/src
こちらに一式アップ出来ました。色々不慣れですみません。

現在のチュートリアルで、特に遠隔講義を行う時にサイトのどこが分からないかを共有しやすくする目的で分割を行っています。また CHIRIMEN Generic の内容も統合して情報集約を行い初学者にも読みやすくなればと思い構成してみました。
まだ情報量の精査など十分ではないかもですが、方向性の共有が出来れば幸いです。

@gurezo 情報共有ありがとうございます、こちらも作業の参考にさせて頂きます。

[kou029w]

@gurezo 構成参考にさせていただきます! ありがとうございます!
@Aritaka-hub も共有ありがとうございます!

現状としては

• プレビュー https://mdbook.www-chirimen-org.pages.dev/pizero/ を閲覧可能
• ブランチ mdbook https://github.com/chirimen-oh/chirimen.org/tree/mdbook にコードを配置済み (これをmasterブランチに取り込めば chirimen.org には反映可能な状態)

です
このあとマージしてみます
お手数おかけしますが問題無さそうかどうか https://tutorial.chirimen.org/pizero/ をご確認ください〜 > 皆様