CODE

ElectronとVueでメモ帳アプリを作ろう【n○te風】

ElectronとVueでメモ帳アプリを作ろう【n○te風】

 

 

悩む人
Electron使ってみたい。デスクトップアプリを作ってみたい。

 

そんな方向けの記事になっています。

 

✔︎記事の信頼性
この記事を書いている僕は文系大学生でしたが、プログラミングを学習して、Web系エンジニアとして東京の自社開発会社さんで内定をいただきました。

 

■少し宣伝■
もし文系から新卒でエンジニア就活しよう!って方は、noteが参考になると思うので、そちらもご覧ください。
>>文系大学生でも新卒エンジニア内定を勝ち取る作戦【面接テンプレ付き】
バッチャンnoteの記事内容

 

というわけで、今回はElectronがどんなものかを把握しつつ、自作で『簡単なn○te風のメモアプリ』を作ってみましょう。

 

▼完成はこんな感じ

Electronメモアプリ完成画像

 

とても簡単で1時間もあればできてしまうと思います。それでは、やってみましょう。

 

Electronとは

 

ザックリ言うと、HTMLやCSS、JavaScriptなどのWeb言語でデスクトップアプリが作れてしまう優れもの。

 

今ではあまり有名ではありませんが、プログラミングエディターの定番『VScode』や『Atom』もElectronで作られているようです。

 

パッケージ化すれば、Mac、Windows、Linuxどれにも対応していますし、配布もできるのは面白そうですよね。

 

また、今回『CONSOLE DOT LOG』の記事を参考に改良させていただいております。

 

この方の記事では、Electronのバージョンの違いで、上手く作動しないようだったのでJavaScriptでカバーしました。

 

バッチャン
Webの言語だけでできるのありがたい。

 

Electronでメモアプリを作る手順

 

まず、今回使う言語の紹介です。できる限り流れも解説しているので、初見でもできると思います。

・Electron
・HTML
・CSS
・JavaScript
・Bootstrap
・Vue

 

npmコマンドを使うので、node.jsがダウンロードできているかをターミナルなどで確認しましょう。

 

こんな感じで出てくれば準備OKです。

 

インストールや設定

 

今回はお試しということなので、テンプレを公式が作ってくれているので、それをgitでクローンしましょう。

 

 

クローン(ダウンロード)できたら、electron-quick-startファイルができているか確認したら、自由に変更してください。

(僕は『n0te』という名前にします。)

 

名前をつけたフォルダに移動して、npmで一式ダウンロードします。

 

これでElectron自体は動くので、一度画面を見てみましょう!

 

デスクトップにアプリが開いて『Hello World』が出ていれば、成功ですよ〜。

 

ElectronでHelloWorldの画像

 

バッチャン
これであなたもElectron初心者の仲間入り!

 

Electron設定

 

Electronの設定を『main.js』で様々な変更をすることができます。

 

例えば、ウィンドウのサイズや位置、アプリアイコン設定などのようにできるので、気になる方は調べてみてください。

 

今回は最低限、ここだけは!という部分を書いておきます。

 

main.jsのnodeIntegration: trueにしましょう。

nodeintegrationをtrueにする画像

 

これはElectronのバージョン5から変わった仕様なので、僕はつまづきました。

 

これをtrueにすることで、nodeがElectronに入ってくることを許す記述です。

 

ただし、nodeでファイル操作できてしまうので、パッケージしたアプリをネットなどに公開する場合は気をつけた方がいいようです。

 

同様に、『index.html』のContent-Security-Policyをコメントにしましょう

 

こちらもクロスサイトスクリプティングを防ぐためのものなので、ネットに公開しない限り大丈夫なので、外しましょう。

 

残っていると保存処理ができないので、注意してください。

 

ちなみに、使い慣れたWebページのディベロッパーツールが使いたい方は

『main.js』のmainWindow.webContents.openDevTools() のコメントを外すと、初期にディベロッパーツールを開くことができます。

 

Electronのディベロッパーツールの画像

 

バッチャン
わざとエラーを出しているので、気にしないでください。笑

 

そのほかの設定

 

これでElectronの設定は終わったので、それ以外の設定(VueやBootstrap)していきましょう。

 

まずは、VueとBootstrapをインストールします。

 

『 index.html』にBootstrap、CSS、Vueを読み込みます。

 

読み込み順番の差で「Bootstrapが効かない」とかあるので、気をつけてください。

 

Bootstrapにはjsは使用しません。というのも、今回はVueと素のjsを使うからです。

 

デザインしていく

 

デザインですが、僕のコードHTMLとCSSは最後に貼っておくので、コピペしてもらっても構いません。

 

 

直下にstyle.cssを新規ファイルで作成して、デザインを作りましょう。

 

 

ちなみに、フォントやカラーは本家と同じです。笑

 

デザインはできました。見てみましょう。

 

Electronでコーディング中の画像

 

バッチャン
色とかフォント変えるだけでここまで本家と似るとは…

 

動きをつけていく

 

あとはVueで『保存』を押したら、テキストファイルができるよな処理ができたら、終わりです。

 

あと一息!頑張ろう!ここもコピペしてもOKですが、一応解説します。

 

Vueは全体を<div id="app">で囲まないと反応しないので、入れます。

  

同様にVueの型をscriptタグで作ります。

 

ここからは処理が複雑?になるので、流れをまず解説しちゃいます。

 

全体の流れとしては

step
1
テキストエリアに文字を入力する▶︎inputTextにデータが入る

step
2
保存ボタンを押す▶︎saveText()のイベントが動く▶︎resultMessageに”保存完了”の文字が表示される

step
3
保存処理▶︎JSでクリックされた瞬間に、そのURLをダウンロードすることで、保存。

という感じです。

 

⓵: テキストエリアに文字を入力する▶︎inputTextにデータが入る

 

v-model="inputText"をテキストエリアに入れて、空っぽのデータを作っておく。

 

 

これで、テキストエリアに文字を入力するとdataの inputTextにその文字が入るようになりました。

 

⓶:保存ボタンを押す▶︎saveText()のイベントが動く▶︎resultMessageに”保存”が表示される

     

 

保存ボタンが押されたら、イベントが動くように、ボタンに『@click="saveText()"』をつけます。

 

dataの下(『,』コンマを忘れずに)にメソッドをまとめる部分を作り、saveText()のイベントの処理を作っておきます。(中の処理は⓷で解説)

 

また、『保存完了』が出るように resultMessageをデータが入る箱を作っておきます。       

 

 

同様に、resultMessageに『保存完了』の文字が表示されるようの処理を書いておく。

 

⓷:保存処理▶︎JSでクリックされた瞬間に<a href=””>を作り出して、そのURLをダウンロードすることで、保存。

 

 

inputTextの中身があれば、保存。なければ、エラーという仕組みです。

 

ザックリ言ってしまえば、「高速でリンクを作って、保存する処理」です。

 

もっと詳しく知りたい方ははこちらの記事が良いと思います。

 

本家のサイトでは、この処理をElectronの処理で行っていましたが、バージョンが変わることで、できなくなったようなので、JavaScriptで代用しました。

 

 

バッチャン
ついに完成!!イェイ!!

 

パッケージ化

 

できたアプリをデスクトップ用アプリとして使いたいですよね。

 

もう本家のnoteを使わなくても、オフラインでn0te心地よくかけます。笑

 

パッケージ化すると他のデスクトップアプリ同様に使うことができます。

 

それでは、ラスト!パッケージ化してみましょう。

 

まず、ディベロッパーツールを使っていた方は消しておいた方がいいですよ。ジャマになってしまいます。

 

確認を追えたら、『electron-packager』をインストールします。

 

実行する前に、パッケージしたいフォルダの『一個上の階層』に移動します。

 

用意ができたら、パッケージ化していきます。

 

▼--platform=〇〇←ここはパッケージ化したいのプラットフォーム
Windows(win32)Mac(darwin)Linux(linux)全てに対応(all)

 

ファイル指定をできたり、どのフォルダに作るか。上書きするか。など指定できます。

 

できなければ「electron-packager パッケージ化」と調べれば、環境に合わせた方法が出てくるでしょう。

 

実行してみて、できていれば完了。

Electronのパッケージした画像

 

Electronのパッケージしたアプリの画像

 

完成!!『.app』を開くと動きます(^○^)

 

バッチャン
おつかれさまでした!!

 

まとめ

 

今回はElectronを使って、note風のメモ帳を作ってみました!

 

Electronはデスクトップアプリを簡単に作れる楽しい技術なので、これをきっかけに使ってみてください!

 

それではよき、Electronライフを!(^○^)

 

最後に今回のコードを貼っておきます。参考にどうぞ。

 

参考にさせていただいたサイトを貼っておきます。活用ください。

 

最後まで読んでいただいてありがとうございました!バッチャンでした。

-CODE
-

© 2020 バッチャンネル Powered by AFFINGER5