Firebase を使ったサービスの管理アプリを Electron で作る！

Firebase を使ったサービスの管理アプリを Electron で作る！

Firebase のストレージとデータベースの機能を利用して Web サイトを利用する際に必要になる管理用のアプリを Electron を利用して作成する方法を紹介します。

どうて Electron を使うのか？

Firebase の機能を利用したサービスを作る場合、管理用の機能が必要になる場合がたくさんあります。 管理用のためのアクセスと一般の利用者のアクセスは違う場合が多く、管理用のアクセスではサイトに記事を投稿したり、投稿の変更（修正）をしたり、不要な記事を削除するなど、通常の利用者とは違う操作が必要になります。

これを行うのは限られた利用者（ユーザー）のみで、この権限を悪用されるとサイトの内容が改変されたりしてセキュリティ上の問題となります。

もちろん特定のユーザーとしてユーザー認証（ログイン）したユーザのみの利用にすることは言うまでもありません。しかし、パスワードが破られるとアクセスが可能になってしまいます。

完全なセキュリティ対策は無いものの、もう少し高いセキュリティを考えると、管理用の機能はインターネットに公開しないと言う対策は一つの方法です。つまり、インターネットではなく管理用の PC にアプリを入れて管理するという方法の方がより安全ということになります。

インターネットから管理できる方が便利ですが、安全を優先する場合にはデスクトップアプリの方が良いということになります。そこで、デスクトップアプリを Electron を利用して作る方法を取り上げてみました。

Electron の正体は何か？

ここで Electron について簡単に紹介しておきます。 Electron は簡単に言うと、Web ブラウザの基本機能を使ってアプリを動かす仕組みです。通常は、Web ブラウザで指定した URL にアクセスする仕組みです。

実際には、Web ブラウザは使いませんが、Web ブラウザの基本機能を取り込んでアプリの専用の UI として利用しています。従って、Web アプリを開発する仕組みの、React や Vue などのフレームワークを利用して開発できるという大きなメリットがあります。

Electron を利用したアプリとして、よく利用されるのはマイクロソフトの VSCOD などがあります。 Web アプリを作る要領で、Windows、Mac、Linux のアプリを簡単に作ることができます。つまり、管理機能の部分だけを切り離して Electron のアプリにすることで、Firebase を利用したブログサービスの管理アプリとして利用可能になります。

Vue を利用して Electron のアプリを作る

今回は、Vue のフレームワークを利用して Electron のアプリを作ってみます。 React でももちろんアプリを作成する事ができますが、Vue を使った方が簡単に作れるのでまずは、Vue を使う方法を紹介します。

Vue を利用すると、「vue cli」で Electron のアプリを作成するための準備を自動でやってくれます。

$ vue add electron-builder

(*)事前に、vue cliをインストールして、vue のプロジェクトを作っておく必要があります。その上で、そのプロジェクトに、electron-build*を追加する形になります。

$ sudo npm install -g ＠vue/cli

(*) Windoes の場合は「npm install -g ＠vue/cli」

$ vue create [プロジェクト名]

これで、Electron を使うための基本設定ができます。

$ vue run electron:serve

を実行すると、通常の Vue を利用したアプリの代わりに、ウインドウが立ち上がります。 Vue のサンプルプロジェクトが、アプリのウインドの中で動作しているのが確認できます。

Vue のアプリを完成させる！

あとは、Vue のアプリを完成させるということになります。 今週は、ブログアプリの管理を行う機能の実装を詳しく紹介していく予定です。

実装する機能は、以下の通りです

＊　Firebase ストレージのファイルの管理（アップロード、更新、削除）

＊　Firebase ストレージの Markdown ファイルからメタデータの抽出

＊　抽出したメタデータを元に Firebase のデータベースにサマリを作成

この機能が実現できると、あとは、作成したデータを元に記事を表示する一般利用者が利用する機能を実現すればサービスが完成します。

まとめ

今週は、Electron を利用して、ブログサービスの管理アプリを作成する方法を詳しく紹介していきます。Electron を使えば、Web アプリを開発する要領でデスクトップアプリを簡単に開発する事が可能になります。Windows、Linux、Mac OS で動作するアプリが同じプログラムから作成できるのは大きな魅力です。（＊）Mac OS 版のアプリを作るには Mac が必要です

デスクトップのアプリにすることで、インターネットからの不正アクセスに対するセキュリティは大幅に改善します。