フォーラムにアドインのVerticalTimelineの事を少し書いたのですが
GitHub - thomasa88/VerticalTimeline: Vertical Timeline for Fusion 360
ちょっと気が付きました。
念のため試したい方は、あそこからzipをDLしただけじゃダメです。
”thomasa88lib” フォルダが空っぽなので、こちらもDLして
ファイルをコピペする必要があります。
GitHub - thomasa88/fusion360-thomasa88lib: Library of functions for Fusion 360 Python scripts and add-ins
こんな感じで表示されるのですが
このパレット上でコンテキストメニューを表示させると
Chromiumのdevtoolsっぽく感じるんですが、Chromiumなのかな？
アドインが表示させている土台はこのオブジェクトです。
Fusion 360 Help
モチベーションダダ下がり中のあの技術も利用出来そうな
気がしてきた。
タイトル異なりますが、こちらの続きです。
electron-react-boilerplate5 - C#ATIA
段々初歩的な部分に戻ってる。(色々と吹っ飛ばしたので混乱中)
こちらをelectronで、と思っているのですが実質コピペで済みます。
コンポーネントと props – React
こちら関数コンポーネントなのですが、クラスコンポーネントに
した時がイマイチ分かっていないです。
正しいのかどうかも分からないのですが、とりあえずクラスコンポーネントに
したものがこちらです。
// App.tsx typescript import React from 'react'; import { BrowserRouter as Router} from 'react-router-dom'; export default function App() { class Welcome extends React.Component{ render(){ return <h1>Hello, {this.props.name}</h1>; } } return ( <Router> <Welcome name="Sara" /> <Welcome name="Cahal" /> <Welcome name="Edite" /> </Router> ); }
無事表示はされます。が、よく見ると "name" が静的なエラーです。
あちらのサンプルはjavascriptのようです。
内容的には、typescript的に型の指定ないよ って事の様です。
まぁ指定していませんからね。
動けば良いような気もしますが、ビルドでクリアするのか
よくわからないですし、そもそも精神衛生上解消しておきたいです。
念のため、関数コンポーネントの場合、雑な対応ですが
anyでＯＫでした。
探したところ、こちらに答えが有りました。
React with typescript入門-Reactの型定義- - Qiita
そんな所で型を指定するのか・・・理解しがたい。
で直すとこんな感じでした。
// App.tsx typescript import React from 'react'; import { BrowserRouter as Router} from 'react-router-dom'; export default function App() { class Welcome extends React.Component<Props> { render(){ return <h1>Hello, {this.props.name}</h1>; } } type Props = { name?: string } return ( <Router> <Welcome name="Sara" /> <Welcome name="Cahal" /> <Welcome name="Edite" /> </Router> ); }
typeを作って、スーパークラス名の横に書くとエラー解消。
表示される結果には変化なしです。 やっぱり理解しがたい・・・。
こちらの続きです。
electron-react-boilerplate4 - C#ATIA
相変わらず、ほぼコピペ。
こちらをお借りしました。
第2回 2020年版 ReactのMaterial UI V4の使い方について - Qiita
App.tsxは、こんな感じです。
// App.tsx typescript import React from 'react'; import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; import CssBaseline from '@material-ui/core/CssBaseline'; import green from '@material-ui/core/colors/green'; // 独自に作成したコンポーネントのインポート import MainContent from './MainContent'; import MyAppBar from './MyAppBar'; // 独自のテーマを作成する const theme = createMuiTheme({ palette: { type: 'dark', // ダークテーマ primary: green, }, typography: { fontFamily: ['Noto Sans', 'sans-serif'].join(','), fontSize: 12, h1: { fontSize: '1.75rem', }, h2: { fontSize: '1.5rem', }, h3: { fontSize: '1.25rem', }, h4: { fontSize: '1.125rem', }, h5: { fontSize: '1rem', }, h6: { fontSize: '1rem', }, }, }); const Hello = () => { return ( <MuiThemeProvider theme={theme}> <CssBaseline /> <MyAppBar /> <MainContent /> </MuiThemeProvider> ); }; export default function App() { return ( <Router> <Switch> <Route path="/" component={Hello} /> </Switch> </Router> ); }
MyAppBar.tsxとMainContent.tsxについては、参考のままです。
未だに良くわかっていないのですが、
<Route path="/" component={Hello} />
この形で渡さないとダメっぽいのは薄々感じてきました。
他にも
・コンポーネント毎にファイルの分割方法
・作ったコンポーネントは、タグっぽい使い方をする？
・テーマの使い方
・CSSはダブルとエラーになる？
と言う解釈をしつつあります。正しいのかな？
こちらの続きです。
electron-react-boilerplate3 - C#ATIA
牛歩。
将来的に欲しいと思うものの一つが、項目をD&Dで並び替え出来る機能。
探してみるとこちらがありました。
Material-UI で並べ替え可能なリストを作る - Qiita
連日コピペばかりなのですが、こちらのreact-smooth-dndのものを
electron-react-boilerplate + Material-UI
で機能するようにしてみました。
（そのままでは動作しない為、少し修正はしています。）
まず、array-moveが不足していたので、
yarn add array-move
後に、App.tsxを以下に書き換えました。
// App.tsx typescript import React, { useState } from 'react'; import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; import { Container, Draggable } from 'react-smooth-dnd'; import arrayMove from 'array-move'; import List from '@material-ui/core/List'; import ListItem from '@material-ui/core/ListItem'; import ListItemIcon from '@material-ui/core/ListItemIcon'; import ListItemText from '@material-ui/core/ListItemText'; import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; import DragHandleIcon from '@material-ui/icons/DragHandle'; const Hello = () => { const [items, setItems] = useState([ { id: '1', text: 'Item 1' }, { id: '2', text: 'Item 2' }, { id: '3', text: 'Item 3' }, { id: '4', text: 'Item 4' }, ]); const onDrop = ({ removedIndex, addedIndex, }: { removedIndex: any; addedIndex: any; }) => { setItems((items) => arrayMove(items, removedIndex, addedIndex)); }; return ( <List> <Container dragHandleSelector=".drag-handle" lockAxis="y" onDrop={onDrop}> {items.map(({ id, text }) => ( <Draggable key={id}> <ListItem> <ListItemText primary={text} /> <ListItemSecondaryAction> <ListItemIcon className="drag-handle"> <DragHandleIcon /> </ListItemIcon> </ListItemSecondaryAction> </ListItem> </Draggable> ))} </Container> </List> ); }; export default function App() { return ( <Router> <Switch> <Route path="/" component={Hello} /> </Switch> </Router> ); }
こんな感じになりました。ってD&Dの動作は動画じゃないと
分からないですよね。
こちらの続きです。
electron-react-boilerplate2 - C#ATIA
自宅だと非力PC+極細回線なので、インストールばかり待たされて、
ちっとも進みません。
お手軽にそれなりの見た目を手に入れたいため、Bootstrapと迷いましたが、
取りあえずMaterial-UIで進めたいと考えています。
Material-UI: A popular React UI framework
一番の理由は、こちらの説明が助かりまくったからです。
React入門 ～Material UI編～
すごいなぁ、こんなのがFreeで提供されているなんて。製造業じゃ考えられん。
取りあえずインストールです。
yarn add @material-ui/core yarn add @material-ui/icons
アイコンも入れました。
ひたすらコピペしまくった末、こんなのが出来ました。
ゴール前でたどり着けるかな・・・。
こちらの続きです。
electron-react-boilerplate1 - C#ATIA
前回パッケジングでのエラーの解消方法が分からなかったのですが、
やっと解決しました。
素の状態でこちらを実行。
yarn package
こちらのエラーが出ます。
”rm -rf” コマンドを調べるとLinuxのコマンドなんですね。
package.jsonの "package" を見るとこんな感じです。
・・・
"scripts": {
"build": "concurrently \"yarn build:main\" \"yarn build:renderer\"",
"build:main": "cross-env NODE_ENV=production webpack --config ./.erb/configs/webpack.config.main.prod.babel.js",
"build:renderer": "cross-env NODE_ENV=production webpack --config ./.erb/configs/webpack.config.renderer.prod.babel.js",
"rebuild": "electron-rebuild --parallel --types prod,dev,optional --module-dir src",
"lint": "cross-env NODE_ENV=development eslint . --cache --ext .js,.jsx,.ts,.tsx",
"package": "rm -rf src/dist && yarn build && electron-builder build --publish never",
・・・LinuxコマンドをWinで利用出来るようにする方法もあるようですが、
高々ビルドの為だけに、大掛かりな事をするのも気が重い。
処理内容的には "src/dist" フォルダの削除だけのようなので、winで同等の処理
させる様に修正しました。
・・・
"package": "rd /s /q src\\dist && yarn build && electron-builder build --publish never",
・・・これでビルド出来るようになりました。
やっとスタートラインに立てた！
ん？よく見るとTypeScriptなのかな？
electron + react でお手軽にやりたい場合、今はこちらがイケているらしい。
GitHub - electron-react-boilerplate/electron-react-boilerplate: A Foundation for Scalable Cross-Platform Apps
まだ、スタートすら出来ていないけど苦労した。
環境を何処まで書けば良いものか分からないけど・・・
・win10 pro
・node.js v14.16.0
・npm v7.5.4
・yarn v1.22.10
・electron-react-boilerplate v2.2.0
ドキュメントの記載コマンドがyarnなので、主にyarnで行うっぽい。
〇node.js
インストールされていたものがちょっと古かった。
updateしたかったのですが、winの場合はnpmからのupdateが出来ないらしい。
winアプリ的な方法で、アンインストールし最新をインストールするしかない様です。
Node.js
〇yarnに苦しむ
yarnのインストールはグローバルで良いみたい。
npm install -g yarn
確認用のこちらが受け付けてくれない。
yarn -v
こちらは受け付けてくれるのですが、後に上手く行かない事が分かりました。
npx yarn -v
その為、意地でもパスを通す必要に迫られました。
こちらの方法が参考になりました。
qiita.com
パスを通したにも関わらず受け付けてくれない。
悩んだ末、パスを通した後にPCを再起動する事で無事yarnが利用出来るようになりました。
（PCの再起動は普通なんですかね？）
〇electron-react-boilerplateクローン
guithubに記載されている通りで、問題ありませんでした。
git clone --depth 1 --single-branch https://github.com/electron-react-boilerplate/electron-react-boilerplate.git your-project-name cd your-project-name yarn
〇起動
こちらもguithubに記載されている通りで、問題ありませんでした。
yarn start
※自宅ではエラーとなりました。色々と調べたのですが原因分らず。再度yarnでOKになりました。
〇パッケジング
electron-builderをインストールしていなかったのでインストール。
こちらを参考にしましたが、ローカルでは無くグローバルにするためこの様にしました。
Electron アプリの配布パッケージを作る (electron-builder)｜まくろぐ
yarn add electron-builder
yarnでローカルにインストールされていました。
guithubに記載されている通りこちらを実行しましたがエラーです。 <-今ここ
yarn package
electron-react-boilerplateの前に、こちらに挑みましたが
どうしてもパッケジングのエラーが解消されないため断念。
ビルドは成功したけど、アプリとして起動した際エラー。
パッケージ不足が原因だとはわかるけど、対処方法がわからず断念。
create-electron-react - npm
そもそも開発が止まり、仕様が古いので・・・。
C#をやっていた頃、"C#のメリットはVisual Studioのインストールだけで環境が整う事"
と書かれていたのですが、最近はこの言葉に納得。・・・苦しい。
