Electron Forgeã§Reactを使ã†ãŸã‚ã®åŸºç¤Žã¥ãã‚Š - Qiita
Info ã“ã®è¨˜äº‹ã¯2023/02/25ç¾åœ¨ã®ã‚‚ã®ã§ã™ã€‚ãƒãƒ¼ã‚¸ãƒ§ãƒ³å¤‰æ›´ã«ã‚ˆã‚Šæ–¹æ³•ãŒå¤‰ã‚ã‚‹ã“ã¨ãŒã‚ã‚Šã¾ã™ã€‚ ã¯ã˜ã‚ã« Electronã¨ã¯ Electronã¯Webサイトã®è¨€èªžï¼ˆJavaScriptã€CSSã€HTML）を利用ã—ã¦ã€ãƒžãƒ«ãƒãƒ—ラットフォームアプリを開発ã™ã‚‹ã“ã¨ãŒã§ãるフレームワークã§ã™ã€‚JavaScriptã®çŸ¥è˜ã•ãˆã‚ã‚Œã°ã€C++ã‚„C#ãªã©ã§ä½œã‚‹ãƒã‚¤ãƒ†ã‚£ãƒ–アプリã®çŸ¥è˜ãŒãªãã¦ã‚‚ã€ç°¡å˜ã«ãƒ‡ã‚¹ã‚¯ãƒˆãƒƒãƒ—アプリを作るã“ã¨ãŒã§ãã¾ã™ã€‚ Electron Forgeã¨ã¯ Electron Forgeã¯Electonアプリケーションをパッケージ化・é…布ã™ã‚‹ãŸã‚ã®ã‚ªãƒ¼ãƒ«ã‚¤ãƒ³ãƒ¯ãƒ³ãƒ„ールã§ã€ã‚³ãƒ¼ãƒ‰ç½²åãªã©ã¨ã„ã£ãŸãƒ“ルド処ç†ã‚’ã¾ã¨ã‚ã¦ãã‚Œã¾ã™ã€‚ Electron Forgeã®ãƒ†ãƒ³ãƒ—レートを作る Electron Forgeã®ãƒ†ãƒ³ãƒ—レートを作りã¾ã™ã€‚ Webpackã¨TypeScriptã«å¯¾å¿œã•ã›ã‚‹ãŸã‚
Electron+React+TypeScriptã®ç’°å¢ƒæ§‹ç¯‰ - Qiita
ã¯ã˜ã‚ã« create-react-app(TypeScript)ã§ç”Ÿæˆã—ãŸãƒ—ãƒã‚¸ã‚§ã‚¯ãƒˆã‚’Electron上ã§å‹•ä½œ/パッケージ化ã§ãる環境を構築ã—ã¾ã™ã€‚ å‰ææ¡ä»¶ yarnコマンドãŒä½¿ç”¨ã§ãã‚‹ã“㨠ã“ã®è¨˜äº‹ã§ã§ãã‚‹ã“㨠Electron上ã§Reactã®ãƒšãƒ¼ã‚¸ã®è¡¨ç¤º/パッケージ化 メインプãƒã‚»ã‚¹ã¨ãƒ¬ãƒ³ãƒ€ãƒ©ãƒ¼ãƒ—ãƒã‚»ã‚¹ã®æŽ¥ç¶š create-react-appã®ã‚¤ãƒ³ã‚¹ãƒˆãƒ¼ãƒ«ã¨ãƒ—ãƒã‚¸ã‚§ã‚¯ãƒˆã®ç”Ÿæˆ $ yarn global add create-react-app $ yarn create react-app <プãƒã‚¸ã‚§ã‚¯ãƒˆå> --template typescript
Electron + TypeScript + React ã®ç’°å¢ƒæ§‹ç¯‰æ‰‹é †ã®ãƒ¡ãƒ¢ - 盆暗ã®å¦ç¿’記録
Web開発ã®çŸ¥è˜ã‚’ãã®ã¾ã¾ãƒ‡ã‚¹ã‚¯ãƒˆãƒƒãƒ—アプリ開発ã«ä½¿ãˆã‚‹ã¨ã„ã†ã“ã¨ã§ã€ElectronãŒé¢ç™½ãã†ã ãªï½žã¨æ€ã£ã¦ã„ã¾ã™ã€‚ jsã«æ…£ã‚Œã¦ã„ã‚‹æ–¹ã§ã‚ã‚Œã°ç’°å¢ƒæ§‹ç¯‰ã«æ‚©ã‚€ã“ã¨ã¯ãªã•ãã†ã§ã™ãŒã€ç†è€…ã¯Reactã‚‚Electronã‚‚åˆå¿ƒè€…ãªã®ã§ç’°å¢ƒæ§‹ç¯‰ã®æ‰‹é †ã‚’メモã—ã¦ãŠãã¾ã™ 環境 OS: Windows 10 Home / 21H2 / 19044.2604 Node.js: v19.7.0 æ‰‹é † 1. Webpack + Typescriptã®ç’°å¢ƒã‚’作る npm init electron-app@latest my-app -- --template=webpack-typescript ã“ã®çŠ¶æ…‹ã§npm startã™ã‚‹ã¨ã‚¢ãƒ—リã¯ã“ã‚“ãªæ„Ÿã˜ 2. tsconfig.json ã®compilerOptionsã« "jsx": "react-jsx"ã‚’è¿½åŠ ã™ã‚‹ # tsconfig.json { "c
Electron(React+Typescript)
Electronã¨ã¯ GitHubãŒé–‹ç™ºã—ãŸãƒ‡ã‚¹ã‚¯ãƒˆãƒƒãƒ—アプリを作るãŸã‚ã®ãƒ•ãƒ¬ãƒ¼ãƒ ワーク。 HTML,CSS,JSを使ã£ã¦ãƒ‡ã‚¹ã‚¯ãƒˆãƒƒãƒ—アプリを作るã“ã¨ãŒã§ãã‚‹ã®ã§ã€ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰é–‹ç™ºçµŒé¨“者ã¯ã‚る程度容易ã«é–‹ç™ºãŒã§ãる。 Electronã§ä½œã‚‰ã‚ŒãŸä»£è¡¨çš„ãªè£½å“ã¯VSCodeã‚„Slackãªã©ã”å˜çŸ¥ã®ã‚µãƒ¼ãƒ“ス。 仕組㿠Chromiumã¨NodeãŒå†…部的ã«ä½¿ç”¨ã•ã‚Œã¦ãŠã‚Šã€OSã®æä¾›ã™ã‚‹æ©Ÿèƒ½ã«ã¤ã„ã¦ã¯Nodeã§ã‚³ãƒ³ãƒˆãƒãƒ¼ãƒ«ã™ã‚‹ä»•çµ„ã¿ã€‚ アプリ内ã«ã¯ã€Œãƒ¡ã‚¤ãƒ³ãƒ—ãƒã‚»ã‚¹ã€ã¨ã€Œãƒ¬ãƒ³ãƒ€ãƒ©ãƒ¼ãƒ—ãƒã‚»ã‚¹ã€ã®äºŒã¤ã®ãƒ—ãƒã‚»ã‚¹ãŒå˜åœ¨ã—ã€ã€Œãƒ¡ã‚¤ãƒ³ãƒ—ãƒã‚»ã‚¹ã€ã¯OSã¨ã®ã‚„ã‚Šã¨ã‚Šãªã©ã‚’å¸ã‚‹Nodeã«ã‚ˆã£ã¦å‹•ä½œã™ã‚‹éƒ¨åˆ†ã€‚「レンダラプãƒã‚»ã‚¹ã€ã¯å¾“æ¥ã®webアプリã¨åŒã˜ã€‚ 例ãˆã°ã€ã‚¢ãƒ—リ上ã®ãƒ¦ãƒ¼ã‚¶ãƒ¼ã‚¤ãƒ™ãƒ³ãƒˆã«ã‚ˆã£ã¦ãƒãƒ¼ã‚«ãƒ«ã®ãƒ•ã‚¡ã‚¤ãƒ«ã‚’é–‹ããŸã„å ´åˆã€ã€Œãƒ¬ãƒ³ãƒ€ãƒ©ãƒ¼ãƒ—ãƒã‚»ã‚¹ã€ã‹ã‚‰ã€Œãƒ¡ã‚¤ãƒ³ãƒ—ãƒã‚»ã‚¹ã€ã«é€šä¿¡(IPC)ã‚’è¡Œã„ã€ã€Œãƒ¡ã‚¤ãƒ³ãƒ—ãƒã‚»ã‚¹ã€
Setting up a TypeScript Electron app in WebPack
Having spent a few days experimenting with setting up a build process for creating an Electron-based application thought I would put together a post describing the setup. First, a disclaimer that this is still a work in progress and as with everything within the JavaScript world it seems like there are a thousand ways to do it and this is just one way. Secondly, I am by no means an expert and this
Getting Started With Electron in WebStorm | The WebStorm Blog
IDEs CLion DataGrip DataSpell Fleet GoLand IntelliJ IDEA PhpStorm PyCharm RustRover Rider RubyMine WebStorm Plugins & Services Big Data Tools Code With Me Quality Assurance JetBrains Platform Scala Toolbox App Writerside JetBrains AI Grazie Team Tools Datalore Space TeamCity Upsource YouTrack Hub Qodana CodeCanvas .NET & Visual Studio .NET Tools ReSharper C++ Languages & Frameworks Kotlin Ktor MPS
ã¯ã˜ã‚ã¦ã®Socket.io #1 「リアルタイムãªãƒãƒ£ãƒƒãƒˆã‚’作る〠- ãã“ã®è¶³è·¡R
Node.jsã®ã‚ラーソフトã®ä¸€ã¤ã¨ã‚‚言ã‚ã‚Œã¦ä¹…ã—ã„Socket.ioを使ã£ã¦ãƒªã‚¢ãƒ«ã‚¿ã‚¤ãƒ 通信を行ã„ã¾ã™ã€‚コツã•ãˆåˆ†ã‹ã‚Œã°éžå¸¸ã«ç°¡å˜ã«é–‹ç™ºã§ãã¦ã—ã¾ã†ã®ã§ãƒ—ãƒãƒˆã‚¿ã‚¤ãƒ—ã‚„å°è¦æ¨¡ãªãƒ—ãƒã‚¸ã‚§ã‚¯ãƒˆã«ã‚ªã‚¹ã‚¹ãƒ¡ã€‚ 今回ã¯ä»¥ä¸‹ã®å‹•ç”»ã®ã‚ˆã†ã«è¤‡æ•°ã®ã‚¯ãƒ©ã‚¤ã‚¢ãƒ³ãƒˆé–“ã§ãƒªã‚¢ãƒ«ã‚¿ã‚¤ãƒ ã«é€šä¿¡ãŒè¡Œãˆã‚‹ç°¡æ˜“ãƒãƒ£ãƒƒãƒˆã‚’HTML+JavaScriptã§ä½œæˆã—ã¦ã¿ã¾ã™ã€‚ www.youtube.com 基本的ãªè§£èª¬ Socket.ioã¯ä½•ã‚’ã‚„ã£ã¦ã‚‹ã®ï¼Ÿ 制約や注æ„点 P2Pã˜ã‚ƒãƒ€ãƒ¡ãªã®ï¼Ÿ 環境構築 インストール サンプルコード serve.js index.html 実行ã™ã‚‹ サーãƒã‚’èµ·å‹• ブラウザã‹ã‚‰ç¢ºèª サーãƒã‚’終了 解説 大ã¾ã‹ãªåŽŸç† クライアント ライブラリをå–å¾— サーãƒã¸æŽ¥ç¶š Socket.ioサーãƒã¸é€ä¿¡ Socket.ioサーãƒã‹ã‚‰å—ä¿¡ サームクライアントã®æŽ¥ç¶š - connection クライアントã¸ä¸€æ–‰é€
Electronã§ãƒ—ãƒã‚»ã‚¹é–“通信をã™ã‚‹ | Apps Blog | ミツエーリンクス
å‰å›žã¯ã€Electronを使ã£ã¦ä¸€ç•ªç°¡å˜ãªã‚¢ãƒ—リを作ã£ã¦ã¿ã¾ã—ãŸã€‚今回ã¯ã€Node.jsã¨é€£æºã•ã›ã‚‹æ–¹æ³•ã«ã¤ã„ã¦ç´¹ä»‹ã—ã¾ã™ã€‚ メインプãƒã‚»ã‚¹ã¨ãƒ¬ãƒ³ãƒ€ãƒ©ãƒ—ãƒã‚»ã‚¹ Electronã¯ã€èµ·å‹•æ™‚ã«Node.jså´ã§å®Ÿè¡Œã™ã‚‹JavaScriptã¨ã€ãã®Node.jsã‹ã‚‰ç«‹ã¡ä¸Šã’ãŸBrowserWindow（HTML）ã§å®Ÿè¡Œã™ã‚‹JavaScriptã®ã€2ã¤ã®JavaScriptãŒå˜åœ¨ã—ã€ãã‚Œãžã‚Œåˆ¥ã®ãƒ—ãƒã‚»ã‚¹ãŒã‚ã‚Šã¾ã™ã€‚ å‰è€…を「メインプãƒã‚»ã‚¹ã€ã€å¾Œè€…を「レンダラプãƒã‚»ã‚¹ã€ã¨å‘¼ã‚“ã§ã„ã¾ã™ã€‚ レンダラプãƒã‚»ã‚¹ã‹ã‚‰ãƒ¡ã‚¤ãƒ³ãƒ—ãƒã‚»ã‚¹ã¸å¿…è¦ã«å¿œã˜ã¦å‡¦ç†ã‚’ä¾é ¼ã™ã‚‹ã“ã¨ã§ã€ãƒ–ラウザã®JavaScriptã ã‘ã§ã¯ã§ããªã‹ã£ãŸæ§˜ã€…ãªã“ã¨ãŒå®Ÿç¾å¯èƒ½ã«ãªã‚Šã¾ã™ã€‚ ãã—ã¦ã€Electronã§ã¯ãã®ãƒ—ãƒã‚»ã‚¹é–“通信を行ã†ãŸã‚ã®ãƒ¢ã‚¸ãƒ¥ãƒ¼ãƒ«ã¨ã—ã¦ã€ipcモジュールãŒã‚らã‹ã˜ã‚定義ã•ã‚Œã¦ã„ã¾ã™ã€‚ 例ãˆã°ãƒ–ラウザã§å®Ÿè¡Œã•ã‚Œã‚‹JavaScr
Electronã§Socket.ioã‚’å°Žå…¥ã—ã¦ã¿ã‚‹ [テスト編] - Qiita
Electronã§Socket.ioã‚’å°Žå…¥ã™ã‚‹ãƒ†ã‚¹ãƒˆç·¨ã§ã™ã€‚ å‚考ã«ã—ãŸã¨ã“ã‚ Node.jsã¨Socket.IOã«ã‚ˆã‚‹PCã¨ã‚¹ãƒžãƒ›ãƒ–ラウザã®ãƒšã‚¢ãƒªãƒ³ã‚°ãƒ‡ãƒ¢ Electron 㧠jQuery をスマートã«èªã¿è¾¼ã‚€æ–¹æ³• ã‚„ã‚ŠãŸã„ã“㨠スマホã§ãƒªãƒ¢ãƒ¼ãƒˆæ“作 Electronアプリã¨é€£å‹•ã™ã‚‹ã“㨠ã¨ã‚Šã‚ãˆãšã€å‹•ã‹ã—ã¦ã¿ã‚‹ å‰ææ¡ä»¶: Node.jsã‚„Electronã®ã‚ã‚Œã“ã‚ŒãŒæ¸ˆã‚“ã§ã„ã‚‹ã“ã¨ã€‚ ã¾ã ã®å ´åˆã¯ã€ã‚³ãƒãƒ©ã‚’å‚ç…§ã™ã‚‹ã¨ã„ã„ã§ã—ょã†ã€‚ ã•ã£ããã€Node.jsã¨Socket.IOã«ã‚ˆã‚‹PCã¨ã‚¹ãƒžãƒ›ãƒ–ラウザã®ãƒšã‚¢ãƒªãƒ³ã‚°ãƒ‡ãƒ¢ã®ã‚³ãƒ¼ãƒ‰ã‚’ダウンãƒãƒ¼ãƒ‰ã—ã€é©å½“ãªç®‡æ‰€ã«è§£å‡ã—ã¾ã™ã€‚ 組ã¿è¾¼ã¿äºˆå®šã®Electron内ã«ã€å…ˆã»ã©è§£å‡ã—ãŸã‚³ãƒ¼ãƒ‰å…¨éƒ¨ã‚³ãƒ”ーã—ã€Electronã®ãƒ¡ã‚¤ãƒ³ãƒ•ã‚¡ã‚¤ãƒ«ã¸ã€Œserver.js → index.jsã€ã¸ç§»æ¤ã—ã¾ã™ã€‚ ... // ã“ã“ã‹ã‚‰ // サーãƒãƒ¼æ§‹ç¯‰ var ht
![Electronã§Socket.ioã‚’å°Žå…¥ã—ã¦ã¿ã‚‹ [テスト編] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/896910ad9e738db6d23d7c0cd201f7116caf3010/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9RWxlY3Ryb24lRTMlODElQTdTb2NrZXQuaW8lRTMlODIlOTIlRTUlQjAlOEUlRTUlODUlQTUlRTMlODElOTclRTMlODElQTYlRTMlODElQkYlRTMlODIlOEIlMjAlNUIlRTMlODMlODYlRTMlODIlQjklRTMlODMlODglRTclQjclQTglNUQmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTViMTg5NWM1YjRkMGZhYmVmMGRjZWM3ZDA1ZDJlYTA0%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBqYWNrLWxvdyZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NmE0MzNiNGIwMWY1YTBlOWYxYWMwNDlkMzdhNzM3ZDg%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Df5a6884f5393e7201c4ede18cc5d7877)
Electron+Vue.js+NestJS+TypeScriptã§ãƒ‡ã‚¹ã‚¯ãƒˆãƒƒãƒ—アプリã®ã²ãªåž‹ã‚’作る。 - Qiita
Electron+Vue.js+NestJS+TypeScriptã§ãƒ‡ã‚¹ã‚¯ãƒˆãƒƒãƒ—アプリã®ã²ãªåž‹ã‚’作る。TypeScriptVue.jsElectronNestJS
electron 製アプリを DesktopBridge 㧠Microsoft ストアã«å‡ºã›ã‚‹ã‚ˆã†ã«ã—ã¦ã¿ã‚ˆã† - ã‹ãšãã®Blog@hatena
詳細ã¯ã€ã“ã¡ã‚‰ã®ãƒ–ãƒã‚°è¨˜äº‹ã«ã‚ã‚Šã¾ã™ã€‚ Convert your Electron app using the Desktop Bridge – App Consult Team ã“ã®æ‰‹é †ã«æ²¿ã£ã¦ã‚„ã£ã¦ã¿ã¾ã™ã€‚ Node.js ã®ã‚¤ãƒ³ã‚¹ãƒˆãƒ¼ãƒ« ã“ã‚ŒãŒç„¡ã„ã¨å§‹ã¾ã‚Šã¾ã›ã‚“ã。 Node.js electron ã®ã‚¯ã‚¤ãƒƒã‚¯ã‚¹ã‚¿ãƒ¼ãƒˆãƒ—ãƒã‚¸ã‚§ã‚¯ãƒˆã‚’å–ã£ã¦ãã‚‹ 雛形ãŒã‚ã‚‹ã¨ã„ã†ã®ã¯ç´ 晴らã—ã„ã§ã™ã。ã¨ã„ã†ã“ã¨ã§ã‚¯ãƒãƒ¼ãƒ³ã—ã¾ã™ã€‚ git clone https://github.com/electron/electron-quick-start åˆæœŸè¨å®š ã§ã¯ä»¥ä¸‹ã®ã‚³ãƒžãƒ³ãƒ‰ã‚’打ã£ã¦å„種 npm パッケージをå–ã£ã¦ãã¾ã™ã€‚ cd electron-quick-start npm install å‹•ä½œç¢ºèª ä»¥ä¸‹ã®ã‚³ãƒžãƒ³ãƒ‰ã§å‹•ä½œç¢ºèªãŒå‡ºæ¥ã¾ã™ã€‚ npm start exe を作æˆã—㦠appx ã«ãƒ‘ッケージン
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
How to Use Electron.js for Building Desktop Applications with JavaScript, HTML, and CSS
Build an Electron app with Typescript and React
Is it possible to create a tcp client with electron
GitHub - JustMonk/electron-tpc-chat: Simple TCP-chat with electron GUI
electron-builder 入門 (Apr, 2021) - Qiita
Electron ã§ä½œã‚‹ デスクトップアプリケーション
Chirp | Jack Hanford
Electron+TypeScript+Express.jsã§web-apiを作る - Qiita
socket.io-client
{{#tags}}- {{label}}
{{/tags}}