https://blogenist.jp/tags/electron/Recent content in Electron on Blogenist -ブロゲニスト-Hugo -- gohugo.iojaFri, 22 Mar 2024 21:32:11 +0900https://blogenist.jp/2024/03/22/12072/Fri, 22 Mar 2024 21:32:11 +0900https://blogenist.jp/2024/03/22/12072/<img src="https://blogenist.jp/wp-content/uploads/2024/04/win-nvm-eye.png" alt="Featured image of post 【Scoopで簡単導入】WindowsでNodejsのバージョン管理を可能にしてくれるnvmのインストール方法と使い方" /><h2 id="nodejsのバージョンを管理したい">nodejsのバージョンを管理したい </h2><div> <p>Nodejsを使って開発を行っていると、案件毎に使用しているNodejsのバージョンが異なり切り替えをする必要が出てくると思います。</p> <p>MacやLinux環境だとnodenvなどを使って簡単に切り替える事が出来るのですが、Scoopを使ってWindowsのパッケージ管理をしている場合、nodenvが対応していないので導入する事が出来ませんorz</p>https://blogenist.jp/2019/09/21/9263/Sat, 21 Sep 2019 14:32:16 +0900https://blogenist.jp/2019/09/21/9263/<img src="https://blogenist.jp/wp-content/uploads/2019/09/vuetifyTypeScriptErrorEye.png" alt="Featured image of post 【TypeScript】Vuetifyを入れた際の「implicitly has an 'any' type.」のビルドエラーの原因と解決方法【Vue-cli3】" /><h2 id="vuetifyでtypescriptエラー">VuetifyでTypeScriptエラー </h2><div> <h3 id="vue-cli3で簡単に導入可能">Vue-cli3で簡単に導入可能 </h3> <p><strong>Vue-cli3</strong>を利用すると、簡単にプロジェクトに<strong>Vuetify</strong>を導入することが可能になります。</p> <p> <figure class="code-block"> <figcaption class="code-block__title">vue add vuetify</figcaption> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">📦 Installing vue-cli-plugin-vuetify... </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">yarn add v1.17.3 </span></span><span class="line"><span class="cl"><span class="o">[</span>1/4<span class="o">]</span> 🔍 Resolving packages... </span></span><span class="line"><span class="cl"><span class="o">[</span>2/4<span class="o">]</span> 🚚 Fetching packages... </span></span><span class="line"><span class="cl"><span class="o">[</span>3/4<span class="o">]</span> 🔗 Linking dependencies... </span></span><span class="line"><span class="cl"><span class="o">[</span>4/4<span class="o">]</span> 🔨 Building fresh packages... </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">success Saved lockfile. </span></span><span class="line"><span class="cl">success Saved <span class="m">1</span> new dependency. </span></span><span class="line"><span class="cl">info Direct dependencies </span></span><span class="line"><span class="cl">└─ vue-cli-plugin-vuetify@0.6.3 </span></span><span class="line"><span class="cl">info All dependencies </span></span><span class="line"><span class="cl">└─ vue-cli-plugin-vuetify@0.6.3 </span></span><span class="line"><span class="cl">✨ Done in 2.79s. </span></span><span class="line"><span class="cl">✔ Successfully installed plugin: vue-cli-plugin-vuetify </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">? Choose a preset: Default <span class="o">(</span>recommended<span class="o">)</span> </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">🚀 Invoking generator <span class="k">for</span> vue-cli-plugin-vuetify... </span></span><span class="line"><span class="cl">📦 Installing additional dependencies... </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">yarn install v1.17.3 </span></span><span class="line"><span class="cl"><span class="o">[</span>1/4<span class="o">]</span> 🔍 Resolving packages... </span></span><span class="line"><span class="cl"><span class="o">[</span>2/4<span class="o">]</span> 🚚 Fetching packages... </span></span><span class="line"><span class="cl"><span class="o">[</span>3/4<span class="o">]</span> 🔗 Linking dependencies... </span></span><span class="line"><span class="cl"><span class="o">[</span>4/4<span class="o">]</span> 🔨 Building fresh packages... </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">success Saved lockfile. </span></span><span class="line"><span class="cl">✨ Done in 4.77s. </span></span><span class="line"><span class="cl">⚓ Running completion hooks... </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">✔ Successfully invoked generator <span class="k">for</span> plugin: vue-cli-plugin-vuetify</span></span></code></pre></div> </figure></p>https://blogenist.jp/2019/09/17/9221/Tue, 17 Sep 2019 01:21:10 +0900https://blogenist.jp/2019/09/17/9221/<img src="https://blogenist.jp/wp-content/uploads/2019/09/electronVueWithGoogleAnalyticsEye.png" alt="Featured image of post 【universal-analytics】ElectronにGoogleAnalyticsを導入して機能の利用・アクセス解析をする方法【Vue-cli】" /><h2 id="electronアプリケーションにgoogleanalyticsを導入したい">ElectronアプリケーションにGoogleAnalyticsを導入したい </h2><div> <h3 id="簡単に導入出来ると思ってた時期が僕にもありました">簡単に導入出来ると思ってた時期が僕にもありました。 </h3> <p><strong>Electron</strong>でアプリケーションを作る際に、公開することを見越して<strong>アクセス解析</strong>を仕込もうと思いました。</p> <p>Electronも<strong>Webの技術</strong>で作成されているので、簡単に入れれるだろうと思っていましたが、<strong>結構ハマった</strong>ので備忘録として記事に残したいと思います。</p>https://blogenist.jp/2019/09/11/9214/Wed, 11 Sep 2019 22:22:57 +0900https://blogenist.jp/2019/09/11/9214/<img src="https://blogenist.jp/wp-content/uploads/2019/09/electronVueCliWithPugEye.png" alt="Featured image of post 【簡単瞬殺】vue-cliでpugを導入して記述量を半分以下に減らす方法【Electron】" /><h2 id="pugでvuejsを書こう">PugでVue.jsを書こう </h2><div> <p><strong>Pug</strong>については以前ご紹介しています。</p> <a class="nlink-card" href="https://blogenist.jp/2019/06/13/8558/"> <span class="nlink-card__thumb"><img src="https://blogenist.jp/wp-content/uploads/2019/06/nuxtJsWithPugEye.png" alt="" loading="lazy"></span> <span class="nlink-card__body"> <span class="nlink-card__label">関連記事</span> <span class="nlink-card__title">【pug導入編】今流行りの「Nuxt.js」を使ってサーバーサイドレンダリング(SSR)をしてみよう【Vue.js】</span> <span class="nlink-card__meta"> <span><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-calendar-time" width="56" height="56" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z"/> <path d="M11.795 21h-6.795a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v4" /> <circle cx="18" cy="18" r="4" /> <path d="M15 3v4" /> <path d="M7 3v4" /> <path d="M3 11h16" /> <path d="M18 16.496v1.504l1 1" /> </svg>2019/06/13</span> <span><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file-text" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M14 3v4a1 1 0 0 0 1 1h4" /> <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /> <line x1="9" y1="9" x2="10" y2="9" /> <line x1="9" y1="13" x2="15" y2="13" /> <line x1="9" y1="17" x2="15" y2="17" /> </svg> 1187文字</span> <span><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-clock" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z"/> <circle cx="12" cy="12" r="9" /> <polyline points="12 7 12 12 15 15" /> </svg> 約3分で読めます</span> </span> </span> </a> <p>今回は<strong>Vue-cli</strong>を利用して、ElectronプロジェクトにPugを導入する方法をご紹介します。</p>https://blogenist.jp/2019/09/09/9157/Mon, 09 Sep 2019 23:01:37 +0900https://blogenist.jp/2019/09/09/9157/<img src="https://blogenist.jp/wp-content/uploads/2019/09/electronHiddenTitlebarEye.png" alt="Featured image of post 【Vue.js】Electronのタイトルバーを消す方法【ドラッグ移動も対応】" /><h2 id="electronアプリのタイトルバーを消したい">Electronアプリのタイトルバーを消したい </h2><div> <p>Electron製のアプリケーションを作るとデフォルトではこのように、アプリケーション名が<strong>タイトルバー</strong>に表示されます。</p> <p><img src="https://blogenist.jp/wp-content/uploads/2019/09/electronAdQquasar6.png" alt="" width="3350" height="2046" class="alignnone size-full wp-image-9150" /></p> <p>しかし、正直なところデザイン的には<strong>タイトルバーは表示されなくても良い情報</strong>なので消したいですよね。</p>https://blogenist.jp/2019/09/08/9128/Sun, 08 Sep 2019 21:02:13 +0900https://blogenist.jp/2019/09/08/9128/<img src="https://blogenist.jp/wp-content/uploads/2019/09/electronAdQquasarEye.png" alt="Featured image of post 【Vue.jsのUIフレームワーク】Electronアプリのデザインフレームワークに「Quasar」をインストール・導入する方法" /><h2 id="vueのuiフレームワークはquasarで決まり">VueのUIフレームワークは「Quasar」で決まり </h2><div> <h3 id="沢山あって迷う問題">沢山あって迷う問題 </h3> <p>先日、<strong>Vue.js</strong>を使う中で、<strong>UIフレームワーク</strong>を何にするかで悩みました。</p> <p><a href="https://vuetifyjs.com/ja/" target="_brank">Vuetify</a>&nbsp;<i class="fa fa-external-link" aria-hidden="true"></i>や<a href="https://bootstrap-vue.js.org/" target="_brank">Bootstrap-Vue</a>&nbsp;<i class="fa fa-external-link" aria-hidden="true"></i>、<a href="https://buefy.org/" target="_brank">Buefy</a>&nbsp;<i class="fa fa-external-link" aria-hidden="true"></i>、<a href="https://element.eleme.io/#/en-US" target="_brank">Element</a>&nbsp;<i class="fa fa-external-link" aria-hidden="true"></i>などなど、様々なものがありますが、その中でもQuasarがダントツで使いやすい&コンポーネントの数が膨大だったので使ってみる事にしました。</p>https://blogenist.jp/2019/09/06/9121/Fri, 06 Sep 2019 22:51:15 +0900https://blogenist.jp/2019/09/06/9121/<img src="https://blogenist.jp/wp-content/uploads/2019/09/electronWithVueIconSettingEye.png" alt="Featured image of post 【自作デスクトップアプリ】Electronにアイコンを設定する方法【Vue.js】" /><h2 id="アプリケーションアイコンを設定しよう">アプリケーションアイコンを設定しよう </h2><div> <p>前回、<code>Electron</code> + <code>Vue-cli</code>を用いた環境構築方法についてご紹介しました。</p> <a class="nlink-card" href="https://blogenist.jp/2019/09/05/9076/"> <span class="nlink-card__thumb"><img src="https://blogenist.jp/wp-content/uploads/2019/09/electronWithVueEye.png" alt="" loading="lazy"></span> <span class="nlink-card__body"> <span class="nlink-card__label">関連記事</span> <span class="nlink-card__title">【デスクトップアプリ】Electron&#43;Vueの環境構築をvue-cliのみで完結してみた【エディターいらず】</span> <span class="nlink-card__meta"> <span><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-calendar-time" width="56" height="56" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z"/> <path d="M11.795 21h-6.795a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v4" /> <circle cx="18" cy="18" r="4" /> <path d="M15 3v4" /> <path d="M7 3v4" /> <path d="M3 11h16" /> <path d="M18 16.496v1.504l1 1" /> </svg>2019/09/05</span> <span><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file-text" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M14 3v4a1 1 0 0 0 1 1h4" /> <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /> <line x1="9" y1="9" x2="10" y2="9" /> <line x1="9" y1="13" x2="15" y2="13" /> <line x1="9" y1="17" x2="15" y2="17" /> </svg> 2391文字</span> <span><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-clock" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z"/> <circle cx="12" cy="12" r="9" /> <polyline points="12 7 12 12 15 15" /> </svg> 約5分で読めます</span> </span> </span> </a> <p>今回はビルド時に<strong>アプリケーションアイコンを指定する方法</strong>をご紹介します。</p>https://blogenist.jp/2019/09/05/9076/Thu, 05 Sep 2019 22:45:08 +0900https://blogenist.jp/2019/09/05/9076/<img src="https://blogenist.jp/wp-content/uploads/2019/09/electronWithVueEye.png" alt="Featured image of post 【デスクトップアプリ】Electron+Vueの環境構築をvue-cliのみで完結してみた【エディターいらず】" /><h2 id="electron使いたい">Electron使いたい </h2><div> <h3 id="今時のデスクトップアプリはクオリティが高い">今時のデスクトップアプリはクオリティが高い </h3> <p>エンジニアの皆さんは、<strong>Slack</strong>や<strong>Atom</strong>、<strong>VSCode</strong>、<strong>PostMan</strong>を使ったことありますか？</p> <p>使いやすさやデザイン、動作の軽さなどかなり使いやすいアプリケーションだと筆者は思っています。</p>