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