トマシープが学ぶ

Unity/VR/AR/デザイン好きのミーハー 記事内容は自分用のメモです

React+AntDesignでUI実装①

UIKitはAntDesignを使うことにした。Figmaで一通りAntDesignのFigmaのパーツを使いつつデザインした。

bibinbaleo.hatenablog.com

別途ReactのUdemyは受けているが、なんとなくReactでのAntDesignの使い方がわかったので軽く実装も並走しながらやっていく

bibinbaleo.hatenablog.com

 

流れ

Figmaのデザインをコードに反映させる手順ってみんなどうやってるんだろう。

Unityでは一つ一つ丁寧に手動で反映していた。一応自動ツールもあるがまだ実践では使ってない。

ReactとかUIKitを使ったものでも同じ状況なのだろうか?自動生成のツールもあるがまだ実践では微妙って感じか?

zenn.dev

今回は自分でデザインも実装もするので、UIKitのどのコンポーネントを使ったか、あるいは使わずオリジナルで実装したかとかわかっているので、AntDesignのドキュメントを参照しつつコードをコピペしていく

TypeScriptのほうをコピペしたらうまくいく

準備

事前にパッケージを入れておく

yarn add antd

https://ant.design/docs/react/introduce

Floatボタン・アイコン・tooltip

3つのFloatButtonに対して、各種アイコンとtooltip表示をする

ant.design

アイコン

ant.design

tooltip

ant.design

アイコンはAntDesignのだけじゃ足りなかったので、MaterialDesignのも使った。しかもMaterialDesignってなんかいろいろ種類ある・・・?

VRのアイコンがこのページにはない。ARはあった。このページはReact用なのでアイコンやPackageインストールなどのコードがコピペできる

mui.com

VRのほうはGoogleフォントのMaterial Symbolsという新しいものにしかなかった。

fonts.google.com

Google Fontsはいったん置いておいて、ant designとmaterialdesignのアイコンだけを使ってやってみた

import { FloatButton } from 'antd';
import { FundOutlined, DesktopOutlined } from '@ant-design/icons';
import ViewInArOutlinedIcon from '@mui/icons-material/ViewInArOutlined';

~~

          <FloatButton.Group shape="circle" style={{ right: 24 }}>
          <Tooltip placement="left" title="XXX">
          <FloatButton icon={<FundOutlined/>} />
          </Tooltip>
          <Tooltip placement="left" title="PCで見る">
          <FloatButton icon={<DesktopOutlined/>} />
          </Tooltip>
            <Tooltip placement="left" title="ARで見る">
            <FloatButton icon={<ViewInArOutlinedIcon/>} />
            </Tooltip>
          </FloatButton.Group>

MaterialDesignのアイコン、そのままだと真ん中に入らないな~

これとか使うのか??

www.npmjs.com

FloatButtonをToggleみたいにする

マイクオンオフみたいなのできるかな?ドキュメントには見当たらなかったけど

Colipotに聞いたらできた

            import { FloatButton } from 'antd';
            import { useState } from 'react'; // Import useState hook
import { AudioOutlined, AudioMutedOutlined } from '@ant-design/icons';

            export const MicToggle: React.FC = () => {
                const [isMuted, setIsMuted] = useState(false); // Add state for mute/unmute

                const handleToggle = () => {
                    setIsMuted(!isMuted); // Toggle the mute state
                };

                return (
                    <FloatButton
                        shape='circle'
                        type={isMuted ? 'default' : 'primary'} // Change the button type based on the mute state
                        style={{
                            left: '50%', // Left position 50%
                            transform: 'translateX(-50%)', // Center alignment
                            backgroundColor: isMuted ? '#f0f0f0' : undefined, // Change the background color based on the mute state
                        }}
                        icon={isMuted ? <AudioMutedOutlined /> : <AudioOutlined />} // Change the icon based on the mute state
                        onClick={handleToggle} // Add onClick event handler
                    />
                );
            };

横長ボタン

Mobileのほうのコンポーネントにあった横長のボタン

Mobileは別パッケージなのか

Quick Start - Ant Design Mobile

両方のButtonを使ったら怒られた

mobile.ant.design

ダイアログ

mobile.ant.design

デフォルトだとOKとかが中国語になる?一応OKとかの項目を独自の文字にするコードはあったけど、そもそもデフォルトを変えたい

この記事に書いてある/src/index.jsとか見当たらない

qiita.com

それっぽいファイルにも書いてないし、書き込んでも変わらない

 

こっちの記事もやったが変わらない

qiita.com

Avatar

ant.design

mobile.ant.design

            {/* アバター */}
            <div style={{ position: 'relative' }}>
                <Avatar
                    style={{
                        zIndex: 1,
                        position: 'absolute',
                        top: '24px', // 上から10%の位置
                        right: '24px', // 右から10%の位置
                    }}
                    icon={<UserOutlined />}
                />
            </div>

カード

ant.design

使いたいのと完全に同じデザインはないので、このデザインのいらない部分を消して使った

 

            <Card style={{ width: 300 }}>
                <Meta avatar={<Avatar src='https://api.dicebear.com/7.x/miniavs/svg?seed=8' />}
title='Test1'
description='xxxx' />
            </Card>

 

Grid(うまくいかない)

コンポーネント化したCardをGrid状に表示するスクリプトをcopilotに書いてもらった。

これが理想形

なのだが、同じCardGridコンポーネントを呼び出しているのに、別のページではこんな感じでマージンが固定されない

なんで

Progress Bar

ant.design

<Progress percent={50} status='active' strokeColor={{ from: '#108ee9', to: '#87d068' }} />

Selector

mobile.ant.design

InputField

これもモバイル用とPC用両方ある・・・PC用のほうがよさそう

ant.design

mobile.ant.design

これもスマホ用のNavBarを使うか、PC向けのHeaderを使うかムズイ。あとPC向けのHeaderがFigmaにあったデータがドキュメントにない。

pro-componentというのに移動されたらしい;;

ant.design

NavBarだとこれを使いたいけど、実際使ってPCで表示すると副題とタイトルが同じサイズで表示されて見栄えが悪い・・・

 

日本語フォント

GoogleFontのWebの情報をreact風に書くといいみたい

qiita.com

記事とはちょっとUI変わってた

https://fonts.google.com/selection/embed

拡張機能

VSCodeにいろいろ拡張機能入れた

qiita.com

VSCodeの拡張機能を入れたり有効化したらここにエラーが出る

ChatGPTに聞いた

このエラーメッセージは、ESLint が tsconfig.json ファイルを読み込めないことを示しています。tsconfig.json は TypeScript のプロジェクト設定ファイルで、TypeScript を使用するプロジェクトには必須です。このエラーが発生する原因として考えられるいくつかの点は以下の通りです。

ESLiteを消した

 

あとコード整形も働かない

qiita.com

Editor:Default FormatterをPrettier - Code formatterにしたら使えるようになった。

リアルタイムプレビュー(うまくいかない)

毎度yarn storybookをするのがめんどくさい。

VSCodeで見れるようにしたい

dev.classmethod.jp

↑の記事の拡張機能は非推奨で、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.

 

その他

zenn.dev