UIKitはAntDesignを使うことにした。Figmaで一通りAntDesignのFigmaのパーツを使いつつデザインした。
別途ReactのUdemyは受けているが、なんとなくReactでのAntDesignの使い方がわかったので軽く実装も並走しながらやっていく
- 流れ
- 準備
- Floatボタン・アイコン・tooltip
- FloatButtonをToggleみたいにする
- 横長ボタン
- ダイアログ
- Avatar
- カード
- Grid(うまくいかない)
- Progress Bar
- Selector
- InputField
- Navbar/PageHeader
- 日本語フォント
- 拡張機能
- リアルタイムプレビュー(うまくいかない)
- その他
流れ
Figmaのデザインをコードに反映させる手順ってみんなどうやってるんだろう。
Unityでは一つ一つ丁寧に手動で反映していた。一応自動ツールもあるがまだ実践では使ってない。
ReactとかUIKitを使ったものでも同じ状況なのだろうか?自動生成のツールもあるがまだ実践では微妙って感じか?
今回は自分でデザインも実装もするので、UIKitのどのコンポーネントを使ったか、あるいは使わずオリジナルで実装したかとかわかっているので、AntDesignのドキュメントを参照しつつコードをコピペしていく
TypeScriptのほうをコピペしたらうまくいく
準備
事前にパッケージを入れておく
yarn add antd
https://ant.design/docs/react/introduce
Floatボタン・アイコン・tooltip
3つのFloatButtonに対して、各種アイコンとtooltip表示をする
アイコン
tooltip
アイコンはAntDesignのだけじゃ足りなかったので、MaterialDesignのも使った。しかもMaterialDesignってなんかいろいろ種類ある・・・?
VRのアイコンがこのページにはない。ARはあった。このページはReact用なのでアイコンやPackageインストールなどのコードがコピペできる
VRのほうはGoogleフォントのMaterial Symbolsという新しいものにしかなかった。
Google Fontsはいったん置いておいて、ant designとmaterialdesignのアイコンだけを使ってやってみた
~~
MaterialDesignのアイコン、そのままだと真ん中に入らないな~
これとか使うのか??
FloatButtonをToggleみたいにする
マイクオンオフみたいなのできるかな?ドキュメントには見当たらなかったけど
Colipotに聞いたらできた
横長ボタン
Mobileのほうのコンポーネントにあった横長のボタン
Mobileは別パッケージなのか
Quick Start - Ant Design Mobile
両方のButtonを使ったら怒られた
ダイアログ
デフォルトだとOKとかが中国語になる?一応OKとかの項目を独自の文字にするコードはあったけど、そもそもデフォルトを変えたい
この記事に書いてある/src/index.jsとか見当たらない
それっぽいファイルにも書いてないし、書き込んでも変わらない
こっちの記事もやったが変わらない
Avatar
カード
使いたいのと完全に同じデザインはないので、このデザインのいらない部分を消して使った
Grid(うまくいかない)
コンポーネント化したCardをGrid状に表示するスクリプトをcopilotに書いてもらった。
これが理想形
なのだが、同じCardGridコンポーネントを呼び出しているのに、別のページではこんな感じでマージンが固定されない
なんで
Progress Bar
<Progress percent={50} status='active' strokeColor={{ from: '#108ee9', to: '#87d068' }} />
Selector
InputField
これもモバイル用とPC用両方ある・・・PC用のほうがよさそう
Navbar/PageHeader
これもスマホ用のNavBarを使うか、PC向けのHeaderを使うかムズイ。あとPC向けのHeaderがFigmaにあったデータがドキュメントにない。
pro-componentというのに移動されたらしい;;
NavBarだとこれを使いたいけど、実際使ってPCで表示すると副題とタイトルが同じサイズで表示されて見栄えが悪い・・・
日本語フォント
GoogleFontのWebの情報をreact風に書くといいみたい
記事とはちょっとUI変わってた
https://fonts.google.com/selection/embed
拡張機能
VSCodeにいろいろ拡張機能入れた
VSCodeの拡張機能を入れたり有効化したらここにエラーが出る
ChatGPTに聞いた
このエラーメッセージは、ESLint が tsconfig.json ファイルを読み込めないことを示しています。tsconfig.json は TypeScript のプロジェクト設定ファイルで、TypeScript を使用するプロジェクトには必須です。このエラーが発生する原因として考えられるいくつかの点は以下の通りです。
ESLiteを消した
あとコード整形も働かない
Editor:Default FormatterをPrettier - Code formatterにしたら使えるようになった。
リアルタイムプレビュー(うまくいかない)
毎度yarn storybookをするのがめんどくさい。
VSCodeで見れるようにしたい
↑の記事の拡張機能は非推奨で、Preview.jsを代わりに使えと出たので入れた。
そしたらエラーが出てた。
Preview.js needs NodeJS 18+ but running `node` failed with exit code 1.
Is it installed? You may need to restart your IDE.
Preview.js daemon could not be started.