tag:crieit.net,2005:https://crieit.net/tags/Electron/feed Crieitでタグ「Electron」に投稿された最近の記事 2020-05-10T22:30:35+09:00 https://crieit.net/tags/Electron/feed tag:crieit.net,2005:PublicArticle/15895 2020-05-10T20:43:39+09:00 2020-05-10T22:30:35+09:00 https://crieit.net/posts/electron-vue-5eb7e8ebc5bbc <p>はい、タイトルのまんまです。</p> <p>先ほど、オーディオプレイヤー作ってまたかと言われそうですが、とりあえず書いていきます。<br /> (開発順的にはこっちが先)</p> <h2 id="完成品"><a href="#%E5%AE%8C%E6%88%90%E5%93%81">完成品</a></h2> <p><a href="https://crieit.now.sh/upload_images/c087cafce5f65e0e671c10b2d59f02a95eb7e7c4c75ed.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/c087cafce5f65e0e671c10b2d59f02a95eb7e7c4c75ed.png?mw=700" alt="image" /></a></p> <p>フルスクリーンモード<br /> <a href="https://crieit.now.sh/upload_images/ee09f54b34ee23dcb012c900c3f3278f5eb7e7e20f94c.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/ee09f54b34ee23dcb012c900c3f3278f5eb7e7e20f94c.png?mw=700" alt="image" /></a></p> <h2 id="環境"><a href="#%E7%92%B0%E5%A2%83">環境</a></h2> <ul> <li>Mac Book Pro (Catalina)</li> <li>Node.js(v12.16.1)</li> <li>vue-cli(3系)</li> </ul> <p><a target="_blank" rel="nofollow noopener" href="https://simulatedgreg.gitbooks.io/electron-vue/ja/">ドキュメント: electron-vue 日本語</a><br /> <a target="_blank" rel="nofollow noopener" href="https://www.electronjs.org">ドキュメント: electron</a></p> <p>先ほどと変わってないですね(^^;</p> <h2 id="使用したモジュール"><a href="#%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%9F%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB">使用したモジュール</a></h2> <ul> <li>BootStrap4</li> <li>markdown-it-vue</li> <li>fs(Node.jsに最初から組み込まれている)</li> </ul> <h2 id="仕様など"><a href="#%E4%BB%95%E6%A7%98%E3%81%AA%E3%81%A9">仕様など</a></h2> <p>プレビューと入力エリアのスクロール同期、保存済みファイルの(差分検知後10~20sの)<br /> オートセーブなど、最低限マークダウンエディターに必要なものは、追加しました。</p> <p>それに加えて、Ctrl + S などデスクトップアプリならではの、ショートカットも実装し、Qiitaのスライドモード(<code>---</code>や<code>***</code>でsplitしてスライド用の配列を作る)のようなものも作成しました。</p> <p>また、デスクトップである利点を生かして、フルスクリーン表示で共有できたら良いと思いwebkitのフルスクリーンの処理について調べて、実装してみました。<br /> (electronは、Chromiumベースなので、どのOSの特殊な処理でもWebKitだけカバー、もしくは、Chromeを想定して開発すればいいのも利点?)</p> <h2 id="振り返り"><a href="#%E6%8C%AF%E3%82%8A%E8%BF%94%E3%82%8A">振り返り</a></h2> <p>今後の改良では、使用者がトークンを設定して、QiitaやmicroCMSに気軽に投稿しやすくなる機能も作成したいと思っています。</p> <p>また、fsモジュールの書き方が少し読みにくいので、もう少し、node.jsのコアな機能について学ぶ必要があると感じました。</p> <p>その他、electronに触れたことで、細かいブラウザのレンダリングエンジンや、JavaScriptのエンジンなど、単なるウェブ開発を少し超えたところの歴史や文化にも興味を持てたのは良かったと思います。</p> <p>最近だと、Chromium版のedgeなどでChromiumが使われる機会が増えているので、今後どんな発展をしていくか、またそれらに対してユーザー、エンジニアの両面の立場から関わって行けることに楽しさを感じている今日この頃です。</p> taka1156 tag:crieit.net,2005:PublicArticle/15894 2020-05-10T17:41:44+09:00 2020-05-11T05:55:49+09:00 https://crieit.net/posts/electron-vue <h1 id="Electron-Vueについて"><a href="#Electron-Vue%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6">Electron-Vueについて</a></h1> <h2 id="なにそれ"><a href="#%E3%81%AA%E3%81%AB%E3%81%9D%E3%82%8C">なにそれ</a></h2> <p>electronというフロントエンド技術で、デスクトップアプリを作れるフレームワークがあり<br /> それをvueで記述してビルドできるようにしてくれたもの(+ cliによる雛形作成)</p> <p>(electronが使われている例: Atom、VScode、SlackとDiscordのデスクトップ版など)</p> <h2 id="環境"><a href="#%E7%92%B0%E5%A2%83">環境</a></h2> <ul> <li>Mac Book Pro (Catalina)</li> <li>Node.js(v12.16.1)</li> <li>vue-cli(3系)</li> </ul> <p><a target="_blank" rel="nofollow noopener" href="https://simulatedgreg.gitbooks.io/electron-vue/ja/">ドキュメント: electron-vue 日本語</a><br /> <a target="_blank" rel="nofollow noopener" href="https://www.electronjs.org">ドキュメント: electron</a></p> <h2 id="始め方"><a href="#%E5%A7%8B%E3%82%81%E6%96%B9">始め方</a></h2> <p><code>vue init simulatedgreg/electron-vue　プロジェクト名</code><br /> で対話形式で、勝手にプロジェクトが出来上がるので、src/renderer以下にゴリゴリとコンポーネントを書く。</p> <p><a href="https://crieit.now.sh/upload_images/5408febd77362bd4ff6c8635bfc643dc5eb7b982723f7.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/5408febd77362bd4ff6c8635bfc643dc5eb7b982723f7.png?mw=700" alt="image" /></a><br /> ※ 灰色はテストで使用した音源[<a target="_blank" rel="nofollow noopener" href="https://dova-s.jp">DOVA-SYNDROME</a>]</p> <ul> <li><p>mainは、主にウィンドウ関連の設定や開発時のプレビューの設定などが入っている。</p></li> <li><p>rendererが主にいじる部分で、vuex、vue-ruterなどは普通のvueと同じ感覚で書くことができる。</p></li> </ul> <h2 id="詰まったところ"><a href="#%E8%A9%B0%E3%81%BE%E3%81%A3%E3%81%9F%E3%81%A8%E3%81%93%E3%82%8D">詰まったところ</a></h2> <ul> <li><p>multispinnerがメンテされてない(githubのセキュリティ警告を気にする人)<br /> listrを使おう<br /> <a target="_blank" rel="nofollow noopener" href="https://github.com/SimulatedGREG/electron-vue/pull/971#issue-3581364">こちら</a>を<del>パクッ</del>参考に作ったもの<a target="_blank" rel="nofollow noopener" href="https://gist.github.com/taka1156/40236fb0afde56205b97814c2ba9ae41">electron-vue build設定</a></p> <p>(※<a target="_blank" rel="nofollow noopener" href="https://github.com/codekirei/node-multispinner">node-multispinner</a>は最後の更新が4~5年前になっている。)</p></li> <li><p>Mac系でプレビューもビルドも失敗する。<br /> index.ejsの<code>if (!process.browser) {</code>を<br /> <code>if (!htmlWebpackPlugin.options.isBrowser && !htmlWebpackPlugin.options.isDevelopment) {</code>に書き換え</p></li> </ul> <p>それ以外は、ドキュメント通りにやればプレビューが見れるはず?<br /> <a href="https://crieit.now.sh/upload_images/ce1d4f6ed1f2654825a853f3a7ec3c895eb7c09515ff4.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/ce1d4f6ed1f2654825a853f3a7ec3c895eb7c09515ff4.png?mw=700" alt="image" /></a></p> <h1 id="オーディオプレイヤーについて"><a href="#%E3%82%AA%E3%83%BC%E3%83%87%E3%82%A3%E3%82%AA%E3%83%97%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6">オーディオプレイヤーについて</a></h1> <h2 id="完成品"><a href="#%E5%AE%8C%E6%88%90%E5%93%81">完成品</a></h2> <p><a href="https://crieit.now.sh/upload_images/c5f50ef0eb56466c74f96294005543705eb7b7bfb65e7.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/c5f50ef0eb56466c74f96294005543705eb7b7bfb65e7.png?mw=700" alt="image" /></a><br /> ※<a target="_blank" rel="nofollow noopener" href="https://gist.github.com/taka1156/05d39982f98659565403b786a5fac31c">現物のサイズはこちら</a></p> <h2 id="使用したモジュール"><a href="#%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%9F%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB">使用したモジュール</a></h2> <ul> <li>electron-vue</li> <li>JsMediaTags</li> </ul> <h2 id="仕様など"><a href="#%E4%BB%95%E6%A7%98%E3%81%AA%E3%81%A9">仕様など</a></h2> <ul> <li><p>基本的には、JavaScriptのAudioオブジェクトを利用して曲の再生、停止を制御しています。</p></li> <li><p>アーティストや曲のアートワークは、<a target="_blank" rel="nofollow noopener" href="https://github.com/aadsm/jsmediatags">JsMediaTags</a>というものを利用して、トラックが遷移するたびに、 ファイルパスを渡して穿り出すという形にしています。</p></li> <li><p>設定はLocalStrageを使用して行う予定(開発中)</p></li> </ul> <h2 id="反省"><a href="#%E5%8F%8D%E7%9C%81">反省</a></h2> <p>vuexの使い方も含めて、課題が色々残っていますが、electron、vue, electron-vueそれぞれのドキュメントを行ったり来たりしながら、自分なりに動けたところは、良かったかなと思っています。</p> <h2 id="最後に"><a href="#%E6%9C%80%E5%BE%8C%E3%81%AB">最後に</a></h2> <p>今後もこまめに成果物を公開していくので、コメント、マサカリなど色々ください〜</p> taka1156