Misskey連載第7回: MisskeyのUI設計

概要

「Misskey連載第6回: MisskeyにおけるVueのComposition APIの活用 | GNU social JP」に続いて、gihyo.jpのMisskey連載が公開されたので紹介します。

2023-10-24 Tueに「MisskeyのUI設計 | gihyo.jp」と以下の投稿群で告知されました。

MisskeyのUI設計についての紹介https://t.co/fOnmPUrXfk

— しゅいろ (@syuilo) October 24, 2023

2023-10-24T01:35:04.000Z

k_taka‮?‭|k_taka@mstdn.jp

今回のMisskey & Webテクノロジー最前線は「MisskeyのUI設計」。執筆は @syuilo さんです。 今回はMisskeyのWebクライアント（Misskey Web）におけるUIデザインの工夫や各種コンポーネントについて紹介しています。キャプチャー画像がいっぱいなので、Misskeyの雰囲気がわかりやすいかもしれません。https://gihyo.jp/article/2023/10/misskey-07

Misskeyのフロントエンドのコンポーネントの紹介です。画面キャプチャーが多いです。

内容

MisskeyのWebクライアント (Misskey Web) でのUIデザインの工夫と各種コンポーネントの紹介です。

基本設計思想として、「デスクトップとモバイルで同じように使えるようにする」があります。ただ、初期はデスクトップとモバイル向けのWebアプリを別々に使っていました。その後、コンポーネントを共通化できないデメリットが多くて、共通にしました。

具体的に個々のUIコンポーネントの一部の以下を紹介していました。

• パネル
• ボタン
• フォルダ
• ツールチップ
• ポップアップメニュー
• セレクトボックス
• テキストボックス
• ダイアログ
• ウィンドウ
• 設定メニュー
• タブ

UIコンポーネントの他に以下も紹介していました。

• 論理コンポーネント
• テーマ
• ウィジェット
• Storybook

これらを駆使してレスポンシブ対応、アクセシビリティ、ダークモードなど考慮して実装しているそうです。

結論

MisskeyのUI設計でした。UIコンポーネントとその簡単な紹介という感じで、画像が多いので縦に長いですが、個人的にはあまり参考になることはなかったです。

これらをJavaScriptなしでどうやって実装するのか？という点に興味があります。このあたりは実際にGNU socialの開発時に試行錯誤することになりそうです。